Could I really make this work?

#1

I know this is silly, but as a little joke based on a conversation with family, I made this:

var hungerLevel;
var breakTime;

function shouldIEat(hungerLevel, breakTime) {
    if (hungerLevel > 5 || breakTime > 90) {
    alert("Eat!");
} else {
    alert("Do not eat.");
}
}

If I were to actually create a web page with inputs for Hunger Level and Length of break, how would I attach the function to the inputs? Is this something I can figure out before finishing the Basic Javascript challenges? And could I do this on Codepen? Or do I need to use some sort of hosting so that the data actually gets collected?

#2

I would start looking into events to trigger the function call. https://www.w3schools.com/tags/ref_eventattributes.asp

And element references https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById to get the values from your form inputs.

So yes, you could absolutely create a UI web page for this.

1 Like
#3

Yes, you can, but it’s a bit of a long stretch probably. Essentially you could:

  1. Write an <input type="text"/> for each value
  2. Execute the function when the person fills both, something like this
<input type="text" id="inputA" required/>
<input type="text" id="inputB" required/>
<button onclick="shouldIEat()">Go</button>
<script>
//Your function here
</script>

But that won’t work yet. You still need to gather the input values, which is something like this: let inputA = document.getElementById("inputA").value
and same for the other element.

If this looks to complicated, try to create a function that writes some innerHTML, it could be just a word. You can find examples almost anywhere.
This is a nice exercise, it’s easier, and goes along better with the course I believe.

Made a quick codepen for you to play.

1 Like
#4

It’s a fine little project to start learning about Web APIs and some DOM manipulation.

Here are some links.



#5

Thanks for all the guidance and links. I’ll give it a go. It’s certainly not super useful, but it will teach me how JavaScript really works in websites.

#6

It looks like this works! Should I Eat?

Thanks again, all.