Colorful Calculator App
About this app
A fun and colorful calculator web app for basic arithmetic operations.
Colorful Download Link App 📒 Colorful Downloadable Notes 💾 Save Note 📥 Download Notes
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>Colorful Download Link App</title>
<meta name="description" content="An engaging web app that allows you to download your notes seamlessly.">
<meta name="keywords" content="notes, download, app, colorful, web app">
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const notesContainer = document.getElementById("notes-container");
const inputNote = document.getElementById("input-note");
const saveButton = document.getElementById("save-note");
const downloadButton = document.getElementById("download-notes");
let notes = [];
function updateNotesDisplay() {
notesContainer.innerHTML = "";
notes.forEach((note, index) => {
const noteElement = document.createElement("div");
noteElement.className = "note";
noteElement.innerHTML = `${note} <button class="delete" data-index="${index}">🗑️</button>`;
notesContainer.appendChild(noteElement);
});
saveToLocal();
}
function saveToLocal() {
localStorage.setItem("notes", JSON.stringify(notes));
}
function loadFromLocal() {
const savedNotes = JSON.parse(localStorage.getItem("notes")) || [];
notes = savedNotes;
updateNotesDisplay();
}
function addNote() {
const noteText = inputNote.value.trim();
if (noteText) {
notes.push(noteText);
inputNote.value = "";
updateNotesDisplay();
}
}
function deleteNote() {
const index = this.getAttribute("data-index");
notes.splice(index, 1);
updateNotesDisplay();
}
function downloadNotes() {
const blob = new Blob([JSON.stringify(notes, null, 2)], { type: 'application/json' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = 'notes.json';
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
loadFromLocal();
saveButton.addEventListener("click", addNote);
downloadButton.addEventListener("click", downloadNotes);
notesContainer.addEventListener("click", function(e) {
if (e.target.classList.contains("delete")) {
deleteNote.call(e.target);
}
});
});
</script>
<style>
body {
background: linear-gradient(90deg, #ff8c00, #ffd700);
font-family: 'Quicksand', sans-serif;
color: white;
}
#main-container {
padding: 20px;
text-align: center;
}
#input-note {
width: 80%;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 10px;
font-size: 16px;
}
#save-note, #download-notes {
background-color: #008CBA;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#save-note:hover, #download-notes:hover {
background-color: #005f6b;
}
#notes-container {
margin-top: 15px;
}
.note {
background: rgba(255, 255, 255, 0.2);
padding: 15px;
border-radius: 5px;
margin: 10px 0;
display: flex;
justify-content: space-between;
align-items: center;
}
.delete {
background: none;
border: none;
color: red;
cursor: pointer;
}
</style>
</head>
<body>
<div id="main-container">
<h1>📒 Colorful Downloadable Notes</h1>
<input type="text" id="input-note" placeholder="Write your note here...">
<button id="save-note">💾 Save Note</button>
<button id="download-notes">📥 Download Notes</button>
<div id="notes-container"></div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!