We Keep Coding

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

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
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

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>

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
}
}

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>

Using template strings to append HTML

New to es6, is there a way to append HTML using template literals `` in the DOM without overwriting what was currently posted?
I have a huge block of HTML that I need to post for a list that is being created. Where a user is able to post their input.
Every-time the task is submitted it overwrites the current submission. I need it to append underneath.
fiddle for demonstration purpose.
https://jsfiddle.net/uw1o5hyr/5/
<div class = main-content>
<form class ='new-items-create'>
<label>Name:</label><input placeholder=" A Name" id="name">
<button class = "subBtn">Submit</button>
</form>
</div>
<span class="new-name"></span>
JavaScript
form.addEventListener('submit',addItem);
function addItem(event){
event.preventDefault();
let htmlStuff =
`
<div class="main">
<div class="a name">
<span>${name.value}</span>
</div>
<div>
`
itemCreated.innerHTML = htmlStuff;
}

insertAdjacentHTML() adds htmlString in 4 positions see demo. Unlike .innerHTML it never rerenders and destroys the original HTML and references. The only thing .innerHTML does that insertAdjacentHTML() can't is to read HTML. Note: assignment by .innerHTML always destroys everything even when using += operator. See this post
const sec = document.querySelector('section');
sec.insertAdjacentHTML('beforebegin', `<div class='front-element'>Front of Element</div>`)
sec.insertAdjacentHTML('afterbegin', `<div class='before-content'>Before Content</div>`)
sec.insertAdjacentHTML('beforeend', `<div class='after-content'>After Content</div>`)
sec.insertAdjacentHTML('afterend', `<div class='behind-element'>Behind Element</div>`)
* {
outline: 1px solid #000;
}
section {
margin: 20px;
font-size: 1.5rem;
text-align: center;
}
div {
outline-width: 3px;
outline-style: dashed;
height: 50px;
font-size: 1rem;
text-align: center;
}
.front-element {
outline-color: gold;
}
.before-content {
outline-color: blue;
}
.after-content {
outline-color: green;
}
.behind-element {
outline-color: red;
}
<section>CONTENT OF SECTION</section>

You can just use += to append:
document.getElementById('div').innerHTML += 'World';
<div id="div">
Hello
</div>

Element.prototype.appendTemplate = function (html) {
this.insertAdjacentHTML('beforeend', html);
return this.lastChild;
};
If you create the element prototype as per above, you can get the element back as reference so you can continue modifying it:
for (var sectionData of data) {
var section = target.appendTemplate(`<div><h2>${sectionData.hdr}</h2></div>`);
for (var query of sectionData.qs) {
section.appendTemplate(`<div>${query.q}</div>`);
}
}
Depending on how much you're doing, maybe you'd be better off with a templating engine, but this could get you pretty far without the weight.

HTML JS form to div comments (temporary change)

I have seen many similar problems but when I try them they end up failing. It has gotten to the point where my code is totally messed up and I need some help both cleaning it up and fixing my issue. (using chrome)
So far I have tried selecting the value of the form and putting that into a div,
I have tried to use the button as just a link to start the script so that the page doesn't reset and also many other answers found on-line, none of them are helping so I am asking for a personalised help.
function on_comment_add() {
var main = document.getElementById("div1");
var add_user_name = document.createElement("div");
var add_user_comment = document.createElement("div");
add_user_name.setAttribute("id", "add_user_name");
add_user_comment.setAttribute("id", "add_user_comment");
<!-- var node = document.createTextNode("This is new."); -->
var node_1 = document.getElementById("user_name").value;
var node_2 = document.getElementById("user_comment").value;
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
var element = document.createElement("div");
element.setAttribute("id", "display_comment_div");
element.appendChild(add_user_name);
element.appendChild(add_user_comment);
main.appendChild(element);
main.innerHTML = element;
return false;
}
body {
background-color: lightGreen;
}
div.middle {
width: 80%;
margin-left: 10%;
background-color: #47e077;
height: 940px;
font-size: 10pt;
font-family: aubrey;
border: 3px solid gold;
}
.comments-form {
text-align: center;
}
#display_comment_div {
background: rgba(200, 54, 54, 0.1);
width: 80%;
margin-left: 9%;
border: 0.1px solid lightGreen;
border-radius: 25px;
}
#add_user_name {
width: 45%;
float: left;
}
#add_user_comment {
width: 45%;
display: inline-block;
float: right;
}
<div class="middle">
<div class="comments-form">
<form>
<label for="name" style="width:100px; display:inline-block;">Name</label>
<input id="user_name" type="text" placeholder="name goes here" style="width:300px; margin-left:5px;" />
<br><br>
<label for="comment" style="width:100px; display:inline-block;">Comment</label>
<textarea id="user_comment" placeholder="comment goes here" maxlength="150" style="width:300px;max-width:300px;"></textarea><br>
<button style="margin-left:310px;" onmousedown="return on_comment_add">Submit</button>
</form>
<div id="div1">
</div>
</div>
</div>
I guess what I am asking is if anyone can help me display the username and comment below the form but it seems tricky for me because I have gone through so many answers that don't work for me that I cannot think of any other ways to do it.
For clarification this code is not meant to keep the comments from the form nor is it meant to be a fully functioning site. I am just making slight modifications to some code so that I can hand it in as a college assignment.

