https://github.com/rajkumar-35/food-booking-form

Creating an interactive registration form with dynamic table updates using HTML, CSS, and JavaScript for Day-15 coding task assigned by the GUVI Zen class.
https://github.com/rajkumar-35/food-booking-form

bootstrap5 css-flexbox css-grid css3 dom dom-manipulation html-css-javascript html5 javascipt

Last synced: 16 days ago
JSON representation

Creating an interactive registration form with dynamic table updates using HTML, CSS, and JavaScript for Day-15 coding task assigned by the GUVI Zen class.

• Host: GitHub
• URL: https://github.com/rajkumar-35/food-booking-form
• Owner: RAJKUMAR-35
• Created: 2024-06-27T10:58:16.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-06-27T17:44:04.000Z (11 months ago)
• Last Synced: 2025-05-14T16:18:09.329Z (16 days ago)
• Topics: bootstrap5, css-flexbox, css-grid, css3, dom, dom-manipulation, html-css-javascript, html5, javascipt
• Language: HTML
• Homepage: https://foods-booking-form.vercel.app/
• Size: 2.07 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Registration Form with Table Display

![Registration Form Preview](Sample_Image.png)

This project demonstrates how to create a registration form using HTML, CSS, and DOM manipulation. Upon submission of the form, the entered values are appended to a table displayed below the form.

## Visit the webpage

 ```bash

  https://foods-booking-form.vercel.app/

  ```

## Problem Statement

- **Create a form that includes the following fields:** First Name, Last Name, Address, Pincode, Gender, State, Country, Choice of Food (select at least 2 out of 5 options).

- Upon form submission, the entered values should be appended dynamically to a table.

- After updating the table, the form fields should be cleared for the next entry.

## Technologies Used

- HTML

- CSS

- JavaScript (DOM manipulation)

## Files Included

- `index.html`: Contains the HTML structure of the form and table.

- `styles.css`: Includes basic styling for the form and table.

- `script.js`: JavaScript file for handling form submission and table updates.

## How to Use

1. Clone this repository to your local machine.

2. Open `index.html` in a web browser.

3. Fill out the registration form.

4. Select at least 2 food options from the checkboxes.

5. Submit the form to see the data added to the table.

6. Form fields will automatically clear after submission.

## Conclusion

This project provides a practical example of integrating HTML forms with dynamic table updates using JavaScript.


By following the steps outlined above, you can easily set up and use this registration form to collect and display user information efficiently.