Internship Project Report

ON

“MORTGAGE CALCULATOR”
Prepared by

Patel Bhavy dippakbhai

Enrollment No. : 220221306010066

DIPLOMA OF INFORMATION

TECHNOLOGY Under the guidance of

Prof. Rahul Jain

ACADEMIC YEAR

2024-25

Hasmukh Goswami College of Engineering, Ahmedabad.

Monark University, Ahmedabad

May-2025
 MONARK UNIVERSITY

HASMUKH GOSWAMI COLLEGE OF ENGINEERING

Mechanical Engineering

2024-25

CERTIFICATE

Date: 31-03-2025

This is to certify that a study on entitled “Mortgage Calculator’’ has been carried
out by Patel Bhavy dipakbhai(22021306010066) under my guidance in fulfillment of
the Diploma to degree of Engineering in Information Technology 6 th Semester of
Monark University, Ahmedabad during the academic year 2024-
25.

Internal Guide: Prof. Rahul Jain Head of Dept.: Prof. Manoj Patel

Asst. Professor, IT Dept. Head, IT Dept.

HGCE, Vahelal HGCE, Vahelal

Sign of External Examiner:

 Student’s Declaration

I undersigned Patel Bhavy a student of HGCE Diploma of Information technology

6th semester, declare that internship project titled “Mortgage Calculator” is a result
of my/our own work and my/our indebtedness to other work publications,
references, if any, and have been duly acknowledged. If I/we are found guilty of
copying any other report or published information and showing as my/our original
work, I understand that I/we shall be liable and punishable by Institute or University,
which may include ‘Fail’ in examination, ‘Repeat study & resubmission of the
report’ or any other punishment that Institute or University may decide.

Name of Student: Patel Bhavy

Enrollment Number: 22021306010066

 5
1 Month Intership in 6th Sem.

INDEX Page No.

Chapter 1 Introduction To HTML .

1.1 What is HTML ?
1.2 What is an HTML Element ?
1.3 Web Browsers.
1.4 HTML Page Structure.

Chapter 2 HTML Tags .

2.1 Heading, Paragraph, Images, Videos.
2.2 Bold, Italic, Underline, Strikethrough.
2.3 Header Tag, Main Tag, Section Tag, Article Tag.
2.4 Ordered Lists & Unordered Lists.

Chapter 3 Introduction To CSS .

3.1 What is CSS?
3.2 Why Use CSS?
3.3 CSS Syntax.
3.4 Ways to Apply CSS.

Chapter 4 Css Properties.

4.1 Background-Color Property.
4.2 Text-Align Property.
4.3 Padding Property & Margin Property.
4.4 Transitions.

Chapter 5 Introduction To Javascript .

5.1 What is JavaScript?
5.2 Why Study JavaScript?
5.3 JavaScript Syntax.
 5.4 How to Add JavaScript in HTML Document?

Chapter 6 Javascript Properties .

6.1 Variables.
6.2 Operators.
6.3 Statements.
6.4 Datatypes.

Chapter 7 Project Code & Images .

7.1 Growth-Website-Project.
7.2 Starbucks-Project.
6

7
 Chapter 1: Introduction To HTML .

1.1 What is HTML?

• HTML stands for Hyper Text Markup Language.
• HTML is the standard markup language for creating Web pages.
• HTML describes the structure of a Web page.
• HTML consists of a series of elements.
• HTML elements tell the browser how to display the content.
• HTML elements label pieces of content such as "this is a heading",
"this is a paragraph", "this is a link", etc.

1.2 What is an HTML Element ?

• An HTML element is defined by a start tag, some content, and an
end tag: <tag name> Content goes here... </tag name>.
• The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>.
<p>My first paragraph.</p>.

1.3 Web Browsers.

• The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to
read HTML documents and display them correctly.
• A browser does not display the HTML tags, but uses them to
determine how to display the document:
1.4 HTML Page Structure.

9
 Chapter 2: HTML Tags .

2.1 Heading, Paragraph, Images, Videos .

1. Heading:-
• Defines headings in a document.
• Ranges from <h1> to <h6>.
• <h1>is most important, <h6> is least.
• Important for SEO.
• Helps in structuring content.

