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.

  • Resources: No external resources required.

  • Things you need to know: Box-shadow, Background Color, Gradient Styling, Browser Events, DOM Manipulation, Form Validation, Modal Display.

Max Chat

Task - 01

  • Add a heading titled Create an Event Invite.

Chess Board - Task One

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.

Chess Board - Task Two

Task - 03

  • 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

Chess Board - Task Two

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.

Chess Board - Task Two

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 #f3f4f6 and border color of #3498db

  • When clicked, they should have an orange border #ff5722.

Chess Board - Task Two

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.

Chess Board - Task Two

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.

Chess Board - Task Four

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 #e74c3c and white background color with slightly rounder corners.

Chess Board - Task Three

More projects

These are some of the projects you'll build while learning.