Embedded Files
9-15-25
Objective: Students will be able to log into their course 'CIW: Advanced HTML5 and CSS3 Specialist' at https://ciw.ucertify.com and begin working on the lessons.
The secret to this project is planning your layout with the Tags.
9-10-25
Objective: Students will be able to complete the HTML & CSS layout project by using web design skills learned thus far. You will need to use div tags, background-color, border-radius, padding, margin, text-align: center, and 3 article tags nested inside of your main tags. Happy Coding :-)
9-8-25
Objective: Students will be able to learn more about well-structured webpage design using HTML5 and CSS3 by demonstrating their ability to customize webpages.
9-2-25
Objective
Students will be able to use JavaScript variables, functions, conditionals, and DOM manipulation to create a simple interactive game.
🎯 Simple Ideas Using the Same Pattern
🎯 Simple Ideas Using the Same Pattern
1. Coin Flipper
1. Coin Flipper
Generate a random number (0 or 1).
Show "Heads" or "Tails" in text and swap an image of a coin.
Track how many heads/tails have been flipped.
2. Rock–Paper–Scissors
2. Rock–Paper–Scissors
User clicks a button for their choice.
Computer generates a random choice (1–3).
Compare results and display "You win / lose / tie."
Keep score of wins, losses, and ties.
3. Number Guessing Game
3. Number Guessing Game
Computer generates a random number between 1–10.
User enters a guess in an input box.
Show whether the guess is too high, too low, or correct.
Track how many attempts it took to guess correctly.
4. Random Quote or Joke Generator
4. Random Quote or Joke Generator
Instead of dice images, store an array of quotes/jokes.
Each button click randomly selects and displays one.
Bonus: Keep track of how many unique ones have been shown.
5. Card Picker
5. Card Picker
Randomly pick a card from a “deck” (1–13 × 4 suits).
Display a card image or text ("Ace of Spades").
Optional: Track how many cards have been drawn so far.
6. Simple Lottery or Spinner
6. Simple Lottery or Spinner
Generate 3 random numbers (like a slot machine).
Show them as text or images.
If they match, show “You win!”
🔑 Common Ingredients in All
🔑 Common Ingredients in All
Random number generation (Math.random())
DOM updates (textContent, src, etc.)
Event handling (button clicks)
Counters/state (variables that persist between clicks)
✅ Features:
Three buttons (Rock, Paper, Scissors)
Random computer choice each round
Shows computer’s choice and the round result
Running score for wins, losses, ties
Here’s a self-contained HTML + CSS + JavaScript example you can copy straight into a file (e.g., rps.html) and open in your browser.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Rock Paper Scissors</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
background: #f4f4f4;
}
h1 {
color: #333;
}
.buttons {
margin: 20px;
}
button {
padding: 10px 20px;
font-size: 16px;
margin: 5px;
cursor: pointer;
border-radius: 8px;
border: 1px solid #ccc;
background: #fff;
}
#result, #score {
margin-top: 20px;
font-size: 18px;
font-weight: bold;
}
#computerChoice {
margin-top: 10px;
font-size: 16px;
color: #555;
}
</style>
</head>
<body>
<h1>Rock – Paper – Scissors</h1>
<div class="buttons">
<button onclick="play('rock')">✊ Rock</button>
<button onclick="play('paper')">✋ Paper</button>
<button onclick="play('scissors')">✌️ Scissors</button>
</div>
<p id="computerChoice"></p>
<p id="result"></p>
<p id="score">Wins: 0 | Losses: 0 | Ties: 0</p>
<script>
let wins = 0;
let losses = 0;
let ties = 0;
function play(userChoice) {
const choices = ["rock", "paper", "scissors"];
const computerChoice = choices[Math.floor(Math.random() * 3)];
document.getElementById("computerChoice").textContent =
"Computer chose: " + computerChoice;
let result = "";
if (userChoice === computerChoice) {
result = "It's a tie!";
ties++;
} else if (
(userChoice === "rock" && computerChoice === "scissors") ||
(userChoice === "paper" && computerChoice === "rock") ||
(userChoice === "scissors" && computerChoice === "paper")
) {
result = "You win!";
wins++;
} else {
result = "You lose!";
losses++;
}
document.getElementById("result").textContent = result;
document.getElementById("score").textContent =
"Wins: " + wins + " | Losses: " + losses + " | Ties: " + ties;
}
</script>
</body>
</html>
Copyright Plagiarism & Rules 2025 - (copy)
8-28-25
Objective: Students will be able to extend the "Coding like Crazy project" by adding a background color, menu and extra pages.
Don't forget to add: h1, unordered list, picture, and video
8-25-25
Objective: Students will be able to learn the basics of how loops work using JavaScript.
TBA
Objective: Students will be able to create the webpages below and make sure the code works properly.
Page updated
Google Sites
Report abuse