Deep Tech Point - learn tech easy way

April 3, 2025 | Javascript

In this article we’re going to learn how to create Quiz app. We’re going to start with a .HTML, .CSS and then proceed to .JS, where we are going to take a deeper look at the code and explain it.

HTML code is the following:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Quiz App</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div id="quiz-container">
    <h1>JavaScript Quiz</h1>
    <div id="question-container">
      <p id="question">Loading...</p>
      <div id="answer-buttons"></div>
    </div>
    <button id="next-btn">Next</button>
    <p id="score">Score: 0</p>
    <p id="timer">Time Left: 30</p>
  </div>

  <script src="script.js"></script>
</body>
</html>

Here’s the .CSS:

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f4;
  padding: 20px;
}

#quiz-container {
  max-width: 600px;
  margin: 0 auto;
  background: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

button {
  margin-top: 10px;
  padding: 10px 15px;
  border: none;
  background-color: #007bff;
  color: white;
  cursor: pointer;
  border-radius: 5px;
}

button:hover {
  background-color: #0056b3;
}

#answer-buttons button {
  display: block;
  margin: 5px 0;
  width: 100%;
}

Through a Quiz App we’ll pay more attention to JavaScript, especially DOM manipulation, arrays, event handling, and timers. We’ll take it step by step and build on each concept. And now let’s take a look at .JS:

const questions = [
  {
    question: "What does DOM stand for?",
    answers: [
      { text: "Document Object Model", correct: true },
      { text: "Data Object Model", correct: false },
      { text: "Document Oriented Method", correct: false },
      { text: "Desktop Object Management", correct: false }
    ]
  },
  {
    question: "Which keyword is used to declare a variable in JavaScript?",
    answers: [
      { text: "var", correct: true },
      { text: "int", correct: false },
      { text: "let", correct: true },
      { text: "both var and let", correct: true }
    ]
  }
];

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");

let currentQuestionIndex = 0;
let score = 0;
let timeLeft = 30;
let timer;

function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  timeLeft = 30;
  nextButton.innerText = "Next";
  startTimer();
  showQuestion();
}

function startTimer() {
  timer = setInterval(() => {
    timeLeft--;
    timerDisplay.innerText = `Time Left: ${timeLeft}`;
    if (timeLeft <= 0) {
      clearInterval(timer);
      alert("Time's up!");
      showScore();
    }
  }, 1000);
}

function showQuestion() {
  resetState();
  const currentQuestion = questions[currentQuestionIndex];
  questionElement.innerText = currentQuestion.question;
  currentQuestion.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);
    answerButtons.appendChild(button);
  });
}

function resetState() {
  nextButton.style.display = "none";
  answerButtons.innerHTML = "";
}

function selectAnswer(e) {
  const selectedButton = e.target;
  const correct = selectedButton.dataset.correct === "true";
  if (correct) {
    score++;
    scoreDisplay.innerText = `Score: ${score}`;
  }
  Array.from(answerButtons.children).forEach(button => {
    if (button.dataset.correct === "true") {
      button.style.backgroundColor = "green";
    } else {
      button.style.backgroundColor = "red";
    }
    button.disabled = true;
  });
  nextButton.style.display = "block";
}

function showScore() {
  resetState();
  questionElement.innerText = `You scored ${score} out of ${questions.length}`;
  nextButton.innerText = "Play Again";
  nextButton.style.display = "block";
}

nextButton.addEventListener("click", () => {
  if (currentQuestionIndex < questions.length - 1) {
    currentQuestionIndex++;
    showQuestion();
  } else {
    clearInterval(timer);
    showScore();
  }
});

startQuiz();

Let's break the .JS code step by step, but first let's summarize what the code does.

Shows a question with multiple-choice answers
Tracks your score
Has a timer counting down from 30 seconds
Moves to the next question when you click "Next"
Shows your score at the end

Now let’s walk through each part of the code.

An Array of Objects: The Questions Array

