Basic Widget using Javascript within Hype

I hope this is not too basic of a question but I am still learning. I would like to take this basic temperature converter javasript and recreate it in Hype so that I can fancy it up with some nice text and animation. The code looks like this below. I have also attached my failed attempt at recreating it in Hype. I think my coding is wrong but I am too new at this to figure out what I am doing wrong.

Also how do I embed html text in my message so that it is viewable without making it an image?


testtemp.hype.zip (36.1 KB)

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:

  1. The input field doesn't have any of the styling you'd like
  2. 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 :).

1 Like

Whoa! Thanks for going through all that Jonathan. I will give it a try tomorrow!
All the best!

Thank you so much for walking through this with me Jonathan. I have a working model now and I think it looks great! I need to keep practicing my code as I see there is so much than can be done in Hype with it. Here is the new working version if you wanted to see. Best, Tammy
testtemp.hype.zip (38.3 KB)

1 Like

Looks great - glad you were able to get this all hooked up!