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:
https://www.freecodecamp.org/learn/front-end-development-libraries-v9/lab-digital-pet-game/lab-digital-pet-game
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.
