Summer Internship Report

Annexure-I
Summer Internship Report
HTML, CSS, and JavaScript for Web Developers
From John Hopkins University
[By Coursera]
A Project Report
Submitted in partial fulfillment of the requirements for the award of degree of
Master of Computer Application
[Web Development]
Submitted to
LOVELY PROFESSIONAL UNIVERSITY
PHAGWARA, PUNJAB
From 06/23/23 to 08/18/23
SUBMITTED BY
Mannu Kumar
Reg. No.: 12204749
P a g e 1 | 47
Annexure-II: Student Declaration
To whom so ever it may concern
I, Mannu Kumar, 12204749, hereby declare that the work done by me on “HTML, CSS,
and JavaScript for Web Developers” from June, 2023 to July, 2023, is a record of
original work for the partial fulfillment of the requirements for the award of the degree,
Master of Computer Application.
Name of the Student (Registration Number): Mannu Kumar [12204749]
Signature of the student:
P a g e 2 | 47
ACKNOWLEDGMENTS
I have successful completion of this summer internship report would not have been
possible without the help and guidance of many individuals and organizations
(coursers). The tutor “Prof. Yaakov Chaikin” feel especially blessed to have gotten this
during my certification period. The tutor would like to take this opportunity to offer
my earnest admiration to every one of them.
All thanks to my dear parents for their intense help and support during the period of
this certification.
The tutor of Coursera is thankful to my learned and repudiated tutor for his
unbeatable personality, kindness; animated support to help readably and greatly
improve the quality of my summer Internship Report and brought up to its present
status. The tutor whose work have used in this report to depend on different national
and international publications for the completion of the certification program through
Coursera.
Thanks to my colleagues who helped me directly or indirectly to manage my work. I

am especially grateful to Prof. Yaakov Chaikin (Professor, John Hopkins University),
has also been a positive and encouraging tutor to help to learn the concept of HTML,
CSS, and JavaScript.
Finally, I would like to say thank my colleagues and lecturer who helped me a lot in
collecting information, data, and guidance me from time to time during this summer
internship program, they gave me different ideas in making this project unique.
P a g e 3 | 47
ABSTRACT
This report is the reflection and the journey of my one-month summer internship
program along with the highlights of what I learned through errors, work
responsibilities, and the most importance of this summer internship program in
Coursera. The knowledge I have achieved as a developer on front end development,
and how to work in an office environment is elegant. My work was to learn and focus
on web development assignments which were provided by the tutor of the Johns
Hopkin University.
In this report, I have focused my work and explain my new learning thing which I
have got during my summer internship period at Johns Hopkins University. The
challenge linked with web development to that the tools and techniques used to
create the front end of a website change slowly and so the developer needs to slowly
be knowledge that how the field is developing.
This report provides an overview of web development and its related technologies.
This report includes a discussion of the best practices for web development projects
and an overview of the tools and technologies used by web developers in the
industry.
This summer internship that the tutor worked in certainly helped him by increasing
the knowledge of HTML, CSS, and JavaScript.
P a g e 4 | 47
Internship Certificate
(As given by MOOC or Organization in original)
Link of certificate: -- https://coursera.org/share/210b88123a0390f836c45783c496f392
P a g e 5 | 47
Table of contents
Sr. No. Description Page No.
1 Introduction of the Course 7

1.1 Web Development 7
1.2 Types of Web Development 7
1.3 Front End Development 7
1.4 Back End Development 8
1.5 Skill of Front-end Development 8

1.6 Skill of Back-end Development 9
2 Technical Learnings from the course 9
2.1 Course Details 10
3 Introduction of Mini Project 12
4 Details of Mini Project 13
4.1 Interfaces Designed 13
4.2 Code of Mini Project 15
4.3 Code Snippets 44
5 Grade sheet of assignments/ marks card from the MOOC 46
6 Bibliography or References 47
P a g e 6 | 47
1. Introduction
1.1. Web Development
Web development means to the creating, building, and maintaining the
websites. It includes features such as web design, web publishing, web programming,
and database management. It is the formation of an application that works over the
internet i.e., websites. The word “Web Development” is made up of two words, first
one is: Web, it indicates to websites, web pages or anything that works over the
internet. It also refers to building the application from scratch.
1.2. Types of Web Development

There are two types of web developer: ---
a. Back End Development / Client-side Development
b. Front End Development / Server-side Development
1.3. Front-End Development

