javascript projects for beginners with source code - Online Timer App

Last Updated: 2023-05-29 00:31:02

Online Timer App is one of the easiest projects of javascript. If you are a beginner and looking for a javascript project with source code this post is for you. In this post, we will create a simple Online Timer App. Also, I will provide you with the complete source code so that you can customize the project based on your requirements. So let's start.

JavaScript Projects For Beginners With Source Code

Developing a simple JavaScript project is one of the best ways to learn javascript for a beginner. Hence if you are a beginner in javascript we are suggesting you develop some simple projects using the basic functionality of javascript. Here are some simple javascript projects for beginners with source code. Go through each link and read the technique. Also, if you want you can download the complete source code.

What is an Online Timer App?

A timer app is a tool that helps you keep track of time. It allows you to set a specific amount of time and counts down until the time is up. So an Online Timer App is an Online based timer tool that helps you to keep track of time.

Use of an Online Timer App

The Online Timer App is a simple JavaScript project that can be used to time various activities such as cooking, exercising, studying, and working. It's a useful tool that allows you to track the duration of an activity and helps you manage your time more effectively.

For example, if you're cooking a meal and you need to keep track of the cooking time, you can use this app to start a timer and monitor the elapsed time. Similarly, if you're studying for an exam, you can use the timer to allocate a specific amount of time for each study session and take regular breaks to avoid burnout.

This app can also be used to improve productivity by tracking the time spent on tasks and measuring your work output. By setting a timer for a specific task, you can increase your focus and stay on task until the timer goes off, helping you avoid distractions and procrastination.

The main technique for creating an Online Timer App using JavaScript

The main technique of creating an Online Timer App using javascript is

The use of setInterval() and clearInterval() function to start and stop the timer. These functions are part of the built-in JavaScript timing functions that allow you to execute code at specified time intervals.
The setInterval() function takes two arguments: a function to be executed at every interval, and the interval time in milliseconds. In this app, the function to be executed increments the time value by 1 every second and updates the timer display with the formatted time.
The clearInterval() function is used to stop the timer by clearing the interval ID returned by the setInterval() function. This stops the function from executing at the specified interval, effectively stopping the timer.

Additionally, the app uses DOM manipulation to select the timer display and buttons and to update the timer display with the formatted time.

Therefore, to develop Online Timer App you need to have a good understanding of JavaScript syntax, data types, functions, and DOM manipulation, and specifically the setInterval() and clearInterval() functions. You should also be familiar with how to add event listeners to DOM elements to trigger functions, and how to format data to display it in a specific way.

Online Timer App in HTML CSS

First, we'll create the HTML markup for our timer app. Here's what the code looks like:

< div id="inputContainer" class="input-items">
    < div class="input-group">
        < label class="input-label">Hour:< /label>
        < input id="inputHour" placeholder="00" class="input-box" type="number">
    < /div>
    < div class="input-group">
        < label class="input-label">Minute:< /label>
        < input id="inputMinute" placeholder="00" min="0" max="59" class="input-box" type="number">
    < /div>
    < div class="input-group">
        < label class="input-label">Second:< /label>
        < input id="inputSecond" placeholder="00" min="0" max="59" class="input-box" type="number">
    < /div>
< /div>

< p id="outputContainer">< span class="min-width" id="outputHour">00< /span> : < span class="min-width" id="outputMinute">00< /span> : < span class="min-width" id="outputSecond">00< /span>< /p>

< div class="timer-app-buttons">
    < button onclick="StartClock()" class="clock-button" id="startBtn">Start< /button>
    < button onclick="StopClock()" class="clock-button" id="stopBtn">Stop< /button>
    < button onclick="ResetClock()" class="clock-button" id="reset">Reset< /button>
< /div>

Here we have taken input fields for setting the hours, minutes, and seconds, as well as an output display to show the elapsed time. We have also taken three buttons: "Start," "Stop," and "Reset," which control the timer app's functionality.

Those input fields allow the user to enter values for the hours, minutes, and seconds of the stopwatch. The output display shows the current time in the format "HH: MM: SS" (hours, minutes, seconds).

The "Start" button will trigger the StartClock() function when clicked. The purpose of this function is to start the stopwatch and begin counting the elapsed time.

The "Stop" button will trigger the StopClock() function when clicked. This function stops the stopwatch from counting and freezes the elapsed time.

The "Reset" button will trigger the ResetClock() function when clicked. This function resets the stopwatch, setting the elapsed time back to zero.

Please note that this is just an example code, you need to download the complete source code from here.

Download Complete Source Code

