This is the fake gauge I want the arrow to work on
I want the red line/pointer to randomly generate between 0 - 100% humidity.
HTML:
//variables
let hygrometerHand = document.querySelector("#hygrometerHand");
const button = document.querySelector("#button");
let hygrometerAngle = 0;
hygrometerHand = 0;
//function
function generateResult() {
let min = -100;
let max = 95;
let x = Math.random() * (max - min) + min;
hygrometerHand = x;
hygrometerHand.style.transform = `rotate(${hygrometerHand}deg)`;
}
//button and event listener to generate moisture reading
button.addEventListener("click", generateResult);
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<div id="clock-container">
<img src="https://i.stack.imgur.com/3z72xm.jpg" />
<div id="hygrometerHand"></div>
</div>
<div>
<button id="button">Click here</button>
</div>
<script src="main.js"></script>
</body>
</html>
Please help with this! I know the answer is probably going to be very simple but its my second week of learning JS in a bootcamp and my mind is p overloaded.
Thank you!
Related
I want to make a website so that it will randomly generate a number. I want to be able to type in the number in a input box, press submit, and have the matching generated number removed from the list.
**I want to only use HTML and Javascript if possible
I tried to look online
A simple implementation is this. You can further develop as you wish.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="result"></div>
<button type="number" id="get">Get random number</button>
<div id="arr">
</div>
<button type="number" id="rm">Remove number <span id="rnumber"></span></button>
<script>
let arr = [0,1,2,3,4,5,6,7,8,9];
let n;
document.getElementById("get").addEventListener("click", getRandomInt);
document.getElementById("arr").innerHTML = arr;
document.getElementById("rm").addEventListener("click", rmNumber);
function getRandomInt() {
n = Math.floor(Math.random() * 10);
document.getElementById("result").innerHTML = n;
}
function rmNumber() {
let n = Number(document.getElementById("result").childNodes[0].textContent);
arr = arr.filter(i => i != n);
document.getElementById("arr").innerHTML = arr;
}
</script>
</body>
</html>
New to javascript so please be kind.
I am trying to loop over a all the elements in the "wrapper" class to show each element for x amount of time. This code just shows all elements at once.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
Javascript
var divOne = document.getElementsByClassName('x')
console.log(divOne.length)
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000)
}
The reason is due to below code
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000)
Which will make all the element hide after 5000 millseconds,so you need to set them sepeartely
var divOne = document.getElementsByClassName('x')
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
for(let j=0;j<len;j++){
if(j==i){
divOne[j].style.display = 'inline-block';
}else{
divOne[j].style.display = 'none';
}
}
}, 5000*i)
}
.x{
display:none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
The setTimeout waits the 5000ms specified. The reason to hide all elements at the same time is that this code have created all Timeouts with same executing time, making all Timeouts runs at the same time.
The solution is when create the Timeout, pass the ms duration major of the previous, can be done like this:
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000 * (i+1))
}
Look at the second parameter of setTimeout, we add the 5000ms multiplicated by index of loop + 1 (because the var i starts with 0).
Try code:
var divOne = document.getElementsByClassName('x')
console.log(divOne.length)
for (let i=0, len = divOne.length; i < len; i++) {
setTimeout(() => {
divOne[i].style.display = 'none';
}, 5000 * (i+1))
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
</body>
</html>
To loop over a all the elements in the "wrapper" class to show each element for x amount of time
Lets try this code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Cell One</title>
</head>
<body>
<div class="wrapper">
<div class="x" id="inner">
<p>Test</p>
</div>
<div class="x" id="inner">
<p>Testing</p>
</div>
</div>
<script src="./main.js"></script>
</body>
</html>
here is a JavaScript code which will iterate loop over class name x and hide them with x amount of time one by one
Javascript
let x = document.querySelectorAll('.x')
for (let i=0; i < x.length; i++)
{
setTimeout(() => {x[i].style.display = 'none';},5000*i+1)
}
I am trying to get user input from the textbox and then click the button beside in order to calculate the area of a circle. Problem is alert always prints NaN.
<!DOCTYPE html>
<html lang="en">
<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">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle(rad) {
let area = PI * Math.pow(rad, 2);
alert(area);
}
</script>
</head>
<body>
<input type="text" placeholder="Type something..." id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>
You have to pass input value on your function. As you're code to pass it on your function as argument/parameter. So you can code it like that:
<input type="button" onclick="getAreaOfCircle(document.getElementById('myInput').value);" value="Calculate Area of a Circle">
You need to get the actual input text and convert its value into a floating number:
<!DOCTYPE html>
<html lang="en">
<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">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle() {
//Get the radius from the input field
let rad = document.getElementById("myInput").value;
//Check if the input is not empty, if it is set rad to 0
rad = rad !== "" ? parseFloat(rad) : 0;
let area = PI * Math.pow(rad, 2);
alert(area.toFixed(2));
}
</script>
</head>
<body>
<input type="text" placeholder="Enter the circle radius" id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>
You are not passing rad in the function getAreaOfCircle
So you can get value inside the function getAreaOfCircle as:
const rad = document.querySelector("#myInput").value;
<!DOCTYPE html>
<html lang="en">
<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">
<title>HTML 5 Boilerplate</title>
<link rel="stylesheet" href="./css/style.css">
<script>
const PI = 3.14159;
function getAreaOfCircle() {
const rad = document.querySelector("#myInput").value;
let area = PI * Math.pow(rad, 2);
alert(area);
}
</script>
</head>
<body>
<input type="text" placeholder="Type something..." id="myInput">
<input type="button" onclick="getAreaOfCircle();" value="Calculate Area of a Circle">
</body>
</html>
so I tried to add .value in two differnet locations
and I just would like to know why
HTML code :
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Guess My Number!</title>
</head>
<body>
<header>
<h1>Guess My Number!</h1>
<p class="between">(Between 1 and 20)</p>
<button class="btn again">Again!</button>
<div class="number">?</div>
</header>
<main>
<input type="number" class="guess" name="number" />
<button class="btn check">Check!</button>
<script src="script.js"></script>
</body>
</html>
javascript code 1 :
var input = document.querySelector(".guess").value
const check = document.querySelector(".check")
const message = document.querySelector(".message")
var score = document.querySelector('.score')
var highScore = document.querySelector('.highscore')
check.addEventListener("click", function(){
console.log(input)
})
result : will not log the input's value
javascript code 2 :
var input = document.querySelector(".guess")
const check = document.querySelector(".check")
const message = document.querySelector(".message")
var score = document.querySelector('.score')
var highScore = document.querySelector('.highscore')
check.addEventListener("click", function(){
console.log(input.value)
})
result: will log the input's value
In the first case it gets the value when the page loads, in the second when you click the button it gets the value again, updated from the input
i will create a Checkout system for gastro.
How i can wríte this.
I will create a list than write this on another page "home.php",
than i need a script were i can onclick writeout "deftige KartoffelSuppe" and the price.
i love you guys,
<script>
let Suppe =["Deftige Kartoffelsuppe, 4,80"];
</script>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="Ausgabe"></div>
Greedings from Germany
Michael Burat
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
let suppe = ["Deftige Kartoffelsuppe, 4,80"];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = suppe;
});
</script>
</body>
</html>
i changed the id names to lowercase and added a eventListener to handle the click.
innerHTML is what you wanted i guess.
And thanks for loving me btw.
and this is a clean version of coding something like this:
<!DOCTYPE html>
<html lang="en">
<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" />
<title>Static Template</title>
</head>
<body>
<button id="btn0">Deftige Kartoffelsuppe</button>
<div id="ausgabe"></div>
<script>
const data = [
{
name: "Deftige Kartoffelsuppe",
preis: "4,80€"
}
];
const btn = document.querySelector("#btn0");
const ausgabe = document.querySelector("#ausgabe");
btn.addEventListener("click", () => {
ausgabe.innerHTML = `${data[0].name} für nur ${data[0].preis}`;
});
</script>
</body>
</html>