Scribd
Upload
4 views

css mp

Uploaded by

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

css mp

Uploaded by

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

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>
3
A Restaurant Website

<section class="contact">
<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>

4
A Restaurant Website

<p><a href = "mailto:[email protected]" style="text-decoration: none; color:


white;">[email protected]</a></p>
</div>
</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>

5
A Restaurant Website

</html>

 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;

6
A Restaurant Website

justify-content: space-between;

align-items: center;

background-color: black;

border-bottom-left-radius: 12px;

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;

7
A Restaurant Website

.contactForm .inputBox

position: relative;

width: 100%;

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;

8
A Restaurant Website

font-size: 16px;

margin: 10px 0;

pointer-events: none;

transition: 0.5s;

color: #66666647;

.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{

9
A Restaurant Website

background-color:black;

margin-top: 30px;

display: flex;

left: 60px;

font-size: 23px;

text-align: center;

justify-content: center;

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.");
10
A Restaurant Website

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-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
11
A Restaurant Website

1 Computer system Dell 1


Windows11
with broad
ProRAM –
specifications
8.00GB
Laptop

2 Software Notepad/Text 1
Editor -

3 - - -
Any other resource
used

7. OUTPUT OF THE CODE

12
A Restaurant Website

13
A Restaurant Website

14
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.
15
A Restaurant Website

• User Experience Enhancement


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

16

You might also like