Devlog #3: Updates!!

Hey everyone! Welcome back to another update for Forever.

I was not happy with the bg before as it didnt look quite right so i changed it up and ive been busy adding some of the very first interactive elements using JavaScript.

Here is what’s new in this version, and what’s coming up next!

Background Updates

A Brand New Background: I swapped the old background for a more interesting bg that looks much more modern and makes the text way easier to read.
Start Studying Button: I added a dedicated “Start Studying” button which upon clicking will start a timer however the timer is still being worked on.
The “Today” and Subject Timers: The layouts for the main dashboard timer and individual subject hours are now perfectly placed, ready to be wired up to actual active timers next.

The Javascript

I have added a new Notes List! which will allow the users to add their homework or any tasks they want to get done. The list has a checkbox to check off anything thats finished as well as a delete button to make space for new tasks. This is the first part of the website that uses has a javascript running behind it.

How It Works:

Add Tasks: You can type a task you need to complete into an input box and click “Add”.
Check Off Tasks: When your done with a task, you can click the checkbox to cross it off.
Remove Tasks: If you want to clean up your workspace, you can delete a task to remove it from the list entirely.

The Javascript code

Here is a look at the JavaScript logic I wrote to handle creating, complete/toggling, and deleting tasks dynamically:

function addTask() {
  const input = document.getElementById('taskInput');
  const taskText = input.value.trim();

  // Prevent adding empty tasks
  if (taskText === "") {
    alert("Please enter a task!");
    return;
  }

  const ul = document.getElementById('taskList');
  
  // Create the list item (li)
  const li = document.createElement('li');

  // Create the checkbox
  const checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  
  // Create the text label
  const label = document.createElement('label');
  label.textContent = " " + taskText;

  // Create the delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'X';
  deleteBtn.className = 'delete-btn';
  deleteBtn.onclick = function() {
    ul.removeChild(li);
  };

  // Assemble the elements and append to the main list
  li.appendChild(checkbox);
  li.appendChild(label);
  li.appendChild(deleteBtn);
  ul.appendChild(li);

  // Clear the input field for the next task
  input.value = "";
}