Scribd
Upload
4 views

css mp_merged

Uploaded by

tanishakarekar.0558
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
4 views

css mp_merged

Uploaded by

tanishakarekar.0558
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 21

A Restaurant Website

1. INTRODUCTION

JavaScript is a powerful yet lightweight, client-side programming language that allows


developers to build dynamic and interactive elements directly within web browsers, making websites more
responsive and user-friendly. By operating on the client-side, JavaScript code is executed within the user's
browser, allowing instant interaction with content without requiring back-and-forth communication with
a server. This approach offers a faster, more seamless experience for users and reduces server load, making
it ideal for applications requiring quick, localized responses.

JavaScript's versatility has made it a fundamental tool for web developers, and it is
widely used to add functionality such as:

1. Creating Dynamic Web Pages: JavaScript enables developers to create content that responds
in real-time. For example, with JavaScript, elements on a webpage can change instantly without
requiring a page reload, allowing for smooth transitions, animations, and other interactive
experiences.

2. Event Handling: JavaScript is adept at responding to user interactions, also known as events,
such as clicks, mouse movements, keystrokes, and more. This means that developers can program
specific actions to occur in response to user interactions, like showing or hiding elements,
updating information, or triggering animations, allowing for a more engaging experience.

2. AIM OF THE MICRO-PROJECT

This Micro-Project aims at:

a. Enhance User Interaction with Form Validation.


b. Create a Visually Appealing and Responsive Design
c. Implement User Feedback

1
Dr D.Y.Patil Polytechnic
A Restaurant Website

3. COURSE OUTCOME

The theory, practical experiences and relevant soft skills associated with this course
are to be taught and implemented, so that the student demonstrates the following industry oriented COs
associated with the above mentioned competency:

a) Create interactive web pages using program flow control structure.


b) Create event based web forms using Java script.
c) Create interactive webpage using regular expressions for validations.

4. LITERATURE REVIEW
a) https://www.w3schools.com

W3Schools is a popular web-based learning platform offering tutorials, references, and


interactive example. W3Schools offers comprehensive tutorials on JavaScript, HTML, CSS, and additional
front-end technologies, making it a go-to resource for beginners in client-side scripting.

b) http://www.tutorialspoint.com

TutorialsPoint is a widely used resource offering tutorials on programming, software


development, and web technologies. Its structured modules allow beginners to progress from basic to
advanced topics in client-side scripting, such as event handling, AJAX, and JSON.

c) http://javapoint.com

Javapoint offers tutorials on a wide range of programming languages and technologies,


focusing on both client-side and server-side scripting. Javatpoint includes comprehensive tutorials on
JavaScript, HTML, CSS, and frameworks like Angular, React, and jQuery. It covers client-side scripting
topics like DOM manipulation, event handling, and form validation in great detail.

2
Dr D.Y.Patil Polytechnic
A Restaurant Website

5. INPUT OF THE PROGRAM

 HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bg">
<div>
<img src="bg5.1.jpg" style="opacity: 0.3; width: 100%; position: fixed; margin:0px; display: flex;">
</div>
<div class="navbar">
<div class="logo">
<img src="logo2.png" alt="logo" style="height: 60px; padding-left: 18px;">
</div>
<div class="menu">
<button class="menu-btn"><a href="home.html" style="color: white; text-decoration:
none;">Home</a></button>
<button class="menu-btn"><a href="abt.html" style="color: white; text-decoration: none;">About our
food</a></button>
<button class="menu-btn"><a href="contactus.html" style="color: white ; text-decoration:
none;">Contact Us</a></button>
<button class="menu-btn"><a href="" style="color: white ; text-decoration: none;">Log
in</a></button>
</div>
</div>
</div>
<div>
<h1 class="title"><b>Contact Us</b></h1>
</div>
<section class="contact">
3
A Restaurant Website

<div class="container">
<div class="contactInfo">
<div class="box">
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960
960 960" width="24px" fill="#000000"><path d="M480-480q33 0 56.5-23.5T560-560q0-33-23.5-56.5T480-
640q-33 0-56.5 23.5T400-560q0 33 23.5 56.5T480-480Zm0 294q122-112 181-203.5T720-552q0-109-69.5-
178.5T480-800q-101 0-170.5 69.5T240-552q0 71 59 162.5T480-186Zm0 106Q319-217 239.5-334.5T160-
552q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 100-79.5 217.5T480-80Zm0-480Z"/></svg></div>
<div class="text">
<h3>Address</h3>
<p>DYP, Kolhapur.</p>
</div>
</div>
<div class="box">
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960
960 960" width="24px" fill="#000000"><path d="M760-480q0-117-81.5-198.5T480-760v-80q75 0 140.5
28.5t114 77q48.5 48.5 77 114T840-480h-80Zm-160 0q0-50-35-85t-85-35v-80q83 0 141.5 58.5T680-480h-
80Zm198 360q-125 0-247-54.5T329-329Q229-429 174.5-551T120-798q0-18 12-30t30-12h162q14 0 25 9.5t13
22.5l26 140q2 16-1 27t-11 19l-97 98q20 37 47.5 71.5T387-386q31 31 65 57.5t72 48.5l94-94q9-9 23.5-
13.5T670-390l138 28q14 4 23 14.5t9 23.5v162q0 18-12 30t-30 12ZM241-600l66-66-17-94h-89q5 41 14 81t26
79Zm358 358q39 17 79.5 27t81.5 13v-88l-94-19-67 67ZM241-600Zm358 358Z"/></svg></div>
<div class="text">
<h3>Phone</h3>
<a href="tel:79726067XX" style="text-decoration: none; color: white;">79726077XX</a>
</div>
</div>
<div class="box">
<div class="icon"><svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960
960 960" width="24px" fill="#000000"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-
56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-
640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg></div>
<div class="text">
<h3>Email</h3>
<p><a href = "mailto:thekrustykarb@gmail.com" style="text-decoration: none; color:
white;">thekrustykarb@gmail.com</a></p>
</div>
4
A Restaurant Website