.clock-button{
    cursor: pointer;
    text-decoration: none;
    border: none;
    padding: 10px;
    margin: 5px;
    color: white;
    border-radius: 5px;
    min-width: 170px;
    font-size: 20px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
#startBtn{
    background-color: green;
}
#stopBtn{
    background-color: red;
    display: none;
}
#reset{
    background-color: darkgrey;
}
.input-items{
    display: flex;
    margin: 10px;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}
.input-box{
    width: 108px;
    height: 65px;
    margin: 5px;
    padding:5px;
    font-size: 40px;
    border: none;
    outline: none;
    box-shadow: rgba(0, 0, 0, 0.06) 0px 2px 4px 0px inset;
}
.input-group{
    display: flex;
    flex-direction: column;
}
.input-label{
    margin: 5px;
    font-size: 30px;
}
#outputContainer{
    display: none;
}

After creating the basic structure of the Online Timer App in HTML, now you need to design your app. You can design your app based on your requirements. Here we have keets hidden the output div initially so that we can show it when the user clicks on the start button. We will do that in JavaScript.

Please note that this is just an example code, you need to download the complete source code from here.

Download Complete Source Code

Javascript timer app code

Now you need to implement the main logic of the online timer app. You already know the main techniques so you just need to implement the logic using javascript.

function StartClock() {
    // Get the values from the input fields and convert them to numbers
    inputHour = Number(document.getElementById("inputHour").value);
    inputMinute = Number(document.getElementById("inputMinute").value);
    inputSecond = Number(document.getElementById("inputSecond").value);

    // Check if the entered values are valid for hours, minutes, and seconds
    if (inputHour > 0 || (inputMinute > 0 && inputMinute < 60) || (inputSecond > 0 && inputSecond < 60)) {
        // Update the output display with the entered values formatted as time
        outputHour.innerHTML = FormatTime(inputHour);
        outputMinute.innerHTML = FormatTime(inputMinute);
        outputSecond.innerHTML = FormatTime(inputSecond);
        
        // Show the output container and switch the visibility of buttons
        outputContainer.style.display = "flex";
        startBtn.style.display = "none";
        stopBtn.style.display = "inline-block";
        
        // Start the stopwatch timer by calling the myClock() function every second (1000 milliseconds)
        timerApp = setInterval(myClock, 1000);
    }
    else {
        // Clear the input fields and display an alert for entering a valid time
        document.getElementById("inputHour").value = "";
        document.getElementById("inputMinute").value = "";
        document.getElementById("inputSecond").value = "";
        alert("Enter valid time.");
    }
}

function myClock() {
    // Check if there are remaining seconds
    if (inputSecond > 0) {
        // Decrease the value of seconds by 1 and update the display
        inputSecond--;
        outputSecond.innerHTML = FormatTime(inputSecond);
    } else {
        // Check if there are remaining minutes
        if (inputMinute > 0) {
            // Decrease the value of minutes by 1 and update the display
            inputMinute--;
            outputMinute.innerHTML = FormatTime(inputMinute);
            
            // Reset the seconds to 59 and update the display
            inputSecond = 59;
            outputSecond.innerHTML = FormatTime(inputSecond);
        } else {
            // Check if there are remaining hours
            if (inputHour > 0) {
                // Decrease the value of hours by 1 and update the display
                inputHour--;
                outputHour.innerHTML = FormatTime(inputHour);
                
                // Reset the minutes and seconds to 59 and update the display
                inputMinute = 59;
                outputMinute.innerHTML = FormatTime(inputMinute);
                inputSecond = 59;
                outputSecond.innerHTML = FormatTime(inputSecond);
            } else {
                // If no more hours, stop the clock, play a sound, and return
                StopClock();
                new Audio('./beep.mp3').play();
                return;
            }
        }
    }
}

Here the StartClock() function is triggered when the "Start" button is clicked in the app. Its purpose is to start the app and begin counting the time.

The StartClock() function retrieves the user's input for the stopwatch time, validates it, updates the display, and starts the stopwatch timer if the input is valid.

Also, the myClock() function handles the countdown logic for the stopwatch, decrementing the time values and updating the display as necessary. Once the time reaches 0, it stops the stopwatch, plays a sound, and exits the function.

Please note that this is just an example code, you need to download the complete source code from here.

Download Complete Source Code

From this post hope you understand the concept of the Online Timer App. Also, you may be noticed that the main technique of the project is the automatic function calling. Hence to make a simple javascript online timer app you should have basic knowledge about the javascript function calling and time manipulation technique.