Time Converter Using JavaScript | Simple JS Projects for Beginners

Time Converter

Today, let’s build a Time Converter by applying the basic java script concepts.

Refer to the below image.

Instructions:

  • The HTML input element for entering the number of hours should have the id hoursInput
  • The HTML input element for entering the number of minutes should have the id minutesInput
  • Add HTML label elements for HTML input elements with ids hoursInput and minutesInput
  • The HTML button element should have the id convertBtn
  • The HTML p element to display the converted time in seconds should have the id timeInSeconds
  • The HTML p element to display the error message should have the id errorMsg

By following the above instructions, achieve the given functionality.

  • When values are provided in HTML input elements with ids hoursInput and minutesInput, the HTML button with id convertBtn is clicked
    • The converted time in seconds should be displayed in the HTML p element with id timeInSeconds
    • The HTML p element with id errorMsg should be empty
  • The HTML p element with id errorMsg should display an error message in the following cases
    • When the HTML input element with id hoursInput is empty and convertBtn is clicked
    • When the HTML input element with id minutesInput is empty and convertBtn is clicked
    • When both the HTML input elements hoursInput and minutesInput are empty and convertBtn is clicked

Quick Tip

  • timeInSeconds = hours * 3600 + minutes * 60
  • Example: When the hours is 5 and minutes is 6, then seconds will be 18360

Note

  • Use addEventListener to attach events to HTML elements
  • The values given for the HTML input elements with ids hoursInput and minutesInput should be positive integers.

Resources

Use this Background image:

  • http://ravikiran.net/wp-content/uploads/2022/07/time-converter-bg.png

CSS Colors used:

Text colors Hex code values used:

#f5f7fa

#000000

#ffffff

CSS Font families used:

  • Open Sans

Source Code:

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <h1>Time Converter</h1>
                <p>Enter hours and minutes values to convert into seconds</p>
            </div>
            <div class="col-12">
                <label for="hoursInput">Hours*</label> <br />
                <input type="text" id="hoursInput" /> <br />
                <label for="minutesInput">Minutes**</label> <br />
                <input type="text" id="minutesInput" /> <br />
                <button class="mt-3" id="convertBtn">Convert to Seconds</button>
            </div>
            <div class="col-12">
                <p id="timeInSeconds"></p>
                <p id="errorMsg"></p>
            </div>
        </div>

    </div>
</body>

</html>

CSS

h1 {
    font-size: 46px;
    font-weight: 900;
}

.container {
    padding: 20px;
    background-image: url('https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.png');
    height: 100vh;
    background-size: cover;
    color: #ffffff;
    font-family: Open Sans;
}

.timeInSeconds {
    margin-top: 20px;
    background-color: transparent;
    width: 80px;
    border-radius: 20px;
    border-width: 2px;
    border-color: #f5f7fa;
    border-style: solid;
    padding: 10px;
    text-align: center;
}

button {
    padding: 10px;
    border-radius: 10px;
    background-color: #f5f7fa;
}

JavaScript

let hoursInputEl = document.getElementById("hoursInput");
let minutesInputEl = document.getElementById("minutesInput");
let convertBtn = document.getElementById("convertBtn");
let timeInSeconds = document.getElementById("timeInSeconds")
let errorMsg = document.getElementById("errorMsg");

function convertSeconds() {
    let hoursInput = hoursInputEl.value;
    let minutesInput = minutesInputEl.value;
    if (hoursInput === "") {
        errorMsg.textContent = "Please enter a valid number of hours"
    } else if (minutesInput === "") {
        errorMsg.textContent = "Please enter a valid number of minutes"
    } else {
        errorMsg.textContent = "";
        let numOfSeconds = (hoursInput * 3600) + (minutesInput * 60);
        console.log(numOfSeconds)
        timeInSeconds.classList.add("timeInSeconds");
        timeInSeconds.textContent = numOfSeconds + "s";
    }
}
convertBtn.addEventListener("click", convertSeconds);

Related Posts

JS Program to log the value located at Given Index

Access the values of an array Given an array. myArray = [25, false, “green”, “apple”]Write a Js program to log the value located at the given index….

JavaScript Program to Create & Log an Array

Create & Log an Array Write a JS program to log an array with the given values.‘Orange’, 25, 100, true, 33.58. OutputThe output should be a single…

Traffic Signal Light using Javascript | JS Projects for Beginners with Code

Traffic Signal Light Today, let’s build a Traffic Light by applying the basic Javascript concepts. Refer to the below image. Instructions: The HTML button elements should have the ids stopButton, readyButton,…

Build Simple Color Picker using JavaScript | JS Projects with Code

let’s build a Color Picker by applying the basic JavaScript concepts. Refer to the below image. Instructions: The HTML container element that is wrapping all the HTML…

Leave a Reply

Your email address will not be published.