A JavaScript game of slots.

2017-05-06 05_27_37-Slots.png

Speaking of one-click JavaScript games, here’s my take on the classic slots game. It basically generates three small numbers at random, and if they all match, you win. Simple.

<!DOCTYPE html>
<html>
<head>
<title>Slots</title>
</head>
<body>
<table border="1">
<tr>
<td><p id="a">?</p></td>
<td><p id="b">?</p></td>
<td><p id="c">?</p></td>
</td>
</tr>
</table>
<td><p id="d">SPIN THE SLOTS</p></td>

<button onclick="myFunction()">Spin</button>

<script>
function myFunction()
{
var aa=Math.floor((Math.random()*2)+1);
var bb=Math.floor((Math.random()*2)+1);
var cc=Math.floor((Math.random()*2)+1);

if (aa==bb && bb==cc)
  {
document.getElementById("d").innerHTML="WIN";
}
else
{
document.getElementById("d").innerHTML="LOSE";
}

document.getElementById("a").innerHTML=aa;
document.getElementById("b").innerHTML=bb;
document.getElementById("c").innerHTML=cc;
}
</script>

</body>
</html>

In a future version I will make gold coins fall from your screen.

One-click sports.

I was recently browsing through my JavaScript library when I came across a series of amusing scripts centered around the idea of creating a game that can be played in just one click. For example, here’s One-click Football:

<!DOCTYPE html>
<html>
<head>
<title>One-click Football</title>
</head>
<body>

<p id="demo1">HOME:</p>
<p id="demo2">VISITORS:</p>

<button onclick="myFunction()">Start game!</button>

<script>
function myFunction()
{
document.getElementById("demo1").innerHTML='HOME: ' + Math.floor((Math.random()*50)+2);
document.getElementById("demo2").innerHTML='VISITORS: ' + Math.floor((Math.random()*50)+2);
}

</script>

</body>
</html>

When this script is run, you’ll see a “Start game” button that gives you the final score of the game in one click without you having to sit through the whole game, not to mention halftime. I also made a variation of this script called One-click Basketball that simply generates higher numbers for the final score.

I also came up with One-click Wrestling.

<!DOCTYPE html>
<html>
<head>
<title>One-click Wrestling</title>
</head>
<body>
<p id="demo">RED vs. BLUE</p>
<button onclick="myFunction()">Wrestle!</button>
<script>
function myFunction(x)
{
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="RED wrestler won.";
}
else
{
x.innerHTML="BLUE wrestler won.";
}
}
</script>
</body>
</html>

Either the Red or the Blue wrestler will win. Other variations of this script include One-click Chess, One-click Billiards and One-click Racing that simply tell you whether you won or lost.

I close with a script called One-click Politics:

<!DOCTYPE html>
<html>
<head>
<title>One-click Politics</title>
</head>
<body>
<p id="demo"></p>
<button onclick="myFunction()">Submit</button>

<script>
function myFunction(x)
{
var r=Math.random();
var x=document.getElementById("demo")
if (r>0.5)
{
x.innerHTML="Blame it on the Democrats.";
}
else
{
x.innerHTML="Blame it on the Republicans.";
}
}
</script>
</body>
</html>

The possibilities for one-click games like these are truly endless.

A number guessing game in Javascript.

One sure way to tell when you’re making progress in learning a new programming language is being able to create a simple number guessing game. Here’s my Javascript version. It generates a random number between 1 and 100 and tells you if your guesses are too high or too low. Simple.

<!DOCTYPE html>
<html>
<body>
Your guess? <input type=”number” name=”guess”><p>
<p id=”demo1″>Last guess: </p>
<p id=”demo2″></p>
<button onclick=”myFunction(guess)”>Submit</button>
<script>
var x=Math.floor((Math.random()*100)+1);
function myFunction(guess)
{
document.getElementById(“demo1”).innerHTML=’Last guess: ‘+guess.value;
if (guess.value==x)
{
document.getElementById(“demo2”).innerHTML=’You guessed it!’;
}
else if (guess.value<x)
{
document.getElementById(“demo2”).innerHTML=’Too low.’;
}
else
{
document.getElementById(“demo2”).innerHTML=’Too high.’;
}
}
</script>
</body>
</html>

I couldn’t resist modifying the script to make it look like you’re can guess the correct number on the first try. Try it on your friends and make them think they’re psychic. Better hope they’re still your friends afterwards.

