Rakesh9100 · ManasiDhotkar · May 24, 2024 · May 27, 2024
diff --git a/Calculators/Number-System-Calculator/index.html b/Calculators/Number-System-Calculator/index.html
@@ -16,6 +16,8 @@ <h1>Number System Calculator</h1>
         <div class="convert">
             <label for="fromBase">From Base:</label>
             <select id="fromBase">
+                <!-- Intial option added into menu dropdown box -->
+                <option value="" selected disabled>Select an option</option>
                 <option value="2">Binary</option>
                 <option value="8">Octal</option>
                 <option value="10">Decimal</option>
@@ -24,15 +26,21 @@ <h1>Number System Calculator</h1>
 
             <label for="toBase">To Base:</label>
             <select id="toBase">
+                 <!-- Intial option added into menu dropdown box -->
+                <option value="" selected disabled>Select an option</option>
                 <option value="2">Binary</option>
                 <option value="8">Octal</option>
                 <option value="10">Decimal</option>
                 <option value="16">Hexadecimal</option>
             </select>
         </div>
 
+        <!-- Convert button -->
         <button onclick="convert()">Convert</button>
 
+        <!-- Clear button -->
+        <button onclick="clear_fun()">Clear</button>
+
         <div id="result"></div>
     </div>
 

diff --git a/Calculators/Number-System-Calculator/script.js b/Calculators/Number-System-Calculator/script.js
@@ -7,4 +7,12 @@ function convert() {
     const convertedValue = decimalValue.toString(toBase);
 
     document.getElementById('result').innerHTML = `Converted Value: ${convertedValue}`;
-}
+}
+
+// claer function 
+function clear_fun() {
+    document.getElementById('number').value = ''; // clearing input field value
+    document.getElementById('fromBase').value = ''; // setting option "Select an option" in as initial value 
+    document.getElementById('toBase').value = '';  // setting option "Select an option" in as initial value 
+    document.getElementById('result').innerHTML = ''; // Clearing the result
+}
diff --git a/Calculators/Number-System-Calculator/style.css b/Calculators/Number-System-Calculator/style.css
@@ -5,7 +5,7 @@ body {
 }
 
 h1 {
-    margin-top: 9rem;
+    margin-top: 5rem;
     color: #333;
 }
 
