Upload Predict Disease.html

Predict Disease.html

@@ -22,7 +22,8 @@
         text-align: center;
         color: #007bff;
     }
-    input[type="number"] {
+    input[type="number"],
+    select {
         width: 100%;
         padding: 10px;
         margin-bottom: 15px;
@@ -52,21 +53,75 @@
 
 <div class="container">
     <h2>Heart Disease Risk Predictor</h2>
-    <input type="text" id="age" placeholder="Age"><br>
-    <input type="text" id="education" placeholder="Education Level"><br>
-    <input type="text" id="Gender" placeholder="Gender 1 for M, 0 for F"><br>
-    <input type="text" id="issmoking" placeholder="Smoking 1 for YES, 0 for NO"><br>
-    <input type="text" id="cigsPerDay" placeholder="Cigarettes Per Day"><br>
-    <input type="text" id="BPMeds" placeholder="BP Medications"><br>
-    <input type="text" id="prevalentStroke" placeholder="Prevalent Stroke"><br>
-    <input type="text" id="prevalentHyp" placeholder="Prevalent Hypertension"><br>
-    <input type="text" id="diabetes" placeholder="Diabetes 1 for YES, 0 for NO"><br>
-    <input type="text" id="totChol" placeholder="Total Cholesterol"><br>
-    <input type="text" id="sysBP" placeholder="Systolic Blood Pressure"><br>
-    <input type="text" id="diaBP" placeholder="Diastolic Blood Pressure"><br>
-    <input type="text" id="BMI" placeholder="Body Mass Index"><br>
-    <input type="text" id="heartRate" placeholder="Heart Rate"><br>
-    <input type="text" id="glucose" placeholder="Glucose"><br>
+    <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>
@@ -74,10 +129,10 @@
 <script>
     function predictRisk() {
         // Collect input values
-        var age = parseFloat(document.getElementById('age').value);
+        var age = parseFloat(document.getElementById('ageInput').value);
         var education = parseFloat(document.getElementById('education').value);
-        var Gender = parseFloat(document.getElementById('Gender').value);
-        var issmoking = parseFloat(document.getElementById('issmoking').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);