script.js

const word = document.getElementById("word");
const text = document.getElementById("text");
const scoreElement = document.getElementById("score");
const timeElement = document.getElementById("time");
const endgameElement = document.getElementById("end-game-container");
const settingsButton = document.getElementById("settings-btn");
const settings = document.getElementById("settings");
const settingsForm = document.getElementById("settings-form");
const difficultySelect = document.getElementById("difficulty");

// List of words for game
const words = [
  "sigh",
  "tense",
  "airplane",
  "ball",
  "pies",
  "juice",
  "warlike",
  "bad",
  "north",
  "dependent",
  "steer",
  "silver",
  "highfalutin",
  "superficial",
  "quince",
  "eight",
  "feeble",
  "admit",
  "drag",
  "loving",
  "sigh",
"tense",
"airplane",
"ball",
"pies",
"juice",
"warlike",
"bad",
"north",
"dependent",
"capture",
"stir",
"vanish",
"wise",
"harbor",
"grain",
"vibrant",
"quality",
"restore",
"whisper",
"feast",
"novel",
"mountain",
"intact",
"glow",
"urgent",
"xerox",
"organize",
"unique",
"yacht",
"quilt",
"jump",
"eager",
"jolly",
"zeal",
"quack",
"limb",
"verify",
"upgrade",
"quaint",
"moody",
"naive",
"keen",
"quiver",
"treat",
"glance",
"reward",
"superb",
"swift",
"color",
"voice",
"humor",
"thirst",
"anchor",
"launch",
"smile",
"puzzle",
"script",
"crystal",
"butter",
"figure",
"renew",
"wisdom",
"precise",
"ghost",
"lunar",
"zephyr",
"crisp",
"grace",
"chill",
"violet",
"bubble",
"spark",
"cozy",
"sunrise",
"twist",
"freedom",
"twirl",
"enchanted",
"flame",
"silence",
"whistle",
"echo",
"gentle",
"zenith",
"effort",
"treasure",
"spirit",
"twinkle",
"delight",
"bloom",
];

let randomWord;
let score = 0;
let time = 10;
// let difficulty = "medium";
let difficulty =
  localStorage.getItem("difficulty") !== null
    ? localStorage.getItem("difficulty")
    : "medium";

const timeInterval = setInterval(updateTime, 1000);

function getRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
}

function addWordToDom() {
  randomWord = getRandomWord();
  word.innerText = randomWord;
}

function updateScore() {
  score++;
  scoreElement.innerText = score;
}

function updateTime() {
  time--;
  timeElement.innerText = time + "s";
  if (time === 0) {
    clearInterval(timeInterval);
    gameOver();
  }
}

function gameOver() {
  endgameElement.innerHTML = `
    <h1>Time ran out</h1>
    <p>Your final score is ${score}</p>
    <button onclick="history.go(0)">Play Again</button>
    `;
  endgameElement.style.display = "flex";
}

text.addEventListener("input", (e) => {
  const insertedText = e.target.value;
  if (insertedText === randomWord) {
    e.target.value = "";
    addWordToDom();
    updateScore();
    if (difficulty === "hard") time += 2;
    else if (difficulty === "medium") time += 3;
    else time += 5;
    updateTime();
  }
});

settingsButton.addEventListener("click", () =>
  settings.classList.toggle("hide")
);
settingsForm.addEventListener("change", (e) => {
  difficulty = e.target.value;
  localStorage.setItem("difficulty", difficulty);
});

// Init
difficultySelect.value = difficulty;
addWordToDom();
text.focus();