-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
137 lines (127 loc) · 7.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!doctype html>
<html lang="en" class="h-100">
<head>
<title>Loan Calculator: By Kevin Rocha</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap and FA CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<script src="https://kit.fontawesome.com/5db21ba9c6.js" crossorigin="anonymous"></script>
<!-- Google Font CSS -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet">
<!-- CSS and Favicon -->
<link rel="stylesheet" href="css/site.css">
<link rel="icon" type="image/png" href="img/KR.png">
</head>
<body class="d-flex flex-column h-100">
<!-- Navbar Section -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<div class="container-fluid col-xxl-10">
<div class="d-flex align-items-center">
<a class="navbar-brand mx-1" href="index.html"><span class="brandFont fs-3">KR</span></a>
<a class="navbar-brand mx-1" href="index.html"> Loan Calculator</a>
</div>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav me-auto mb-2 mb-md-0">
<li class="nav-item">
<a class="nav-link mx-1 active" aria-current="page" href="index.html">Overview</a>
</li>
<li class="nav-item">
<a class="nav-link mx-1" href="app.html">App Demo</a>
</li>
<li class="nav-item">
<a class="nav-link mx-1" href="code.html">App Code</a>
</li>
<li class="nav-item">
<a class="nav-link mx-1" target="_blank" href="https://github.com/kevinarocha/LoanCalculator">GitHub Repo</a>
</li>
<li class="nav-item">
<a class="nav-link mx-1" target="_blank" href="https://kevinrocha.netlify.app/">My Portfolio</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- Main Section -->
<main class="flex-shrink-0">
<div class="container col-xxl-8 px-4 py-5">
<div class="row g-5 pt-5 row-cols-1 row-cols-lg-2">
<div class="col order-last order-lg-first">
<!-- App Name, Description -->
<h1 class="display-5 fw-bold lh-1 mb-3">Loan Calculator: A Coding Project</h1>
<h4 class="lead">A JavaScript coding exercise using loops, functions, and conditional statements.
This program displays an amortization table and monthly payments details for a home loan based on a user-defined total loan amount, number of payments, and annual interest rate.</h4>
<!-- JavaScript Principles Applied -->
<ul class="fa-ul pt-2 checklist">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>Regular Expressions</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Objects</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Loops</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Functions</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript DOM Manipulation
</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript If/Then/Else
Conditional Statements</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>JavaScript Booleans</li>
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>CSS and Bootstrap</li>
</ul>
<div>
<a href="app.html" type="button" class="btn btn-outline-dark btn-lg px-4 me-md-2">View App!</a>
</div>
<!-- Technologies Applied -->
<h5 class="fw-bold mt-5">
<div class="d-flex">
<div class="row">
<div class="col"><i class="fab fa-js-square fa-3x jsIcon"></i></div>
<div class="col"><i class="fab fa-bootstrap fa-3x bsIcon"></i></div>
<div class="col"><i class="fab fa-html5 fa-3x htmlIcon"></i></div>
<div class="col"><i class="fab fa-css3-alt fa-3x cssIcon"></i></div>
</div>
</div>
</h5>
</div>
<!-- App Logo -->
<div class="col">
<img src="img/loan calculator.png" class="img-fluid center-block d-block mx-auto"
alt="Loan Calculator App Logo" width="500">
</div>
</div>
</div>
</main>
<!-- Footer Section -->
<footer class="footer mt-auto py-2">
<div class="container-fluid col-xxl-10">
<div class="row row-cols-1 row-cols-lg-3 gy-1">
<div
class="col order-last order-lg-first text-light d-flex justify-content-center justify-content-lg-start align-items-center">
<div class="text-center">
<span>© 2023</span> Kevin Rocha
</div>
</div>
<div class="col d-flex justify-content-center justify-content-lg-center align-items-center">
<p class="brandFont text-white m-0 p-0 fs-3">Kevin Rocha</p>
</div>
<div class="col d-flex justify-content-center justify-content-lg-end align-items-center ">
<div class="row">
<div class="col"><a href="https://github.com/kevinarocha" target="_blank"><i
class="fab fa-github fa-2x"></i></a></div>
<div class="col"><a href="https://www.linkedin.com/in/kevin-r-979806175/" target="_blank"><i
class="fab fa-linkedin fa-2x"></i></a></div>
</div>
</div>
</div>
</div>
</footer>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous">
</script>
</body>
</html>