Rakesh9100 · Rakesh9100 · May 31, 2024 · May 30, 2024 · May 30, 2024 · May 31, 2024
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 :-
+
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/a859e2d9-7f16-4a42-82cd-840c9726f6a2)
diff --git a/Calculators/Shoe-Size-Calculator/index.html b/Calculators/Shoe-Size-Calculator/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Shoe Size Calculator</title>
+</head>
+<body>
+    <div id="converter-container">
+        <h2>Shoe Size Calculator</h2>
+        <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>
+
+        <div id="result"></div>
+    </div>
+
+    <!-- Link to the external 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,71 @@
+// Function to enable options in the select elements
+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(); // Prevent form from submitting the traditional way
+
+    var originalSize = parseFloat(document.getElementById('originalSize').value); // Get original shoe size
+    var originalUnit = document.getElementById('originalUnit').value; // Get original unit
+    var targetUnit = document.getElementById('targetUnit').value; // Get target unit
+
+    // Validate if units are selected
+    if (originalUnit === '' || targetUnit === '') {
+        alert("Please select units for conversion.");
+        return;
+    }
+
+    // Check if original and target units are different
+    if (originalUnit === targetUnit) {
+        alert("Please select different units.");
+        return;
+    }
+
+    // Validate if original size is a valid number
+    if (isNaN(originalSize)) {
+        alert("Please enter a valid shoe size.");
+        return;
+    }
+
+    // Convert the shoe size
+    var convertedSize = convertShoeSize(originalSize, originalUnit, targetUnit);
+    // Display the result
+    document.getElementById('result').innerHTML = originalSize + ' ' + originalUnit + ' is approximately ' + convertedSize.toFixed(1) + ' ' + targetUnit + '.';
+});
+
+// Function to convert shoe size based on units
+function convertShoeSize(size, fromUnit, toUnit) {
+    var conversions = {
+        "US": {
+            "UK": function(x) { return x - 0.5; }, // Conversion from US to UK
+            "EU": function(x) { return (x - 1) * 1.08333; } // Conversion from US to EU
+        },
+        "UK": {
+            "US": function(x) { return x + 0.5; }, // Conversion from UK to US
+            "EU": function(x) { return x * 1.08333; } // Conversion from UK to EU
+        },
+        "EU": {
+            "US": function(x) { return x * 0.923077; }, // Conversion from EU to US
+            "UK": function(x) { return x * 0.923077; } // Conversion from EU to UK
+        }
+    };
+
+    // If fromUnit and toUnit are same, return the original size
+    if (fromUnit === toUnit) {
+        return size;
+    }
+
+    // Convert using the appropriate function
+    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/style.css b/Calculators/Shoe-Size-Calculator/style.css
@@ -0,0 +1,71 @@
+/* Style for the body with background image */
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 20px;
+    background-image: url('assets/background.png');
+    background-size: cover;
+    background-position: center;
+}
+
+/* Container styling */
+#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; /* Center align the container with margin at the top */
+}
+
+/* Header styling */
+h2 {
+    text-align: center;
+    margin-bottom: 20px;
+}
+
+/* Form styling */
+form {
+    margin-bottom: 20px;
+}
+
+/* Label styling */
+label {
+    display: block;
+    margin-bottom: 10px;
+}
+
+/* Input and select field styling */
+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);
+}
+
+/* Submit button styling */
+input[type="submit"] {
+    background-color: #4CAF50;
+    color: white;
+    padding: 12px 20px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    width: 100%;
+    font-size: 16px; 
+}
+
+/* Submit button hover effect */
+input[type="submit"]:hover {
+    background-color: #45a049;
+}
+
+/* Result text styling */
+#result {
+    text-align: center;
+    font-weight: bold;
+}
diff --git a/index.html b/index.html
@@ -1982,6 +1982,20 @@ <h3>Calculates the total amount we can save over a specified period by making mo
                 </div>
             </div>
         </div>
+        <div class="box">
+            <div class="content">
+                <h2>Shoe Size Calculator</h2>
+                <h3>Calculator that helps to find the perfect shoe size.</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Shoe-Size-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Shoe-Size-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
         <div class="box">
             <div class="content">
                 <h2>Short URL Calculator</h2>