From 3f6181e6177eb5d5c765a3f189524f62668ee097 Mon Sep 17 00:00:00 2001
From: Parth Dhavan <parthdhavan2004@gmail.com>
Date: Fri, 24 May 2024 22:27:00 +0530
Subject: [PATCH] exp5

---
 exp5/1) Largest_integer.html | 107 +++++++++++++++++++++++++++++++++++
 exp5/2) Capitalize.html      |  85 ++++++++++++++++++++++++++++
 exp5/3) Calculator.html      |  98 ++++++++++++++++++++++++++++++++
 exp5/4) smallest_word.html   |  76 +++++++++++++++++++++++++
 exp5/dropdown.html           |  48 ++++++++++++++++
 exp5/odd_no.html             |  66 +++++++++++++++++++++
 exp5/palindrome.html         |  98 ++++++++++++++++++++++++++++++++
 exp5/random_string.html      |  79 ++++++++++++++++++++++++++
 8 files changed, 657 insertions(+)
 create mode 100644 exp5/1) Largest_integer.html
 create mode 100644 exp5/2) Capitalize.html
 create mode 100644 exp5/3) Calculator.html
 create mode 100644 exp5/4) smallest_word.html
 create mode 100644 exp5/dropdown.html
 create mode 100644 exp5/odd_no.html
 create mode 100644 exp5/palindrome.html
 create mode 100644 exp5/random_string.html
