simple-counter

A simple JavaScript counter web application with incremental and decremental buttons, ensuring the count never goes below 0, and providing the ability to save multiple count values.

My Javascript Learning Experience

This project was one of my first attempts at JavaScript, and I had around two weeks of experience with the language. Setting up the HTML and CSS was relatively easy, although I faced some challenges with flex and grid centering and alignment. Instead of focusing on CSS styling, I devoted more time to applying my limited JavaScript knowledge to make the webpage functional rather than visually appealing.

Challenges

During the project, I encountered a particular challenge related to resetting the counter to 0 whenever the count would result in a negative number. For example, when the count was 5, and I attempted to subtract 10, I wanted the answer to be 0 instead of a negative value. To address this, I used a simple 'if else' statement. If the condition if (count >= 5) or if (count >= 10) was met, it would subtract the count as usual; otherwise, it would set the count to 0 using count = 0, effectively preventing negative values.

subtract5() Function:

function subtract5() {
    if (count >= 5) {    
        count -= 5;
        updateCounter();
    } else if (count > 0) {
        count = 0;
        updateCounter();
    }
}

Another challenge I encountered was storing the count values in a single column. I struggled with aligning the text vertically, but I found a solution through trial and error. The process of experimenting with different CSS styles and properties helped me gain a better understanding of how to manipulate the layout and appearance of elements on the page.

How It Works

Variables:

• countEl: This variable is used to get the HTML element with the ID "countEl," which displays the current count on the webpage.
• saveEl: This variable is used to get the HTML element with the ID "saveEl," which will display the saved counts on the webpage.
• count: This variable holds the current count value and is initialized to 0.

updateCounter() Function:

• This function updates the text content of the element specified by countEl with the value of the count variable. It's used to display the current count on the webpage.

Functions for Incrementing the Count:

• add1(), add5(), and add10(): These functions increase the count variable by 1, 5, and 10, respectively, and then update the displayed count using updateCounter().

Functions for Decrementing the Count:

• subtract1(), subtract5(), and subtract10(): These functions decrease the count variable by 1, 5, and 10, respectively, but only if the count is greater than or equal to the specified decrement value. If the decrement would result in a negative count, they reset the count to 0 instead.

reset() Function:

• This function resets the count variable to 0 and updates the displayed count to 0 using updateCounter(). Additionally, it clears the content of the saveEl element, effectively resetting the previously saved count entries.

save() Function:

• This function saves the current count value to the saveEl element. It appends the current count value to the existing content of saveEl, followed by a space character. It then resets the count variable to 0 and updates the displayed count to 0 using updateCounter(). This function is used to store the current count and allows the user to save multiple count values for reference.

Overall, this code allows you to increment, decrement, reset, and save count values. When you click the "Save" button, the current count will be added to the list of saved counts displayed in the saveEl element. The "Reset" button clears the current count and the saved counts. The displayed count is updated dynamically as you interact with the buttons.