-
Notifications
You must be signed in to change notification settings - Fork 0
/
patient.html
132 lines (123 loc) · 7.99 KB
/
patient.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
<!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>Patient Information System</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 active text-white" 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>
<!-- Patient Info System -->
<section class="min-vh-100">
<div class="container mt-5">
<h2 class="display-5">Patient Information System</h2>
<p class="lead">
The main purpose of the Patient Information System project is to <strong>create a functional and user-friendly system</strong> for storing patient data. The goal is to showcase my skills and knowledge gained during the bootcamp by developing an efficient and reliable solution for managing patient information.
</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/zospatientform/" class="text-decoration-none text-danger" target="_blank">Site</a></p>
</div>
</div>
<div class="r">
<img src="patientForm.png" alt="" class="img-fluid mb-2">
</div>
<h2 class="display-6 my-4">
Project Purpose and Goal
</h2>
<p class="lead">
The main purpose of the Patient Information System is to <strong>provide a reliable and efficient way of storing patient data</strong>. The goal is to create a user-friendly interface where healthcare professionals can input and retrieve patient information easily.
</p>
<h2 class="display-6 my-4">
Web Stack and Explanation
</h2>
<p class="lead">
The Patient Information System is built using HTML, CSS, and JavaScript. HTML is used for structuring the web page and defining the form elements for collecting patient data. CSS is employed to style the interface, making it visually appealing and ensuring a consistent user experience. <strong>JavaScript is the primary scripting language used</strong> to handle form validation, process user inputs, and store the patient information.
</p>
<h2 class="display-6 my-4">
Problems and Thought Process
</h2>
<p class="lead">
<strong>During the development</strong> of the Patient Information System, I encountered various challenges. One of them was arranging the form elements in a logical and intuitive manner, ensuring easy navigation for users to provide accurate information.
</p>
<p class="lead">
Another challenge was handling boolean values for radio buttons and implementing the <strong>necessary logic</strong> to capture user selections correctly. Additionally, I incorporated if-else statements to customize the user experience based on their input, such as displaying specific messages or triggering specific actions.
</p>
<p class="lead">
Throughout the project, I <strong>followed a structured thought process</strong>, <strong>conducting research on best practices</strong> for form validation and data storage using JavaScript. I also <strong>utilized documentation and online resources to find efficient methods</strong> for generating unique IDs for the patients.
</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>