inporve rollDice and added dynamic menu items - js
This commit is contained in:
parent
5f57db6c15
commit
9268c246d1
37
menu/menu.js
37
menu/menu.js
@ -1,4 +1,39 @@
|
||||
var navString = '<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50" height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu is-dark"> <div class="navbar-start is-dark"> <a class="navbar-item is-dark" href="/index.html"> Home </a> <a class="navbar-item" href="/resume/" > Resume </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" > Games </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/yatzee/"> Yatzee </a> <a class="navbar-item" href="/tictac/"> Tic Tac Toe </a> <a class="navbar-item" href="/bingo/"> Bingo </a> <a class="navbar-item" href="/memory/"> Memory </a> <a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a> </div> </div> <div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link" > Ultilities </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/speak"> Speak </a> <a class="navbar-item" href="/binary/"> Binary to ASCII </a> <a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a> <a class="navbar-item" href="/nato/"> NATO Alpha </a> </div> </div> </div> </div> </nav>'
|
||||
// var navString = '<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50" height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu is-dark"> <div class="navbar-start is-dark"> <a class="navbar-item is-dark" href="/index.html"> Home </a> <a class="navbar-item" href="/resume/" > Resume </a> <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link" > Games </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/yatzee/"> Yatzee </a> <a class="navbar-item" href="/tictac/"> Tic Tac Toe </a> <a class="navbar-item" href="/bingo/"> Bingo </a> <a class="navbar-item" href="/memory/"> Memory </a> <a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a> </div> </div> <div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link" > Ultilities </a> <div class="navbar-dropdown"> <a class="navbar-item" href="/speak"> Speak </a> <a class="navbar-item" href="/binary/"> Binary to ASCII </a> <a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a> <a class="navbar-item" href="/nato/"> NATO Alpha </a> </div> </div> </div> </div> </nav>'
|
||||
let navString = '';
|
||||
let baseLinks = [
|
||||
'<a class="navbar-item is-dark" href="/index.html"> Home </a>',
|
||||
'<a class="navbar-item" href="/resume/"> Resume </a>'
|
||||
];
|
||||
let gameLinks = [
|
||||
'<a class="navbar-item" href="/yatzee/"> Yatzee </a>',
|
||||
'<a class="navbar-item" href="/tictac/"> Tic Tac Toe </a>',
|
||||
'<a class="navbar-item" href="/bingo/"> Bingo </a>',
|
||||
'<a class="navbar-item" href="/memory/"> Memory </a>',
|
||||
'<a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a>'
|
||||
];
|
||||
let utilLinks = [
|
||||
'<a class="navbar-item" href="/speak"> Speak </a>',
|
||||
'<a class="navbar-item" href="/binary/"> Binary to ASCII </a>',
|
||||
'<a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a>',
|
||||
'<a class="navbar-item" href="/nato/"> NATO Alpha </a> ',
|
||||
'<a class="navbar-item" href="/rollDice/"> Roll Dice </a> '
|
||||
|
||||
];
|
||||
|
||||
navString = '<nav class="navbar is-dark" role="navigation" aria-label="main navigation"> <div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50" height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <div id="navbarBasicExample" class="navbar-menu is-dark"> <div class="navbar-start is-dark"> ';
|
||||
for (i = 0; i < baseLinks.length; i++){
|
||||
navString += baseLinks[i];
|
||||
}
|
||||
navString += '<div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link"> Games </a> <div class="navbar-dropdown"> ';
|
||||
for (i = 0; i < gameLinks.length; i++){
|
||||
navString += gameLinks[i];
|
||||
}
|
||||
navString += ' </div> </div> <div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link"> Ultilities </a> <div class="navbar-dropdown"> ';
|
||||
for (i = 0; i < utilLinks.length; i++){
|
||||
navString += utilLinks[i];
|
||||
}
|
||||
navString += ' </div> </div> </div> </div> </nav>'
|
||||
|
||||
document.getElementById('navContainer').innerHTML = navString;
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
|
||||
36
menu/test.html
Normal file
36
menu/test.html
Normal file
@ -0,0 +1,36 @@
|
||||
<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand"> <a class="navbar-item" href="/index.html"> <img src="/cetechwhite.png" width="50"
|
||||
height="50"> </a> <a role="button" class="navbar-burger is-dark" aria-label="menu" aria-expanded="false"
|
||||
data-target="navbarBasicExample"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span
|
||||
aria-hidden="true"></span> </a> </div>
|
||||
<div id="navbarBasicExample" class="navbar-menu is-dark">
|
||||
<div class="navbar-start is-dark">
|
||||
<a class="navbar-item is-dark" href="/index.html"> Home </a>
|
||||
<a class="navbar-item" href="/resume/"> Resume </a>
|
||||
<div class="navbar-item has-dropdown is-hoverable">
|
||||
<a class="navbar-link"> Games </a>
|
||||
<div class="navbar-dropdown">
|
||||
|
||||
<a class="navbar-item" href="/yatzee/"> Yatzee </a>
|
||||
<a class="navbar-item" href="/tictac/"> Tic Tac Toe </a>
|
||||
<a class="navbar-item" href="/bingo/"> Bingo </a>
|
||||
<a class="navbar-item" href="/memory/"> Memory </a>
|
||||
<a class="navbar-item" href="https://mtg.chrisedwards.tech"> MTG Life Counter </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="navbar-item has-dropdown is-hoverable is-dark"> <a class="navbar-link"> Ultilities </a>
|
||||
<div class="navbar-dropdown">
|
||||
|
||||
<a class="navbar-item" href="/speak"> Speak </a>
|
||||
<a class="navbar-item" href="/binary/"> Binary to ASCII </a>
|
||||
<a class="navbar-item" href="/youtube_convert/"> YouTube Converter </a>
|
||||
<a class="navbar-item" href="/nato/"> NATO Alpha </a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</nav>
|
||||
@ -28,18 +28,21 @@ body{
|
||||
padding: 2rem;
|
||||
|
||||
}
|
||||
#numberOfDiceSelection{
|
||||
padding-top: 5%;
|
||||
padding-right: 5%;
|
||||
width:100%;
|
||||
.numberOfDiceSelection{
|
||||
/* padding-top: 5%; */
|
||||
/* padding-right: 2%; */
|
||||
/* width:100%; */
|
||||
/* margin: auto; */
|
||||
margin-top: 2%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
flex-direction: row;
|
||||
justify-content: space-evenly;
|
||||
font-size: 2rem;
|
||||
color: #fffb96;
|
||||
}
|
||||
input[type=radio] {
|
||||
border: 0px;
|
||||
width: 100%;
|
||||
/* width: 90%; */
|
||||
height: 2em;
|
||||
}
|
||||
.die{
|
||||
@ -53,6 +56,11 @@ height:7.75em;
|
||||
color: white;;
|
||||
}
|
||||
|
||||
#inputSum{
|
||||
text-align: center;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.wrapper{
|
||||
position:fixed;
|
||||
right:0;
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
let numberOfDice = 2;
|
||||
let numberOfDice = 6;
|
||||
let die_value = [];
|
||||
|
||||
let sum = 0;
|
||||
function newDiceNumber() {
|
||||
die_value = [];
|
||||
for (i = 1; i < 7; i++) document.getElementById("die" + i).innerHTML = "";
|
||||
@ -17,24 +17,25 @@ function newDiceNumber() {
|
||||
function shuffle_dice() {
|
||||
document.getElementById("math").style.display = "block"
|
||||
let addition = "";
|
||||
let sum = 0;
|
||||
sum = 0;
|
||||
for (i = 0, j = 1; i < die_value.length; i++, j++) {
|
||||
var rand = Math.floor(Math.random() * 6) + 1;
|
||||
die_value[i][0] = "<img class='die' src='../dice/die" + rand + ".png' />"
|
||||
die_value[i][1] = rand;
|
||||
document.getElementById("die" + j).innerHTML = die_value[i][0];
|
||||
addition += ` ${die_value[i][1]}` + " ";
|
||||
sum = sum + die_value[i][1];
|
||||
sum += + die_value[i][1];
|
||||
if (i < die_value.length -1) {addition += "+"; } else addition += "= ";
|
||||
|
||||
}
|
||||
|
||||
document.getElementById("numbers").innerHTML = addition + sum;
|
||||
return sum;
|
||||
}
|
||||
|
||||
function showMath(){
|
||||
|
||||
var numBlock = document.getElementById('numbers');
|
||||
console.log(numBlock.style.display)
|
||||
if (numBlock.style.display === "none") {
|
||||
numBlock.style.display = "block";
|
||||
} else {
|
||||
@ -43,6 +44,14 @@ function showMath(){
|
||||
|
||||
}
|
||||
|
||||
function inputCorrect(){
|
||||
answer = document.getElementById('answer').value;
|
||||
if (answer == sum) {alert('Nice job!'); shuffle_dice();}
|
||||
else if (answer > sum) alert('Sorry, try again, too high...');
|
||||
else if (answer < sum) alert('Sorry, try again, too low...');
|
||||
document.getElementById('answer').value = '';
|
||||
}
|
||||
|
||||
function die_gif() {
|
||||
for (i = 0, j = 1; i < die_value.length; j++, i++) {
|
||||
die_value[i][0] = "<img class='die' src='../dice/die" + (j) + ".gif' />";
|
||||
|
||||
@ -33,17 +33,27 @@
|
||||
<button type="button" onclick="die_gif()" name="button">Shufle Dice!</button>
|
||||
</div>
|
||||
|
||||
<div id="numberOfDiceSelection">
|
||||
<input onclick="changeNumberofDice()" type="radio" name="number" value="1">1
|
||||
<input onclick="changeNumberofDice()" checked="checked" type="radio" name="number" value="2">2
|
||||
<input onclick="changeNumberofDice()" type="radio" name="number" value="3">3
|
||||
<input onclick="changeNumberofDice()" type="radio" name="number" value="4">4
|
||||
<input onclick="changeNumberofDice()" type="radio" name="number" value="5">5
|
||||
<input onclick="changeNumberofDice()" type="radio" name="number" value="6">6
|
||||
<div class="numberOfDiceSelection">
|
||||
<span>1 <input onclick="changeNumberofDice()" type="radio" name="number" value="1"></span>
|
||||
<span>2 <input onclick="changeNumberofDice()" type="radio" name="number" value="2"></span>
|
||||
<span>3 <input onclick="changeNumberofDice()" type="radio" name="number" value="3"></span>
|
||||
</div>
|
||||
<div class="numberOfDiceSelection">
|
||||
<span>4 <input onclick="changeNumberofDice()" type="radio" name="number" value="4"></span>
|
||||
<span>5 <input onclick="changeNumberofDice()" type="radio" name="number" value="5"></span>
|
||||
<span>6 <input onclick="changeNumberofDice()" checked="checked" type="radio" name="number" value="6"></span>
|
||||
</div>
|
||||
|
||||
<br>
|
||||
<br>
|
||||
<div id="numbers"></div>
|
||||
|
||||
<form id="inputSum" >
|
||||
How much to the dice add up to?: <br>
|
||||
<input type="number" id="answer" name="inputSum"><br>
|
||||
<input type="button" onclick="inputCorrect()" value="Submit">
|
||||
</form>
|
||||
|
||||
<div id="numbers" style="display: none"></div>
|
||||
|
||||
<div class="wrapper">
|
||||
<button id="math" onclick="showMath()">
|
||||
@ -51,7 +61,7 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript" src="dice.js">
|
||||
<script defer type="text/javascript" src="dice.js">
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user