Devlog #4: Building my Timer

Hey everyone! Welcome back to another update for Forever.

The app now has a functional, **Timer **! When the timer starts, the rest of the app becomes blur, and only the timer is visible along with some interactive buttons.

Here is how I built this interface and how the timer works, and what I updated in my task list code!

The design

I wanted to make it look better so i made it so that once the start studying button is clicked, the rest of the app disappears and becomes blur and only the timer shows up in the middle of the screen.

• The Blur Effect: When you click “Start Studying” the main dashboard is blurred using a CSS backdrop blur wrapper and the timer appears by removing the display hidden from the timer div (watch.classList.remove('hidden')).

• Smart Controls: I added two primary buttons: Pause/Resume and Stop.

  • When the timer is ongoing, the main action button says “Pause”.
  • If you click on “Pause” the clock stops and transforms the button into a green “Resume” button.
  • Clicking “Stop” instantly closes the overlay, resets the view, and brings the dashboard back into clear view.

Updates on the Task List

Alongside the timer, I made a quick update to my checkbox:

• I switched out the default list markers and replaced them with radio (checkbox.type = 'radio') to better fit the dashboard styling.
• I also updated the X button text to display a “delete”.

The code

The stopwatch doesn’t just count up manually. It compares the constant exact system time using Date.now() against when you pressed start. This builds a highly accurate stopwatch!

Here is the JavaScript code handling the timer:

let startTime = 0;
let elapsedTime = 0;
let timerInterval = null;
let isRunning = false;

const display = document.getElementById("display");
const button = document.getElementById("starttime");
const buttonSR = document.getElementById("res-stop");
const buttonStop = document.getElementById("Stop");

// Formats milliseconds into HH:MM:SS.mm
function formatTime(ms) {
  const hrs = Math.floor(ms / 3600000);
  const mins = Math.floor((ms % 3600000) / 60000);
  const secs = Math.floor((ms % 60000) / 1000);
  const msecs = Math.floor((ms % 1000) / 10); // Two-digit milliseconds

  const pad = (num) => String(num).padStart(2, "0");

  return `${pad(hrs)}:${pad(mins)}:${pad(secs)}.${pad(msecs)}`;
}

// Toggles the stopwatch state from the start screen
button.addEventListener("click", () => {
  watch.classList.remove('hidden');
  if (!isRunning) {
    startTime = Date.now() - elapsedTime;
    timerInterval = setInterval(() => {
      elapsedTime = Date.now() - startTime;
      display.textContent = formatTime(elapsedTime);
    }, 10); // Updates every 10 milliseconds for precision
    
    buttonSR.textContent = "Pause";
    buttonSR.style.backgroundColor = "#ffff"; 
    isRunning = true;
  } 
});

// Controls pausing and resuming mid-session
buttonSR.addEventListener("click", () => {
  if (!isRunning) {
    watch.classList.remove('hidden');
    startTime = Date.now() - elapsedTime;
    timerInterval = setInterval(() => {
      elapsedTime = Date.now() - startTime;
      display.textContent = formatTime(elapsedTime);
    }, 10);
    
    buttonSR.textContent = "Pause";
    buttonSR.style.backgroundColor = "#ffff"; 
    isRunning = true;
  } else {
    clearInterval(timerInterval);
    buttonSR.textContent = "Resume";
    buttonSR.style.backgroundColor = "#28a745"; // Green resume color
    isRunning = false;
  }
});

// Closes the modal overlay and exits focus mode
buttonStop.addEventListener("click", () => {
  watch.classList.add('hidden');
});

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 = "";
}

Devlog #2: Designing the main page

Hey everyone! Welcome back to the devlog for Forever.

Following up on the landing page, I have officially begun building the core hub of the application: the Main Page. This is the page users will see immediately after clicking “Start Studying!”, serving as their command center for tracking daily progress.

Here is an update on how the layout is coming together, the CSS design choices, and what remains to be wired up!

The Lyout of the main page

For the dashboard, I wanted to maintain the clean, glassmorphic aesthetic established in the landing page.

• Daily Overview: At the top i have a welcome sign an under it there is a text that shows the date however the date part is still to be created using javascript. I also have a place that displays the total amount of time the person spent studying throughout the whole day.

• Subject Grid: Below the daily summary, I created a grid for individual subjects (e.g., Math, Physics, Information Technology). Each subject card displays the amount of time spent studying each separate subject and refreshes every day.

• The Add Subject Card: To prepare for future features, I added a card with a clean + icon, which will eventually allow users to add new subjects of their preference.

The code behind this

To arrange the subject cards neatly on both desktop and mobile screens, I relied heavily on CSS display grid.

1. HTML Structure

Here is how the structural skeleton of the dashboard looks:

<div class="top-bar">
            <h1>Welcome to Forever</h1>
            <p>Todays Date</p>
        </div>


        <div class="TotalTime">
            <div>
                <p>Today</p>
                <i class="fas fa-clock"></i>
            </div>
            <h3>0 hours 0 minutes</h3>
        </div>


        <div class="Subjects">
            <h2>Subjects</h2>
            <div class="subject-list">
                <div class="math">
                    <h3>Math</h3>
                    <p>0 hours 0 minutes</p>
                </div>
                <div class="physics">
                    <h3>Physics</h3>
                    <p>0 hours 0 minutes</p>
                </div>
                <div class="IT">
                    <h3>Information Technology</h3>
                    <p>0 hours 0 minutes</p>
                </div>
                <div class="add">
                    <button><i class="fa-solid fa-plus"></i></button>
                </div>
            </div>

        </div>

Devlog #1: The landing Page

Hey everyone! Welcome to the very first devlog for Forever—a study app designed for logging your study time to see how much you focus.

I wanted to build an app that matches my vibes so the color scheme of the app is blue and white which are my fav colors. Today, I officially finished building the very first screen of the app: The Welcome Page.

Here is a breakdown of what went into this first step, how I designed it, and what’s coming next!

The Vibe & UI Design

I wanted the design of Forever to be something that represents me so instead of a boring, flat solid color, I went with a spiral bg which i found on pinterest. I love the spiral pattern alot so I thought why not.

• The Color Palette: Deep blues, slate greys, and soft whites. Blue is my favourite color if you couldnt tell.

• The Content Card: I added a glassy looking dark overlay card in the center. This helps the text show properly since the background is very detailed.

The code

I wanted a clean layout structure that was easy to navigate and looked good on a phone.

1. HTML Structure

The layout is simple but effective. I wrapped the main text and button inside a centered container:

<div class="welcome-container">
  <h1>Welcome to Forever</h1>
  <p class="subtitle">A study app for lifelong learning</p>
  <button class="start-btn">Start Studying!</button>
</div>