Skip to content

Instantly share code, notes, and snippets.

@philsinatra

philsinatra/idm231-ex001.js

Created March 7, 2023 16:23
Show Gist options
  • Save philsinatra/89b683d4e03e1a0b5e1093d55a0278e5 to your computer and use it in GitHub Desktop.
Save philsinatra/89b683d4e03e1a0b5e1093d55a0278e5 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
idm231-ex001.js
import "./style.css";
const color_data = [
{
name: "red",
hex: "#ff0000",
sound: "sound_1",
},
{
name: "white",
hex: "#fff",
sound: "sound_2",
},
{
name: "blue",
hex: "#0000ff",
sound: "sound_3",
},
];
const audio_element = document.getElementById("audio_player");
const button_div = document.querySelector(".buttons");
const select_element = document.querySelector("#color");
let selection_made = false;
function update_ui(selected_color) {
// console.log(selected_color);
const color_object = color_data.filter(
(item) => item.name === selected_color
)[0];
console.log(color_object);
document.body.style.backgroundColor = color_object.hex;
audio_element?.pause();
audio_element.currentTime = 0;
audio_element.src = `/sounds/${color_object.sound}.mp3`;
audio_element.play();
}
function create_select_option(item) {
const option = document.createElement("option");
const option_text = document.createTextNode(item.name);
option.appendChild(option_text);
select_element?.appendChild(option);
}
function create_button(item) {
const button = document.createElement("button");
const button_label = document.createTextNode(item.name);
button.className = item.name;
button.addEventListener("click", () => {
// console.log(button.className);
update_ui(button.className);
console.log(select_element.value);
if (select_element.value !== button.className) {
select_element.value = button.className;
}
});
button.appendChild(button_label);
button_div?.appendChild(button);
}
function add_listeners() {
select_element?.addEventListener("change", (event) => {
// console.log(event);
// console.log(event.target.value);
if (!selection_made) {
selection_made = true;
select_element.options[0].remove();
}
update_ui(event.target.value);
});
}
function create_ui_elements() {
color_data.forEach((item) => {
create_button(item);
create_select_option(item);
});
add_listeners();
}
function init() {
create_ui_elements();
}
window.addEventListener("load", init, false);
Raw
idm231-ex001.md 
npm create vite@latest
<div id="app">
  <form>
    <fieldset>
      <label for="color">Color</label>
      <select name="color" id="color">
        <option value=""></option>
      </select>
    </fieldset>
  </form>
  <div class="buttons"></div>
  <audio id="audio_player"></audio>
</div>
:root {
  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
+ scale: 3;
}

+ select {
+   background-color: black;
+ }
import "./style.css";

const color_data = [
  {
    name: "red",
    hex: "#ff0000",
    sound: "sound_1",
  },
  {
    name: "white",
    hex: "#fff",
    sound: "sound_2",
  },
  {
    name: "blue",
    hex: "#0000ff",
    sound: "sound_3",
  },
];

const select_element = document.querySelector("#color");
const button_div = document.querySelector(".buttons");

function create_select_option(item) {
  const option = document.createElement("option");
  const option_text = document.createTextNode(item.name);
  option.appendChild(option_text);
  select_element?.appendChild(option);
}

function create_button(item) {
  const button = document.createElement("button");
  const button_label = document.createTextNode(item.name);
  button.appendChild(button_label);
  button_div?.appendChild(button);
}

function create_ui_elements() {
  color_data.forEach((item) => {
    create_button(item);
    create_select_option(item);
  });
}

function init() {
  create_ui_elements();
}

window.addEventListener("load", init, false);

Add UI

import "./style.css";

const color_data = [
  {
    name: "red",
    hex: "#ff0000",
    sound: "sound_1",
  },
  {
    name: "white",
    hex: "#fff",
    sound: "sound_2",
  },
  {
    name: "blue",
    hex: "#0000ff",
    sound: "sound_3",
  },
];

+ const audio_element = document.getElementById("audio_player");
const button_div = document.querySelector(".buttons");
const select_element = document.querySelector("#color");

