<!doctype html>
<html>
<head>
<title>Simon Says - Using Javascript DOM document.querySelector - RJM Programming - February, 2019</title>
<style>
td { width:9%;
height:5vh; }
button { background-color: pink;
font-size: 20px;
border: 3px inset red;
padding 3px 3px 3px 3px;
font-family: "Comic Sans MS", cursive, sans-serif;
background: #427AA8; // thanks to https://stackoverflow.com/questions/11373841/make-a-3d-button-with-rounded-edge below
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzU5YTNlMCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM0MjdhYTgiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #59A3E0 1%, #427AA8 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#59A3E0), color-stop(100%,#427AA8));
background: -webkit-linear-gradient(top, #59A3E0 1%,#427AA8 100%);
background: -o-linear-gradient(top, #59A3E0 1%,#427AA8 100%);
background: -ms-linear-gradient(top, #59A3E0 1%,#427AA8 100%);
background: linear-gradient(to bottom, #59A3E0 1%,#427AA8 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#59A3E0', endColorstr='#427AA8',GradientType=0 );
text-shadow: 1px 1px 0 rgba(0,0,0,0.25);
box-shadow: 0 1px 0 rgba(255,255,255, 0.3), inset 0 1px 0 rgba(255,255,255, 0.3);
}
h1 { font-family: "Comic Sans MS", cursive, sans-serif; }
</style>
<script type='text/javascript'>
var numtd=0, choice=0, lastchoice=-1, tds=[], okay=false;
// Thanks to https://playtivities.com/30-funniest-simon-says-ideas/
var ssa=["Simon says draw with your feet.",
"Simon says lift your feet up as high as you can.",
"Simon says play air guitar.",
"Simon says roll over.",
"Simon says waddle like a penguin.",
"Simon says to dance the chacha!",
"Simon says rub your tummy and pat your head.",
"Simon says to be a beautiful butterfly princess!",
"Simon says crawl like a baby.",
"Simon says pretend to climb a ladder.",
"Simon says bite your lip!",
"Simon says cry like a baby.",
"Simon says be scissors.",
"Simon says start singing.",
"Simon says walk on your knees.",
"Simon says act like a monkey.",
"Simon says tickle your friend.",
"Simon says yawn.",
"Simon says hide your head in your shirt.",
"Simon says stand on 1 foot.",
"Simon says wink with your left eye.",
"Simon says smell your feet.",
"Simon says hug yourself.",
"Simon says walk backwards.",
"Simon says say something in foreign language.",
"Simon says take off one piece of clothing.",
"Simon says kiss your tummy.",
"Simon says tickle your feet.",
"Simon says wiggle your nose.",
"Simon says do whatever your friend does."];
function pickone() {
if (lastchoice >= 0) { if (!okay) { tds[lastchoice].style.backgroundColor='yellow'; } else { tds[lastchoice].style.backgroundColor='lightgreen'; } tds[lastchoice].innerHTML=''; }
choice=Math.floor(Math.random() * numtd);
lastchoice=choice;
choice=Math.floor(Math.random() * ssa.length);
tds[lastchoice].innerHTML='<button style=visibility:visible; title="' + "okay=confirm('" + ssa[choice] + " Did you succeed?'); pickone();" + '" class="classy">' + ssa[choice] + '</button>';
document.querySelector('.classy').addEventListener('click', function(evt) {
if (evt.target.tagName.toLowerCase() == 'button') {
eval(evt.target.title);
}
}, false);
}
function onl() {
tds=document.getElementsByTagName('td');
numtd=tds.length;
pickone();
}
</script>
</head>
<body onload='onl();'>
<h1>Simon Says</h1>
<h3>Using Javascript DOM document.querySelector to try to turn the table all green (click button for next)</h3>
<h4>RJM Programming - February, 2019 - Thanks to <a target=_blank title='30 Funniest Simon Says Ideas' href='https://playtivities.com/30-funniest-simon-says-ideas/'>30 Funniest Simon Says Ideas</a></h4>
<table style='width:100%;background-color:#f0f0f0;' border=5>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td><td></td></tr>
</table>
</body>
</html>