├── README.md
├── img
├── bg.gif
├── bg2.gif
└── bg3.gif
├── index.html
├── script.js
└── style.css
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # Hallo kawan" 👋 !!
3 |
4 | - Nama saya Hai, kali ini saya membuat sebuah web konversi suhu.
5 | - Saya menggunakan css, html, javascript dalam pembuatan web konversi ini. Semoga bermanfaat 😁
6 | - website: https://haaiiidaaarrr.github.io/konversisuhu/
7 |
--------------------------------------------------------------------------------
/img/bg.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Haaiiidaaarrr/konversisuhu/5f932f233d07436f878c6079c2f04d4ea5c4ce57/img/bg.gif
--------------------------------------------------------------------------------
/img/bg2.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Haaiiidaaarrr/konversisuhu/5f932f233d07436f878c6079c2f04d4ea5c4ce57/img/bg2.gif
--------------------------------------------------------------------------------
/img/bg3.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Haaiiidaaarrr/konversisuhu/5f932f233d07436f878c6079c2f04d4ea5c4ce57/img/bg3.gif
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | Konversi Suhu
18 |
19 |
20 |
21 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
47 |
48 |
49 |
58 |
62 |
63 |
64 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | const celciusInput = document.getElementById("celcius");
2 | const fahrenheitInput = document.getElementById("fahrenheit");
3 | const kelvinInput = document.getElementById("kelvin");
4 | const reamurInput = document.getElementById("reamur");
5 |
6 | const inputs = document.getElementsByClassName("input");
7 |
8 | for (let i = 0; i < inputs.length; i++) {
9 | let input = inputs[i];
10 |
11 | input.addEventListener("input", function (e) {
12 | let value = parseFloat(e.target.value);
13 | switch (e.target.name) {
14 | case "celcius":
15 | fahrenheitInput.value = value * 1.8 + 32;
16 | kelvinInput.value = value + 273;
17 | reamurInput.value = value * 0.8;
18 | break;
19 | case "fahrenheit":
20 | celciusInput.value = (value - 32) / 1.8;
21 | kelvinInput.value = (value - 32) / 1.8 + 273;
22 | reamurInput.value = ((value - 32) / 1.8) * 0.8;
23 | break;
24 | case "kelvin":
25 | celciusInput.value = value - 273;
26 | fahrenheitInput.value = (value - 273) * 1.8 + 32;
27 | reamurInput.value = (value - 273) * 0.8;
28 | break;
29 | case "reamur":
30 | celciusInput.value = value * 1.25;
31 | fahrenheitInput.value = value * 2.25 + 32;
32 | kelvinInput.value = value * 1.25 + 273;
33 | break;
34 | }
35 | });
36 | }
37 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | * {
2 | margin: 0;
3 | padding: 0;
4 | font-family: "Roboto", sans-serif;
5 | font-size: 20px;
6 | }
7 | body {
8 | background-image: url(img/bg3.gif);
9 | background-size: cover;
10 | background-attachment: fixed;
11 | /*background-color: #b49967;*/
12 | }
13 | header {
14 | display: flex;
15 | justify-content: center;
16 | padding-top: 200px;
17 | text-transform: uppercase;
18 | }
19 | h1 {
20 | margin-bottom: 30px;
21 | font-size: 40px;
22 | letter-spacing: 5px;
23 | color: white;
24 | font-family: "Source Code Pro", monospace;
25 | }
26 | .input {
27 | display: flex;
28 | flex-wrap: wrap;
29 | justify-content: center;
30 | align-items: center;
31 | max-width: 768px;
32 | margin: 0 auto;
33 | max-width: 500px;
34 | font-family: "Source Code Pro", monospace;
35 | border-color: white;
36 | }
37 | .input {
38 | flex: 1 1 40%;
39 | margin: 15px;
40 | appearance: none;
41 | border-radius: 8px;
42 | padding: 15px;
43 | border: 1px;
44 | transition: 0.4s;
45 | max-width: 100%;
46 | color: rgb(31, 25, 85);
47 | border-color: white;
48 | }
49 | ::placeholder {
50 | justify-content: center;
51 | font-size: 18px;
52 | text-transform: uppercase;
53 | letter-spacing: 2px;
54 | color: rgb(31, 25, 85);
55 | font-family: "Source Code Pro", monospace;
56 | }
57 |
58 | footer {
59 | background: none;
60 | }
61 | .link {
62 | text-decoration: none;
63 | }
64 |
--------------------------------------------------------------------------------