chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

inporve rollDice and added dynamic menu items - js

Browse Source
This commit is contained in:
chris 2022-12-12 21:59:59 -05:00
parent 5f57db6c15
commit 9268c246d1
5 changed files with 120 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
menu/menu.js
View File

@ -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.getElementById('navContainer').innerHTML = navString;
document.addEventListener('DOMContentLoaded', () => { document.addEventListener('DOMContentLoaded', () => {

36
menu/test.html Normal file
View 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>

22
rollDice/dice.css
View File

@ -28,18 +28,21 @@ body{
padding: 2rem; padding: 2rem;
} }
#numberOfDiceSelection{ .numberOfDiceSelection{
padding-top: 5%; /* padding-top: 5%; */
padding-right: 5%; /* padding-right: 2%; */
width:100%; /* width:100%; */
/* margin: auto; */
margin-top: 2%;
display: flex; display: flex;
justify-content: center; flex-direction: row;
font-size: 24px; justify-content: space-evenly;
font-size: 2rem;
color: #fffb96; color: #fffb96;
} }
input[type=radio] { input[type=radio] {
border: 0px; border: 0px;
width: 100%; /* width: 90%; */
height: 2em; height: 2em;
} }
.die{ .die{
@ -53,6 +56,11 @@ height:7.75em;
color: white;; color: white;;
} }
#inputSum{
text-align: center;
margin: auto;
}
.wrapper{ .wrapper{
position:fixed; position:fixed;
right:0; right:0;

19
rollDice/dice.js
View File

@ -1,6 +1,6 @@
let numberOfDice = 2; let numberOfDice = 6;
let die_value = []; let die_value = [];
let sum = 0;
function newDiceNumber() { function newDiceNumber() {
die_value = []; die_value = [];
for (i = 1; i < 7; i++) document.getElementById("die" + i).innerHTML = ""; for (i = 1; i < 7; i++) document.getElementById("die" + i).innerHTML = "";
@ -17,24 +17,25 @@ function newDiceNumber() {
function shuffle_dice() { function shuffle_dice() {
document.getElementById("math").style.display = "block" document.getElementById("math").style.display = "block"
let addition = ""; let addition = "";
let sum = 0; sum = 0;
for (i = 0, j = 1; i < die_value.length; i++, j++) { for (i = 0, j = 1; i < die_value.length; i++, j++) {
var rand = Math.floor(Math.random() * 6) + 1; var rand = Math.floor(Math.random() * 6) + 1;
die_value[i][0] = "<img class='die' src='../dice/die" + rand + ".png' />" die_value[i][0] = "<img class='die' src='../dice/die" + rand + ".png' />"
die_value[i][1] = rand; die_value[i][1] = rand;
document.getElementById("die" + j).innerHTML = die_value[i][0]; document.getElementById("die" + j).innerHTML = die_value[i][0];
addition += ` ${die_value[i][1]}` + " "; 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 += "= "; if (i < die_value.length -1) {addition += "+"; } else addition += "= ";
} }
document.getElementById("numbers").innerHTML = addition + sum; document.getElementById("numbers").innerHTML = addition + sum;
return sum;
} }
function showMath(){ function showMath(){
var numBlock = document.getElementById('numbers'); var numBlock = document.getElementById('numbers');
console.log(numBlock.style.display)
if (numBlock.style.display === "none") { if (numBlock.style.display === "none") {
    numBlock.style.display = "block";     numBlock.style.display = "block";
  } else {   } 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() { function die_gif() {
for (i = 0, j = 1; i < die_value.length; j++, i++) { for (i = 0, j = 1; i < die_value.length; j++, i++) {
die_value[i][0] = "<img class='die' src='../dice/die" + (j) + ".gif' />"; die_value[i][0] = "<img class='die' src='../dice/die" + (j) + ".gif' />";

28
rollDice/index.html
View File

@ -33,17 +33,27 @@
<button type="button" onclick="die_gif()" name="button">Shufle Dice!</button> <button type="button" onclick="die_gif()" name="button">Shufle Dice!</button>
</div> </div>
<div id="numberOfDiceSelection"> <div class="numberOfDiceSelection">
<input onclick="changeNumberofDice()" type="radio" name="number" value="1">1 <span>1 <input onclick="changeNumberofDice()" type="radio" name="number" value="1"></span>
<input onclick="changeNumberofDice()" checked="checked" type="radio" name="number" value="2">2 <span>2 <input onclick="changeNumberofDice()" type="radio" name="number" value="2"></span>
<input onclick="changeNumberofDice()" type="radio" name="number" value="3">3 <span>3 <input onclick="changeNumberofDice()" type="radio" name="number" value="3"></span>
<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> </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>
<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"> <div class="wrapper">
<button id="math" onclick="showMath()"> <button id="math" onclick="showMath()">
@ -51,7 +61,7 @@
</button> </button>
</div> </div>
<script type="text/javascript" src="dice.js"> <script defer type="text/javascript" src="dice.js">
</script> </script>