Build an Event RSVP - Build an Event RSVP

JavaScript
1

Tell us what’s happening:

  1. After submission, there should be an element on the page indicating the state of the additional guests input.

Help please. I’ve display the state of the additional guests input exactly as the example and it gives me the message Yes when i checked the box, or the other way. I try to give ID or put the “option” in span element but to no result of completion. Sometime the task is strict, but i have no other idea to correct it

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Event RSVP</title>
    <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.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { EventRSVPForm } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <EventRSVPForm />
      );
    </script>
  </body>
</html>

/* file: styles.css */
:root {
  margin: 0;
  padding: 0;
  background-color: rgb(219, 219, 219);
}

.form-container {
  background-color: rgb(0, 170, 255);
  display: flex;
  flex-direction: column;
  width: 60vw;
  height: 60vh;
  border-radius: 10px;
  font-family: arial;
  margin: 20px auto;
  padding: 20px;
  gap: 15px;
  box-shadow: 5px 5px 5px grey;
}

input {
  height: 20px;
  width: 60vw;
}

.display-msg {
  background-color: rgb(0, 170, 255);
  margin: 20px auto;
  width: 60vw;
  height: 30vh;
  border-radius: 10px;
  font-family: arial;
  gap: 5px;
}



/* file: index.jsx */
const { useState } = React;

export function EventRSVPForm() {
  const [name,setName] = useState("");
  const [email,setEmail] = useState("");
  const [attendees, setAttendees] = useState("");
  const [dietary, setDietary] = useState("");
  const [isChecked, setIsChecked] = useState(false);
  const [submittedData, setSubmittedData] = useState(null);

  const handleSubmit = (e) => {
    e.preventDefault();

    setSubmittedData({
      name,
      email,
      attendees,
      dietary,
      isChecked,
    });

    setName('');
    setEmail('');
    setAttendees(1);
    setDietary('');
    setIsChecked(false);
  }

  return (
    <div>
      <form className="form-container" onSubmit={handleSubmit}>
        <label>Name: 
          <input type="text" placeholder="Your name" value={name} onChange={(e) => setName(e.target.value)} required/>
        </label>
        <label>Email:
          <input type="email" placeholder="Your Email Address" value={email} onChange={(e) => setEmail(e.target.value)} required/>
        </label>
        <label>Number of Attendees:
          <input type="number" placeholder="Attendees number" value={attendees} onChange={(e) => setAttendees(e.target.value)} required/>
        </label>
        <label>Dietary Preferences:
          <input type="text" placeholder="Dietary Preferances (optional)" value={dietary} onChange={(e) => setDietary(e.target.value)}/>
        </label>
        <label>Bringing Additional Guests?
          <input type="checkbox" checked={isChecked} onChange={(e) => setIsChecked(e.target.checked)}/>
        </label>
        <button type="submit">Submit Your RSVP</button>
      </form>
      { submittedData &&
      <div className="display-msg">
        <h2>RSVP Submitted!</h2>
        <p>Name: {submittedData.name} </p>
        <p>Email: {submittedData.email}</p>
        <p>Number of attendees: {submittedData.attendees}</p>
        <p>Dietary preferences: {submittedData.dietary}</p>
        <p id="additional-guests">Bringing additional guests: <span data-testid="additional-guests-state">{submittedData.isChecked ? "Yes" : "No"}</span></p>
      </div>
      }
    </div>
  );
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36

Challenge Information:

Build an Event RSVP - Build an Event RSVP

2

Hi @halfihalfian182

I think the number of attendees determines whether or not you are bringing additional guests, not a check box.

Happy coding

3

So should I put number of attendees instead? Like this?

//

Bringing additional guests: {submittedData.attendees > 1 ? “Yes” : “No”}

4

I’ve tried it but not passing yet. All other components from display confirmation message is pass except the last part which is additional guest with the checkbox. I’ll try it on VSC to find the error