Scribd
Upload
61 views17 pages

Final

The document presents a college project focused on developing a dynamic coffee restaurant website using HTML, CSS, and JavaScript. It outlines the project's objectives, features, and the technology stack utilized, emphasizing team collaboration and learning experiences. Future plans include expanding coffee origins, adopting sustainable technologies, and enhancing customer experiences.

Uploaded by

rudraprasadnayak003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
61 views17 pages

Final

The document presents a college project focused on developing a dynamic coffee restaurant website using HTML, CSS, and JavaScript. It outlines the project's objectives, features, and the technology stack utilized, emphasizing team collaboration and learning experiences. Future plans include expanding coffee origins, adopting sustainable technologies, and enhancing customer experiences.

Uploaded by

rudraprasadnayak003
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 17

Coffee Restro Website

Welcome to our college project presentation on creating a dynamic


coffee Resturant website using only HTML, CSS, and JavaScript. This
project showcases our web development skills and passion .

SUBMITTED BY: UNDER THE SUPERVISION OF :


• PRABHUDUTTA PANIGRAHI (23MC099) Prof. Archana Swain
• RUDRA NARAYAN RANA (23MC136)
• PRITAM KUMAR MOHANTY (23MC112)
Project Introduction
1 Team Collaboration 2 Technology Stack

Our team of four students We utilized HTML5 for


combined their skills to structure, CSS3 for styling,
create a fully functional and vanilla JavaScript for
Resturant website. interactivity.

3 Learning Experience
This project allowed us to apply classroom knowledge to a real-
world web development scenario.
Project Objectives and
Scope
1 Primary Goal
Discover the rich history, ethical sourcing, and artful brewing
of our premium coffee. Explore our selection and find your
perfect cup.

2 Key Features
Implement order coffee, categorization, user reviews,
and a ordering functionality.

3 Time Frame
Complete the project within an 8-week semester,
including planning, development, and testing phases.
HTML Structure and Semantic Markup
Semantic Elements Content Organization Accessibility

We used header, nav, main, and Coffee menu were structured using ARIA labels and alt text were
footer tags for clear document article tags and descriptive class implemented to enhance screen
structure. names. reader compatibility.
CSS Styling and
Responsiveness
Flexbox Layout CSS Grid
We used flexbox for flexible, Coffe posters were arranged
responsive layouts across in a grid layout for an
different screen sizes. organized gallery view.

Media Queries CSS Variables


Breakpoints were set to We implemented CSS
ensure optimal viewing on variables for consistent
mobile, tablet, and desktop theming and easy color
devices. scheme adjustments.
JavaScript Functionality and
Interactivity
Menu Search
Implemented real-time search functionality to filter different coffees based
on user input.

Dynamic Content
Created menu cards dynamically using JavaScript to populate the page
with data.

User Interactions
Added event listeners for rating coffee item, and submitting reviews.

Local Storage
Utilized browser's local storage to save user preferences and watchlist items.
User Interface and User
Experience Design

Color Scheme Typography


We chose a dark theme with accents Sans-serif fonts were used for
to enhance the cinematic feel. readability and a modern aesthetic.

Layout Accessibility
Intuitive navigation and clear visual High contrast and keyboard
hierarchy guide users through the navigation ensure an inclusive user
site. experience.
Online Ordering and Shipping
Browse
Explore our extensive selection of single-origin and
blended coffees.

Order
Choose your preferred grind size, roast, and quantity,
then proceed to checkout.

Receive
Your order will be carefully packaged and shipped to
your doorstep within 2-3 business days.
USER
MANAGEMENT

REPORT AND GENERATE


MANAGEMENT
INTERNET SPEED
MANAGEMENT

COFFEE WEBSITE

PAYMENT MANEGMENT TIME


SLOTMANAGEMENT

HOURS MANEGMENT

ZERO LEVEL DFD DIGRAM


ID
NAME CUSTOMBER

ADRESS
PASSWORD USER
PHONE NO
GMAIL-ID
DELIVERY
PAY

PRODUCT TYPE
PAYMENT ID

DATE
Future Plans and Innovations
1 Expanded Origins 2 Sustainable
Technologies
We're continuously
exploring new coffee- Investing in cutting-edge
growing regions to offer equipment and processes
even more unique and to further reduce our
exceptional flavors. environmental footprint.

3 Customer Experience
Developing innovative ways to enhance the coffee tasting and
brewing experience for our customers.
Conclusion
The online food ordering website aims to
revolutionize the way customers discover, order, an
receive their favorite meals.

 By the current system and leveraging innovative


technologies, we are confident in delivering a
delightful dining experience.
The next steps involve refining the platform
based
on user feedback, expanding the restaurant
network, and exploring integration with additional
services to create a good food ecosystem.
THANK YOU

You might also like