<!DOCTYPE html>
<html>
<body>
Your guess? <input type=”number” name=”guess”><p>
<p id=”demo1″>Last guess: </p>
<p id=”demo2″></p>
<button onclick=”myFunction(guess)”>Submit</button>
<script>
function myFunction(guess)
{
document.getElementById(“demo1”).innerHTML=’Last guess: ‘ +guess.value;
document.getElementById(“demo2”).innerHTML=’You guessed it on the very first try! You must be a psychic!’;
}
</script>
</body>
</html>

Have much fun.

Breaks countdown timer.

I’ve been playing around with Javascript quite a bit lately and am steadily getting more familiar with its syntax and coding. I’ve been coming up with ideas for new scripts and have been having lots of fun coding them. Truly, this is the best way to learn.

Recently I was cleaning up my script that counts down to my job’s quitting time of 6pm when I came up with a very cool idea. Why not have the script count down to my breaks as well? A short time later I had just the script to do the trick.

<!DOCTYPE html>
<html>
<body>
<p id=”break1″>Morning Break:</p>
<p id=”lunch”>Lunch:</p>
<p id=”break2″>Afternoon Break:</p>
<p id=”outtahere”>Quitting Time:</p>
<button onclick=”myFunction()”>Count down!</button>

<script>
function myFunction()
{
var now = new Date();
var mhrs = 10-now.getHours();
var lhrs = 12-now.getHours();
var lmins = 15-now.getMinutes();
if (lmins < 0) { lmins += 60; }
var ahrs = 15-now.getHours();
var qhrs = 17-now.getHours();
if (mhrs < 0) { mhrs += 24; }
if (lhrs < 0) { lhrs += 24; }
if (ahrs < 0) { ahrs += 24; }
if (qhrs < 0) { qhrs += 24; }
var mins = 60-now.getMinutes();
document.getElementById(‘break1’).innerHTML=’Morning Break: ‘ + mhrs+’ hours, ‘+mins+’ minutes.’;
document.getElementById(‘lunch’).innerHTML=’Lunch: ‘ +lhrs+’ hours, ‘+lmins+’ minutes.’;
document.getElementById(‘break2’).innerHTML=’Afternoon Break: ‘ + ahrs+’ hours, ‘+mins+’ minutes.’;
document.getElementById(‘outtahere’).innerHTML=’Quitting Time: ‘ +qhrs+’ hours, ‘+mins+’ minutes.’;
}
</script>
</body>
</html>

At my job, my morning break is at 11:00am, my lunch break is at 1:15pm, my afternoon break is at 4:00pm and quitting time is 6pm. The script calculates the time remaining until each of those breaks when I click on the “Count Down” button. I didn’t want to have the script run continuously as I wanted to save it as a note in Simplenote, which supports Markdown text and HTML. The script works really well and helps make my job more tolerable as I approach those lifesaving breaks.

Javascript number divider.

I did some more experimenting with Javascript in hopes of being able to enter any number and have the script divide that number by 2. I wanted to have such a script handy for helping me calculate the time remaining until my lunch break or the end of my shift, whichever comes first. By dividing that remaining time by 2, I can calculate the halfway point towards my next break. For example, if there’s 90 minutes until my lunch break, I would divide 90 by 2 to get 45 minutes, so that if I work 45 minutes, I only have another 45 minutes to go before my break. That helps the day go by faster.

Unfortunately, the computer I use at work has Windows XP with Internet Explorer 8, so I’m unable to implement some of the newer features of Javascript. This following script won’t work on browsers newer than Internet Explorer 8 but it works well enough for me to use on the job.

<!DOCTYPE html>
<html>
<body>
<input type=”number” name=”x”><p>
<button onclick=”myFunction(x)”>Do It!</button>
<p id=”demo”></p>

<script>
function myFunction(x)
{
var demoP=document.getElementById(“demo”)
demoP.innerHTML=”= ” + x.value/2;
return y;
}
</script>

</body>
</html>

This script gives you a small form box for entering a number and when you click “Do It!”, it divides that number by 2 and displays the result.

By changing the mathematical operation in the “demoP.innerHTML=”= ” + x.value/2;” line, I am able to use this script as a solid template for creating other scripts that do simple calculations such as converting minutes to hours.

I’m not ashamed to admit I’m still a novice when it comes to Javascript. The secret is taking advantage of online tutorials such as the ones at W3Schools and doing some fearless experimenting. When creating simple scripts like the one above, the worst that can happen is the script not running at all.