Front-end web development, or client-side development, is the practice of construct
HTML, CSS and JavaScript as design for a website or Web Application so that the user
can see and interact with each other directly. The challenge associated with front end
development is that the tools and techniques used to create the front-end design of a
website change slowly and so the developer needs to slowly be aware about how the
field is working and increasing.
It is used to create websites and cloud apps that the user interacts with each other.
The main objective of designing a site is to ensure that when the users open the
website, they see the information in a format that is easy to read and relevant. But
now a days users use a large variety of devices with varying screen sizes and
resolutions thus forcing the designer to take into consideration these aspects when
designing the site. They need to ensure that their site comes up 8 correctly in different
browsers (cross-browser), different operating systems and different devices (cross-
device), which requires careful planning on the side of the developer.
In Front-end, I can use HTML and CSS to make any web page attractive and make page
responsive by using media query.
Apart from this, I can use Bootstrap as a front-end also.
P a g e 7 | 47
1.4. Back End Development
Back-end development means working on server-side software, which focuses on
everything you can’t see on a website. Back-end developers work on back-end, there
are some works of developer are: the website performs correctly, focusing on
databases, back-end logic, application programming interface (APIs), and architecture.
They use code that helps browsers to communicate with databases and store the
information and delete the information.
It is used to create and manages resources needed to respond to client requests. It
enables server infrastructure to process request, supply data and provide other
service.
In Back end, I can use JavaScript for scripting purpose and PHP for store the data into
database.
1.5. Skill of Front-end Development
HTML: Hyper Text Markup Language (HTML) is the standard markup language used
for creating web pages. It is not a procedural programming language. It is a declarative
Programming Language. It is the building block which is required for the developing
websites. It facilitates to development of cross-browser applications for the web and
portable device. It helps to create engaging user experience by providing an
experience like desktop applications. It allows enhanced multiple platform
development. In HTML5, latest version of Html, APIs enhance user experiences, such
as advanced animation, drawing, audio, video elements.
CSS: Cascading Style Sheets (CSS) is used to apply styles to web pages. It is used to
make the web pages attractive. The reason to use CSS is to simplify design the web
pages and make it attractive. It allows me to apply styles on the web pages. It also
enables me to do CSS independent of the HTML that makes font end of web page. It
provides an easier way to reference CSS properties. It is a set of rules which in include
a selector and one or more properties and values as well as some punctuation.
JavaScript: JavaScript is a very powerful tool that can do many things for a website. It
makes the web site’s secure and affectively. JavaScript makes it possible to build a UI
component such as image sliders, pop-ups box, web site navigation drop box, form
validations, tables, accordions, and much more. It is a programming language. It
derived from ECMA Script Standard. It is not related to Java, it is also interpreted and
compiled. It Interprets embedded in web browser, add dynamic behavior to static web
content.
P a g e 8 | 47
1.6. Skill of Back End Development
Back-end developer creates resources needed to respond to client requests. It also

writes and maintains the parts of the application that process the inputs.
It will work to process the data you enter while browsing such as—
a. Login Information
b. Product Searches
c. Payment Information
It creates routes to direct requests to the correct service. APIs provide a way for
cloud App to access resources from the back end.
Now a days, the back-end developers need ---
a. Search requests submitted to database: --
• Understand web application development languages.
• Request database for correct data
b. Navigation to restricted areas: --
• Provide access based on users log in status.
• Manage authenticates and authorize user account.
c. Secure Payment: --
• Secure data handling of sensitive information.
d. Input Sensitive Information
Some popular back-end languages are: --
a. JavaScript --- Node.js Express JS
b. Python --- Django Flask
2. Technical Learnings from the Course

In this course, I learned the basic tools which is used by every web page coder needs
to know. I started from the ground up by learning and implementing the web pages
with HTML and CSS as Front-end design.
I have recently developed and learned how to code pages such that its components
re-organized and reduce automatically based on the size of the user’s display screen
(means, Make page responsive). After the code, I was able to code up a web page that
will be just as useful on a mobile phone as on a desktop computer as on a mini desktop.
I got a thorough introduction to the most word-wide, popular, and incredibly powerful
language at that time of the web: JavaScript.
Using JavaScript, I can create a fully working web application that utilizes Ajax to
display the server-side activity and information to the end user.
P a g e 9 | 47
2.1. Course Details
This course is based on the HTML, CSS, and JavaScript for web developers. This course
is commitment of 5 weeks (Modules) study and 4 to 6 hours/ week, but I was learned
this course in 1 hour/day and then complete this at time.
A. Module 1: --
In this module I learned the basics of HTML5. This module started with
instructional videos on how to set up development environment of editor, and
go over HTML5 basics like valid document structure, which elements can be
included inside other elements, and which cannot, discuss the meaning and
unusual of HTML5 semantic tags, and go over common HTML5 tags.
B. Module 2: --
In this module, I was learning the very basics of CSS3 to some advanced
concepts like floating and CSS rule conflict resolution and flex box. And clear
the concept of 'box model', background property, etc. At last, I am finishing
this module with learning about Responsive Design using my own CSS code
and started introducing Twitter Bootstrap with its essential Grid System.
C. Module 3: --
In this module, the tutor was go over some basics of interacting with a client
and server and how manage the web site project and then go to meet a real
client at their place of business purpose (a Chinese restaurant), help the owner
figure out what she wants in a site, and get acquainted with the restaurant in
general. I spent the rest of the module building a real web site for this business
from the beginning.
D. Module 4: --
In this module, I am going to concentrate on learning the fundamentals of the
JavaScript language. Even a lot of experienced developers think with the basic
of JavaScript without really understanding how the language works. That makes
me view the language as more of a difficulty instead of a powerful tool which is
available in the market. I learned about everything of JavaScript - from common
language designs and JavaScript types to objects, functions, arrays, and scope
isolation.
E. Module: --
In this module, I learned JavaScript language skills and learn how to use it in
programming within the context of a web page. I started by learning how to
rightly handle the web page components with the help of JavaScript Document
Object Model API. I also learned one of the most popular ways of helping up
P a g e 10 | 47
data to a web site - Ajax. I learned about the protocol that is the language of the
web speaks in (HTTP), and to set and handle Ajax requests and responses, and
to process JSON data store in database. Finally, I was connecting the module to
my restaurant web site from Module 3 which is a real backend service that
allows us to insert the data into the restaurant menu dynamically from the
server without reloaded the entire page.
After that learning, there were five assignments for five modules which is based on
project, so, in next section I will share the code and snap of the web page.
After submission of assignments of all modules, I was provided the grade of this code.
The passing grading percentage is 100% so it is very hard to make the assignment
means at the time of making assignment, design the make carefully because there will
be not second chance will be given by the Coursera team and tutor of this course
(According to new policy of Coursera).
3. Introduction of Mini Project