2. Paragraph:-
• Used for defining paragraphs.
• Enclosed within <p> and </p> tags.
• Adds automatic spacing before and after.
• Text wraps to next line inside tag.
• Common in text-heavy content.
3.
Images:-
• Used to embed images.
• Utilizes the src attribute for image URL.
• Alt attribute for alternative text.
• Can be resized using width and height.
• Self-closing, doesn't require an end tag.

4. Videos:-
• Embeds video files on a page.
• Uses src attribute for video URL.
• Supports multiple formats like MP4, WebM .
• Allows for built-in controls via attributes like autoplay, controls, loop.

2.2 Bold, Italic, Underline, Strikethrough.

1. Bold:-
• To bold the text in HTML, we can use either <b> tag or <strong> tag.
• The browsers display the <b> and <strong> tags content in same
way.
• The <b> tag is used to bold the text, while <strong> tag used to bold
the text and shows the importance of text.

10
 • We can also use CSS font-weight property to bold the text.

2. Italic:-
• To make the text italic in HTML, we can either use <i> or <em> tag.
• Both tags make the text italic but used for different purposes.
• The <i> tag is used to make the text italic without semantic meaning
while <em> makes the text italic with semantic importance,
improving accessibility and meaning in content.

3. Underline:-
• The <u> tag is used to underline text content.
• It wraps the content to be underlined with a horizontal line beneath
it.
• This tag is commonly used for hyperlinks or emphasized text.

4. Strikethrough:-
• Strikethrough text is a visual formatting style where a horizontal line
is drawn through characters.
• For example, Strikethrough Text. It is commonly used to indicate that
text is no longer valid, has been deleted, or that changes or
corrections have been made.

2.3 Header Tag, Main Tag, Section Tag, Article Tag.

1. Header Tag:-
• Purpose: Used to contain introductory content or navigation links.
• Semantic: It's a semantic tag, providing meaning to the enclosed
content.
• Location: Commonly found at the top of web pages, but can also
appear within <article> or <section> tags.
• Multiple Instances: Can be used more than once on a page within
different sections.

2. Main Tag:-
• Purpose: Encloses the primary content of a webpage.
• Semantic: Adds meaning, indicating the main content area.
• Unique: Should appear only once per page.
• Accessibility: Helps screen readers identify key content.

11
3. Section Tag:-
• Purpose: Groups related content in a distinct section.
• Semantic: Adds structure and meaning.
• Headers: Often used with a heading <h1> to <h6> to indicate section
topic.
• Nested: Can be nested within other <section> or <article> tags.

4. Article Tag:-
• Purpose: Encloses content that stands alone, like a blog post or news
story.
• Semantic: Provides contextual meaning.
• Independence: Content should make sense even if taken out of the
page context.
• Multiple Instances: Can be used multiple times on the same page.

2.4 Ordered Lists & Unordered Lists.

1. Ordered Lists:-
• Purpose: Used for creating lists with items that have a specific order.
• Default: Items are automatically numbered.
• Nesting: Can be nested within other lists.

2. Unordered Lists:-
• Purpose: Used for lists where the order of items doesn't matter.
• Default: Items are usually bulleted.
• Nesting: Can be nested within other lists.

12
 Chapter 3: Introduction To CSS .
3.1 What is CSS?
• CSS stands for Cascading Style Sheets.
• CSS describes how HTML elements are to be displayed on screen,
paper, or in other media.
• CSS saves a lot of work. It can control the layout of multiple web
pages all at once.
• External stylesheets are stored in CSS files.

3.2 Why Use CSS?

• Saves Time: Write CSS once and reuse it across multiple HTML pages.
• Easy Maintenance: Change the style globally with a single
modification.
• Search Engine Friendly: Clean coding technique that improves
readability for search engines.
• Superior Styles: Offers a wider array of attributes compared to
HTML.
• Ofline Browsing: CSS can store web applications locally using ofline
cache, allowing ofline viewing.

3.3 CSS Syntax.

• The selector points to the HTML element you want to style.
• The declaration block contains one or more declarations separated
by semicolons.
• Each declaration includes a CSS property name and a value,
separated by a colon.

3.4 Ways to Apply CSS.

1. Inline CSS:-
• Quick Application: Ideal for rapid, one-off style adjustments.
• High Specificity: Overrides other CSS rules due to its specificity.
• Limited Reusability: Not suitable for applying the same styles to
multiple elements.

2. Internal CSS:-
• Internal CSS is a method for defining CSS styles directly within an
HTML document.
• It’s particularly useful for applying unique styles to a single web page.

13
 • It’s embedded within the <style> element located in the <head>
section of the HTML file.

3. External CSS:-
• External CSS is a method used to style multiple HTML pages with a
single stylesheet.
• This approach involves creating a separate CSS file with a .css
extension that contains style properties applied to various selectors.
• By using external CSS, you can maintain a consistent design across
multiple web pages efficiently.

14
 Chapter 4: Css Properties .

4.1 Background-Color Property.

• Definition: Sets the background color of an element.
• Syntax: Utilized as background-color: color.
• Visual Appeal: Enhances the visual appeal and contrast of webpage
elements.

4.2 Text-Align Property.

• Usage: Controls the horizontal alignment of text within an element.
• Values: Can take values like left, right, center, and justify.
• Visual Appeal: Enhances readability and visual appeal by organizing
text neatly.

4.3 Padding Property & Margin Property.

1. Padding Property:-
• Usage: Defines the space between the content of an element and its
border.
• Individual Sides: Allows setting padding for individual sides using
padding-top, padding-right, padding-bottom, and padding-left.
• Shorthand: Can use shorthand property padding to set all sides at
once, e.g., padding: 10px 20px 10px 20px.

2. Margin Property:-
• Functionality: Sets the space around elements, separating them
from others.
• Customizable for top, right, bottom, and left sides.
• Shorthand: Allows quick setup, e.g., margin: 10px 20px.
• Auto Value: Can be used for central alignment with auto value.

4.4 Transitions.
• transition-property: Defines which CSS properties will transition.
• transition-duration: Sets how long the transition lasts.
• transition-timing-function: Controls the speed curve of the
transition.
• transition-delay: Specifies a delay before the transition starts.

15
 Chapter 5: Introduction To Javascript .

5.1 What is JavaScript?

• JavaScript is the programming language of the web.
• It can update and change both HTML and CSS. • It can calculate,
manipulate and validate data.

5.2 Why Study JavaScript?

• HTML to define the content of web pages.
• CSS to specify the layout of web pages.
• JavaScript to program the behavior of web pages.

5.3 JavaScript Syntax.

• JavaScript syntax refers to the rules and conventions dictating how
code is structured and arranged with in the JavaScript programming
language.
• This includes statements, expressions, variables, functions,
operators, and control flow constructs.
• There are two types of values defined in JavaScript Syntax:
i) Fixed Values: These are known as the literals.
ii) Variable values: These are called variables.

5.4 How to Add JavaScript in HTML Document?

• JavaScript, also known as JS, is one of the scripting (client-side
scripting) languages, that is usually used in web development to
create modern and interactive web-pages. The term "script" is used
to refer to the languages that are not standalone in nature and here
it refers to JavaScript which run on the client machine.
• In other words, we can say that the term scripting is used for
languages that require the support of another language to get
executed. For example, JavaScript programs cannot get executed
without the help of HTML or without integrated into HTML code.

16
 Chapter 5: Javascript Properties .

6.1 Variables.
1 Var Keyword:-
• The JavaScript var statement declares variables with function scope
or globally.
• Before ES6, var was the sole keyword for variable declaration,
without block scope, unlike let and const. Var is rarely used these
days.

2 Let Keyword:-
• The let keyword in JavaScript is used to make variables that are
scoped to the block they’re declared in.
• Once you’ve used let to define a variable, you cannot declare it again
within the same block. It’s important to declare let variables before
using them.
• The let keyword was introduced in the ES6 or ES2015 version of
JavaScript.
• It’s usually recommended to use let when you’re working with
JavaScript.

3 Const Keyword:-
• The const keyword in JavaScript is used to create variables that
cannot be redeclared or changed after their first assignment. This
keeps the variable’s value fixed.
• Additionally, const doesn’t allow redeclaration of the same variable
within the same block, and it provides block scope.
• It was introduced in ES2015 (ES6) for creating immutable variables.

6.2 Operators.
1 Arithmetic Operators:-
• Addition (+) Operator:- The Addition Operator takes two numerical
operands and gives their numerical sum. It also concatenates two
strings or numbers.
• Subtraction (-) Operator:- The Subtraction Operator gives the
difference between two operands in the form of numerical value.

