Building a Simple Distraction Counter App: My Journey in Learning JavaScript

As someone who struggles with distractions during work—be it Twitter, YouTube, or my phone—I often find myself losing focus and wanting to track how often this happens. To address this, I built a simple distraction counter app as part of my course on Scrimba. While this app is basic, it’s a project I’m incredibly proud of because I wrote the entire code from scratch, using my current JavaScript skills. In this article, I’ll walk you through how the app works, highlight parts of the code, and explain how everything comes together.

What Does the Distraction Counter App Do?

The app is straightforward: every time I get distracted, I manually click a button labeled DISTRACTION COUNT, which increments a counter. If I want to save my session and start fresh, I can click the SAVE ENTRY button to record my previous distractions. This way, I can track how many times I’ve been distracted during a work session and keep a record of my past entries.

The HTML: Laying the Foundation

The HTML code provides the basic structure of the app. Here’s a look at the main elements:

<div class="main-div">
    <h2>How many times your eyes have drifted from work:</h2>
    <h1 id="score-sheet"> 0 </h1>
    <button id="dis-btn" onclick="Distraction()">DISTRACTION COUNT</button>
    <button id="save-btn" onclick="save()">SAVE ENTRY</button>
    <p id="for-save-button">Previous Entries:</p>
</div>

Heading Elements (h2 and h1): These display the counter label and the current distraction count. The id="score-sheet" is important because it allows the JavaScript to update the counter dynamically.
Buttons:
- The DISTRACTION COUNT button triggers the Distraction() function, which increments the counter.
- The SAVE ENTRY button calls the save() function, which resets the counter and appends the previous count to a list of entries.
Paragraph Element (p): The id="for-save-button" stores previous distraction counts.

This simple structure allows the JavaScript to manipulate specific elements and create an interactive experience.

The CSS: Styling the Experience

The CSS file brings the app to life with vibrant colors and a user-friendly design. Here are some highlights:

body {
    font-family: "Roboto", sans-serif;
    text-align: center;
    margin: 32px;
    background-color: #ffb703;
}

.main-div {
    margin: auto;
    width: 50%;
    height: 400px;
    background-color: #fb8500;
    border-radius: 24px;
}

button {
    width: 400px;
    height: 64px;
    border-radius: 8px;
    margin: auto;
}

#dis-btn {
    background-color: #023047;
    color: white;
}

#save-btn {
    background-color: #219ebc;
    margin-top: 12px;
    color: white;
}

Colors and Layout: The app’s background is a bright orange (#ffb703) that creates an inviting and motivating environment. The buttons use contrasting colors for clear visibility.
Responsiveness: The margin: auto and width: 50% ensure the app is centered on the screen and adapts well to different screen sizes.

This part of responsiveness is something I still don't understand fully, however, while I was writing the code, I knew what I needed, soI googled them in real time. Maybe I am becoming a software engineer after all insert smirk
Visual Hierarchy: The headings and buttons are styled to stand out, making the interface intuitive and easy to navigate.

The JavaScript: Making It Work

The JavaScript code is where the magic happens. Here’s a breakdown of the key parts:

let Scoresheet = document.getElementById("score-sheet");
let ForSaveButton = document.getElementById("for-save-button");
let count = 0;

function Distraction() {
    count = count + 1;
    Scoresheet.textContent = count;
}

function save() {
    let CountRecord = count + " - ";
    ForSaveButton.textContent = ForSaveButton.textContent + CountRecord;
    Scoresheet.textContent = 0;
    count = 0;
}

Key Concepts:

Tracking the Count:
- The variable count starts at 0 and increases by 1 each time the Distraction() function is called (when you click the button).
- Scoresheet.textContent = count; updates the display dynamically.
Saving Entries:
- The save() function appends the current count to the for-save-button paragraph as a string.
- After saving, it resets the counter to 0, allowing you to start fresh for a new session.
Dynamic Updates:
- The app relies on document.getElementById() to identify and manipulate specific elements. This makes it easy to update the UI without reloading the page.

Reflections and Next Steps

This project was a significant learning experience for me. Writing every line of code from scratch helped me understand:

How JavaScript interacts with HTML elements to create dynamic, interactive features.
The importance of clean and readable code in maintaining a smooth user experience.
Styling with CSS to enhance usability and visual appeal.

As a product designer, I already have ideas for how this app could evolve:

Automation: Instead of manually counting distractions, I could integrate sensors or notifications to track distractions automatically.
Analytics: Adding a graph or chart to visualize distraction trends over time.
Cloud Storage: Allowing users to save distraction data across sessions for better tracking.

However, for my current skill level, this app is a milestone I’m proud of. It’s simple, functional, and represents my growth as a JavaScript developer.

Conclusion

The Distraction Counter App may be a small project, but it addresses a real problem in my daily life while showcasing the practical application of coding skills. I look forward to the next challenges I get to tackle in my course outline.