Passo 9

Instruções

Para armazenar os diferentes tipos de histórias, crie um objeto chamado storyObj. O objeto deve ter três propriedades: scary, funny e adventure. Cada valor de propriedade deve ser um objeto com uma propriedade story e borderColor. Atribua os seguintes valores aos objetos individuais:

scary: assustador
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: aventura
story: Perdidos no coração da floresta amazônica, Sarah e Jake encontraram um templo antigo. Eles enfrentaram armadilhas mortais e encontraram animais selvagens estranhos, tudo enquanto decifravam pistas enigmáticas deixadas por uma civilização misteriosa.
borderColor: #acd157

O que fazer:

Testes:

Você deve ter um objeto `storyObj`.
Seu objeto `storyObj` deve ter três propriedades: `scary`, `funny` e `adventure`.
Cada propriedade deve ter uma propriedade `story` e `borderColor`.
A propriedade `story` para `scary` deve ter o valor string de `"In the dark woods, a group of friends stumbled upon an old, abandoned cabin. Eles entram na cabine e despertam algo malévolo que estava adormecido por séculos.
A propriedade `borderColor` para `scary` deve ter o valor string `"#ee4b2b"`.
A propriedade `story` para `funny` deve ter o valor string de `"During a camping trip, Mark decided to show off his culinary skills by cooking dinner over an open fire. No entanto, sua tentativa fez com que ele queimasse o jantar e também as sobrancelhas.`
A propriedade `borderColor` para `funny` deve ter o valor string `"#f1be32"`.
A propriedade `story` para `adventure` deve ter o valor string de `"Lost in the heart of the Amazon rain forest, Sarah and Jake stumbled upon an ancient temple.` Eles enfrentaram armadilhas mortais e encontraram animais selvagens estranhos, tudo isso enquanto decifravam pistas criptografadas deixadas por uma civilização misteriosa.
A propriedade `borderColor` para `adventure` deve ter o valor string `"#acd157"`.

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

*,
*::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));
}

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");

Preview