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);