Add files via upload

lipi-13 · Aug 13, 2023 · 4a33d41 · 4a33d41
1 parent 8c1e6bd
commit 4a33d41
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 0 deletions.
diff --git a/temperature_converter.css b/temperature_converter.css
@@ -0,0 +1,21 @@
+body {
+    font-family: calibri;
+    background-color: #40C4FF;
+    padding:60px;
+  }
+  #container {
+    max-width: 400px;
+    background-color: #FFAB91;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    align-content:middle;
+    margin: auto;
+    padding: 50px;
+    border:solid black 4px;
+  }
+h1{
+  background-color:#B39DDB;
+  font-size:50px;
+  text-align:center;
+  border:solid black 2px;
+}
diff --git a/temperature_converter.html b/temperature_converter.html
@@ -0,0 +1,24 @@
+<html>
+<head>
+<title>Temperature Converter</title>
+    <link rel="stylesheet" type="text/css" href="temperature_converter.css">
+</head>
+<body>
+<div id="container">
+  <h1>TEMPERATURE CONVERTER</h1>
+  <h4>Enter the temperature you want to convert in the respective box:</h4>
+  <div>
+    <label for="celsius" style="background-color:#FF7043;">Celsius:</label>
+    <input type="number" id="celsius" placeholder="Enter temp. in Celsius" style="background-color:#FFF59D;" >
+  </div>
+  <p>
+  <div>
+    <label for="fahrenheit" style="background-color:#FF7043;">Fahrenheit:</label>
+    <input type="number" id="fahrenheit" placeholder="Enter temp. in Fahrenheit" style="background-color:#FFF59D;">
+  </div>
+  </p>
+  <button id="convertBtn" style="color:white;background-color:black;">Convert</button>
+</div>
+<script src="temperature_converter.js"></script>
+</body>
+</html>
diff --git a/temperature_converter.js b/temperature_converter.js
@@ -0,0 +1,15 @@
+const convertBtn = document.getElementById("convertBtn");
+const celsiusInput = document.getElementById("celsius");
+const fahrenheitInput = document.getElementById("fahrenheit");
+
+convertBtn.addEventListener("click", () => {
+  if (celsiusInput.value !== "") {
+    const celsius = parseFloat(celsiusInput.value);
+    const fahrenheit = (celsius * 9 / 5) + 32;
+    fahrenheitInput.value = fahrenheit.toFixed(2);
+  } else if (fahrenheitInput.value !== "") {
+    const fahrenheit = parseFloat(fahrenheitInput.value);
+    const celsius = (fahrenheit - 32) * 5 / 9;
+    celsiusInput.value = celsius.toFixed(2);
+  }
+});