Blackjack Game

Adeyemoade — Wed, 21 Jun 2023 14:46:13 +0000

How to create a blackjack game

To create a blackjack game with html css and javaScript:

First of all create a folder which you should name blackjack so as to be easy for you to find. Create three files in it save each as index.html, style.css and index.js respectively and open the files with your text editor.

On the html file, if you are using vscode just click on the exclamation mark and press enter, vscode will load the basic html tags for you which looks like this.

You're good to go now change the title from document to Blackjack and link the html file to the css file then go to the body tag and create one h1 tag, in the tag type Blackjack below the h1 tag add three p tags, give the first p tag and id of message-el the second p tag an id of cards-el and the third p tag an id of sum-el. The text in the first p tag is Want to play a round, the second tag Cards: and the third tag Sum:.
Now add two button tags which will be the Start Game and New Game button give the Start Game an onclick of startGame() and the New Game an onclick of newGame(). Lastly add two more tags a p tag and the script tag which will link you to the javaScript file, give the p tag an id of player-el and the script tag src of index.js. Your html file should look like this
On the css file
You're only styling four tags. The whole body, the h1 tag , button-el, and the button tag.

Start by styling the body tag first
Set the font to your desired font, the background image you like to use, set the background-size to cover, background-position to center and background-repeat to no-repeat. text-align to center this will make everything in the blackjack game to be at the center of the page, color and font-weight to white and bold respectively.
The h1 tag
The only thing to do here is to change the color. You can use any color you want but I will be using goldenrod
message-el
Set the font style and font size to italic and 22px respectively
The button tag
Give it a background color, width of 150px, border of 0px solid, padding top and bottom to 5px each, font weight to bold, border-radius to 2px, margin-bottom to 4px. Your css file should look like the codes in the image below.

Lastly on the index.js file.

The first step is to use the let key. Set the card to non [] for now, the sum to zero, let hasBlackJack and isAlive to false and true respectively, message to "" since there is no message yet, player name and chips to whalez and 150. Then let messageEl = document.getElementById("message-el"), let sumEl = document.querySelector("#sum-el"), let cardEl = document.getElementById("card-el"), let playerEl = document.getElementById("player-el"), playerEl.textContent = player.name + ": $" + player.chips. Note this are the default settings that is you're telling javaScript to carry on this operation before either of the buttons were clicked

Before you give start game and and new game function you will need random numbers to make the blackjack game more fun to play. To get random number from 1 to 13 on javaScript use Math.floor( Math.random() * 13) + 1
Now create a get random card function, in it let random = Math.floor( Math.random() * 13) + 1, use the if key so that if random number is greater than 10 it should return 10. Then use the else if key so as to return 11 when random number is equal to 1 use else key to return random number if random number is not greater than 10 and not equal to 11.
Next Thing to do is to have another function which is render game.

This will tell javaScript what it should do when sum is less than 20 or equal to 20, what it should do when sum is equal to 21 and what it should do when sum is more than 21.

Start Game function
New Game function

The link to Blackjack Game
https://adeyemoade.github.io/Black-jack-game/

A simple Subway counter-app

Adeyemoade — Mon, 05 Jun 2023 11:22:32 +0000

Hi there !
In this article I will be explaining how to build a simple subway counter app, the purpose and it ability.

The subway counter-app is a simple counter app that can easily be used to take records of the numbers of people entering a subway station daily. Note it can also be used in other places depending on what we need it to do for us.

I will be dropping the link to the website after explaining each steps to build the counter app at the end of this article

This is what we will be building below

The steps to take when building the simple counter app from scratch

The first step is to create a folder on your desktop page and name it subway counter app, in the folder you should copy the image you wants to use as the subway counter app background image. Then go to your text editor and open the folder you created, then save three files in it. The three files should be the index.html file, style.css file and the index.js file. The index.html file should contain your html file, the style.css file is where your css styling should be and index.js file should be your javascript file.

On the html file

On the html file the first thing to do is to run the html code. if you are using vscode as your text editor it will be very easy for you just click on the exclamation mark on your desktop and press enter, Vscode will load the html code for you.
It should look like this

Since the html page is now ready you start coding by linking your css file to the html file first by writing this line of code above the title tag, then change the title from document to subway counter-app. Then proceeded to the body element and open an h1 tag, inside of it you should write People who entered in it and close the tag. Move on, below the h1 tag open another tag which is the h2 tag and close it inside the tag put the figure 0 in it then give the tag an id of count-el.Then open two button tags which you should named INCREMENT and SAVE, give the increment button an id of increment-btn and an onclick of increment [INCREMENT] and the save button an id of save-btn and an onclick of save [SAVE ], below the buttons open a p tag and give it an id of save-el and name it Previous entries:.

Finally below the p tag open a script tag and give it an src index.js [], with this you are done with the html page.
Your html file should look like this

The next thing is to style your counter app
In the css file the first thing you should do is to set the margin and padding to zero so as to erase the browser default settings. Then start by styling the body, set the background-image to the image you already saved in the folder, then set the background-size, background-position and background-repeat to cover, center and to no-repeat respectively, the height to 100vh, text-align and color to center and white respectively. With this you are done with the background styling, proceeded to style the h1 and h2 tags, then the button tag and lastly each id you give the buttons.

Your css file should look like this

The html and css of the subway counter-app are now perfect but not responsive and functioning, to make it function you have to go to the idex.js file to breathe life into the subway counter-app.

Remember you have already link the html fie to the javaScript so anything you are doing on the javaScript file will affect both the html file and css file.

First thing you should do is to change the count-el to countEl in the javaScript file using the let code and document.getElementById [ let countEl = document.getElementById ("count-el") ] code because javaScript wont allow hyphen that is why you have to change the count-el to countEl in the javaScript file. Where do you get the count-el from? remember in the html page you gave the h2 tag an id of count-el that is where you got it from and on javaScript we cant use hyphen that is why we have to change it to countEl. Why do you need the id count-el on the javaScript file? you need it because the h2 tag has to change from 0 as the increment button is being clicked. Below it set count to 0 [ let count = 0 ], then repeat what you did to the id count-el to save-el [ let saveEl = document.getElementById("save-el") ].

Now the increment button: give it a function [ function increment() ] then set the count to increase by one anytime the button is being clicked [ count += 1 ] but still before the zero in the h2 tag can increase I had to change the count to countEl.textContent [ countEl.textContent = count ].This will make the h2 tag to increase from zero whenever the increment button is being clicked.
Finally the save button: Give it a function [ function save() ], then set countSave to count + " - " [ let countsave = count + " - " ] then set the id save-el to be the value of countsave [ saveEl.textContent += countsave ], change the countEl and count to zero, so that anytime the increment button is being clicked after the save button the count changes back to zero [countEl.textContent = 0 count = 0 ].

Your javascript file should look like this

These are the steps to take to build a simple subway counter-app.

https://adeyemoade.github.io/Subway-counter-app/

DEV Community: Adeyemoade

Blackjack Game

How to create a blackjack game

A simple Subway counter-app