Skip to content

27-3 Jia Hui #507

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

27-3 Jia Hui #507

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
86154a0
created deck and shuffle functions
sinsinex Feb 19, 2024
f55c274
added game functions
sinsinex Feb 19, 2024
cf69c5f
state before breaking up player and dealer view
sinsinex Feb 19, 2024
4d5b9d9
fixed player and dealer message function
sinsinex Feb 19, 2024
75d4cde
a working Blackjackgit add script.jsgit add script.jsgit add script.js
sinsinex Feb 19, 2024
490792e
added emojis
sinsinex Feb 19, 2024
7af2599
added input validation. it's finalgit add script.js!
sinsinex Feb 19, 2024
77b78a0
final - no more changes
sinsinex Feb 19, 2024
8c653ec
this is finalgit add script.jsgit add script.js
sinsinex Feb 19, 2024
f14b009
edited HTML code
sinsinex Feb 20, 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
158 changes: 108 additions & 50 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

<!DOCTYPE html>
<html lang="en">
<head>
Expand All @@ -8,41 +7,52 @@
<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">
<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">

<!-- 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">
<meta name="title" content="Jia Hui's BlackJack Game!" />
<meta
name="description"
content="A miracle product with the help of Google and Stack Overflow 🥲🙏✨"
/>

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

<!-- CSS -->
<style>
Expand All @@ -51,55 +61,63 @@
}

body {
font-family: 'Open Sans', sans-serif;
font-family: "Jost";
margin-left: 30px;
margin-right: 30px;
background-color:white;
color: black; /* sets the font color */
background-color: rgb(100, 0, 0);
color: rgb(255, 255, 255); /* 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 */
}

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

h4 {
text-align: center;
}

#container {
background-color: pink;
background-color: rgba(11, 65, 32, 0.842);
margin: 40px auto;
max-width: 800px;
padding: 38px 31px;
}

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

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

#output-div {
background-color: lightgrey;
background-color: rgb(208, 248, 221);
color: black;
margin: 20px auto;
padding: 20px;
width: 100%;
}
#output-div::before {
content: attr(data-placeholder);
}

.logo-img {
Expand All @@ -115,24 +133,58 @@
}
}
</style>

</head>

<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>
<h1 class="header"></h1>
<h1 class="header">♠♣ Blackjack ♦♥</h1>
<h4>POV: You had one job, but still forgot to bring your deck</h4>
<center><img src= "https://media.giphy.com/media/v1.Y2lkPTc5MGI3NjExeTd4ejVrOWhmc3lmdnZrMHNhNzB3bWt0NmlvZG90ZXc4YjU1YWtlbSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/8Iv5lqKwKsZ2g/giphy.gif" alt="cheers" height="160"></center>
</div>
<div id="container">
<p>Input:</p>
<input id="input-field" />
<input
input
id="input-field"
type="text"
placeholder="Huat do you think?"
style="
font-size: 21px;
line-height: 33px;
margin: 0 0 23px 0;
padding: 0 9px;
width: 100%;
"
/>
<br />
<button id="submit-button">Submit</button>
<button id="submit-button">Submit</button>
<p>Output:</p>
<div id="output-div"></div>
</div>
<style>
.centered-text {
text-align: center;
}
.hidden-text {
display: none;
}
</style>
<div id="gameInstructions" class="centered-text">
<p class="instruction-text">Hello! Here's your automated game of Blackjack! 🎰</p>
<p class="instruction-text">
The goal is to reach 21 points, or be as close as possible.
Each player, including the dealer, is first dealt 2 cards each.
</p>
<p class="instruction-text">
Then, draw extra cards if you need.
However, your points cannot be lower than 16 before the game ends.
</p>
<p class="instruction-text">
So sit tight, play smart, and have fun! 🤑
</p>
<p class="instruction-text">
Press "submit" to receive your cards. 👆
</p>
<!-- Import program logic -->
<script src="script.js"></script>
<!-- Define button click functionality -->
Expand All @@ -149,6 +201,12 @@ <h1 class="header">♣️ Basics - Blackjack ♠️</h1>

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

// Hide game instructions text once the game starts
var instructions = document.querySelectorAll(".instruction-text");
for (var i = 0; i < instructions.length; i += 1) {
instructions[i].classList.add("hidden-text");
}
});
</script>
</body>
Expand Down
Loading