diff --git a/Temperature convertor/index.css b/Temperature convertor/index.css
new file mode 100644
index 0000000..6715f4d
--- /dev/null
+++ b/Temperature convertor/index.css
@@ -0,0 +1,108 @@
+body {
+ margin-top: 150px;
+ background-image: linear-gradient(to bottom right, lightseagreen, white);
+}
+
+.container {
+ margin: auto;
+ width: 500px;
+ padding-top: 10px;
+ background-color: white;
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5);
+ height: 50px;
+ justify-content: space-between;
+ font-size: 29px;
+ text-align: center;
+ border-radius: 10px;
+ font-family: 'Libre Baskerville', serif;
+ margin-bottom: 20px;
+
+}
+
+span{
+
+ display: block;
+ width: 500px;
+ height: 40px;
+ border-radius: 10px;
+ border: 1px solid lightcyan;
+ background-color: lightcyan;
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
+ padding-top: 15px;
+ align-items: center;
+ text-align: center;
+ cursor: pointer;
+ font-family: 'Libre Baskerville', serif;
+ margin: auto;
+ margin-top: 20px;
+}
+#tempCalc{
+ margin: auto;
+ width: 500px;
+ background-color: white;
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 0.5);
+ height: 250px;
+ justify-content: space-between;
+ font-size: 0px;
+ text-align: center;
+ border-radius: 10px;
+ padding-top: 10px;
+
+}
+
+.container h3 {
+ font-family: 'Aboreto', cursive;
+ width: 500px;
+ font-size: 10px;
+}
+
+label {
+ padding-top: 30px;
+}
+.hash{
+ position: relative;
+ display: inline-block;
+ font-size: 25px;
+ color: black;
+}
+input {
+ width: 450px;
+ height: 50px;
+ border-radius: 10px;
+ border: 1px solid lightcyan;
+ background-color: lightcyan;
+ box-shadow: 0 20px 25px rgba(0, 0, 0, 0.2);
+ margin-top: 10px;
+ align-items: center;
+ text-align: center;
+ cursor: pointer;
+ margin-top: 20px;
+ font-family: 'Libre Baskerville', serif;
+ font-weight: bolder;
+ font-size: 15px;
+}
+
+ select#temp_diff {
+ display: inline-block;
+ width: 130px;
+ min-height: 35px;
+ background:lightseagreen;
+ border-radius: 10px;
+ border: 2px solid lightseagreen;
+ margin-top: 0px;
+ text-align: center;
+ color: white;
+ font-size: 17px;
+ font-family: 'Libre Baskerville', serif;
+ cursor: pointer;
+
+
+}
+select#temp_diff:hover{
+ background-color:white;
+ color: black;
+
+}
+
+
+
diff --git a/Temperature convertor/index.html b/Temperature convertor/index.html
new file mode 100644
index 0000000..a9d0a09
--- /dev/null
+++ b/Temperature convertor/index.html
@@ -0,0 +1,46 @@
+
+
+
+
+
+ Temperature Convertor
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+Temperature Convertor
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/Temperature convertor/script.js b/Temperature convertor/script.js
new file mode 100644
index 0000000..a147683
--- /dev/null
+++ b/Temperature convertor/script.js
@@ -0,0 +1,29 @@
+const calculateTemp = () => {
+ const numberTemp = document.getElementById('temp').value;
+
+ const tempSelected= document.getElementById('temp_diff');
+
+ const valueTemp = temp_diff.options[tempSelected.selectedIndex].value;
+
+ const celToFah = (cel) =>{
+ let fahrenheit = Math.round((cel * 9 / 5) + 32);
+ return fahrenheit;
+ }
+ const FahTocel = (Fah) =>{
+ let celsius = Math.round((Fah -32) * 5/9);
+ return celsius;
+ }
+
+ let result;
+
+ if(valueTemp == 'cel'){
+ result = celToFah(numberTemp);
+ document.getElementById('resultContainer').innerHTML= `= ${result} ℉ahrenheit` ;}
+ else{
+ result = FahTocel(numberTemp);
+ document.getElementById('resultContainer').innerHTML= `= ${result} °Celsius` ;}
+ }
+
+
+
+