Mental math booster.

One of the books I’m reading on my Kindle is Secrets of Mental Math: The Mathemagician’s Guide to Lightning Calculation and Amazing Math Tricks by renowned mathemagician Arthur Benjamin. The techniques he uses to do his astonishing mental calculations are amazingly simple and need only a little practice before you too can do math without a calculator. He reveals his secrets in this very fun book.

The book does include exercises to help me practice what I learned but after finishing them I was hungry for more numbers to crunch, so I decided to see what I could create using Javascript. I came up with the following script that serves the purpose perfectly.

<body>
<p id=”num1″>0</p>
<p id=”num2″>0</p>
<p id=”ans1″>Sum:</p>
<p id=”ans2″>Difference:</p>

<button onclick=”myFunction()”>Get Numbers</button>
<button onclick=”myFunction2()”>Calculate</button>

<script>
function myFunction()
{
var x=Math.floor(Math.random()*999);
var y=Math.floor(Math.random()*999);
document.getElementById(“num1”).innerHTML=x;
document.getElementById(“num2”).innerHTML=y;
document.getElementById(“ans1”).innerHTML=”Sum: “+ 0;
document.getElementById(“ans2”).innerHTML=”Difference: “+0;
a=x+y;
b=x-y;
}

function myFunction2(x,y)
{
document.getElementById(“ans1”).innerHTML=”Sum: “+ a;
document.getElementById(“ans2”).innerHTML=”Difference: “+b;
return a,b;
}
</script>
</body>

Running this script yields the following output:

2013-12-14 19_58_18-Mental Math Booster

When you click on “Get Numbers” you will see two randomly generated numbers for you to add and subtract in your head. When you think you have the answers figured out, click on “Calculate” to display the calculated sum and difference of the two numbers to see if you were right.

When I tested the script, I got the following two numbers to play with.

844
293

To mentally add these numbers, just break the process down to simpler steps. Instead of adding 293 as a whole, start by adding 200 to 844, which gives us 1044. Next we add 90 to get 1134 and finally we add 3 to get the sum of 1137.

Subtracting those two numbers is just as easy. Just round up 293 to 300 and subtract that from 844, which gives us 544. Then add the 7 you took away when you rounded up and you get 551, which is the answer.

This is really making math fun again. I still don’t know why it’s not taught like this at school.

Javascript countdown to 6pm.

My working hours were recently changed to a more accommodating  schedule in which I now leave at 6pm as opposed to 11pm before. As a result I modified my Javascript countdown script to reflect my new departure time and while I was at it I changed the format to appear as a clock showing the hours and minutes remaining until 6pm. While I was at it I worked in a border around the numbers to make it look nice and pretty, like this:

1020

That means as I type this post, there are 10 hours and 20 minutes until 6pm.

Here’s the modified script.

<html>
<head>
<title>Countdown Clock</title>
</head>
<body>
<script type=”text/javascript”>
// From: http://www.webdeveloper.com/forum/showthread.php?t=215504
// Modified for: http://www.webdeveloper.com/forum/showthread.php?t=220174
var definedTime = new Date(’23:00′); // military time to countdown TO
function ShowTimes() {
var now = new Date();
var hrs = 17-now.getHours();
if (hrs < 0) { hrs += 24; }
var mins = 60-now.getMinutes();
var secs = 60-now.getSeconds();
var str = ”;
str += ‘<center><table border=”5″><tr><td><p style=”font-size:xx-large;”>’+hrs+’:’+mins+'</p></td></tr></table></center>’;
document.getElementById(‘countdownToMidnight’).innerHTML = str;
}

var _cntDown;
function StopTimes() { clearInterval(_cntDown); }
</script>
</head>
<body onload=”_cntDown=setInterval(‘ShowTimes()’,1000)”>
<div id=”countdownToMidnight”></div>
</body>
</html>

If you want the countdown clock to count down to 5pm instead, you would change the 17 (highlighted in red) to 16.

Counting down to 11pm using Javascript.

Once again I found myself pondering another use for Javascript to help make my work more easier and to address what is perhaps my biggest concern during my shift. How much longer before I can go home?

I have seen tons of sample scripts that count down to a specific date, which is nice but I wanted to create a script that counts down to a specific time instead. In my case I wanted the script to count down to 11pm, which marks the end of my shift. I also wanted to be able to run this same script each day without having to change anything in the code, as I noticed in the date countdown scripts I saw.

