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
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
}
}
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>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
inputtoo and if you wanted to useinputthan it is just simple as Replacedivtag withinputtag andinnerHTMLwith 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>