diff --git a/exp5/1) Largest_integer.html b/exp5/1) Largest_integer.html
new file mode 100644
index 0000000..a87cb2f
--- /dev/null
+++ b/exp5/1) Largest_integer.html	
@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Display largest Integer</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        h1 {
+            text-align: center;
+            color: #333;
+        }
+
+        #integerForm {
+            max-width: 400px;
+            margin: 0 auto;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+
+        label {
+            font-weight: bold;
+            color: #333;
+        }
+
+        input[type="number"] {
+            width: 100%;
+            padding: 8px;
+            margin-top: 6px;
+            margin-bottom: 10px;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-sizing: border-box;
+        }
+
+        button {
+            width: 100%;
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 16px;
+        }
+
+        button:hover {
+            background-color: #45a049;
+        }
+
+        #result {
+            margin-top: 20px;
+            padding: 10px;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 4px;
+            box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+        }
+    </style>
+</head>
+<body>
+    <h1>Max Number</h1>
+    <form id="integerForm">
+        <label for="num1">Enter first integer:</label>
+        <input type="number" id="num1" name="num1" required><br><br>
+        <label for="num2">Enter second integer:</label>
+        <input type="number" id="num2" name="num2" required><br><br>
+        <label for="num3">Enter third integer:</label>
+        <input type="number" id="num3" name="num3" required><br><br>
+        <button onclick="findLargest(event)">Find Largest Integer</button>
+    </form>
+
+    <div id="result"></div>
+
+    <script>
+        function displayLargestInteger(num1, num2, num3) {
+            var largest = num1;
+            if (num2 > largest) {
+                largest = num2;
+            }
+            if (num3 > largest) {
+                largest = num3;
+            }
+            return largest;
+            
+        }
+
+        function findLargest(e) {
+            e.preventDefault();
+            var num1 = parseInt(document.getElementById("num1").value);
+            var num2 = parseInt(document.getElementById("num2").value);
+            var num3 = parseInt(document.getElementById("num3").value);
+            var result = displayLargestInteger(num1, num2, num3);
+            document.getElementById("result").innerHTML = "The largest integer is: " + result;
+        }
+    </script>
+</body>
+</html>
diff --git a/exp5/2) Capitalize.html b/exp5/2) Capitalize.html
new file mode 100644
index 0000000..0528989
--- /dev/null
+++ b/exp5/2) Capitalize.html	
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Capitalize</title>
+<style>
+  body {
+    font-family: Arial, sans-serif;
+    background-color: #f0f0f0;
+    margin: 0;
+    padding: 0;
+  }
+
+  h2 {
+    text-align: center;
+    color: #333;
+  }
+
+  input[type="text"] {
+    width: 80%;
+    padding: 10px;
+    margin: 10px auto;
+    display: block;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    box-sizing: border-box;
+  }
+
+  button {
+    padding: 10px 20px;
+    margin: 10px auto;
+    display: block;
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #45a049;
+  }
+
+  #output {
+    width: 80%;
+    margin: 20px auto;
+    padding: 10px;
+    background-color: #fff;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+  }
+</style>
+<script>
+function capitalizeLastLetterOfEachWord(str) {
+  // first i will Split the string into an array of words
+  const words = str.split(' ');
+
+  //  now i will Capitalize the last letter of each word
+  for (let i = 0; i < words.length; i++) {
+    if (words[i].length > 0) { // Check if the word is not empty
+      words[i] = words[i].slice(0, -1) + words[i].charAt(words[i].length - 1).toUpperCase();
+    }
+  }
+
+  // now we will Join the words back into a string
+  return words.join(' ');
+}
+
+function capitalizeAndDisplay() {
+  let inputText = document.getElementById("inputText").value;
+  let capitalizedText = capitalizeLastLetterOfEachWord(inputText);
+  document.getElementById("output").innerText = capitalizedText;
+}
+</script>
+</head>
+<body>
+
+<h2>Capitalize Last Letter of Each Word</h2>
+
+<input type="text" id="inputText" placeholder="Enter a sentence">
+<button onclick="capitalizeAndDisplay()">Capitalize</button>
+<div id="output"></div>
+
+</body> </html>
diff --git a/exp5/3) Calculator.html b/exp5/3) Calculator.html
new file mode 100644
index 0000000..35e06fc
--- /dev/null
+++ b/exp5/3) Calculator.html	
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Simple Calculator</title>
+<style>
+    body {
+        font-family: Arial, sans-serif;
+        background-color: #f0f0f0;
+        margin: 0;
+        padding: 0;
+    }
+    h2 {
+        text-align: center;
+        color: #333;
+    }
+    .calculator {
+        width: 300px;
+        margin: 20px auto;
+        padding: 10px;
+        background-color: #fff;
+        border-radius: 8px;
+        box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+    #display {
+        width: 100%;
+        margin-bottom: 10px;
+        padding: 3.5px;
+        font-size: 20px;
+        text-align: right;
+        border: 1px solid #ccc;
+        border-radius: 4px;
+        margin-right: 30px;
+    }
+    .btn-container {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 5px;
+    }
+    input[type="button"] {
+        padding: 10px;
+        font-size: 20px;
+        background-color: #4CAF50;
+        color: white;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+    }
+    input[type="button"]:hover {
+        background-color: #45a049;
+    }
+</style>
+</head>
+<body>
+
+<h2>Simple Calculator</h2>
+
+<div class="calculator">
+    <input type="text" id="display" disabled>
+    <div class="btn-container">
+        <input type="button" value="1" onclick="appendToDisplay('1')">
+        <input type="button" value="2" onclick="appendToDisplay('2')">
+        <input type="button" value="3" onclick="appendToDisplay('3')">
+        <input type="button" value="+" onclick="appendToDisplay('+')">
+        <input type="button" value="4" onclick="appendToDisplay('4')">
+        <input type="button" value="5" onclick="appendToDisplay('5')">
+        <input type="button" value="6" onclick="appendToDisplay('6')">
+        <input type="button" value="-" onclick="appendToDisplay('-')">
+        <input type="button" value="7" onclick="appendToDisplay('7')">
+        <input type="button" value="8" onclick="appendToDisplay('8')">
+        <input type="button" value="9" onclick="appendToDisplay('9')">
+        <input type="button" value="*" onclick="appendToDisplay('*')">
+        <input type="button" value="C" onclick="clearDisplay()">
+        <input type="button" value="0" onclick="appendToDisplay('0')">
+        <input type="button" value="=" onclick="calculate()">
+        <input type="button" value="/" onclick="appendToDisplay('/')">
+    </div>
+</div>
+
+<script>
+function appendToDisplay(value) {
+    document.getElementById('display').value += value;
+}
+
+function clearDisplay() {
+    document.getElementById('display').value = '';
+}
+
+function calculate() {
+    let expression = document.getElementById('display').value;
+    let result = eval(expression); /*built in JS func */
+    document.getElementById('display').value = result;
+}
+</script>
+
+</body>
+</html>
\ No newline at end of file
diff --git a/exp5/4) smallest_word.html b/exp5/4) smallest_word.html
new file mode 100644
index 0000000..66aa8f3
--- /dev/null
+++ b/exp5/4) smallest_word.html	
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Smallest Word Finder</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      background-color: #f0f0f0;
+      margin: 0;
+      padding: 0;
+    }
+    #container {
+      width: 80%;
+      margin: 50px auto;
+      text-align: center;
+    }
+    input[type="text"] {
+      width: 100%;
+      padding: 10px;
+      margin-bottom: 10px;
+      box-sizing: border-box;
+    }
+    button {
+      padding: 10px 20px;
+      font-size: 16px;
+      background-color: #4CAF50;
+      color: white;
+      border: none;
+      border-radius: 5px;
+      cursor: pointer;
+    }
+    button:hover {
+      background-color: #45a049;
+    }
+    #result {
+      margin-top: 20px;
+    }
+  </style>
+</head>
+<body>
+
+<div id="container">
+  <h2>Smallest Word Finder</h2>
+  <input type="text" id="inputString" placeholder="Enter your sentence here">
+  <button type="button" onclick="findSmallestWord()">Find Smallest Word</button>
+  <p id="result"></p>
+</div>
+
+<script>
+  function findSmallestWord() {
+    const inputString = document.getElementById("inputString").value.trim();
+
+    if (!inputString) {
+      alert("Please enter a sentence.");
+      return;
+    }
+
+    const words = inputString.split(" "); 
+
+    let smallestWord = words[0]; // Initialize with the first word
+    let smallestWordLength = smallestWord.length;
+
+    for (const word of words) {
+      if (word.length < smallestWordLength) {
+        smallestWord = word;
+        smallestWordLength = word.length;
+      }
+    }
+    const resultElement = document.getElementById("result");
+    resultElement.textContent = `The smallest word is: "${smallestWord}"`;
+  }
+</script>
+</body>
+</html>
diff --git a/exp5/dropdown.html b/exp5/dropdown.html
new file mode 100644
index 0000000..a3e68f7
--- /dev/null
+++ b/exp5/dropdown.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Number Dropdown</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    select {
+      display: block;
+      margin: 20px auto;
+      padding: 10px;
+      font-size: 16px;
+      width: 200px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>
+  <h1>Select a Number</h1>
+  <select id="numberDropdown"></select>
+  <script>
+    const dropdown = document.getElementById("numberDropdown");
+
+    function populateDropdown() {
+      for (let i = 1; i <= 10; i++) {
+        const option = document.createElement("option");
+        option.text = i;
+        dropdown.appendChild(option);
+      }
+    }
+
+    populateDropdown();
+  </script>
+</body>
+</html>
diff --git a/exp5/odd_no.html b/exp5/odd_no.html
new file mode 100644
index 0000000..f406d6e
--- /dev/null
+++ b/exp5/odd_no.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Odd Numbers and Sum</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    button {
+      display: block;
+      margin: 20px auto;
+      padding: 10px 20px;
+      font-size: 16px;
+      border: none;
+      background-color: #007bff;
+      color: #fff;
+      cursor: pointer;
+    }
+
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    #results {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 20px;
+      background-color: #fff;
+      border-radius: 5px;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    }
+  </style>
+</head>
+<body>
+  <h1>Finding Odd Numbers and Sum</h1>
+  <button onclick="checkNumbers()">Click to Find Sum of odd numbers b/w 1 to 100</button>
+  <div id="results"></div>
+  <script>
+    function checkNumbers() {
+      const results = document.getElementById("results");
+      results.innerHTML = "";
+
+      let oddNumbers = "";
+      let sumOfOdds = 0;
+
+      for (let i = 1; i <= 100; i += 2) {
+        oddNumbers += i + " ";
+        sumOfOdds += i;
+      }
+
+      var outputString = "Odd Numbers: " + oddNumbers + "<br> Sum of Odd Numbers: " + sumOfOdds;
+      results.innerHTML = outputString;
+    }
+  </script>
+</body>
+</html>
diff --git a/exp5/palindrome.html b/exp5/palindrome.html
new file mode 100644
index 0000000..8136290
--- /dev/null
+++ b/exp5/palindrome.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Palindrome Numbers and Sum Finder</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+      margin-left: 4px;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    label {
+      display: block;
+      margin-top: 10px;
+    }
+
+    input[type="number"] {
+      display: block;
+      margin-bottom: 10px;
+      padding: 5px;
+      width: calc(25% - 5px); 
+      box-sizing: border-box;
+      margin-left:3px ;
+    }
+
+    button {
+      display: block;
+      margin: 10px auto;
+      padding: 10px 20px;
+      font-size: 16px;
+      border: none;
+      background-color: #007bff;
+      color: #fff;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    p#result {
+      text-align: center;
+      margin-top: 20px;
+      font-size: 18px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Find Palindrome Numbers and Sum</h1>
+  <label for="lowerLimit">Lower Limit:</label> <br>
+  <input type="number" id="lowerLimit" placeholder="Enter lower limit"> <br>
+  <label for="upperLimit">Upper Limit:</label> <br>
+  <input type="number" id="upperLimit" placeholder="Enter upper limit">
+  <button onclick="findPalindromes()">Find Palindromes</button>
+  <p id="result"></p>
+  <script>
+    function isPalindrome(num) {
+      const numStr = num.toString();
+      let reversed = "";
+      for (let i = numStr.length - 1; i >= 0; i--) {
+        reversed += numStr[i];
+      }
+      return parseInt(numStr) === parseInt(reversed);
+    }
+
+    function findPalindromes() {
+      const lowerLimit = parseInt(document.getElementById("lowerLimit").value);
+      const upperLimit = parseInt(document.getElementById("upperLimit").value);
+      const result = document.getElementById("result");
+
+      let sumOfPalindromes = 0;
+      let palindromeList = "";
+
+      for (let i = lowerLimit; i <= upperLimit; i++) {
+        if (isPalindrome(i)) {
+          palindromeList += i + " ";
+          sumOfPalindromes += i;
+        }
+      }
+
+      if (palindromeList) {
+        result.textContent = "Palindrome numbers between " + lowerLimit + " and " + upperLimit + " are: " + palindromeList + "<br> Sum of Palindromes: " + sumOfPalindromes;
+      } else {
+        result.textContent = "No palindrome numbers found in the given range.";
+      }
+    }
+  </script>
+</body>
+</html>
diff --git a/exp5/random_string.html b/exp5/random_string.html
new file mode 100644
index 0000000..96ab10a
--- /dev/null
+++ b/exp5/random_string.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Random String Generator</title>
+  <style>
+    body {
+      font-family: Arial, sans-serif;
+      margin: 0;
+      padding: 0;
+      background-color: #f4f4f4;
+    }
+
+    h1 {
+      text-align: center;
+    }
+
+    input[type="number"] {
+      display: block;
+      margin: 20px auto;
+      padding: 10px;
+      font-size: 16px;
+      width: 200px;
+      border: 1px solid #ccc;
+      border-radius: 5px;
+      box-sizing: border-box;
+    }
+
+    button {
+      display: block;
+      margin: 10px auto;
+      padding: 10px 20px;
+      font-size: 16px;
+      border: none;
+      background-color: #007bff;
+      color: #fff;
+      cursor: pointer;
+      border-radius: 5px;
+    }
+
+    button:hover {
+      background-color: #0056b3;
+    }
+
+    p#result {
+      text-align: center;
+      margin-top: 20px;
+      font-size: 18px;
+    }
+  </style>
+</head>
+<body>
+  <h1>Generate a Random String</h1>
+  <input type="number" id="stringLength" placeholder="Enter String Length">
+  <button onclick="generateString()">Generate</button>
+  <p id="result"></p>
+  <script>
+    function generateString() {
+      const stringLength = document.getElementById("stringLength").value;
+      const result = document.getElementById("result");
+
+      if (stringLength === "" || isNaN(stringLength) || stringLength <= 0) {
+        result.textContent = "Please enter a valid positive number for string length.";
+        return;
+      }
+
+      const characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
+      let randomString = "";
+
+      for (let i = 0; i < stringLength; i++) {
+        const randomIndex = Math.floor(Math.random() * characters.length);
+        randomString += characters.charAt(randomIndex);
+      }
+      result.textContent = "Your random string is: " + randomString;
+    }
+  </script>
+</body>
+</html>
