Develop Reference

How to keep button disabled even if user refreshes the page? Javascript

I have this little app that generates numbers between 1 and 90. I do it as I'm practicing with my early JS skills.
It's written in italian so for better understanding, well the title doesn't matter that much, it just says "wanna try your luck?" bla-bla.
Then I set a timeout that disables the "Genera Numeri" button for 1 hour after it's clicked (I set it to 3 seconds for the post), and a message pops up ("You can use it once every hour") but if you refresh the page, of course, you can click it again.
I was wondering, how can I make it that even if I refresh, the countdown would be still going?
I read another similar question where they were talking about Mongo (which I have no clue what it is, I suppose back end (?) ), and they mentioned the use of cookies to do that, which in my inexperienced eyes, could make sense.
Anyways, HERE the Javascript
let button = document.querySelector('.button')
let clear = document.querySelector('.clear')
let message = document.querySelector('.message')
let first = document.querySelector('.first')
let second = document.querySelector('.second')
let third = document.querySelector('.third')
let fourth = document.querySelector('.fourth')
let fifth = document.querySelector('.fifth')
let sixth = document.querySelector('.sixth')
button.addEventListener('click', ()=> {
first.innerText = Math.floor(Math.random() * (90 - 1) + 1)
second.innerText = Math.floor(Math.random() * (90 - 1) + 1)
third.innerText = Math.floor(Math.random() * (90 - 1) + 1)
fourth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
fifth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
sixth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
message.classList.add('show')
button.disabled = true
setTimeout(function(){
button.disabled = false
message.classList.remove('show')
}, 1000 * 3)
})
clear.addEventListener('click', ()=> {
first.innerText = ''
second.innerText = ''
third.innerText = ''
fourth.innerText = ''
fifth.innerText = ''
sixth.innerText = ''
})
And HERE the snippet
let button = document.querySelector('.button')
let clear = document.querySelector('.clear')
let message = document.querySelector('.message')
let first = document.querySelector('.first')
let second = document.querySelector('.second')
let third = document.querySelector('.third')
let fourth = document.querySelector('.fourth')
let fifth = document.querySelector('.fifth')
let sixth = document.querySelector('.sixth')
button.addEventListener('click', ()=> {
first.innerText = Math.floor(Math.random() * (90 - 1) + 1)
second.innerText = Math.floor(Math.random() * (90 - 1) + 1)
third.innerText = Math.floor(Math.random() * (90 - 1) + 1)
fourth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
fifth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
sixth.innerText = Math.floor(Math.random() * (90 - 1) + 1)
message.classList.add('show')
button.disabled = true
setTimeout(function(){
button.disabled = false
message.classList.remove('show')
}, 1000 * 3)
})
clear.addEventListener('click', ()=> {
first.innerText = ''
second.innerText = ''
third.innerText = ''
fourth.innerText = ''
fifth.innerText = ''
sixth.innerText = ''
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-image: url('conf.jpg');
background-size: cover;
background-repeat: no-repeat;
height: 100vh;
background-position-x: right;
}
.overlay {
width: 100vw;
height: 100vh;
background: rgba(0,0,0,.3);
}
.container {
width: 95vw;
height: 420px;
margin: auto;
display: flex;
flex-direction: column;
border: 1px solid black;
justify-content: space-around;
align-items: center;
text-align: center;
font-family: helvetica;
position: absolute;
top: 40vh;
left: 50vw;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.75);
color: white;
border-radius: 15px;
box-shadow: 0 0 15px black;
padding-bottom: 1em;
}
.title {
height: 50%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
text-align: center;
letter-spacing: .5px;
}
h1 {
font-family: verdana;
border-bottom: 1px solid white;
}
.tenta {
font-size: 1.25em;
}
.numbers {
display: flex;
width: 100%;
justify-content: space-around;
}
.number {
width: 50px;
height: 50px;
border-radius: 50%;
border: 1px solid white;
text-align: center;
vertical-align: center;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-family: tahoma;
font-size: 1.2em;
background: black;
}
.button {
padding: .5em 1.5em;
font-size: 1.1em;
border: none;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px black;
transition: .2s linear;
outline: none;
background: rgb(0,255,117)
}
.button:active {
transform: scale(.95);
}
.clear {
padding: .2em .5em;
position: absolute;
bottom: 20px;
right: 20px;
border: none;
background: white;
border-radius: 5px;
box-shadow: 0 0 10px black;
transition: .2s linear;
outline: none;
}
.clear:active {
transform: scale(.95);
}
p {
color: white;
text-align: center;
position: relative;
top: calc(450px + 20vw);
font-family: helvetica;
font-size: 1.1em;
margin: auto;
background: rgba(0,0,0,.45);
padding: .5em 1em;
display: none;
}
p.show {
display: block;
}
<div class="overlay">
<div class="container">
<div class="title">
<h1>Number Generator</h1>
<h3 class="nonsai">Non sai quali numeri giocare?</h3>
<h3 class="tenta">Tenta la fortuna con l'algoritmo di<br> Number Generator!</h3>
</div>
<div class="numbers">
<div class="first number"></div>
<div class="second number"></div>
<div class="third number"></div>
<div class="fourth number"></div>
<div class="fifth number"></div>
<div class="sixth number"></div>
</div>
<button class="button">Genera Numeri</button>
<button class="clear">Refresh</button>
</div>
<p class="message">Puoi usare Number Generator una volta ogni ora</p>
</div>
<script src="main.js"></script>

