JavaScript TEMPERATURE CONVERSION PROGRAM 🌡️

#JavaScript #project #programming
00:00:00 HTML
00:04:20 CSS
00:10:43 JavaScript
// TEMPERATURE CONVERSION PROGRAM
const textBox = document.getElementById("textBox");
const toFahrenheit = document.getElementById("toFahrenheit");
const toCelsius = document.getElementById("toCelsius");
const result = document.getElementById("result");
let temp;
function convert(){
if(toFahrenheit.checked){
temp = Number(textBox.value);
temp = temp * 9 / 5 + 32;
result.textContent = temp.toFixed(1) + "°F";
}
else if(toCelsius.checked){
temp = Number(textBox.value);
temp = (temp - 32) * (5/9);
result.textContent = temp.toFixed(1) + "°C";
}
else{
result.textContent = "Select a unit";
}
}

[@BroCodez]

// TEMPERATURE CONVERSION PROGRAM const textBox = document.getElementById("textBox"); const toFahrenheit = document.getElementById("toFahrenheit"); const toCelsius = document.getElementById("toCelsius"); const result = document.getElementById("result"); let temp; function convert(){ if(toFahrenheit.checked){ temp = Number(textBox.value); temp = temp * 9 / 5 + 32; result.textContent = temp.toFixed(1) + "°F"; } else if(toCelsius.checked){ temp = Number(textBox.value); temp = (temp - 32) * (5/9); result.textContent = temp.toFixed(1) + "°C"; } else{ result.textContent = "Select a unit"; } } My website Temperature conversion: Celsius ➡ Fahrenheit Fahrenheit ➡ Celsius submit body{ font-family: Arial, sans-serif; background-color: hsl(0, 0%, 95%); } h1{ color: hsl(223, 100%, 64%); } form{ background-color: hsl(0, 0%, 100%); text-align: center; max-width: 350px; margin: auto; padding: 25px; border-radius: 10px; box-shadow: 5px 5px 15px hsla(0, 0%, 0%, 0.3); } #textBox{ width: 50%; text-align: center; font-size: 2em; border: 2px solid hsla(0, 0%, 0%, 0.8); border-radius: 4px; margin-bottom: 15px; } label{ font-size: 1.5em; font-weight: bold; } button{ margin-top: 15px; background-color: hsl(0, 100%, 60%); color: white; font-size: 1.5em; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; } button:hover{ background-color: hsl(0, 100%, 50%); } #result{ font-size: 1.75em; font-weight: bold; }

[@drufloud5148]

Hi guys! If this code also does not work for you and you are sure that you did everything as in this video, then simply change the tag to save and check the code again, this method worked for me. I hope I helped you!

[@jelapanoo]

bro code i just wanna thank you for helping me learn how to code. you're a huge W man, best of luck to u

[@Donimaps420]

Ur da best🎉

[@hunin27]

Nice styling!

[@opiirix3302]

I tried the code out and it’s awesome 👍

[@mksk20]

You are great Bro

[@rajac6640]

New to this channel sir but your explanation i m founding very helpful just at class 10th but want to do ccommerce and python both . LOVE FROM INDIA❤

[@FUN_X_GAME]

Bro i am 14 and i have learnt ur python course and doing this this is soo good and clear even a 12 year old can do it with your explanation Love from Pakistan

[@Lightning_boy5236]

I am 12..

[@sportsknowledge92]

Grate

[@xpp_0]

What code do you reccommend to start with?

[@mr.kachoo8784]

The numbers u used in temp is math function for temperature ? Right

[@Tanjiro__Kamado]

My bro can u make pandas vidoes or ai with python vidoes pls,tysm for ur effort

[@ItzChaos220]

how tf r u 1 month agon brocode

[@user-mk2md9pu5m]

Hi bro can you make django course or not?

[@onlyformonthlytest9739]

Actually submit button is in the form element. when I hit submit button it shows the result and quickly disappeared. I came to know that it's because of default refresh of page when form got submitted. how could I prevent this from quick refresh.

[@GHosT_deployyy]

use this: event.preventDefault(); in the function and this in the submit button: Submit

[@FreeThinker_]

Its because the form gets submitted fast. Just change the form element to some div class=" " element and it works fine

[@shivasai3643]

w bro code

[@louniis]

Best fk ing teacher in whole world ❤

[@ko_GaZEr]

Tried the same thing, but code is not working😢

[@spartondon3591]

Bruh same situation...! Did you got the solution

[@futuredoctor7148]

Check the errors

[@escalanteteam7498]

@@spartondon3591 did you figure out why it didnt work?

[@GHosT_deployyy]

@@escalanteteam7498 it happens because of the page refresh, use this: event.preventDefault(); in the function, and this in the html Submit

[@raphaelsousa2046]

works fine for me, check the console to see if you type some variable wrong

[@4reyalstseaB]

@Bro CodeWhre can i DM you personally i @ need some help with vs code and and Javascript