8. JavaScript Conditional Statements and Loops

a. Larger Number

a. Write a program which asks the user to enter three integers, obtains the numbers from the user and outputs HTML text that displays the larger number followed by the words “LARGER NUMBER” in an information message dialog. If the numbers are equal, output HTML text as “EQUAL NUMBERS”.

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
  <title>Find the Larger Number</title>
  <script type="text/javascript">
    function findLargerNumber(event) {
      // Prevent the form from submitting and refreshing the page
      event.preventDefault();

      // Retrieve and parse the input values
      var num1 = parseInt(document.getElementById("num1").value, 10);
      var num2 = parseInt(document.getElementById("num2").value, 10);
      var num3 = parseInt(document.getElementById("num3").value, 10);

      // Determine the result based on the input numbers
      var resultText = "";
      if (num1 === num2 && num2 === num3) {
        resultText = "EQUAL NUMBERS";
      } else {
        var larger = Math.max(num1, num2, num3);
        resultText = larger + " LARGER NUMBER";
      }

      // Display the result in the 'result' div
      document.getElementById("result").innerText = resultText;
    }
  </script>
</head>
<body>
  <h1>Find the Larger Number</h1>
  <form id="numberForm" onsubmit="findLargerNumber(event)">
    <label for="num1">Enter the first integer:</label>
    <input type="number" id="num1" name="num1" required><br><br>
    
    <label for="num2">Enter the second integer:</label>
    <input type="number" id="num2" name="num2" required><br><br>
    
    <label for="num3">Enter the third integer:</label>
    <input type="number" id="num3" name="num3" required><br><br>
    
    <button type="submit">Submit</button>
  </form>

  <!-- The result will be displayed here -->
  <div id="result" style="margin-top:20px; font-weight:bold;"></div>
</body>
</html>

Enter numbers into the fields and click on Submit button.

b. Write a program to display week days using switch case.

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
  <title>Display Weekday using Switch Case</title>
  <script type="text/javascript">
    function displayWeekDay() {
      // Create a new Date object
      var currentDate = new Date();
      // getDay() returns a number from 0 (Sunday) to 6 (Saturday)
      var dayNumber = currentDate.getDay();
      var dayName = "";

      // Use switch case to assign the correct day name
      switch(dayNumber) {
        case 0:
          dayName = "Sunday";
          break;
        case 1:
          dayName = "Monday";
          break;
        case 2:
          dayName = "Tuesday";
          break;
        case 3:
          dayName = "Wednesday";
          break;
        case 4:
          dayName = "Thursday";
          break;
        case 5:
          dayName = "Friday";
          break;
        case 6:
          dayName = "Saturday";
          break;
        default:
          dayName = "Unknown Day";
      }

      // Display the result in the designated div
      document.getElementById("weekday").innerText = "Today is: " + dayName;
    }

    // Call the function once the page loads
    window.onload = displayWeekDay;
  </script>
</head>
<body>
  <h1>Weekday Display using Switch Case</h1>
  <div id="weekday" style="margin-top:20px; font-size:1.5em;"></div>
</body>
</html>

c. Write a program to print 1 to 10 numbers using for, while and do-while loops.

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
  <title>Print 1 to 10 Numbers Using Different Loops</title>
  <script type="text/javascript">
    window.onload = function() {
      // For loop: prints 1 to 10
      var forOutput = "For Loop: ";
      for (var i = 1; i <= 10; i++) {
        forOutput += i + " ";
      }
      document.getElementById("forOutput").innerText = forOutput;
      
      // While loop: prints 1 to 10
      var whileOutput = "While Loop: ";
      var j = 1;
      while (j <= 10) {
        whileOutput += j + " ";
        j++;
      }
      document.getElementById("whileOutput").innerText = whileOutput;
      
      // Do-while loop: prints 1 to 10
      var doWhileOutput = "Do-While Loop: ";
      var k = 1;
      do {
        doWhileOutput += k + " ";
        k++;
      } while (k <= 10);
      document.getElementById("doWhileOutput").innerText = doWhileOutput;
    }
  </script>
</head>
<body>
  <h1>Printing Numbers 1 to 10 Using Different Loops</h1>
  <div id="forOutput" style="margin-bottom: 20px; font-size: 1.2em;"></div>
  <div id="whileOutput" style="margin-bottom: 20px; font-size: 1.2em;"></div>
  <div id="doWhileOutput" style="margin-bottom: 20px; font-size: 1.2em;"></div>
</body>
</html>

