Answer to Question #192356 in HTML/JavaScript Web Application for Hari nadh babu

Question

Answer to Question #192356 in HTML/JavaScript Web Application for Hari nadh babu

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #192356

Write a JavaScript code by using HTML and CSS

Program name is Custom Range Counter

Custom Range Counter

Instructions:

Add the ids fromUserInput and toUserInput to the HTML input elements correspondingly
Add an id counterText to the HTML paragraph element with the class name counter

By following the above instructions, achieve the given functionality.

When the HTML button element with the id startBtn is clicked,
If the values of fromUserInput or toUserInput are not empty, display the numbers from fromUserInput to toUserInput for each second in the HTML element with the id counterText.
If the value of fromUserInput or toUserInput is empty, show a corresponding alert message to enter the input value.

Here is the Output Image on link below

https://drive.google.com/file/d/1aUujQ6KsVQKmVEjnBuCeu16Nd0Pr1-al/view?usp=sharing

Expert's answer

<!DOCTYPE html>
<html>
  <head>
    <title>Range Calculator</title>
    <style>
      body{
          background: #ec008c;
          background: -webkit-linear-gradient(to right, #fc6767, #ec008c);
          background: linear-gradient(to right, #fc6767, #ec008c);
      }
      #text{
          text-align: center;
          font-size: 3rem;
          font-weight: 900;
          color: aliceblue;
      }
      #submitForm{
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
      }
      #submitForm input{
          padding: 10px;
          margin: 20px;
          border-radius: 5px;
          border: 1px solid white;
          color: black;
          outline: none;
          width: 300px;
          background: white;
      }
      #submitForm button{
          cursor: pointer;
          padding: 10px;
          margin: 20px;
          border-radius: 10px;
          width: 100px;
          border: 1px solid white;
          font-weight: 600;
      }
      #counterText{
          font-size: 1.5rem;
          border: 1px solid white;
          width: fit-content;
          margin: 20px auto 0px auto;
          padding: 10px;
          display: none;
          color: aliceblue;
      }
    </style>
  </head>
  <body>
    <div>
      <p id="text">Custom Range Counter</p>
      <div>
       <form onsubmit="submitForm(event)" action="/" method="POST" id="submitForm">
        <input type="text" id="fromUserInput" name="fromUserInput" placeholder="Enter number 1"/>
        <input type="text" id="toUserInput" name="toUserInput" placeholder="Enter number 2"/>
        <button type="submit">Start</button>
       </form>
       <p id="counterText"></p>
      </div>
    </div>
    <script>
      function submitForm(event){
          event.preventDefault();

          let form = document.getElementById('submitForm');
          let fromUserInput = form.elements[0];
          let toUserInput = form.elements[1];

          let min = fromUserInput.value;
          let max = toUserInput.value;

          if(min=="" || max==""){
              alert("Enter the form value");
              return ;
          }
          let counter = setInterval(function () {
              document.getElementById('counterText').style.display="block";
              if(min==max) stopInterval()
              document.getElementById('counterText').innerHTML = min;
              min = Number(min) + 1;
          }, 1000);
          function stopInterval(){
              clearInterval(counter);
          }
      }
    </script>
  </body>
</html>

Answer to Question #192356 in HTML/JavaScript Web Application for Hari nadh babu

Comments

Leave a comment

Related Questions