const questions = [
  {
    question: "What does DOM stand for?",
    answers: [
      { text: "Document Object Model", correct: true },
      { text: "Data Object Model", correct: false },
      { text: "Document Oriented Method", correct: false },
      { text: "Desktop Object Management", correct: false }
    ]
  },
  ...
];

This is a list of quiz questions - a basic data structure. Each question has:

a question string (the text you’ll see)
an answers array with 4 answer choices
each answer has text (Document Object Model, Data Object Model, ... ) and correct (true or false)

So you’re working with an array ([]) of objects ({}) that each contain a string and an array of more objects (the answer choices).

Grabbing HTML Elements

const questionElement = document.getElementById("question");
const answerButtons = document.getElementById("answer-buttons");
const nextButton = document.getElementById("next-btn");
const scoreDisplay = document.getElementById("score");
const timerDisplay = document.getElementById("timer");

Here we’re getting elements from the HTML page using their id. This allows JavaScript to change their content later.
For example, questionElement lets us change the question text, answerButtons is where we add buttons for each answer, nextButton moves to the next question, scoreDisplay shows your score, timerDisplay shows the countdown.

Setting Initial Values

let currentQuestionIndex = 0; // variable that keeps track of which question you're on 
let score = 0; // variable of your current score 
let timeLeft = 30; // variable of how much time is left 
let timer; // variable of a reference to the countdown

Start the Quiz

function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  timeLeft = 30;
  nextButton.innerText = "Next";
  startTimer();
  showQuestion();
}

This function sets everything back to the beginning when you start or restart the quiz.

function startQuiz() {
  currentQuestionIndex = 0;
  score = 0;
  timeLeft = 30;
  nextButton.innerText = "Next";
  startTimer();
  showQuestion();
}

First, we define a function called startQuiz, then with the currentQuestionIndex = 0; we
define which question we're starting on - since 0 means the first question in the array, we start with the first question - and also keep track of which question to show next. score = 0; resets the score back to 0. Why? So that if you're playing again, you don’t keep the score from the previous round. Fresh game, fresh score! timeLeft = 30; resets the timer to 30 seconds - just like the score, we want to start the timer fresh each time the quiz begins. Later in the code, the timer counts down from this number. nextButton.innerText = "Next"; sets the text of the “Next” button to say "Next". This is because later, at the end of the quiz, the same button gets changed to say “Play Again”, and we’re making sure it says “Next” again when a new game starts. startTimer(); and showQuestion(); call another two functions - we'll go through these two in a bit.

In short, function startQuiz() sets everything back to the beginning when you start or restart the quiz. It resets the score and timer, calls startTimer() to begin countdown and calls showQuestion() to show the first question.

function startTimer() starts the countdown

function startTimer() {
  timer = setInterval(() => {
    timeLeft--;
    timerDisplay.innerText = `Time Left: ${timeLeft}`;
    if (timeLeft <= 0) {
      clearInterval(timer);
      alert("Time's up!");
      showScore();
    }
  }, 1000);
}

So, function startTimer() creates a function named startTimer. When we call it, like we did in startQuiz(), it starts the countdown. Let's go through the function line by line:
timer = setInterval(() => { ... }, 1000); creates the magic that makes something happen every second. setInterval() runs the function inside it over and over; 1000 = 1000 milliseconds = 1 second, which means: “Run the code inside this arrow function every second.”

Inside the setInterval function we have timeLeft--; which decreases the timeLeft variable by 1. It's the same as saying: timeLeft = timeLeft - 1; so every second, it counts down by one (e.g. 30 → 29 → 28…) And then timerDisplay.innerText = `Time Left: ${timeLeft}`; updates what you see on the page. It changes the text inside the element with ID timer to show the new time.

if (timeLeft <= 0) {
  clearInterval(timer);
  alert("Time's up!");
  showScore();
}

This part says: if the time has run out (0 or less)... clearInterval(timer); stop the timer from continuing, and pop alert box: "Time's up!" showScore() function ends the quiz and shows your score.

In plain English startTimer() starts counting down from 30. Every second, it takes 1 second away and updates the screen. If time hits 0, it stops the clock, shows a message, and shows the player’s score.

