Skip to content

B12S01-dewi-blackjack #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
smdewi wants to merge 19 commits into
base: main
Choose a base branch
from
Open

B12S01-dewi-blackjack #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
c14cf59
Add pseudo codes
smdewi Dec 20, 2021
968a3f4
Change background colors and add buttons
smdewi Dec 20, 2021
2b97551
Test if added buttons are working
smdewi Dec 20, 2021
b954aff
Create helper function to make a deck of cards
smdewi Dec 20, 2021
1c7c321
Changed J Q K to 10 and Ace to 11
smdewi Dec 20, 2021
5b5f6f8
Add helper function to shuffle the cards
smdewi Dec 20, 2021
5cb0fe4
Deal 2 cards to player and dealer, store in array
smdewi Dec 20, 2021
7d6f423
When hit is pressed, add a new card to player
smdewi Dec 20, 2021
6e0019b
Change color and alignment in HTML
smdewi Dec 20, 2021
74e5f54
Add hit and stand function, and check for bust
smdewi Dec 20, 2021
a2206fc
change font color and alignment
smdewi Dec 21, 2021
0c08372
add helper function to show player's hand
smdewi Dec 21, 2021
1b880cb
add helper fxn to show score
smdewi Dec 21, 2021
1af62ed
add output msg for when player hit or bust
smdewi Dec 21, 2021
b97d3da
Add lost, win, reset msg output
smdewi Dec 21, 2021
bd48c75
Fix showScore function
smdewi Dec 21, 2021
5396e6d
add helper fxn to count ace as 1
smdewi Dec 21, 2021
125fe5d
Add rule ace can be 1 or 11
smdewi Dec 21, 2021
c29ffa6
change deck name
smdewi Dec 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 48 additions & 21 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,27 +19,22 @@
font-family: sans-serif;
margin-left: 30px;
margin-right: 30px;
background-color: rgb(32, 97, 81);
text-align: center;
}

#header {
text-align: center;
}

#container {
background-color: pink;
background-color: rgb(127, 192, 181);
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
}

input {
font-size: 21px;
line-height: 33px;
margin: 0 0 23px 0;
padding: 0 9px;
width: 100%;
}


button {
font-size: 21px;
line-height: 33px;
Expand All @@ -48,7 +43,7 @@
}

#output-div {
background-color: lightgrey;
background-color: rgb(100, 165, 149);
margin: 20px auto;
padding: 20px;
width: 100%;
Expand All @@ -59,17 +54,21 @@
<!-- The <body> element defines the document's body, and is a container for all the visible contents that will be rendered by the browser. -->
<body>
<!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
<h1 id="header">Basics! 🚀</h1>
<h1 id="header" style="color: white">Basics! Blackjack Game 2️⃣1️⃣🚀</h1>
<br />
<p style="color:white"> <strong> Rules of the game:</strong></p>
<p style="color:white">Dealer has to hit if their hand is less than 17</p>
<p style="color:white">Ace can be either 1 or 11 for player</p>
<!-- The <div> tag defines a division or a section in an HTML document, and is commonly use as a "container" for nested HTML elements. -->
<div id="container">
<!-- The <p> tag defines a paragraph element. -->
<p>Input:</p>
<!-- The self-closing <input /> tag represents a field for a user to enter input. -->
<input id="input-field" />

<!-- The self-closing <br /> tag represents a line break - a line's worth of spacing before dispalying the next element. -->
<br />
<!-- The <button> tag represents.. you guessed it! a button. -->
<button id="submit-button">Submit</button>
<button id="start-button">Start</button>
<button id="hit-button">Hit</button>
<button id="stand-button">Stand</butoon>
<button id="reset-button">Reset</button>
<p>Output:</p>
<div id="output-div"></div>
</div>
Expand All @@ -80,22 +79,50 @@ <h1 id="header">Basics! 🚀</h1>
<!-- Define button click functionality -->
<script>
// Declare and define a variable that represents the Submit Button
var button = document.querySelector("#submit-button");
var startButton = document.querySelector("#start-button");
// When the submit button is clicked, access the text entered by the user in the input field
// And pass it as an input parameter to the main function as defined in script.js
button.addEventListener("click", function () {
startButton.addEventListener("click", function () {
// Set result to input value
var input = document.querySelector("#input-field");
//var input = document.querySelector("#input-field");
// Store the output of main() in a new variable
var result = main(input.value);
var result = main("start");

// Display result in output element
var output = document.querySelector("#output-div");
output.innerHTML = result;

// Reset input value
input.value = "";
// input.value = "";
});

//Declare and define a variable that represents the Hit Button
//When the Hit button is clicked, input is assumed to be "hit"
var hitButton = document.querySelector("#hit-button");
hitButton.addEventListener("click", function(){
var result = main("hit");
var output = document.querySelector("#output-div");
output.innerHTML = result;
})

//Declare and define a variable that represents the Stand Button
//When the stand button is clicked, input is assumed to be "stand"
var standButton = document.querySelector("#stand-button");
standButton.addEventListener("click", function(){
var result = main("stand");
var output = document.querySelector("#output-div");
output.innerHTML = result;
})

//Declare and define a variable that represents the Reset Button
//When the reset button is clicked, input is assumed to be "reset"
var resetButton = document.querySelector("#reset-button");
resetButton.addEventListener("click", function(){
var result = main("reset");
var output = document.querySelector("#output-div");
output.innerHTML = result;
})

</script>
</body>
</html>
Loading