Build a Storytelling App - Step 16

JavaScript
1

Tell us what’s happening:

Please help. I thought that adding a parameter was the right solution but that failed. If adding a parameter doesn’t work,what will?

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Storytelling App</title>
    <link rel="stylesheet" href="./styles.css" />
</head>

<body>

    <h1>Want to hear a short story?</h1>

    <main class="story-container">
        <div class="btn-container">
            <button class="btn" id="scary-btn">Scary Story</button>
            <button class="btn" id="funny-btn">Funny Story</button>
            <button class="btn" id="adventure-btn">Adventure Story</button>
        </div>
        <p id="result"></p>
    </main>
    <script src="./script.js"></script>

</body>

</html>

/* file: script.js */
const storyContainer = document.querySelector(".story-container");

const scaryStoryBtn = document.getElementById("scary-btn");
const funnyStoryBtn = document.getElementById("funny-btn");
const adventureStoryBtn = document.getElementById("adventure-btn");

const resultParagraph = document.getElementById("result");

const storyObj = {
  scary: {
    story: `In the dark woods, a group of friends stumbled upon an old, abandoned cabin. They enter the cabin and awaken something malevolent that had been dormant for centuries.`,
    borderColor: "#ee4b2b",
},
  funny: {
    story: `During a camping trip, Mark decided to show off his culinary skills by cooking dinner over an open fire. However, his attempt caused him to burn the dinner as well as his eyebrows off.`,
    borderColor: "#f1be32",
  },
  adventure: {
    story: `Lost in the heart of the Amazon rain forest, Sarah and Jake stumbled upon an ancient temple. They braved deadly traps and encountered strange wildlife, all while deciphering cryptic clues left behind by a mysterious civilization.`,
    borderColor: "#acd157"
  },
};

function displayStory(genre) {
  if (storyObj.hasOwnProperty(genre)) {
    resultParagraph.textContent = storyObj[genre].story;
    storyContainer.style.borderColor = storyObj[genre].borderColor;
  }
}


// User Editable Region

scaryStoryBtn.addEventListener("click", displayStory("scary");
funnyStoryBtn.addEventListener("click", displayStory("funny");
adventureStoryBtn.addEventListener("click", displayStory("adventure"));


// User Editable Region



/* file: styles.css */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --dark-grey: #1b1b32;
    --black: #000;
    --white: #fff;
    --golden-yellow: #fecc4c;
    --yellow: #ffcc4c;
    --gold: #feac32;
    --orange: #ffac33;
    --dark-orange: #f89808;
}

body {
    background-color: var(--dark-grey);
    color: var(--white);
}

h1,
#result {
    text-align: center;
}

h1 {
    margin: 10px 0 15px;
}

.story-container {
    margin: auto;
    padding: 10px;
    width: 80%;
    border-style: double;
    border-width: 14px;
    border-color: var(--white);
}

.btn-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

@media (min-width: 760px) {
    .btn-container {
        flex-direction: row;
    }
}

#result {
    margin-top: 15px;
    font-size: 1.2rem;
    line-height: 30px;
}

.btn {
    cursor: pointer;
    width: 200px;
    margin: 10px 0 10px 0.5rem;
    color: var(--black);
    background-color: var(--gold);
    background-image: linear-gradient(var(--golden-yellow), var(--orange));
    border-color: var(--gold);
    border-width: 3px;
}

.btn:hover {
    background-image: linear-gradient(var(--yellow), var(--dark-orange));
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Safari/605.1.15

Challenge Information:

Build a Storytelling App - Step 16

2

You should see an error in the console about bad syntax.

compare this function call with these

3

Hi @dreyes61

The squiggly red lines in the editor indicate you have a syntax error.

image
image723×133 15.1 KB

Happy coding

4

once you fix that, you need to understand that when you write a function call, the function is executed when the line is executed for the first time, and so you are giving the output of the function as argument to addEventListener while it needs a function as argument

5

How about now?
Now it looks like i passed test 3 but am failing tests 1 and two.
How is that possible? The adventure story is showing in the preview.


scaryStoryBtn.addEventListener("click", displayStory("scary"));
funnyStoryBtn.addEventListener("click",displayStory("funny"));
adventureStoryBtn.addEventListener("click",displayStory("adventure"));

With the following code i pass test one but not tests 2 and 3.

scaryStoryBtn.addEventListener("click", ()=> {
  displayStory("scary")
});
funnyStoryBtn.addEvrntListener("click", () =>{
  displayStory("funny")
});
adventureStoryBtn.addEvrntListener("click", () => {
  displayStory("adventure")
});
Never mind, i corrected the spelling(syntax) error and i passed all of the tests.