Javascript_Advaced

1. Rememberable Method

document.querySelector document.querySelectorAll document.selectByID ele.addEventListener(‘click’, (event) => {event.currentTarget})

1. Fuctions Funtions Functions

In case of making program, cut method, and connect the codes together. (if user action is input Word > search the word in DB > print out on the screen, then make the 3 functions and connect to it. When you need to export the function, just export contain EVENT LISTENER code.

const buttons = document.querySelectorAll('.clickable');

// buttons.forEach((button) => {
//   button.addEventListener('click', (event) => {
//     button.classList.toggle("active");
//   });
// });

const displayClickedElement = (event) => {
  event.currentTarget.classList.toggle("active");
};

const bindButtonToClick = (button) => {
  button.addEventListener('click', displayClickedElement);
};

buttons.forEach(bindButtonToClick);

const addLine = (word) => {
  const table = document.getElementById("results");
  const code = `<li>${word}</li>`;
  table.insertAdjacentHTML("afterbegin", code);
};

const searchWords = (query) => {
  fetch(`https://wagon-dictionary.herokuapp.com/autocomplete/${query}`)
    .then(response => response.json())
    .then((data) => {
      if (data.words) {
        data.words.forEach((word) => {
          addLine(word);
        });
      }
    });
};

const cleanPage = () => {
  const table = document.getElementById("results");
  table.innerHTML = "";
};

const inputWord = () => {
  const input = document.querySelector("#search");
  input.addEventListener("keyup", (event) => {
    const keyword = event.currentTarget.value;
    cleanPage();
    searchWords(keyword);
  });
};

inputWord();