search

thapatechnical / JavaScriptCourseByThapaTechnical

175 stars 194 forks source link

Temperature convert in Html css and javascript #5

Open 0rahul opened 3 years ago

0rahul commented 3 years ago

in your tutorial it seems it works but in reality it didnt work why sir i am so desperate with this project and stopped here. its about conversion for temperature .

a-shahzad commented 2 years ago

in your tutorial it seems it works but in reality it didnt work why sir i am so desperate with this project and stopped here. its about conversion for temperature .

HTML <!DOCTYPE html>

temp conv



CSS @import url(https://fonts.googleapis.com/css2?family=Mulish:wght@300&display=swap);

body { width: 100vw; height: 100vh; background-color: #f8e7af; display: grid; place-items: center; }

form { background-color: #fab1a0; padding: 80px; width: 50%; margin: 100px auto; text-align: center; -webkit-box-shadow: 0 10px 6px -6px #777; -moz-box-shadow: 0 10px 6px -6px #777; box-shadow: 0 10px 6px -6px #777; }

tempcalc label {

font-size: 30px;

}

temp {

border: none;
padding: 10px;
height: 40px;
width: 100px;
font-size: 20px;
margin-top: 20px;

}

temp_diff {

height: 40px;
border: none;
margin-top: 20px;
font-size: 15px;
vertical-align: top;

}

[type="submit"] { height: 35px; margin: 20px; width: 100px; font-size: 15px; border: none; background-color: black; color: white; }

resultContainer {

font-size: 35px;

}

JavaScript const calculateTemp = () => { const numberTemp = document.getElementById('temp').value;

const tempSelected = document.getElementById('temp_diff');

const valueTemp = tempSelected.options[tempSelected.selectedIndex].value;

const celToFah = (cel) => {
    let fahrenheit = Math.round(cel * 9/5 + 32);
    return fahrenheit;
}

const fahToCel = (fah) => {
    let celcius = Math.round((fah - 32) * 5/9);
    return celcius;
}

let result;

if(valueTemp == 'cel') {
    result = celToFah(numberTemp);
    document.getElementById('resultContainer').innerHTML = `= ${result}°Fahrenheit`;
}
    else {
        result = fahToCel(numberTemp);
    document.getElementById('resultContainer').innerHTML = `= ${result}°Celcius`;
    }

}