Quiero lograr un efecto similar a este , ¿cómo podría lograr esto en HTML con CSS y 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>También quiero que si pasa de 28 diga MAX en el siguiente clic y si baja de 15 diga MIN.
Además, no sé cómo lograr ese aspecto con css, los botones para aumentar o disminuir la temperatura pueden ser de cualquier tamaño, pero el máximo que puede tener es de 120 px de alto.
Lógicamente el javascript no funciona ya que no se como implementarlo para que funcione :/
¡Gracias por adelantado!
PS si es necesario/si quieres, usa JQuery
Primero, establecer la propiedad .innerHTML de un elemento <input> no tiene ningún efecto. Deberías cambiar el value :
document.getElementById("TempBox").value = ... En segundo lugar, dado que el value es una cadena, el uso del operador + hará que el resultado se concatene, no se sume numéricamente. Primero debe convertir el value en un número, antes de agregarle (o restarle) 1:
Number(document.getElementById("TempBox").value)Alternativamente:
parseInt(document.getElementById("TempBox").value) Entonces su función addTemp() se convertiría en:
function addTemp() { document.getElementById("TempBox").value = Number(document.getElementById("TempBox").value) + 1; }A continuación, le queda la tarea de agregar los controladores de eventos. Sin jQuery, aquí hay una forma:
document.querySelector('button').click = addTemp; document.querySelector('button:nth-of-type(2)').click = remTemp; En cuanto a hacer que diga "MAX" o "MIN" cuando está en los límites, probablemente esa no sea la mejor experiencia de usuario, ya que ¿cómo sabe el usuario qué valor se seleccionó como máximo o mínimo? Además, al colocar una cadena en un campo que debe contener un número, está haciendo que sea más difícil analizarlo y luego convertirlo en el número correspondiente. Sería mejor colocar la advertencia MIN/MAX fuera del campo <input> . Así es como agregaría esa lógica:
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 } }Se agregó la funcionalidad de trabajo básica y el estilo para aumentar y disminuir la temperatura, además puede explorar e intentar agregar más funcionalidad e intentar hacerlo usted mismo.
Aquí está la demostración para su referencia:
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 algunos íconos y funciones impresionantes para aumentar la cantidad de grados.
Tome el valor del div y luego ponga límites de min. 15 y max. 28 límites.
Usé algo de JavaScript básico. Si tiene algún problema dentro de eso, no dude en contactarnos en los comentarios.
También puede funcionar sin
inputy, si desea usarinput, es tan simple como Reemplazar etiquetadivcon etiqueta deinputeinnerHTMLcon valor. Luego cambia el estilo de acuerdo con él.
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>