Using onclick and pass the event inside:
<button style="margin-left:310px;" onclick="on_comment_add(event)">Submit</button>
And disable the default form submit action:
function on_comment_add(e) {
e.preventDefault()
var main = document.getElementById("div1");
var add_user_name = document.createElement("div");
var add_user_comment = document.createElement("div");
add_user_name.setAttribute("id", "add_user_name");
add_user_comment.setAttribute("id", "add_user_comment");
var node_1 = document.createElement("div");
node_1.innerHTML= document.getElementById("user_name").value;
var node_2 = document.createElement("div");
node_2.innerHTML = document.getElementById("user_comment").value;
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
var element = document.createElement("div");
element.setAttribute("id", "display_comment_div");
element.appendChild(add_user_name);
element.appendChild(add_user_comment);
main.appendChild(element);
return false;
}
Workable example: https://jsfiddle.net/kingychiu/z6gnqswn/

Change type to "button" to prevent automatical form sending and add parentheses to onmousedown expression:
<button type="button" style="margin-left:310px;" onmousedown="return on_comment_add()">Submit</button>
Then change this
add_user_name.appendChild(node_1);
add_user_comment.appendChild(node_2);
to this (since node_1, node_2 are values, not elements):
add_user_name.innerHTML = node_1;
add_user_comment.innerHTML = node_2;
And remove that line
main.innerHTML = element;
above
return false;
That should work.

Scrolling Inside Div Not Working?

I have a modal which I am using for alphabetical searching. Along the top, there is a horizontal bar with A-Z buttons. I want each of these buttons to scroll the div (with overflow:auto) to the appropriate letter.
Eg if the user clicks "G", it will scroll the div down to the G results.
I would like to set these onclicks with js or jquery. Here's what I have so far:
$('.search__strip__letter').each(function () {
var number = $(this).data('letter');
$(this).click(function () {
var target = '#search__results__letter--'+number;
$('.search-results').animate({scrollTop:$(target).position().top}, 200);
})
})
Why isn't this working...?
EDIT: Here's a fiddle.

Added clearfix class on floated elements, updated jquery selector spelling Fixed here.
$('.search__strip__letter').each(function () {
var number = $(this).data('letter');
$(this).click(function () {
console.log('click');
var target = '#search__results__letter--' + number;
console.log(target,$('.search-results'));
$('.search-results').animate({
scrollTop: $(target).offset().top + 100
}, 200);
})
})
http://jsfiddle.net/Aerious/z17nyh2s/8/

