Bug Tracker App
About this app
A simple and colorful bug tracker app to report, manage, and fix bugs efficiently.
Bug Tracker App Bug Tracker App Report Bug
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Bug Tracker App</title>
<meta name="description" content="A simple and colorful bug tracker app to report, manage, and fix bugs efficiently.">
<meta name="keywords" content="bug tracker, bug report, issue management, tracking, software development">
<!-- Libraries -->
<!-- jQuery (3.6.0) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<!-- Bootstrap CSS (5.3.3) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<!-- Bootstrap JS (5.3.3) -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous">
</script>
<!-- Font Awesome (6.6.0) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
// App Javascript Goes Here. Place your entire script content inside the try block for error handling.
let bugs = [];
// This will run when the DOM is ready.
document.addEventListener("DOMContentLoaded", function () {
const bugForm = document.getElementById('bug-form');
const bugList = document.getElementById('bug-list');
bugForm.addEventListener('submit', function (e) {
e.preventDefault();
const bugDescription = document.getElementById('bug-description').value;
if (bugDescription.trim() === '') {
alert("Please enter a bug description.");
return;
}
addBug(bugDescription);
bugForm.reset();
})
});
function addBug(description) {
const bugId = new Date().getTime().toString(); // Unique ID for each bug
bugs.push({ id: bugId, description: description });
displayBugs();
}
function displayBugs() {
const bugList = document.getElementById('bug-list');
bugList.innerHTML = '';
bugs.forEach(bug => {
const listItem = document.createElement('li');
listItem.textContent = bug.description;
listItem.classList.add('list-group-item', 'recent-bug');
const fixButton = document.createElement('button');
fixButton.innerHTML = '<i class="fas fa-check"></i> Fix';
fixButton.classList.add('btn', 'btn-success', 'float-end', 'btn-fix');
fixButton.onclick = function () {
fixBug(bug.id);
};
listItem.appendChild(fixButton);
bugList.appendChild(listItem);
});
}
function fixBug(id) {
const bugIndex = bugs.findIndex(bug => bug.id === id);
if (bugIndex > -1) {
bugs.splice(bugIndex, 1);
displayBugs();
}
}
} catch (error) {
// This will throw the error to the parent window.
throw error;
}
</script>
<style>
body {
background: linear-gradient(90deg, #6db3f2, #1e69de);
color: white;
font-family: Arial, sans-serif;
}
#main-container {
margin-top: 20px;
}
h1 {
text-align: center;
color: #fff;
margin-bottom: 20px;
}
.list-group-item {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 5px;
margin-bottom: 10px;
}
#bug-description {
margin-bottom: 10px;
}
.btn-fix {
margin-left: 10px;
}
.recent-bug {
transition: background-color 0.3s;
}
.recent-bug:hover {
background-color: rgba(255, 255, 255, 0.2);
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1>Bug Tracker App</h1>
<form id="bug-form">
<div class="input-group mb-3">
<input type="text" class="form-control" id="bug-description" placeholder="Describe your bug" aria-label="Bug Description">
<button class="btn btn-primary" type="submit">Report Bug</button>
</div>
</form>
<ul id="bug-list" class="list-group"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!