MPSTME-ACM · AsavariShirodkar · Sep 6, 2025 · Sep 6, 2025 · Sep 7, 2025
diff --git a/1 Distance Converter/convert.html b/1 Distance Converter/convert.html
@@ -0,0 +1,17 @@
+<html>
+
+<head>
+<script src="./script.js"></script>
+</head>
+
+<body>
+    <h1>Distance Converter</h1>
+    <p>Enter values for input, fromUnit, and toUnit:</p>  
+    <input Type="text" name="inputValue" id="inputValue"> Input Value</input><br>
+    <input Type="text" name="fromUnit" id="fromUnit"> From Unit</input><br>
+    <input Type="text" name="toUnit" id="toUnit"> To Unit</input><br><br>
+    <button onClick="convertDistance(inputValue.value,fromUnit.value,toUnit.value)">Convert</button><br> 
+
+</body>
+
+</html>
diff --git a/1 Distance Converter/index.html b/1 Distance Converter/index.html
@@ -0,0 +1,16 @@
+<html>
+
+<head>
+<script src="./script.js"></script>
+</head>
+
+<body>
+    <h1>Distance Converter</h1>
+    <p>Enter values for input, fromUnit, and toUnit:</p>  
+    <input Type="text" name="inputValue" id="inputValue"> Input Value</input><br>
+    <input Type="text" name="fromUnit" id="fromUnit"> From Unit</input><br>
+    <input Type="text" name="toUnit" id="toUnit"> To Unit</input><br><br>
+    <button onClick="convertDistance(inputValue.value,fromUnit.value,toUnit.value)">Convert</button> 
+</body>
+
+</html>
diff --git a/1 Distance Converter/load.html b/1 Distance Converter/load.html
@@ -0,0 +1,6 @@
+<div id="popup-overlay" style="display: none;"></div>
+<div id="my-popup" style="display: none;">
+  <h2>Welcome!</h2>
+  <p>This is a popup message.</p>
+  <button id="close-popup">Close</button>
+</div>
diff --git a/1 Distance Converter/load.js b/1 Distance Converter/load.js
@@ -0,0 +1,21 @@
+document.addEventListener('DOMContentLoaded', function() {
+  const popupOverlay = document.getElementById('popup-overlay');
+  const myPopup = document.getElementById('my-popup');
+  const closePopupBtn = document.getElementById('close-popup');
+
+  // Show the popup and overlay when the page loads
+  popupOverlay.style.display = 'block';
+  myPopup.style.display = 'block';
+
+  // Hide the popup and overlay when the close button is clicked
+  closePopupBtn.addEventListener('click', function() {
+    popupOverlay.style.display = 'none';
+    myPopup.style.display = 'none';
+  });
+
+  // Optionally, hide the popup when clicking outside of it (on the overlay)
+  popupOverlay.addEventListener('click', function() {
+    popupOverlay.style.display = 'none';
+    myPopup.style.display = 'none';
+  });
+});
diff --git a/1 Distance Converter/script.js b/1 Distance Converter/script.js
@@ -26,4 +26,32 @@
             console.log("10 km to m is:", convertDistance(10, 'km', 'm'));   // Expected output: 10000
             console.log("500 cm to m is:", convertDistance(500, 'cm', 'm')); // Expected output: 5
             console.log("2500 m to km is:", convertDistance(2500, 'm', 'km')); // Expected output: 2.5
-*/
+*/
+
+function convertDistance(value, fromUnit, toUnit){
+    let x = value;
+    let result = 0;
+    if (fromUnit == 'km'){
+        result = x*1000;
+    } else{
+        if (fromUnit == 'cm'){
+            result = x/100;
+        } else{
+            result = x;
+        }
+    }
+
+    let finalResult = 0;
+    if (toUnit == 'km'){
+        finalResult = result*1000;
+    } else{
+        if (fromUnit == 'cm'){
+            finalResult = result/100;
+        } else{
+            finalResult = result;
+        }
+    }
+    console.log('Result : ' + finalResult);
+    return finalResult;
+}
+
diff --git a/2 Digital Clock/clock.html b/2 Digital Clock/clock.html
@@ -0,0 +1,12 @@
+<html>
+
+<head>
+<script src="./script.js"></script>
+</head>
+
+<body>
+    <h1>Digital Clock</h1>
+    <p id="clock"></p>
+</body>
+
+</html>
diff --git a/2 Digital Clock/script.js b/2 Digital Clock/script.js
@@ -15,4 +15,32 @@
     3.  EXECUTION:
         - Call the time-updating function once immediately to show the time on page load.
         - Use `setInterval` to automatically call the time-updating function every 1000 milliseconds (1 second).
