Skip to content

SJ 27-3 #494

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
sjcpop wants to merge 3 commits into
base: main
Choose a base branch
from
Open

SJ 27-3 #494

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
ea9d310
script.js commit
sjcpop Feb 18, 2024
50de13d
dom.js commit
sjcpop Feb 18, 2024
949373f
index.html commit
sjcpop Feb 18, 2024
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
48 changes: 48 additions & 0 deletions dom.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
var startGame = document.querySelector("#start-game");
startGame.addEventListener("click", function () {
// Set result to input value
var input = document.querySelector("#input-field");
// Store the output of main() in a new variable
var result = main(input.value);

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

// Reset input value
input.value = "";
});
var submit = document.querySelector("#submit-button");
submit.addEventListener("click", function () {
// Set result to input value
var input = document.querySelector("#input-field");
// Store the output of main() in a new variable
var result = main(input.value);

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

// Reset input value
input.value = "";
});
var drawButton = document.querySelector("#draw");
drawButton.addEventListener("click", function () {
// Call the dealSingleCard function for the current player's hand
var result = dealSingleCard(playerProfile[currPlayer].cards);

// Update the output element with the result of dealing the card
var outputDiv = document.querySelector("#output-div");
outputDiv.innerHTML = result;
});

var standButton = document.querySelector("#stand");
// Move the code to check playerCardValue and update the Stand button's display inside a function
standButton.addEventListener("click", function () {
// Call the function to end the current player's turn
var output = endCurrPlayerTurn();

// Update the UI with the output message
var outputDiv = document.querySelector("#output-div");
outputDiv.innerHTML = output;
});
164 changes: 56 additions & 108 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,155 +1,103 @@

<!-- All HTML files begin with the following line: -->
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Page setup configurations -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />

<!-- Favicon configuration -->
<link rel="apple-touch-icon" sizes="180x180" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/apple-touch-icon.png?v=2">
<link rel="icon" type="image/png" sizes="32x32" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-32x32.png?v=2">
<link rel="icon" type="image/png" sizes="16x16" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon-16x16.png?v=2">
<link rel="manifest" href="/site.webmanifest?v=2">
<link rel="mask-icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/safari-pinned-tab.svg?v=2" color="#e73c3e">
<link rel="shortcut icon" href="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/all/favicons/favicon.ico?v=2">
<meta name="apple-mobile-web-app-title" content="Rocket Academy">
<meta name="application-name" content="Rocket Academy">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="theme-color" content="#ffffff">

<!-- sharing configuration -->
<!-- Primary Meta Tags -->
<title>Blackjack - Basics - Rocket Academy</title>
<meta name="title" content="YOURNAME's BlackJack Game!">
<meta name="description" content="A fun card game I made myself! 😄💪🌈">

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
<meta property="og:title" content="YOURNAME's BlackJack Game!">
<meta property="og:description" content="A fun card game I made myself! 😄💪🌈">
<meta property="og:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
<!-- This indicates that the rest of the lines that follow are to be interpreted as HTML. It tells the browser about what document type to expect. -->

<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://rocketacademy.github.io/basics-blackjack/index.html">
<meta name="twitter:title" content="YOURNAME's BlackJack Game!">
<meta name="twitter:description" content="A fun card game I made myself! 😄💪🌈">
<meta name="twitter:image" content="https://ra-web-files.s3.ap-southeast-1.amazonaws.com/basics/basics-blackjack-share-small.jpeg">
<meta name="twitter:site" content="@rocketacademyco">
<meta name="twitter:creator" content="@rocketacademyco">

<!-- fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans">

<!-- CSS -->
<!-- All text enclosed in angled brackets are known as HTML element tags. There are usually, but not always, starting and closing element "tags", each representing a HTML element.
The <html> element is known as the root element of a HTML page. All other elements are encased within it. -->
<html>
<!-- The <head> element contains meta information about the HTML page, information that is not rendered or displayed by the browser -->
<head>
<!-- The <title> element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) and is the default name given to a bookmark of a webpage. -->
<title>Blackjack</title>
<!-- The <style> element contains information relating to the layout and style of the webpage. The syntax within a <style> tag is referred to as CSS - Cascading Style Sheets. -->
<style>
* {
box-sizing: border-box;
}

