Tell us what’s happening:
My code achieves the desired result but it fails tests 15 & 17 ( return state of email and dietary pref in a new element upon submission). However, it passes tests 14, 16, 17 ( return state of name, number of attendees, additional guests) which are structured the same way: changed value updates the state and clicking submit reveals the div with all of the state values.
I’ve tried adding toString() to email, and passing a ternary operator to dietary prefs but the tests still fail.
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" />
<link href="https://fonts.googleapis.com/css2?family=Goldman&family=Rubik:wght@300;400;500;700&display=swap" rel="stylesheet">
<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 */
*, *:before, *:after{
width: vw;
height: vh;
}
body {
display: flex-column;
padding: 20px;
overflow: auto
}
.container {
width: 450px;
height: 380px;
background: #a0faffe6;
border-radius: 10px;
padding: 20px;
display: flex;
flex-flow: column;
box-shadow: inset 0px 0px 7px white;
}
.container h1 {
text-align: center;
font-family: goldman;
font-size: 25px;
transform: scale(1.4);
padding: 10px;
}
label {
display: block;
padding: 5px;
font-family: rubik;
font: bold;
}
.input {
margin: auto 10px;
padding: 4px 4px;
background: rgba(243, 255, 255, 0.345);
border: 1px solid white;
border-radius: 5px;
font-family: rubik;
}
.input-checkbox {
margin: auto 8px;
}
.submit-btn {
margin: 40px auto;
padding: 8px 15px;
border: 1px solid white;
border-radius: 8px;
background: white;
font-family: rubik;
display: flex;
justify-content: center;
}
.submit-btn:hover {
/* background: rgb(244, 252, 252); */
box-shadow: 0px 0px 8px rgb(6, 230, 255);
}
.return-div {
margin: 10px;
padding: 10px;
font-family: rubik;
}
.return-div h2 {
text-align: center;
font-family: goldman;
}
/* file: index.jsx */const { useState } = React;
export function EventRSVPForm() {
const [name, setName] = useState("");
const [email, setEmail] = useState("");
const [numAttendees, setNumAttendees] = useState("");
const [dietaryPref, setDietaryPref] = useState("");
const [addGuests, setAddGuests] = useState(false)
const [isVisible, setIsVisible] = useState(false);
const toggleVisibility = () => {
setIsVisible(!isVisible)
};
const handleSubmit = (e) => {
e.preventDefault()
toggleVisibility()
}
return (
<div className="container">
<h1>RSVP Event Form</h1>
<form onSubmit={handleSubmit}>
<label>
Name:
<input
className="input"
type="text"
placeholder="Name"
value={name}
onChange={e => setName(e.target.value)}
required
/>
</label>
<label>
Email:
<input
className="input"
type="email"
placeholder="Email"
value={email}
onChange={e => setEmail(e.target.value)}
required
/>
</label>
<label>
Number of attendees:
<input
className="input"
type="number"
value={numAttendees}
onChange={e => setNumAttendees(e.target.value)}
placeholder={20}
required
/>
</label>
<label>
Dietary preferences (optional):
<input
className="input"
type="text"
value={dietaryPref}
onChange={e => setDietaryPref(e.target.value)}
placeholder="water, pizza, and celsius"
/>
</label>
<label>
Additional guests?
<input
className="input-checkbox"
type="checkbox"
value={addGuests}
onChange={e => setAddGuests(e.target.value)}
/>
</label>
<button className="submit-btn" type="submit">Submit</button>
</form>
{ isVisible &&
<div className="return-div">
<h2>RSVP Submitted!</h2>
<p>Name:{name} </p>
<p>Email:{email}</p>
<p>Number of attendees: {numAttendees}</p>
<p>Dietary preferences: {dietaryPref }</p>
{/* tried also " dietaryPref ? dietaryPref : "none" */}
<p>Additional guests: {addGuests}</p>
</div>
}
</div>
)
}
Your browser information:
User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36
Challenge Information:
Build an Event RSVP - Build an Event RSVP
https://www.freecodecamp.org/learn/full-stack-developer/lab-event-rsvp/build-an-event-rsvp
