diff --git a/index.html b/index.html
new file mode 100644
index 0000000..34bb9fb
--- /dev/null
+++ b/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 Conversion</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <form>
+        <h1>Temperature Conversion:</h1>
+        <input type="number" id="textNum" value="0">
+        <br>
+        <input type="radio" id="toFahrenheit" name="unit">
+        <label for="toFahrenheit">Celcius to Fahrenheit</label>
+        <br>
+        <input type="radio" id="toCelcius" name="unit">
+        <label for="toCelcius">Fahrenheit to Celcius</label>
+        <br>
+        <button type="button" onclick="convert()">submit</button>
+        <p id="result">Select a unit</p>
+
+    </form>
+
+    <script src="index.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..02f5b8a
--- /dev/null
+++ b/index.js
@@ -0,0 +1,24 @@
+const textNum = document.getElementById(`textNum`);
+const toFahrenheit = document.getElementById(`toFahrenheit`);
+const toCelcius = document.getElementById(`toCelcius`);
+const result = document.getElementById(`result`);
+
+let temp;
+
+function convert(){
+
+    if(toFahrenheit.checked){
+        temp = Number(textNum.value);
+        temp = temp * 9 / 5 + 32;
+        result.textContent = temp.toFixed(1) + "°F";
+    }
+    else if(toCelcius.checked){
+        temp = Number(textNum.value);
+        temp = (temp - 32) *  (5/9);
+        result.textContent = temp.toFixed(1) + "°C";
+    }
+    else{
+        result.textContent = `Select a unit`;
+    }
+
+}
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..cec6425
--- /dev/null
+++ b/style.css
@@ -0,0 +1,54 @@
+body{
+    font-family: monospace;
+    background-color: antiquewhite;
+}
+
+h1{
+    font-weight: bold;
+}
+
+form{
+    text-align: center;
+    max-width: 300px;
+    margin: auto;
+    padding: 25px;
+    background-color:rgb(216, 215, 228);
+    box-shadow: 5px 5px 15px black;
+    border-radius: 10px;
+}
+
+label{
+    font-size: 20px;
+    font-weight: bold;
+}
+
+#textNum{
+    width: 50%;
+    text-align: center;
+    font-size: 2em;
+    border: 2px solid black;
+    border-radius: 4px;
+    margin-bottom: 15px;
+}
+
+button{
+    margin-top: 15px;
+    color: white;
+    background-color: rgb(255, 10, 10);
+    font-size: 15px;
+    cursor: pointer;
+    border-radius: 5px;
+    padding: 5px, 10px;
+}
+
+button:hover{
+    background-color: rgb(207, 37, 37);
+    color: black;
+}
+
+#result{
+    font-weight: bold;
+    font-size: 20px;
+    font-style: italic;
+    color: blue;
+}
\ No newline at end of file
