Help with my temperature converter page

1

Hey guys, so I’ve been trying to make a Fahrenheit to celsius converter page. But I think I’ve run aground with this one. I think something is wrong with what I did with my JS. But I’m not sure about what I messed up? Any help would be appreciated!

Thanks in advance!

Regards
Ma3_str0

My HTML:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Fahrenheit to Celsius Converter</title>
        <script src="app.js"></script>
        <link href="styles.css" rel="stylesheet">
    </head>
    <body>

        <!--intro and basic description of page-->
        <header>
            <h1 id="title">Fahrenheit to Celsius Converter</h1>

            <h2>Please enter the amount of Fahrenheit you want to convert</h2>
            
        </header>

        <!-- the main attraction of the page-->
        <main>
            <div id="main-attraction">

                <div id="inputs">
                <label for="num-input">Please enter the amount of Fahrenheit here:</label>
                <input type="number" name="num-input">
                </div>

                <div id="output-button"><button onclick="calc()">Click here to convert</button></div>

                <div id="output-display">Result:</div>
            </div>
        </main>

        <!--ending of page-->
        <footer>
            <p id="footer-text">Made by Ma3_str0 in 2020</p>
        </footer>
    </body>
</html>

My CSS:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@900&display=swap');

body{
    background-image: url("https://external-content.duckduckgo.com/iu/?u=https%3A%2F%2Ftse2.mm.bing.net%2Fth%3Fid%3DOIP.FSShteIpNjKrqBJXllt2IAHaEK%26pid%3DApi&f=1");
    background-repeat: no-repeat; 
    background-size: cover;
    font-family: 'Montserrat', sans-serif; 
}

header{
    text-align: center;
    background-color: white;
    padding:10px;
    margin-left: 200px;
    margin-right: 200px;
}

#main-attraction{
    margin-left: 300px;
    margin-right: 300px;
    background-color: white;
    margin-top: 205px;
    text-align: center;
}
button{
    font-size: large;
    font-weight: 200;
}

#output-button{
    padding:6px;
    margin-top:10px;
    margin-bottom:15px;
    text-align: left;
}

#inputs{
    padding:6px;
    margin-top:10px;
    text-align: left;
}
#output-display{
    color:white;
}
footer{
    text-align: center;
    margin-top: 150px;
    background-color: white;
    font-size: x-large;
    padding:10px;
    margin-left: 200px;
    margin-right: 200px;
    text-decoration: wavy;
}

My JS:

let outputDisplay = document.getElementById("output-display");
let inputNum = document.getElementById("num-input");

function calc(num){
    let celsius = (num - 32)/1.8;
    outputDisplay.style.color("black");
    return outputDisplay.innerHTML = celsius;
}

calc(inputNum);
2

Just from a quick glance, I’d venture that the problem is with your onclick. You have the calc function set up to take a number as an argument and convert/return. You don’t pass a number in to the function when you call the function on the button click.

3

So I just remove the num argument from the function then? Or should I remove the “()” from the onclick event in html?

4

I would remove the num argument from the function, then have it get the num-input value from the DOM as part of the function and use that to calculate the conversion.

5

So… something more like this?

function calc(){
    let celsius = (inputNum - 32)/1.8;
    outputDisplay.style.color("black");
    return outputDisplay.innerHTML = celsius;
}

And secondly, when should you use arguments for functions? Just wanna know.

6

That won’t update your inputNum when I change the value of the input box.

7

when you want your function to give different outputs for different inputs

8 
let outputDisplay = document.getElementById("output-display");

function calc(){
    let inputNum = document.getElementById("num-input");
    let celsius = (inputNum - 32)/1.8;
    outputDisplay.style.color("black");
    return outputDisplay.innerHTML = celsius;
}

calc();

Ok, so I’ve kind of readjusted the whole thing. But I still get no output in my HTML?

9

This is progress. Here are a couple more things I see:

This line gets an element by ID. You need to add something that gets the value of that element.

This is not the proper syntax. You can review the W3 article for DOM Style Color to see some examples of the correct syntax.

Going back to your HTML here, your input doesn’t have an id attribute so your function can’t find it.

When I corrected all three of these errors, I was able to get the page to work. :slight_smile:

10

Ok so I made the changes according the links you sent and advice you gave but my page still doesn’t give me output.

Updated JS:

function calc(){
    let inputNum = document.getElementById("num-input").value;
    let celsius = (inputNum - 32)/1.8;
    return celsius;
}

document.getElementById("output-display").style.color = "lightblue";
document.getElementById("output-display").innerHTML = calc();

HTML I’m using:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Fahrenheit to Celsius Converter</title>
        <script src="app.js"></script>
        <link href="styles.css" rel="stylesheet">
    </head>
    <body>

        <!--intro and basic description of page-->
        <header>
            <h1 id="title">Fahrenheit to Celsius Converter</h1>

            <h2>Please enter the amount of Fahrenheit you want to convert</h2>
            
        </header>

        <!-- the main attraction of the page-->
        <main>
            <div id="main-attraction">

                <div id="inputs">
                <label for="num-input">Please enter the amount of Fahrenheit here:</label>
                <input type="number" id="num-input" name="num-input">
                </div>

                <div id="output-button"><button onclick="calc()">Click here to convert</button></div>

                <div id="output-display">Result:</div>
            </div>
        </main>

        <!--ending of page-->
        <footer>
            <p id="footer-text">Made by Ma3_str0 in 2020</p>
        </footer>
    </body>
</html>