├── README.md
├── .gitattributes
├── favicon.png
├── READMI.md
├── style.css
├── LICENSE
├── index.html
└── script.js
/README.md:
--------------------------------------------------------------------------------
1 | # converso_temperatura
2 | conversor de temperatura
3 |
--------------------------------------------------------------------------------
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/betoblid/converso_temperatura/HEAD/favicon.png
--------------------------------------------------------------------------------
/READMI.md:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | site focado em converção de temperaturas em tempo real esta em desenvolvimento e futuros updates estão por vim...
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | body{
2 | background: rgb(9, 9, 31);
3 | color: white;
4 | box-sizing: border-box;
5 | text-align: center;
6 | }
7 | /*estilizando o topo da pagina*/
8 | header h1{
9 | font: bold 28px Arial;
10 | }
11 | header p{
12 | font: 200 18px Arial;
13 | }
14 | .container{
15 | display: flex;
16 | align-items: center;
17 | justify-content: center;
18 | flex-direction: column;
19 | gap: 20px;
20 | margin: 60px auto;
21 | }
22 | .card{
23 | border: 1px solid white;
24 | border-radius: 20px;
25 | width: 300px;
26 | padding: 10px;
27 | }
28 | .card p input[type="range"],
29 | .card p input[type="number"]{
30 | margin: 0 10px;
31 | font: bold 18px Arial;
32 | text-align: center;
33 | color: black;
34 | }
35 | .card p{
36 | font: bold 16px Arial;
37 | }
38 |
39 | footer p{
40 | font: bold 18px Arial;
41 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 dev-herbert
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 | Converso de Temperatura
10 |
11 |
12 |
13 |
14 |
15 |
16 |
Conversor de Temperaturas
17 |
Use o slider da escalar de graus Celsius para converte automaticamente.
18 |
19 |
20 |
21 |
22 |
23 |
24 |
Celsius *C
25 |
-50.00100.00
26 |
27 |
28 |
29 |
Fahrenheit
30 |
31 | *F
32 |
33 |
-58.00212.00
34 |
35 |
36 |
37 |
Kelvin K
38 |
39 |
223.14 373.15
40 |
41 |
42 |
43 |
44 |
47 |
48 |
49 |
50 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | //pegando todos os input do tipo Number do DOM.
2 |
3 | let cxcelsius = document.getElementById('cxcelsius');
4 | let cxfahrenheit = document.getElementById('cxfahrenheit');
5 | let cxkelvin = document.getElementById('cxkelvin');
6 |
7 | //pegando todos os input do tipo Ranger do DOM.
8 |
9 | let RAcelsius = document.getElementById('celsiusrange');
10 | let RAfahrenheit = document.getElementById('rangefahren');
11 | let RAkelvin = document.getElementById('rangekelvin');
12 |
13 |
14 | //os valores que está em ranger sera passado para o number
15 |
16 | cxcelsius.value = RAcelsius.value;
17 | cxfahrenheit.value = RAfahrenheit.value;
18 | cxkelvin.value = RAkelvin.value;
19 |
20 | /*Dentro de uma function que funcionarar como changer ou seja uma alto checagem sem precisar de aperta botão..
21 |
22 | O objetivo desse porjeto é controlar a temperatura pelo ranger o numero que o ranger passar sera feito a converção de temperatura de Fahrenheit e Kelvin os valores será passado para os inputs do type number para que o usuario possa visualizar o valor.. valores passado pelo value do input number.*/
23 |
24 |
25 |
26 | //calculando a temperatura de fahrenheit.
27 |
28 | function calculoF(){
29 | let celsius_fahrenheit = (parseFloat(RAcelsius.value) * 9/5) + 32;
30 | cxfahrenheit.value = celsius_fahrenheit.toFixed(2);
31 |
32 | //adicionando o valor calculado tambem no Ranger.
33 | RAfahrenheit.value = celsius_fahrenheit;
34 |
35 | }
36 |
37 | //calculando a temperatura de Kelvin
38 |
39 | function calculoK(){
40 | let celsius_Kelvin = parseFloat(RAcelsius.value) + 273.15;
41 | cxkelvin.value = celsius_Kelvin;
42 |
43 | //adicionando valor calculado no ranger.
44 | RAkelvin.value = celsius_Kelvin;
45 | }
46 |
47 | //function para atualizar o number do celsius.
48 |
49 | function atualizarC(){
50 | cxcelsius.value = RAcelsius.value;
51 | }
52 |
53 | //atualizando o ranger ao mesmo tempo o number tambem se atualizará.
54 |
55 | function atualizarF(){
56 | cxfahrenheit.value = RAfahrenheit.value;
57 | }
58 |
59 | function atualizarK(){
60 | cxkelvin.value = RAkelvin.value;
61 | }
62 |
63 | //todos os eventos estão escutando por event do javascript.
64 |
65 | RAcelsius.addEventListener('change', calculoF)
66 | RAcelsius.addEventListener('change', calculoK)
67 | RAcelsius.addEventListener('change', atualizarC)
68 |
69 | //atualizando os inputs.
70 | RAkelvin.addEventListener('change', atualizarK);
71 | RAfahrenheit.addEventListener('change', atualizarF)
72 |
--------------------------------------------------------------------------------