Build a Storytelling App - Step 14

JavaScript
1

Build Story telling App: step 14 not passing
[TypeError: Cannot read properties of null (reading ‘map’)]
When you call displayStory(“scary”), the border color should be #ee4b2b.

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) {
let property = storyObj.hasOwnProperty(genre);
if (property) {
resultParagraph.textContent = storyObj[genre].story;
resultParagraph.style.borderColor = storyObj[genre].borderColor;
}
}

displayStory(“scary”)

scaryStoryBtn.addEventListener(“click”, displayStory);

<!-- 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: {

// User Editable Region

    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) {
  let property = storyObj.hasOwnProperty(genre);
  if (property) {
    resultParagraph.textContent = storyObj[genre].story; 
    resultParagraph.style.borderColor = storyObj[genre].borderColor;
  }
}

displayStory("scary")

scaryStoryBtn.addEventListener("click", displayStory);



// 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 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36

Challenge Information:

Build a Storytelling App - Step 14

2

Are you doing this?

Also, set the storyContainer 's border color to the borderColor property of the selected genre.

3

Oh! no. Thanks I have just done that and it passed