├── index.html
├── main.css
└── main.js
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Converter
7 |
8 |
9 |
10 |
11 |
14 |
19 |
20 |
21 |
22 |
--------------------------------------------------------------------------------
/main.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | font-family: sans-serif;
5 | }
6 |
7 | main {
8 | width: 100%;
9 | height: 100vh;
10 | background-image: linear-gradient(to bottom, #FFCE00, #F7A800);
11 | }
12 |
13 | header {
14 | display: flex;
15 | justify-content: center;
16 | padding-top: 200px;
17 | }
18 |
19 | h1 {
20 | margin-bottom: 30px;
21 | }
22 |
23 | .inputs {
24 | display: flex;
25 | flex-wrap: wrap;
26 | justify-content: center;
27 | align-items: center;
28 | max-width: 768px;
29 | margin: 0 auto;
30 | }
31 |
32 | .input {
33 | flex: 1 1 40%;
34 | margin: 15px;
35 | appearance: none;
36 | background: none;
37 | background-color: #FFF;
38 | border-radius: 8px;
39 | padding: 15px;
40 | border: none;
41 | outline: none;
42 | transition: 0.4s;
43 | }
44 |
45 | .input:focus {
46 | box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.2);
47 | }
--------------------------------------------------------------------------------
/main.js:
--------------------------------------------------------------------------------
1 | const celciusInput = document.getElementById("celcius");
2 | const fahrenheitInput = document.getElementById("fahrenheit");
3 | const kelvinInput = document.getElementById("kelvin");
4 |
5 | const inputs = document.getElementsByClassName("input");
6 |
7 | for (let i = 0; i < inputs.length; i++) {
8 | let input = inputs[i];
9 |
10 | input.addEventListener("input", function (e) {
11 | let value = parseFloat(e.target.value);
12 |
13 | switch (e.target.name) {
14 | case "celcius":
15 | fahrenheitInput.value = (value * 1.8) + 32;
16 | kelvinInput.value = value + 273.15;
17 | break;
18 | case "fahrenheit":
19 | celciusInput.value = (value - 32) / 1.8;
20 | kelvinInput.value = ((value - 32) / 1.8) + 273.15;
21 | break;
22 | case "kelvin":
23 | celciusInput.value = value - 273.15;
24 | fahrenheitInput.value = ((value - 273.15) * 1.8) + 32;
25 | break;
26 | }
27 | });
28 | }
--------------------------------------------------------------------------------