Initial commit

thesawankumar · thesawankumar · commit 7f4696a1fe9d · 2023-05-25T02:56:41.000+05:30
diff --git a/.gitattributes b/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/README.md b/README.md
@@ -0,0 +1,2 @@
+# TemperatureConverter
+ 
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <main>
+        <form>
+            <div class="container">
+                <input type="number" name="degrees" autocomplete="off" required>
+                <label class="degrees">Degrees</label>
+            </div>
+            <div class="container">
+                <select name="type">
+                    <option value="F">Fahrenheit</option>
+                    <option value="C">Celcius</option>
+                </select>
+                <label class="type">Type</label>
+            </div>
+            <button type="submit">Convert</button>
+        </form>
+        <div class="result">
+            <p>Result</p>
+            <p></p>
+        </div>
+    </main>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,17 @@
+const form = document.querySelector("form");
+const resultArea = document.querySelector(".result p:nth-child(2)");
+const convert2F = degree => (degree * 1.8 + 32).toFixed(2);
+const convert2C = degree => ((degree - 32) * 0.5556).toFixed(2);
+const submitBtn = e => {
+    e.preventDefault();
+    const degrees = Number(e.target.degrees.value) || 0;
+    const type = e.target.type.value;
+    const strategy =
+    {
+        C: convert2F,
+        F: convert2C,
+    };
+    const result = strategy[type](degrees);
+    resultArea.innerHTML = `${result} ${type === "C" ? "&#8457" : " &#8451"}`;
+};
+form.addEventListener("submit",submitBtn);
diff --git a/style.css b/style.css
@@ -0,0 +1,109 @@
+:root {
+    --desc-font-size: 0.8rem;
+    --desc-font-color: rgb(153, 153, 153);
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    background-color: rgb(144, 182, 169);
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+main {
+    width: 40vw;
+    height: 30vh;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 2rem;
+    padding: 1.5rem;
+    background-color: white;
+    box-shadow: 1px 1px 5px black;
+    border-radius: 10px;
+}
+
+form {
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
+}
+
+form button {
+    padding: 0.75rem;
+    border-radius: 5px;
+    border: none;
+    color: white;
+    background-color: blue;
+}
+
+.container {
+    position: relative;
+}
+
+.container * {
+    border: 1px solid lightgray;
+    position: relative;
+}
+
+.container input,
+.container select {
+    padding: 0.75rem;
+    border-radius: 8px;
+}
+
+.container .type {
+    position: absolute;
+    top: -1.25rem;
+    left: 0;
+    color: var(--desc-font-color);
+    font-size: var(--desc-font-size);
+    border: none;
+}
+
+.container .degrees {
+    position: absolute;
+    top: 50%;
+    left: 5%;
+    transform: translateY(-50%);
+    color: var(--desc-font-color);
+    border: none;
+    transition: all 0.1s ease;
+    pointer-events: none;
+}
+
+.container input[type="number"]:focus~.degrees,
+.container input[type="number"]:not(:focus):valid~.degrees {
+    top: -1.25rem;
+    left: 0;
+    font-size: var(--desc-font-size);
+    transform: translateY(0);
+}
+
+.result {
+    margin-top: 1rem;
+    min-height: 2.5rem;
+}
+
+.result p:nth-child(1) {
+    font-size: var(--desc-font-size);
+    color: var(--desc-font-color);
+}
+
+.result p:nth-child(2) {
+    margin-top: 0.1rem;
+    font-size: 1.25rem;
+    font-weight: 600;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,2 @@`
	`1`	`+# Auto detect text files and perform LF normalization`
	`2`	`+* text=auto`