Coding Challenges

Create a Simple Webpage

Easy

Create a simple webpage about your favorite hobby. Include a heading, paragraph, and list of items related to your hobby.

                            
<!DOCTYPE html>
<html>
<head>
    <title>My Hobby</title>
</head>
<body>
    <!-- Create a heading here -->
    
    <!-- Write a paragraph about your hobby here -->
    
    <!-- Create a list about your hobby here -->
    
</body>
</html>
                        

<!DOCTYPE html>
<html>
<head>
    <title>My Hobby</title>
</head>
<body>
    <h1>Soccer: My Favorite Sport</h1>
    
    <p>Soccer is my favorite hobby because it's fun to play with friends and helps me stay active. I've been playing soccer since I was 6 years old.</p>
    
    <h2>Things I Love About Soccer:</h2>
    <ul>
        <li>Working as a team</li>
        <li>Running on the field</li>
        <li>Scoring goals</li>
        <li>Making new friends</li>
    </ul>
</body>
</html>
                            

Add Images and Links

Medium

Improve a webpage by adding images and links. Include at least one image and two links to external websites.

<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Animals</title>
</head>
<body>
    <h1>My Favorite Animals</h1>
    
    <p>Here are some animals I really like:</p>
    
    <h2>Dolphins</h2>
    <p>Dolphins are very intelligent marine mammals.</p>
    <!-- Add a dolphin image here -->
    <!-- Add a link to a website about dolphins -->
    
    <h2>Tigers</h2>
    <p>Tigers are the largest cat species with distinctive orange and black stripes.</p>
    <!-- Add a tiger image here -->
    <!-- Add a link to a website about tigers -->
    
</body>
</html>
                        

<!DOCTYPE html>
<html>
<head>
    <title>My Favorite Animals</title>
</head>
<body>
    <h1>My Favorite Animals</h1>
    
    <p>Here are some animals I really like:</p>
    
    <h2>Dolphins</h2>
    <p>Dolphins are very intelligent marine mammals.</p>
    <img src="https://images.unsplash.com/photo-1607153333879-c174d265f1d2?w=400" alt="A dolphin jumping out of water">
    <p><a href="https://www.nationalgeographic.com/animals/mammals/facts/bottlenose-dolphin" target="_blank">Learn more about dolphins on National Geographic</a></p>
    
    <h2>Tigers</h2>
    <p>Tigers are the largest cat species with distinctive orange and black stripes.</p>
    <img src="https://images.unsplash.com/photo-1549366021-9f761d450615?w=400" alt="A tiger in the wild">
    <p><a href="https://www.worldwildlife.org/species/tiger" target="_blank">Learn about tiger conservation on WWF</a></p>
    
</body>
</html>
                            

Create a Styled Contact Form

Hard

Build a contact form with name, email, and message fields. Add some CSS to make it look nice.

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <style>
    /* Add your CSS styles here */
    
    </style>
</head>
<body>
    <h1>Contact Us</h1>
    
    <!-- Create your form here -->
    
</body>
</html>
                        