@@ -51,6 +51,10 @@ button {
     border: none;
     border-radius: 4px;
     cursor: pointer;
+    width: 75px; /* same width of both buttons*/
+    margin: 5px; /* Adds space between buttons */
+    font-size: 12px; /* same font size */
+
 }
 
 button:hover {

diff --git a/Calculators/Shoe-Size-Calculator/README.md b/Calculators/Shoe-Size-Calculator/README.md
@@ -0,0 +1,15 @@
+# <p align="center">Shoe Size Calculator</p>
+
+## Description :-
+
+The Shoe Size Calculator helps you find your perfect fit. Just enter your foot length (size) and you will get your UK, US, EU size .
+accurately.
+
+## Tech Stacks :-
+
+- HTML
+- CSS
+- JavaScript
+
+## Screenshots :-
+![alt text](image.png)
diff --git a/Calculators/Shoe-Size-Calculator/image.png b/Calculators/Shoe-Size-Calculator/image.png
diff --git a/Calculators/Shoe-Size-Calculator/index.html b/Calculators/Shoe-Size-Calculator/index.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Shoe Size Converter</title>
+    <link rel="stylesheet" type="text/css" href="style.css">
+</head>
+<body>
+     <!-- Container for the converter -->
+    <div id="converter-container">
+        <h2>Shoe Size Converter</h2>
+        <!-- input form  -->
+        <form id="shoeSizeConverter">
+            <label for="originalSize">Original Size:</label>
+            <input type="text" id="originalSize" name="originalSize" placeholder="Enter shoe size">
+
+            <label for="originalUnit">Original Unit:</label>
+            <select id="originalUnit" name="originalUnit" onchange="enableOptions(this)">
+                <option value="" disabled selected>Select an option</option>
+                <option value="US">US</option>
+                <option value="UK">UK</option>
+                <option value="EU">EU</option>
+            </select>
+
+            <label for="targetUnit">Target Unit:</label>
+            <select id="targetUnit" name="targetUnit" onchange="enableOptions(this)">
+                <option value="" disabled selected>Select an option</option>
+                <option value="US">US</option>
+                <option value="UK">UK</option>
+                <option value="EU">EU</option>
+            </select>
+
+            <input type="submit" value="Convert">  
+        </form>
+
+         <!-- Display area for result -->
+        <div id="result"></div>
+    </div>
+
+    <!-- Linking to javascript file -->
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Shoe-Size-Calculator/script.js b/Calculators/Shoe-Size-Calculator/script.js
@@ -0,0 +1,61 @@
+
+// Function to enable options in a select element
+function enableOptions(select) {
+    var options = select.options;
+    for (var i = 0; i < options.length; i++) {
+        options[i].disabled = options[i].value === '';
+    }
+}
+
+// Event listener for form submission
+document.getElementById('shoeSizeConverter').addEventListener('submit', function(event) {
+    event.preventDefault();
+    // get value from input
+    var originalSize = parseFloat(document.getElementById('originalSize').value);
+    var originalUnit = document.getElementById('originalUnit').value;
+    var targetUnit = document.getElementById('targetUnit').value;
+
+    // Validation
+    if (originalUnit === '' || targetUnit === '') {
+        alert("Please select units for conversion.");
+        return;
+    }
+
+    if (originalUnit === targetUnit) {
+        alert("Please select different units.");
+        return;
+    }
+
+    if (isNaN(originalSize)) {
+        alert("Please enter a valid shoe size.");
+        return;
+    }
+
+    // Convert and display result
+    var convertedSize = convertShoeSize(originalSize, originalUnit, targetUnit);
+    document.getElementById('result').innerHTML = originalSize + ' ' + originalUnit + ' is approximately ' + convertedSize.toFixed(1) + ' ' + targetUnit + '.';
+});
+
+// Function to convert shoe sizes
+function convertShoeSize(size, fromUnit, toUnit) {
+    var conversions = {
+        "US": {"UK": function(x) { return x - 0.5; }, "EU": function(x) { return (x - 1) * 1.08333; }},
+        "UK": {"US": function(x) { return x + 0.5; }, "EU": function(x) { return x * 1.08333; }},
+        "EU": {"US": function(x) { return x * 0.923077; }, "UK": function(x) { return x * 0.923077; }}
+        // Add more conversions as needed
+    };
+
+     // If the units are the same, no conversion needed
+    if (fromUnit === toUnit) {
+        return size;
+    }
+
+     // Perform conversion
+    try {
+        var conversionFunction = conversions[fromUnit][toUnit];
+        return conversionFunction(size);
+    } catch (error) {
+        console.error("Conversion not available for the specified units.");
+        return null;
+    }
+}
diff --git a/Calculators/Shoe-Size-Calculator/shoe.png b/Calculators/Shoe-Size-Calculator/shoe.png
diff --git a/Calculators/Shoe-Size-Calculator/style.css b/Calculators/Shoe-Size-Calculator/style.css
@@ -0,0 +1,67 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-image: url('shoe.png'); /* background image */
+    background-size: cover;
+    background-position: center;
+}
+
+/* Styles for the converter container */
+#converter-container {
+    background-color: rgba(255, 255, 255, 0.8);
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    max-width: 400px;
+    margin: 50px auto 0; 
+}
+
+/* Styles for heading */
+h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Styles for the from*/
+form {
+    margin-bottom: 20px;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+/* Styles for inputs and selects */
+input[type="text"],  
+select {
+    width: 100%;
+    padding: 10px;
+    margin-bottom: 15px;
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: rgba(255, 255, 255, 0.8);
+}
+
+input[type="submit"] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+    font-size: 16px; /* Adjust the font size as needed */
+}
+
+/* Hover styles for submit button */
+input[type="submit"]:hover {
+    background-color: #45a049;
+}
+
+#result {
+    text-align: center;
+    font-weight: bold;
+}