Issue-tracker Project Complate

amdadislam01 · amdadislam01 · commit ec365a090aa8 · 2025-08-07T16:10:24.000+06:00
diff --git a/app.js b/app.js
@@ -0,0 +1,64 @@
+document.getElementById('issueInputForm').addEventListener('submit', submitIssue);
+
+      function submitIssue(e) {
+        const getInputValue = id => document.getElementById(id).value;
+        const description = getInputValue('issueDescription');
+        const severity = getInputValue('issueSeverity');
+        const assignedTo = getInputValue('issueAssignedTo');
+        const id = Math.floor(Math.random()*100000000) + '';
+        const status = 'Open';
+
+        const issue = { id, description, severity, assignedTo, status };
+        let issues = [];
+        if (localStorage.getItem('issues')){
+          issues = JSON.parse(localStorage.getItem('issues'));
+        }
+        issues.push(issue);
+        localStorage.setItem('issues', JSON.stringify(issues));
+
+        document.getElementById('issueInputForm').reset();
+        fetchIssues();
+        e.preventDefault();
+      }
+
+      const setStatusClosed = id => {
+        const issues = JSON.parse(localStorage.getItem('issues'));
+        const currentIssue = issues.find(issue => issue.id == id);
+        currentIssue.status = 'Closed';
+        localStorage.setItem('issues', JSON.stringify(issues));
+        fetchIssues();
+      }
+
+      const deleteIssue = id => {
+        const issues = JSON.parse(localStorage.getItem('issues'));
+        const remainingIssues = issues.filter(issue => issue.id != id);
+        localStorage.setItem('issues', JSON.stringify(remainingIssues));
+        fetchIssues();
+      }
+
+      const fetchIssues = () => {
+        const issues = JSON.parse(localStorage.getItem('issues')) || [];
+        const issuesList = document.getElementById('issuesList');
+        issuesList.innerHTML = '';
+
+        // Update counters
+        const totalIssues = issues.length;
+        const closedIssues = issues.filter(issue => issue.status === 'Closed').length;
+        
+        document.getElementById('issueCount').textContent = totalIssues;
+        document.getElementById('closedCount').textContent = closedIssues;
+
+        for (var i = 0; i < issues.length; i++) {
+          const {id, description, severity, assignedTo, status} = issues[i];
+
+          issuesList.innerHTML += `<div class="well">
+                                <h6>Issue ID: ${id} </h6>
+                                <p><span class="label label-info"> ${status} </span></p>
+                                <h3> ${description} </h3>
+                                <p><span class="glyphicon glyphicon-time"></span> ${severity}</p>
+                                <p><span class="glyphicon glyphicon-user"></span> ${assignedTo}</p>
+                                <a href="#" onclick="setStatusClosed('${id}')" class="btn btn-warning">Close</a>
+                                <a href="#" onclick="deleteIssue('${id}')" class="btn btn-danger">Delete</a>
+                                </div>`;
+        }
+      }
diff --git a/index.html b/index.html
@@ -11,7 +11,7 @@
         integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
 </head>
 
-<body>
+<body onload="fetchIssues()">
     <div class="container">
         <h1>Issue Tracker
             <span class="badge" style="background-color: rgb(13, 230, 13);" id="issueCount"> 0 </span>
