Assignment 2 – JavaScript & Bootstrap
Online Reservation/Booking System (Frontend only)
The goal of assignment 2 is to create a reservation / booking page for certain items. The
choice of “bookable items” is completely yours (restaurants, travel packages, shopping,
concerts). The goal is to create a single .html page and use JavaScript / Bootstrap to
“advance” the process by hiding / collapsing certain parts of the page.
Make sure that your page has a product gallery (with sample data) and you can add items
to a form of “shopping cart”. The goal here is to use bootstrap for the design of your gallery
and items.
(Screenshots for inspiration)
After adding items to your shopping cart, you should allow users to click a “checkout”
button. This should display a (previously hidden) shipping / buyer information form,
where shoppers can enter their data (name, address, email, phone, …).
Add some validation code to your form where you check that the information is realistic
(e.g. phone number should be numbers only, ZIP code is max. 6 characters long, etc).
After “purchasing” (submitting the shipping form), you should display a confirmation
that contains all a summary of your purchases and the total price, taxes, discount, etc.
calculated by JavaScript. The discount should be applied when purchasing more
three or more items.
Note: The focus of this assignment will be placed Bootstrap and JavaScript. However,
remember to use “proper” HTML coding principles.
In total, use (at least) five bootstrap components, and create the checkout form using
bootstrap forms. Create a [Link] (or [Link]) file, where you
document which Bootstrap components and functionality from Bootstrap you used and
how your JavaScript code works.
Submit your page (incl. all code, images and required files) as a single .zip archive file
with the following naming format: [Link] (for example
[Link])
Grading will be based on:
- Completeness (all pages and content)
- Functionality (sematic page structure, footer)
- Design & User Experience
- Effort (i.e. more than the bare minimum)
Remember:
No use of ChatGPT or similar tools!
→ When in doubt: point deduction + mandatory defensio
You search online to ask “how can I do XYZ in HTML/CSS/JS/Bootstrap”
→ Use of short snippets only! (Not entire pages)
→ But you need to quote your sources (e.g. in a comment)
→ Expert code without comments is suspicious (mandatory defensio)
Asking colleagues for help is okay, but this is not a teamwork!
→ When discovered, all involved students will face problems.
Pure HTML, CSS, JavaScript and Bootstrap
→ no frameworks, libraries or similar (except for Bootstrap)!
Test on different browsers, window sizes and different computers to make sure it works
→ point deduction, if I cannot make it work on my computer