lOMoARcPSD|20474713
Industrial Training Report Mohit Kumar-converted
Introduction to Entrepreneurship and family business (ICFAI University Dehradun)
Studocu is not sponsored or endorsed by any college or university
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
INDUSTRIAL TRAINING REPORT
On
“HTML CSS and Javascript for web development”
Submitted for partial fulfillment
of
B. Tech.
in
CONPUTER SCIENCE AND ENGINEERING
SUBMITTED TO:
SUBMITTED BY:
Ms. Swimpy Pahuja
Mohit Kumar
Ms. Sonam Gupta
1702710092
CSE 4th Year
Ajay Kumar Garg Engineering College, Ghaziabad
27th Km Stone, Delhi-Hapur Bypass Road, Adhyatmik Nagar, Ghaziabad-201009
Dr. A. P. J. Abdul Kalam Technical University, Lucknow
November 2020
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Preface
Summer Trainings / Industrial Trainings are very important for engineering
students. This training provides the opportunity to be familiar with the industrial
/ company environment. During this training they can show and can enhance
their practical skills and gain practical knowledge and experience for future.
This is best way through which the students can learn the latest technologies
being used in the companies.
I Mohit Kumar (1702710092) have undergone through Summer Training on
“HTML, CSS and Javascript for web development” from “Johns Hopkins
University” This training helped me a lot in learning the technologies of this
particular field.
Industrial Training was very challenging but as I proceeded things got easier.
Practical Summer / Industrial Training was an interesting learning experience
for me.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Acknowledgement
I want to express my sincere gratitude and thanks to Mrs. Sunita
Yadav(H.O.D., CSE), Ajay Kumar Garg Engineering College, Ghaziabad
for granting me permission for my industrial training in the field of “HTML,
CSS and Javascript for web development”
I express my sincere thanks to Ms. Swimpy Pahuja, Ms. Sonam Gupta and
Mr. Ajay for his cooperative attitude and consistence guidance, due to which I
was able to complete my training successfully.
Finally, I pay my thankful regard and gratitude to the team members and
technicians of “Johns Hopkins University” and Ajay Kumar Garg
Engineering College, Ghaziabad for their valuable help, support and
guidance.
Mohit
Kumar
1702710092
4th Year CS-2
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
INSTITUTE PROFILE
The university takes its name from 19th-century Maryland philanthropist Johns
Hopkins, an entrepreneur and abolitionist with Quaker roots who believed in
improving public health and education in Baltimore and beyond.
Mr. Hopkins, one of 11 children, made his fortune in the wholesale business and
by investing in emerging industries, notably the Baltimore and Ohio Railroad, of
which he became a director in 1847. In his will, he set aside $7
million to establish a hospital and affiliated training colleges, an orphanage, and a
university. At the time, it was the largest philanthropic bequest in U.S. history.
Johns Hopkins University opened in 1876 with the inauguration of our first
president, Daniel Coit Gilman. He guided the opening of the university and other
institutions, including the university press, the hospital, and the schools of nursing
and medicine. The original academic building on the Homewood campus, Gilman
Hall, is named in his honor.
“Our simple aim is to make scholars, strong, bright, useful, and true,” Gilman said
in his inaugural address.
In the speech, he defined the model of the American research university, now
emulated around the globe. The mission he described then remains the
university’s mission today:
To educate its students and cultivate their capacity for lifelong
learning, to foster independent and original research, and to
bring the benefits of discovery to the world.
Or, summed up in a simple but powerful restatement of Gilman’s own
words: “Knowledge for the world.”
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
“What are we aiming at?”
That’s the question our university’s first president, Daniel Coit Gilman, asked at his
inauguration in 1876. What is this place all about, exactly? His answer:
“The encouragement of research . . . and the advancement of
individual scholars, who by their excellence will advance the
sciences they pursue, and the society where they dwell.”
Gilman believed that teaching and research go hand in hand—that success in one
depends on success in the other—and that a modern university must do both well.
He also believed that sharing our knowledge and discoveries would help make the
world a better place.
In 140 years, we haven’t strayed from that vision. This is still a destination for
excellent, ambitious scholars and a world leader in teaching and research.
Distinguished professors mentor students in the arts and music, humanities, social
and natural sciences, engineering, international studies, education, business, and
the health professions. Those same faculty members, along with their colleagues
at the university’s Applied Physics Laboratory, have made us the nation’s leader in
federal research and development funding every year since 1979.
That’s a fitting distinction for America’s first research university, a place that has
revolutionized higher education in the U.S. and continues to bring knowledge and
discoveries to the world.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
With our main campus located in Baltimore, Johns Hopkins is truly and proudly a
city resident. Our commitment to our local communities is based on the simple
truth that the health and well being of the university is inextricably tied to the
physical, social, and economic well being of the city in which we live. Our founder
and namesake, Johns Hopkins, put forth that idea when he made a bequest to
establish a university and a hospital.
As the city’s largest anchor institution, Johns Hopkins feels the constant pull of
urban issues. Our faculty, staff, students, and administrators answer the call on a
daily basis, in ways both large and small, from volunteering as tutors in local
schools to contributing nearly $5 billion in economic output in the city.
Johns Hopkins’ commitment to our city and our neighbors is not
new; it is part of who we are, inherent in our work from clinics
to classrooms. And in the wake of the unrest in Baltimore [in
spring 2015]—a moment that laid bare harsh and multigenerational inequalities—our work is ever more important.
Ronald J. Daniels
President
Johns Hopkins University
Some examples of our community efforts:
•
•
•
In 2015, we launched the HopkinsLocal initiative to promote economic
growth and employment opportunities in Baltimore. As part
of HopkinsLocal, we have made a commitment to increase design and
construction contracts with local minority- and women-owned businesses,
to expand the number of new hires that come from city neighborhoods
where employment opportunities are needed, and to build relationships
with more city-based vendors.
In 2016, Johns Hopkins and 24 other Baltimore-area businesses
announced the launch of the BLocal initiative, an effort to help create
more economic opportunities in the city.
Our Homewood Community Partners Initiative is a university-community
partnership aimed at boosting quality of life in the neighborhoods
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
•
•
•
•
•
•
•
•
•
surrounding the Homewood campus by reducing blight, improving
education, catalyzing commercial and retail development, and
strengthening local hiring and purchasing.
The East Baltimore Development Initiative is a partnership among the
university, the city of Baltimore, and others, to invest in the revitalization
of areas around Johns Hopkins’ East Baltimore campus. That effort
includes opening and operating the Henderson-Hopkins school, the first
new school in East Baltimore in more than 20 years.
Through a partnership with Baltimore City Public Schools, we helped
create the city’s first Pre-K through 8th grade school dedicated to giving
students a foundation in engineering and computer skills.
University leaders were instrumental in bringing the successful P-TECH
model to Maryland public schools, creating a school-to-industry pipeline
for students in STEM fields. Baltimore’s Dunbar High School will partner
with Johns Hopkins University, The Johns Hopkins Hospital, and others to
offer health science degrees.
Each fall, more than 1,000 members of the faculty, staff, and student body
come together for President’s Day of Service to tackle hundreds of small
projects—mulching trees, or painting school classrooms, or planting
community gardens.
SOURCE, founded in 2005 to centralize community service and servicelearning efforts at the schools of Medicine, Nursing, and Public Health in
East Baltimore, has more than 100 partnerships with community-based
organizations across Baltimore.
The Tutorial Project brings approximately 100 children to our Homewood
campus twice a week each semester for help with reading and math.
Our Adopt-a-Student Uniform Drive has provided uniforms for more than
2,500 Baltimore City Public School students in the past five years.
Dozens of students spend their summers working for community-focused
charitable groups and social service agencies across Baltimore as part of
our Community Impact Internships Program.
The Center for Social Concern provides a base for more than 50 studentled programs that serve Baltimore communities. In 2016–2017, volunteers
performed more than 96,000 hours of work through these programs.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Johns Hopkins actively prepares students to be global leaders and citizens, to take
part in international learning activities, and—as our founding mission implores—
to bring the benefits of discovery to the world.
We have a proud tradition of leadership in education, research, service, and
patient care around the globe.
Helping the global community
Johns Hopkins researchers are fighting the Zika virus at home and abroad
Some examples of our global impact:
•
•
•
•
•
•
•
The Johns Hopkins Bloomberg School of Public Health is a leader in public health research,
education, and practice with ongoing work in more than 100 countries. The Bloomberg School
has led major advances against global public health threats including malaria, polio, road traffic
injuries, malnutrition, drowning, gun violence, HIV/AIDS, tobacco, and addiction.
The Johns Hopkins School of Advanced International Studies has campuses on three continents
and has, for more than 70 years, produced great leaders, thinkers, and practitioners of
international relations.
The Johns Hopkins Center for Global Health brings together experts from our top-ranked
schools of Public Health, Medicine, and Nursing to address pressing health challenges, including
HIV/AIDS, malaria, tuberculosis, and malnutrition.
The Johns Hopkins Center for Communications Programs uses social and behavior change
communication to help solve some of the world’s most pressing health problems, including
maternal health issues, malaria, and HIV/AIDS.
Jhpiego, a nonprofit health organization affiliated with the university, has spent more than 40
years improving the health of women and families in more than 155 developing countries.
Johns Hopkins Medicine International provides personalized care for patients traveling to
Hopkins from outside the U.S. and works closely with affiliates around the world to improve
health care globally.
The Johns Hopkins Alliance for a Healthier World brings together leading experts from a range
of disciplines to address global health challenges and advance global health equity.
From offering pioneering medical and nursing training at Peking Union Medical
College Hospital in the 1910s; to creating a graduate-level international relations
campus in Bologna, Italy, just 10 years after the end of World War II; to conducting
ongoing research at hundreds of locations in more than 110 countries, we
continue to bring knowledge to the world.
Resources for prospective students
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Undergraduate Admissions
There are more than 450 international students representing 61 countries among
our undergraduate population, a testament to our belief in the value of cultivating
a community of diverse backgrounds and worldviews. Learn more about
application deadlines, financial aid options, and requirements for international
applicants.
Office of International Services
OIS assists international students, scholars, and researchers with visas and
immigration as well as range of other issues, including housing, transportation, tax
preparation, and legal assistance.
Study Abroad
Johns Hopkins promotes intellectual discovery through academic exchanges,
programs abroad, collaborative research, and cooperative agreements. Our
undergraduate students participate in study abroad and international projects in
more than 50 countries worldwide, and more than 40 percent of Hopkins
undergrads have an international experience prior to graduation.
ALUMINI
We are proud to count visionary CEOs and scientists; famous conservationists and
authors; winners of Oscars, Grammys, Emmys, and Pulitzer Prizes; and a past U.S.
president among those with Johns Hopkins degrees.
Our graduates include:
•
•
•
•
•
•
•
•
•
Chimamanda Ngozi Adichie, novelist
Virginia Apgar, developer of Apgar score for newborns
John Astin, actor
Russell Baker, Pulitzer Prize–winning columnist for The New York Times and
former host of PBS’s Masterpiece Theatre
Manuel Barrueco, Grammy Award–winning guitarist
John Barth, novelist
Jeffrey Blitz, writer/director of Spellbound, Rocket Science, and Lucky
Wolf Blitzer, journalist
Michael R. Bloomberg, former New York City mayor; founder of Bloomberg L.P.,
Bloomberg News, and Bloomberg Radio
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
Carter Brey, principal cellist of the New York Philharmonic
Rachel Carson, biologist, ecologist, and author of Silent Spring
Richard Ben Cramer, Pulitzer Prize–winning journalist
Wes Craven, film director
Caleb Deschanel, cinematographer
John Dewey, American philosopher, social critic, and educator
Louise Erdrich, writer
Hallie Jackson, Chief White House correspondent for NBC News
John C. Malone, chairman and majority owner of Liberty Media, Liberty Global,
and Qurate Retail Group; former CEO of Tele-Communications, Inc.
Victor A. McKusick, medical geneticist; author of Mendelian Inheritance in Man,
the definitive source of information on human genes and genetic disorders
James McPherson, Pulitzer Prize–winning historian and author
Kweisi Mfume, former president of NAACP
Wes Moore, author and social entrepreneur
Walter Murch, Oscar-winning film editor and sound mixer
Caryle Murphy, Pulitzer Prize–winning journalist, longtime international reporter
for The Washington Post
Tommy Newsom, Emmy winner who was assistant conductor of the Tonight
Show band
PJ O’Rourke, journalist, author
Sam Palmisano, former CEO of IBM
Awadagin Pratt, pianist; winner of the Naumburg International Piano Competition,
1992
Joanne Silberner, Freelance writer and 18-year veteran of NPR’s science desk
John A. Wheeler, physicist
Woodrow Wilson, 28th U.S. president
Abel Wolman, water treatment expert
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
TABLE OF CONTENTS
CHAPTER 1 INTRODUCTION TO HTML
WHAT IS HTML
HISTORY OF HTML
CHAPTER 2 INTRODUCTION TO CSS
WHAT IS CSS
Advantages OF CSS
CHAPTER 3 INTRODUCTION TO JAVASCRIPT
WHAT IS Javascript
Javascript and Java comparison
CHAPTER 4 INTRODUCTION TO BOOTSTRAP
WHAT IS BOOTSTRAP
Download and understand file structure
CHAPTER 5 WHAT IS JQUERY?
CHAPTER 6 RSPONSIVE DESIGN
WHAT IS Responsive Web Design
Concept
CHAPTER 7 Project: creating dynamic and responsive website for a restaurant
Introduction
HTML
CSS
JAVASCRIPT
CHAPTER 8 Conclusion
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
CHAPTER 1 INTRODUCTION TO HTML
What is HTML
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Stands for "Hypertext Markup Language." HTML is the language used to
create webpages. "Hypertext" refers to the hyperlinks that an HTML page may
contain. "Markup language" refers to the way tags are used to define the page
layout and elements within the page.
Below is an example of HTML used to define a basic webpage with a title and a
single paragraph of text.
<!doctype
<html>
<head>
<title>TechTerms.com</title>
</head>
<body>
<p>This
is
an
example
</body>
</html>
html>
of
a
paragraph
in
HTML.</p>
The first line defines what type of contents the document contains. "<!doctype
html>" means the page is written in HTML5. Properly formatted HTML pages
should include <html>, <head>, and <body> tags, which are all included in the
example above. The page title, metadata, and links to referenced files are
placed between the <head> tags. The actual contents of the page go between
the <body> tags.
The web has gone through many changes over the past few decades, but HTML
has always been the fundamental language used to develop webpages.
Interestingly, while websites have become more advanced and interactive, HTML
has actually gotten simpler. If you compare the source of an HTML5 page with a
similar page written in HTML 4.01 or XHTML 1.0, the HTML5 page would
probably contain less code. This is because modern HTML relies on cascading
style sheets or JavaScript to format nearly all the elements within a page.
NOTE: Many dynamic websites generate webpages on-the-fly, using a serverside scripting language like PHP or ASP. However, even dynamic pages must be
formatted using HTML. Therefore, scripting languages often generate the HTML
that is sent to your web browser.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
History of HTML
This chapter discusses a brief history of HTML language. Reading this will help you to
get an idea of how HTML has been evolved through the years.
Tim Berners-Lee, the inventor of HTML, used to work in the computer section of the
CERN (European Laboratory for Particle Physics) at Geneva, Switzerland.
CERN is an institution for researching particle physics which requires the collaboration
of physicists all over the world.
Tim has an idea of creating something which would enable physicists to share research
information from anywhere in the world, and he came with HTML which can contain
links of many documents from one document.
Tim's prototype Web browser on the NeXT computer came out in 1990.
•
In 1991, an open discussion group HTML-talk was started across the internet for the development
of HTML.
•
In 1992, Dave Raggett from Hewlett-Packard's Labs in Bristol, England who was one of the
enthusiastic of HTML, met Tim and upon returning England, Dave wrote a richer version of HTML
called HTML+.
•
In 1992, NCSA showed interest in web and contributed to take the development of web a step
further.
•
In december 1992, Marc Andreessen of Mosaic team (an early web browser) introduced img tag
in the HTML document.
•
March 1993: Lou Montulli releases the Lynx browser version 2.0a.
•
Early 1993: Dave Raggett begins to write his own browser.
•
April 1993: The Mosaic browser is released.
•
Late 1993: Large companies underestimate the importance of the Web.
•
May 1994: NCSA assigns commercial rights for Mosaic browser to Spyglass Inc.
•
September 1994: The Internet Engineering Task Force (IETF) sets up an HTML working group.
•
July 1994: HTML specification for HTML 2 is released.
•
November 1994: Netscape is formed.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
•
Late 1994: The World Wide Web Consortium forms.
•
Through 1995: HTML is extended with many new tags.
•
March 1995: HTML 3 is published as an Internet Draft.
•
March 1995: A furor over the HTML Tables specification.
•
August 1995: Microsoft's Internet Explorer browser comes out.
•
September 1995: Netscape submits a proposal for frames.
•
November 1995: The HTML working group runs into problems.
•
November 1995: Vendors unite to form a new group dedicated to developing an HTML standard.
•
November 1995: Style sheets for HTML documents begin to take shape.
•
November 1995: Internationalization of HTML Internet Draft.
•
December 1995: The HTML working group is dismantled.
•
February 1996: The HTML ERB is formed.
•
April 1996: The W3 Consortium working draft on Scripting comes out.
•
July 1996: Microsoft seems more interested than first imagined in open standards.
•
December 1996: Work on `Cougar' is begun.
•
January 1997: HTML 3.2 is ready.
•
In spring 1998, HTML 4.01 was materialized finally and become a w3c recommendation.
•
In January 2008, a working draft of HTML 5 is prepared.
The current version of HTML is HTML 4.01 which we have discussed in our HTML
tutorials.
Development of HTML 5 is underway but developers have already started using some
of it's features.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
CHAPTER 2 INTRODUCTION TO CSS
What is CSS
CSS, stands for Cascading Style Sheet is a computer language to describe
presentation (for example width, height, color, background color, alignment etc.) of
HTML and XML (and XML based languages like XHTML, SVG) web documents. In all
the examples of our tutorials, we have used HTML for implementing CSS.
CSS is a standard specified and maintained by World Wide Web Consortium.
From its invention, CSS has evolved through different versions. The present version of
CSS is CSS 2.1.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Next version of CSS is CSS3, which is under development but developers have already
started using some of its features.
In the consequent pages, we will discuss CSS 2.1 in detail. Learning which, you will be
able to implement CSS in your own web pages.
How CSS can be associated with an HTML web page
There are three ways to attach CSS to an HTML web page.
1. Writing CSS code in a separate file (CSS files are saved with .css extension) and
including that CSS file in head section of an HTML page using <link> element.
Advantages of CSS
1. Separation of content form presentation : Writing CSS code in another CSS file
and attaching it to an HTML page, you can separate content from presentation. So, as
an author, you need not be concerned about presentation and concentrate on content
only.
2. Consistency : CSS can provide a consistent presentation for all of the pages of a
web site.
3. The Increment in accessibility : If a particular page (or a number of pages ) needs a
different look and formatting, with a change of a single line, that can be achieved by
calling more than one CSS for the same page.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
4. Save of bandwidth : Since CSS separates content form style, it makes a web
document lightweight, causing saving of bandwidth and in turn faster loading of the
page.
5. Ease of contribution : Content Management Systems (for example WordPress)
uses CSS, so that people without bothering how their content will look, can submit their
content. This has caused an exponential increase in User Generated Content.
CHAPTER 3 INTRODUCTION TO Javascript
What is JavaScript ?
JavaScript is a cross-platform, object-oriented scripting language developed by
Netscape. JavaScript was created by Netscape programmer Brendan Eich.
It was first released under the name of LiveScript as part of Netscape Navigator 2.0 in
September 1995. It was renamed JavaScript on December 4, 1995. As JavaScript
works on the client side, It is mostly used for client-side web development.
JavaScript is designed for use on web pages and closely integrated with HTML.
JavaScript can create applications which run in the browsers such as IE, Opera,
FireFox, Google Chrome and other. Netscape submitted JavaScript to ECMA
International for standardization resulting in the standardized version named
ECMAScript.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
JavaScript and Java
JavaScript and Java are similar in some ways but fundamentally they are different. Java
is a programming language developed by Sun Microsystems, Inc. and JavaScript is a
scripting language developed by Netscape. Java is a server-side and static type
language. JavaScript is a client-side, dynamically typed language. Java programs are
compiled on the server and run on almost every platform without distribution of source
code whereas scripts written in JavaScript are placed inside a HTML document and
interpreted by the browser. The syntax, reserved-words of JavaScript and Java are also
different.
JavaScript compares to Java
JavaScript
Java
JavaScript is used for front-end web
development (for example field level
validation in a HTML form).
Java is used as a back-end language
within a web environment.
Interpreted (not compiled) by the client.
Compiled bytecodes downloaded from the
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
server, executed on the client.
Object-oriented. No distinction between
types of objects. Inheritance is through
the prototype mechanism, and properties
and methods can be added to any object
dynamically.
Class-based. Objects are divided into
classes and instances with all inheritance
through the class hierarchy. Classes and
instances cannot have properties or
methods added dynamically.
Variable data types are not declared
(loose typing).
Variable data types must be declared as
Java maintains strong type checking.
Cannot automatically write to hard disk.
Cannot automatically write to hard disk.
CHAPTER 4 INTRODUCTION TO BOOTSTRAP
WHAT IS BOOTSTRAP?
Twitter Bootstrap is a front end framework to develop web apps and sites fast. In modern
web development, there are several components which are required in almost all web
projects. Bootstrap provides you with all those basic modules - Grid, Typography, Tables,
Forms, Buttons, and Responsiveness. Besides, there are a plethora of other useful frontend components like Dropdowns, Navigation, Modals, Typehead, Pagination, Carousal,
Breadcrumb, Tab, Thumbnails, Headers etc. With these, you can make a web project up
and running quickly and easily.
Moreover, since the entire framework is module based, you can customize it with your own
bit of CSS or even go for a complete overhaul after getting started.
It is based on the several best practices and we believe it is a very good point to start
learning modern day web development with HTML, and JavaScript/Jquery once you know
the basics.
Though there are criticisms, that all Bootstrap made projects looks same and you can make
a website up without much of HTML+CSS knowledge, we need to understand that
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Bootstrap is a generic framework and like any other generic stuff, you need to customize it
to look it exclusively. And you need to delveloped when you are on your way to customizing
it and that is not feasible without a well understanding of HTML+CSS.
There are of course very good front-end frameworks available beside bootstrap and it's
completely a developer's choice who wants which. But it is definitely worth trying.
Download and understand file structure
You can download Bootstrap Version 3.0.0
from https://github.com/twbs/bootstrap/archive/v3.0.0.zip (full)
or https://github.com/twbs/bootstrap/releases/download/v3.0.0/bootstrap-3.0.0dist.zip(short). We have used the first one, but you may use the second one too.
Moreover, our code which has given to be downloaded contains a bootstrap code folder
downloaded from the first link. This also contains the custom.css file we have used
to customize Bootstrap's original css.
Once unzipped, you would find that there are several files and folders are available within
the root folder bootstrap-3.0.0.
The main CSS files - bootstrap.css and minified version of it bootstrap-min.css are available
within 'css' folder which is placed within 'dist' folder under bootstrap-3.0.0.
Within 'dist' there is a 'js' folder, which contains the main JavaScript file bootstrap.js and a
minified version of it.
There is a separate 'js' folder within the root, which contains different JavaScript plugins in
separate files.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Another 'js' folder is found within 'assets' folder within the root. This holds html5shiv.js which
is HTML5 shim, used for IE8 support. There is also respond.min.js file, used for supporting
media queries in IE8. This folder also contains jquery.js on which Bootstrap's js plugins
depends.
There is an 'ico' folder within the same containing icons for favicon and icons for various
mobile devices.
'css' folder in the same path contains css files for documentation.
'_includes' and '_layouts' folder contains some default layout structure files which may be
useful for rapid prototyping.
'less' folder within root contains several .less files. If you are going for less based
development, these files are useful for you.
Within the root folder. there are lies several files. Some of them are HTML files which can
be used for basic prototyping. Besides, there is bower.json, browserstack.json used for
Bower based compilation. There is also composer.json and a YAML file _config.yml.
Besides downloading from the link given, you may also compile all CSS, js files with the
following command $ bower install bootstrap
You may clone the Bootstrap's Git repo
git clone git://github.com/twbs/bootstrap.git
For this tutorial, we have simple downloaded the Zip file and will be working out of that.
Once you finish this tutorial, we encourage you to install with bower and let us know how it
works.
NetDNA hosts compiled and minified version of Bootstrap CSS, Js, and optional theme css.
You may include them like following
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstraptheme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script
src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></scri
pt>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Develop with Bootstrap v3.0.0
Basic HTML
Following is the basic HTML structure we will be using for our project
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap V3 template</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximumscale=1, user-scalable=0">
<!-- Bootstrap -->
<link href="bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"
media="screen">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries ->
<!--[if lt IE 9]>
<script src="bootstrap-3.0.0/assets/js/html5shiv.js"></script>
<script src="bootstrap-3.0.0/assets/js/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>Hello, world!</h1>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="//code.jquery.com/jquery.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed
-->
<script src="bootstrap-3.0.0/dist/js/bootstrap.min.js"></script>
</body>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
</html>
Note that html5shiv.js and respond.min.js are added in this template for IE8 support. Adding
these files are to Bootstrap version 3.
We have placed the bootstrap-3.0.0 folder within twitter-bootstrap folder which is placed
within our web server's root. All html files we will be creating will be placed within twitterbootstrap folder. The purpose of stating this is nothing but to ease your deployment
process.
Customization
We are going to customize the out of the box styles of the Bootstrap's CSS. So, without
disturbing the original CSS file, which is within dist folder of the bootstrap-3.0.0, we are
going to create a separate CSS file called custom.css in the same folder. We will then
include that CSS file within our HTML files just bellows the original CSS file. This way, we
will be able to override the default styles when you want, but, if Bootstrap upgrades itself,
the original CSS file can also upgrade without disturbing our own customization. We
suggest you to follow this method in your development process also.
Creating navigation
For creating navigation will add the following code in our HTML file, just after the opening
body tag.
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<ul class="nav navbar-nav">
<li><a href="new.html" class="navbar-brand">
<img src="logo.png"></a></li>
<li class="active"><a href="#">Home</a></li>
<li><a href="price.html">Price</a></li>
<li><a href="contact.html">Contact</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Social<b
class="caret"></b></a>
<ul class="dropdown-menu">
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<li class="socials"><g:plusone annotation="inline"
width="150"></g:plusone></li>
<li class="socials"><div class="fb-like" datahref="https://developers.facebook.com/docs/plugins/" data-width="The pixel width of
the plugin" data-height="The pixel height of the plugin" data-colorscheme="light"
data-layout="standard" data-action="like" data-show-faces="true" datasend="false"></div></li>
<li class="socials"><a href="https://twitter.com/share" class="twittershare-button">Tweet</a>
<script>!function(d,s,id){var
js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);j
s.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs
);}}(document,"script","twitter-wjs");</script></li>
</ul>
</li>
</ul>
</nav>
For navigation, Bootstrap uses 'navbar' class in the container level. So, it is assigned to the
nav element which holds the entire navigation.
We have used 'navbar-inverse' class along with to change the default color of the navigation
bar dark instead of the default lighter one. 'navbar-fixed-top' class makes sure that the
navbar stays fixed in the top position when we scroll down our HTML page.
Using role="navigation" is new in Bootstrap V3.0.0 while creating navigation. Bootstrap
recommends to use this for navbars for accessibility purpose.
At this point, we have added 'padding-top: 80px;' to the body in the custom.css file. Number
pf pixels you add as top padding to the body may vary, but unless you do so, the top part of
our content after navbar will be hidden.
Within the container nav, we have an unordered list with class 'nav' and 'navbar-nav'. Within
this unordered list. each list item holds a link in the navigation.
'navbar-brand' class is used to present the brand name. We have used an image for that.
Since our image's height is more than the line height of the navbar, we made some
customization here. We have increased the 'line-height' property of the '.navbar-nav>li>a' to
50px instead of default 20px. We have also made the font size 16px.
For the right most link, we have added dropdown. For that 'dropdown' class is added to the
associated li, just after that, an anchor is added having two classes 'dropdown-toggle' and
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
'caret'. This anchor actually holds the anchor text social in our project. This li then holds an
unordered list within this and again each list item of that nested list holds a link presented in
the dropdown.
We have added social plugins in the dropdown. The first li holds a markup for Google Plus,
the second li holds a markup for Facebook and third li holds markup and some js script for
displaying Twitter button.
Additionally, you have to add the following markup and script just after the opening body
tag, to make the Facebook button to work
<div id="fb-root"></div>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
To make Twitter Button work, we have added the following script just before the closing
body tag
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async
= true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po,
s);
})();
We used the following style to add some adding to the social buttons with 'socials' class
.socials {
padding: 10px;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
}
This completes our navigation.
Creating slideshow with carousal
For creating a slideshow just below the navbar, on the home page of our project. we will use
the following markup
<div id="carousel-example-generic" class="carousel slide">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0"
class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="computer.jpg" alt="...">
<div class="carousel-caption">
<h1>Large Desktops are everywhere</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="mobile.jpg" alt="...">
<div class="carousel-caption">
<h1>Mobiles are outnumbering desktops</h1>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
<div class="item">
<img src="cloud1.jpg" alt="...">
<div class="carousel-caption">
<h1>Enterprises are adopting Cloud computing fast</h1>
<p><button class="btn btn-success btn-lg">Try 30 day trial now</p>
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" dataslide="prev">
<span class="icon-prev"></span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" dataslide="next">
<span class="icon-next"></span>
</a>
</div>
</div>
There are four parts in the Carousal. The main container is defined using a div tag and
'carousel slide' class is assigned to it.
Then there is an ordered list having 'carousel-indicators' class associated with it. Each of
the list item in this ol refers to a slide. class 'active' is assigned to the slide which loads by
default when the page loads. When rendered, you can see them as tiny circles just below
the caption.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Then, each slide (image) is placed within a div tag and class 'item' is assigned to it. Each of
these items again nests a div with class 'carousel-caption' assigned to it. carousel-caption
holds some markup which is displayed as captions along with the image. We have an h1
and a button wrapped in a paragraph here, but you may have your own markup.
The last part is for next previous and slide/slide by control. This is defined using 'left' and
'carousel-control' for previous and 'right' and 'carousel-control' classes for next.
'icon-prev' and 'icon-next' classes are used for next and previous icons.
We have made some customization in the default carousal. We wanted the captions,
indicators, and next/previous icons to be rendered some pixels above its default position.
For that, we have added the following styles in our custom.css file
.carousel-inner .item .carousel-caption {
position:absolute;
top: 200px
}
.carousel-indicators {
position: absolute;
top: 400px;
}
.navbar {
margin-bottom:0;
}
.navbar-nav>li>a {
line-height: 50px;
font-size: 16px
}
We have also customized h1 by adding a bottom margin of 30 pixels to it.
h1 {
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
margin-bottom: 30px
}
Responsive Image
You might have already noticed that for each of the images in the slideshow, we have used
'img-responsive' class. This is a new feature in Bootstrap v3.0.0. Using the 'img-responsive'
class along with img tag, Bootstrap makes the images responsive.
Creating Grid
Below the slideshow, we have placed our content using grids. We opened the grid with a div
with 'container' class. Note that we are going to develop a responsive website and unlike
previous versions of Bootstrap, here, we have a single class for container and the is
responsive by default.
Container div nests number of divs (three in the first row and six in the second row) with
class 'row' associated with them to create rows of the Bootstrap's grid.
Each row then holds divs with class 'col-x-y' to create columns. The value of x can be xs for
mobile devices, sm for tablets, md for laptops and smaller desktop screens, and lg for large
desktop screens. it takes a mobile first approach. The value of y can be any positive integer
but a total number of columns in a grid must not exceed 12. In our project, we have used lg
for the sake of simplicity but since we have done so, you may have a stacked experience
while watching the project site in mobile or tablets.
In a couple of days we will have a complete tutorial on Grid system of Twitter Bootstrap
V3.0.0 and there we will explore its awesomeness of the responsive capabilities.
In this example, we have wanted three equal width columns in our first row, so we used 'collg-4' for all of the columns. In the second row, we have made it 'col-lg-2' since we wanted
six columns.
Following is the markup for grid containing two rows, the first row has three columns and
the second row has six columns.
<div class="row barone">
<div class="col-lg-2">
<p><img src="https://www.w3resource.com/images/w3resourcelogo.gif"></p>
</div>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/php.png"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/mysql-logo.jpg"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/javascript-logo.png"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/java.png"></p>
</div>
<div class="col-lg-2">
<p><img src="https://w3resource.com/update-images/postgresql.png"></p>
</div>
</div>
We ended up the grid with a hr and a footer with following markup
<hr>
<p>Copyright@2013-14 by ToDo App.</p>
Using tables
In the price.html page of our project, we are using a table to render a price table. We used
the following markup
<table class="table table-bordered">
<thead>
<tr>
<th>Features</th>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<th>Individual</th>
<th>Small Team</th>
<th>Medium Team</th>
<th>Enterprise</th>
</tr>
</thead>
<tbody>
<tr>
<td><h3>No. Of users</h3></td>
<td><span class="badge">One</span></td>
<td><span class="badge">Five</span></td>
<td><span class="badge">Fifteen</span></td>
<td><span class="badge">Unlimited</span></td>
</tr>
<tr>
<td><h3>Pro training</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Forum Support</h3></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
</tr>
<tr>
<td><h3>In person support</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Weekly webinars</h3></td>
<td><span class="badge">No</span></td>
<td><span class="badge">No</span></td>
<td><span class="badge">Yes</span></td>
<td><span class="badge">Yes</span></td>
</tr>
<tr>
<td><h3>Price</h3></td>
<td><button type="button" class="btn btn-warning btnlg">$9/Month</button></td>
<td><button type="button" class="btn btn-warning btnlg">$19/Month</button></td>
<td><button type="button" class="btn btn-warning btnlg">$49/Month</button></td>
<td><button type="button" class="btn btn-warning btnlg">$99/Month</button></td>
</tr>
<tr>
<td></td>
<td><button type="button" class="btn btn-success btn-lg">Buy
now</button></td>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
<td><button type="button" class="btn btn-success btn-lg"">Buy
now</button></td>
</tr>
</tbody>
</table>
Two classes 'table' and 'table-bordered' are used which are default form Bootstrap's original
css file. But we have made some customizations to make the table heads look different by
adding following css in our customize.css file
th {
background-color: #428bca;
color: #ec8007;
z-index: 10;
text-shadow: 1px 1px 1px #fff;
font-size: 24px;
}
Using badges
We have used class 'badge' for displaying some texts within our table. We have customized
badge class also with following css
.badge {
background-color: #428bca;
color: #fff;
font-size: 22px;
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
For this and contact.html page, we have added another css rule in customize.css
.container > h1 {
text-align: center;
}
This makes the h1 aligned center.
Using form
In the contact.html file we have created three columns and in the first column, we have
embedded a from. We have used default styles for this.
<form class="form-horizontal" role="form">
<div class="form-group">
<label for="email" class="col-lg-2 control-label">Email</label>
<div class="col-lg-10">
<input type="email" class="form-control" id="email" placeholder="Email">
</div>
</div>
<div class="form-group">
<label for="name" class="col-lg-2 control-label">Name</label>
<div class="col-lg-10">
<input type="text" class="form-control" id="name" placeholder="Name">
</div>
</div>
<div class="form-group">
<label for="country" class="col-lg-2 control-label">Country</label>
<div class="col-lg-10">
<select>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<option>USA</option>
<option>India</option>
<option>UK</option>
<option>Autralia</option>
</select>
</div>
</div>
<div class="form-group">
<label for="desc" class="col-lg-2 control-label">Message</label>
<div class="col-lg-10">
<textarea rows="5" cols="50"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-lg-offset-2 col-lg-10">
<button type="submit" class="btn btn-default">Submit</button>
</div>
</div>
</form>
'form-horizontal' class places the form controls horizontally. Note that there is role="form"
added for accessibility. This is anew feature of version 3.0.0.
For placing each of the form control Bootstrap 3.0.0 uses a new 'form-group' class.
In the second column of the grid in this page, we have placed some text simply.
Adding Google map
In the third column of the grid in the contact.html page, we have added Google Map. For
that, we have used the following markup
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<div id="map_canvas"></div>
</div>
And the following js, which has been added at the top the HTML file within head
function initialize() {
var map_canvas = document.getElementById('map_canvas');
var map_options = {
center: new google.maps.LatLng(23.244066, 87.861276),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(map_canvas, map_options)
}
google.maps.event.addDomListener(window, 'load', initialize);
And you must add the following script tag before the said js
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
Copy
You have to add following style in custom.css for the map to be rendered properly
#map_canvas {
width: 400px;
height: 400px;
}
This is how we have created our first simple project based on Twitter Bootstrap V3.0.0. But
we have just scratched the surface. This series will update all the Twitter Bootstrap Tutorial
we have to version 3.0.0 exploring new techniques and customizations.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
CHAPTER 5 WHAT IS JQUERY
jQuery
jQuery is a fast, small, cross-platform and feature-rich JavaScript library. It is designed to simplify the
client-side scripting of HTML. It makes things like HTML document traversal and manipulation,
animation, event handling, and AJAX very simple with an easy-to-use API that works on a lot of
different type of browsers.
The main purpose of jQuery is to provide an easy way to use JavaScript on your website to make it
more interactive and attractive. It is also used to add animation.
What is jQuery
jQuery is a small, light-weight and fast JavaScript library. It is cross-platform and supports different
types of browsers. It is also referred as ?write less do more? because it takes a lot of common tasks
that requires many lines of JavaScript code to accomplish, and binds them into methods that can be
called with a single line of code whenever needed. It is also very useful to simplify a lot of the
complicated things from JavaScript, like AJAX calls and DOM manipulation.
o
jQuery is a small, fast and lightweight JavaScript library.
o
jQuery is platform-independent.
o
jQuery means "write less do more".
o
jQuery simplifies AJAX call and DOM manipulation.
jQuery Features
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Following are the important features of jQuery.
o
HTML manipulation
o
DOM manipulation
o
DOM element selection
o
CSS manipulation
o
Effects and Animations
o
Utilities
o
AJAX
o
HTML event methods
o
JSON Parsing
o
Extensibility through plug-ins
Why jQuery is required
Sometimes, a question can arise that what is the need of jQuery or what difference it makes
on bringing jQuery instead of AJAX/ JavaScript? If jQuery is the replacement of AJAX and
JavaScript? For all these questions, you can state the following answers.
o
It is very fast and extensible.
o
It facilitates the users to write UI related function codes in minimum possible lines.
o
It improves the performance of an application.
o
Browser's compatible web applications can be developed.
o
It uses mostly new features of new browsers.
So, you can say that out of the lot of JavaScript frameworks, jQuery is the most popular and
the most extendable. Many of the biggest companies on the web use jQuery.
Some of these companies are:
o
Microsoft
o
Google
o
IBM
o
Netflix
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
CHAPTER 6 RSPONSIVE DESIGN
What Is Responsive Web Design?
Responsive Web design is the approach that suggests that design and development
should respond to the user’s behavior and environment based on screen size, platform
and orientation.
The practice consists of a mix of flexible grids and layouts, images and an intelligent
use of CSS media queries. As the user switches from their laptop to iPad, the website
should automatically switch to accommodate for resolution, image size and scripting
abilities. One may also have to consider the settings on their devices; if they have
a VPN for iOS on their iPad, for example, the website should not block the user’s
access to the page. In other words, the website should have the technology to
automatically respond to the user’s preferences. This would eliminate the need for a
different design and development phase for each new gadget on the market.
Almost every new client these days wants a mobile version of their website. It’s
practically essential after all: one design for the BlackBerry, another for the iPhone,
the iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the
next five years, we’ll likely need to design for a number of additional inventions.
When will the madness stop? It won’t, of course.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Almost every new client these days wants a mobile version of their website. It’s
practically essential after all: one design for the BlackBerry, another for the iPhone, the
iPad, netbook, Kindle — and all screen resolutions must be compatible, too. In the next
five years, we’ll likely need to design for a number of additional inventions. When will
the madness stop? It won’t, of course.
In the field of Web design and development, we’re quickly getting to the point of
being unable to keep up with the endless new resolutions and devices. For many
websites, creating a website version for each resolution and new device would be
impossible, or at least impractical. Should we just suffer the consequences of losing
visitors from one device, for the benefit of gaining visitors from another? Or is there
another option?
The Concept Of Responsive Web Design
Ethan Marcotte wrote an introductory article about the approach, Responsive Web
Design, for A List Apart. It stems from the notion of responsive architectural design,
whereby a room or space automatically adjusts to the number and flow of people
within it:
"Recently, an emergent discipline called “responsive architecture” has begun asking
how physical spaces can respond to the presence of people passing through them.
Through a combination of embedded robotics and tensile materials, architects are
experimenting with art installations and wall structures that bend, flex, and expand as
crowds approach them. Motion sensors can be paired with climate control systems to
adjust a room’s temperature and ambient lighting as it fills with people. Companies
have already produced “smart glass technology” that can automatically become
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
opaque when a room’s occupants reach a certain density threshold, giving them an
additional layer of privacy."
Transplant this discipline onto Web design, and we have a similar yet whole new idea.
Why should we create a custom Web design for each group of users; after all,
architects don’t design a building for each group size and type that passes through it?
Like responsive architecture, Web design should automatically adjust. It shouldn’t
require countless custom-made solutions for each new category of users.
Obviously, we can’t use motion sensors and robotics to accomplish this the way a
building would. Responsive Web design requires a more abstract way of thinking.
However, some ideas are already being practiced: fluid layouts, media queries and
scripts that can reformat Web pages and mark-up effortlessly (or automatically).
But responsive Web design is not only about adjustable screen resolutions and
automatically resizable images, but rather about a whole new way of thinking about
design. Let’s talk about all of these features, plus additional ideas in the making.
Adjusting Screen Resolution
With more devices come varying screen resolutions, definitions and orientations. New
devices with new screen sizes are being developed every day, and each of these
devices may be able to handle variations in size, functionality and even color. Some
are in landscape, others in portrait, still others even completely square. As we know
from the rising popularity of the iPhone, iPad and advanced smartphones, many new
devices are able to switch from portrait to landscape at the user’s whim. How is one to
design for these situations?
In addition to designing for both landscape and portrait (and enabling those
orientations to possibly switch in an instant upon page load), we must consider the
hundreds of different screen sizes. Yes, it is possible to group them into major
categories, design for each of them, and make each design as flexible as necessary.
But that can be overwhelming, and who knows what the usage figures will be in five
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
years? Besides, many users do not maximize their browsers, which itself leaves far
too much room for variety among screen sizes.
Morten Hjerde and a few of his colleagues identified statistics on about 400 devices
sold between 2005 and 2008. Below are some of the most common:
Since then even more devices have come out. It’s obvious that we can’t keep creating
custom solutions for each one. So, how do we deal with the situation?
PART OF THE SOLUTION: FLEXIBLE EVERYTHING
A few years ago, when flexible layouts were almost a “luxury” for websites, the only
things that were flexible in a design were the layout columns (structural elements) and
the text. Images could easily break layouts, and even flexible structural elements
broke a layout’s form when pushed enough. Flexible designs weren’t really that
flexible; they could give or take a few hundred pixels, but they often couldn’t adjust
from a large computer screen to a netbook.
Now we can make things more flexible. Images can be automatically adjusted, and we
have workarounds so that layouts never break (although they may become squished
and illegible in the process). While it’s not a complete fix, the solution gives us far
more options. It’s perfect for devices that switch from portrait orientation to landscape
in an instant or for when users switch from a large computer screen to an iPad.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
CHAPTER 7 Project: creating dynamic and responsive
website for a restaurant
Introduction : In this section I will talk about the project I created during my
training and I will code a website which will be dynamic and responsive.
I will use HTML, CSS, Javascript and also Bootsrap framework.
Here are screenshots of my website in desktop browser and mobile browser.
Large Device browser view:
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Small device view:
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
This explains responsiveness of my website and also one code refers to different
views in different browser sizes.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
HTML CODE:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>David Chu's China Bistro</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>
<span class="icon-bar"></span>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<span class="icon-bar"></span>
<span class="icon-bar"></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">
<a href="#" onclick="$dc.loadMenuCategories();">
<span class="glyphicon glyphicon-cutlery"></span><br class="hiddenxs"> Menu</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-info-sign"></span><br class="hiddenxs"> About</a>
</li>
<li>
<a href="#">
<span class="glyphicon glyphicon-certificate"></span><br class="hiddenxs"> 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><!-- #nav-list -->
</div><!-- .collapse .navbar-collapse -->
</div><!-- .container -->
</nav><!-- #header-nav -->
</header>
<div id="call-btn" class="visible-xs">
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
<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">
<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>
<hr class="visible-xs">
</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">&copy; Copyright David Chu's China Bistro
2016</div>
</div>
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
</footer>
<!-- jQuery (Bootstrap JS plugins depend on it) -->
<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>
CSS CODE:
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;
height: 150px;
margin: 10px 15px 10px 0;
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
.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;
text-transform: uppercase;
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;
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
#nav-list a span {
font-size: 1.8em;
}
#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 {
margin-bottom: 35px;
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
#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 {
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%;
margin-bottom: 15px;
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
}
#menu-tile:hover, #specials-tile:hover, #map-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
}
#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;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
/* END HOME PAGE */
/* MENU CATEGORIES PAGE */
.category-tile {
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
width: 200px;
height: 200px;
margin: 0 auto 15px;
}
.category-tile span {
position: absolute;
bottom: 0;
right: 0;
width: 100%;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
text-align: center;
font-size: 1.2em;
text-transform: uppercase;
background-color: #000;
color: #fff;
opacity: .8;
}
.category-tile:hover {
box-shadow: 0 1px 5px 1px #cccccc;
}
#menu-categories-title + div {
margin-bottom: 50px;
}
/* END MENU CATEGORIES PAGE */
/* SINGLE CATEGORY PAGE */
.menu-item-tile {
margin-bottom: 25px;
}
.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;
}
.menu-item-tile .menu-item-price span {
font-size: .6em;
}
.menu-item-photo {
position: relative;
border: 2px solid #3F0C1F;
overflow: hidden;
padding: 0;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
margin-right: -15px;
margin-left: auto;
margin-bottom: 20px;
max-width: 250px;
}
.menu-item-photo div {
position: absolute;
bottom: 0;
right: 0;
width: 80px;
background-color: #557c3e;
text-align: center;
}
.menu-item-description {
padding-right: 30px;
}
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) {
.container .jumbotron {
background: url('../images/jumbotron_1200.jpg') no-repeat;
height: 675px;
}
}
/********** Medium devices only **********/
@media (min-width: 992px) and (max-width: 1199px) {
/* Header */
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
#logo-img {
background: url('../images/restaurant-logo_medium.png') no-repeat;
width: 100px;
height: 100px;
margin: 5px 5px 5px 0;
}
/* End Header */
/* Home Page */
.container .jumbotron {
background: url('../images/jumbotron_992.jpg') no-repeat;
height: 558px;
}
/* End Home Page */
}
/********** Small devices only **********/
@media (min-width: 768px) and (max-width: 991px) {
/* Home Page */
.container .jumbotron {
background: url('../images/jumbotron_768.jpg') no-repeat;
height: 432px;
}
/* End Home Page */
}
/********** Extra small devices only **********/
@media (max-width: 767px) {
/* Header */
.navbar-brand {
padding-top: 10px;
height: 80px;
}
.navbar-brand h1 { /* Restaurant name */
padding-top: 10px;
font-size: 5vw; /* 1vw = 1% of viewport width */
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
.navbar-brand p { /* Kosher cert */
font-size: .6em;
margin-top: 12px;
}
.navbar-brand p img { /* Star-K */
height: 20px;
}
#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;
text-transform: uppercase;
}
/* End Header */
/* Footer */
.panel-footer section {
margin-bottom: 30px;
text-align: center;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
}
.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 */
.container .jumbotron {
margin-top: 30px;
padding: 0;
}
#menu-tile, #specials-tile {
width: 360px;
margin: 0 auto 15px;
}
.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 */
.navbar-brand h1 { /* Restaurant name */
padding-top: 5px;
font-size: 6vw;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
}
/* End Header */
/* Home page */
#menu-tile, #specials-tile {
width: 280px;
margin: 0 auto 15px;
}
.col-xxs-12 {
position: relative;
min-height: 1px;
padding-right: 15px;
padding-left: 15px;
float: left;
width: 100%;
}
}
JAVASCRIPT CODE:
$(function () { // Same as document.addEventListener("DOMContentLoaded"...
// 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 = {};
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
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;
};
// 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;
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
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(
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
allCategoriesUrl,
buildAndShowHomeHTML, // ***** <---- TODO: STEP 1: Substitute [...] ******
true); // Explicitely setting the flag to get JSON from server processed into an
object literal
});
// *** finish **
// Builds HTML for the home page based on categories array
// returned from the server.
function buildAndShowHomeHTML (categories) {
// Load home snippet page
$ajaxUtils.sendGetRequest(
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
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
// 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
// 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];
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
// Load the menu categories view
dc.loadMenuCategories = function () {
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
allCategoriesUrl,
buildAndShowCategoriesHTML);
};
// Load the menu items view
// 'categoryShort' is a short_name for a category
dc.loadMenuItems = function (categoryShort) {
showLoading("#main-content");
$ajaxUtils.sendGetRequest(
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
$ajaxUtils.sendGetRequest(
categoriesTitleHtml,
function (categoriesTitleHtml) {
// Retrieve single category snippet
$ajaxUtils.sendGetRequest(
categoryHtml,
function (categoryHtml) {
// Switch CSS class active to menu button
switchMenuToActive();
var categoriesViewHtml =
buildCategoriesViewHtml(categories,
categoriesTitleHtml,
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
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,
categoriesTitleHtml,
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;
}
finalHtml += "</section>";
return finalHtml;
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
// Builds HTML for the single category page based on the data
// from the server
function buildAndShowMenuItemsHTML (categoryMenuItems) {
// Load title snippet of menu items page
$ajaxUtils.sendGetRequest(
menuItemsTitleHtml,
function (menuItemsTitleHtml) {
// Retrieve single menu item snippet
$ajaxUtils.sendGetRequest(
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",
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
categoryMenuItems.category.name);
menuItemsTitleHtml =
insertProperty(menuItemsTitleHtml,
"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 =
insertProperty(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);
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
html =
insertProperty(html,
"name",
menuItems[i].name);
html =
insertProperty(html,
"description",
menuItems[i].description);
// Add clearfix after every second menu item
if (i % 2 !== 0) {
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;
}
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
// 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);
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)
lOMoARcPSD|20474713
CHAPTER 8: CONCLUSION
After so much effort put in I have successfully created a dynamic and responsive
restaurant website.
I would like to extend my gratitude towards
-Johns Hopkins university website
-coursera.org
-Mr. Yaakov Chaikin
- https://www.smashingmagazine.com/
- https://www.w3resource.com/
Without them this project and this report would not have been possible.
Downloaded by Pushpendar Paplu (pushpendarpaplu@gmail.com)