├── index.html ├── script.js └── style.css /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Temperature Converter 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 |
20 |

Temperature Converter

21 | 22 | 23 | 24 |
25 | 26 |
27 | 28 | ℃ 29 |
30 | 31 |
32 | 33 | ℉ 34 |
35 | 36 |
37 | 38 | K 39 |
40 | 41 |
42 | 43 |
44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- 1 | let celciusInput = document.querySelector("#celcius > input"); 2 | let fahreheitInput = document.querySelector("#fahreheit > input"); 3 | let kelvinInput = document.querySelector("#Kelvin > input"); 4 | 5 | console.log(celciusInput) 6 | 7 | 8 | let btn = document.querySelector(".button button"); 9 | 10 | function roundNumber(number){ 11 | return Math.round(number*100)/100; 12 | } 13 | 14 | // Celcuis to fahrenheit and kelvin 15 | 16 | celciusInput.addEventListener("input", function(){ 17 | let cTemp = parseFloat(celciusInput.value) 18 | let fTemp = (cTemp*(9/5))+32 19 | let kTemp = cTemp + 273.15 20 | 21 | fahreheitInput.value = roundNumber(fTemp) 22 | kelvinInput.value = roundNumber(kTemp) 23 | }) 24 | 25 | // fahrenheit to Celcuis and kelvin 26 | fahreheitInput.addEventListener("input", function(){ 27 | let fTemp = parseFloat(fahreheitInput.value) 28 | let cTemp = (fTemp - 32)* (5/9) 29 | let kTemp = (fTemp - 32)* (5/9) + 273.15 30 | 31 | celciusInput.value = roundNumber(cTemp) 32 | kelvinInput.value = roundNumber(kTemp) 33 | }) 34 | 35 | // kelvin to fahrenheit and Celcuis 36 | 37 | kelvinInput.addEventListener("input", function(){ 38 | let kTemp = parseFloat(kelvinInput.value) 39 | let cTemp = kTemp - 273.15 40 | let fTemp = (kTemp - 273.15)* (9/5) + 32 41 | 42 | celciusInput.value = roundNumber(cTemp) 43 | fahreheitInput.value = roundNumber(fTemp) 44 | }) 45 | 46 | btn.addEventListener("click", () =>{ 47 | celciusInput.value = "" 48 | fahreheitInput.value = "" 49 | kelvinInput.value = "" 50 | }) 51 | 52 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | min-height: 100vh; 11 | } 12 | 13 | .contanier{ 14 | max-width: 450px; 15 | background-color: #003333; 16 | border-radius: 8px; 17 | box-shadow: 0px 0px 15px 3px rgba(0,0,0,0.4); 18 | font-family: sans-serif; 19 | padding: 20px; 20 | } 21 | 22 | .tittle{ 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | flex-wrap: wrap-reverse; 27 | gap: 10px; 28 | } 29 | .Temperature-icon{ 30 | font-size: 45px; 31 | color: #fff; 32 | } 33 | 34 | h1{ 35 | color: #fff; 36 | letter-spacing: 1.2px; 37 | font-size: 30px; 38 | } 39 | 40 | #celcius , #fahreheit, #Kelvin { 41 | display: flex; 42 | justify-content: center; 43 | align-items: center; 44 | margin-top: 25px; 45 | } 46 | input{ 47 | flex: 5; 48 | height: 60px; 49 | font-size: 20px; 50 | font-weight: 600; 51 | text-align: center; 52 | border: none; 53 | outline: none; 54 | border-radius: 8px 0 0 8px; 55 | padding: 0 10px; 56 | } 57 | 58 | /* for chrome, safari, Egde, Opera */ 59 | input::-webkit-outer-spin-button, 60 | input::-webkit-inner-spin-button{ 61 | -webkit-appearance: none; 62 | } 63 | 64 | /* for mozila firefox */ 65 | input{ 66 | -moz-appearance: textfield; 67 | } 68 | 69 | 70 | .icon{ 71 | flex: 1; 72 | height: 60px; 73 | line-height: 60px; 74 | padding: 0 5px; 75 | text-align: center; 76 | font-size: 30px; 77 | background-color: #4d5967; 78 | color: #fff; 79 | border-radius: 0 8px 8px 0; 80 | } 81 | 82 | 83 | .button{ 84 | margin-top: 25px; 85 | text-align: center; 86 | } 87 | 88 | .button button{ 89 | border: none; 90 | outline: none; 91 | padding: 10px 30px; 92 | font-size: 20px; 93 | font-weight: 600; 94 | border-radius: 3px; 95 | cursor: pointer; 96 | transition: 0.3s; 97 | } 98 | 99 | .button button:hover{ 100 | background-color: #000; 101 | color: #fff; 102 | } 103 | 104 | @media screen and (max-width: 434px) { 105 | .contanier{ 106 | width: 90vw; 107 | } 108 | } --------------------------------------------------------------------------------