SR GROUP OF INSTITUTION

JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III Semester)

SR GROUP OF INSTITUTION JHANSI

Mini Project / Internship Assessment

Subject Name: Mini project / Internship Assessment

Subject Code: KCS-354

COURSE: B.Tech.
SEMESTER: IIIrd

by
TANAY AGARWAL (2001450100049)

Department of Computer Science and Engineering

SR GROUP OF INSTITUTION JHANSI

i
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

CERTIFICATE

This is to certify that Mini Project/Internship Assessment Report entitled “A library based on web
application and responsive web design” which is submitted by TANAY AGARWAL in partial
fulfilment of the requirement for the award of degree B. Tech. in Department of Computer Science and
Engineering of Dr. APJ Abdul Kalam Technical University, Uttar Pradesh, Lucknow is a record of the
candidate’s own work carried out by him/her under my supervision. The matter embodied in this report
is original and has not been submitted for the award of any other degree.

Supervisor: Miss Manu Gupta

ii
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

DECLARATION

I hereby declare that this submission is my own work and that, to the best of my knowledge and
belief, it contains no material previously published or written by another person nor material
which to a substantial extent has been accepted for the award of any other degree or diploma of
the university or other institute of higher learning, except where due acknowledgment has been
made in the text.

Name: Tanay agarwal

Roll No.: 2001450100049

iii
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

ACKNOWLEDGEMENT

I take this opportunity to express my sincere gratitude and respect to SR GROUP OF

INSTITUTION JHANSI for providing me a platform to pursue my studies and carry out my
mini project.
I have a great pleasure in expressing my deep sense of gratitude to Miss Manu Gupta for her
constant encouragement and valuable guidance throughout the project. She has been a constant
support and encouragement throughout the course of this project.
I also extend my thanks to all the faculty of Computer Science and Engineering who directly or
indirectly encouraged me.
Finally, I would like to thank my parents and friends for all their moral support they have given
me during the completion of this work.

TANAY AGARWAL
(2001450100049)

iv
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

ABSTRACT
This project deals with a library based on web application and responsive web design which
aim to adjust the presentation on mobile devices. This work presents the whole development
process of self-made library which can be uselful for management of books. The report consists
of the following main parts analysis, design and implementation, and evaluation. Internet search
and literature review are main methods for making an investigation on our project. A prototype
is developed by using HTML5, CSS3, and Javascript languages.

v
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

TABLE OF CONTENTS

Page No.

Certificate ii

Declaration iii

Acknowledgement iv

Abstract v

Table of contents vi

List of Figures vii

Introduction 1

Tools and Technology 2

History and Features of Technology 6

Work Done 15

Conclusion 18

References 19

vi
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

LIST OF FIGURES:

Figure 3.1: Versions of HTML

Figure 3.2: Versions of CSS

Figure 3.3: Versions of JavaScript

Figure 4.1: Use of VS Code

Figure 4.2: Use of Google Developer Tools

Figure 4.3: Final Web View of library

vii
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

CHAPTER 1: INTRODUCTION

Summary of the project:

The modern web has quickly become a viable platform for creating stunning, high quality
websites.

The range of websites that can be created is on par with desktop and native OS counterparts.
With modern Web technologies and a recent browser, it's entirely possible to make stunning,
top-notch websites for the Web.

The project library is a website developed by me and built into the Google Chrome web
browser. The website deals with the management of book for the school library and college
libraries .It also categorises the books according to the genre of the books like fiction computer
science etc. This is a usefull application for management of books in colleges and school.

Thanks to massive performance improvements in JavaScript just-in-time compiler technology

and new APIs, you can build games that run in the browser (or on HTML5-powered devices
like those based on Firefox OS) without making compromises.

Background:
This section describes the idea behind this project and the functionality of different parts of this
project. The pros and cons of some specific technologies that were selected for the
implementation of this engine and some of the experiments carried out in the beginning of this
project are also discussed. We will also see how these experiments helped us in the
implementation and design of the game engine. The game engine, HTML5 elements,
JavaScript, and data URI are discussed in the later sections of the report.

1
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

TOOLS & TECHNOLOGY USED

Visual Studio Code:

Visual Studio Code is a source-code editor made by Microsoft for Windows, Linux and
macOS.Features include support for debugging, syntax highlighting, intelligent code
completion, snippets, code refactoring, and embedded Git. Users can change the theme,
keyboard shortcuts, preferences, and install extensions that add additional functionality.

It provides live server extension by which we can check our progress while making web pages
without reloading. We can also export our code to GitHub using vscode extensions.

Instead of a project system, it allows users to open one or more directories, which can then be
saved in workspaces for future reuse. This allows it to operate as a language-agnostic code
editor for any language.

It supports a number of programming languages and a set of features that differs per language.

