Bug Collector App
About this app
A fun and interactive app to collect and visualize different types of bugs in your environment!
Bug Collector App Bug Collector App Add Bug
Put this on your site
Related apps
VoiceSong Studio - Créez votre propre hit !
Baccara Suite Master - Prédiction 1xBet & Casino
Elite Baccarat - Professional Casino Experience
YTPMV Scan - Ultimate Meme Sequencer
YTPMV Scan - Ultimate Audio Visual Sequencer
Pro-Roulette 0-14 Predictor | Advanced Strategic Analytics
Twelve - The Ultimate 12-Step Daily Harmony Planner
Otter Python - Calc Runner Game
Harmony - Гид по здоровым отношениям и романтике
LoopTube 2016 - Infinite Video Looper & Repeater
VoxTransform - 50+ Pro Video Voice Effects
TinyTip | Simple Tip Calculator & Bill Splitter
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 Collector App</title>
<meta name="description" content="A fun and interactive app to collect and visualize different types of bugs in your environment!">
<meta name="keywords" content="bugs, nature, colors, interactive, collection, visualization, fun">
<!-- Libraries -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<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.
let bugs = ["Butterfly", "Ladybug", "Beetle"];
let collection = [];
document.addEventListener("DOMContentLoaded", function() {
displayBugs();
document.getElementById('addBugButton').addEventListener('click', addBug);
});
function displayBugs() {
const bugList = document.getElementById('bugList');
bugList.innerHTML = '';
bugs.forEach((bug, index) => {
bugList.innerHTML += `<li class="list-group-item" onclick="collectBug(${index})">${bug} <i class="fa-solid fa-check-circle"></i></li>`;
});
}
function collectBug(index) {
const bug = bugs[index];
if (!collection.includes(bug)) {
collection.push(bug);
alert(`${bug} collected!`);
} else {
alert(`You already collected a ${bug}.`);
}
}
function addBug() {
const newBug = document.getElementById('bugInput').value;
if (newBug.trim()) {
bugs.push(newBug);
displayBugs();
document.getElementById('bugInput').value = '';
} else {
alert("Please enter a valid bug name.");
}
}
} catch (error) {
throw error;
}
</script>
<style>
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
}
#main-container {
margin-top: 50px;
}
.list-group-item {
cursor: pointer;
transition: background-color 0.3s;
}
.list-group-item:hover {
background-color: #ffe5b4;
}
.bug-input {
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center text-white">Bug Collector App</h1>
<div class="bug-input">
<input type="text" id="bugInput" class="form-control" placeholder="Add a new bug">
<button id="addBugButton" class="btn btn-primary mt-2">Add Bug</button>
</div>
<ul class="list-group" id="bugList"></ul>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!