--- a
+++ b/static/js/dynamicHtml.js
@@ -0,0 +1,114 @@
+/**************************************************************************************
+ * Project     : Chest X-Ray Pathology Detection and Localization using Deep Learning
+ * Author Name : Rammuni Ravidu Suien Silva
+ * UoW No      : 16267097
+ * IIT No      : 2016134
+ * Module      : Final Year Project 20/21
+ * Supervisor  : Mr Pumudu Fernando
+
+ * Prototype    : Web Interface - FrontEnd
+ * File         : JS for creation of dynamic HTML UI elements
+ * University of Westminster, UK || IIT Sri Lanka
+ **************************************************************************************/
+
+// consts for DOM objects
+const detResults = $('#result');
+let localized = false;
+let symptoms_json;
+
+
+// Displaying the dynamic detection table
+function cxrResultsDisplayTable(dataJSON) {
+    let tableHTML = '<div class="limiter">';
+    tableHTML += '<div class="container-table100">';
+    tableHTML += '<div class="wrap-table100" style="margin: 20px auto auto;">';
+    tableHTML += '<div class="table">';
+    tableHTML += '<div class="row header">' +
+        '<div class="cell text-dark">Pathology</div>' +
+        '<div class="cell text-dark">Detection Rate</div>' +
+        '</div>';
+
+    let pathology_id = 0
+
+    // Dynamic table creation
+    Object.keys(dataJSON).forEach(function (key) {
+        let pathology = key;
+
+        $(cxrLocalizationPopup(pathology_id, pathology)).appendTo('#main-app-body');
+        $(cxrLocalizationPrint(pathology_id, pathology)).appendTo('.loc-result-print');
+
+
+        let detectionRate = dataJSON[pathology];
+
+        let cxr_popup_id = "#cxrPopup-" + pathology_id;
+
+        // Highlighting high probable diseases
+        if (parseFloat(detectionRate.split("%")[0]) >= 50) {
+            tableHTML += '<div class="row bg-warning det-row" data-toggle="modal" data-target="' + cxr_popup_id + '">';
+        } else {
+            tableHTML += '<div class="row det-row" data-toggle="modal" data-target="' + cxr_popup_id + '">';
+        }
+
+        tableHTML += '<div class="cell" data-title="Pathology">';
+        tableHTML += pathology;
+        tableHTML += '</div>';
+        tableHTML += '<div class="cell text-dark" data-title="Detection Rate   (Max - Min)">';
+        tableHTML += detectionRate;
+        tableHTML += '</div>';
+        tableHTML += '</div>';
+
+        pathology_id += 1;
+    });
+
+    tableHTML += '</div>';
+    tableHTML += '</div>';
+    tableHTML += '</div>';
+    tableHTML += '</div>';
+    return tableHTML;
+}
+
+// Dynamic popup card builder for localized image display
+function cxrLocalizationPopup(pathology_id, pathology) {
+    let popupCXRHTML =
+        '<div class="modal fade" id="cxrPopup-' + pathology_id + '" role="dialog">\n' +
+        '        <div class="modal-dialog">\n' +
+        cxrLocalizationPrint(pathology_id, pathology) +
+        '        </div>\n' +
+        '    </div>';
+    return popupCXRHTML
+}
+
+// Print section UI creation
+function cxrLocalizationPrint(pathology_id, pathology) {
+    let locCXRPrint =
+        '<div class="card print-cxr-card">\n' +
+        '   <div class="card-img"><img id="cxrPopupImg-' + pathology_id +
+        '" class="img-fluid cxr-loc-img cxrPopupImg-' + pathology_id + '" ' +
+        '        alt="Run/Click Localization to view the Localized CXR" ' +
+        '        style="display: block; margin-left: auto; margin-right: auto;"></div>\n' +
+        '   <div class="card-text">\n' +
+        '        <p>Localization Result for:</p>\n' +
+        '        <p><b>' + pathology + '</b></p>\n' +
+        '   </div>\n' + symptomsAdd(pathology, symptoms_json) +
+        '</div>\n';
+    return locCXRPrint
+}
+
+// Displaying possible symptoms from the Symptoms.JSON from the server
+function symptomsAdd(pathology, symptoms_json) {
+    let symptoms = symptoms_json[pathology]['Symptoms']
+    let listHTML = '  ' +
+        '<span class="list-group-item list-group-item-action flex-column align-items-start">\n' +
+        '    <div class="d-flex w-100 justify-content-between">\n' +
+        '      <h5 class="mb-1">Possible Symptoms</h5>\n' +
+        '      <small class="text-muted">Confirm the findings</small>\n' +
+        '    </div>';
+
+    for (let i = 0; i < symptoms.length; i++) {
+        listHTML += '<p class="mb-1">' + symptoms[i] + '</p>\n';
+    }
+
+    listHTML += '<small class="text-muted">These are indicative symptoms only!</small>\n' +
+        '</span>'
+    return listHTML;
+}
\ No newline at end of file