Construir un Tablero de Estado de Ánimo - Construir un Tablero de Inspiración

Español JavaScript
1

Cuéntanos qué está pasando:

Nose porque no pasa el test 9 y 10, si los el componente MoodBoardItem se renderiza bien en MoodBoard, y MoodBoard se renderiza bien en el Root. porque no pasa ?

Tu código hasta el momento

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mood Board</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { MoodBoard } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <MoodBoard />
      );
    </script>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #ffffcc;
}

.mood-board-heading {
  text-align: center;
  font-size: 2.5em;
  color: #333;
  margin-top: 20px;
}

.mood-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.mood-board-item {
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  height: 250px;
}

.mood-board-image {
  border-radius: 5px;
  width: 180px;
  height: 150px;
  object-fit: cover;
}

.mood-board-text {
  margin-top: 20px;
  font-size: 1.2em;
}

/* file: index.jsx */
export function MoodBoardItem ({ color, image, description }) {
  const moodBoardStyles = {
    backgroundColor: color, 
  };

  return (
    <div className="mood-board-item" style={moodBoardStyles}>
    <img className="mood-board-image" src={image} alt={description}></img>
    <h3 className="mood-board-text">{description}</h3>
    </div>
  );
}


export function MoodBoard (){

  const moodBoardList = [
    {
    id:1,  
    color: "#FF0000",
    image: "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg",
    description: "Bosque frondoso con un camino rodeado de árboles altos."},
    {
    id:2,
    color: "#0000FF",
    image: "https://cdn.freecodecamp.org/curriculum/labs/shore.jpg",
    description: "Costa rocosa con agua cristalina y mar tranquilo."},
    {
    id:3,
    color: "#008000",
    image: "https://cdn.freecodecamp.org/curriculum/labs/grass.jpg",
    description: "Vista del mar azul con flores en primer plano."},
    {
    id:4,
    color: "#FFA500",
    image: "https://cdn.freecodecamp.org/curriculum/labs/ship.jpg",
    description: "Vista del mar azul con flores en primer plano."},
     {
    id:5,
    color: "#800080",
    image: "https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg",
    description: "Vista del mar azul con flores en primer plano."},
     {
    id:6,
    color: "#FFFF00",
    image: "https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg",
    description: "Vista del mar azul con flores en primer plano."},
  ]
  return(
    <div>
      <h1 className="mood-board-heading">
        Destination Mood Board
      </h1>
      {moodBoardList.map((item) => (
        <MoodBoardItem
        key={item.id}
        color={item.color}
        image={item.image}
        description={item.description}
        />
      ))}
    </div>
  )
}

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/145.0.0.0 Safari/537.36 Edg/145.0.0.0

Información del Desafío:

Construir un Tablero de Estado de Ánimo - Construir un Tablero de Inspiración

2

Tu codígo debería funcionar teóricamente , yo pude resolverlo de esta manera :

removed by moderator

3

It is great that you solved the challenge, but instead of posting your full working solution, it is best to stay focused on answering the original poster’s question(s) and help guide them with hints and suggestions to solve their own issues with the challenge. How to Help Someone with Their Code Using the Socratic Method

We are trying to cut back on the number of spoiler solutions found on the forum and instead focus on helping other campers with their questions and definitely not posting full working solutions.

4

creo q te borraron la respuesta, al final me quede sin la solución jaja

5

Al final, no obtuve la solución

6

Si tal cual me informaron que estaban tratando de no brindar las respuestas completas en los comentarios lo cual es correcto, en este caso tu lógica es acertada, el test debería pasar normalmente y es una buena práctica, lo que tenés que hacer en este ejercicio es pasar la url de la imagen como argumento en el componente, no asignarla en el objeto dentro de image. en este caso sería algo como image = “url…..“. esa es la única corrección en tu código.

7

hola maxy, perdon por la tardanza. Vos decis q le pase directamente la URL en el map? Eso haria q todas las cards tengan la misma imagen. Igualmente lo probe y no funciono.