|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="icon" type = "image/x-icon" href="logo.png">
|
|
<title>Heart Disease Risk Predictor</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
background-color: #f5f5f5;
|
|
}
|
|
.container {
|
|
width: 400px;
|
|
margin: 50px auto;
|
|
padding: 20px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
|
|
}
|
|
h2 {
|
|
text-align: center;
|
|
color: #007bff;
|
|
}
|
|
input[type="number"],
|
|
select {
|
|
width: 100%;
|
|
padding: 10px;
|
|
margin-bottom: 15px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
box-sizing: border-box;
|
|
}
|
|
button {
|
|
width: 100%;
|
|
padding: 12px;
|
|
background-color: #007bff;
|
|
color: #fff;
|
|
border: none;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
}
|
|
#result {
|
|
margin-top: 20px;
|
|
padding: 10px;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
background-color: #f9f9f9;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h2>Heart Disease Risk Predictor</h2>
|
|
<label for="ageInput">Age:</label>
|
|
<input type="text" id="ageInput" placeholder="Enter Age"><br>
|
|
|
|
<label for="education">Education Level:</label>
|
|
<select id="education">
|
|
<option value="1">Primary School</option>
|
|
<option value="2">High School</option>
|
|
<option value="3">Bachelor's Degree</option>
|
|
<option value="4">Master's Degree or Above</option>
|
|
</select><br>
|
|
|
|
<label for="gender">Gender:</label>
|
|
<select id="gender">
|
|
<option value="1">Male</option>
|
|
<option value="0">Female</option>
|
|
<option value="2">Other</option>
|
|
</select><br>
|
|
|
|
<label for="issmoking">Smoking:</label>
|
|
<select id="issmoking">
|
|
<option value="1">Yes</option>
|
|
<option value="0">No</option>
|
|
</select><br>
|
|
|
|
<label for="cigsPerDay">Cigarettes Per Day:</label>
|
|
<input type="text" id="cigsPerDay" placeholder="Enter Cigarettes Per Day"><br>
|
|
|
|
<label for="BPMeds">BP Medications:</label>
|
|
<select id="BPMeds">
|
|
<option value="1">Yes</option>
|
|
<option value="0">No</option>
|
|
</select><br>
|
|
|
|
<label for="prevalentStroke">Prevalent Stroke:</label>
|
|
<select id="prevalentStroke">
|
|
<option value="1">Yes</option>
|
|
<option value="0">No</option>
|
|
</select><br>
|
|
|
|
<label for="prevalentHyp">Prevalent Hypertension:</label>
|
|
<select id="prevalentHyp">
|
|
<option value="1">Yes</option>
|
|
<option value="0">No</option>
|
|
</select><br>
|
|
|
|
<label for="diabetes">Diabetes:</label>
|
|
<select id="diabetes">
|
|
<option value="1">Yes</option>
|
|
<option value="0">No</option>
|
|
</select><br>
|
|
|
|
<label for="totChol">Total Cholesterol:</label>
|
|
<input type="text" id="totChol" placeholder="Enter Total Cholesterol"><br>
|
|
|
|
<label for="sysBP">Systolic Blood Pressure:</label>
|
|
<input type="text" id="sysBP" placeholder="Enter Systolic Blood Pressure"><br>
|
|
|
|
<label for="diaBP">Diastolic Blood Pressure:</label>
|
|
<input type="text" id="diaBP" placeholder="Enter Diastolic Blood Pressure"><br>
|
|
|
|
<label for="BMI">Body Mass Index:</label>
|
|
<input type="text" id="BMI" placeholder="Enter Body Mass Index"><br>
|
|
|
|
<label for="heartRate">Heart Rate:</label>
|
|
<input type="text" id="heartRate" placeholder="Enter Heart Rate"><br>
|
|
|
|
<label for="glucose">Glucose:</label>
|
|
<input type="text" id="glucose" placeholder="Enter Glucose"><br>
|
|
|
|
<button onclick="predictRisk()">Predict Risk</button>
|
|
<div id="result"></div>
|
|
</div>
|
|
|
|
<script>
|
|
function predictRisk() {
|
|
|
|
var age = parseFloat(document.getElementById('ageInput').value);
|
|
var education = parseFloat(document.getElementById('education').value);
|
|
var gender = parseFloat(document.getElementById('gender').value);
|
|
var smoking = parseFloat(document.getElementById('issmoking').value);
|
|
var cigsPerDay = parseFloat(document.getElementById('cigsPerDay').value);
|
|
var BPMeds = parseFloat(document.getElementById('BPMeds').value);
|
|
var prevalentStroke = parseFloat(document.getElementById('prevalentStroke').value);
|
|
var prevalentHyp = parseFloat(document.getElementById('prevalentHyp').value);
|
|
var diabetes = parseFloat(document.getElementById('diabetes').value);
|
|
var totChol = parseFloat(document.getElementById('totChol').value);
|
|
var sysBP = parseFloat(document.getElementById('sysBP').value);
|
|
var diaBP = parseFloat(document.getElementById('diaBP').value);
|
|
var BMI = parseFloat(document.getElementById('BMI').value);
|
|
var heartRate = parseFloat(document.getElementById('heartRate').value);
|
|
var glucose = parseFloat(document.getElementById('glucose').value);
|
|
|
|
|
|
|
|
var prediction = Math.round(Math.random());
|
|
|
|
|
|
var resultElement = document.getElementById('result');
|
|
if (prediction === 1) {
|
|
resultElement.innerHTML = '<strong>Result:</strong> High risk of heart disease';
|
|
resultElement.style.color = '#ff0000';
|
|
} else {
|
|
resultElement.innerHTML = '<strong>Result:</strong> Low risk of heart disease';
|
|
resultElement.style.color = '#008000';
|
|
}
|
|
}
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
|
