Merge pull request #1 from iamfaizall20/byFaizal

iamfaizall20 · web-flow · commit 1a7775c4cbcb · 2025-05-05T19:40:58.000+05:00
Add new Mini Project "Temperature Converter"
diff --git a/30 - Temperature Converter/index.html b/30 - Temperature Converter/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Temperature Converter | WebDev Journey</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <div class="container">
+        <h1>Temperature Converter</h1>
+        <div class="inputFields">
+            <input type="text" placeholder="Enter Degree" id="degreeInput">
+            <select name="Scale" id="ScaleInput">
+                <option value="Fehrenheit" selected>Fehrenheit</option>
+                <option value="Celcius">Celcius</option>
+            </select>
+        </div>
+        <button onclick="Convert()">Convert</button>
+        <h2 class="showTemperature"></h2>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/30 - Temperature Converter/script.js b/30 - Temperature Converter/script.js
@@ -0,0 +1,20 @@
+function Convert() {
+
+    let degreeInput = document.getElementById('degreeInput').value;
+    let scaleInput = document.getElementById('ScaleInput').value;
+
+    if (degreeInput === '') {
+        return
+    }
+
+    degreeInput = parseFloat(degreeInput);
+
+    if (scaleInput.toLowerCase() === 'fehrenheit') {
+        let fehrenheit = (degreeInput * (9 / 5) + 32);
+        document.querySelector('.showTemperature').textContent = `${fehrenheit.toFixed(1)}\u00B0F`;
+    } else {
+        let celsuis = (degreeInput - 32) * (5 / 9);
+        document.querySelector('.showTemperature').textContent = `${celsuis.toFixed(1)}\u00B0C`;
+    }
+    document.getElementById('degreeInput').value = '';
+}
diff --git a/30 - Temperature Converter/style.css b/30 - Temperature Converter/style.css
@@ -0,0 +1,73 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Special+Gothic+Expanded+One&display=swap');
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+    font-family: 'Poppins';
+}
+body{
+    min-height: 100svh;
+    display: grid;
+    place-items: center;
+    background: #143D60;
+}
+.container{
+    display: flex;
+    flex-direction: column;
+    background: #F1F0E9;
+    padding: 20px;
+    width: 370px;
+    border-radius: 5px;
+}
+.container h1{
+    font-size: 22px;
+    margin-bottom: 20px;
+}
+.container .inputFields{
+    margin-bottom: 15px;
+    display: flex;
+    justify-content: space-between;
+}
+.container input{
+    border: 1px solid #ccc;
+    background: none;
+    outline: none;
+    font-size: 15px;
+    padding: 3px 10px;
+}
+.container select {
+    padding: 3px 30px 3px 10px;
+    font-size: 15px;
+    appearance: none;
+    background: url('data:image/svg+xml;utf8,<svg fill="black" height="20" viewBox="0 0 24 24" width="20" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>') no-repeat right 6px center;
+    border: 1px solid #ccc;
+    cursor: pointer;
+}
+.container button{
+    padding: 5px;
+    font-size: 15.5px;
+    border: none;
+    outline: none;
+    background: #255F38;
+    color: white;
+    font-weight: 450;
+    cursor: pointer;
+    margin-bottom: 20px;
+}
+.container h2{
+    font-size: 23px;
+    font-family: 'Cascadia mono';
+}
+@media (max-width:750px){
+    .container{
+        width: 350px;
+    }
+    .container input{
+        width: 185px;
+    }
+    .container select{
+        width: 120px;
+        padding: 3px 25px 3px 10px;
+    }
+}
