Learn Basic JavaScript by Building a Role Playing Game - Step 3

JavaScript
1

Tell us what’s happening:

i cant get it to work and i tried evrything i think.
i cant pass

Your code so far


<!-- User Editable Region -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Game</title>
    <style>
        /* CSS for the loading screen */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            z-index: 9999;
        }

        #loading-text {
            font-size: 24px;
            margin-top: 20px;
        }

        /* CSS for the button */
        #action-button {
            margin-top: 20px;
            padding: 10px 20px;
            background-color: #007bff;
            color: #ffffff;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        /* CSS for the hidden image */
        #hidden-image {
            display: none;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <div id="game">
        <div id="loading-screen">
            <h1>Loading...</h1>
            <p id="loading-text">Please wait while the content is loading...</p>
        </div>
    </div>

    <!-- Your website content goes here -->
    <h2>Welcome to My Simple Game!</h2>
    <p>This is a simple game. Click the button to reveal a hidden image.</p>

    <!-- Button to trigger an action -->
    <button id="action-button">Click Me!</button>

    <!-- Hidden image -->
    <img id="hidden-image" src="https://via.placeholder.com/400" alt="Hidden Image">

    <script>
        // Simulate loading process
        document.addEventListener("DOMContentLoaded", function() {
            // Show loading screen
            var loadingScreen = document.getElementById("loading-screen");
            loadingScreen.style.display = "flex";

            // Simulate loading time (5 seconds)
            setTimeout(function() {
                // Hide loading screen
                loadingScreen.style.display = "none";
            }, 5000); // Adjust the time as needed
            
            // Log "Hello World" to the console
            console.log("Hello World");
        });

        // Function to handle button click
        document.getElementById("action-button").addEventListener("click", function() {
            // Show hidden image
            var hiddenImage = document.getElementById("hidden-image");
            hiddenImage.style.display = "block";
        });
    </script>
</body>
</html>


<!-- User Editable Region -->

Your browser information:

User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36

Challenge Information:

Learn Basic JavaScript by Building a Role Playing Game - Step 3

2

You appear to have created this post without editing the template. Please edit your post to Tell us what’s happening in your own words.

3

Well, what is this code? In RPG game Step 3 you have to do different things

4

its suposed to be java

5

it says : Step 3

One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing F12 or Ctrl+Shift+I. On Mac, you can press Option + ⌘ + C and select “Console”. You can also click the “Console” button above the preview window to see our built-in console.

The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.

Add a console.log("Hello World"); line between your script tags. Then click the “Console” button to open the console. You should see the text "Hello World".

Note how the line ends with a semi-colon. It is common practice in JavaScript to end your code lines with semi-colons.

6

Yes, that’s the task description for RPG Game step 3.
So show your attempt, describe your issue to help you

7

JavaScript, to be precise

8

my brain is now broken cus i dont understand what the problem is and what to fix.

9

Well, no code - no help. How to show your code:
Forum code formatting

10

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.