I didn't read all your code but from the explanation it seems like you have wrong approach in general if you want to restrict the user from clicking the button. I think you are aware of the client and server side computation.
So, first of all. Surely you can restrict button clicks on client side and even in a consistent way (saving it after refresh) but you should keep in mind that an advanced internet user will be able to hack it easily because you have just some standart options to achieve it. One of them is using cookies: When user clicks a button save a cookie with name butttonClicked or smth with value true and a lifetime of 1 hour. Its easy googlable how to do it. On page load always check if the cookies is set and attach attribute disabled to button. but cookies are visible and user can delete it himself.
To really restrict it you should make some checks on the server side so that even if user was able to send a request somehow, no matter the button was disabled or no on the front end, you should stop performing an action and send back an error message.

One way to do this would be using the browser's built-in capability to store data for a particular domain by utilizing the local storage. In general it can be used to store any kind of data but in your case it should hold the time your button gets 'reactivated'.
Let me outline what needs to be done:
at page load, start a timer which continuously checks the time stored in the local storage in a short interval of e.g. 1 second.
if there is no time stored yet, store the current time
if there is a time stored and it's in the future, disable the button
if there is a time stored and it's in the past, enable the button
If the user presses the button, update the value in the local storage and disable the button.
Here's an example. If you click on the button, it will disable it for 3 seconds:
<html>
<head>
</head>
<body>
<button id="button">click me</button>
</body>
<script type="text/javascript">
var myButton=document.getElementById("button");
function storeTime(theTime)
{
localStorage.setItem("time", theTime);
}
function check()
{
var now=new Date().getTime();
if(!localStorage.getItem("time"))
{
storeTime(now);
}
var storedTime=parseInt(localStorage.getItem("time"));
if(storedTime>now)
{
myButton.disabled=true;
}
else
{
myButton.disabled=false;
}
}
function buttonClicked()
{
var now=new Date().getTime() + 3000;
storeTime(now);
myButton.disabled=true;
}
setInterval(check, 1000);
check();
myButton.addEventListener("click", buttonClicked);
</script>
</html>

Overlapping Images from Array - Javascript

I am trying to make a planner that allows you to select a wallpaper by season. Currently I'm working on fall and if you click on fall, you can see all of the alerts are different (each url from my array is shown). But, when those alerts go away, I see only one wallpaper. I want all of the wallpapers to show up when fall is clicked on not just one (so user can see all options). I want them to be in a grid view (similar to a photo gallery on iPhones but have the images a little spread out). I'm confused on what I'm doing wrong because the alerts show all url's so I'm not sure if they images are over top of each other. I tried adding margin but that didn't work either.
Here is my code:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>
<body>
<header>PLANNER</header>
<div id="menu">
<button id="fall" onclick="seasonFall()">FALL</button>
<button id="spring" onclick="seasonSpring()">SPRING</button>
<button id="summer" onclick="seasonSummer()">SUMMER</button>
<button id="winter" onclick="seasonWinter()">WINTER</button>
<button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>
</div>
<script>
var fall = [
"https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
function seasonFall() {
for (var i = 0; i < fall.length; i++) {
var test = document.createElement('div');
test.id = "test";
test.innerHTML = document.body.style.backgroundImage = "url('" + fall[i] + "')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "300px 300px";
document.body.style.margin = "30px";
alert(test.innerHTML);
}
}
function defaultButton() {
document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
}
</script>
<style>
/* PLANNER HEADER AT TOP */
header {
font-family: 'Marvel', sans-serif;
text-align: center;
font-size: 100px;
margin: 0px;
}
/* WALLPAPER MENU */
#menu {
font-family: 'Marvel', sans-serif;
text-align: center;
background-color: rgba(255, 255, 255, 0.6);
font-size: 100px;
float: left;
height: 100%;
margin: 0px;
grid-area: menu;
}
/* SEASON BUTTONS */
button {
font-size: 16px;
text-align: center;
font-family: 'Marvel', sans-serif;
font-weight: bold;
height: 25px;
display: block;
margin: 20px;
width: 160px;
}
</style>
</body>
</html>
I found similar questions but they used other languages:
Load images in grid view from Url (Java)
get image url from array (Php)