</div>
</div>
<div class="contactForm">
<form>
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="name" >
<span>Full Name</span>
</div>
<div class="inputBox">
<input type="email" name="email" >
<span>Email</span>
</div>
<div class="inputBox">
<textarea name="fb"></textarea>
<span>Type your message...</span>
</div>
<div class="inputBox">
<textarea></textarea>
</div>
<button class="submit" type="submit">Send</button>
</form>
</div>
</div>
</section>
<footer>
<div class="footer">
<p class="footer-info">&copy; 2024 The Krusty Krab! All rights reserved.</p>
</div>
</footer>
</body>

</html>

5
A Restaurant Website

 CSS Code (Styles.css)

.title{

font-size: 60px;

text-align: center;

margin-bottom: 10px;

font-family: 'Times New Roman', Times, serif;

font-weight: bold;

border: 8px solid rgb(92, 90, 90);

border-radius: 20px;

margin-left: 250px;

margin-right: 250px;

opacity: 0.9;

.bg{

display: inline;

align-items: center;

justify-content: space-between;

.navbar{

opacity: 0.9;

width: 1500px;

display: flex;

height: 60px;

justify-content: space-between;

align-items: center;

background-color: black;

border-bottom-left-radius: 12px;
6
A Restaurant Website

border-bottom-right-radius: 12px;

.logo{

opacity: 0.9;

.menu{

display: flex;

gap: 25px;

opacity: 0.9;

.contactForm

width: 40%;

padding: 40px;

background: #fff;

border-radius: 12px;

.contactForm h2

font-size: 30px;

color: #333;

font-weight: 500px;

.contactForm .inputBox

position: relative;

width: 100%;

7
A Restaurant Website

margin-top: 10px;

.contactForm .inputBox input,

.contactForm .inputBox textarea

width: 100%;

padding: 5px 0;

font-size: 16px;

margin: 10px 0;

border-top: none;

border-right: none;

border-left: none;

border-bottom: 2px solid #333;

outline: none;

resize: none;

.contactForm .inputBox span

position: absolute;

left: 0;

pad: 5px 0;

font-size: 16px;

margin: 10px 0;

pointer-events: none;

transition: 0.5s;

color: #66666647;

8
A Restaurant Website

.contactForm .inputBox input[type=mit]

width: 100px;

background: black;

color: #fff;

cursor: pointer;

padding: 10px;

font-size: 18px;

border-radius: 12px;

.submit{

width: 100px;

background: black;

color: #fff;

cursor: pointer;

padding: 10px;

font-size: 18px;

border-radius: 12px;

.footer{

background-color:black;

margin-top: 30px;

display: flex;

left: 60px;

font-size: 23px;

text-align: center;

justify-content: center;

9
A Restaurant Website

border-top-left-radius: 12px;

border-top-right-radius: 12px;

.footer-info{

color: white;

font-size: 20px;

opacity: 0.9;

 Javascript Code (scripts.js)


<script>
// Form Validation Function
function validateForm(event) {
// Prevent form submission for validation
event.preventDefault();
// Get values from the form fields
const name = document.querySelector('[name="name"]');
const email = document.querySelector('[name="email"]');
const message = document.querySelector('[name="fb"]');

// Basic validation checks


if (name.value.trim() === "") {
alert("Please enter your name.");
name.focus();
return;
}
if (email.value.trim() === "") {
alert("Please enter your email.");
email.focus();
return;
}
//Email validation
const emailPattern = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-

10
A Restaurant Website

Z]{2,4}$/;
if (!emailPattern.test(email.value)) {
alert("Please enter a valid email address.");
email.focus();
return;
}
if (message.value.trim() === "") {
alert("Please enter a message.");
message.focus();
return;
}
alert("Your message has been sent successfully!");
document.querySelector('form').reset();
}
// Add event listener to form
document.querySelector('form').addEventListener('submit', validateForm);
</script>

6. SYSTEM REQUIRMENTS

Sr. Name of Resource Specifications


No Qty
Make Details

1 Computer system with Dell 1


Windows11
broad specifications
ProRAM –
8.00GB
Laptop

2 Software Notepad/Text 1
Editor -

3 - - -
Any other resource
used

11
A Restaurant Website

7. OUTPUT OF THE CODE

12
A Restaurant Website

13
A Restaurant Website

8. CONCLUSION
This micro project effectively combines user-friendly design with essential features such
as form validation, responsiveness, and interactivity. By using JavaScript, the form ensures that users can only
submit complete and correct information, which helps avoid errors and improves data quality. The page is fully
responsive, adapting seamlessly to different screen sizes, making it accessible on both mobile devices and
desktops. Additionally, features like smooth scrolling and real-time feedback enhance the user experience,
making it more engaging and intuitive.

With a focus on simplicity and functionality, the project also takes into account
accessibility, ensuring that all users can navigate the page easily, regardless of their device or abilities. By
implementing these key features, the "Contact Us" page offers a smooth, efficient, and pleasant experience for
visitors, encouraging them to get in touch. This project serves as a solid foundation for creating a professional
and user-friendly contact form, with room for future improvements and enhancements.

9. FUTERSCOPE
The micro project serves several practical purposes in the context of website development,
enhancing user interaction and communication between the website owner and visitors. Here are some key uses
for this project:
• Enabling User Communication
The primary use of this project is to provide a direct communication channel between
users and the website owner or business. It allows visitors to easily reach out for inquiries, support requests,
feedback, or any other form of communication, helping businesses and individuals stay connected with their
audience.
• Customer Support and Feedback Collection
By including a contact form, this project enables users to submit questions, concerns, or
suggestions. This feedback can be invaluable for businesses seeking to improve their products, services, or user
experience. The form validation ensures that all submitted data is complete and accurate, which is essential for
providing effective customer support.
• Lead Generation and Client Engagement
The Contact Us page can be a lead generation tool. Visitors who fill out the form with
their contact information may be potential leads for businesses. By collecting information like name, email, and
message, companies can follow up with interested parties to convert them into clients or customers.
• User Experience Enhancement
14
A Restaurant Website

With a responsive design, smooth scrolling, and validation features, the page ensures a
positive user experience. Visitors are able to interact with the page without friction, and the real-time feedback
on form validation ensures they know if any fields are missing or incorrect, reducing frustration.
• Website Interaction and Engagement
The inclusion of interactive elements like form animations or dynamic feedback
encourages users to engage with the website more actively. This can increase the time spent on the website,
improve user satisfaction, and encourage users to return to the site in the future.

10. REFERENCE
a) https://www.w3schools.com

b) http://www.nptelvideos.com

c) http://www.tutorialspoint.com.

d) http://javapoint.com

15
MAHARASHTRA STATE BOARD OF TECHNICAL EDUCATION
MUMBAI
PROJECT REPORT ON
“A Restaurant Website”
UNDER THE GUIDANCE OF
Ms. S. S. SALOKHE

DEPARTMENT OF COMPUTER ENGINEERING


DR. D. Y. PATIL POLYTECHNIC,
KASBA BAWADA KOLHAPUR
SEMESTER :- V
YEAR :- 2024-25
SUBMITTED BY:-

Sr. No Roll No Enrollment No Name


1. 3167 2205390069 Samruddhi Sanjay Nikam
2. 3168 2205390141 Tanisha Parag Karekar
3. 3169 2205390201 Parineeta Dattatray Varute
4. 3170 2205390224 Samruddhi Bhimrao Metil
Certificate

This to certify that Group NO G-19 from Roll No:3167 to 3170 of Fifth
Semester of diploma in Computer Engineering of institute, Dr. D. Y.
Patil Polytechnic (Code:-0539) has completed the Micro-Project
satisfactorily in subject Client-side Scripting Language(CSS) (Code
22519) for the academic year 2024-2025 as Prescribed in the curriculum.

Place: Enrollment No:

Date : Exam Seat No :

Subject Teacher Head of the Department Principal


ACKNOWLEDGMENT

The success outcome of this project required a lot of guidance & assistance from many
people and I am extremely privileged which we have got all during the completion of our
project. All that we have done is only due to guidance & assistance & I would not forget to
thanks them.

I owe my deep gratitude to our project guide Mrs. S. S. Salokhe who took interest in our
project work & guided us till the completion of our project by providing all the necessary
information for developing a good system.

I am thankful too & fortunate enough to get constant encouragement, support & guidance
from all teaching staffs of Client-side Scripting Language (CSS) which help us in
successfully completing our project work.

Date :

Place :
INDEX

Sr. No CONTENT Page No

1 Introduction 1

2 Aim of the micro-project 1

3 Course Outcome 2

4 Literature Review 2

5 Input Code 3

6 System Requirement 11

7 Output 12

8 Conclusion 14

9 Future scope 14

10 Reference 15

You might also like