17
 • Multiplication (*) Operator:- The Multiplication Operator gives the
product of operands where one operand is a multiplicand.
• Division (/) Operator:- The Division Operator provides the quotient
of its operands where the right operand is the dividend.
2 Assignment Operators:-
• Addition Assignment Operator(+=):- The Addition Assignment
Operator adds the value to the right operand to a variable and
assigns the result to the variable. Addition or concatenation is
possible. In case of concatenation then we use the string as an
operand.
• Subtraction Assignment Operator(-=):- The subtracts Subtraction
Assignment Operator the value of the right operand from a variable
and assigns the result to the variable.
• Multiplication Assignment Operator(*=):- The Multiplication
Assignment Operator multiplies a variable by the value of the right
operand and assigns the result to the variable.
• Division Assignment Operator(/=):- The Division Assignment
Operator divides a variable by the value of the right operand and
assigns the result to the variable.

3 Comparison Operators:-
• Equality Operator (==):- The Equality operator is used to compare
the equality of two operands.
• Inequality Operator (!=):- The Inequality Operator is used to
compare the inequality of two operands.
• Strict equality Operator (===):- The Strict equality Operator is used
to compare the equality of two operands with type.
• Strict inequality Operator (!==):- The Strict inequality Operator is
used to compare the inequality of two operands with type.

4 Logical Operators:-
• Logical AND (&&) Operator:- The logical AND (&&) operator checks
whether both operands are true. If both are true, the result is true. If
any one or both operands are false, the result is false.
• Logical OR (||) Operator:- The logical OR (||) operator checks
whether at least one of the operands is true. If either operand is
true, the result is true. If both operands are false, the result is false.

18
 • Logical NOT (!) Operator:- The logical NOT (!) operator inverts the
boolean value of its operand. If the operand is true, it returns false. If
the operand is false, it returns true.
• Nullish Coalescing (??) Operator:- The nullish coalescing operator
(??) returns the right-hand operand when the left-hand operand is
either null or undefined. Otherwise, it returns the left-hand operand.

6.3 Statements .
1 JavaScript if-else:-
• JavaScript if-else statement executes a block of code based on a condition. If the condition
evaluates to true, the code inside the “if” block executes; otherwise, the code inside the
“else” block, if present, executes.
• Such control statements are used to cause the flow of execution to advance and branch
based on changes to the state of a program.
• The if statement alone tells us that if a condition is true it will execute a block of
statements and if the condition is false it won’t. But what if we want to do something else
if the condition is false?
• Here comes the else statement. We can use the else statement with the if statement to
execute a block of code when the condition is false.

2 JavaScript switch Statement:-

• The JavaScript switch statement evaluates an expression and executes a block of code
based on matching cases.
• It provides an alternative to long if-else chains, improving readability and maintainability,
especially when handling multiple conditional branches.

3 JavaScript Break Statement:-

• JavaScript break statement is used to terminate the execution of the loop or the switch
statement when the condition is true.
• The fruit name is apple but the given output is for the two cases. This is because of the
break statement. In the case of Apple, we are not using a break statement which means
the block will run for the next case also till the break statement not appear.

4 JavaScript Continue Statement:-

• The continue statement in JavaScript is used to break the iteration of the loop and follow
with the next iteration.
• If continue is used in a for loop, the control flow jumps to the test expression after
skipping the current iteration.

19
6.4 Datatypes.
1 Primitive Datatypes:-
• Number: Represents numeric values (integers and decimals).
• Represents text enclosed in single or double quotes.
• Boolean: Represents a logical value (true or false).
• Undefined: A variable that has been declared but not assigned a
value.

2 Non-Primitive Datatypes:-
• Object: Represents key-value pairs.
• Array: Represents an ordered list of values.
• Function: Represents reusable blocks of code.

20
 Chapter 16: Project Code & Images .

7.1 Growth-Website-Project.

1. Home Page.

21
Home Page Code.

2. About page.

22
About Page Code.

3. Pricing Page.

Pricing Page Code.

23
4. FAQ Page.

FAQ Page Code.

5. Footer Page.
24
Footer Page Code.

7.2 Starbucks-Project.

1. Home Page.

25
Home Page Code.

26
 .
2. Menu Page

27
 .

Menu Page Code.

28
 .
3. About Page

29
 .
About Page Code.

4. Footer Page

Footer Page Code.

30