function create_select_option(item) {
  const option = document.createElement("option");
  const option_text = document.createTextNode(item.name);
  option.appendChild(option_text);
  select_element?.appendChild(option);
}

function create_button(item) {
  const button = document.createElement("button");
  const button_label = document.createTextNode(item.name);
+ button.className = item.name;
+ button.addEventListener("click", () => {
+   // console.log(button.className);
+   update_ui(button.className);
+ });
  button.appendChild(button_label);
  button_div?.appendChild(button);
}

+ function add_listeners() {
+   select_element?.addEventListener("change", (event) => {
+     // console.log(event);
+     // console.log(event.target.value);
+     update_ui(event.target.value);
+   });
+ }

function create_ui_elements() {
  color_data.forEach((item) => {
    create_button(item);
    create_select_option(item);
  });
+ add_listeners();
}

function init() {
  create_ui_elements();
}

window.addEventListener("load", init, false);
function update_ui(selected_color) {
  // console.log(selected_color);
  const color_object = color_data.filter(
    (item) => item.name === selected_color
  )[0];
  console.log(color_object);

  document.body.style.backgroundColor = color_object.hex;
  audio_element?.pause();
  audio_element.currentTime = 0;
  audio_element.src = `/sounds/${color_object.sound}.mp3`;
  audio_element.play();
}

Cleanup select values

const audio_element = document.getElementById("audio_player");
const button_div = document.querySelector(".buttons");
const select_element = document.querySelector("#color");
+ let selection_made = false;

function add_listeners() {
  select_element?.addEventListener("change", (event) => {
    // console.log(event);
    // console.log(event.target.value);

+   if (!selection_made) {
+     selection_made = true;
+     select_element.options[0].remove();
+   }

    update_ui(event.target.value);
  });
}

function create_button(item) {
  const button = document.createElement("button");
  const button_label = document.createTextNode(item.name);
  button.className = item.name;
  button.addEventListener("click", () => {
    // console.log(button.className);
    update_ui(button.className);

+   console.log(select_element.value);
+   if (select_element.value !== button.className) {
+     select_element.value = button.className;
+   }
  });
  button.appendChild(button_label);
  button_div?.appendChild(button);
}

Final code

import "./style.css";

const color_data = [
  {
    name: "red",
    hex: "#ff0000",
    sound: "sound_1",
  },
  {
    name: "white",
    hex: "#fff",
    sound: "sound_2",
  },
  {
    name: "blue",
    hex: "#0000ff",
    sound: "sound_3",
  },
];

const audio_element = document.getElementById("audio_player");
const button_div = document.querySelector(".buttons");
const select_element = document.querySelector("#color");
let selection_made = false;

function update_ui(selected_color) {
  // console.log(selected_color);
  const color_object = color_data.filter(
    (item) => item.name === selected_color
  )[0];
  console.log(color_object);

  document.body.style.backgroundColor = color_object.hex;

  audio_element?.pause();
  audio_element.currentTime = 0;
  audio_element.src = `/sounds/${color_object.sound}.mp3`;
  audio_element.play();
}

function create_select_option(item) {
  const option = document.createElement("option");
  const option_text = document.createTextNode(item.name);
  option.appendChild(option_text);
  select_element?.appendChild(option);
}

function create_button(item) {
  const button = document.createElement("button");
  const button_label = document.createTextNode(item.name);
  button.className = item.name;
  button.addEventListener("click", () => {
    // console.log(button.className);
    update_ui(button.className);

    console.log(select_element.value);
    if (select_element.value !== button.className) {
      select_element.value = button.className;
    }
  });
  button.appendChild(button_label);
  button_div?.appendChild(button);
}

function add_listeners() {
  select_element?.addEventListener("change", (event) => {
    // console.log(event);
    // console.log(event.target.value);

    if (!selection_made) {
      selection_made = true;
      select_element.options[0].remove();
    }

    update_ui(event.target.value);
  });
}

function create_ui_elements() {
  color_data.forEach((item) => {
    create_button(item);
    create_select_option(item);
  });
  add_listeners();
}

function init() {
  create_ui_elements();
}

window.addEventListener("load", init, false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment