Skip to main content

Restaurant Page

Description​

Design a complete restaurant web page in JavaScript and CSS. This assignment is primarily design focused.

Mockups​

Tap into the Figma link for a comprehensive view of project mockups and UI design.

Requirements​

Note: The buttons whether clickable or non-clickable all need to be implemented as valid buttons and hovering over any button should change the mouse pointer to a cursor

Title Section​

Header

  • In the top navigation bar, clicking the Contact button will render a new page. Implement the Contact section as a separate page.

  • Scroll down to the menu section on Home button click and scroll to the Reservation section on Book A Table button click.

  • The image hero.png (as provided in mocks) will gradually rotate continuously on the screen. Use animation techniques within the CSS class to implement the rotation

    Highlights

  • These tiles are non-clickable, but hovering over any tile would change the tile background color (white to orange)

About Us Section​

About-Us

  • The Read More button here will be non-clickable. 

Menu

  • Implement 3 different menu pages for breakfast, lunch and dinner each. Clicking the Breakfast, Lunch or Dinner button should change the displayed menu. The menu will be a static table.

Reservation​

Reservation

  • Implement a simple HTML form and show errors if form validation fails

  • Validation Schema for the form fields:

    FieldRequiredLengthFormat
    NameYes50Alphabets, spaces and hyphens
    EmailYesStandard Email Format (e.g.example@domain.com)
    DateYesDD/MM/YYYY
    TimeYesHH:MM
    Special RequestNo250Alphabets, spaces and hyphens

  • Display a pop-up confirmation message on the Book Now button action which will disappear after 3 seconds. You can use a library like Sweet Alert for this

Team Info​

Team

  • The team Info tiles have static images and text. Hovering over any tile will display the social media icons at the bottom, but these icons will be non-clickable

Testimonial​

Testimonial

  • Implement static tiles with background color changing when hovered over

Contact Us​

Contact

  • Render a new page for the contact section

  • Implement an HTML form with validations

  • Validation Schema for the form fields:

    FieldRequiredLengthFormat
    NameYes50Alphabets, spaces and hyphens
    EmailYesStandard Email Format (e.g. example@domain.com)
    SubjectYes100Alphabets, spaces and hyphens
    MessageYes250Alphabets, spaces and hyphens

  • Show a pop-up confirmation message on send action as given in mocks, which will disappear after 3 seconds.

  • Use a static image in place of Google Maps.

  • Static footer bar with text only. The Home/Contact action buttons will be non-clickable.

Scroll To Top​

  • Add a scroll-to-top arrow button that appears when the user scrolls down and scrolls up to the top of the page.

Responsiveness​

  • Responsive mocks are available on Figma. Please follow the mock to implement responsive design that works for
    • Web screen/ PC screen
    • Tablet screen
    • Mobile screen up to iPhone 13

Due Period​

  • Assignment should be submitted around 4-5 working days.

Tech Stack​

  • The following items should be in your tech stack:
    • HTML
    • JavaScript
    • CSS

Success Metrics​

  • A complete UI of the webpage implemented via React having good UX. All styling (size, color, position) should closely follow the mocks.
  • The page should be flexible and responsive on multiple screen resolutions.
  • Deploy the app on Vercel.

Project Guidelines​

  • Create a separate directory for every component with its own style file. Create separate files for CSS and JS code.
  • Maintain a git project for this assignment. Maintain appropriate feature branches with regular commits.