Embedded Files
<html><head><base href="https://tip-calculator.example.com#about">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Notes App</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}
body {
padding: 20px;
background-color: #4a00e0;
color: #fff;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.container {
width: 100%;
max-width: 600px;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 15px;
padding: 30px;
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
h1 {
text-align: center;
margin-bottom: 30px;
color: #fff;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.input-container {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
.input {
flex-grow: 1;
padding: 12px;
border: none;
border-radius: 8px;
font-size: 16px;
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
transition: all 0.3s ease;
}
.input::placeholder {
color: rgba(255, 255, 255, 0.7);
}
.input:focus {
outline: none;
box-shadow: 0 0 0 2px #fff;
}
.addBtn {
padding: 12px 24px;
background-color: #fbff28;
color: #000;
font-size: 16px;
font-weight: bold;
border: none;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
}
.addBtn:hover {
background-color: #e6e800;
transform: translateY(-2px);
}
.error-message-text {
color: #ff4d4d;
margin-bottom: 15px;
text-align: center;
}
.notes-list-wrapper {
list-style: none;
padding: 0;
}
.notes-list-wrapper li {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 8px;
padding: 15px;
margin-bottom: 15px;
display: flex;
justify-content: space-between;
align-items: center;
transition: all 0.3s ease;
}
.notes-list-wrapper li:hover {
transform: translateY(-3px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}
.notes-list-wrapper li p {
flex-grow: 1;
margin-right: 15px;
word-break: break-word;
}
.btn {
padding: 8px 12px;
font-size: 14px;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
transition: all 0.3s ease;
}
.editBtn {
background-color: #4caf50;
color: white;
margin-right: 10px;
}
.editBtn:hover {
background-color: #45a049;
}
.deleteBtn {
background-color: #f44336;
color: white;
}
.deleteBtn:hover {
background-color: #da190b;
}
@media (max-width: 480px) {
.container {
padding: 20px;
}
.input-container {
flex-direction: column;
}
.addBtn {
width: 100%;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Enhanced Notes App</h1>
<div class="input-container">
<input type="text" name="input" placeholder="Add your note here..." id="input" class="input">
<button type="button" class="addBtn">Add Note</button>
</div>
<p class="error-message-text"></p>
<ul class="notes-list-wrapper"></ul>
</div>
<script>
const inputBox = document.querySelector(".input");
const addButton = document.querySelector(".addBtn");
const notesListWrapper = document.querySelector(".notes-list-wrapper");
const errorMessageText = document.querySelector(".error-message-text");
let currentEditedNote = null;
function createNewNoteItem(getCurrentNote) {
const li = document.createElement("li");
const p = document.createElement("p");
p.textContent = getCurrentNote;
li.appendChild(p);
const editBtn = document.createElement("button");
editBtn.innerText = "Edit";
editBtn.classList.add("btn", "editBtn");
li.appendChild(editBtn);
const deleteBtn = document.createElement("button");
deleteBtn.innerText = "Delete";
deleteBtn.classList.add("btn", "deleteBtn");
li.appendChild(deleteBtn);
return li;
}
function saveNotesToStorage(getCurrentNote) {
let notesList = JSON.parse(localStorage.getItem("notes")) || [];
notesList.push(getCurrentNote);
localStorage.setItem("notes", JSON.stringify(notesList));
}
function addNewNote() {
const extractInputText = inputBox.value.trim();
if (extractInputText.length <= 0) {
errorMessageText.textContent = "Input cannot be empty! You must write some note to proceed.";
return false;
}
if (addButton.innerText === "Edit Note") {
handleEditCurrentNote(currentEditedNote.target.previousElementSibling.innerHTML);
currentEditedNote.target.previousElementSibling.innerHTML = extractInputText;
addButton.innerText = "Add Note";
} else {
const newNoteItem = createNewNoteItem(extractInputText);
notesListWrapper.appendChild(newNoteItem);
saveNotesToStorage(extractInputText);
}
inputBox.value = "";
errorMessageText.textContent = "";
}
function fetchAllNotes() {
const notesList = JSON.parse(localStorage.getItem("notes")) || [];
notesList.forEach((noteItem) => {
const extractLi = createNewNoteItem(noteItem);
notesListWrapper.appendChild(extractLi);
});
}
function handleEditCurrentNote(currentNote) {
let notes = JSON.parse(localStorage.getItem("notes"));
let index = notes.indexOf(currentNote);
notes[index] = inputBox.value;
localStorage.setItem("notes", JSON.stringify(notes));
}
function handleDeleteNotes(currentNote) {
let notesList = JSON.parse(localStorage.getItem("notes")) || [];
let currentNoteText = currentNote.children[0].innerHTML;
let index = notesList.indexOf(currentNoteText);
notesList.splice(index, 1);
localStorage.setItem("notes", JSON.stringify(notesList));
}
function handleEditOrDeleteNote(event) {
if (event.target.classList.contains("deleteBtn")) {
notesListWrapper.removeChild(event.target.parentElement);
handleDeleteNotes(event.target.parentElement);
} else if (event.target.classList.contains("editBtn")) {
inputBox.value = event.target.previousElementSibling.innerHTML;
inputBox.focus();
addButton.innerText = "Edit Note";
currentEditedNote = event;
}
}
document.addEventListener("DOMContentLoaded", fetchAllNotes);
addButton.addEventListener("click", addNewNote);
notesListWrapper.addEventListener("click", handleEditOrDeleteNote);
// Add keypress event listener for enter key
inputBox.addEventListener("keypress", function(event) {
if (event.key === "Enter") {
addNewNote();
}
});
// Add animation to newly added notes
const addNoteWithAnimation = (note) => {
note.style.opacity = "0";
note.style.transform = "translateY(20px)";
notesListWrapper.appendChild(note);
setTimeout(() => {
note.style.transition = "all 0.3s ease";
note.style.opacity = "1";
note.style.transform = "translateY(0)";
}, 10);
};
// Override the original addNewNote function
const originalAddNewNote = addNewNote;
addNewNote = () => {
const extractInputText = inputBox.value.trim();
if (extractInputText.length <= 0) {
errorMessageText.textContent = "Input cannot be empty! You must write some note to proceed.";
return false;
}
if (addButton.innerText === "Edit Note") {
originalAddNewNote();
} else {
const newNoteItem = createNewNoteItem(extractInputText);
addNoteWithAnimation(newNoteItem);
saveNotesToStorage(extractInputText);
inputBox.value = "";
errorMessageText.textContent = "";
}
};
</script>
</body>
</html>
Page updated
Google Sites
Report abuse