Answer to Question #201111 in HTML/JavaScript Web Application for teja

Question

Answer to Question #201111 in HTML/JavaScript Web Application for teja

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #201111

Time Converter

In this assignment, let's build a Time Converter by applying the concepts we learned till now.

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

Expert's answer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Time Converter</title>
</head>
<body>
    <div class="container">
        <h2 class="underline">Time Converter</h2>
            <div class="form-control">
                <form id="form">
                <label for="hours">Hours</label>
                <input type="number" id="hoursInput" placeholder="Enter number of hours...">
               </div>


                <div class="form-control">
                   <label for="minutes">Minutes</label>
                   <input type="number" id="minutesInput" placeholder="Enter number of minutes...">
                </div>
                <div class="searchContainer">
                    <div class="search"></div>
                  <!-- <div class="alert">
                        <p id="timeInSeconds"></p>
                  </div> -->
                </div>
                <!-- <div class="error">
                   <p id="errorMsg"></p>
               </div> -->
                <div class="btn-group">
                   <button id="convertBtn" class="btn">Convert</button>
                </div>
            </form>
           </div>


            
        
    <script src="app.js"></script>
</body>
</html>


<!-- css file below -->

*{
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
}


h2{
    text-align: center;
}
.container{
    border: 2px solid gray;
    border-radius: 10px;
    width: 450px;
    margin: auto;
    height: 70vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.underline{
    margin-bottom: 30px;
    border-bottom: 2px solid black;
}
.form-control{
    margin-bottom: 10px;
    padding-bottom: 10px;
}
.form-control input{
  border: 2px solid #777;
  width: 100%;
  height: 30px;
  display: block;
  border-radius: 5px;
  margin: 3px 7px;
}
.form-control input:focus{
    outline: 0;
    border: 2px solid #777;
}
.form-control label{
    display: block;
    color: #777;
}
.alert{
    border: 2px solid rgb(13, 77, 13);
    padding: 4px;
    border-radius: 4px;
    background-color: rgb(14, 65, 14);
    color: white;
    margin-bottom: 5px;
}.error{
    border: 2px solid tomato;
    padding: 4px;
    border-radius: 4px;
    background-color: rgb(184, 58, 35);
    color: white;
}
.btn-group{
    margin-top: 10px;
}
.btn{
    width: 200px;
    padding: 10px 6px;
    background-color: rgb(63, 63, 148);
    color: white;
    text-transform: uppercase;
    border: none;
    border-radius: 10px;
}
.btn:hover{
    background-color: rgb(52, 52, 114);
}


/* app.js file below */

// get input variables
const hoursInput = document.querySelector('#hoursInput');
const minutesInput = document.getElementById('minutesInput');
const Btn = document.getElementById('convertBtn');


// add event listeners
form.addEventListener('submit',getSeconds);


function getSeconds(e){
    if(hoursInput.value && minutesInput.value){
// clear any remaining alerts
      clearAlert();
    // create a p element
    const p = document.createElement('p');
    // add class
    p.className = 'alert';
    // get text node
    p.appendChild(document.createTextNode(hoursInput.value * 60 * 60 + minutesInput.value * 60 + " seconds"));
    // get parent
    const searchContainer = document.querySelector('.searchContainer');
    // get search box
    const search = document.querySelector('.search');
    // insert text
    searchContainer.insertBefore(p,search);
    }else{
        // remove any remaining alerts
        clearError();
        // create p element
      const p = document.createElement('p');
    //   add class
    p.className = 'error';
    // get text node
    p.appendChild(document.createTextNode('Please input the correct values for hours and minutes.'));
    // get parent
    const searchContainer = document.querySelector('.searchContainer');
    // get search box
    const search = document.querySelector('.search');
    // insert text
    searchContainer.insertBefore(p,search);


    // set time out
     setTimeout(()=>{
       clearError();
     },3000);
    }
    
    e.preventDefault();
}
//    clear alerts
  function clearAlert(){
    const currentAlert = document.querySelector('.alert');
   if(currentAlert){
       currentAlert.remove();
   }
}
// clear error
  function clearError(){
      const currentError = document.querySelector('.error');
      if(currentError){
          currentError.remove();
      }
  }

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #201111 in HTML/JavaScript Web Application for teja

Comments

Leave a comment

Related Questions