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);

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);