Three tick marks (```) will signify the start and stop of a code block. For code that is inline (like this
), you can start and stop with a single tick mark. (this is the character shared with the ~ tilde, not a single quote)
Let's dive into your code. First, taking a look at the Head HTML:
<p><input id="inputFahrenheit" type="number" placeholder="Fahrenheit" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)"></p>
<p><span id="outputCelcius"></span></p>
<script>
var valNum = ();
</script>
The first problem is that you are using <p>
, <input>
, and <span>
elements in the head. But these are display elements that would be in the body. It sounds like your goal is to use Hype elements for all the styling, so you can just delete these since you'll be replacing them with elements.
The second part in your <script>
tag is assigning a variable to ()
, but parenthesis are just used for grouping and there's no assignment, so this isn't valid code. If you look at the developer console when previewing in a browser it will report this is a syntax error. You don't need this to be a global, or even exist.
You did setup a temperatureConverter
in Hype. In my opinion, your life will actually be easier if you make it more like the original code and put it in the head. This way it can be identical to the original. So your head html should look like:
<script>
function temperatureConverter(valNum) {
valNum = parseFloat(valNum);
document.getElementById("outputCelcius").innerHTML=(valNum-32)/1.8;
}
</script>
Now you do need to make the elements.
The good news is that your celcius output doesn't need any changes!
For the input, to keep the code as similar as possible, you will still want the input field to basically use the same <input>
code setup. So to do this, first you copy the input tag and then paste it when you select the element and choose Edit > Edit Element's Inner HTML
(or click the little pencil when editing). Then replace your 00
and paste in this code:
<input id="inputFahrenheit" type="number" placeholder="Fahrenheit" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)">
You'll see a little field. You can go ahead and preview! You'll notice it does convert the temperature, but in many ways it does not look right; specifically:
- The input field doesn't have any of the styling you'd like
- The output field goes a bit nuts
Let's address #1 first.
Input fields tend to want to look like input fields, but luckily they can be styled like any other element. The basic trick is to use the CSS inherit
value that will make its properties the same as its parent element. So to get the styling you want, you can set various CSS properties to this.
Other properties like border can be set to none, and you can use a width/height at 100% to make the size always fit.
Finally you had the starting value of 00, so that can be set using the value
attribute.
It would look something like:
<input id="inputFahrenheit" type="number" placeholder="Fahrenheit" oninput="temperatureConverter(this.value)" onchange="temperatureConverter(this.value)" style="border:none; padding:0; margin:0; color:inherit; background:inherit;font:inherit;width:100%;height100%; text-align:center;" value="00">
You'll still probably need to do some adjustments, since input have additional margins... there might be better ways yet to style it.
For #2, The fundamental problem is that you are going to get fractional or NaN (not a number) values. So this can be fixed in your temperatureConverter code:
<script>
function temperatureConverter(valNum) {
valNum = parseFloat(valNum);
if(isNaN(valNum)) {
valNum = 0;
}
document.getElementById("outputCelcius").innerHTML=Math.round((valNum-32)/1.8);
}
</script>
I'm doing a check for isNaN
first, and then when setting the innerHTML, I am calling Math.round()
on the result to get a whole number.
And with that, you've got it converted over to something that looks a bit better than the original :).