Create an event invitation generator where users can input event details such as the name, date, time, location, and description, and after submission, these details will be displayed as a styled event invite card.
Resources: No external resources required.
Things you need to know: Box-shadow, Background Color, Gradient Styling, Browser Events, DOM Manipulation, Form Validation, Modal Display.
Add a heading titled Create an Event Invite.
Add a form to collect the following details:
Event name
Event Date
Start time
End time
Event Description
Location
Add a submit button at the end.
Apply a gradient background that transitions from dark blue #2c3e50
to light blue #3498db
.
The background should fill the entire page.
Set the font colour to #333
Create a form container with a white background and a slightly rounded shape.
Add a shadow effect around the container.
Center the form container on the page.
Make the form's heading large and bold with a dark blue color #0d47a1
.
The input fields and text area should have enough spacing around the input text and be slightly rounded.
Give it a background color #f3f4f6
and border color of #3498db
When clicked, they should have an orange border #ff5722
.
The submit button should be large, with a background color of #ff6b00
and have rounded corners.
It should change slightly when hovered over.
Add all other necessary styles to match the form as shown in the given image.
Check if any of the fields are empty.
If any field is missing, display Please fill in all fields and stop further execution.
Make sure the message is shown above the form and has a close button.
Style the message as per the given image.
When the user submits the form, stop the page from refreshing automatically and hide it from the view.
Retrieve the following details from the form:
Event name
Event date
Start time
End time
Description
Location
Create a new section on the page where the event details will be displayed, like a digital invitation.
Take the information the user entered and add the event details to this section.
Format it as per the design in the given image.
Use the border color #e74c3c
and white background color with slightly rounder corners.
These are some of the projects you'll build while learning.