CODING ASSIGNMENT 1 Time Converter
Time ConverterIn this assignment, let's build a Time Converter by applying the concepts we learned till now.Refer to the below image.Instructions:
The HTMLinputelement for entering the number of hours should have the idhoursInput- The HTML inputelement for entering the number of minutes should have the idminutesInput
- Add HTML labelelements for HTML input elements with idshoursInputandminutesInput
- The HTML buttonelement should have the idconvertBtn
- The HTML pelement to display the converted time in seconds should have the idtimeInSeconds
- The HTML pelement to display the error message should have the iderrorMsg
By following the above instructions, achieve the given functionality.
When values are provided in HTMLinputelements with idshoursInputandminutesInput, the HTML button with idconvertBtnis clicked- The converted time in seconds should be displayed in the HTML pelement with idtimeInSeconds
- The HTML pelement with iderrorMsgshould be empty
When the HTML
When both the HTML input elements
Example: When the hours is 5 and minutes is 6, then seconds will be 18360
The values given for the HTML input elements with ids
Resources
Use this Background image:
https://assets.ccbp.in/frontend/dynamic-webapps/time-converter-bg.pngCSS Colors used:
Text colors Hex code values used:
CSS Font families used:
Open SansConcepts Review
Want to quickly review some of the concepts you’ve been learning?
Take a look at the Cheat Sheets.
<!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/popper.js@1.16.1/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>
@import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Bree+Serif&family=Caveat:wght@400;700&family=Lobster&family=Monoton&family=Open+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display+SC:ital,wght@0,400;0,700;1,700&family=Playfair+Display:ital,wght@0,400;0,700;1,700&family=Roboto:ital,wght@0,400;0,700;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,700&family=Work+Sans:ital,wght@0,400;0,700;1,700&display=swap"); 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; }
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);
Comments
Post a Comment