<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            max-width: 600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        h1 {
            color: #4361ee;
            text-align: center;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        
        input, textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
        }
        
        textarea {
            height: 150px;
        }
        
        button {
            background-color: #4361ee;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        
        button:hover {
            background-color: #3a0ca3;
        }
    </style>
</head>
<body>
    <h1>Contact Us</h1>
    
    <form>
        <div class="form-group">
            <label for="name">Your Name:</label>
            <input type="text" id="name" name="name" required>
        </div>
        
        <div class="form-group">
            <label for="email">Email Address:</label>
            <input type="email" id="email" name="email" required>
        </div>
        
        <div class="form-group">
            <label for="message">Your Message:</label>
            <textarea id="message" name="message" required></textarea>
        </div>
        
        <button type="submit">Send Message</button>
    </form>
</body>
</html>
                            

Number Guessing Game

Easy

Create a simple number guessing game where the computer picks a random number between 1 and 10, and the player tries to guess it.

# Number Guessing Game
# The computer will pick a random number between 1 and 10
# Your job is to make the game work!

# You'll need to use the random module
import random

# TODO: Generate a random number between 1 and 10

# TODO: Ask the player to guess the number

# TODO: Check if the guess is correct
# If it's correct, print "You win!"
# If it's wrong, print "Sorry, the number was [correct_number]"
                        

# Number Guessing Game
import random

# Generate a random number between 1 and 10
secret_number = random.randint(1, 10)

# Ask the player to guess the number
print("I'm thinking of a number between 1 and 10.")
guess = int(input("What's your guess? "))

# Check if the guess is correct
if guess == secret_number:
    print("You win! The number was", secret_number)
else:
    print("Sorry, the number was", secret_number)
                            

Rock, Paper, Scissors Game

Medium

Create a Rock, Paper, Scissors game where the player plays against the computer.

# Rock, Paper, Scissors Game
import random

# These are the options for the game
options = ["rock", "paper", "scissors"]

# TODO: Make the computer randomly choose rock, paper, or scissors

# TODO: Ask the player for their choice

# TODO: Compare the choices and determine the winner
# Remember:
# - Rock beats scissors
# - Scissors beats paper
# - Paper beats rock
# - If both choose the same, it's a tie

# TODO: Print the result
                        

# Rock, Paper, Scissors Game
import random

# These are the options for the game
options = ["rock", "paper", "scissors"]

# Make the computer randomly choose
computer_choice = random.choice(options)

# Ask the player for their choice
print("Let's play Rock, Paper, Scissors!")
player_choice = input("Enter your choice (rock, paper, or scissors): ").lower()

# Make sure the player entered a valid choice
if player_choice not in options:
    print("That's not a valid choice. Please choose rock, paper, or scissors.")
else:
    print(f"You chose {player_choice}")
    print(f"Computer chose {computer_choice}")
    
    # Determine the winner
    if player_choice == computer_choice:
        print("It's a tie!")
    elif (player_choice == "rock" and computer_choice == "scissors") or \
         (player_choice == "scissors" and computer_choice == "paper") or \
         (player_choice == "paper" and computer_choice == "rock"):
        print("You win!")
    else:
        print("Computer wins!")
                            

Hangman Game

Hard

Create a simplified Hangman game where the player has to guess a word by suggesting letters.

# Hangman Game
import random

# List of words to choose from
words = ["python", "computer", "program", "code", "technology"]

# TODO: Choose a random word from the list

# TODO: Create a variable to keep track of the guessed letters

# TODO: Create a variable to keep track of the number of wrong guesses

# TODO: Create a game loop that continues until the player wins or loses

# TODO: Display the word with underscores for letters not yet guessed

# TODO: Ask the player to guess a letter

# TODO: Check if the letter is in the word

# TODO: Update the guessed letters

# TODO: Check if the player has won or lost

# Hangman Game
import random

# List of words to choose from
words = ["python", "computer", "program", "code", "technology"]

# Choose a random word
word = random.choice(words)

# Keep track of guessed letters and wrong guesses
guessed_letters = []
wrong_guesses = 0
max_wrong_guesses = 6

print("Welcome to Hangman!")
print(f"I'm thinking of a word with {len(word)} letters.")

# Game loop
while wrong_guesses < max_wrong_guesses:
    # Display the word with underscores for letters not yet guessed
    display = ""
    for letter in word:
        if letter in guessed_letters:
            display += letter + " "
        else:
            display += "_ "
    print("\nWord:", display)
    
    # Show guessed letters
    print(f"Guessed letters: {', '.join(guessed_letters)}")
    print(f"Wrong guesses: {wrong_guesses}/{max_wrong_guesses}")
    
    # Check if all letters have been guessed
    if all(letter in guessed_letters for letter in word):
        print("\nCongratulations! You guessed the word:", word)
        break
        
    # Ask for a guess
    guess = input("\nGuess a letter: ").lower()
    
    # Validate the input
    if len(guess) != 1 or not guess.isalpha():
        print("Please enter a single letter.")
        continue
        
    # Check if the letter has already been guessed
    if guess in guessed_letters:
        print("You already guessed that letter!")
        continue
        
    # Add the letter to guessed_letters
    guessed_letters.append(guess)
    
    # Check if the guess is correct
    if guess in word:
        print("Good guess!")
    else:
        print("Sorry, that letter is not in the word.")
        wrong_guesses += 1
        
# Check if the player lost
if wrong_guesses == max_wrong_guesses:
    print("\nGame over! You ran out of guesses.")
    print(f"The word was: {word}")
                            

Change Text with a Button

Easy

Create a button that changes the text of a paragraph when clicked.

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Button</title>
</head>
<body>
    <h1>JavaScript Button Challenge</h1>
    
    <p id="text-to-change">This text will change when you click the button.</p>
    
    <button id="change-button">Click Me!</button>
    
    <script>
    // TODO: Write JavaScript code to change the text when the button is clicked
    // 1. Get the button element
    // 2. Add an event listener for the 'click' event
    // 3. Inside the event listener, change the text of the paragraph
    
    </script>
</body>
</html>
                        

<!DOCTYPE html>
<html>
<head>
    <title>Change Text Button</title>
</head>
<body>
    <h1>JavaScript Button Challenge</h1>
    
    <p id="text-to-change">This text will change when you click the button.</p>
    
    <button id="change-button">Click Me!</button>
    
    <script>
    // Get the button element
    const button = document.getElementById('change-button');
    
    // Add an event listener for the 'click' event
    button.addEventListener('click', function() {
        // Change the text of the paragraph
        const paragraph = document.getElementById('text-to-change');
        paragraph.textContent = "You clicked the button! The text has changed.";
        
        // Optional: Change the color too
        paragraph.style.color = "blue";
    });
    </script>
</body>
</html>
                            

Simple Calculator

Medium

Create a simple calculator that can add, subtract, multiply, and divide two numbers.

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .calculator {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 20px;
        }
        
        .input-group {
            margin-bottom: 15px;
        }
        
        input {
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        
        button {
            padding: 10px;
            background-color: #4361ee;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Simple Calculator</h1>
    
    <div class="calculator">
        <div class="input-group">
            <input type="text" id="result" disabled>
        </div>
        
        <div class="input-group">
            <input type="number" id="num1" placeholder="Enter first number">
        </div>
        
        <div class="input-group">
            <input type="number" id="num2" placeholder="Enter second number">
        </div>
        
        <div class="buttons">
            <button id="add">Add</button>
            <button id="subtract">Subtract</button>
            <button id="multiply">Multiply</button>
            <button id="divide">Divide</button>
        </div>
    </div>
    
    <script>
    // TODO: Write JavaScript code for the calculator
    // 1. Get references to all the HTML elements (inputs and buttons)
    // 2. Add event listeners to the buttons
    // 3. Implement the calculation functions
    // 4. Display the result in the result input
    // 5. Handle division by zero error
    
    </script>
</body>
</html>
                        

<!DOCTYPE html>
<html>
<head>
    <title>Simple Calculator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .calculator {
            background-color: #f5f5f5;
            border-radius: 8px;
            padding: 20px;
        }
        
        .input-group {
            margin-bottom: 15px;
        }
        
        input {
            padding: 8px;
            width: 100%;
            box-sizing: border-box;
        }
        
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        
        button {
            padding: 10px;
            background-color: #4361ee;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <h1>Simple Calculator</h1>
    
    <div class="calculator">
        <div class="input-group">
            <input type="text" id="result" disabled>
        </div>
        
        <div class="input-group">
            <input type="number" id="num1" placeholder="Enter first number">
        </div>
        
        <div class="input-group">
            <input type="number" id="num2" placeholder="Enter second number">
        </div>
        
        <div class="buttons">
            <button id="add">Add</button>
            <button id="subtract">Subtract</button>
            <button id="multiply">Multiply</button>
            <button id="divide">Divide</button>
        </div>
    </div>
    
    <script>
    // Get references to all HTML elements
    const num1Input = document.getElementById('num1');
    const num2Input = document.getElementById('num2');
    const resultInput = document.getElementById('result');
    const addButton = document.getElementById('add');
    const subtractButton = document.getElementById('subtract');
    const multiplyButton = document.getElementById('multiply');
    const divideButton = document.getElementById('divide');
    
    // Helper function to get input values
    function getInputValues() {
        const num1 = parseFloat(num1Input.value);
        const num2 = parseFloat(num2Input.value);
        
        // Check if inputs are valid numbers
        if (isNaN(num1) || isNaN(num2)) {
            resultInput.value = 'Please enter valid numbers';
            return null;
        }
        
        return { num1, num2 };
    }
    
    // Add button event listener
    addButton.addEventListener('click', function() {
        const values = getInputValues();
        if (values) {
            const result = values.num1 + values.num2;
            resultInput.value = result;
        }
    });
    
    // Subtract button event listener
    subtractButton.addEventListener('click', function() {
        const values = getInputValues();
        if (values) {
            const result = values.num1 - values.num2;
            resultInput.value = result;
        }
    });
    
    // Multiply button event listener
    multiplyButton.addEventListener('click', function() {
        const values = getInputValues();
        if (values) {
            const result = values.num1 * values.num2;
            resultInput.value = result;
        }
    });
    
    // Divide button event listener
    divideButton.addEventListener('click', function() {
        const values = getInputValues();
        if (values) {
            // Handle division by zero
            if (values.num2 === 0) {
                resultInput.value = "Cannot divide by zero";
                return;
            }
            
            const result = values.num1 / values.num2;
            resultInput.value = result;
        }
    });
    </script>
</body>
</html>
                            

Moving Cat Game

Easy

Create a simple game where you control the Scratch cat with arrow keys.

Steps:

Go to scratch.mit.edu and start a new project
Keep the default cat sprite
Add code to make the cat move when arrow keys are pressed
Add code to make the cat say "Meow!" when the space key is pressed

Hint:

For the arrow key controls, you'll need:

Four "when key pressed" blocks (one for each arrow key)
"Move [] steps" blocks for up/down
"Turn [] degrees" blocks for left/right
For the meow, use "when [space] key pressed" and "say [Meow!] for [1] seconds"

Collect the Stars Game

Medium

Create a game where the player controls a character that collects stars to earn points.

Steps:

Create a player sprite (or use the default cat)
Create a star sprite
Add arrow key controls for the player
Create a score variable
Make the star move to random positions when touched by the player
Increase the score each time the player touches a star

Hint:

For the star sprite, you'll need:

A "forever" block to continuously check if the player is touching it
An "if touching [player]" condition inside the forever block
Inside the if block, use "change [score] by [1]" and "go to random position"
You might also want to add a sound effect when collecting a star

Welcome to Coding Challenges!

Tips for Solving Coding Challenges

Create a Simple Webpage

Add Images and Links

Create a Styled Contact Form

Number Guessing Game

Rock, Paper, Scissors Game

Hangman Game

Change Text with a Button

Simple Calculator

Moving Cat Game

Steps:

Hint:

Collect the Stars Game

Steps:

Hint: