Tell us what’s happening:
export const MoodBoardItem = () => {
return (
)
} Why this does’nt pass for MoodBoardItem component should return a div with a class of mood-board-item at its top-level element.
Your code so far
<!-- 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 const MoodBoardItem = () => {
return (
<div className="mood-board-item">
</div>
)
}
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/148.0.0.0 Safari/537.36
Challenge Information:
Build a Mood Board - Build a Mood Board