Multiscreen for lottery javascript
up vote
-1
down vote
favorite
I've been working on this project for a while now. But im stuck on this part. Currently I am making a lottery that generates numbers from 1-99 and you can get a random amount of numbers from 1-10. So what i need help with is making my lottery 2 screens. So when I press generate, it will generate random numbers and I want the number to have its own screen. And then on that screen I want it to show my numbers and have a button that say start again and will bring me back to the main screen. Right now, it only shows my numbers below the textfields.
here are the codes.
JS:
document.addEventListener("DOMContentLoaded", init);
function init()
document.querySelector("#btnBack").addEventListener("click", toggleSwitch);
document.querySelector("#btnSend").addEventListener("click", generate);
document.addEventListener("keypress", function (e)
if (e.keyCode === 13)
generate();
// console.log(e.keyCode);
);
function toggleSwitch()
pages[0].classList.toggle("active");
pages[1].classList.toggle("active");
let pages = ;
pages = document.querySelectorAll(".page");
let url = "https://davidst.edumedia.ca/mad9014/nums.php";
function reminder()
let dig = document.querySelector("#digits");
let mx = document.querySelector("#max");
if (dig.value <= 0)
alert("Please enter a value for 'number of digits'.nNegative numbers are not accepted.");
dig.focus();
else if (dig.value > 10)
alert("The maximum value is 10. Please check the 'number of digits'");
dig.focus();
else if (mx.value <= 0)
alert("Range must be higher than 0 and lower than 100.");
mx.focus();
else if (mx.value - dig.value < 0)
alert("Lotterys will not accept any duplicates.nTherefore, your range must be higher than 'number of digits'.");
mx.focus();
else if (mx.value > 99)
alert("The highest range is 99.nAny number from 0-99!.");
mx.focus();
else
toggleSwitch();
return;
function generate()
console.log(document.querySelector("#digits").value);
reminder();
let form = new FormData();
let digits = document.querySelector("#digits").value;
let max = document.querySelector("#max").value;
form.append("digits", digits);
form.append("max", max);
let req = new Request(url,
method: "POST",
mode: "cors",
body: form
);
fetch(req)
.then(function (response)
return response.json();
)
.then(function (data)
let numbers = data.numbers;
let ul = document.querySelector(".num_list");
ul.textContent = "";
for (let i in numbers)
let li = document.createElement("li");
li.textContent = numbers[i];
ul.appendChild(li);
console.log(data);
);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Lotto</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="home" class="page">
<header>
<h1>$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p class="formBox">
<label for="digits">Number of Digits</label>
<input id="digits" type="number" max="10" min="1" placeholder="6" class="sm" />
</p>
<p class="formBox">
<label for="max">Range</label>
<span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" class="sm" />
</p>
<p class="formBox buttons">
<button id="btnSend">Generate Numbers</button>
</p>
</section>
</div>
<div id="list" class="page display">
<header>
<h1 class="color">$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p id="errorMessage"></p>
<ul class="num_list">
<!-- display the generated numbers from the server -->
</ul>
<p>
<button id="btnBack">Start Again</button>
</p>
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
h1
font-size: 50px;
html
font-family: 'Comfortaa', serif, sans-serif;
text-align: center;
body
justify-content: center;
margin-top: 5rem;
li
background-color: hsla(10, 0%, 94%, 1);
background-color: hsl(182, 43%, 50%);
border: 5px solid hsl(172, 99%, 20%);
font-weight: bold;
padding: 1.5rem 0;
width: 70px;
margin: 1rem 1rem;
color: hsl(360, 100%, 49%);
font-size: 25px;
background-image: url(lottery-ball-background-vector-55349.jpg);
background-position: center;
background-size: 90px;
border-radius: 20px;
justify-content: center;
ul
text-align: center;
display: flex;
justify-content: center;
list-style-type: none;
button
background-color: hsl(27, 100%, 50%);
border-radius: 10px;
padding: 5px;
border: 2px solid #FEFEFE;
font-size: 25px
@media (max-width:499px)
h1
font-size: 20px;
button
font-size: 10px;
ul
display: inline-block;
javascript
asked Nov 8 at 20:08
Zulrahking
12
add a comment |
up vote
-1
down vote
favorite
I've been working on this project for a while now. But im stuck on this part. Currently I am making a lottery that generates numbers from 1-99 and you can get a random amount of numbers from 1-10. So what i need help with is making my lottery 2 screens. So when I press generate, it will generate random numbers and I want the number to have its own screen. And then on that screen I want it to show my numbers and have a button that say start again and will bring me back to the main screen. Right now, it only shows my numbers below the textfields.
here are the codes.
JS:
document.addEventListener("DOMContentLoaded", init);
function init()
document.querySelector("#btnBack").addEventListener("click", toggleSwitch);
document.querySelector("#btnSend").addEventListener("click", generate);
document.addEventListener("keypress", function (e)
if (e.keyCode === 13)
generate();
// console.log(e.keyCode);
);
function toggleSwitch()
pages[0].classList.toggle("active");
pages[1].classList.toggle("active");
let pages = ;
pages = document.querySelectorAll(".page");
let url = "https://davidst.edumedia.ca/mad9014/nums.php";
function reminder()
let dig = document.querySelector("#digits");
let mx = document.querySelector("#max");
if (dig.value <= 0)
alert("Please enter a value for 'number of digits'.nNegative numbers are not accepted.");
dig.focus();
else if (dig.value > 10)
alert("The maximum value is 10. Please check the 'number of digits'");
dig.focus();
else if (mx.value <= 0)
alert("Range must be higher than 0 and lower than 100.");
mx.focus();
else if (mx.value - dig.value < 0)
alert("Lotterys will not accept any duplicates.nTherefore, your range must be higher than 'number of digits'.");
mx.focus();
else if (mx.value > 99)
alert("The highest range is 99.nAny number from 0-99!.");
mx.focus();
else
toggleSwitch();
return;
function generate()
console.log(document.querySelector("#digits").value);
reminder();
let form = new FormData();
let digits = document.querySelector("#digits").value;
let max = document.querySelector("#max").value;
form.append("digits", digits);
form.append("max", max);
let req = new Request(url,
method: "POST",
mode: "cors",
body: form
);
fetch(req)
.then(function (response)
return response.json();
)
.then(function (data)
let numbers = data.numbers;
let ul = document.querySelector(".num_list");
ul.textContent = "";
for (let i in numbers)
let li = document.createElement("li");
li.textContent = numbers[i];
ul.appendChild(li);
console.log(data);
);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Lotto</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="home" class="page">
<header>
<h1>$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p class="formBox">
<label for="digits">Number of Digits</label>
<input id="digits" type="number" max="10" min="1" placeholder="6" class="sm" />
</p>
<p class="formBox">
<label for="max">Range</label>
<span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" class="sm" />
</p>
<p class="formBox buttons">
<button id="btnSend">Generate Numbers</button>
</p>
</section>
</div>
<div id="list" class="page display">
<header>
<h1 class="color">$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p id="errorMessage"></p>
<ul class="num_list">
<!-- display the generated numbers from the server -->
</ul>
<p>
<button id="btnBack">Start Again</button>
</p>
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
h1
font-size: 50px;
html
font-family: 'Comfortaa', serif, sans-serif;
text-align: center;
body
justify-content: center;
margin-top: 5rem;
li
background-color: hsla(10, 0%, 94%, 1);
background-color: hsl(182, 43%, 50%);
border: 5px solid hsl(172, 99%, 20%);
font-weight: bold;
padding: 1.5rem 0;
width: 70px;
margin: 1rem 1rem;
color: hsl(360, 100%, 49%);
font-size: 25px;
background-image: url(lottery-ball-background-vector-55349.jpg);
background-position: center;
background-size: 90px;
border-radius: 20px;
justify-content: center;
ul
text-align: center;
display: flex;
justify-content: center;
list-style-type: none;
button
background-color: hsl(27, 100%, 50%);
border-radius: 10px;
padding: 5px;
border: 2px solid #FEFEFE;
font-size: 25px
@media (max-width:499px)
h1
font-size: 20px;
button
font-size: 10px;
ul
display: inline-block;
javascript
asked Nov 8 at 20:08
Zulrahking
12
How can I make it so that when I press generate only the generated number shows and below that will have a button that says "start again" and when that button is pressed it will bring back to the home screen with the text fields with 1 button that says generate?
– Zulrahking
Nov 8 at 20:09
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
I've been working on this project for a while now. But im stuck on this part. Currently I am making a lottery that generates numbers from 1-99 and you can get a random amount of numbers from 1-10. So what i need help with is making my lottery 2 screens. So when I press generate, it will generate random numbers and I want the number to have its own screen. And then on that screen I want it to show my numbers and have a button that say start again and will bring me back to the main screen. Right now, it only shows my numbers below the textfields.
here are the codes.
JS:
document.addEventListener("DOMContentLoaded", init);
function init()
document.querySelector("#btnBack").addEventListener("click", toggleSwitch);
document.querySelector("#btnSend").addEventListener("click", generate);
document.addEventListener("keypress", function (e)
if (e.keyCode === 13)
generate();
// console.log(e.keyCode);
);
function toggleSwitch()
pages[0].classList.toggle("active");
pages[1].classList.toggle("active");
let pages = ;
pages = document.querySelectorAll(".page");
let url = "https://davidst.edumedia.ca/mad9014/nums.php";
function reminder()
let dig = document.querySelector("#digits");
let mx = document.querySelector("#max");
if (dig.value <= 0)
alert("Please enter a value for 'number of digits'.nNegative numbers are not accepted.");
dig.focus();
else if (dig.value > 10)
alert("The maximum value is 10. Please check the 'number of digits'");
dig.focus();
else if (mx.value <= 0)
alert("Range must be higher than 0 and lower than 100.");
mx.focus();
else if (mx.value - dig.value < 0)
alert("Lotterys will not accept any duplicates.nTherefore, your range must be higher than 'number of digits'.");
mx.focus();
else if (mx.value > 99)
alert("The highest range is 99.nAny number from 0-99!.");
mx.focus();
else
toggleSwitch();
return;
function generate()
console.log(document.querySelector("#digits").value);
reminder();
let form = new FormData();
let digits = document.querySelector("#digits").value;
let max = document.querySelector("#max").value;
form.append("digits", digits);
form.append("max", max);
let req = new Request(url,
method: "POST",
mode: "cors",
body: form
);
fetch(req)
.then(function (response)
return response.json();
)
.then(function (data)
let numbers = data.numbers;
let ul = document.querySelector(".num_list");
ul.textContent = "";
for (let i in numbers)
let li = document.createElement("li");
li.textContent = numbers[i];
ul.appendChild(li);
console.log(data);
);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Lotto</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="home" class="page">
<header>
<h1>$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p class="formBox">
<label for="digits">Number of Digits</label>
<input id="digits" type="number" max="10" min="1" placeholder="6" class="sm" />
</p>
<p class="formBox">
<label for="max">Range</label>
<span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" class="sm" />
</p>
<p class="formBox buttons">
<button id="btnSend">Generate Numbers</button>
</p>
</section>
</div>
<div id="list" class="page display">
<header>
<h1 class="color">$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p id="errorMessage"></p>
<ul class="num_list">
<!-- display the generated numbers from the server -->
</ul>
<p>
<button id="btnBack">Start Again</button>
</p>
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
h1
font-size: 50px;
html
font-family: 'Comfortaa', serif, sans-serif;
text-align: center;
body
justify-content: center;
margin-top: 5rem;
li
background-color: hsla(10, 0%, 94%, 1);
background-color: hsl(182, 43%, 50%);
border: 5px solid hsl(172, 99%, 20%);
font-weight: bold;
padding: 1.5rem 0;
width: 70px;
margin: 1rem 1rem;
color: hsl(360, 100%, 49%);
font-size: 25px;
background-image: url(lottery-ball-background-vector-55349.jpg);
background-position: center;
background-size: 90px;
border-radius: 20px;
justify-content: center;
ul
text-align: center;
display: flex;
justify-content: center;
list-style-type: none;
button
background-color: hsl(27, 100%, 50%);
border-radius: 10px;
padding: 5px;
border: 2px solid #FEFEFE;
font-size: 25px
@media (max-width:499px)
h1
font-size: 20px;
button
font-size: 10px;
ul
display: inline-block;
javascript
asked Nov 8 at 20:08
Zulrahking
12
I've been working on this project for a while now. But im stuck on this part. Currently I am making a lottery that generates numbers from 1-99 and you can get a random amount of numbers from 1-10. So what i need help with is making my lottery 2 screens. So when I press generate, it will generate random numbers and I want the number to have its own screen. And then on that screen I want it to show my numbers and have a button that say start again and will bring me back to the main screen. Right now, it only shows my numbers below the textfields.
here are the codes.
JS:
document.addEventListener("DOMContentLoaded", init);
function init()
document.querySelector("#btnBack").addEventListener("click", toggleSwitch);
document.querySelector("#btnSend").addEventListener("click", generate);
document.addEventListener("keypress", function (e)
if (e.keyCode === 13)
generate();
// console.log(e.keyCode);
);
function toggleSwitch()
pages[0].classList.toggle("active");
pages[1].classList.toggle("active");
let pages = ;
pages = document.querySelectorAll(".page");
let url = "https://davidst.edumedia.ca/mad9014/nums.php";
function reminder()
let dig = document.querySelector("#digits");
let mx = document.querySelector("#max");
if (dig.value <= 0)
alert("Please enter a value for 'number of digits'.nNegative numbers are not accepted.");
dig.focus();
else if (dig.value > 10)
alert("The maximum value is 10. Please check the 'number of digits'");
dig.focus();
else if (mx.value <= 0)
alert("Range must be higher than 0 and lower than 100.");
mx.focus();
else if (mx.value - dig.value < 0)
alert("Lotterys will not accept any duplicates.nTherefore, your range must be higher than 'number of digits'.");
mx.focus();
else if (mx.value > 99)
alert("The highest range is 99.nAny number from 0-99!.");
mx.focus();
else
toggleSwitch();
return;
function generate()
console.log(document.querySelector("#digits").value);
reminder();
let form = new FormData();
let digits = document.querySelector("#digits").value;
let max = document.querySelector("#max").value;
form.append("digits", digits);
form.append("max", max);
let req = new Request(url,
method: "POST",
mode: "cors",
body: form
);
fetch(req)
.then(function (response)
return response.json();
)
.then(function (data)
let numbers = data.numbers;
let ul = document.querySelector(".num_list");
ul.textContent = "";
for (let i in numbers)
let li = document.createElement("li");
li.textContent = numbers[i];
ul.appendChild(li);
console.log(data);
);
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>AJAX Lotto</title>
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="home" class="page">
<header>
<h1>$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p class="formBox">
<label for="digits">Number of Digits</label>
<input id="digits" type="number" max="10" min="1" placeholder="6" class="sm" />
</p>
<p class="formBox">
<label for="max">Range</label>
<span>1 to </span><input id="max" type="number" min="2" max="99" placeholder="49" class="sm" />
</p>
<p class="formBox buttons">
<button id="btnSend">Generate Numbers</button>
</p>
</section>
</div>
<div id="list" class="page display">
<header>
<h1 class="color">$$$ Lotto Numbers $$$</h1>
</header>
<section class="main">
<p id="errorMessage"></p>
<ul class="num_list">
<!-- display the generated numbers from the server -->
</ul>
<p>
<button id="btnBack">Start Again</button>
</p>
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>
css
@import url('https://fonts.googleapis.com/css?family=Comfortaa');
h1
font-size: 50px;
html
font-family: 'Comfortaa', serif, sans-serif;
text-align: center;
body
justify-content: center;
margin-top: 5rem;
li
background-color: hsla(10, 0%, 94%, 1);
background-color: hsl(182, 43%, 50%);
border: 5px solid hsl(172, 99%, 20%);
font-weight: bold;
padding: 1.5rem 0;
width: 70px;
margin: 1rem 1rem;
color: hsl(360, 100%, 49%);
font-size: 25px;
background-image: url(lottery-ball-background-vector-55349.jpg);
background-position: center;
background-size: 90px;
border-radius: 20px;
justify-content: center;
ul
text-align: center;
display: flex;
justify-content: center;
list-style-type: none;
button
background-color: hsl(27, 100%, 50%);
border-radius: 10px;
padding: 5px;
border: 2px solid #FEFEFE;
font-size: 25px
@media (max-width:499px)
h1
font-size: 20px;
button
font-size: 10px;
ul
display: inline-block;
javascript
javascript
asked Nov 8 at 20:08
Zulrahking
12
asked Nov 8 at 20:08
Zulrahking
12
edited Nov 8 at 20:18
asked Nov 8 at 20:08
Zulrahking
12
asked Nov 8 at 20:08
Zulrahking
12
asked Nov 8 at 20:08
Zulrahking
12
12
How can I make it so that when I press generate only the generated number shows and below that will have a button that says "start again" and when that button is pressed it will bring back to the home screen with the text fields with 1 button that says generate?
– Zulrahking
Nov 8 at 20:09
add a comment |
How can I make it so that when I press generate only the generated number shows and below that will have a button that says "start again" and when that button is pressed it will bring back to the home screen with the text fields with 1 button that says generate?
– Zulrahking
Nov 8 at 20:09
How can I make it so that when I press generate only the generated number shows and below that will have a button that says "start again" and when that button is pressed it will bring back to the home screen with the text fields with 1 button that says generate?
– Zulrahking
Nov 8 at 20:09
How can I make it so that when I press generate only the generated number shows and below that will have a button that says "start again" and when that button is pressed it will bring back to the home screen with the text fields with 1 button that says generate?
– Zulrahking
Nov 8 at 20:09
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
draft saved
draft discarded
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53215386%2fmultiscreen-for-lottery-javascript%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
How can I make it so that when I press generate only the generated number shows and below that will have a button that says "start again" and when that button is pressed it will bring back to the home screen with the text fields with 1 button that says generate?
– Zulrahking
Nov 8 at 20:09