Skip to content

Commit f07185a

Browse files
suryakarmakarsuryakarmakar
committed
Healthcare Census app
1 parent 14525a2 commit f07185a

File tree

3 files changed

+173
-0
lines changed

3 files changed

+173
-0
lines changed

‎Courses/IBM-JavaScript-Essentials/14-Healthcare-Census/README.md

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
# Develop an Application for Healthcare Census:
2+
3+
## What you will learn:
4+
5+
You will learn to build interactive forms using HTML and employ JavaScript to collect and manage patient data.
6+
7+
This project will help you understand DOM manipulation and searching techniques based on a health condition. Moreover, you will acquire skills in dynamically generating reports within a webpage, showcasing statistical insights derived from the data. This practical exercise also emphasizes the application of data-driven decision making in healthcare analytics.
8+
9+
The insights and skills acquired through working on this healthcare data analysis interface project will form a solid basis for your final project.
10+
11+
## Learning objectives:
12+
13+
1. Interactive data input interface: Develop an understanding of front-end web development by creating an interactive interface for collecting patient data. You will learn to use HTML forms and input elements, validate user input, and handle various types of data entry (text, radio buttons, number inputs, and dropdowns).
14+
15+
2. Data processing and analysis: Learn data management and searching techniques using JavaScript. You will explore data manipulation concepts such as storing data in arrays of objects and filtering data based on conditions.
16+
17+
3. Dynamic report generation: You will dynamically generate and display reports within a webpage. This action involves updating the HTML content based on the processed data, presenting statistical information in an organized and understandable manner, and manipulating the DOM to reflect changes instantly.
18+
19+
4. User interaction and event handling: Practice event-driven programming and user interaction. You will learn how to handle user-triggered events (button clicks and navigation links) and respond with appropriate search queries.

‎Courses/IBM-JavaScript-Essentials/14-Healthcare-Census/health_analysis.js

