Update templates/index.html
Browse files- templates/index.html +285 -174
templates/index.html
CHANGED
@@ -161,6 +161,64 @@
|
|
161 |
align-items: stretch;
|
162 |
}
|
163 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
164 |
</style>
|
165 |
</head>
|
166 |
<body>
|
@@ -192,198 +250,251 @@
|
|
192 |
</div>
|
193 |
</div>
|
194 |
|
195 |
-
<!--
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
196 |
<script>
|
197 |
-
|
198 |
-
|
199 |
-
|
200 |
-
|
201 |
-
|
202 |
-
|
203 |
-
|
204 |
-
|
205 |
-
|
206 |
-
|
207 |
-
|
208 |
-
|
209 |
-
|
210 |
-
|
211 |
-
|
212 |
-
|
213 |
-
|
214 |
-
|
215 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
216 |
}
|
217 |
|
218 |
-
|
219 |
-
async function performSearch(inputSymptom) {
|
220 |
-
// Clear any previous errors
|
221 |
-
errorElement.style.display = 'none';
|
222 |
-
|
223 |
-
try {
|
224 |
-
// Create base URL with inputSymptom if provided, otherwise use first selected symptom
|
225 |
-
let symptomParam = inputSymptom;
|
226 |
-
if (!symptomParam && selectedSymptoms.length > 0) {
|
227 |
-
symptomParam = selectedSymptoms[0];
|
228 |
-
}
|
229 |
-
|
230 |
-
if (!symptomParam) return; // Exit if no symptom to search
|
231 |
-
|
232 |
-
let url = `${window.location.origin}/search?symptom=${encodeURIComponent(symptomParam)}`;
|
233 |
-
|
234 |
-
// Add remaining selected symptoms to query
|
235 |
-
if (selectedSymptoms.length > 0) {
|
236 |
-
selectedSymptoms.forEach((s, index) => {
|
237 |
-
// Skip the first one if it's the same as symptomParam
|
238 |
-
if (index === 0 && s === symptomParam) return;
|
239 |
-
url += `&selected=${encodeURIComponent(s)}`;
|
240 |
-
});
|
241 |
-
}
|
242 |
-
|
243 |
-
const response = await fetch(url);
|
244 |
-
|
245 |
-
if (!response.ok) {
|
246 |
-
throw new Error(`HTTP error! status: ${response.status}`);
|
247 |
-
}
|
248 |
-
|
249 |
-
const data = await response.json();
|
250 |
-
|
251 |
-
displayResults(data);
|
252 |
-
|
253 |
-
// Clear search input only if this was initiated from the search box
|
254 |
-
if (inputSymptom) {
|
255 |
-
searchInput.value = '';
|
256 |
-
}
|
257 |
-
} catch (error) {
|
258 |
-
showError(`Error searching for symptom: ${error.message}. Please try again.`);
|
259 |
-
console.error('Error fetching data:', error);
|
260 |
-
}
|
261 |
-
}
|
262 |
|
263 |
-
|
264 |
-
async function searchSymptoms() {
|
265 |
-
const symptom = searchInput.value.trim();
|
266 |
-
if (!symptom) return;
|
267 |
-
performSearch(symptom);
|
268 |
-
}
|
269 |
|
270 |
-
//
|
271 |
-
|
272 |
-
|
273 |
-
|
274 |
-
if (
|
275 |
-
|
276 |
-
|
277 |
-
data.matching_diseases.forEach(disease => {
|
278 |
-
diseasesList.innerHTML += `<li>${escapeHTML(disease)}</li>`;
|
279 |
-
});
|
280 |
-
}
|
281 |
-
|
282 |
-
// Update similar symptoms
|
283 |
-
similarList.innerHTML = '';
|
284 |
-
if (data.semantic_matches && data.semantic_matches.length > 0) {
|
285 |
-
data.semantic_matches.forEach(symptom => {
|
286 |
-
if (!selectedSymptoms.includes(symptom)) {
|
287 |
-
similarList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
|
288 |
-
}
|
289 |
-
});
|
290 |
-
} else {
|
291 |
-
similarList.innerHTML = '<li>No similar symptoms found</li>';
|
292 |
-
}
|
293 |
-
|
294 |
-
// Update related symptoms - sort them alphabetically
|
295 |
-
relatedList.innerHTML = '';
|
296 |
-
if (!data.related_symptoms || data.related_symptoms.length === 0) {
|
297 |
-
relatedList.innerHTML = '<li>No related symptoms found</li>';
|
298 |
-
} else {
|
299 |
-
// Sort the related symptoms alphabetically
|
300 |
-
const sortedSymptoms = [...data.related_symptoms].sort((a, b) => a.localeCompare(b));
|
301 |
-
|
302 |
-
sortedSymptoms.forEach(symptom => {
|
303 |
-
if (!selectedSymptoms.includes(symptom)) {
|
304 |
-
relatedList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
|
305 |
-
}
|
306 |
-
});
|
307 |
-
}
|
308 |
-
|
309 |
-
// Update selected symptoms
|
310 |
-
updateSelectedSymptoms();
|
311 |
}
|
312 |
|
313 |
-
|
314 |
-
function escapeHTML(str) {
|
315 |
-
return str
|
316 |
-
.replace(/&/g, '&')
|
317 |
-
.replace(/</g, '<')
|
318 |
-
.replace(/>/g, '>')
|
319 |
-
.replace(/"/g, '"')
|
320 |
-
.replace(/'/g, ''');
|
321 |
-
}
|
322 |
|
323 |
-
|
324 |
-
|
325 |
-
return str
|
326 |
-
.replace(/\\/g, '\\\\')
|
327 |
-
.replace(/'/g, "\\'")
|
328 |
-
.replace(/"/g, '\\"')
|
329 |
-
.replace(/\n/g, '\\n')
|
330 |
-
.replace(/\r/g, '\\r')
|
331 |
-
.replace(/\t/g, '\\t');
|
332 |
}
|
333 |
|
334 |
-
|
335 |
-
function addSymptom(symptom) {
|
336 |
-
if (!selectedSymptoms.includes(symptom)) {
|
337 |
-
selectedSymptoms.push(symptom);
|
338 |
-
updateSelectedSymptoms();
|
339 |
-
|
340 |
-
// Instead of calling searchSymptoms which expects input from search box,
|
341 |
-
// directly make a request with the current selected symptoms
|
342 |
-
performSearch(null);
|
343 |
-
}
|
344 |
-
}
|
345 |
|
346 |
-
|
347 |
-
function removeSymptom(symptom) {
|
348 |
-
selectedSymptoms = selectedSymptoms.filter(s => s !== symptom);
|
349 |
-
updateSelectedSymptoms();
|
350 |
-
if (selectedSymptoms.length > 0) {
|
351 |
-
performSearch(null);
|
352 |
-
} else {
|
353 |
-
// Clear results if no symptoms are selected
|
354 |
-
diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
|
355 |
-
similarList.innerHTML = '';
|
356 |
-
relatedList.innerHTML = '';
|
357 |
-
}
|
358 |
-
}
|
359 |
|
360 |
-
//
|
361 |
-
|
362 |
-
|
363 |
-
selectedSymptoms.forEach(symptom => {
|
364 |
-
const tag = document.createElement('div');
|
365 |
-
tag.className = 'symptom-tag';
|
366 |
-
tag.innerHTML = `
|
367 |
-
${escapeHTML(symptom)}
|
368 |
-
<span class="remove-symptom" onclick="removeSymptom('${escapeJS(symptom)}')">×</span>
|
369 |
-
`;
|
370 |
-
selectedSymptomsDiv.appendChild(tag);
|
371 |
-
});
|
372 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
373 |
|
374 |
-
|
375 |
-
|
376 |
-
|
377 |
-
|
378 |
-
searchSymptoms();
|
379 |
-
}
|
380 |
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
381 |
|
382 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
383 |
diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
384 |
|
385 |
-
//
|
386 |
-
|
387 |
</script>
|
388 |
</body>
|
389 |
</html>
|
|
|
161 |
align-items: stretch;
|
162 |
}
|
163 |
}
|
164 |
+
|
165 |
+
/* Modal styles */
|
166 |
+
.modal {
|
167 |
+
display: none;
|
168 |
+
position: fixed;
|
169 |
+
z-index: 1;
|
170 |
+
left: 0;
|
171 |
+
top: 0;
|
172 |
+
width: 100%;
|
173 |
+
height: 100%;
|
174 |
+
overflow: auto;
|
175 |
+
background-color: rgba(0,0,0,0.4);
|
176 |
+
}
|
177 |
+
|
178 |
+
.modal-content {
|
179 |
+
background-color: #fefefe;
|
180 |
+
margin: 15% auto;
|
181 |
+
padding: 20px;
|
182 |
+
border: 1px solid #888;
|
183 |
+
width: 70%;
|
184 |
+
border-radius: 8px;
|
185 |
+
max-height: 70vh;
|
186 |
+
overflow-y: auto;
|
187 |
+
}
|
188 |
+
|
189 |
+
.close {
|
190 |
+
color: #aaa;
|
191 |
+
float: right;
|
192 |
+
font-size: 28px;
|
193 |
+
font-weight: bold;
|
194 |
+
cursor: pointer;
|
195 |
+
}
|
196 |
+
|
197 |
+
.close:hover,
|
198 |
+
.close:focus {
|
199 |
+
color: black;
|
200 |
+
text-decoration: none;
|
201 |
+
}
|
202 |
+
|
203 |
+
.disease-info-title {
|
204 |
+
margin-top: 0;
|
205 |
+
color: #4285f4;
|
206 |
+
}
|
207 |
+
|
208 |
+
.loading {
|
209 |
+
text-align: center;
|
210 |
+
padding: 20px;
|
211 |
+
}
|
212 |
+
|
213 |
+
.disease-clickable {
|
214 |
+
cursor: pointer;
|
215 |
+
color: #333;
|
216 |
+
font-weight: bold;
|
217 |
+
}
|
218 |
+
|
219 |
+
.disease-clickable:hover {
|
220 |
+
color: #4285f4;
|
221 |
+
}
|
222 |
</style>
|
223 |
</head>
|
224 |
<body>
|
|
|
250 |
</div>
|
251 |
</div>
|
252 |
|
253 |
+
<!-- Disease Info Modal -->
|
254 |
+
<div id="diseaseModal" class="modal">
|
255 |
+
<div class="modal-content">
|
256 |
+
<span class="close">×</span>
|
257 |
+
<h3 id="disease-info-title" class="disease-info-title">Disease Information</h3>
|
258 |
+
<div id="disease-info-content">
|
259 |
+
<div id="loading" class="loading">Loading information...</div>
|
260 |
+
<div id="disease-details"></div>
|
261 |
+
</div>
|
262 |
+
</div>
|
263 |
+
</div>
|
264 |
+
|
265 |
<script>
|
266 |
+
// Store selected symptoms
|
267 |
+
let selectedSymptoms = [];
|
268 |
+
|
269 |
+
// DOM elements
|
270 |
+
const searchInput = document.getElementById('symptom-search');
|
271 |
+
const searchButton = document.getElementById('search-button');
|
272 |
+
const selectedSymptomsDiv = document.getElementById('selected-symptoms');
|
273 |
+
const diseasesList = document.getElementById('diseases-list');
|
274 |
+
const similarList = document.getElementById('similar-list');
|
275 |
+
const relatedList = document.getElementById('related-list');
|
276 |
+
const errorElement = document.getElementById('error-notification');
|
277 |
+
const modal = document.getElementById('diseaseModal');
|
278 |
+
const closeModal = document.getElementsByClassName('close')[0];
|
279 |
+
const diseaseTitle = document.getElementById('disease-info-title');
|
280 |
+
const diseaseDetails = document.getElementById('disease-details');
|
281 |
+
const loadingElement = document.getElementById('loading');
|
282 |
+
|
283 |
+
// Function to show error message
|
284 |
+
function showError(message) {
|
285 |
+
errorElement.textContent = message;
|
286 |
+
errorElement.style.display = 'block';
|
287 |
+
setTimeout(() => {
|
288 |
+
errorElement.style.display = 'none';
|
289 |
+
}, 5000);
|
290 |
+
}
|
291 |
+
|
292 |
+
// New function to handle both initial search and updates after selections
|
293 |
+
async function performSearch(inputSymptom) {
|
294 |
+
// Clear any previous errors
|
295 |
+
errorElement.style.display = 'none';
|
296 |
+
|
297 |
+
try {
|
298 |
+
// Create base URL with inputSymptom if provided, otherwise use first selected symptom
|
299 |
+
let symptomParam = inputSymptom;
|
300 |
+
if (!symptomParam && selectedSymptoms.length > 0) {
|
301 |
+
symptomParam = selectedSymptoms[0];
|
302 |
}
|
303 |
|
304 |
+
if (!symptomParam) return; // Exit if no symptom to search
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
305 |
|
306 |
+
let url = `${window.location.origin}/search?symptom=${encodeURIComponent(symptomParam)}`;
|
|
|
|
|
|
|
|
|
|
|
307 |
|
308 |
+
// Add remaining selected symptoms to query
|
309 |
+
if (selectedSymptoms.length > 0) {
|
310 |
+
selectedSymptoms.forEach((s, index) => {
|
311 |
+
// Skip the first one if it's the same as symptomParam
|
312 |
+
if (index === 0 && s === symptomParam) return;
|
313 |
+
url += `&selected=${encodeURIComponent(s)}`;
|
314 |
+
});
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
315 |
}
|
316 |
|
317 |
+
const response = await fetch(url);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
318 |
|
319 |
+
if (!response.ok) {
|
320 |
+
throw new Error(`HTTP error! status: ${response.status}`);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
321 |
}
|
322 |
|
323 |
+
const data = await response.json();
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
324 |
|
325 |
+
displayResults(data);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
326 |
|
327 |
+
// Clear search input only if this was initiated from the search box
|
328 |
+
if (inputSymptom) {
|
329 |
+
searchInput.value = '';
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
330 |
}
|
331 |
+
} catch (error) {
|
332 |
+
showError(`Error searching for symptom: ${error.message}. Please try again.`);
|
333 |
+
console.error('Error fetching data:', error);
|
334 |
+
}
|
335 |
+
}
|
336 |
+
|
337 |
+
// Update search function to use the new performSearch function
|
338 |
+
async function searchSymptoms() {
|
339 |
+
const symptom = searchInput.value.trim();
|
340 |
+
if (!symptom) return;
|
341 |
+
performSearch(symptom);
|
342 |
+
}
|
343 |
+
|
344 |
+
// Display results
|
345 |
+
function displayResults(data) {
|
346 |
+
// Update diseases list
|
347 |
+
diseasesList.innerHTML = '';
|
348 |
+
if (!data.matching_diseases || data.matching_diseases.length === 0) {
|
349 |
+
diseasesList.innerHTML = '<li>No matching diseases found</li>';
|
350 |
+
} else {
|
351 |
+
data.matching_diseases.forEach(disease => {
|
352 |
+
diseasesList.innerHTML += `<li class="disease-clickable" onclick="showDiseaseInfo('${escapeJS(disease)}')">${escapeHTML(disease)}</li>`;
|
353 |
+
});
|
354 |
+
}
|
355 |
+
|
356 |
+
// Update similar symptoms
|
357 |
+
similarList.innerHTML = '';
|
358 |
+
if (data.semantic_matches && data.semantic_matches.length > 0) {
|
359 |
+
data.semantic_matches.forEach(symptom => {
|
360 |
+
if (!selectedSymptoms.includes(symptom)) {
|
361 |
+
similarList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
|
362 |
+
}
|
363 |
+
});
|
364 |
+
} else {
|
365 |
+
similarList.innerHTML = '<li>No similar symptoms found</li>';
|
366 |
+
}
|
367 |
+
|
368 |
+
// Update related symptoms - sort them alphabetically
|
369 |
+
relatedList.innerHTML = '';
|
370 |
+
if (!data.related_symptoms || data.related_symptoms.length === 0) {
|
371 |
+
relatedList.innerHTML = '<li>No related symptoms found</li>';
|
372 |
+
} else {
|
373 |
+
// Sort the related symptoms alphabetically
|
374 |
+
const sortedSymptoms = [...data.related_symptoms].sort((a, b) => a.localeCompare(b));
|
375 |
|
376 |
+
sortedSymptoms.forEach(symptom => {
|
377 |
+
if (!selectedSymptoms.includes(symptom)) {
|
378 |
+
relatedList.innerHTML += `<li class="clickable" onclick="addSymptom('${escapeJS(symptom)}')">${escapeHTML(symptom)}</li>`;
|
379 |
+
}
|
|
|
|
|
380 |
});
|
381 |
+
}
|
382 |
+
|
383 |
+
// Update selected symptoms
|
384 |
+
updateSelectedSymptoms();
|
385 |
+
}
|
386 |
+
|
387 |
+
// Helper function to escape HTML
|
388 |
+
function escapeHTML(str) {
|
389 |
+
return str
|
390 |
+
.replace(/&/g, '&')
|
391 |
+
.replace(/</g, '<')
|
392 |
+
.replace(/>/g, '>')
|
393 |
+
.replace(/"/g, '"')
|
394 |
+
.replace(/'/g, ''');
|
395 |
+
}
|
396 |
+
|
397 |
+
// Helper function to escape strings for JavaScript
|
398 |
+
function escapeJS(str) {
|
399 |
+
return str
|
400 |
+
.replace(/\\/g, '\\\\')
|
401 |
+
.replace(/'/g, "\\'")
|
402 |
+
.replace(/"/g, '\\"')
|
403 |
+
.replace(/\n/g, '\\n')
|
404 |
+
.replace(/\r/g, '\\r')
|
405 |
+
.replace(/\t/g, '\\t');
|
406 |
+
}
|
407 |
+
|
408 |
+
// Add a symptom to the selected list
|
409 |
+
function addSymptom(symptom) {
|
410 |
+
if (!selectedSymptoms.includes(symptom)) {
|
411 |
+
selectedSymptoms.push(symptom);
|
412 |
+
updateSelectedSymptoms();
|
413 |
|
414 |
+
// Instead of calling searchSymptoms which expects input from search box,
|
415 |
+
// directly make a request with the current selected symptoms
|
416 |
+
performSearch(null);
|
417 |
+
}
|
418 |
+
}
|
419 |
+
|
420 |
+
// Remove a symptom from the selected list
|
421 |
+
function removeSymptom(symptom) {
|
422 |
+
selectedSymptoms = selectedSymptoms.filter(s => s !== symptom);
|
423 |
+
updateSelectedSymptoms();
|
424 |
+
if (selectedSymptoms.length > 0) {
|
425 |
+
performSearch(null);
|
426 |
+
} else {
|
427 |
+
// Clear results if no symptoms are selected
|
428 |
diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
|
429 |
+
similarList.innerHTML = '';
|
430 |
+
relatedList.innerHTML = '';
|
431 |
+
}
|
432 |
+
}
|
433 |
+
|
434 |
+
// Update the selected symptoms display
|
435 |
+
function updateSelectedSymptoms() {
|
436 |
+
selectedSymptomsDiv.innerHTML = '';
|
437 |
+
selectedSymptoms.forEach(symptom => {
|
438 |
+
const tag = document.createElement('div');
|
439 |
+
tag.className = 'symptom-tag';
|
440 |
+
tag.innerHTML = `
|
441 |
+
${escapeHTML(symptom)}
|
442 |
+
<span class="remove-symptom" onclick="removeSymptom('${escapeJS(symptom)}')">×</span>
|
443 |
+
`;
|
444 |
+
selectedSymptomsDiv.appendChild(tag);
|
445 |
+
});
|
446 |
+
}
|
447 |
+
|
448 |
+
// Function to show disease information using Groq API
|
449 |
+
async function showDiseaseInfo(disease) {
|
450 |
+
// Show modal
|
451 |
+
modal.style.display = "block";
|
452 |
+
diseaseTitle.textContent = disease;
|
453 |
+
diseaseDetails.innerHTML = '';
|
454 |
+
loadingElement.style.display = 'block';
|
455 |
+
|
456 |
+
try {
|
457 |
+
// Call to backend API to get disease information
|
458 |
+
const response = await fetch(`${window.location.origin}/disease-info?name=${encodeURIComponent(disease)}`);
|
459 |
+
|
460 |
+
if (!response.ok) {
|
461 |
+
throw new Error(`HTTP error! status: ${response.status}`);
|
462 |
+
}
|
463 |
+
|
464 |
+
const data = await response.json();
|
465 |
+
loadingElement.style.display = 'none';
|
466 |
+
|
467 |
+
// Format and display the information
|
468 |
+
diseaseDetails.innerHTML = data.info;
|
469 |
+
} catch (error) {
|
470 |
+
loadingElement.style.display = 'none';
|
471 |
+
diseaseDetails.innerHTML = `<p class="error">Error getting information: ${error.message}</p>`;
|
472 |
+
console.error('Error fetching disease info:', error);
|
473 |
+
}
|
474 |
+
}
|
475 |
+
|
476 |
+
// Close the modal when clicking the X
|
477 |
+
closeModal.onclick = function() {
|
478 |
+
modal.style.display = "none";
|
479 |
+
}
|
480 |
+
|
481 |
+
// Close the modal when clicking outside of it
|
482 |
+
window.onclick = function(event) {
|
483 |
+
if (event.target == modal) {
|
484 |
+
modal.style.display = "none";
|
485 |
+
}
|
486 |
+
}
|
487 |
+
|
488 |
+
// Event listeners
|
489 |
+
searchButton.addEventListener('click', searchSymptoms);
|
490 |
+
searchInput.addEventListener('keypress', function(e) {
|
491 |
+
if (e.key === 'Enter') {
|
492 |
+
searchSymptoms();
|
493 |
+
}
|
494 |
+
});
|
495 |
|
496 |
+
// Initialize
|
497 |
+
diseasesList.innerHTML = '<li>Enter a symptom to get started</li>';
|
498 |
</script>
|
499 |
</body>
|
500 |
</html>
|