Unwanted files and folders can be excluded from the project tree via the settings. Many Visual
Studio Code features are not exposed through menus or the user interface but can be accessed
via the command palette.

Visual Studio Code can be extended via extensions, available through a central repository.

This includes additions to the editor and language support. A notable feature is the ability to
create extensions that add support for new languages, themes, and debuggers, perform static
code analysis, and add code linters using the Language Server Protocol.

Visual Studio Code includes multiple extensions for FTP, allowing the software to be used as
a free alternative for web development. Code can be synced between the editor and the server,
without downloading any extra software.

Visual Studio Code allows users to set the code page in which the active document is saved,
the newline character, and the programming language of the active document. This allows it to
be used on any platform, in any locale, and for any given programming language.

2
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Google Chrome:

Google Chrome is a cross-platform web browser developed by Google. It was later ported to
Linux, macOS, iOS, and Android, where it is the default browser. The browser is also the main
component of Chrome OS, where it serves as the platform for web applications.

Most of Chrome's source code comes from Google's free and open-source software project
Chromium, but Chrome is licensed as proprietary freeware. WebKit was the original rendering
engine, but Google eventually forked it to create the Blink engine; all Chrome variants except
iOS now use Blink.

Chrome is most used on tablets (having surpassed Safari), and is also dominant on

smartphones, and at 65% across all platforms combined.

Because of this success, Google has expanded the "Chrome" brand name to other products:
Chrome OS, Chromecast, Chromebook, Chromebit, Chromebox, and Chromebase.

3
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Technologies Used

HTML5:

HTML5 is a markup language used for structuring and presenting content on the World Wide
Web. It is the fifth and last 3 major HTML version that is a World Wide Web Consortium
(W3C) recommendation. The current specification is known as the HTML Living Standard.

It is maintained by the Web Hypertext Application Technology Working Group (WHATWG),

a consortium of the major browser vendors (Apple, Google, Mozilla, and Microsoft).

CSS3:
Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to
simplify the process of making web pages presentable.

CSS handles the look and feel part of a web page. Using CSS, you can control the color of the
text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out,
what background images or colors are used, layout designs,variations in display for different
devices and screen sizes as well as a variety of other effects.

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML document.

Javascript :
JavaScript, often abbreviated JS, is a programming language that is one of the cores
technologies of the World Wide Web, alongside HTML and CSS. Over 97% of websites use
JavaScript on the client side for web page behaviour, often incorporating third-party libraries.

All major web browsers have a dedicated JavaScript engine to execute the code on users'
devices. JavaScript is a high-level, often just-in-time compiled language that conforms to the
ECMAScript standard. It has dynamic typing, prototype-based object-orientation, and first-
class functions. It is multi-paradigm, supporting event-driven, functional, and imperative
programming styles. It has application programming interfaces (APIs) for working with text,
dates, regular expressions, standard data structures, and the Document Object Model (DOM).

4
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Microsoft Edge:
Microsoft Edge is the default web browser on Windows 10, Windows 10 Mobile, Windows 11,
Xbox One, and Xbox Series X and Series S consoles, replacing Internet Explorer 11 and
Internet Explorer Mobile. As its development and release is dependent on the model of
Windows as a service, it is not included in Windows 10 Enterprise Long-Term Servicing
Channel (LTSC) builds. Microsoft initially announced that Edge would support the legacy
MSHTML (Trident) browser engine for backwards compatibility, but later said that, due to
"strong feedback," Edge would use a new engine, while Internet Explorer would continue to
provide the legacy engine.

5
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

CHAPTER 3: HISTORY AND FEATURES OF TECHNOLOGY

HTML5:
History
The Web Hypertext Application Technology Working Group (WHATWG) began work on the
new standard in 2004. At that time, HTML 4.01 had not been updated since 2000, and the World
Wide Web Consortium (W3C) was focusing future developments on XHTML 2.0. In 2009,
the W3C allowed the XHTML 2.0 Working Group's charter to expire and decided not to renew
it.

The Mozilla Foundation and Opera Software presented a position paper at a World Wide Web
Consortium (W3C) workshop in June 2004, focusing on developing technologies that are
backward-compatible with existing browsers, including an initial draft specification of Web
Forms 2.0.

The workshop concluded with a vote—8 for, 14 against—for continuing work on HTML.
Immediately after the workshop, WHATWG was formed to start work based upon that position
paper, and a second draft, Web Applications 1.0, was also announced.

The two specifications were later merged to form HTML5. The HTML5 specification was
adopted as the starting point of the work of the new HTML working group of the W3C in 2007.

Features
HTML5 introduces elements and attributes that reflect typical usage on modern websites.

Some of them are semantic replacements for common uses of generic block (<div>) and inline
(<span>) elements, for example <nav> (website navigation block), <footer> (usually referring
to bottom of web page or to last lines of HTML code), or <audio> and <video> instead of
<object>.

The HTML5 syntax is no longer based on SGML despite the similarity of its markup. It has,
however, been designed to be backward-compatible with common parsing of older versions of
HTML.

6
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

CSS3:
History
CSS was first proposed by Håkon Wium Lie on October 10, 1994. At the time, Lie was working
with Tim Berners-Lee at CERN. Several other style sheet languages for the web were proposed
around the same time, and discussions on public mailing lists and inside World Wide Web
Consortium resulted in the first W3C CSS Recommendation (CSS1) being released in 1996.

In particular, a proposal by Bert Bos was influential; he became co-author of CSS1, and is
regarded as co-creator of CSS.The CSS Working Group began tackling issues that had not been
addressed with CSS level 1, resulting in the creation of CSS level 2 on November 4, 1997.

It was published as a W3C Recommendation on May 12, 1998. CSS level 3, which was started
in 1998, is still under development as of 2014.

In 2005, the CSS Working Groups decided to enforce the requirements for standards more
strictly. This meant that already published standards like CSS 2.1, CSS 3 Selectors, and CSS 3
Text were pulled back from Candidate Recommendation to Working Draft level.

Features

Website Design: With the use of CSS, we can control various styles, such as the text color, the
font style, the spacing among paragraphs, column size and layout, background color and
images, design of the layout, display variations for distinct screens and device sizes, and many
other effects as well.

Web Control: CSS has controlling power on the documents of HTML, so it is easy to learn. It
is integrated with the HTML and the XHTML markup languages.

7
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Javascript:
History
The first web browser with a graphical user interface, Mosaic, was released in 1993.
Accessible to non-technical people, it played a prominent role in the rapid growth of the
nascent World Wide Web. The lead developers of Mosaic then founded the Netscape
corporation, which released a more polished browser, Netscape Navigator, in 1994. This
quickly became the most-used.

During these formative years of the Web, web pages could only be static, lacking the capability
for dynamic behavior after the page was loaded in the browser. There was a desire in the
burgeoning web development scene to remove this limitation, so in 1995, Netscape decided to
add a scripting language to Navigator. They pursued two routes to achieve this: collaborating
with Sun Microsystems to embed the Java programming language, while also hiring Brendan
Eich to embed the Scheme language.

Microsoft debuted Internet Explorer in 1995, leading to a browser war with Netscape. On the
JavaScript front, Microsoft reverse-engineered the Navigator interpreter to create its own,called
JScript.

Features
JavaScript supports much of the structured programming syntax from C (e.g., if statements,
while loops, switch statements, do while loops, etc.). One partial exception is scoping:
originally JavaScript only had function scoping with var; then block scoping was added in
ECMAScript 2015 with the keywords let and const. Like C, JavaScript makes a distinction
between expressions and statements. One syntactic difference from C is automatic semicolon
insertion, which allows semicolons (which terminate statements) to be omitted.

JavaScript is dynamically typed like most other scripting languages. A type is associated with
a value rather than an expression. For example, a variable initially bound to a number may be
reassigned to a string. JavaScript supports various ways to test the type of objects, including
duck typing. JavaScript includes an eval function that can execute statements provided as
strings at run-time.

8
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Why HTML5 is used over HTML?

HTML5 allows Javascript to run in a browser but this feature was not available in

HTML.HTML5 allows to use a <figure> element to mark up a photo in a document, and a

<figcaption> element to define a caption for the photo.

The <figcaption> tag defines a caption for a <figure> element. This tag provides a container
for content that is equivalent to a figure.

Figure 3.1 Versions of HTML.

It can be used to group a caption with one or more images, a block of code, or other content.

The <nav> tag defines a set of navigation links. It is used for the part of an internet site that
links to different pages at the website. The hyperlinks can be organized through a number of
approaches.

Common examples of the nav elements are menus, tables, contents, and indexes.This element
makes it much easier to create a navigation menu, creates a neat horizontal menu of text links,
and helps screen reading software to correctly identify primary navigation areas in the
document.

9
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Many new elements are added in HTML5 like nav, audio, figcaption, progress, command,
time, datalist, video, figure, meter, data, section, time, aside, canvas,summary, rp, rt, details,
wbr, header, footer, keygen, embed, article, hgroup, bdi, mark, output, source, track, section,
ruby and many more.

The placeholder attribute specifies a short hint that describes the expected value of an input
field/text area. The short hint is displayed in the field before the user enters a value.

Why Css3 Is Preffered Over Css2?

Unlike CSS 2, which is a large single specification defining various features, CSS 3 is divided
into several separate documents called "modules".

Each module adds new capabilities or extends features defined in CSS 2, preserving backward
compatibility.

Work on CSS level 3 started around the time of publication of the original CSS 2
recommendation .

CSS3 can perform all kinds of animation and transformations as it supports animation and 3D
transformations.

10
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Figure 3.2 Versions of CSS.

We can use multi-column text blocks, it provides rounded gradients, features like text shadows,
visual effects, CSS3 selectors are much advanced in comparison to simple selectors offered by
CSS, and are termed as a sequence of easy to use and simple selectors, Whereas, CSS3 list has
a special display property defined in it.

Even list items also have counter reset properties and a wide range of font style and color and
queries and add Media Queries.

11
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Why Javascript Es6 Version Is Used?

ES6 is a version of JavaScript that contains many modern features in popular browsers. They
are essentially the same. Basically, there is no difference between JavaScript and ES6(ECMA
Script 6). ECMA Script is the official name of JavaScript.

The let keyword allows you to declare a variable with block scope.

The constant keyword allows you to declare a constant (a JavaScript variable with a constant
value). Constants are similar to let variables, except that the value cannot be changed.

Arrow functions allows a short syntax for writing function expressions.

Function keyword, the return keyword, and the curly brackets are not needed.

Arrow functions do not have their own this. They are not well suited for defining object

methods. Arrow functions are not hoisted. They must be defined before they are used. Using
const is safer than using var, because a function expression is always a constant value.

Figure 3 Versions of JavaScript.

12
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Only the return keyword and the curly brackets can be omitted if the function is a single
statement.

The JavaScript for/of statement loops through the values of an iterable objects. for/of lets you
loop over data structures that are iterable such as Arrays, Strings, Maps, NodeLists, and more
variable - For every iteration the value of the next property is assigned to the variable.

A Promise is a JavaScript object that links "Producing Code" and "Consuming Code".

"Producing Code" can take some time and "Consuming Code" must wait for the result.

A JavaScript Symbol is a primitive datatype just like Number, String, or Boolean. It

represents a unique "hidden" identifier that no other code can accidentally access.

Relevance Of Javascript in Industrial World

Front-end
It powers the site’s general interactivity and makes it possible to build rich UI components such
as image sliders, pop-ups, site navigation mega menus, form validations, tabs, accordions, and
much more. Various banner ads have chat support, suggest content, have formed or offers social
sharing they are powered by a 3rd party JavaScript plugin.

Mobile applications
Mobile Applications are classified into three categories Native, WebApp, and Hybrid. The
Hybrid applications can be deployed in a native container that uses a mobile WebView object.

When the app is used, this object displays web content thanks to the use of web
technologies(CSS, JavaScript, HTML, HTML5). It is displaying web pages from a desktop
website that are adapted to a WebView display.

The web content can either be displayed as soon as the app is opened or for certain parts of the
app only i.e. for the purchase funnel. Many JavaScript frameworks for Mobile Apps are jQuery
Mobile, React Native, NativeScript, Apache Cordova, Ionic, Titanium.

13
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Backend
Backend developers use a type of JavaScript called Node.js for backend work.Node.js is the
most popular backend framework; it is used in MERN, MEAN, and MEVN stacks. We can
also connect our databases to our server.

It provides functions to fetch data from api's.

Facebook
If we try to use Facebook's website after disabling JavaScript, it wouldn’t allow us to log in.

The dynamic aspect to its website is provided by JavaScript, even if we inspect the code, we
will end up getting only JavaScript code.

These multiple scripts help to render various other pages of Facebook quickly.

Additionally, Facebook is the one who created React.js, the most reactive framework of
JavaScript which is also used in Facebook, Instagram, and WhatsApp.

14
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

WORK DONE

Code Snippets:

15
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

Output:

Figure 4.2 Use of Google Developer Tools

Figure 4.3 Use of Google Developer Tools

16
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

CONCLUSION/FUTURE WORK

We have seen the theoretical approach and implementation details. There is much more to
explore .Also, it does not matter which architecture you pick for your projects as soon as it
fulfills your needs and solves your problems.

Keep in mind that there are NO silver bullets and of course there is always room for
improvement, although this should be useful as a starting point.

And some advice:

• Improve our coding style. In our hardware coding, we unroll the program without making it
hierarchical as a module which may lead to difficulty for debugging.

• Choose high resolution sprite pictures and eliminating sprite background more clearly can
make our game picture looks better.

• Design more complex game logic can increase our game integrity. For example, background
changes with time, distance between pillar become random.

17
 SR GROUP OF INSTITUTION JHANSI
Mini Project/Internship Assessment (KCS-354) (CSE III
Semester)

REFERENCES

● www.w3schools.com

● www.stackoverflow.com

● www.codepen.io

● https://developer.mozilla.org/

● www.dribble.com

● www.fontawesome.com

● fonts.google.com

● https://developers.google.com/

18