In my course, there are 4 mini project which is based on assignment. The tutor was
P a g e 11 | 47
given the assignments for all the modules at the end of the complete module then I
was done and submitted this assignment in the Coursera platform.
I am sharing the GitHub Link of my repository there all the modules have uploaded.
GitHub Link: -- https://github.com/Mannu7654/mannu7654.github.io
In week 1: --
Full based on the test. Means, there are 20 questions based on HTML, CSS, and
JavaScript.
In week 2: --
The tutor was given the simple of a web page as in an assignment, and I was
designed as it is then otherwise, I would have failed in this assignment. After
submission of every assignment, there is one more work to give the review of the
other submission.
In week 3: --
The tutor was given the simple of a web page as in an assignment which based on
the CSS property, like border, grid… After submission of every assignment, there is one
more work to give the review of the other submission.
In week 4: --
The tutor was given the simple of a web page as in an assignment which based on
the JavaScript. After submission of every assignment, there is one more work to give
the review of the other submission.
In week 5: --
The tutor was given the simple of a web page as in an assignment. This is the main
project of this course because in this assignment, to made one web page which is fully
responsive and proper working. After submission of every assignment, there is one
more work to give the review of the other submission.
P a g e 12 | 47
4. Detail of Mini Project
4.1. Interfaces Designed

The project of this course is based on assignment of every module. I am sharing the
snap of interface designed of each module.
A. Module 1: --
This module is based on only test, so, there is not assignment as a project.
B. Module 2: --
C. Module 3: --
P a g e 13 | 47
D. Module 4: -- This
E. Module 5: --
P a g e 14 | 47
4.2. Code of Mini Projects
A. Module 2: --
## index.html
<!DOCTYPE html>
<html>
<head>
<title>Responsive Layout</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Our Menu</h1>
<div class="col-lg-4 col-md-6 col-sm-12">

<div class="box">
<p class="content-name name1">Chicken</p>
<p class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies
nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>

<div class="box">
<p class="content-name name2">Beef</p>
</div>
</div>

<div class="box">
<p class="content-name name3">Sushi</p>
P a g e 15 | 47
</div>
</div>
</body>
</html>
## style.css
* {
box-sizing: border-box;
}
body{
margin: 0;
padding: 0;
font-family: "Comic Sans MS", cursive, sans-serif;
}
.row{
margin-top: 5%;
margin-bottom: 5%;
}
h1 {
margin-bottom: 15px;
text-align: center;
color: #ff4532;
font-size: 50px;
}
.box{
width: 100%;
overflow: none;
}
.content-name{
overflow: none;
text-align: center;
border: 4px solid black;
P a g e 16 | 47
width: 100px;
height: 40px;
padding: 5px;
float: right;
margin-right: 36px;
margin-top: 0px;
font-weight: bold;
position: relative;
}
.content{
border: 5px solid black;
width: 90%;
height: auto;
margin: 2.5%;
color: black
font-size: 25px;
padding: 2%;
padding-top: 55px;
background-color: rgba(0,0,0,0.3);
}
.name1{
background-color: #FFB6C1;
}
.name2{
color: white;
background-color: #FF0000;
}
.name3{
background-color: #FFFF00;
}
/********** Large devices only **********/

@media (min-width: 992px) {
.col-lg-4 {
float: left;
width: 33.33%;
}
}
/********** Medium devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
.col-md-6,.col-md-12 {
P a g e 17 | 47
float: left;
}
.col-md-6 {
width: 50%;
}
.col-md-12 {
margin-left: -10px;
width: 100%;
}
.name3{
margin-right: 65px;
width: 100px;
}
}

.col-sm-12 {
float: left;
width: 100%;
}
.content-name{
margin-right: 30px;
}
}
B. Module 3: --
## index.html
<!DOCTYPE html>
<html>
<head>
<title>Module 3</title>

<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
P a g e 18 | 47
<link rel="stylesheet" type="text/css" href="style.css">
<body>
<nav class="navbar" id="top">

<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-
target="#myNavbar">
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Food, LLC</a>
</div>
<div class="collapse" id="myNavbar">

<ul class="nav navbar-nav visible-xs">
<li><a class="menu-item" href="#">Chicken</a></li>
<li><a class="menu-item" href="#">Beef</a></li>
<li><a class="menu-item" href="#">Sushi</a></li>
</ul>
</div>
</div>
</nav>
<h1 class="main-title">Our Menu</h1>
<div class="row">

<div class="content-box">
<p class="item-name">Chicken</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Lorem ipsum
P a g e 19 | 47
dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.<a href="#top">(Back to Top)</a></p>
</div>
</div>

<p class="item-name">Beef</p>
</div>
</div>

<p class="item-name">Sushi</p>
</div>
</div>
</div>
P a g e 20 | 47
</body>
</html>
## style.css
.container-fluid{
margin: 0;
padding: 0;
}
.navbar{
border-radius: 0px;
}
.navbar-brand{
font-size: 35px;
color: white;
padding-left: 25px;
}
.navbar-brand:hover{
color: white;
}
.nav{
margin: 0;
padding: 0;
}
.navbar-nav{
font-size: 25px;
text-align: center;
margin: 0;
padding: 0;
}
.navbar-toggle{
border: 2px solid white;
margin-right: 25px;
}
.icon-bar{
background-color: white;
P a g e 21 | 47
}
.main-title{
text-align: center;
color: #ff4532;
font-size: 50px;
font-weight: bold;
}
li{
box-sizing: border-box;
width: 100%;
}
.menu-item{
padding: 0;
margin: 0;
width: 100%;
background-color: white;
border-bottom: 1px solid black;
color: black;
display: block;
}
.menu-item:hover{
color: rgba(0,0,0,0.4);
}
.row{
margin: 20px;
}
.content-box{
margin: 20px;
width: auto;
height: auto;
color: black;
P a g e 22 | 47
padding: 20px;
}
.item-name{
text-align: center;
font-size: 20px;
font-weight: bold;
}
#top{
C. Module 4: --
## index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Module 4 Solution Starter</title>
<script src="SpeakHello.js"></script>
<script src="SpeakGoodBye.js"></script>
<script src="script.js"></script>
</head>
<body>
<h1>Module 4 Solution Starter</h1>
<p>open console to see the output</p>
</body>
</html>
## script.js
// *******************************
// START HERE IF YOU WANT AN EASIER STARTING POINT FOR THIS ASSIGNMENT
// *******************************
//
// Module 4 Assignment Instructions.
//
// The idea of this assignment is to take an existing array of names
// and then output either Hello 'Name' or Good Bye 'Name' to the console.
// The program should say "Hello" to any name except names that start with a "J"
P a g e 23 | 47
// or "j", otherwise, the program should say "Good Bye". So, the final output
// on the console should look like this:
/*
Hello Yaakov
Good Bye John
Good Bye Jen
Good Bye Jason
Hello Paul
Hello Frank
Hello Larry
Hello Paula
Hello Laura
Good Bye Jim
WARNING!!! WARNING!!!
The code does NOT currently work! It is YOUR job to make it work
as described in the requirements and the steps in order to complete this
assignment.
WARNING!!! WARNING!!!
*/
(function () {
var names = ["Yaakov", "John", "Jen", "Jason", "Paul", "Frank", "Larry", "Paula",
"Laura", "Jim"];
for (var i = 0; i < names.length; i++) {

var firstLetter = names[i].charAt(0).toLowerCase();
if (firstLetter === 'j') {

byeSpeaker(names[i]);
}
else {
helloSpeaker(names[i]);
}
}
})();
D. Module 5: --
## index.html
<!doctype html>
<html lang="en">
P a g e 24 | 47
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Mannu Food Website</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
<link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700'
rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Lora' rel='stylesheet'
type='text/css'>
</head>
<body>
<header>
<nav id="header-nav" class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<a href="index.html" class="pull-left visible-md visible-lg">
<div id="logo-img" alt="Logo image"></div>
</a>
<div class="navbar-brand">
<a href="index.html"><h1>David Chu's China Bistro</h1></a>
<p>
<img src="images/star-k-logo.png" alt="Kosher certification">
<span>Kosher Certified</span>
</p>
</div>
<button id="navbarToggle" type="button" class="navbar-toggle collapsed"

data-toggle="collapse" data-target="#collapsable-nav" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
</button>
</div>
<div id="collapsable-nav" class="collapse navbar-collapse">

<ul id="nav-list" class="nav navbar-nav navbar-right">
<li id="navHomeButton" class="visible-xs active">
<a href="index.html">
<span class="glyphicon glyphicon-home"></span> Home</a>
</li>
<li id="navMenuButton">
P a g e 25 | 47
<a href="#" onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hidden-
xs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br
class="hidden-xs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br
class="hidden-xs"> Awards</a>
</li>
<li id="phone" class="hidden-xs">
<a href="tel:410-602-5008">
<span>410-602-5008</span></a><div>* We Deliver</div>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div id="call-btn" class="visible-xs">

<a class="btn" href="tel:410-602-5008">
<span class="glyphicon glyphicon-earphone"></span>
410-602-5008
</a>
</div>
<div id="xs-deliver" class="text-center visible-xs">* We Deliver</div>
<div id="main-content" class="container"></div>
<footer class="panel-footer">
<div class="container">
<div class="row">
<section id="hours" class="col-sm-4">
<span>Hours:</span><br>
Sun-Thurs: 11:15am - 10:00pm<br>
Fri: 11:15am - 2:30pm<br>
Saturday Closed
<hr class="visible-xs">
</section>
<section id="address" class="col-sm-4">
P a g e 26 | 47
<span>Address:</span><br>
7105 Reisterstown Road<br>
Baltimore, MD 21215
<p>* Delivery area within 3-4 miles, with minimum order of $20 plus $3
charge for all deliveries.</p>
</section>
<section id="testimonials" class="col-sm-4">
<p>"The best Chinese restaurant I've been to! And that's saying a lot,
since I've been to many!"</p>
<p>"Amazing food! Great service! Couldn't ask for more! I'll be back again
and again!"</p>
</section>
</div>
<div class="text-center">© Copyright David Chu's China Bistro 2016</div>
</div>
</footer>


<script src="js/jquery-2.1.4.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/ajax-utils.js"></script>
<script src="js/script.js"></script>
</body>
</html>
## Style.css
body {
font-size: 16px;
color: #fff;
background-color: #61122f;
font-family: 'Oxygen', sans-serif;
}
/** HEADER **/

#header-nav {
background-color: #f6b319;
border-radius: 0;
border: 0;
}
#logo-img {
background: url('../images/restaurant-logo_large.png') no-repeat;
width: 150px;
P a g e 27 | 47
height: 150px;
margin: 10px 15px 10px 0;
}
.navbar-brand {
padding-top: 25px;
}
.navbar-brand h1 { /* Restaurant name */
font-family: 'Lora', serif;
color: #557c3e;
font-size: 1.5em;
text-transform: uppercase;
font-weight: bold;
text-shadow: 1px 1px 1px #222;
margin-top: 0;
margin-bottom: 0;
line-height: .75;
}
.navbar-brand a:hover, .navbar-brand a:focus {
text-decoration: none;
}
.navbar-brand p { /* Kosher cert */
color: #000;
font-size: .7em;
margin-top: 15px;
}
.navbar-brand p span { /* Star-K */
vertical-align: middle;
}
#nav-list {
margin-top: 10px;
}
#nav-list a {
color: #951C49;
text-align: center;
}
#nav-list a:hover {
background: #E7E7E7;
}
#nav-list a span {
font-size: 1.8em;
}
P a g e 28 | 47
#phone {
margin-top: 5px;
}
#phone a { /* Phone number */
text-align: right;
padding-bottom: 0;
}
#phone div { /* We Deliver */
color: #557c3e;
text-align: right;
padding-right: 15px;
}
.navbar-header button.navbar-toggle, .navbar-header .icon-bar {

border: 1px solid #61122f;
}
.navbar-header button.navbar-toggle {
clear: both;
margin-top: -30px;
}
/* END HEADER */
/* FOOTER */
.panel-footer {
margin-top: 30px;
padding-top: 35px;
padding-bottom: 30px;
background-color: #222;
border-top: 0;
}
.panel-footer div.row {
}
#hours, #address {
line-height: 2;
}
#hours > span, #address > span {
font-size: 1.3em;
}
#address p {
color: #557c3e;
font-size: .8em;
line-height: 1.8;
}
#testimonials {
P a g e 29 | 47
font-style: italic;
}
#testimonials p:nth-child(2) {
margin-top: 25px;
}
/* END FOOTER */
/* HOME PAGE */
.container .jumbotron {
box-shadow: 0 0 50px #3F0C1F;
border: 2px solid #3F0C1F;
}
#menu-tile, #specials-tile, #map-tile {

height: 250px;
width: 100%;
position: relative;
overflow: hidden;
}
#menu-tile:hover, #specials-tile:hover, #map-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#menu-tile {
background: url('../images/menu-tile.jpg') no-repeat;
background-position: center;
}
#specials-tile {
background: url('../images/specials-tile.jpg') no-repeat;
background-position: center;
}
#menu-tile span, #specials-tile span, #map-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.6em;
color: #fff;
opacity: .8;
P a g e 30 | 47
}
/* END HOME PAGE */
/* MENU CATEGORIES PAGE */

.category-tile {
position: relative;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
text-align: center;
font-size: 1.2em;
color: #fff;
opacity: .8;
}
.category-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#menu-categories-title + div {
}
/* END MENU CATEGORIES PAGE */
/* SINGLE CATEGORY PAGE */

.menu-item-tile {
}
.menu-item-tile hr {
width: 80%;
}
.menu-item-tile .menu-item-price {
font-size: 1.1em;
text-align: right;
margin-top: -15px;
margin-right: -15px;
P a g e 31 | 47
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
.menu-item-photo {
position: relative;
overflow: hidden;
padding: 0;
margin-right: -15px;
margin-left: auto;
max-width: 250px;
}
.menu-item-photo div {
position: absolute;
bottom: 0;
right: 0;
width: 80px;
background-color: #557c3e;
text-align: center;
}
.menu-item-description {
}
h3.menu-item-title {
margin: 0 0 10px;
}
.menu-item-details {
font-size: .9em;
font-style: italic;
}
/* END SINGLE CATEGORY PAGE */
/********** Large devices only **********/

@media (min-width: 1200px) {
background: url('../images/jumbotron_1200.jpg') no-repeat;
height: 675px;
}
}
/********** Medium devices only **********/

P a g e 32 | 47
/* Header */
#logo-img {
background: url('../images/restaurant-logo_medium.png') no-repeat;
width: 100px;
height: 100px;
margin: 5px 5px 5px 0;
}
/* End Header */
/* Home Page */
height: 558px;
}
/* End Home Page */
}
/********** Small devices only **********/

/* Home Page */
height: 432px;
}
/* End Home Page */
}
/********** Extra small devices only **********/

@media (max-width: 767px) {
/* Header */
.navbar-brand {
padding-top: 10px;
height: 80px;
}
padding-top: 10px;
font-size: 5vw; /* 1vw = 1% of viewport width */
}
.navbar-brand p { /* Kosher cert */
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img { /* Star-K */
height: 20px;
}
P a g e 33 | 47
#collapsable-nav a { /* Collapsed nav menu text */
font-size: 1.2em;
}
#collapsable-nav a span { /* Collapsed nav menu glyph */
font-size: 1em;
margin-right: 5px;
}
#call-btn > a {
font-size: 1.5em;
display: block;
margin: 0 20px;
padding: 10px;
border: 2px solid #fff;
background-color: #f6b319;
color: #951c49;
}
#xs-deliver {
margin-top: 5px;
font-size: .7em;
letter-spacing: .1em;
}
/* End Header */
/* Footer */
.panel-footer section {
text-align: center;
}
.panel-footer section:nth-child(3) {
margin-bottom: 0; /* margin already exists on the whole row */
}
.panel-footer section hr {
width: 50%;
}
/* End Footer */
/* Home Page */
margin-top: 30px;
padding: 0;
}
#menu-tile, #specials-tile {
P a g e 34 | 47
width: 360px;
}
.menu-item-photo {
margin-right: auto;
}
.menu-item-tile .menu-item-price {
text-align: center;
}
.menu-item-description {
text-align: center;;
}
}
/********** Super extra small devices Only :-) (e.g., iPhone 4) **********/
@media (max-width: 479px) {
/* Header */
padding-top: 5px;
font-size: 6vw;
}
/* End Header */
/* Home page */
#menu-tile, #specials-tile {
width: 280px;
}
.col-xxs-12 {
position: relative;
min-height: 1px;
padding-left: 15px;
float: left;
width: 100%;
}
}
## style.js
$(function () { // Same as document.addEventListener("DOMContentLoaded"...
P a g e 35 | 47
// Same as document.querySelector("#navbarToggle").addEventListener("blur",...
$("#navbarToggle").blur(function (event) {
var screenWidth = window.innerWidth;
if (screenWidth < 768) {
$("#collapsable-nav").collapse('hide');
}
});
});
(function (global) {
var dc = {};
var homeHtmlUrl = "snippets/home-snippet.html";

var allCategoriesUrl =
"https://davids-restaurant.herokuapp.com/categories.json";
var categoriesTitleHtml = "snippets/categories-title-snippet.html";
var categoryHtml = "snippets/category-snippet.html";
var menuItemsUrl =
"https://davids-restaurant.herokuapp.com/menu_items.json?category=";
var menuItemsTitleHtml = "snippets/menu-items-title.html";
var menuItemHtml = "snippets/menu-item.html";
// Convenience function for inserting innerHTML for 'select'

var insertHtml = function (selector, html) {
var targetElem = document.querySelector(selector);
targetElem.innerHTML = html;
};
// Show loading icon inside element identified by 'selector'.

var showLoading = function (selector) {
var html = "<div class='text-center'>";
html += "<img src='images/ajax-loader.gif'></div>";
insertHtml(selector, html);
};
// Return substitute of '{{propName}}'

// with propValue in given 'string'
var insertProperty = function (string, propName, propValue) {
var propToReplace = "{{" + propName + "}}";
string = string
.replace(new RegExp(propToReplace, "g"), propValue);
return string;
};
P a g e 36 | 47
// Remove the class 'active' from home and switch to Menu button
var switchMenuToActive = function () {
// Remove 'active' from home button
var classes = document.querySelector("#navHomeButton").className;
classes = classes.replace(new RegExp("active", "g"), "");
document.querySelector("#navHomeButton").className = classes;
// Add 'active' to menu button if not already there

classes = document.querySelector("#navMenuButton").className;
if (classes.indexOf("active") === -1) {
classes += " active";
document.querySelector("#navMenuButton").className = classes;
}
};
// On page load (before images or CSS)

document.addEventListener("DOMContentLoaded", function (event) {
// TODO: STEP 0: Look over the code from

// *** start ***
// to
// *** finish ***
// below.
// We changed this code to retrieve all categories from the server instead of
// simply requesting home HTML snippet. We now also have another function
// called buildAndShowHomeHTML that will receive all the categories from the server
// and process them: choose random category, retrieve home HTML snippet, insert that
// random category into the home HTML snippet, and then insert that snippet into our
// main page (index.html).
//
// TODO: STEP 1: Substitute [...] below with the *value* of the function
buildAndShowHomeHTML,
// so it can be called when server responds with the categories data.
// *** start ***

// On first load, show home view
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
allCategoriesUrl,
buildAndShowHomeHTML, // ***** <---- TODO: STEP 1: Substitute [...] ******
true); // Explicitely setting the flag to get JSON from server processed into an
object literal
});
// *** finish **
P a g e 37 | 47
// Builds HTML for the home page based on categories array
// returned from the server.
function buildAndShowHomeHTML (categories) {
// Load home snippet page

homeHtmlUrl,
function (homeHtml) {
// TODO: STEP 2: Here, call chooseRandomCategory, passing it retrieved

'categories'
// Pay attention to what type of data that function returns vs what the
chosenCategoryShortName
// variable's name implies it expects.
// var chosenCategoryShortName = ....
var chosenCategoryShortName = chooseRandomCategory(categories).short_name;
// TODO: STEP 3: Substitute {{randomCategoryShortName}} in the home html

snippet with the
// chosen category from STEP 2. Use existing insertProperty function for that
purpose.
// Look through this code for an example of how to do use the insertProperty
function.
// WARNING! You are inserting something that will have to result in a valid
Javascript
// syntax because the substitution of {{randomCategoryShortName}} becomes an
argument
// being passed into the $dc.loadMenuItems function. Think about what that
argument needs
// to look like. For example, a valid call would look something like this:
// $dc.loadMenuItems('L')
// Hint: you need to surround the chosen category short name with something
before inserting
// it into the home html snippet.
//
// var homeHtmlToInsertIntoMainPage = ....
chosenCategoryShortName = "'" + chosenCategoryShortName + "'";
var homeHtmlToInsertIntoMainPage = insertProperty(homeHtml,
"randomCategoryShortName", chosenCategoryShortName);
// TODO: STEP 4: Insert the the produced HTML in STEP 3 into the main page
P a g e 38 | 47
// Use the existing insertHtml function for that purpose. Look through this
code for an example
// of how to do that.
// ....
insertHtml('#main-content', homeHtmlToInsertIntoMainPage);
},
false); // False here because we are getting just regular HTML from the server,
so no need to process JSON.
}
// Given array of category objects, returns a random category object.

function chooseRandomCategory (categories) {
// Choose a random index into the array (from 0 inclusively until array length
(exclusively))
var randomArrayIndex = Math.floor(Math.random() * categories.length);
// return category object with that randomArrayIndex

return categories[randomArrayIndex];
}
// Load the menu categories view

dc.loadMenuCategories = function () {
allCategoriesUrl,
buildAndShowCategoriesHTML);
};
// Load the menu items view

// 'categoryShort' is a short_name for a category
dc.loadMenuItems = function (categoryShort) {
menuItemsUrl + categoryShort,
buildAndShowMenuItemsHTML);
};
// Builds HTML for the categories page based on the data

