diff --git a/tempcalc.css b/tempcalc.css
new file mode 100644
index 0000000..d81aeed
--- /dev/null
+++ b/tempcalc.css
@@ -0,0 +1,59 @@
+<style>
+* {
+  box-sizing: border-box;
+}
+
+.row {
+    border-radius:5px;
+    padding:20px;
+    max-width:1000px;
+    margin:auto;
+    border:5px solid black;
+}
+h1 {
+    font-size:50px;
+    text-align: center;
+}
+
+button {
+    padding :5px 15px;
+    text-align:center;
+    background-color:gray;
+    font-size: 20px;
+    font-style: strong; 
+
+}
+
+.bold {
+    font-weight: bold;
+}
+
+.column {
+    float: left;
+    padding: 70px;
+    height: 300px;
+}
+
+
+.middle {
+    width: 30%;
+  }
+  
+  .row:after {
+    content: "";
+    display: table;
+    clear: both;
+  }
+  input {
+      width: 30%;
+      padding:5px 5px;
+      margin:auto;
+      box-sizing : border-box;
+      border: 2px solid red;
+      
+   
+  /* } .tempC {
+       
+    margin-right:100px;
+
+  } */
\ No newline at end of file
diff --git a/tempcalc.html b/tempcalc.html
new file mode 100644
index 0000000..934303d
--- /dev/null
+++ b/tempcalc.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title> Temp Scale Conveter</title>
+  <link rel="stylesheet" href="tempcalc.css">
+  
+</head>
+<body>
+  <main>
+    
+      <h1 class = "bold">Temp Scale Conveter</h1>
+      <div class ="row">
+        <div class="column left">
+          <!-- <input type ="radio" id="tempF" name ="tempButton"> -->
+          <lable>Fehrenheit</lable>
+        </div>
+        <div class ="column middle">
+          <lable class="value">Value</lable><br>
+
+          <input type="text" id="fvalue"><br>
+          <br>
+          <br>
+          <!-- <input type ="radio" id="tempC" name ="tempButton"> -->
+          <label class="bold">Celsius</label>
+          <h3 id="demo"></h3>
+    
+        </div>
+        <div class="column right">
+          <button onclick="calculater()">Calcuclate</button>
+        </div>
+      </div>
+    
+    
+  </main>
+  <script src="tempcalc.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/tempcalc.js b/tempcalc.js
new file mode 100644
index 0000000..2980f23
--- /dev/null
+++ b/tempcalc.js
@@ -0,0 +1,17 @@
+function calculater() {
+    let fvalue = parseInt(document.getElementById("fvalue").value);
+    let cels = (fvalue -32)*5/9;
+    let celsAn = cels.toFixed(2);
+    document.getElementById("demo").innerHTML = celsAn;
+}
+/* 
+function calculater2() {
+    let cvalue = parseInt(document.getElementById("cvalue").value);
+    let feh = (cvalue *9/5)+32;
+    let FehAn = feh.toFixed(2);
+    document.getElementById("demo").innerHTML = FehAn;
+} */
+
+
+
+  
\ No newline at end of file
diff --git a/viversa.html b/viversa.html
new file mode 100644
index 0000000..33c5def
--- /dev/null
+++ b/viversa.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title> Temp Scale Conveter</title>
+  <link rel="stylesheet" href="tempcalc.css">
+  
+</head>
+<body>
+  <main>
+    
+      <h1 class = "bold">Temp Scale Conveter</h1>
+      <div class ="row">
+        <div class="column left">
+          <input type ="radio" id="tempF" name ="tempButton" > 
+          <lable>Fehrenheit</lable>
+          <h3 id="demo1"></h3>
+        </div>
+        <div class ="column middle">
+          <lable class="value">Value</lable><br>
+
+          <input type="text" id="fvalue"><br>
+          <br>
+          <br>
+          <input type ="radio" id="tempC" name ="temp2Button" > 
+          <label class="bold">Celsius</label>
+          <h3 id="demo"></h3>
+    
+        </div>
+        <div class="column right">
+          <button onclick="calculater()">Calcuclate</button>
+        </div>
+      </div>
+    
+    
+  </main>
+  <script src="viversacalc.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/viversacalc.js b/viversacalc.js
new file mode 100644
index 0000000..fc2e863
--- /dev/null
+++ b/viversacalc.js
@@ -0,0 +1,31 @@
+function covFtoC() {
+    let fvalue = parseInt(document.getElementById("fvalue").value);
+    let cels = (fvalue -32)*5/9;
+    let celsAn = cels.toFixed(2);
+    document.getElementById("demo").innerHTML = celsAn;
+}
+ 
+function covCtoF() {
+    let fvalue = parseInt(document.getElementById("fvalue").value);
+    let feh = (fvalue *9/5)+32;
+    let FehAn = feh.toFixed(2);
+   document.getElementById("demo1").innerHTML = FehAn;
+} 
+
+ function calculater(){
+   
+     if (document.getElementById("tempF").checked){
+
+        covFtoC();
+
+     } else if (document.getElementById("tempC").checked){
+    
+        covCtoF(); 
+        
+     } else {
+         console.log("please refresh screen");
+     }
+
+   
+    
+  }