UPDATE
You should be using $(target).offset().top, it works independent of the style's position property.
You must scrollTop to 0 and subtract the .search-results offset's top, also.
UPDATE II
If you want to animate for both sides, instead of scrollingTop to 0, you must get the current scrollTop and sum it, take a look below:
[].forEach.call('ABCDEFGHIJKLMNOPQRSTUVWXYZ', function(l, i) {
var a = document.createElement('a');
a.textContent = l;
a.addEventListener('click', function(e) {
var target = '#search__results__letter--' + i;
var now = $('.search-results').scrollTop();
$('.search-results').animate({ scrollTop: $(target).offset().top - $('.search-results').offset().top + now }, 200);
});
document.getElementById('letters').appendChild(a);
var div = document.createElement('div');
div.id = 'search__results__letter--' + i;
div.textContent = 'Letter ' + l;
document.querySelector('.search-results').appendChild(div);
});
#letters a {
display: inline-block;
width: 25px;
height: 25px;
background-color: darkblue;
margin: 2px;
line-height: 25px;
text-align: center;
color: white;
font-family: Verdana;
cursor: pointer;
}
.search-results {
height: 120px;
overflow-y: auto;
}
.search-results div {
height: 100px;
background-color: aqua;
margin: 2px;
font-family: Verdana;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="letters">
</div>
<div class="search-results">
</div>

I suggest you use the jquery.scrollTo plugin. It's highly customizable, supports animations and is very easy to use. You just need to replace your animate code with something like this:
$('.search-results').scrollTo($(target), 200);

You need a couple modifications to your code to make it work as I understand it. First, you need to give the .search-results element some context. You do this by adding position:relative to that element. Now that it's the relative parent of your search__results__letter--* elements, you can scroll to them with your animate snippet. However, you also need to calculate the scroll position relative to the offset scroll of the parent. Simple math will handle that part by first getting the scroll position of the search__results__letter--* element and adding it to the scrollTop() of .search-results. You can see this method in the demo code below:
$('.search__strip__letter').each(function () {
var number = $(this).data('letter');
$(this).on('click', function () {
var target = '#search__results__letter--'+number;
var currentPosition = $('.search-results').scrollTop();
$('.search-results').animate({scrollTop:currentPosition + $(target).position().top}, 200);
})
})
.search-results {
border: 1px solid;
height: 100px;
overflow: auto;
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
</ul>
<div class="search-results">
<p id="search__results__letter--A">Search Results A</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--B">Search Results B</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--C">Search Results C</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--D">Search Results D</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--E">Search Results E</p>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<p id="search__results__letter--F">Search Results F</p>
</div>
EDIT:
I've adapted the original poster's fiddle using my code. One addition I had to make was to force the .search__results__letter back into flow by making a new block formatting context on that class. I did this by adding display:inline-block;width:100%; Adding overflow:hidden; or overflow:auto; should also accomplish the same thing. Also, see MDN docs on block formatting context for other methods to force it.
https://jsfiddle.net/gLpvzgu5/

Using JavaScript to change text on the page every half-second

So, what I'm hoping to do is change the text inside a set of <p> tags every half-second. The set of tags in question is in this block of code in my body:
<div class="outerdiv" id="col2">
<p id="matrixText"></p>
</div>
Right below the above code I have the JavaScript that should call a function every half-second:
<script type="text/javascript">
setInterval("changeMatrixText()", 500);
</script>
I have the function changeMatrixText defined inside my head:
function changeMatrixText()
{
var newtext = "";
for (var i = 0; i < 1000; i++)
newtext += Math.floor((Math.random()*10)+1) % 2 ? "0" : "1";
document.getElementById("matrixText").value = newtext;
}
As you see, that's supposed to set the text to a random string of 0's and 1's. But it's not working. Any idea why?
Just in case you need to see my entire code .....
<html>
<head>
<title>Simple encrypt/decrypt</title>
<style type="text/css">
body
{
background-color: #A9F5F2;
width: 900px;
padding: 0px;
}
.outerdiv
{
margin: 5px;
border: 2px solid #FF8000;
background-color: #FFFFFF;
}
.outerdiv > p
{
margin: 5px;
word-wrap:break-word
}
.outerdiv > h1
{
margin: 5px;
}
#col1
{
width: 500x;
height: 800px;
float: left;
}
#col2
{
width: 295px;
height: 1500px;
float: right;
font-family: Courier New;
overflow: hidden;
}
#title1div
{
font-family: Arial;
width: 100%;
}
#insctdiv
{
font-family: Arial;
width: 100%;
}
#iptdiv
{
height: 400px;
width: 100%;
}
#buttonsdiv
{
text-align: center;
width: 100%;
}
#inputText
{
width: 100%;
height: 100%;
resize: none;
}
</style>
<script type="text/javascript">
function encrypt()
{
var text = document.getElementById("inputText").value;
newstring = "";
/* Make newstring a string of the bit representations of
the ASCII values of its thisCharacters in order.
*/
for (var i = 0, j = text.length; i < j; i++)
{
bits = text.charCodeAt(i).toString(2);
newstring += new Array(8-bits.length+1).join('0') + bits;
}
/* Compress newstring by taking each substring of 3, 4, ..., 9
consecutive 1's or 0's and it by the number of such consecutive
thisCharacters followed by the thisCharacter.
EXAMPLES:
"10101000010111" --> "10101401031"
"001100011111111111111" --> "0011319151"
*/
newstring = newstring.replace(/([01])\1{2,8}/g, function($0, $1) { return ($0.length + $1);});
document.getElementById("inputText").value = newstring;
}
function decrypt()
{
var text = document.getElementById("inputText").value;
text = text.trim();
text.replace(/([2-9])([01])/g,
function (all, replacementCount, bit) {
return Array(+replacementCount + 1).join(bit);
}).split(/(.{8})/g).reduce(function (str, byte) {
return str + String.fromCharCode(parseInt(byte, 2));
}, "");
document.getElementById("inputText").value = text;
}
function changeMatrixText()
{
var newtext = "";
for (var i = 0; i < 1000; i++)
newtext += Math.floor((Math.random()*10)+1) % 2 ? "0" : "1";
document.getElementById("matrixText").value = newtext;
}
</script>
</head>
<body>
<div id="col1">
<div class="outerdiv" id="title1div">
<h1>Reversible text encryption algorithm</h1>
</div>
<div class="outerdiv" id="insctdiv">
<p>Type in or paste text below, then click <b>Encrypt</b> or <b>Decrypt</b></p>
</div>
<div class="outerdiv" id="iptdiv">
<textarea id="inputText" scrolling="yes"></textarea>
</div>
<div class="outerdiv" id="buttonsdiv">
<button onclick="encrypt()"><b>Encrypt</b></button>
<button onclick="decrypt()"><b>Decrypt</b></button>
</div>
</div>
<div class="outerdiv" id="col2">
<p id="matrixText"></p>
</div>
<script type="text/javascript">
setInterval("changeMatrixText()", 500);
</script>
</body>
</html>
In essence, I'm trying to make the right column of my page keep printing inside a new string of 0's and 1's every half-second, kinda like on the computer screen on the movie The Matrix, if you catch my drift.

According to MDN, the elements with a value attribute include <button>, <option>, <input>, <li>, <meter>, <progress>, and <param>. You'll need to set the innerHTML instead.
document.getElementById("matrixText").value = newtext;
to
document.getElementById("matrixText").innerHTML = newtext;
and
setInterval("changeMatrixText()", 500);
to
setInterval(changeMatrixText, 500);
Working Demo

document.getElementById("matrixText").value = newtext;
.value is used for form fields instead use
document.getElementById("matrixText").innerHTML = newtext;
in your changeMatrixText function

Here's an example of how you can do this:
http://jsfiddle.net/35W4Z/
The main difference is that a <p> element doesn't have a .value attribute. Instead, use the innerHTML attribute (as shown in the JSFiddle example)
Hope this helps!

Well for fun, I stuck this in a fiddle: http://jsfiddle.net/jdmA5/1/
So two things, mostly:
1) You can't set the "value" of a div element. You have to set the .innerHTML:
document.getElementById("matrixText").innerHTML = newtext;
2) This could be due to the fact I built this out in fiddle, but setInterval is notorious for not running like you expect unless you give each iteration its own memory space. I did this by wrapping the call to changeMatrix in a anonymous function:
setInterval(function() {changeMatrixText();}, 500);
Check out the jsfiddle link to see it in action.

Have you tried changing the setInterval method to accept the first argument as the function itself (the name, minus the parentheses), rather than a string...
As you are not passing any parameters explicitly, you can invoke the function as follows:
setInterval(changeMatrixText, 500);
Should you have needed to supply some parameters, then the following would work:
setInterval(function() {
changeMatrixText(myParam1, myParam2); // etc, etc
}, 500);