function showQuestion() displays the current quiz question

function showQuestion() {
  resetState();
  const currentQuestion = questions[currentQuestionIndex];
  questionElement.innerText = currentQuestion.question;
  currentQuestion.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);
    answerButtons.appendChild(button);
  });
}

resetState(); clears out the old answer buttons and hides the "Next" button. Without this line, old answers would stack up below each question.

const currentQuestion = questions[currentQuestionIndex]; grabs the current question from the questions array. Remember that the currentQuestionIndex keeps track of which one we’re on (starts at 0). So if we’re on the first question, it grabs the one at questions[0].

questionElement.innerText = currentQuestion.question; updates the question text in the HTML - it replaces "Loading..." or whatever was there with the real question.

currentQuestion.answers.forEach(answer => {
  const button = document.createElement("button");
  button.innerText = answer.text;
  ...
});

This loop goes through every answer in the answers array. And for each one, it:

Creates a new button with document.createElement("button")
Sets the button text to the answer (like "Document Object Model")
Adds a class btn (for styling)
If it's the correct answer, it stores that info inside the button using dataset.correct
Adds a click event so it knows when the user chooses this answer
Adds the button to the page inside the answer container

In plain English showQuestion() clears out the old stuff, it gets the current question and its answers, and puts the question on the screen. Then it creates a button for each answer and show them.

function resetState();

resetState(); clears out the old answer buttons and hides the "Next" button. Without this line, old answers would stack up below each question.

Selecting an answer with function selectAnswer(e)

Let's dive into selectAnswer() — this is where the quiz reacts when you choose an answer:

function selectAnswer(e) {
  const selectedButton = e.target;
  const correct = selectedButton.dataset.correct === "true";
  if (correct) {
    score++;
    scoreDisplay.innerText = `Score: ${score}`;
  }
  Array.from(answerButtons.children).forEach(button => {
    if (button.dataset.correct === "true") {
      button.style.backgroundColor = "green";
    } else {
      button.style.backgroundColor = "red";
    }
    button.disabled = true;
  });
  nextButton.style.display = "block";
}

This function runs when you click one of the answer buttons. Earlier in showQuestion(), we had button.addEventListener("click", selectAnswer); which tells the browser to run the selectAnswer() function if someone clicks this button.

Now let's break the function selectAnswer(e) down step by step. We're defining a function that receives an event object e. This e contains information about what was clicked, among other things: const selectedButton = e.target; where e.target is the button you clicked on. We're saving that button in a variable called selectedButton so we can use it more easily.

This line const correct = selectedButton.dataset.correct === "true"; checks if the button has a data-correct="true" attribute. If it does, that means it's the correct answer! We store the result in a variable correct, which will be true or false. dataset.correct is a string (not boolean), which is why we check === "true". That’s great detail to call out for readers wondering why it’s not just if (selectedButton.dataset.correct).

Remember: earlier in showQuestion() we added this line for correct answers: button.dataset.correct = answer.correct; and that’s where this “correct” info comes from.

if (correct) { score++; ... } means if the button was correct, we increase the score (score++) and we
update the score display on the page scoreDisplay.innerText = `Score: ${score}`;. We also highlight all answers - if the button is correct, it turns green and if it's wrong, it turns red. It disables the buttons so you can't click another answer:

Array.from(answerButtons.children).forEach(button => {
  if (button.dataset.correct === "true") {
    button.style.backgroundColor = "green";
  } else {
    button.style.backgroundColor = "red";
  }
  button.disabled = true;
});

This part shows the "Next" button nextButton.style.display = "block";, so after answering, you see the "Next" button appear and you can move on.

In plain English, when a user clicks an answer, check if it’s the correct one. If it is, increase their score. Show which answer was right (green) and which were wrong (red). Disable all answer buttons so they can’t click again. Show the 'Next' button so they can continue.

Displaying the final score

showScore() is called when the quiz ends — either because the user answered all questions, or because time ran out. It clears the previous question UI and displays the final score.

