Question

0

749

Views

How to make a temperature selector in html with css and javascript?

I want to achieve a similar effect to this how could I achieve this in HTML with CSS and javascript?

<button onclick="addTemp()">ᐱ</button>
<input id="TempBox" value="15" type="text">
<button onclick="remTemp()">ᐯ</button>

<script>
function addTemp() {
    document.getElementById("TempBox").innerHTML = document.getElementById("TempBox").value + 1;
}
function remTemp() {
    document.getElementById("TempBox").innerHTML = document.getElementById("TempBox").value - 1;
}
</script>

I also want to make it so that if it surpasses 28 to say MAX on the next click and if it goes below 15 to make it say MIN.

Also I don't know how to achieve that look with css, the buttons to set the temperature higher or lower can be any size, but the maximum the entire thing can be is 120px high.

Logically the javascript doesn't work as I don't know how to implement it to work :/

Thanks in advance!

P.S if needed/if you want to, use JQuery

about 4 years ago · Juan Pablo Isaza

3 answers

Answer question

0

First, setting the .innerHTML property of an <input> element has no effect. You should be changing the value:

document.getElementById("TempBox").value = ...

Second, since the value is a string, using the + operator will cause the result to be concatenated, not added numerically. You must first turn the value into a number, before adding (or subtracting) 1 to it:

Number(document.getElementById("TempBox").value)

Alternately:

parseInt(document.getElementById("TempBox").value)

So your addTemp() function would become:

function addTemp() {
    document.getElementById("TempBox").value = Number(document.getElementById("TempBox").value) + 1;
}

You are then left with the task of adding the event handlers. Without jQuery, here is one way:

document.querySelector('button').click = addTemp;
document.querySelector('button:nth-of-type(2)').click = remTemp;

As for making it say "MAX" or "MIN" when you are at the limits, that's probably not the best UX since how does the user know what value was selected as the max or min? Also, by putting a string in a field that should hold a number, you are making it more difficult to parse and then turn into the corresponding number. It would be better to put the MIN/MAX warning outside the <input> field. Here is how I would add that logic:

function addTemp() {
    document.getElementById("TempBox").value = Math.Min(28, Number(document.getElementById("TempBox").value) + 1);
    if (document.getElementById("TempBox").value >= 28) {
        // Alert the user that they are at the max
    }
}

about 4 years ago · Juan Pablo Isaza Report

0

Use some font-awesome icons and functions to increase decrease number of degrees.

Take value from the div and then put limits of min. 15 and max. 28 limits .

Used some basic JavaScript . If you face any problem within that feel free to contact in comments .

It can work without input too and if you wanted to use input than it is just simple as Replace div tag with input tag and innerHTML with value . Then restyle according to it.

document.querySelector(".decTempUnits").addEventListener("click", decreaseUnits);

function decreaseUnits() {
  var units = document.getElementsByClassName("temp")[0].innerHTML
  if (units > 15) {
    units--;
    document.getElementsByClassName("temp")[0].innerHTML = units;
    document.querySelector(".demo").innerHTML = "";
  } else if (units == 15) {
    document.querySelector(".demo").innerHTML = "Minimum limit reached";
  }
}

document.querySelector(".incTempUnits").addEventListener("click", increaseUnits);

function increaseUnits() {
  var units = document.getElementsByClassName("temp")[0].innerHTML
  if (units < 28) {
    units++;
    document.getElementsByClassName("temp")[0].innerHTML = units;
    document.querySelector(".demo").innerHTML = "";
  } else if (units == 28) {
    document.querySelector(".demo").innerHTML = "Maximum limit reached";
  }
}

.contaitner {
  user-select: none;
  width: 120px;
  height: 120px;
  background-color: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}

.tempContaitner {
  font-size: 55px;
  position: relative;
}

.degree {
  position: absolute;
}

.units {
  font-size: 24px;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="contaitner">
  <span class="incTempUnits units"><i class="fa fa-chevron-up"></i></span>
  <div class="tempContaitner"><span class="temp">20</span><span class="degree">°</span></div>
  <span class="decTempUnits units"><i class="fa fa-chevron-down"></i></span>
</div>
<div class="demo"></div>

about 4 years ago · Juan Pablo Isaza Report

Answer question

Find remote jobs

Accepted Answer · 2022-07-10T21:39:16.925Z

Added the basic working functionality & styling to increase & decrease the temperature, further you can explore & try to add more functionality and try to make it yourself,

Here is the Demo for your ref:

const maxTemp=28,
minTemp =15;

let tempBox = document.getElementById("TempBox");
let tempValue=  Number(tempBox.value);

function addTemp() {  
  if(maxTemp > tempValue){
    tempValue += 1;
    tempBox.value = tempValue;
  }
}

function remTemp() {
  if(minTemp < tempValue){
    tempValue -= 1;
    tempBox.value = tempValue;
   }
   
}

.temp-selector{
  height:120px;
  width:80px;
  background-color:#000;
  position:relative;
}
button {
width:100%;
height:30px;
background-color:#000;
border:none;
color:#fff;
font-size:20px;
cursor:pointer;
}

input{
width:100%;
height:60px;
background-color:#000;
border:none;
color:#fff;
font-size:44px;
padding:0;
text-align:center;
}
.degree{
color:#fff;
position:absolute;
top:30px;
right:10px;
font-size:24px;
}

<div class="temp-selector">
<button onclick="addTemp()">ᐱ</button>
<input id="TempBox" value="20" type="text">
<span class="degree">°</span>
<button onclick="remTemp()">ᐯ</button>
</div>

0

749

How to make a temperature selector in html with css and javascript?

3 answers

0

0

0

Find remote jobs

Andres GPT