Temperature Converter Using App.vue

JavaScript
1

Hi there, I am quite new here and could use some help with my code. I am trying to create a simple temperature converter that changes from Celsius to Fahrenheit using app.vue. Below is my code, the template show on my local host 5173 but the JavaScript function isn’t working. I have tried different formats, still it doesn’t work. Any knowledge on this will be helpful and appreciated.

<script setup>
import { ref } from 'vue';
// This is a simple temperature converter app that converts Celsius to Fahrenheit
// It uses a simple formula to convert the temperature and displays the result
  function temperatureConverter(valNum) {
    valNum = parseFloat(valNum);
    document.getElementById("outputFahrenheit").innerHTML=(valNum * 9/5) + 32;
  }
  if (isNaN(temperatureConverter)) {
    console.log('Invalid input: Please enter a valid number');
  }
  if (temperatureConverter < -273.15) {
    console.error('Invalid input: Temperature cannot be below absolute zero');
  }
  if (temperatureConverter > 1000) {
    console.error('Invalid input: Temperature is too high');
  }
</script>

<template>
   <h1>Welcome to temperature converter app</h1>
   <br>
<div class="celsius">
  <label for="celsius"> Degree in celsius </label>
  <input id="inputCelsius" type="number" placeholder=""
  htmlInputElemet.oninput="temperatureConverter(this.value)"
  htmlInputElement.onchange="temperatureConverter(this.value)" />
</div>
<br>
<div class="fahrenheit">
  <label for="fahrenheit"> is </label>
  <input id="outputFahrenheit" type="number" placeholder="" />
  <span id="outputfahrenheit"> fahrenheit </span>
</div>
</template>

<style scoped>

</style>