function showScore() {
  resetState();
  questionElement.innerText = `You scored ${score} out of ${questions.length}`;
  nextButton.innerText = "Play Again";
  nextButton.style.display = "block";
}

We've already met resetState(); in function showQuestion(), which clears out the UI elements from the previous question. It ensures that when we show the final score, there’s no leftover clutter from the quiz UI. questionElement.innerText = `You scored ${score} out of ${questions.length}`; updates the question area to display the final result. ${score} inserts the user's current score. ${questions.length} is the total number of questions. For example, if the user scored 2 out of 3: "You scored 2 out of 3"
nextButton.innerText = "Play Again"; changes the label on the "Next" button to say "Play Again". This way we're reusing the same button instead of creating a new one. nextButton.style.display = "block"; makes the "Next"/"Play Again" button visible again, and clicking this will trigger the nextButton event listener, which restarts the quiz from the beginning if we’re at the end of the questions.

So, to sum up this function clears the old question UI, shows the final score and then updates the button so the user can restart the quiz.

But what is this part all about?

nextButton.addEventListener("click", () => {
  if (currentQuestionIndex < questions.length - 1) {
    currentQuestionIndex++;
    showQuestion();
  } else {
    clearInterval(timer);
    showScore();
  }
});

We're dealing with an EventListener here, so when someone clicks the Next button, run the following function.
if (currentQuestionIndex < questions.length - 1) checks if you're not on the last question yet: questions.length gives the number of questions (e.g. 2) and since array indexes start at 0, so the last question is at index length - 1. If the current question index is less than that, then we’re not at the end yet.
currentQuestionIndex++; means if we’re not on the last question, this line increases the question index by 1. So if we were on question 0, we go to 1 - basically, move on to the next question. And after increasing the index, we show the next question by calling the showQuestion() function again. This is just like at the start — it clears the old answers and displays the new one.
But, if we're on the last question clearInterval(timer) and showScore() will run instead. clearInterval(timer) stops the timer (so it doesn’t keep counting down) and showScore(); shows your final score with a message.

In conclusion

And there you have it — a fully functional JavaScript Quiz App! Through this simple project, we explored and practiced some of the most important concepts in JavaScript development, including:

Working with arrays of objects to structure data
DOM manipulation to dynamically change content on the page
Handling events like button clicks
Using conditional logic to check answers and control game flow
Managing a countdown timer with setInterval()

By breaking the code down step by step, we’ve seen how each part plays a role in creating an interactive user experience — from displaying questions to calculating scores and giving feedback.

This project is a great foundation for beginners. You now have the skills to build on it further — try adding features like:

Randomizing the questions
Adding more questions
Saving high scores
Using a start or end screen
Styling the app with custom themes

Keep experimenting and building! The more you practice, the more confident you’ll become with JavaScript and web development as a whole.

Adding an Edit Button to a To-Do List

April 2, 2025 | Javascript

Adding an edit task feature is a nice enhancement and builds directly on the structure we’ve already created using addEventListener and saving our tasks to local storage. Let’s walk through how to do add an “edit” button step-by-step, keeping everything consistent with the rest of our app.
However, we had to change the code a bit, we had to replace the firstChild and add span instead input and a few more things. Let’s take a look.

1. addTask() function

This function from the previous project needs to be modified with span instead item and key things happening:

let li = document.createElement("li");
let span = document.createElement("span");
span.textContent = taskInput.value;
li.appendChild(span);

What’s going on?

A new list item (<li>) is created.
A is created to hold the task’s text, and then the is appended inside the <li>. BUt why do we need to use ?

Because it gives you a dedicated, consistent place to store and edit the task text.

Without it, the buttons and text are all siblings inside <li>, and targeting “just the task text” becomes messy. A is easily replaceable and queryable (e.g., li.querySelector(“span”)).

2. Buttons (Edit, Complete, Delete)

We need to add the edit button and each button is appended to the <li>, and all buttons use addEventListener().
The same as with the earlier project we use the toggles approach for the complete button with the .completed class
Delete button removes the task and the edit button triggers the editTask(li) function

