leng

aalee9263 · Oct 25, 2023 · 3a603eb · 3a603eb
1 parent 4a2685f
commit 3a603eb
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 10 deletions.
diff --git a/converter.js b/converter.js
@@ -0,0 +1,11 @@
+let celsius = document.getElementById("celsius");
+let farenheit = document.getElementById("farenheit");
+
+function celToFar() {
+  let output = (parseFloat(celsius.value) * 9) / 5 + 32;
+  farenheit.value = parseFloat(output.toFixed(2));
+}
+function farToCel() {
+  let output = ((parseFloat(farenheit.value) - 32) * 5) / 9;
+  celsius.value = parseFloat(output.toFixed(2));
+}
diff --git a/index.html b/index.html
@@ -1,11 +1,40 @@
 <!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Length Converters</title>
-</head>
-<body>
-
-</body>
-</html>
+<html>
+  <head>
+    <title>Temperature Converter</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <h2 style="letter-spacing: 7px; line-height: 40px">
+      Lengths Converter
+    </h2>inches, 
+    feet, yards, kilometers, and miles.
+      <div class="converter">
+        <form class="container">
+          <label for="meter">Meter</label>
+          <input type="number" id="meter" oninput="metAndCen()" />
+        </form>
+        <form class="container">
+          <label for="centimeter">Centimeters</label>
+          <input type="number" id="centimeter" oninput="metAndInch()" />
+        </form>
+        <form class="container">
+          <label for="inch">Inches</label>
+          <input type="number" id="inch" oninput="cenAndInch()" />
+        </form>
+        <form class="container">
+          <label for="inch">Inches</label>
+          <input type="number" id="inch" oninput="cenToMet()" />
+        </form>
+        <form class="container">
+          <label for="inch">Inches</label>
+          <input type="number" id="inch" oninput="cenToMet()" />
+        </form>
+        <form class="container">
+          <label for="inch">Inches</label>
+          <input type="number" id="inch" oninput="cenToMet()" />
+        </form>
+      </div>
+    <script src="./converter.js"></script>
+  </body>
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,53 @@
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap");
+* {
+  margin: 0;
+  padding: 0;
+  font-family: "Roboto", sans-serif;
+  box-sizing: border-box;
+}
+/* Add your CSS styles for the converter here */
+body {
+  width: 100%;
+  height: 100vh;
+  background: linear-gradient(45deg, #0a0a0a, #3a4452);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  color: #b6b1b1dc;
+}
+.converter {
+  width: 420px;
+  margin: 0 auto;
+  border: 1px solid #ccc;
+  padding: 10px;
+  border-radius: 20px;
+  background: linear-gradient(45deg, #0a0a0a, #3a4452);
+  display: flex;
+  justify-content: space-evenly;
+  color: #ffffffdc;
+  font-size: 22px;
+}
+label {
+  margin: 16px;
+}
+.container {
+  margin: 10px;
+}
+input {
+  width: 90%;
+  border: 1px solid #717377;
+  box-shadow: 0px 3px 15px rgba(113, 115, 119, 0.5);
+  border-radius: 10px;
+  padding: 3px;
+  margin: 10px 10px;
+  background: transparent;
+  font-size: 50px;
+  text-align: left;
+  cursor: pointer;
+  color: #ffffff;
+}
+.formula {
+  display: flex;
+  flex-direction: row;
+}