---
id: 671faf4ac1e19245df4db7f5
title: Step 14
challengeType: 0
dashedName: step-14
---

# --description--

Inside the `displayStory` function, check if the `storyObj` object has a property that matches the `genre` parameter and set the `#result` paragraph's text content to the story of the selected genre.

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

Test this by calling the `displayStory` function with the `scary` genre. The border color should be `#ee4b2b` and the story should be `"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."`.

# --hints--

You should call the `displayStory` function with the `"scary"` genre.

```js
assert.match(code, /displayStory\(["']scary["']\)/);
```

When you call `displayStory("scary")`, the border color should be `#ee4b2b`.

```js
displayStory("scary");

function rgbToHex(rgb) {
  const rgbValues = rgb.match(/\d+/g);
  return (
    "#" +
    rgbValues
      ?.map((num) => parseInt(num).toString(16).padStart(2, "0"))
      .join("")
  );
}

const rgbColor = storyContainer.style.borderColor;
const hexColor = rgbToHex(rgbColor);
console.log(hexColor.toLowerCase());

assert.equal(hexColor.toLowerCase(), "#ee4b2b");
```

When you call `displayStory("scary")`, the story displayed should be `"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."`.

```js
displayStory("scary");
assert.equal(result.textContent, "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.");
```

# --seed--

## --seed-contents--

```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>
```

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

--fcc-editable-region--
function displayStory(genre) {

}
--fcc-editable-region--

scaryStoryBtn.addEventListener("click", displayStory);


```

```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));
}
```
