script.js

"use strict";

const startButton = document.getElementById("start-btn");
const nextButton = document.getElementById("next-btn");
const questionContainerElement = document.getElementById("question-container");
const questionElement = document.getElementById("question");
const answerButtonsElement = document.getElementById("answer-buttons");

// Theme buttons
const lightThemeButton = document.getElementById('light-theme-btn');
const darkThemeButton = document.getElementById('dark-theme-btn');
// Theme body
const mainContainer = document.querySelector('.container');


let shuffledQuestions, currentQuestionIndex;

startButton.addEventListener("click", startGame);

nextButton.addEventListener("click", () => {
  currentQuestionIndex++;
  setNextQuestion();
});

function startGame() {
  startButton.classList.add("hide");
  shuffledQuestions = questions.sort(() => Math.random() - 0.5);
  currentQuestionIndex = 0;
  questionContainerElement.classList.remove("hide");
  setNextQuestion();
}

function setNextQuestion() {
  resetState();
  showQuestion(shuffledQuestions[currentQuestionIndex]);
}

function showQuestion(question) {
  questionElement.innerText = question.question;
  question.answers.forEach((answer) => {
    const button = document.createElement("button");
    button.innerText = answer.text;
    button.classList.add("btn");

    if (answer.correct) {
      button.dataset.correct = answer.correct;
    }

    button.addEventListener("click", selectAnswer);
    answerButtonsElement.appendChild(button);
  });
}

function resetState() {
  clearStatusClass(document.body);
  nextButton.classList.add("hide");

  while (answerButtonsElement.firstChild) {
    answerButtonsElement.removeChild(answerButtonsElement.firstChild);
  }
}

function selectAnswer(e) {
  const selectedButton = e.target;
  const correct = selectedButton.dataset.correct;

  setStatusClass(document.body, correct);

  Array.from(answerButtonsElement.children).forEach((button) => {
    setStatusClass(button, button.dataset.correct);
  });

  if (shuffledQuestions.length > currentQuestionIndex + 1) {
    nextButton.classList.remove("hide");
  } else {
    startButton.innerText = "Restart";
    startButton.classList.remove("hide");
  }
}

function setStatusClass(element, correct) {
  clearStatusClass(element);

  if (correct) {
    element.classList.add("correct");
  } else {
    element.classList.add("wrong");
  }
}

function clearStatusClass(element) {
  element.classList.remove("correct");
  element.classList.remove("wrong");
}

const questions = [
  {
    question: "What is 2 + 2?",
    answers: [
      { text: "4", correct: true },
      { text: "22", correct: false },
    ],
  },

  {
    question: "Who is the best YouTuber?",
    answers: [
      { text: "Web Dev Simplified", correct: true },
      { text: "Traversy Media", correct: true },
      { text: "Dev Ed", correct: true },
      { text: "Fun Fun Function", correct: true },
    ],
  },

  {
    question: "Is web development fun?",
    answers: [
      { text: "Kinda", correct: false },
      { text: "YES!!!", correct: true },
      { text: "Um no", correct: false },
      { text: "IDK", correct: false },
    ],
  },

  {
    question: "What is 4 * 2?",
    answers: [
      { text: "6", correct: false },
      { text: "8", correct: true },
    ],
  },
];


// Check for saved theme preference on page load
window.addEventListener('load', () => {
  const savedDarkMode = localStorage.getItem('darkMode');
  if (savedDarkMode === 'enabled') {
    applyDarkTheme();
  } else {
    applyLightTheme();
  }
});

// Dark theme activation
darkThemeButton.addEventListener('click', () => {
  applyDarkTheme();
  localStorage.setItem('darkMode', 'enabled');
});

// Dark theme deactivation
lightThemeButton.addEventListener('click', () => {
  applyLightTheme();
  localStorage.setItem('darkMode', 'disabled');
});

// Function to apply dark theme styles
function applyDarkTheme() {
  darkThemeButton.style.display = 'none';
  lightThemeButton.style.display = 'initial';
  mainContainer.classList.add('container-dark');
}

// Function to apply light theme styles
function applyLightTheme() {
  darkThemeButton.style.display = 'initial';
  lightThemeButton.style.display = 'none';
  mainContainer.classList.remove('container-dark');
}