-*/
+*/
+
+function CurrentTime(){
+    let currentTime = new Date();
+    let displayString = ''; 
+
+    let hours = currentTime.getHours();
+    let minutes = currentTime.getMinutes();
+    let seconds = currentTime.getSeconds();
+
+    if (hours < 10){
+        hours = '0' + hours;
+    }
+    if (minutes < 10){
+        minutes = '0' + minutes;
+    }
+    if (seconds < 10){
+        seconds = '0' + seconds;
+    }
+
+    displayString = hours + ':' + minutes + ':' + seconds;
+
+    console.log(displayString);
+    document.getElementById('clock').innerText = displayString;
+    return currentTime
+}
+
+setInterval(CurrentTime, 1000);
+
diff --git a/3 Color Changer/colorchanger.html b/3 Color Changer/colorchanger.html
@@ -0,0 +1,26 @@
+<!--html>
+
+<head>
+<script src="./script.js"></script>
+</head>
+
+<body>
+
+    <h1>Color Changer</h1>
+    <button id="changeColorBtn">Change Background Color</button>
+
+</body>
+
+</html-->
+
+    <html>
+    <head>
+        <title>Change Background Color</title>
+    </head>
+    <body>
+        <h1>Color Changer</h1>
+        <button id="changeColorBtn">Change Background Color</button>
+
+        <script src="script.js"></script>
+    </body>
+    </html>
diff --git a/3 Color Changer/script.js b/3 Color Changer/script.js
@@ -13,4 +13,18 @@
         - Convert that random number into a hexadecimal string.
         - Prepend a '#' to the start of the hex string to create a valid CSS color code (e.g., '#1a2b3c').
         - Set the `backgroundColor` style of the `body` element to this new random color string.
-*/
+*/
+
+let button = document.getElementById('changeColorBtn');
+
+// Add an event listener to the button
+changeColorBtn.addEventListener('click', function() {
+    let random = Math.floor(Math.random() * 16777215);
+    let hexadecimal = random.toString(16);
+    while (hexadecimal.length<6){
+        hexadecimal = '0' + hexadecimal;
+    }
+    let color = '#' + hexadecimal;
+    document.body.style.backgroundColor = color;
+    console.log("Color Changed!");        
+});
diff --git a/5 Calculator/calculator.html b/5 Calculator/calculator.html
@@ -0,0 +1,29 @@
+<html>
+
+<head>
+<script src="./script.js"></script>
+</head>
+
+<body>
+    <h1>Calculator</h1>
+    <div id="calculator">
+        <input type="text" id="display" readonly>
+        <div id="buttons">
+            <button class="number-button">7</button>
+            <button class="number-button">8</button>
+            <button class="number-button">9</button>
+            <button class="number-button">4</button>
+            <button class="number-button">5</button>
+            <button class="number-button">6</button>
+            <button class="number-button">1</button>
+            <button class="number-button">2</button>
+            <button class="number-button">3</button>
+            <button class="number-button">0</button>
+            <button class="number-button">.</button>
+            <!-- Add operator buttons and other function buttons here later -->
+        </div>
+    </div> 
+
+</body>
+
+</html>
diff --git a/test.html b/test.html
@@ -0,0 +1,16 @@
+<html>
+
+<head>
+<script src="./test.js"></script>
+</head>
+
+<body>
+    <h1>Distance Converter</h1>
+    <p>Enter values for input, fromUnit, and toUnit:</p>  
+    <input Type="text" name="inputValue" id="inputValue"> Input Value</input><br>
+    <input Type="text" name="fromUnit" id="fromUnit"> From Unit</input><br>
+    <input Type="text" name="toUnit" id="toUnit"> To Unit</input><br><br>
+    <button onClick="addData(inputValue.value,fromUnit.value,toUnit.value)">Convert</button> 
+</body>
+
+</html>
diff --git a/test.js b/test.js
@@ -0,0 +1,8 @@
+// Define the JavaScript function
+     function addData (fn, ln, em) {
+
+       console.log(fn);
+       console.log(ln);
+       console.log(em);
+
+     }