Event Invitation Creator Project
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. You will be building this project as part of our JavaScript Course.
Resources: No external resources required.
Things you need to know: Box-shadow, Background Color, Gradient Styling, Browser Events, DOM Manipulation, Form Validation, Modal Display.
Task - 01
Add a heading titled Create an Event Invite.
Task - 02
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.
Task - 03
Apply a gradient background that transitions from dark blue
#2c3e50to light blue#3498db.The background should fill the entire page.
Set the font colour to
#333
Task - 04
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.
Task - 05
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
#f3f4f6and border color of#3498dbWhen clicked, they should have an orange border
#ff5722.
Task - 06
The submit button should be large, with a background color of
#ff6b00and 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.
Task - 07
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.
Task 08
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
#e74c3cand white background color with slightly rounder corners.
More projects
These are some of the projects you'll build while learning.
