Build an Event RSVP - Build an Event RSVP

JavaScript
1

Tell us what’s happening:

My test cases from 16 to 19 fails here .
Failed:16. After submission, there should be an element on the page indicating the state of the email input. Failed:17. After submission, there should be an element on the page indicating the state of the number of attendees input. Failed:18. After submission, there should be an element on the page indicating the state of the dietary preferences input. Failed:19. After submission, there should be an element on the page indicating the state of the addition

Your code so far

<!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>


* {
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f4f6f8;
}

.container {
  max-width: 420px;
  margin: 40px auto;
  padding: 24px;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

h2 {
  margin-bottom: 20px;
  text-align: center;
  color: black;
}

form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
  color: black;
}

input[type="text"],
input[type="email"],
input[type="number"] {
  padding: 10px;
  margin-top: 6px;
  border-radius: 4px;
  border: 1px solid #ccc;
  font-size: 14px;
}

input:focus {
  outline: none;
  border-color: #1976d2;
}

input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 8px;
}

button {
  margin-top: 20px;
  padding: 10px;
  background: #198765;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}

button:hover {
  background: #198749;
}



const { useState } = React;

export function EventRSVPForm() {

const[name,setName]=useState('')
const[email,setEmail]=useState('')
const[attendees,setAttendees]=useState('')
const[bringAdditional,setBringAdditional]=useState(false)
const[displayPref,setDisplayPref]=useState('')
const[isSubmitted,setIsSubmitted]=useState(false)
const handleSubmit=(e)=>
{
   e.preventDefault()
   setIsSubmitted(true)
}
  return(

    <div className="container">

      {!isSubmitted? <form method="post" onSubmit={handleSubmit} >
          <h2>Event RSVP Form</h2>
          <label>
             Name
          <input type="text" placeholder="name" onChange={(e)=>setName(e.target.value)} value={name} required />
          </label>
          <label>
          Email <input type="email" placeholder="email" value={email} onChange={(e)=>setEmail(e.target.value)} required />
          </label>
         <label>
          Number of Attendees: <input type="number" placeholder="Number of Attendees" onChange={(e)=>setAttendees(e.target.value)} required min="1" value={attendees} />
          </label>
          
          
          <label>
             Dietary Preferences:
          <input type="text" placeholder="Dietary Preferences (optional)" onChange={(e)=>setDisplayPref(e.target.value)} value={displayPref} />
          </label>
          <label>Bringing additional guests?
          <input
  type="checkbox"
  checked={bringAdditional}
  onChange={(e) => setBringAdditional(e.target.checked)}
/>
</label>
          <button type="submit" >Submit RSVP</button>
       </form>: 

   <>
  <h3>RSVP Submitted!</h3>

  <p id="nameDisplay">{name}</p>

  <p id="emailDisplay">{email}</p>

  <p id="attendeesDisplay">{attendees}</p>

  <p id="dietaryDisplay">{displayPref}</p>

  <p id="additionalGuestsDisplay">
    {bringAdditional.toString()}
  </p>
</>




       
}
      
    </div>
  )
}

Your browser information:

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

Challenge Information:

Build an Event RSVP - Build an Event RSVP

2

Here are some debugging steps you can follow. Focus on one test at a time:

So, for test 16:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.