// from the server
function buildAndShowCategoriesHTML (categories) {
// Load title snippet of categories page
P a g e 39 | 47
categoriesTitleHtml,
function (categoriesTitleHtml) {
// Retrieve single category snippet
categoryHtml,
function (categoryHtml) {
// Switch CSS class active to menu button
switchMenuToActive();
var categoriesViewHtml =
buildCategoriesViewHtml(categories,
categoryHtml);
insertHtml("#main-content", categoriesViewHtml);
},
false);
},
false);
}
// Using categories data and snippets html

// build categories view HTML to be inserted into page
function buildCategoriesViewHtml(categories,
categoryHtml) {
var finalHtml = categoriesTitleHtml;

finalHtml += "<section class='row'>";
// Loop over categories

for (var i = 0; i < categories.length; i++) {
// Insert category values
var html = categoryHtml;
var name = "" + categories[i].name;
var short_name = categories[i].short_name;
html =
insertProperty(html, "name", name);
html =
insertProperty(html,
"short_name",
short_name);
finalHtml += html;
}
P a g e 40 | 47
finalHtml += "</section>";
return finalHtml;
}
// Builds HTML for the single category page based on the data
// from the server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
// Load title snippet of menu items page
menuItemsTitleHtml,
function (menuItemsTitleHtml) {
// Retrieve single menu item snippet
menuItemHtml,
function (menuItemHtml) {
// Switch CSS class active to menu button
switchMenuToActive();
var menuItemsViewHtml =
buildMenuItemsViewHtml(categoryMenuItems,
menuItemsTitleHtml,
menuItemHtml);
insertHtml("#main-content", menuItemsViewHtml);
},
false);
},
false);
}
// Using category and menu items data and snippets html

// build menu items view HTML to be inserted into page
function buildMenuItemsViewHtml(categoryMenuItems,
menuItemsTitleHtml,
menuItemHtml) {
menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
"name",
categoryMenuItems.category.name);
menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
P a g e 41 | 47
"special_instructions",
categoryMenuItems.category.special_instructions);
var finalHtml = menuItemsTitleHtml;

finalHtml += "<section class='row'>";
// Loop over menu items

var menuItems = categoryMenuItems.menu_items;
var catShortName = categoryMenuItems.category.short_name;
for (var i = 0; i < menuItems.length; i++) {
// Insert menu item values
var html = menuItemHtml;
html =
insertProperty(html, "short_name", menuItems[i].short_name);
html =
"catShortName",
catShortName);
html =
insertItemPrice(html,
"price_small",
menuItems[i].price_small);
html =
insertItemPortionName(html,
"small_portion_name",
menuItems[i].small_portion_name);
html =
insertItemPrice(html,
"price_large",
menuItems[i].price_large);
html =
insertItemPortionName(html,
"large_portion_name",
menuItems[i].large_portion_name);
html =
"name",
menuItems[i].name);
html =
"description",
menuItems[i].description);
// Add clearfix after every second menu item

if (i % 2 !== 0) {
P a g e 42 | 47
html +=
"<div class='clearfix visible-lg-block visible-md-block'></div>";
}
finalHtml += html;
}
finalHtml += "</section>";
return finalHtml;
}
// Appends price with '$' if price exists

function insertItemPrice(html,
pricePropName,
priceValue) {
// If not specified, replace with empty string
if (!priceValue) {
return insertProperty(html, pricePropName, "");
}
priceValue = "$" + priceValue.toFixed(2);

html = insertProperty(html, pricePropName, priceValue);
return html;
}
// Appends portion name in parens if it exists
function insertItemPortionName(html,
portionPropName,
portionValue) {
// If not specified, return original string
if (!portionValue) {
return insertProperty(html, portionPropName, "");
}
portionValue = "(" + portionValue + ")";

html = insertProperty(html, portionPropName, portionValue);
return html;
}
global.$dc = dc;
})(window);
P a g e 43 | 47
4.3. Code Snippets
Code snippets are templates that make it easier to enter repeating code patterns, such
as loops or conditional statements. It is block of code which is reused in a code. It
makes it easy to find the errors in the code.
The Snippets of my mini projects – Create a food website with the help of HTML, CSS,
and JavaScript.
I am making five snippets in my project: --
## Categories-title-snippet.html
<h2 id="menu-categories-title" class="text-center">Menu Categories</h2>
<div class="text-center">
Substituting white rice with brown rice or fried rice after 3:00pm will be $1.50
for a pint and $2.50 for a quart.
</div>
## category-snippet.html
<div class="col-md-3 col-sm-4 col-xs-6 col-xxs-12">
<a href="#" onclick="$dc.loadMenuItems('{{short_name}}');">
<div class="category-tile">
<img width="200" height="200"
src="images/menu/{{short_name}}/{{short_name}}.jpg" alt="{{name}}">
<span>{{name}}</span>
</div>
</a>
</div>
## home-snippet.html
<div class="jumbotron">
<img src="images/jumbotron_768.jpg" alt="Picture of restaurant" class="img-
responsive visible-xs">
</div>
<div id="home-tiles" class="row">

<div class="col-md-4 col-sm-6 col-xs-12">
<a href="#" onclick="$dc.loadMenuCategories();"><div id="menu-
tile"><span>menu</span></div></a>
</div>
<a href="#" onclick="$dc.loadMenuItems({{randomCategoryShortName}});">
<div id="specials-tile"><span>specials</span></div>
</a>
</div>
P a g e 44 | 47
<a
href="https://www.google.com/maps/place/David+Chu's+China+Bistro/@39.3635874,-
76.7138622,17z/data=!4m6!1m3!3m2!1s0x89c81a14e7817803:0xab20a0e99daa17ea!2sDavid+Chu
's+China+Bistro!3m1!1s0x89c81a14e7817803:0xab20a0e99daa17ea" target="_blank">
<div id="map-tile">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3084.675372390488!2d-
76.71386218529199!3d39.3635874269356!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2
!1s0x89c81a14e7817803%3A0xab20a0e99daa17ea!2sDavid+Chu's+China+Bistro!5e0!3m2!1s
en!2sus!4v1452824864156" width="100%" height="250" frameborder="0" style="border:0"
allowfullscreen></iframe>
<span>map</span>
</div>
</a>
</div>
</div>
## menu-item.html
<div class="menu-item-tile col-md-6">
<div class="row">
<div class="col-sm-5">
<div class="menu-item-photo">
<div>{{short_name}}</div>
<img class="img-responsive" width="250" height="150"
src="images/menu/{{catShortName}}/{{short_name}}.jpg" alt="Item">
</div>
<div class="menu-item-price">{{price_small}}<span>
{{small_portion_name}}</span> {{price_large}}
<span>{{large_portion_name}}</span></div>
</div>
<div class="menu-item-description col-sm-7">
<h3 class="menu-item-title">{{name}}</h3>
<p class="menu-item-details">{{description}}</p>
</div>
</div>
</div>
## menu-items-title.html
<h2 id="menu-categories-title" class="text-center">{{name}} Menu</h2>
<div class="text-center">{{special_instructions}}</div>
P a g e 45 | 47
5. Grade sheet of assignments/ marks card from the MOOC
The grade of my assignments/ marks card of MOOC snap shots is given below –
P a g e 46 | 47
6. Bibliography for References: --
eBooks: --
➢ WEB TECHNOLOGIES HTML, CSS3, JAVASCRIPT, JQUERY, AJAX, PHP, XML, MVC AND
LARAVEL by DT EDITORIAL SERVICES, DREAMTECH PRESS
➢ WEB TECHNOLOGIES BLACK BOOK by KOGENT LEARNING SOLUTIONS INC., DREAMTECH
PRESS
➢ WEB ENABLED COMMERCIAL APPLICATION DEVELOPMENT USING HTML, JAVA SCRIPT,
DHTML AND PHP by IVAN BAYROSS, BPB PUBLICATIONS
Web links: --
➢ https://www.w3schools.com/whatis/
➢ https://en.wikipedia.org/wiki/Web_development#:~:text=Web%20develop
ment%20is%20the%20work,businesses%2C%20and%20social%20network%2
0services.
➢ https://www.geeksforgeeks.org/web-development/
➢ www.tutorialpoint.com
P a g e 47 | 47

Summer Internship Report

Uploaded by

Copyright:

Available Formats

Summer Internship Report

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Summer Internship Report

Uploaded by

Copyright:

Available Formats

Annexure-I

Summer Internship Report

HTML, CSS, and JavaScript for Web Developers

From John Hopkins University

Submitted in partial fulfillment of the requirements for the award of degree of

Master of Computer Application

LOVELY PROFESSIONAL UNIVERSITY

From 06/23/23 to 08/18/23

Name of the Student (Registration Number): Mannu Kumar [12204749]

Signature of the student:

Thanks to my colleagues who helped me directly or indirectly to manage my work. I

Link of certificate: -- https://coursera.org/share/210b88123a0390f836c45783c496f392

Sr. No. Description Page No.

1 Introduction of the Course 7

1.3 Front End Development 7

1.4 Back End Development 8

1.5 Skill of Front-end Development 8

1.2. Types of Web Development

1.3. Front-End Development

Back-end developer creates resources needed to respond to client requests. It also

2. Technical Learnings from the Course

3. Introduction of Mini Project

GitHub Link: -- https://github.com/Mannu7654/mannu7654.github.io

4.1. Interfaces Designed

<div class="col-lg-4 col-md-6 col-sm-12">

<div class="col-lg-4 col-md-6 col-sm-12">

<div class="col-lg-4 col-md-12 col-sm-12">

/********** Large devices only **********/

@media (min-width: 0px) and (max-width: 767px) {

<meta name="viewport" content="width=device-width, initial-scale=1">

<nav class="navbar" id="top">

<div class="collapse" id="myNavbar">

<h1 class="main-title">Our Menu</h1>

<div class="col-lg-4 col-md-6 col-sm-12">

<div class="col-lg-4 col-md-6 col-sm-12">

<div class="col-lg-4 col-md-12 col-sm-12">

for (var i = 0; i < names.length; i++) {

if (firstLetter === 'j') {

<button id="navbarToggle" type="button" class="navbar-toggle collapsed"

<div id="collapsable-nav" class="collapse navbar-collapse">

<div id="call-btn" class="visible-xs">

<div id="main-content" class="container"></div>

/** HEADER **/

.navbar-header button.navbar-toggle, .navbar-header .icon-bar {

#menu-tile, #specials-tile, #map-tile {

/* MENU CATEGORIES PAGE */

/* SINGLE CATEGORY PAGE */

/********** Large devices only **********/

/********** Medium devices only **********/

/********** Small devices only **********/

/********** Extra small devices only **********/

var homeHtmlUrl = "snippets/home-snippet.html";

// Convenience function for inserting innerHTML for 'select'

// Show loading icon inside element identified by 'selector'.

// Return substitute of '{{propName}}'

// Add 'active' to menu button if not already there

// On page load (before images or CSS)

// TODO: STEP 0: Look over the code from

/ Large devices only /

/ HEADER /

/ Large devices only /

/ Medium devices only /

/ Small devices only /

/ Extra small devices only /

// * start *