-
Notifications
You must be signed in to change notification settings - Fork 0
/
ecal.html
134 lines (124 loc) · 7.85 KB
/
ecal.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
<!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.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<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=Mulish:ital,wght@0,300;0,400;0,600;0,1000;1,200&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<link rel="stylesheet" href="main.css">
<title>E-Calculator Project</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md" style="background-color: #03001C;">
<div class="container-fluid">
<a class="navbar-brand fs-4 text-white" href="index.html">Zosimo Uy Jr</a>
<button class="navbar-toggler bg-white" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon bg-white"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav mx-auto">
<li class="nav-item">
<a class="nav-link text-white" href="about.html">About</a>
</li>
<li class="nav-item">
<a class="nav-link text-white active" aria-current="page" href="index.html#project">Projects</a>
</li>
<li class="nav-item">
<a class="nav-link text-white" href="index.html#contact">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- E-cal Content -->
<section class="min-vh-100">
<div class="container mt-5">
<h2 class="display-5">E-Calculator</h2>
<p class="lead">
E-Calculator is a web application developed using HTML, CSS, and JavaScript, providing users with a functional calculator for <strong>performing essential mathematical operations</strong>. The project showcases proficiency in front-end web development and demonstrates the use of JavaScript logic and dynamic HTML elements.
</p>
<div class="row">
<div class="col-4">
<h4 class="fs-4 fw-bold">Type</h4>
<p class="text-secondary">Web Application</p>
</div>
<div class="col-4">
<h4 class="fs-4 fw-bold">Stack</h4>
<ul class="text-secondary list-unstyled" >
<li>HTML</li>
<li>CSS</li>
<li>BOOTSTRAP</li>
<li>Javascript</li>
</ul>
</div>
<div class="col-4">
<h4 class="fs-4 fw-bold">Live</h4>
<p class="fw-bold"><a href="https://pinkdollar123.github.io/zorscalculator/" class="text-decoration-none text-danger" target="_blank">Site</a></p>
</div>
</div>
<div class="ratio ratio-1x1">
<iframe src="https://pinkdollar123.github.io/zorscalculator/" allowfullscreen
></iframe>
</div>
<h2 class="display-6 my-4">
Project Purpose and Goal
</h2>
<p class="lead">
The main purpose of E-Calculator is to <strong>create a user-friendly and functional calculator</strong> that allows users to perform basic math operations. The goal is to provide a clean and intuitive user interface for easy input and calculation.
</p>
<h2 class="display-6 my-4">
Web Stack and Explanation
</h2>
<p class="lead">
E-Calculator utilizes HTML, CSS, and JavaScript to create the interface and implement the calculator's functionality. HTML is used to structure the elements, CSS for styling, and JavaScript for handling user inputs and performing calculations. The project <strong>focuses on JavaScript's switch case statements to dynamically handle different mathematical operations</strong>.
</p>
<h2 class="display-6 my-4">
Problems and Thought Process
</h2>
<p class="lead">
During the development process, I <strong>encountered challenges in designing a responsive layout for the calculator</strong>. However, I prioritized creating a functional calculator with a clean and intuitive interface, which led me to temporarily overlook the responsiveness aspect. I plan to revisit the project in the future to implement responsive design principles and optimize it for various devices and screen sizes.
</p>
<p class="lead">
<strong>By acknowledging the need for responsive design and continuously learning and improving my skills</strong>, I aim to enhance the user experience and accessibility of E-Calculator in future iterations.
</p>
<p class="lead">
Overall, E-Calculator serves as a <strong>practical demonstration of front-end development skills and the ability to create functional web applications</strong>.
</p>
</div>
</section>
<!-- Footer -->
<div class="" style="background-color: #03001C;">
<footer class="container row row-cols-1 row-cols-sm-2 row-cols-md-5 py-5 mt-5 text-white d-flex justify-content-evenly">
<div class="col mb-3">
<a href="index.html" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none fs-4 text-white">
Zosimo Uy Jr
</a>
<p class="text-body-light small">© 2023, Built and designed by Zosimo Uy Jr</p>
</div>
<div class="col mb-3">
<h5 class="fs-6 fw-semibold">Links</h5>
<ul class="nav flex-column">
<li class="nav-item mb-2"><a href="about.html" class="nav-link p-0 text-decoration-none text-danger fw-bold">About</a></li>
<li class="nav-item mb-2"><a href="index.html#project" class="nav-link p-0 text-decoration-none text-danger fw-bold">Projects</a></li>
<li class="nav-item mb-2"><a href="index.html#contact" class="nav-link p-0 text-decoration-none text-danger fw-bold">Contact</a></li>
</ul>
</div>
<div class="col mb-3">
<h5 class="fs-6 fw-semibold">Get in touch</h5>
<ul class="list-group list-group-horizontal">
<li class="list-group-item fs-2 bg-transparent border-0"><a href="https://github.com/pinkdollar123" target="_blank"><i class="bi bi-github"></i></a></li>
<li class="list-group-item fs-2 bg-transparent border-0"><a href="https://www.linkedin.com/in/zosimo-uy-0a9900275/" target="_blank"><i class="bi bi-linkedin"></i></a></li>
<li class="list-group-item fs-2 bg-transparent border-0"><a href="https://www.facebook.com/zosr.code" target="_blank"><i class="bi bi-facebook"></i></a></li>
<li class="list-group-item fs-2 bg-transparent border-0"><a href="mailto:[email protected]" target="_blank"><i class="bi bi-envelope"></i></a></li>
</ul>
</div>
</footer>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
</html>