Build a Digital Pet Game - Build a Digital Pet Game

Programming JavaScript
1

Tell us what’s happening:

The second view correctly displays the pet’s name in the element with className=“pet-name”, but the test still fails.
For the PetMood enum, I used a string workaround to pass the test, even though it is part of the code.
How can I pass the test.

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

2

Hey there,

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

When you enter a code, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

Pre-formatted-text
Pre-formatted-text1356×380 401 KB

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (').

3

I have a related issue and I am not sure if I should add a new post. The way I organized the switch between the “form view” (where the pet name is entered) and the “second view” (where the rest of the app is implemented) is a ternary operator (condition ? yes : no). This works as expected but is not accepted by the test runner.

export const PetGame = () => {
  const [name, setName] = useState<string>("");
  return <div>
    <h1>Pet Game</h1>
    {
      name == "" ? 
      <FormView setName={setName}/> : 
      <SecondView name={name}/>
    }
  </div>
};

More precisely, I would expect the following tests to succeed, but they don’t

  • 4. When the input is given a value and the button is pressed, the form should no longer be visible.
    • The FormView component uses setName to (indirectly) hide itself in response to a submit event.
  • 5. The second view should contain an element with class pet-name.
    • SecondView renders the pet name into a <div> with the correct className

Here is the full code for clarity (I didn’t touch the html or css)

const { useState } = React;

type CallBack = (a: string) => void;

const FormView = ({setName}: {setName: CallBack}) => {
  const [input, setInput] = useState<string>("");
  return <form 
    onSubmit = {(e) => {
      e.preventDefault()
      setName(input)
    }}
  >
    <label>
      Choose the pet name
      <input type="text" id="pet-name" value={input} 
       onChange={e => setInput(e.target.value)}
       required/>
    </label>
    <button type="submit">Start Game</button>
  </form>
}

const SecondView = ({name}: {name: string}) => {
  return <div>
    <div className="pet-name">{name}</div>
    <button id="eat-action">EAT</button>
    <button id="play-action">PLAY</button>
    <button id="sleep-action">SLEEP</button>
  </div>
}

export const PetGame = () => {
  const [name, setName] = useState<string>("");
  return <div>
    <h1>Pet Game</h1>
    {
      name == "" ? 
      <FormView setName={setName}/> : 
      <SecondView name={name}/>
    }
  </div>
};
4

yes please create your own topic

If you have a question about a specific challenge as it relates to your written code for that challenge and need some help, click the Help button located on the challenge.

image
image668×186 6.59 KB

The Help button will create a new topic with all code you have written and include a link to the challenge also. You will still be able to ask any questions in the post before submitting it to the forum.

Thank you.

5

For reference: I slightly reworded my response and created a separate post:.Build a Digital Pet Game - Build a Digital Pet Game