d. Write aprogram to print data in object using for-in, for-each and for-of loops

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
  <title>Print Object Data Using Different Loops</title>
  <script type="text/javascript">
    window.onload = function() {
      // Define an object with some data
      var person = {
        name: "Arjun",
        age: 30,
        city: "Hyderabad"
      };

      // 1. Using a for-in loop
      var forInOutput = "";
      for (var key in person) {
        if (person.hasOwnProperty(key)) {
          forInOutput += key + ": " + person[key] + "<br>";
        }
      }
      document.getElementById("forIn").innerHTML = "For-in Loop:<br>" + forInOutput;

      // 2. Using forEach loop on Object.keys()
      var forEachOutput = "";
      Object.keys(person).forEach(function(key) {
        forEachOutput += key + ": " + person[key] + "<br>";
      });
      document.getElementById("forEach").innerHTML = "forEach Loop:<br>" + forEachOutput;

      // 3. Using a for-of loop on Object.entries()
      var forOfOutput = "";
      for (var [key, value] of Object.entries(person)) {
        forOfOutput += key + ": " + value + "<br>";
      }
      document.getElementById("forOf").innerHTML = "for-of Loop:<br>" + forOfOutput;
    }
  </script>
</head>
<body>
  <h1>Printing Object Data Using Different Loops</h1>
  <div id="forIn" style="margin-bottom:20px; font-size:1.2em;"></div>
  <div id="forEach" style="margin-bottom:20px; font-size:1.2em;"></div>
  <div id="forOf" style="margin-bottom:20px; font-size:1.2em;"></div>
</body>
</html>

e. ARMSTRONG NUMBER

Develop a program to determine whether a given number is an
‘ARMSTRONG NUMBER’ or not. [Eg: 153 is an Armstrong number, since sum of
the cube of the digits is equal to the number i.e., 13 + 53+ 33 = 153]

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
  <title>Armstrong Number Checker</title>
  <script type="text/javascript">
    function isArmstrong(event) {
      // Prevent form submission from reloading the page
      event.preventDefault();

      // Get the input value and parse it as an integer
      var num = parseInt(document.getElementById("number").value, 10);
      var originalNum = num; // Save the original number for comparison
      var sum = 0;
      
      // Compute the sum of the cubes of each digit
      while (num > 0) {
        var digit = num % 10;
        sum += digit * digit * digit; // Alternatively, Math.pow(digit, 3)
        num = Math.floor(num / 10);
      }
      
      // Compare the sum with the original number
      var output = "";
      if (sum === originalNum) {
        output = originalNum + " is an Armstrong number.";
      } else {
        output = originalNum + " is not an Armstrong number.";
      }
      
      // Display the result in the designated div
      document.getElementById("result").innerText = output;
    }
  </script>
</head>
<body>
  <h1>Armstrong Number Checker</h1>
  <form onsubmit="isArmstrong(event)">
    <label for="number">Enter a number:</label>
    <input type="number" id="number" required>
    <button type="submit">Check</button>
  </form>
  <div id="result" style="margin-top:20px; font-size:1.2em;"></div>
</body>
</html>

f. Denomination of the amount deposited

index.html

</>

Copy

<!DOCTYPE html>
<html>
<head>
  <title>Bank Denomination Calculator</title>
  <script type="text/javascript">
    function calculateDenominations(event) {
      // Prevent the form from submitting and refreshing the page
      event.preventDefault();

      // Retrieve and parse the input amount
      var amount = parseInt(document.getElementById("amount").value, 10);
      if (isNaN(amount) || amount < 0) {
        document.getElementById("result").innerText = "Please enter a valid positive number.";
        return;
      }
      
      // Define available denominations
      var denominations = [100, 50, 20, 10, 5, 2, 1];
      var breakdown = [];
      var remaining = amount;
      
      // Calculate the number of notes for each denomination
      denominations.forEach(function(denom) {
        var count = Math.floor(remaining / denom);
        if (count > 0) {
          breakdown.push(count + "-" + denom + "'s");
          remaining = remaining % denom;
        }
      });
      
      // Display the result in the output div
      document.getElementById("result").innerText = "Breakdown: " + breakdown.join(", ");
    }
  </script>
</head>
<body>
  <h1>Bank Denomination Calculator</h1>
  <form onsubmit="calculateDenominations(event)">
    <label for="amount">Enter deposited amount (in Rs): </label>
    <input type="number" id="amount" required>
    <button type="submit">Calculate</button>
  </form>
  <div id="result" style="margin-top:20px; font-size:1.2em;"></div>
</body>
</html>

TutorialKart

8. JavaScript Conditional Statements and Loops

a. Larger Number

b. Write a program to display week days using switch case.

c. Write a program to print 1 to 10 numbers using for, while and do-while loops.

d. Write aprogram to print data in object using for-in, for-each and for-of loops

e. ARMSTRONG NUMBER

f. Denomination of the amount deposited

Popular Courses

SAP

CRM

SAP Resources

Apache

GUI

Programming

Databases

Mobile

Linux

Web & Server

Testing

Learning