Build a Digital Pet Game - Build a Digital Pet Game

aggreykwamboka62 · May 29, 2026, 10:58am

Tell us what’s happening:

I am stuck on the Build a Digital Pet Game project in the Front-End Development Libraries Certification.

I have rewritten index.html, styles.css, and index.tsx multiple times, but the FCC test suite still fails most tests even when the code appears correct.

Current issue:
The app is not being detected properly by the FCC test runner. The tests fail on:

Initial form rendering
Input with id pet-name
Form submission hiding the first view
Rendering second game view
Detecting `

Your code so far

<!-- file: index.html -->

/* file: styles.css */

/* file: index.tsx */

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 Digital Pet Game - Build a Digital Pet Game

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-digital-pet-game/68c362b379059c388d3874f2.md at main · freeCodeCamp/freeCodeCamp · GitHub

dhess · May 29, 2026, 12:09pm

I went ahead and combined your posts for you. In the future, just reply to the original thread to add further updates.

dhess · May 29, 2026, 12:11pm

Hey there,

Please update the message to include your code. The code was too long to be automatically inserted by the help button.

There are two ways you can format your code to make it easier to read and test:

After you copy/paste your code into the editor, select it by dragging your cursor over it then click the (</>) button in the toolbar to automatically wrap your code in backticks. (You can click on the animated demo image below to enlarge it.)

Manually add three backticks on a new line above your code and on a new line after your code. Note that a backtick is NOT the same as a single quote('). To find the backtick key on your keyboard, see this post.

To see changes to your post as you make them, you can click the (M+) button on the toolbar to bring up the rich text editor:

aggreykwamboka62 · May 29, 2026, 12:33pm

Tell us what’s happening:

I am unable to complete this project despite multiple attempts.

I need help because my solution is not passing the FreeCodeCamp tests, even after rewriting everything several times. I suspect I am missing required structure or exact test requirements.

Please provide the full correct working solution for all files so I can understand where I am going wrong.

Here are the current project files I am working with:

index.tsx

const { useState } = React;

export const PetGame = 

### Your code so far


```html
<!-- file: index.html -->

/* file: styles.css */
: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 {
    text-align: center;
  }
}

.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;
}

/* file: index.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="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>

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 Digital Pet Game - Build a Digital Pet Game

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-digital-pet-game/68c362b379059c388d3874f2.md at main · freeCodeCamp/freeCodeCamp · GitHub

dhess · May 29, 2026, 1:24pm

Please do not create duplicate topics for the same challenge/project question(s). If you need more help then respond back to the original topic you created with your follow up questions and/or your updated code and question.

The duplicate topics have been unlisted.

Thank you.

Topic		Replies	Views
Build a Digital Pet Game - Build a Digital Pet Game JavaScript	1	58	May 16, 2026
Need review on my simon game Code Feedback	1	529	June 1, 2021
Feedback request: Gaming survey form Code Feedback	3	431	February 6, 2021
Project review JS game Code Feedback	2	405	February 6, 2021
My Tic-tac-toe with React Code Feedback	1	414	February 17, 2021

Build a Digital Pet Game - Build a Digital Pet Game

Tell us what’s happening:

Your code so far

Your browser information:

Challenge Information:

Tell us what’s happening:

index.tsx

Your browser information:

Challenge Information:

Related topics