Change the temperature of the celsius to fahrenheit shown on the thermometer without using any library

Question

I would like to make a Celsius thermometer which, when pressed, will show the corresponding temperature in °F.

I have made a pointer and a thermometer, but I do not know what to do to get the right temperature at the press of a button.

I'm not looking to make use of any external libraries. Here's what I've tried so far:

const temperatureChange = (celsius) => {
  return celsius * (9/5);
};

const getFahrenheit = (celsius) => {
  return temperatureChange(celsius) + 32;
};

console.log( + getFahrenheit(15) + '°F');

html {
  background: #a4b6d3;
}
 
.thermometer {
 width: 25px;
 height: 215px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -107px;
 margin-left: -22px;
 background: #fff;
 border: 10px solid #333;
 border-bottom: 0;
 -webkit-border-top-left-radius: 60px;
-webkit-border-top-right-radius: 60px;
-moz-border-radius-topleft: 60px;
-moz-border-radius-topright: 60px;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
} 
 
.thermometer::before {
  content: " ";
  position: absolute;
  z-index: 0;
  bottom: -56px;
  left: -18px;
  width: 40px;
  border: 10px solid #fff;
  height: 40px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
 
.thermometer::after {
  content: "";
  display: block;  
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: -66px;
  left: -28px;
  background: red;
  border: 10px solid #333;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  z-index: -1;
}
 
.thermometer-value {
font-family: Arial,sans-serif;
 position: absolute;
 display: block;
 margin: 0;
 border: 0;
 width: 8px;
 height: 200px;
 top: 21px;
 left: 8px;
 overflow: hidden;
 text-indent: -30px;
 background: red;
}
.thermometer-cover {
 position: absolute;
 display: block;
 width: 8px;
 height: 200px;
 border: 0;
 left: 0;
 bottom: 0%;
 background: #ccc;
}
 
.pointer { 
  position:absolute; 
  top: 50%;
  left: 50%;
  margin-top: -77px;
  margin-left: -22px;
  width: 45px; 
  height: 200px; 
  background: none;
  border:none; 
}

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="termometr.js">
    
    <title>Termometr</title>
    
</head>
<body>
                        <!-- thermometer -->
    
    <div class="thermometer">
        <div class="pointer">
            
        </div>
    </div>
                        <!-- input -->

    <div class="input">
        <form>
            <input type="text" placeholder="°C" onfocus="this.placeholder=''" onblur="this.placeholder=''">             
            <input type="submit" value="Run">            
        </form>            
    </div>
    
</body>
</html>

Possible duplicate of [How do I get the value of text input field using JavaScript?](https://stackoverflow.com/questions/11563638/how-do-i-get-the-value-of-text-input-field-using-javascript) — Kurt, Nov 10 '17 at 22:52

score 0 · Accepted Answer · answered Nov 11 '17 at 01:48

First of all you will need to add some id to the input field <input id='temperature' this is required to find the right input element and to get the input value.

After that it you will need to attach a function e.g. function run(event){} to the button, it can be done multiple ways, starting from document.getElementById("buttonid").onclick=run(event)... or using <input type="submit" value="Run" onclick="run(event)"> in the snipped i attach the function to form onsubmit event: <form onsubmit="run(event)">, since run is a submit button, when it is clicked, an event to submit the form is being fired. The event is rerouting to the page stated in action property of the form e.g.:<form action=actionpage.php > , however we have not filled in any action page, that means, that when you click on the button, the form will try to open an non existing page. To prevent that it is necessary to prevent default behavior of the submit event by executing event.preventDefault(); in the run function which is assigned to onsubmit event. After that by using getElementById() we find our input element and store its value to an variable e.g. inputcelcius, that value we can pass to your getFahrenheit() function in order to get Fahrenheit temperature.

As you can see in the snippet code I have tweaked your css a little bit and added two lines which are changing the css in order to graphically display the temperature in Fahrenheit on the page in the range between -100 to 100 degrees Celsius

const temperatureChange = (celsius) => {
  return celsius * (9/5);
};

const getFahrenheit = (celsius) => {
  return temperatureChange(celsius) + 32;
};



var run = (e) => {
  e.preventDefault();
   var inputcelcius = document.getElementById('temperature').value;
   var pointer = document.getElementsByClassName('pointer')[0];
   var fahrenheit = getFahrenheit(inputcelcius)
   pointer.innerHTML = fahrenheit+'°F';
   pointer.style.marginTop = inputcelcius * -1+5+ 'px';
   pointer.style.height = inputcelcius*1+100+ 'px';
   console.log(pointer.style);
};


console.log( + getFahrenheit(15) + '°F');

html {
  background: #a4b6d3;
}
 
.thermometer {
 width: 25px;
 height: 215px;
 position: absolute;
 top: 50%;
 left: 50%;
 margin-top: -107px;
 margin-left: -22px;
 background: #fff;
 border: 10px solid #333;
 border-bottom: 0;
 -webkit-border-top-left-radius: 60px;
-webkit-border-top-right-radius: 60px;
-moz-border-radius-topleft: 60px;
-moz-border-radius-topright: 60px;
border-top-left-radius: 60px;
border-top-right-radius: 60px;
} 
 
.thermometer::before {
  content: " ";
  position: absolute;
  z-index: 0;
  bottom: -56px;
  left: -18px;
  width: 40px;
  border: 10px solid #fff;
  height: 40px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}
 
.thermometer::after {
  content: "";
  display: block;  
  width: 60px;
  height: 60px;
  position: absolute;
  bottom: -66px;
  left: -28px;
  background: red;
  border: 10px solid #333;
  -webkit-border-radius: 60px;
  -moz-border-radius: 60px;
  border-radius: 60px;
  z-index: -1;
}
 
.thermometer-value {
font-family: Arial,sans-serif;
 position: absolute;
 display: block;
 margin: 0;
 border: 0;
 width: 8px;
 height: 200px;
 top: 21px;
 left: 8px;
 overflow: hidden;
 text-indent: -30px;
 background: red;
}
.thermometer-cover {
 position: absolute;
 display: block;
 width: 8px;
 height: 200px;
 border: 0;
 left: 0;
 bottom: 0%;
 background: #ccc;
}
 
.pointer { 
  position:absolute; 
  top: 50%;
  left: 50%;
  margin-top: -77px;
  margin-left: -13px;
  width: 25px; 
  height: 0px; 
  background: red;
  border:none; 
  font-size: 10px;
}

    
    <div class="thermometer">
        <div class="pointer">
            
        </div>
    </div>

    <div class="input">
        <form onsubmit="run(event)">
            <input id='temperature' type="text" placeholder="°C" onfocus="this.placeholder=''" onblur="this.placeholder=''">             
            <input type="submit" value="Run" >            
        </form>            
    </div>

Change the temperature of the celsius to fahrenheit shown on the thermometer without using any library

1 Answers1