body {
font-family: 'Open Sans', sans-serif;
font-family: Verdana, Geneva, Tahoma, sans-serif;
margin-left: 30px;
margin-right: 30px;
background-color:white;
color: black; /* sets the font color */
background-image: url(""); /* The image used */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-size: cover; /* Resize the background image to cover the entire container */
background-image: url(https://images.sigma.world/blackjack-card-counting-scaled-1.jpg);
}

#output-div img{
display:block;
max-width:100%;
max-height:200px;
}
.header {
#header {
text-align: center;
font-size: 1.1rem;
margin-bottom: 3rem;
}

#container {
background-color: pink;
background-color: rgb(9, 86, 106);
opacity: 95%;
margin: 40px auto;
max-width: 800px;
max-width: 825px;
padding: 38px 31px;
}

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

button {
font-size: 21px;
line-height: 33px;
margin: 0 0 23px 0;
padding: 0 6px;
padding: 20 6px;
}

#output-div {
background-color: lightgrey;
margin: 20px auto;

color: white;
margin-left: 0px;
padding: 20px;
width: 100%;
}

.logo-img {
height: 49px;
position: relative;
top: 22px;
}

/* increase header font size on wider screens */
@media screen and (min-width: 600px) {
.header {
font-size: 2rem;
}

title {
color: aliceblue;
}
</style>

</head>

<!-- 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>
<h1 class="header">
<img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
Rocket Academy
<img class="logo-img" src="https://firebasestorage.googleapis.com/v0/b/ftbc11-sample.appspot.com/o/images%2F1-PRIMARY_CRIMSON.png?alt=media&token=ce9e8333-2a45-44be-adb2-1f1bf054adf7" />
</h1>
<h1 class="header">♣️ Basics - Blackjack ♠️</h1>
<!-- The <h1> element defines a large heading. There are 6 pre-set header elements, <h1> to <h6> -->
<h1 id="header" style="color: white;">♣️♥️ Blackjack ♠️♦️</h1>
<!-- 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">
<p>Input:</p>
<input id="input-field" />
<br />
<button id="submit-button">Submit</button>
<p>Output:</p>
<div id="output-div"></div>
<img src="https://media1.tenor.com/m/vbUWNqcruAsAAAAC/vegas-hangover-movie.gif" width="400" style="margin-left: 22%;">

<br>
<br>
<!-- The <p> tag defines a paragraph element. -->
<div id="output-div"></div>

<!-- The self-closing <input /> tag represents a field for a user to enter input. -->

<input id="input-field" style="width: 120px; height: 30px; margin: 20px;" />

<br>
<!-- The self-closing <br /> tag represents a line break - a line's worth of spacing before dispalying the next element. -->

<!-- The <button> tag represents.. you guessed it! a button. -->
<button id="start-game" style="margin-left: 300px;">Start Game</button>
<button id="submit-button" style="margin: 20px;">Next</button>
<button id="draw" style="margin: 20px;"> Draw </button>
<button id="stand" style="margin: 20px;">Stand</button>


</div>
<!-- Import program logic -->
<!-- Everything below this is incorporating JavaScript programming logic into the webpage. -->
<!-- The script tag encloses JavaScript syntax for the browser to interpret programtically -->
<!-- The following line imports all code written in the script.js file -->
<script src="script.js"></script>
<!-- Define button click functionality -->
<script>
var button = document.querySelector("#submit-button");
button.addEventListener("click", function () {
// Set result to input value
var input = document.querySelector("#input-field");
var result = main(input.value);

// Display result in output element
var output = document.querySelector("#output-div");
output.innerHTML = result;
<script src="dom.js"></script>

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

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