The problem is that you are overwriting the background image of the document body in every iteration in the method seasonFall.
Please, try something like this:
<html>
<head>
<link href="https://fonts.googleapis.com/css2?family=Marvel&display=swap" rel="stylesheet">
</head>
<body>
<header>PLANNER</header>
<div id="menu">
<button id="fall" onclick="seasonFall()">FALL</button>
<button id="spring" onclick="seasonSpring()">SPRING</button>
<button id="summer" onclick="seasonSummer()">SUMMER</button>
<button id="winter" onclick="seasonWinter()">WINTER</button>
<button id="lock" onclick="defaultButton()">DEFAULT WALLPAPER</button>
</div>
<div id="wrapper">
</div>
<script>
var fall = [
"https://images.pexels.com/photos/3216349/pexels-photo-3216349.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/3150553/pexels-photo-3150553.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260",
"https://images.pexels.com/photos/589840/pexels-photo-589840.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
];
function seasonFall() {
for (var i = 0; i < fall.length; i++) {
// Please, excuse the code, is just for give you the idea
// Ideally you must use CSS to set as much of these properties as
// you can once you have a clear idea of how to organize your grid
var test = document.createElement('div');
test.id = "test" + i;
test.style.backgroundImage = "url('" + fall[i] + "')";
test.style.backgroundPosition = "center center";
test.style.backgroundRepeat = "no-repeat";
test.style.backgroundSize = "300px 300px";
test.style.margin = "30px";
test.style.width = "300px";
test.style.height = "300px";
wrapper.appendChild(test);
}
}
function defaultButton() {
document.body.style.backgroundImage = "url('https://images.pexels.com/photos/3689659/pexels-photo-3689659.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260')";
document.body.style.backgroundPosition = "center center";
document.body.style.backgroundRepeat = "no-repeat";
document.body.style.backgroundSize = "cover";
}
</script>
<style>
/* PLANNER HEADER AT TOP */
header {
font-family: 'Marvel', sans-serif;
text-align: center;
font-size: 100px;
margin: 0px;
}
/* WALLPAPER MENU */
#menu {
font-family: 'Marvel', sans-serif;
text-align: center;
background-color: rgba(255, 255, 255, 0.6);
font-size: 100px;
float: left;
height: 100%;
margin: 0px;
grid-area: menu;
}
/* SEASON BUTTONS */
button {
font-size: 16px;
text-align: center;
font-family: 'Marvel', sans-serif;
font-weight: bold;
height: 25px;
display: block;
margin: 20px;
width: 160px;
}
#wrapper {
margin-left: 200px;
}
</style>
</body>
</html>
The idea is create a series of div elements and set the background properties of them.
You can organize these divs in a grid with the number of columns and rows that you consider appropriate, for instance, just including further loops in the seasonFall method and adjusting the margin and position of them.

My button doesn't change function