3. saveTasks()

This function saves the entire to-do list to local storage, but we changed it a bit compared to the previous project.

tasks.push({
    text: li.querySelector("span").textContent.trim(),
    completed: li.classList.contains("completed")
});

This works well because li.querySelector(“span”) reliably gives you the task text, no matter what else is in the <li>. The completed status is stored as a Boolean, and everything is stored as a JSON string in local storage.

4. loadTasks()

This function rebuilds the saved tasks from local storage and you’re recreating:

The <li>
The containing the text
The buttons (edit, complete, delete)
Re-attaching all behaviors (via addEventListener)

5. editTask()

In the editTask function we replace the with an <input> element, and this is where we let the user edit the task, and on blur or Enter, you walidate the input. We put the updated text back into a , this is why we need to replace the <input> with the new . This approach avoids bugs that came from manipulating li.firstChild, because now you’re explicitly working with the , not guessing which node is the text.

We needed to replace First Child with using 
Old approach (what went wrong):

li.firstChild.textContent = "";
li.insertBefore(input, li.firstChild);

Why this was fragile:

li.firstChild might not be the text you think it is. Depending on how the browser builds the DOM, it could be a text node, button, input. And after replacing it, the structure becomes messy and unpredictable, buttons might stop working or the text might be gone or hard to re-target.

For this reason we used a new approach with :

let span = li.querySelector("span");
li.replaceChild(input, span);
...
li.replaceChild(span, input); // After editing

This approach is better because you always know exactly where the text lives and editing is just a clean swap between span and input. Now, there is no weird child node index guessing or fragile assumptions, and above all much easier to maintain and expand.

The final code looks like this:

document.getElementById("addButton").addEventListener("click", addTask);

function addTask() {
    let taskInput = document.getElementById("taskInput");
    let taskList = document.getElementById("taskList");

    if (taskInput.value === "") {
        alert("Please enter a task!");
        return;
    }

    let li = document.createElement("li");
    let span = document.createElement("span");
    span.textContent = taskInput.value;
    li.appendChild(span);

    // Add a complete button
    let completeButton = document.createElement("button");
    completeButton.textContent = "✓";
    completeButton.style.marginLeft = "10px";
    completeButton.onclick = function () {
        li.classList.toggle("completed");
        saveTasks(); 
    };

    // Add a delete button
    let deleteButton = document.createElement("button");
    deleteButton.textContent = "❌";
    deleteButton.style.marginLeft = "10px";
    deleteButton.onclick = function () {
        taskList.removeChild(li);
        saveTasks(); 
    };

    // Add an edit button
    let editButton = document.createElement("button");
    editButton.textContent = "✏️";
    editButton.style.marginLeft = "10px";
    editButton.addEventListener("click", function () {
    editTask(li);
    });


    li.appendChild(editButton);
    li.appendChild(completeButton);
    li.appendChild(deleteButton);
    taskList.appendChild(li);

    taskInput.value = ""; // Clear input after adding

    saveTasks(); 
}

function saveTasks() {
    let tasks = [];
    let items = document.querySelectorAll("#taskList li");
    items.forEach((li) => {
        tasks.push({
            text: li.querySelector("span").textContent.trim(),
            completed: li.classList.contains("completed")
        });
    });
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
    let taskList = document.getElementById("taskList");

    tasks.forEach(task => {
        let li = document.createElement("li");
        let span = document.createElement("span");
        span.textContent = task.text;
        li.appendChild(span);

        if (task.completed) {
            li.classList.add("completed");
        }

        let completeButton = document.createElement("button");
        completeButton.textContent = "✓";
        completeButton.style.marginLeft = "10px";
        completeButton.onclick = function () {
            li.classList.toggle("completed");
            saveTasks();
        };

        let deleteButton = document.createElement("button");
        deleteButton.textContent = "❌";
        deleteButton.style.marginLeft = "10px";
        deleteButton.onclick = function () {
            taskList.removeChild(li);
            saveTasks();
        };

        let editButton = document.createElement("button");
        editButton.textContent = "✏️";
        editButton.style.marginLeft = "10px";
        editButton.addEventListener("click", function () {
            editTask(li);
        });
        
        li.appendChild(editButton);        
        li.appendChild(completeButton);
        li.appendChild(deleteButton);
        taskList.appendChild(li);
    });
}