+99
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
const addPatientButton = document.getElementById("addPatient");
2+
const report = document.getElementById("report");
3+
const btnSearch = document.getElementById("btnSearch");
4+
const patients = [];
5+
6+
// This function captures user-entered data from the HTML form elements: name, gender, age, and medical condition. It ensures that all fields have valid inputs.
7+
function addPatient() {
8+
const name = document.getElementById("name").value;
9+
const gender = document.querySelector('input[name="gender"]:checked');
10+
const age = document.getElementById("age").value;
11+
const condition = document.getElementById("condition").value;
12+
13+
if (name && gender && age && condition) {
14+
patients.push({ name, gender: gender.value, age, condition });
15+
resetForm();
16+
generateReport();
17+
}
18+
}
19+
20+
// This function clears the values of the name, gender, age, and condition fields in the HTML form by setting them to empty strings or unchecked for radio buttons, effectively resetting the form to its initial state.
21+
function resetForm() {
22+
console.log("patients", patients);
23+
document.getElementById("name").value = "";
24+
document.querySelector('input[name="gender"]:checked').checked = false;
25+
document.getElementById("age").value = "";
26+
document.getElementById("condition").value = "";
27+
}
28+
29+
// This function calculates and constructs an analysis report based on the collected patient data stored in the patients[] array.
30+
function generateReport() {
31+
// Represents the total number of patients stored in the patients[] array
32+
const numPatients = patients.length;
33+
34+
// A data structure (object) initializing counters for specific medical conditions (Diabetes, Thyroid, High Blood Pressure), initially set to zero.
35+
const conditionsCount = {
36+
Diabetes: 0,
37+
Thyroid: 0,
38+
"High Blood Pressure": 0,
39+
};
40+
// A nested object with gender-specific condition counters ( male and female) for each medical condition, also initialized to zero for each condition.
41+
const genderConditionsCount = {
42+
Male: {
43+
Diabetes: 0,
44+
Thyroid: 0,
45+
"High Blood Pressure": 0,
46+
},
47+
Female: {
48+
Diabetes: 0,
49+
Thyroid: 0,
50+
"High Blood Pressure": 0,
51+
},
52+
};
53+
54+
for (const patient of patients) {
55+
conditionsCount[patient.condition]++;
56+
console.log("conditionsCount", conditionsCount[patient.condition]++);
57+
58+
genderConditionsCount[patient.gender][patient.condition]++;
59+
console.log(
60+
"genderConditionsCount",
61+
genderConditionsCount[patient.gender][patient.condition]++
62+
);
63+
}
64+
65+
report.innerHTML = `Number of patients: ${numPatients}<br><br>`;
66+
report.innerHTML += `Conditions Breakdown:<br>`;
67+
for (const condition in conditionsCount) {
68+
report.innerHTML += `${condition}: ${conditionsCount[condition]}<br>`;
69+
}
70+
71+
report.innerHTML += `<br>Gender-Based Conditions:<br>`;
72+
for (const gender in genderConditionsCount) {
73+
report.innerHTML += `${gender}:<br>`;
74+
for (const condition in genderConditionsCount[gender]) {
75+
report.innerHTML += `&nbsp;&nbsp;${condition}: ${genderConditionsCount[gender][condition]}<br>`;
76+
}
77+
}
78+
}
79+
80+
addPatientButton.addEventListener("click", addPatient);
81+
82+
// This JavaScript function is designed to work within a web page to retrieve health condition information based on user input.
83+
function searchCondition() {
84+
const input = document.getElementById("conditionInput").value.toLowerCase();
85+
const resultDiv = document.getElementById("result");
86+
resultDiv.innerHTML = "";
87+
88+
const patient = patients.find((item) => item.name.toLowerCase() === input);
89+
90+
if (patient) {
91+
resultDiv.innerHTML += `<p><strong>Name:</strong> ${patient.name}</p>`;
92+
resultDiv.innerHTML += `<p><strong>Age:</strong> ${patient.age}</p>`;
93+
resultDiv.innerHTML += `<p><strong>Condition:</strong> ${patient.condition}</p>`;
94+
resultDiv.innerHTML += `<p><strong>Gender:</strong> ${patient.gender}</p>`;
95+
} else {
96+
resultDiv.innerHTML = "Condition not found.";
97+
}
98+
}
99+
btnSearch.addEventListener("click", searchCondition);

‎Courses/IBM-JavaScript-Essentials/14-Healthcare-Census/index.html

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Health Analysis Data</title>
6+
<link rel="stylesheet" href="./health_analysis.css" />
7+
</head>
8+
<body>
9+
<h1>Health Analysis Census</h1>
10+
<nav>
11+
<input
12+
type="text"
13+
id="conditionInput"
14+
placeholder="Enter a health condition"
15+
/>
16+
<button id="btnSearch">Search</button>
17+
</nav>
18+
<div class="searchCondition">
19+
<div id="result"></div>
20+
</div>
21+
<div class="container">
22+
<div class="analysisForm">
23+
<h2>Healthcare Data Analysis</h2>
24+
<div>
25+
<label for="name">Name:</label>
26+
<input type="text" id="name" />
27+
</div>
28+
<div>
29+
<label>Gender:</label>
30+
<label for="male">Male</label>
31+
<input type="radio" name="gender" id="male" value="Male" />
32+
<label for="female">Female</label>
33+
<input type="radio" name="gender" id="female" value="Female" />
34+
</div>
35+
<div>
36+
<label for="age">Age:</label>
37+
<input type="number" id="age" />
38+
</div>
39+
<div>
40+
<label for="condition">Condition:</label>
41+
<select id="condition">
42+
<option value="">Select condition</option>
43+
<option value="Diabetes">Diabetes</option>
44+
<option value="Thyroid">Thyroid</option>
45+
<option value="High Blood Pressure">High Blood Pressure</option>
46+
</select>
47+
</div>
48+
<button id="addPatient">Add Patient</button>
49+
<h2>Analysis Report</h2>
50+
<div id="report"></div>
51+
</div>
52+
</div>
53+
<script src="./health_analysis.js"></script>
54+
</body>
55+
</html>

0 commit comments

Comments
 (0)