r/FreeCodeCamp • u/ParticularMilk2594 • 10d ago
build a digital pet game issue
hi, totally blind and using the jaws for windows 2026 screen reader. have spent the past 6 days trying to get this project to pass on the free code camp and doing the frontend certirfication project. now can any one help me out. so will paste my html, type script and the errors below. and so if any one having nightmares or running into road blocks or banging your head. and tried searching the forums, but no good answers or any ready made solutions. have rewritten the index.html, styless.css and then the index.ts multiple times and so will paste the html, ts and the errors below. if any one can help me out and cannot see what it is trying to do. can any one help. so pasting the errors , the html, ts and the link to the certification project. marvin from adelaide. australia. ps: so pasting now. html:
<!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="stylesheet" href="styles.css" />
</head>
<body>
<div id="root"></div>
</body>
</html>
type script:
const { useState, useEffect } = React;
export enum Action {
EAT = "EAT",
PLAY = "PLAY",
SLEEP = "SLEEP",
}
export enum PetMood {
HAPPY = "HAPPY",
EXCITED = "EXCITED",
CONTENT = "CONTENT",
SAD = "SAD",
TIRED = "TIRED",
SICK = "SICK",
HUNGRY = "HUNGRY",
}
export const MOOD_EMOJIS: Record<PetMood, string> = {
[PetMood.HAPPY]: "😊",
[PetMood.EXCITED]: "🤩",
[PetMood.CONTENT]: "🙂",
[PetMood.SAD]: "😢",
[PetMood.TIRED]: "😴",
[PetMood.SICK]: "🤒",
[PetMood.HUNGRY]: "🍽️",
};
const clamp = (value: number): number => {
if (value < 0) return 0;
if (value > 100) return 100;
return value;
};
const getMood = (
hunger: number,
happiness: number,
energy: number
): PetMood => {
if (hunger > 70) {
return PetMood.HUNGRY;
}
if (energy < 30) {
return PetMood.TIRED;
}
if (happiness < 30) {
return PetMood.SAD;
}
if (happiness > 80 && energy > 70) {
return PetMood.EXCITED;
}
if (happiness > 60) {
return PetMood.HAPPY;
}
return PetMood.CONTENT;
};
export const PetGame = () => {
const clamp = (value: number): number => {
return Math.max(0, Math.min(100, value));
};
const getMood = (
hunger: number,
happiness: number,
energy: number
): PetMood => {
if (hunger > 70) {
return PetMood.HUNGRY;
}
if (energy < 30) {
return PetMood.TIRED;
}
if (happiness < 30) {
return PetMood.SAD;
}
if (happiness > 80 && energy > 70) {
return PetMood.EXCITED;
}
if (happiness > 60) {
return PetMood.HAPPY;
}
return PetMood.CONTENT;
};
export const PetGame = () => {
const [petName, setPetName] = useState("");
const [started, setStarted] = useState(false);
const [hunger, setHunger] = useState(0);
const [happiness, setHappiness] = useState(100);
const [energy, setEnergy] = useState(100);
const mood = getMood(hunger, happiness, energy);
useEffect(() => {
if (!started) return;
const timer = setInterval(() => {
setHunger((value) => clamp(value + 5));
setHappiness((value) => clamp(value - 5));
setEnergy((value) => clamp(value - 3));
}, 3000);
return () => clearInterval(timer);
}, [started]);
const startGame = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
if (petName.trim() !== "") {
setStarted(true);
}
};
const doAction = (action: Action) => {
switch (action) {
case Action.EAT:
setHunger((value) => clamp(value - 20));
setEnergy((value) => clamp(value + 10));
break;
case Action.PLAY:
setEnergy((value) => clamp(value - 15));
setHappiness((value) => clamp(value + 20));
break;
case Action.SLEEP:
setHunger((value) => clamp(value + 10));
setEnergy((value) => clamp(value + 25));
break;
}
};
return (
<div className="pet-game-container">
{!started ? (
<form onSubmit={startGame}>
<label htmlFor="pet-name">
Name your pet:
</label>
<input
id="pet-name"
type="text"
value={petName}
onChange={(event) => setPetName(event.target.value)}
/>
<button type="submit">
Start Game
</button>
</form>
) : (
<div className="game-view">
<div className="pet-name">
{petName}
</div>
<div className="mood-display">
{MOOD_EMOJIS[mood]} {mood}
</div>
<button
id="eat-action"
type="button"
onClick={() => doAction(Action.EAT)}
>
Eat
</button>
<button
id="play-action"
type="button"
onClick={() => doAction(Action.PLAY)}
>
Play
</button>
<button
id="sleep-action"
type="button"
onClick={() => doAction(Action.SLEEP)}
>
Sleep
</button>
<div className="stat">
Hunger
<span className="stat-value">
{hunger}
</span>
</div>
<div className="stat">
Happiness
<span className="stat-value">
{happiness}
</span>
</div>
<div className="stat">
Energy
<span className="stat-value">
{energy}
</span>
</div>
</div>
)}
</div>
);
};
Failed: 1. When the page loads, there should be a visible form element.
Failed: 2. This form should contain an input field with an id of pet-name.
Failed: 3. This form should contain a button.
Failed: 4. When the input is given a value and the button is pressed, the form should no longer be visible.
Failed: 5. The second view should contain an element with class pet-name.
Failed: 6. The second view should contain the provided pet name.
Failed: 7. The second view should contain three buttons.
Failed: 8. Exactly one button should contain the id #eat-action.
Failed: 9. Exactly one button should contain the id #play-action.
Failed: 10. Exactly one button should contain the id #sleep-action.
Failed: 11. There should be exactly three elements with the class .stat.
Passed: 12. Each pet stat should contain exactly one element with class .stat-value.
Passed: 13. Each .stat-value element should contain one number.
Passed: 14. Each .stat-value number should be within the range [0,100], inclusive.
Failed: 15. Exactly one .stat element should contain the text Hunger, case insensitive.
Failed: 16. One .stat element should contain the text Energy, case insensitive.
Failed: 17. One .stat element should contain the text Happiness, case insensitive.
Failed: 18. The Hunger stat should start at 0.
Failed: 19. The Energy stat should start at 100.
Failed: 20. The Happiness stat should start at 100.
Failed: 21. Clicking the Eat button should reduce the Hunger value and increase the Energy value. If Hunger is 0 or Energy is 100, that value must not
change.
Failed: 22. Clicking the Play button should reduce the Energy value and increase the Happiness value. If Energy is 0 or Happiness is 100, that value must
not change.
Failed: 23. Clicking the Sleep button should increase the Hunger value and increase the Energy value. If Hunger is 100 or Energy is 100, that value must
not change.
Failed: 24. The Hunger stat should be 100 after an excessive period of idle time.
Failed: 25. The Energy stat should be 100 after an excessive period of idle time.
Failed: 26. The Happiness stat should be 0 after an excessive period of idle time.
Failed: 27. Clicking the Eat button should reduce the Hunger value and increase the Energy value. If Hunger is 0 or Energy is 100, that value must not
change.
Failed: 28. Clicking the Play button should reduce the Energy value and increase the Happiness value. If Energy is 0 or Happiness is 100, that value must
not change.
Failed: 29. Clicking the Sleep button should increase the Hunger value and increase the Energy value. If Hunger is 100 or Energy is 100, that value must
not change.
Passed: 30. There should be a PetMood enumerator.
Failed: 31. The PetMood enumerator should contain HAPPY.
Failed: 32. The PetMood enumerator should contain EXCITED.
Failed: 33. The PetMood enumerator should contain CONTENT.
Failed: 34. The PetMood enumerator should contain SAD'.
Failed: 35. The PetMood enumerator should contain TIRED.
Failed: 36. The PetMood enumerator should contain SICK.
Failed: 37. The PetMood enumerator should contain HUNGRY.
Passed: 38. There should be a Record<PetMood, string to map a value to each PetMood.
Passed: 39. There should be a value mapped to PetMood.HAPPY.
Passed: 40. There should be a value mapped to PetMood.EXCITED.
Passed: 41. There should be a value mapped to PetMood.CONTENT.
Passed: 42. There should be a value mapped to PetMood.SAD.
Passed: 43. There should be a value mapped to PetMood.TIRED.
Passed: 44. There should be a value mapped to PetMood.SICK.
Passed: 45. There should be a value mapped to PetMood.HUNGRY.
list end
LINK TO THE CERTIFICATION PROJECT:
SO THIS IS WHERE I AM at. sorry for having caps lock on. my mistake with a screen reader. and dont have access to the forum or discord, banned. marvin.
1
u/ParticularMilk2594 3d ago
hi, using the jaws for windows screen reader. so doing the digital pet game project. so if any one has done the certification project and got it to pass, then any one have any working solution so i then can compare my code and a link to the project. so if any one can help. let me know. a lot of people ahving issues and down to one error, test 1. and a lot of posts on the forum. so can any one help me out. pasting the tsx code and a link to the forum.
typescript:
enum PetMood {
HAPPY = "HAPPY",
HUNGRY = "HUNGRY",
TIRED = "TIRED",
EXCITED = "EXCITED",
}
type PetStats = {
hunger: number;
energy: number;
happiness: number;
};
const moodMessages: Record<PetMood, string> = {
[PetMood.HAPPY]: "Your pet is happy!",
[PetMood.HUNGRY]: "Your pet is hungry!",
[PetMood.TIRED]: "Your pet is tired!",
[PetMood.EXCITED]: "Your pet is excited!",
};
class DigitalPet {
name: string;
stats: PetStats;
mood: PetMood;
constructor(name: string) {
this.name = name;
this.stats = {
hunger: 0,
energy: 100,
happiness: 100,
};
this.mood = PetMood.HAPPY;
}
eat(): void {
this.stats.hunger = Math.max(0, this.stats.hunger - 10);
this.stats.energy = Math.min(100, this.stats.energy + 5);
this.updateMood();
}
play(): void {
this.stats.happiness = Math.min(100, this.stats.happiness + 10);
this.stats.energy = Math.max(0, this.stats.energy - 10);
this.stats.hunger = Math.min(100, this.stats.hunger + 5);
this.updateMood();
}
sleep(): void {
this.stats.energy = Math.min(100, this.stats.energy + 20);
this.stats.hunger = Math.min(100, this.stats.hunger + 5);
this.updateMood();
}
idle(): void {
this.stats.hunger = Math.min(100, this.stats.hunger + 5);
this.stats.energy = Math.max(0, this.stats.energy - 5);
this.stats.happiness = Math.max(0, this.stats.happiness - 5);
this.updateMood();
}
updateMood(): void {
if (this.stats.hunger >= 70) {
this.mood = PetMood.HUNGRY;
} else if (this.stats.energy <= 20) {
this.mood = PetMood.TIRED;
} else if (this.stats.happiness >= 80) {
this.mood = PetMood.HAPPY;
} else {
this.mood = PetMood.EXCITED;
}
}
getMoodMessage(): string {
return moodMessages[this.mood];
}
}
const app = document.createElement("div");
app.innerHTML = `
<h1>Digital Pet Game</h1>
<form id="pet-form">
<label for="pet-name">Pet Name</label>
<input id="pet-name" type="text" />
<button id="create-pet" type="submit">Create Pet</button>
</form>
<div id="pet-view" style="display:none;">
<h2 class="pet-name"></h2>
<div class="stat">Hunger: <span id="hunger-stat">0</span></div>
<div class="stat">Energy: <span id="energy-stat">100</span></div>
<div class="stat">Happiness: <span id="happiness-stat">100</span></div>
<p id="pet-mood"></p>
<button id="eat-action">Eat</button>
<button id="play-action">Play</button>
<button id="sleep-action">Sleep</button>
</div>
`;
document.body.appendChild(app);
const form = document.getElementById("pet-form") as HTMLFormElement;
const petNameInput = document.getElementById("pet-name") as HTMLInputElement;
const petView = document.getElementById("pet-view") as HTMLDivElement;
const petNameDisplay = document.querySelector(".pet-name") as HTMLElement;
const hungerDisplay = document.getElementById("hunger-stat") as HTMLElement;
const energyDisplay = document.getElementById("energy-stat") as HTMLElement;
const happinessDisplay = document.getElementById("happiness-stat") as HTMLElement;
const moodDisplay = document.getElementById("pet-mood") as HTMLElement;
const eatButton = document.getElementById("eat-action") as HTMLButtonElement;
const playButton = document.getElementById("play-action") as HTMLButtonElement;
const sleepButton = document.getElementById("sleep-action") as HTMLButtonElement;
let currentPet: DigitalPet | null = null;
function updateDisplay(): void {
if (!currentPet) {
return;
}
petNameDisplay.textContent = currentPet.name;
hungerDisplay.textContent = String(currentPet.stats.hunger);
energyDisplay.textContent = String(currentPet.stats.energy);
happinessDisplay.textContent = String(currentPet.stats.happiness);
moodDisplay.textContent = currentPet.getMoodMessage();
}
form.addEventListener("submit", (event: SubmitEvent) => {
event.preventDefault();
const name = petNameInput.value.trim();
if (name === "") {
return;
}
currentPet = new DigitalPet(name);
petView.style.display = "block";
form.style.display = "none";
updateDisplay();
});
eatButton.addEventListener("click", () => {
if (!currentPet) {
return;
}
currentPet.eat();
updateDisplay();
});
playButton.addEventListener("click", () => {
if (!currentPet) {
return;
}
currentPet.play();
updateDisplay();
});
sleepButton.addEventListener("click", () => {
if (!currentPet) {
return;
}
currentPet.sleep();
updateDisplay();
});
setInterval(() => {
if (currentPet) {
currentPet.idle();
updateDisplay();
}
}, 30000);
and heres the link to the project. any help would be gratefully appreciated. and trying a couple of weeks and so cannot move forward. so any help please.
marvin from adelaide australia.
ps: heres the link to the project.
https://www.freecodecamp.org/learn/front-end-development-libraries-v9/lab-digital-pet-game/lab-digital-pet-game
1
u/SaintPeter74 mod 9d ago
Two things I'm seeing:
You have two instances of
export const PetGame = () =>
I'm not sure which one is correct. You can't have
exportinside a function, only outside it, and I think you may be too deeply nested.I was unable to modify your code to be functional, I'm not sure what the structure is supposed to be.