Construir una Aplicación para Contar Historias - Paso 9

Español JavaScript
1

Cuéntanos qué está pasando:

I’m having a problem with the language of the example because the FCC requires exercises with text in English, but the example contains text in Spanish. The problem is that neither the Spanish nor the English versions work.

Tu código hasta el momento

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


// User Editable Region

const storyObj = {
  scary: {
    story: "Deep in the dark forest, a group of friends stumbled upon an old, abandoned cabin. Upon entering, they awakened a malevolent entity that had lain dormant for centuries.",
    borderColor: "#ee3b2b"
  },
  funny: {
    story: "On a camping trip, Mark decided to showcase his culinary skills by cooking over an open fire. However, his attempt resulted in him scorching both the dinner and his own eyebrows.",
    borderColor: "#f1be32"
  },
  adventure: {
    story: "Lost in the heart of the Amazon rainforest, Sarah and Jake stumbled upon an ancient temple. They braved deadly traps and encountered exotic wildlife, all while deciphering cryptic clues left by a mysterious civilization.",
    borderColor: "#acd157"
  }
};

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

Información de tu navegador:

El agente de usuario es: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/146.0.0.0 Safari/537.36

Información del Desafío:

Construir una Aplicación para Contar Historias - Paso 9

2

Hi @rodrigocofrerod18 ,

Sorry to hear you are having translation issues again. To get you past this, here are the stories that should work:

scary: “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.”

funny: “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.”

adventure: “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.”

Happy coding!