function editTask(li) {
    let span = li.querySelector("span");
    let currentText = span.textContent.trim();

    let input = document.createElement("input");
    input.type = "text";
    input.value = currentText;
    input.style.marginRight = "10px";

    li.replaceChild(input, span);

    input.focus();
    input.select();

    function saveEdit() {
        if (input.value.trim() === "") {
            alert("Task cannot be empty.");
            return;
        }

        span.textContent = input.value.trim();
        li.replaceChild(span, input); // Replace input back with span
        saveTasks();
    }

    input.addEventListener("blur", saveEdit);
    input.addEventListener("keydown", function (e) {
        if (e.key === "Enter") {
            saveEdit();
        }
    });
}

// Call loadTasks ONCE when page loads
loadTasks();

In conclusion

So, in this project we’ve built a full-featured to-do list that supports:

Adding tasks
Completing tasks
Deleting tasks
Editing tasks inline (with live updates to localStorage)

And by introducing the , you’ve structured your DOM in a way that’s easy to read, modify, and interact with — avoiding common pitfalls like unreliable firstChild access.

Saving a Simple To-Do List to Local Storage: the addEventListener Version

March 30, 2025 | Javascript

In this article we are going to work on JS version that uses “addEventListener” method instead of the “onclick” in HTML, which is perhaps considered more primitive and suitable for complete beginners. The code bellow already has the possibility to adds tasks to the list, and a complete and delete button. What we’ll now add is:

A saveTasks() function to store the tasks in local storage.
A loadTasks() function to load saved tasks when the page loads.

This means we will update the existing code to save changes whenever a task is added, completed, or deleted, even after the browser window is closed or refreshed.

…

Saving a Simple To-Do List to Local Storage Using “onclick” in HTML

March 26, 2025 | Javascript

In this article we’re going to build on our previous project: 3 JavaScript versions of simple to-do list. Let’s try adding a new useful feature – let’s save the task we add to local storage. Local Storage is a feature in your browser that lets you save data, in our case — tasks — even after the page is refreshed or the browser is closed and reopened.

In this article we will be using onclick in HTML, which is probably the easiest method to understand for complete beginners. You simply attach the addTask() function directly to the button using the onclick attribute inside the HTML. While this works fine for small projects, it’s not considered best practice because it mixes your structure (HTML) with your behavior (JavaScript), which can make your code harder to manage in the long run. We will focus on better practices
in our next article.
…

3 Ways to Create To-Do List with JavaScript for Beginners

March 25, 2025 | Javascript

Creating a simple to-do list is one of the best beginner-friendly JavaScript projects. It helps you practice how to connect HTML structure, CSS styling, and JavaScript functionality.

In this article, I’ll walk you through four different ways to create a to-do list using JavaScript. Each method starts with the same HTML and CSS, but the JavaScript code will vary slightly. This way, you’ll learn different techniques and understand the pros and cons of each.

…

Distortions in AI-generated videos can be technically referred to as artifacts or generative artifacts. These are unintended visual or auditory anomalies that occur due to limitations in the AI model, training data, or generation process. Common types of distortions include:

…

Standardizing data is a vital part of the data cleaning process. It guarantees consistency and uniformity within the dataset, which is essential for precise analysis, reporting, and machine learning models, leading to optimal data integrity. Depending on the data’s nature and the analysis requirements, standardizing data can involve a variety of transformations and operations. The main aspects of data standardization include:
…

Removing duplicates in MySQL involves identifying and deleting rows with duplicate data to ensure the integrity and accuracy of your database. This article will serve as a step-by-step guide on how to remove duplicates in MySQL.
…