Tell us what’s happening:
Hi, hope everyone is doing well. Test 6 isn’t passing even though when I enter the name on the first page the 2nd page contains the name in the correct element. Can someone please tell me where I’ve made a mistake I would greatly appreciate it.
Your code so far
<!-- file: index.html No Changes Made -->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital Pet Game</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tektur:wght@400..900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
<script
data-plugins="transform-modules-umd"
type="text/babel"
src="index.tsx"
></script>
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-modules-umd"
type="text/babel"
data-presets="react"
data-type="module"
>
import { PetGame } from './index.tsx';
ReactDOM.createRoot(document.getElementById('root')).render(<PetGame />);
</script>
</body>
</html>
/* file: index.tsx */
const { useState } = React;
enum PetMood {
HAPPY,
EXCITED,
CONTENT,
SAD,
TIRED,
SICK,
HUNGRY,
}
const moodIcons: Record<PetMood, string> = {
[PetMood.HAPPY]: "😸",
[PetMood.EXCITED]: "😻",
[PetMood.CONTENT]: "😺",
[PetMood.SAD]: "😿",
[PetMood.TIRED]: "😺💤",
[PetMood.SICK]: "🙀",
[PetMood.HUNGRY]: "😾",
}
export const PetGame = () => {
const [petName, setName] = useState("");
const [currentPage, setCurrentPage] = useState("Home");
return (
<>
<header>
<h1>DigiPet</h1>
<p>Pets that don't cause you any trouble</p>
</header>
{currentPage ==="Home" && <HomePage setName={setName} setCurrentPage={setCurrentPage}/>}
{currentPage === "Game" && <GamePage petName={petName}/>}
</>
)
};
const HomePage = ({setName, setCurrentPage}: {setName: (name: string) => void; setCurrentPage: (currentPage: string) => void}) => {
const [inputName, setInputName] = useState("");
const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault();
setName(inputName);
setCurrentPage("Game");
}
return (
<>
<div className='base-container'>
<form className="pet-name" onSubmit={handleSubmit}>
<label htmlFor="pet-name">Name your DigiPet:</label>
<input
id="pet-name"
type="text" onChange={(e) => setInputName(e.target.value)}
minLength={1}
required
value={inputName}
/>
<button id="set-name-btn" type="submit">Adopt DigiPet</button>
</form>
</div>
</>
)
}
const GamePage = ({petName}: {petName: string}) => {
const [energy, setEnergy] = useState(100)
const [hunger, setHunger] = useState(0)
const [happiness, setHappiness] = useState(100)
const [petMood, setMood] = useState("😻");
const petFacts = [
"A genetic mutation prevents cats from tasting sweetness, making them indifferent to sugary foods.",
"Cats have up to 53 loosely connected vertebrae, allowing extreme twisting. By comparison, humans only have 34.",
"Unlike humans, cats regulate heat partly through the pads of their feet.",
"A cat’s body contains about 230 bones, compared to 206 in the human body. Cats have floating clavicles, which helps them squeeze through tight spaces.",
"Both humans and cats have identical regions in their brains that are responsible for emotions.",
"Studies show cats experience separation anxiety similar to dogs and infants.",
"Long-term memory helps cats associate people with positive or negative experiences."
];
function handleMood () {
if (energy < 30 && hunger > 70) {
setMood(moodIcons[PetMood.SICK]);
} else if (energy < 30) {
setMood(moodIcons[PetMood.TIRED]);
} else if (happiness < 30) {
setMood(moodIcons[PetMood.SAD]);
} else if (happiness > 80 && energy > 70) {
setMood(moodIcons[PetMood.EXCITED]);
} else if (happiness > 60) {
setMood(moodIcons[PetMood.HAPPY]);
} else if (hunger > 70) {
setMood(moodIcons[PetMood.HUNGRY]);
} else {
setMood(moodIcons[PetMood.CONTENT]);
}
}
React.useEffect(() => {
const idleInterval = setInterval(() => {
setHappiness(prev => Math.max(prev - 5, 0));
setHunger(prev => Math.min(prev + 5, 100));
}, 10000);
return () => clearInterval(idleInterval);
}, []);
React.useEffect(() => {
handleMood()
}, [hunger, happiness, energy]
)
return (
<>
<div className="game-container">
<div className="base-container info-panel">
<span className="pet-sprite">{petMood}</span>
<h2 className="pet-name">{petName}</h2>
<div className="pet-buttons">
<button id="eat-action" className="pet-button" onClick={() => {
if (hunger > 0) setHunger(hunger - 10);
if (energy < 100) setEnergy(energy + 5);
}}>Eat</button>
<button id="play-action" className="pet-button" onClick={() => {
if (energy > 0) setEnergy(energy - 5);
if (happiness < 100) setHappiness(happiness + 5);
}}>Play</button>
<button id="sleep-action" className="pet-button" onClick={() => {
if (hunger < 100) {
if (hunger <= 90) {
setHunger(hunger + 10);
} else {
setHunger(hunger + 5);
}
}
if (energy < 100) setEnergy(energy + 5);
}}>Sleep</button>
</div>
</div>
</div>
<div className="stats-grid">
<div className="stat-bar stat">
<div className="stat-header">
<div className="stat-label">
<span className="stat-icon">🍽️</span>
<h3 className="stat-name">Hunger</h3>
<span className="stat-value">{hunger}%</span>
</div>
</div>
<div className="stat-progress">
<div className={`stat-fill
${hunger < 35 ? "high" : ""}
${hunger >= 35 && hunger < 65 ? "medium" : ""}
${hunger >= 65 ? "low" : ""}`}
style={{width: `${hunger}%`}}
></div>
</div>
</div>
<div className="stat-bar stat">
<div className="stat-header">
<div className="stat-label">
<span className="stat-icon">😊</span>
<h3 className="stat-name">Happiness</h3>
<span className="stat-value">{happiness}%</span>
</div>
</div>
<div className="stat-progress">
<div className={`stat-fill
${happiness < 35 ? "low" : ""}
${happiness >= 35 && happiness < 65 ? "medium" : ""}
${happiness >= 65 ? "high" : ""}`} style={{width: `${happiness}%`}}
></div>
</div>
</div>
<div className="stat-bar stat">
<div className="stat-header">
<div className="stat-label">
<span className="stat-icon">⚡</span>
<h3 className="stat-name">Energy</h3>
<span className="stat-value">{energy}%</span>
</div>
</div>
<div id="energy-bar" className="stat-progress">
<div className={`stat-fill
${energy < 35 ? "low" : ""}
${energy >= 35 && energy < 65 ? "medium" : ""}
${energy >= 65 ? "high" : ""}`} style={{width: `${energy}%`}}></div>
</div>
</div>
</div>
<div className="base-container info-panel">
<span><strong>Species: Cat</strong></span>
<p id="pet-fact"><strong>Pet Fact:</strong> {petFacts[Math.floor(Math.random() * 7)]}</p>
</div>
</>
)
}
/* file: styles.css No Changes Made*/
:root {
/* Backgrounds */
--bg-gradient-start: #dbeafe;
--bg-gradient-mid: #faf5ff;
--bg-gradient-end: #fce7f3;
/* Text */
--text-primary: #1f2937;
--text-muted: #6b7280;
--text-muted-2: #9ca3af;
/* Card / surface */
--card-bg-translucent: rgba(255, 255, 255, 0.6);
--card-bg-solid: rgba(255, 255, 255, 0.8);
/* Accent / brand */
--accent-purple: #8b5cf6;
--accent-purple-dark: #7c3aed;
/* Actions */
--action-feed: #10b981;
--action-feed-dark: #059669;
--action-play: #3b82f6;
--action-play-dark: #2563eb;
--action-sleep: #8b5cf6;
--action-sleep-dark: #7c3aed;
--action-heal: #ec4899;
--action-heal-dark: #db2777;
/* Stats */
--stat-high: #10b981;
--stat-medium: #f59e0b;
--stat-low: #ef4444;
/* UI greys */
--ui-bg-light: #e5e7eb;
--ui-fill: #8b5cf6; /* used for exp fill as accent */
/* Shadows */
--shadow-strong: rgba(0, 0, 0, 0.25);
--shadow-soft: rgba(0, 0, 0, 0.1);
}
html {
/*color-scheme: light dark;*/
font-family: system-ui;
display: flex;
justify-content: center;
font-family:
-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
"Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: linear-gradient(135deg, #dbeafe 0%, #faf5ff 50%, #fce7f3 100%);
min-height: 100vh;
padding: 1rem;
}
header {
text-align: center;
margin-bottom: 2rem;
}
body {
max-width: 400px;
}
.base-container {
background: rgba(255, 255, 255, 0.6);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 1.5rem;
padding: 2rem;
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
.pet-name {
display: flex;
flex-direction: column;
justify-content: space-evenly;
gap: .7rem;
align-items: center;
}
}
#pet-name {
border-radius: 1.5rem;
padding: .4rem;
}
.game-container {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
margin-bottom: 1.5rem;
}
.stat-bar {
background: rgba(255, 255, 255, 0.8);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
border-radius: 0.75rem;
padding: 1rem;
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
}
.stat-bar:hover {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.stat-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 0.5rem;
}
.stat-label {
display: flex;
align-items: center;
gap: 0.5rem;
}
.stat-icon {
font-size: 1.25rem;
}
.stat-name {
font-weight: 500;
color: #374151;
}
.stat-value {
font-weight: bold;
color: #1f2937;
}
.stat-progress {
width: 100%;
height: 0.75rem;
background: #e5e7eb;
border-radius: 9999px;
overflow: hidden;
}
.stat-fill {
height: 100%;
transition: width 0.5s ease-out;
border-radius: 9999px;
}
.stat-fill.high {
background: #10b981;
}
.stat-fill.medium {
background: #f59e0b;
}
.stat-fill.low {
background: #ef4444;
}
.pet-buttons {
width: auto;
display: flex;
flex-direction: row;
gap: 1rem;
}
.pet-buttons .pet-button {
min-width: 80px;
background: #c2214a;
color: white;
border-radius: 13%;
border-style: solid;
border-color: #870b04;
box-shadow: rgba(120, 25, 23, 0.2) 2px 2px 4px 2px;
&:active {
transform: scale(0.95);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) inset;
}
text-align: center;
cursor: pointer;
padding: 0.5rem 1rem;
}
.pet-sprite {
font-size: xxx-large;
text-align: center;
}
.data-management * {
margin: 0 0.5rem 0 0;
}
.info-panel {
text-align: center;
}
.info-panel #hud,
.info-panel .start-questions {
display: flex;
align-items: center;
flex-direction: column;
gap: 1rem;
}
.info-panel #hud p {
margin: 0rem;
}
.info-panel .start-questions div * {
margin: 0 0.5rem 0 0;
}
#pet-fact {
color: var(--text-muted-2);
margin: 0 0 0.5rem 0;
}
#set-name-btn {
display: inline-block;
padding: 14px 28px;
font-size: 1.15rem;
font-weight: 600;
background: linear-gradient(135deg, #6b8cff, #5ec2ff);
color: #fff;
border: none;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(92, 132, 255, 0.25);
cursor: pointer;
transition:
transform 0.08s ease,
box-shadow 0.12s ease,
opacity 0.12s;
}
#set-name-btn:hover {
opacity: 0.98;
}
#set-name-btn:active,
#set-name-btn.pressed {
transform: translateY(2px) scale(0.995);
box-shadow: 0 3px 8px rgba(92, 132, 255, 0.18);
}
#set-name-btn:focus {
outline: 3px solid rgba(94, 190, 255, 0.28);
outline-offset: 2px;
}
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/152.0.0.0 Safari/537.36
Challenge Information:
Build a Digital Pet Game - Build a Digital Pet Game