Build a Storytelling App - Step 14

HTML-CSS
1

Tell us what’s happening:

Please guide me what I am doing wrong, I did all video lessons, but this one not passing and feels tough.

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"
  },
};


// User Editable Region

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


// User Editable Region


scaryStoryBtn.addEventListener("click", displayStory);



/* 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

Hello there.

The major problems are how you access the properties and the if statement condition.

For the if condition, you can use the hasOwnProperty it checks whether an object has a specific property. Alternatively, you can use the in operator.

For the issue of how to access the properties, Remember that properties are stored in the scary property. It’s like having a property inside another property.

I hope this helps. Kindly, be free to reach out when stuck.

1 Like
3

Hello :slight_smile:

I didn’t knew about hasOwnProperty and in operator. Thank you.

I updated the code still it doesn’t works. Please guide me.

function displayStory(genre) {
if("scary" in storyObj === genre) {
  resultParagraph.innerText = storyObj.scary.story;
  storyContainer.style.borderColor = storyObj.scary.borderColor;
}
}
displayStory("scary");
4

oh no, in returns a boolean it can’t be equal to genre, I need to fix it first.

5

Yeah, the condition has a problem. You’re supposed to check whether genre is in storyObj

6

yes got it, Updated code-

function displayStory(genre) {
if("scary" in genre) {
  resultParagraph.innerText = storyObj.scary.story;
  storyContainer.style.borderColor = storyObj.scary.borderColor;
}
}
displayStory("scary");
7

It worked, thank you very much :heart: :blush:

How could I check the same condition if I didn’t knew in operator ?
or even the hasOwnProperty

9

optional chaining would be a perfect fit.

1 Like