So. Off I went to find the script. After some searching and sweating I came across this discussion forum in which a fellow Javascript novice needed some help creating a countdown script similar to what I was looking for. The moderator responded by posting a countdown script, one that I tried out and liked well enough for me to experiment with to get it to do my bidding.

Here’s my variation on the forum moderator’s script which counts down to 11pm:

<html>
<head>
<title>End of Shift Countdown</title>
</head>
<body>
<script type=”text/javascript”>
// From: http://www.webdeveloper.com/forum/showthread.php?t=215504
// Modified for: http://www.webdeveloper.com/forum/showthread.php?t=220174
var definedTime = new Date(’23:00′); // military time to countdown TO
function ShowTimes() {
var now = new Date();
var hrs = 22-now.getHours();
if (hrs < 0) { hrs += 24; }
var mins = 60-now.getMinutes();
var secs = 60-now.getSeconds();
var str = ”;
str += ‘<center><font size=”7″><br>’+hrs+’ hours, ‘+mins+’ minutes to go</font></center>’;
document.getElementById(‘countdownToMidnight’).innerHTML = str;
}

var _cntDown;
function StopTimes() { clearInterval(_cntDown); }
</script>
</head>
<body onload=”_cntDown=setInterval(‘ShowTimes()’,1000)”>
<div id=”countdownToMidnight”></div>
</body>
</html>

The biggest change I made to the script was modifying the “var hrs” line to subtract 22 from the getHours() variable. I cleaned up the output and did away with displaying the seconds as all I really wanted to do was just count down the hours and minutes to 11pm.

I still consider myself a total novice when it comes to Javascript but it’s nice to know the web is full of sample scripts to help me along.

Specific word counter for Javascript.

At my job where I do Internet tech support, I use Notepad to keep a log of the day’s calls. The entries that fill this log were generated by a database system that lets me pull up the customer’s account so I can document what happened during the call. These entries always start with the word “Agent” so by counting the number of times that word appears in my call notes, I can tally up how many calls I get.

One way to do the word count was loading Microsoft Word, pasting the call notes and then executing the Find command. Word would then tell me how many instances of the word “Agent” it found, but the process of loading such a large program like Word and navigating my way to the Find command seems a bit time-consuming. Surely there must be an easier, faster way to do this.

Then I found a web site with a handy word frequency counter that lists the words and the number of times they appear in the pasted text. No offense to WriteWords but it doesn’t feel right transmitting call notes full of customer phone numbers across the Internet to an unsecured web site just to find out how many calls I got.

I gave some thought to creating a simple HTML document using Javascript to count the number of occurences of the word “Agent” but didn’t know how to go about it since I am a total novice at Javascript. A search on the almighty Google found tons of scripts that count the total number of words in a block of text but I had a harder time finding a script to just count the number of instances of a single word.

Then I found this script which has the interface I’m looking for. I want to be able to paste my call notes into a text field and click a Submit button and have the script return the grand total and thought this was a good script to use.

I studied the script closely and took notice of the line that says:

words = str.split(” “);

I may not be familiar with Javascript but I am familiar with how programming languages work with strings, and no doubt this is a command to split the string into separate substrings wherever there’s a space between them. I got an idea and added the word “Agent”, thus:

words = str.split(“Agent”);

And it works. I paste my call notes in the input box, click the button and the script works its magic to give me the number of calls I got that day. I then made some cosmetic changes to the script to customize the text accordingly.

Here’s my modified script:

<HTML>
<HEAD>
<TITLE>Call Counter</TITLE>
<HEAD>
<SCRIPT>
function countWords(str){
var count = 0;
words = str.split(“Agent”);
for (i=0 ; i < words.length ; i++){
// inner loop — do the count
if (words[i] != “”)
count += 1;
}

document.theForm.results.value =
“You got ” +
count +
” calls.”;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name=”theForm”>
Paste your call notes here.<p>
<TEXTAREA name=inStr rows=5 cols=90>
</TEXTAREA>
<p>
<INPUT type=button value=”Count Calls”

onClick=”countWords(document.theForm.inStr.value)”;>
<p>
<TEXTAREA name=results rows=1 cols=20>
</TEXTAREA>
</FORM>
</BODY>
</HTML>

Another dilemma solved by JavaScript.

Thanks to Java2S for posting the tutorial.