Elementle

Inspiration

Here is a wordle inspired game for guessing a mystery element on the periodic table. I had a class in high school called "Personal Interest". I took this course to self study DSA and learn JS from scratch. This game was the final project and have been improving it since then.

Behind the scenes

Since this game was the final project of my personal interest class, I used excessively the knowledge I had consumed from the online JS course on YouTube. Specifically, in addition to my prior knowledge in HTML and CSS, I used DOM to dynamically manipulate on-screen visuals according to user input. More details available on GitHub.

Example:

// Get the hint button and hint container elements
const hintButton = document.querySelector('.js-hint-button');
const hintContainer = document.querySelector('.js-hint-container');

// Add click event listener to the hint button
hintButton.addEventListener('click', (event) => {
  // Change the content of the hint container when the button is clicked
  event.preventDefault();
  hintContainer.innerHTML = `${getMysteryElement().hint}`;
});

function getMysteryElement() {
  return JSON.parse(localStorage.getItem('mysteryElement'));
}

Since late 2024, mystery element selection is more robust. To illustrate, no element repeats itself as mystery element within at least an 80-day period. Read more about it here.

Link: