A Certification Course Report

on
Introduction to Programming Using
JavaScript

Submitted in partial fulfilment of requirement for the award of degree of

BACHELOR OF TECHNOLOGY
in
Electronics and Communication Engineering
by

T.MANASA
15K41A0450
Attach Certificate

()
 CERTIFICATE

This is to certify that this Certification course entitled “Introduction

to Programming Using JavaScript” is a bonafide work carried out by
Ms.T.Manasa(Roll Number:15K41A0450), in partial fulfilment of the
requirements for the award of the degree of Bachelor of Technology in
Electronics and Communication Engineering during the academic year
2018-2019 under our guidance and supervision.

Ms.G.Renuka, Dr.J.THARUNKUMAR,
Asst. Prof. & Supervisor, Professor & HOD(ECE),

SR Engineering College, SR Engineering College,

Ananthasagar, Warangal. Ananthasagar, Warangal.
 CONTENTS
ACKNOWLEDGEMENT iv

OBJECTIVE v
LIST OF ACRONYMS vi

Chapter No. Title Page No.

1. INTRODUCTION 01
2. CERTIFICATION COURSE 02
3. OUTCOME OF THE COURSE 03
4. CASE STUDY OF CERTIFICATION 04
5. CONCLUSION 14

6. BIBLIOGRAPH 15
 ACKNOWLEDGEMENT

I wish to take this opportunity to express my sincere gratitude and

deep sense of respect to our beloved Principal, Dr. V. MAHESH, for his
continuous support and guidance to complete this certification course in the
institute.

I express my heartfelt thanks to our Head of the department,

Dr.J.THARUN KUMAR, for providing me with necessary infrastructure and
thereby giving me freedom to carry out the certification course.

I express my heartfelt thanks to coordinator Ms.G.Renuka, for her

encouragement and support.

I express my gratitude to MICROSOFT TECHNOLOGY ASSOCIATE

for their guidance and support.

Finally I would like to thank all the teaching and non-teaching staff of
the department for their suggestions and timely support.

iv
 OBJECTIVE

Student will be able to

 Understand the fundamentals of HTML5,CSS3 and JavaScript.

 Build the User Interface by using HTML5.

 Choose and configure HTML5 tags such that to display text, graphics, play media,
organize contents and forms and also for input and validation.

 Format the User Interface by Using CSS3.

 Arrange UI content by using CSS3.

 Manage the graphical interface by using CSS3.

 Code animations by using JavaScript.

 Code server-side programming (Jquery).

v
 LIST OF ACRONYMS

S.NO ACROYNM NAME PAGE

NO.

1. (MTA)Microsoft Technology Associate 1

2. (UI)User Interface 1

3. (HTML)Hyper Text Markup Language 3

4. (CSS)Cascading Style Sheets 3

5. (OOP)Object Oriented Programming 3

6. (DOM)Document Object Model 3

7. (BOM)Browser Object Model 3

vi
 INTRODUCTION

In this course we learnt about how JavaScript is used to enhance existing web pages and
also howHTML5 and CSS3 are used to build UI.

JavaScript is a programming language that drives the web: from front-end user interface
design, to backend server-side programming, we find JavaScript at every stage of a web site and
web application. In this course, we learnt the fundamental programming concepts and syntax of
the JavaScript programming language, JavaScript operators, keywords, and methods, using
variables, data types, and functions, implementing decisions and loops, interacting with the
DOM (Document Object Model), BOM (Browser Object Model)and interacting with forms.

Furthermore, this course will help anyone who is looking to improve their employability
prospects in the areas of designing and building web pages.

1
 CERTIFICATION COURSE

The topics discussed in this course are

1. HTML5

Brief discussion on syntax of html, form tags, form attributes, form elements,
graphics , multimedia, input elements(height, width, pattern, list, etc..), sample programs on
html.

2. CSS3

Brief discussion on syntax of css, selector tags, input elements(colour, padding,

margin, Borders, etc..), font properties, display properties, position properties, sample programs
on css.

3. JavaScript

Brief discussion on syntax of the JavaScript programming language, JavaScript

operators, keywords, and methods, using variables, data types, and functions, implementing
decisions and loops, interacting with the DOM (Document Object Model), BOM (Browser
Object Model)and interacting with forms.

2
 OUTCOME

Upon completion of this course, we can develop ability to:

• Build the User Interface using HTML(5)+CSS programming.

• Program with JavaScript Operators , Methods, Keywords, Variable, DataTypes and Functions.

• Program with OOP in JavaScript.

• Creating basic dynamic web pages using client - Jquery (Javascript) .

• Interaction with DOM and BOM.

• Interaction with html forms.

3
 CASE STUDY OF CERTIFICATION
(JavaScript Tip Calculator)
A calculator for Tip is developed with inputs such as bill amount, number of members

sharing the bill and select button with attributes like Outstanding, Good,It was OK,Bad and
Terrible is given.If calculate button is clicked then the amount for tip is calculated and shown in
below

HTML PROGRAM
div id="container">

<h1>Tip Calculator</h1>

<div id="calculator">

<form>

<p>How much was your bill?

<p>

$ <input id="billamt" type="text" placeholder="Bill Amount"> <p>How was your service?

<p>

<select id="serviceQual">

<option disabled selected value="0">-- Choose an Option --</option>

<option value="0.3">30&#37; &#45; Outstanding</option>

<option value="0.2">20&#37; &#45; Good</option>

<option value="0.15">15&#37; &#45; It was OK</option>

<option value="0.1">10&#37; &#45; Bad</option>

<option value="0.05">5&#37; &#45; Terrible</option>

</select>

4
 </form>

<p>How many people are sharing the bill?</p>

<input id="peopleamt" type="text" placeholder="Number of People"> people

<button type="button" id="calculate">Calculate!</button>

</div>

<!--calculator end-->

<div id="totalTip">

^$<span id="tip">0.00</span>

<small id="each">each</small>

</div>

<!--totalTip end-->

</div>

<!--container end-->

<script type="text/javascript" src="tipcalculator.js"></script>

CSS PROGRAM

body {

font-family: Roboto;

background: #8E0E00;

/* fallback for old browsers */

5
background: -webkit-linear-gradient(to left, #8E0E00, #1F1C18);

/* Chrome 10-25, Safari 5.1-6 */

background: linear-gradient(to left, #8E0E00, #1F1C18);

/* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

#container {

height: 525px;

width: 360px;

margin: 100px auto;

background: #f7f7f7;

box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);

border-radius: 20px;

-webkit-border-radius: 20px;

-moz-border-radius: 20px;

h1 {

background: #1F030C;

color: white;

margin: 0;

padding: 10px 100px;

text-transform: uppercase;

font-size: 18px;

font-weight: normal;

border-top-left-radius: 20px;

border-top-right-radius: 20px;

6
p{

padding-left: 20px;

form input[type="text"] {

width=90px;

input {

padding-left: 20px;

#billamt {

font-size: 14px;

/*color: #2980b9;*/

color: #red;

background-color: #f7f7f7;

width: 60%;

padding: 5px 5px 8px 8px;

#billamt:focus {

background: #fff;

border: 3px solid #2980b9;

outline: none;

#peopleamt {

width: 60%;

padding: 5px 5px 8px 8px;

margin-left: 20px;

7
color: #red;

background-color: #f7f7f7;

font-size: 14px;

.dollarSign {

display: inline;

#serviceQual {

padding: 13px 13px 20px 20px;

margin-left: 20px;

font-size: 25px;

button {

text-transform: uppercase;

font-weight: bold;

display: block;

margin: 30px auto;

background: #AD133A;

border-radius: 5px;

width: 200px;

height: 50px;

font-size: 17px;

color: white;

button:hover {

8
background: #4c2827;

border-bottom-color: #111;

button:active {

position: relative;

top: 1px;

#totalTip {

font-size: 30px;

margin-top: 5px;

text-align: center;

#totalTip:before {

content: "Tip amount";

font-size: 20px;

font-weight: bold;

display: block;

text-transform: uppercase;

#totalTip sup {

font-size: 20px;

top: -18px;

#totalTip small {

font-size: 20px;

font-weight: bold;

9
display: block;

JavaScript program

//Calculate Tip

function calculateTip() {

var billAmt = document.getElementById("billamt").value;

var serviceQual = document.getElementById("serviceQual").value;

var numOfPeople = document.getElementById("peopleamt").value;

//validate input

if (billAmt === "" || serviceQual == 0) {

alert("Please enter values");

return;

//Check to see if this input is empty or less than or equal to 1

if (numOfPeople === "" || numOfPeople <= 1) {

numOfPeople = 1;

document.getElementById("each").style.display = "none";

} else {

document.getElementById("each").style.display = "block";

//Calculate tip

var total = (billAmt * serviceQual) / numOfPeople;

//round to two decimal places

total = Math.round(total * 100) / 100;

//next line allows us to always have two digits after decimal point

10
total = total.toFixed(2);

//Display the tip

document.getElementById("totalTip").style.display = "block";

document.getElementById("tip").innerHTML = total;

//Hide the tip amount on load

document.getElementById("totalTip").style.display = "none";

document.getElementById("each").style.display = "none";

//click to call function

document.getElementById("calculate").onclick = function() {

calculateTip();

};

11
12
13
 CONCLUSION

Introduction to Programming Using JavaScript validates the skills and knowledge to

recognize and write syntactically correct JavaScript code, use data types supported by JavaScript,
and be able to recognize and write JavaScript code that will logically solve a given problem. The
MTA program provides an appropriate entry point to a future career in technology. Feels
extremely well prepared for certification due to CDE content. It is extremely likely to enroll in
MTA certification.

14
 BIBILOGRAPH

1. https://www.nhneworleans.com/about-us/case-studies

2. https://www.louisianabelieves.com/docs/default-source/jumpstart/microsoft-technology-
associate.pdf

15