I was wondering why the button doesn't change to the other function where the button will turn red when clicking it a second time.
My goal is to have one button that will change function depending on whether you pressed it once
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello" onclick="button()">START</div>
</body>
<script>
var x = true;
if(x == true) {
function button() {
x = false;
alert("once");
}
}
if(x == false) {
function button() {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>

You're conditionally creating, on page load, one of two possible function definitions. The second definition won't replace the first just because you've reassigned the boolean flag at some point.
Create a single function that checks the status of x internally:
function button() {
if(x) { // Comparing against true is redundant
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}

Your function button() is only being defined once. You can not define a function based on a condition, it will be defined as soon as its surrounding code is executed. Thus, you need to place your if statements inside the function.
<!DOCTYPE html>
<html>
<head>
<style>
#hello {
padding: 30px 60px;
background-color: #4db8ff;
width: 100px;
text-align: center;
margin-left: auto;
margin-right: auto;
cursor: pointer;
color: white;
font-family: arial;
font-size: 20px;
}
</style>
</head>
<body>
<div id="hello" onclick="button()">START</div>
</body>
<script>
var x = true;
function button(){
if(x) {
x = false;
alert("once");
} else {
alert("twice");
document.getElementById("hello").style.background = "#ff3333";
}
}
</script>
</html>

Why is my JS Code for random color generator not working in the browser

I have an error in the console that says:
Uncaught TypeError: Cannot read property 'addEventListener' of null
at (index):14
Here is my code to analyze:
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<head>
<script type="text/javascript">
var div = document.getElementById('text'),
randomColor = function(e) {
var hex = Math.floor( Math.random() * 0xFFFFFF ),
res = e.target,
result = "#" + hex.toString(16);
res.style.backgroundColor = result;
res.innerHTML = result;
};
div.addEventListener('mouseover', randomColor);
</script>
<style>
#text{
width: 1000px;
height: 500px;
text-align: center;
font-size: 50px;
font-family: 'Quicksand';
}
body{
text-align: center;
font-family: 'Quicksand';
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>
</body>
</html>
I do not understand because it works in JSFIDDLE. Someone please help!

Here's a stack snippet with your code but with the various css, js and html re-arranged.
In your original single html file, you should include your js after the html.
var div = document.getElementById('text'),
randomColor = function(e) {
var hex = Math.floor(Math.random() * 0xFFFFFF),
res = e.target,
result = "#" + hex.toString(16);
res.style.backgroundColor = result;
res.innerHTML = result;
};
div.addEventListener('mouseover', randomColor);
#text {
width: 1000px;
height: 500px;
text-align: center;
font-size: 50px;
font-family: 'Quicksand';
}
body {
text-align: center;
font-family: 'Quicksand';
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>

The issue with running the code in browser is that your script is in head tag, so its loading before the DOM. In Jsfiddle the script loads after the DOM. So you have to put the script Just before ending the <body> tag.
Its always better to wrap the code
$(document).ready(function() {
// Handler for .ready() called.
});
or (as suggested upper one is not required any more)
$(function() { ... });
if you use jQuery.
or if in case of pure javascript
document.addEventListener("DOMContentLoaded", function(){
// Handler when the DOM is fully loaded
});
Hope it helps.
Edit: Added code (Just placed the script tag before body ends)
<html>
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Quicksand" />
<head>
<style>
#text{
width: 1000px;
height: 500px;
text-align: center;
font-size: 50px;
font-family: 'Quicksand';
}
body{
text-align: center;
font-family: 'Quicksand';
margin-top: 0px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
}
</style>
</head>
<body>
<h1>Hover over me to get a random color!</h1>
<div id="text">Hex code</div>
<script type="text/javascript">
var div = document.getElementById('text'),
randomColor = function(e) {
var hex = Math.floor( Math.random() * 0xFFFFFF ),
res = e.target,
result = "#" + hex.toString(16);
res.style.backgroundColor = result;
res.innerHTML = result;
};
div.addEventListener('mouseover', randomColor);
</script>
</body>
</html>

Javascript Statistics Calculator

I am trying to make a JS function that takes in:
- Count of entries
- Minimum of entries
- Maximum of entries
- Range of entries
- Sum of entries
- Average of entries
I am trying to use a loop alert to take in the user input but with no luck, here is my code so far:
<!DOCTYPE html>
<html>
<head>
<script>
function show_prompt() {
i = 1;
do {
var number = prompt("Please Enter a Number");
i++;
if (number % 2) {
document.write("Number: " + number);
document.write("<br>");
}
}
while (i <= 15);
}
show_prompt();
</script>
<style>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 55px;
text-decoration: none;
}
li a:hover {
background-color: #111;
}
.tasks {
color: white;
font-size: 250%;
text-align: center;
}
</style>
<body>
</body>
</html>
Many Thanks
James

I tried some codes. Try this snippet.https://jsfiddle.net/2fo8ctgv/2/
var i = 0,
answer=true,
nums=[],
min,
max,
avrg = 0,
sum = 0;
do{
var num;
if(num=prompt('number')){
nums.push(num)
i++;
} else {
answer = false;
}
} while(answer);
nums.forEach(function(c){sum+=c;});
nums.sort(function(a,b){return a-b});
min = nums[0];
max = nums[nums.length-1];
avrg=sum/i;
console.log(min,max,avrg,sum);