Skip to content

Commit e8a8ff2

Browse files
selimbiberselimbiber
committed
Finish project of Temperature Converter
1 parent 8af6dfc commit e8a8ff2

File tree

5 files changed

+187
-0
lines changed

5 files changed

+187
-0
lines changed

‎TemperatureConverter/README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Temperature Converter | Sıcaklık Dönüştürücü
2+
3+
## Project Description | Proje Açıklaması
4+
5+
Kullanıcı tarafından herhangi bir birim ile girilen sıcaklık değerinin diğer sıcaklık birimlerindeki karşılığını otomatik olarak dönüştürüp kullanıcıya gösteren bu uygulamayı [orijinal hali](https://www.100jsprojects.com/project/temperature-converter)ne bağlı kalarak yapmaya çalıştım.
6+
7+
### [Live Preview Link | Canlı Önizleme Bağlantısı](https://htmlpreview.github.io/?https://github.com/selimbiber/PureJavaScriptProjects/blob/main/TemperatureConverter/index.html)

‎TemperatureConverter/index.html

+45
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<link rel="shortcut icon" href="temperature-icon.jpg" type="image/x-icon" />
7+
<link rel="stylesheet" href="styles.css" />
8+
<title>Temperature Converter</title>
9+
</head>
10+
<body>
11+
<main id="container">
12+
<h1 id="heading">Temperature Converter</h1>
13+
<ul id="input-area">
14+
<li>
15+
<label for="celsius-input">Celsius:</label
16+
><input
17+
type="number"
18+
name="celsius-input"
19+
id="celsius-input"
20+
placeholder="Enter Temperature"
21+
/>
22+
</li>
23+
<li>
24+
<label for="fahrenheit-input">Fahrenheit:</label
25+
><input
26+
type="number"
27+
name="fahrenheit-input"
28+
id="fahrenheit-input"
29+
placeholder="Enter Temperature"
30+
/>
31+
</li>
32+
<li>
33+
<label for="kelvin-input">Kelvin:</label
34+
><input
35+
type="number"
36+
name="kelvin-input"
37+
id="kelvin-input"
38+
placeholder="Enter Temperature"
39+
/>
40+
</li>
41+
</ul>
42+
</main>
43+
<script src="./main.js"></script>
44+
</body>
45+
</html>

‎TemperatureConverter/main.js

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const celsiusInput = document.getElementById('celsius-input')
2+
const fahrenheitInput = document.getElementById('fahrenheit-input')
3+
const kelvinInput = document.getElementById('kelvin-input')
4+
5+
celsiusInput.addEventListener('input', (c) => {
6+
const currentValue = Number(c.target.value);
7+
8+
fahrenheitInput.value = (currentValue === '0' ? 32.00 : currentValue * 1.8 + 32).toFixed(2);
9+
kelvinInput.value = (currentValue === '0' ? 273.32 : currentValue + 273.32)
10+
});
11+
12+
fahrenheitInput.addEventListener('input', (f) => {
13+
const currentValue = f.target.value;
14+
15+
celsiusInput.value = ( (currentValue - 32) / 1.8 ).toFixed(2);
16+
kelvinInput.value = ( (currentValue - 32) / 1.8 + 273.32 ).toFixed(2);
17+
});
18+
19+
kelvinInput.addEventListener('input', (k) => {
20+
const currentValue = k.target.value;
21+
22+
celsiusInput.value = (currentValue - 273.32).toFixed(2);
23+
fahrenheitInput.value = ( (currentValue - 273.32) * 1.8 + 32 ).toFixed(2);
24+
});

‎TemperatureConverter/styles.css

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/* RESET */
2+
3+
#root, #__next {
4+
isolation: isolate;
5+
}
6+
7+
html {
8+
box-sizing: border-box;
9+
font-size: 62.5%;
10+
}
11+
12+
*,
13+
*::before,
14+
*::after {
15+
box-sizing: inherit;
16+
margin: 0;
17+
padding: 0;
18+
}
19+
20+
@media (prefers-reduced-motion: reduce) {
21+
*,
22+
*::before,
23+
*::after {
24+
animation-duration: 0.01ms !important;
25+
animation-iteration-count: 1 !important;
26+
transition-duration: 0.01ms !important;
27+
scroll-behavior: auto !important;
28+
}
29+
}
30+
31+
body {
32+
font-size: 1.6rem;
33+
min-height: 100vh;
34+
max-width: 100vw;
35+
scroll-behavior: smooth;
36+
text-rendering: optimizeSpeed;
37+
line-height: 1.5;
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
font-family: Arial, Helvetica, sans-serif;
42+
background-color: rgb(182, 37, 37);
43+
}
44+
45+
ul[class],
46+
ol[class] {
47+
list-style: none;
48+
}
49+
50+
a:not([class]) {
51+
text-decoration-skip-ink: auto;
52+
}
53+
54+
a:focus,
55+
button:focus,
56+
input:focus,
57+
select:focus,
58+
textarea:focus {
59+
box-shadow: none;
60+
outline-offset: .05em;
61+
}
62+
63+
input,
64+
button,
65+
textarea,
66+
select {
67+
font: inherit;
68+
}
69+
/*****/
70+
71+
#container {
72+
background-color: rgba(218, 83, 83, 0.205);
73+
height: auto;
74+
max-width: 50rem;
75+
width: 90%;
76+
padding: 3rem;
77+
border-radius: .5rem;
78+
box-shadow: 0 0 1rem .1rem rgb(82, 46, 46);
79+
display: flex;
80+
flex-direction: column;
81+
row-gap: 2.5rem;
82+
color: rgb(82, 46, 46);
83+
font-weight: bold;
84+
}
85+
86+
#heading {
87+
text-align: center;
88+
}
89+
90+
#input-area {
91+
list-style: none;
92+
display: flex;
93+
flex-direction: column;
94+
row-gap: 2.5rem;
95+
}
96+
97+
#input-area li {
98+
display: flex;
99+
justify-content: space-between;
100+
align-items: center;
101+
font-size: 1.8rem;
102+
}
103+
104+
#input-area li input {
105+
height: 4rem;
106+
max-width: 60%;
107+
padding: 1rem;
108+
border-radius: .5rem;
109+
outline: 0;
110+
border: .23rem solid rgba(175, 71, 71, 0.658);
111+
}

‎TemperatureConverter/temperature-icon.jpg

27 KB
Loading

0 commit comments

Comments
 (0)