diff --git a/app.js b/app.js new file mode 100644 index 000000000..c6ad18676 --- /dev/null +++ b/app.js @@ -0,0 +1,45 @@ +let celsiusInput = document.querySelector("#celsius > input"); +let fahrenheitInput = document.querySelector("#fahrenheit > input"); +let kelvinInput = document.querySelector("#kelvin > input"); + +let btn = document.querySelector(".button button"); + +function roundNumber(number) { + return Math.round(number * 100) / 100; +} + +/* Celcius to Fahrenheit and Kelvin */ +celsiusInput.addEventListener("input", function () { + let cTemp = parseFloat(celsiusInput.value); + let fTemp = cTemp * (9 / 5) + 32; + let kTemp = cTemp + 273.15; + + fahrenheitInput.value = roundNumber(fTemp); + kelvinInput.value = roundNumber(kTemp); +}); + +/* Fahrenheit to Celcius and Kelvin */ +fahrenheitInput.addEventListener("input", function () { + let fTemp = parseFloat(fahrenheitInput.value); + let cTemp = (fTemp - 32) * (5 / 9); + let kTemp = (fTemp - 32) * (5 / 9) + 273.15; + + celsiusInput.value = roundNumber(cTemp); + kelvinInput.value = roundNumber(kTemp); +}); + +/* Kelvin to Celcius and Fahrenheit */ +kelvinInput.addEventListener("input", function () { + let kTemp = parseFloat(kelvinInput.value); + let cTemp = kTemp - 273.15; + let fTemp = (kTemp - 273.15) * (9 / 5) + 32; + + celsiusInput.value = roundNumber(cTemp); + fahrenheitInput.value = roundNumber(fTemp); +}); + +btn.addEventListener("click", () => { + celsiusInput.value = ""; + fahrenheitInput.value = ""; + kelvinInput.value = ""; +}); diff --git a/index.html b/index.html index 4ad4ffff6..ce6a0125f 100644 --- a/index.html +++ b/index.html @@ -1,12 +1,43 @@ - - - - Static Template + + + + + Temperature Converter + + -

This is a static template, there is no bundler or bundling involved!

+ +
+ +
+

Temperature Converter

+ + + +
+ +
+ + ℃ +
+
+ + ℉ +
+
+ + K +
+ +
+ +
+ +
+ - \ No newline at end of file + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 000000000..7b0a706c0 --- /dev/null +++ b/style.css @@ -0,0 +1,104 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + display: flex; + justify-content: center; + align-items: center; + min-height: 100vh; +} + +.container { + max-width: 450px; + background: #003333; + border-radius: 8px; + box-shadow: 0px 0px 15px 3px rgba(0, 0, 0, 0.4); + font-family: sans-serif; + padding: 20px; +} + +.title { + display: flex; + justify-content: center; + align-items: center; + flex-wrap: wrap-reverse; + gap: 10px; +} + +.Temperature-icon { + font-size: 45px; + color: #fff; +} + +h1 { + color: #fff; + letter-spacing: 1.4px; +} + +#celsius, +#fahrenheit, +#kelvin { + display: flex; + justify-content: center; + align-items: center; + margin-top: 25px; +} + +input { + flex: 5; + height: 60px; + font-size: 20px; + font-weight: 600; + text-align: center; + border: none; + outline: none; + border-radius: 8px 0 0 8px; + padding: 0 10px; +} + +/* for chrome, safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; +} + +/* for Mozila firefox */ +input { + -moz-appearance: textfield; +} + +.icon { + flex: 1; + height: 60px; + line-height: 60px; + padding: 0 5px; + text-align: center; + font-size: 30px; + background: #4d5964; + color: #fff; + border-radius: 0 8px 8px 0; +} + +.button { + margin-top: 25px; + text-align: center; +} + +.button button { + border: none; + outline: none; + padding: 10px 30px; + font-size: 20px; + font-weight: 600; + border-radius: 3px; + cursor: pointer; + transition: 0.3s; +} + +.button button:hover { + background: #000; + color: #fff; +}