In my last post, I declared that I was going to start learning Javascript and would attempt to make a simple web app that shows a randomized 4 digit text when a button is clicked. I said I was going to do it by 6 Feb 2022. Today is 6 Feb 2022.
This is the result of what I achieved. I am leaving these notes so that you can try them out yourself. It also serves as my notes for posterity's sake.
Preparation
You will need a text editor that can be used to edit codes. I used Sublime Text.
What is more important is to understand that the html file and Javascript folder should be in the same parent folder. I named the main html file named as index.html, and the main Javascript file named as index.js is saved in a sub-folder called 'js'.
End Product
A button that invites users to click to change the number below into a random one.
This is the result after a click.
The number displayed randomizes at a subsequent click.
The HTML Script
This is the complete html script.
The part below points to where the Javascript script resides, i.e. in the js folder, and named as index.js.
< script src="js/index.js">
Within the body, there is a button identified by id "btn1", which has the onclick capability. This basically creates the "Randomize" button. It activates the showRandom function when clicked.
This line of code carries out what is described above.
< button id="btn1" onclick="showRandom()">Randomize!
The line below defines a text placeholder which I named as placeHolder which displays 0000 at the start. The style bit is a CSS that merely asks it to display.
< p id="placeHolder" style="display:block"> 0000
The Javascript Codes
The Javascript code is shown below:
First, we create a function called getRndInteger that can be used to generate a random number between two numbers when implemented. I found this code from https://www.w3schools.com/js/js_random.asp.
function getRndInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1) ) + min;
}
Next, we require a main showRandom function so that the button can activate something.
function showRandom(){
randomNum = getRndInteger(1000,9999);
document.getElementById('placeHolder').innerHTML = randomNum;
}
randomNum is a variable within this function that is created based on getRndInteger with parameters 1000 and 9999.
To me, the most scary part is this bit: document.getElementById('placeHolder').innerHTML
Complete Greek to me.
But I figured it does something to the placeHolder after reaching it by document.getElementById. Exactly what is done is that it changes the text where 0000 is, by reaching it through innerHTML. Equating it to randomNumber returns the 4 digit random numbers.
Done!
That's all. These are the two files needed. To execute it, just open up index.html and test the button. You should be able to get what I did.
Challenge Declared
Let's see if I can make a more complex app that involves two people clicking buttons and keeping scores along the way. Let 13 Feb 2022 be the deadline for me to complete that.
If you like to support me, please upvote this and repost this.
I also welcome comments.
Much of this is a result of learning from this tutorial by **
blondiebytes**.