Scribd
Upload
10 views4 pages

PRACTICE

This document is an HTML file that implements a simple school list application using JavaScript. Users can add, edit, and delete school names, with data stored in local storage for persistence. The application features a form for input, a display area for the list, and a button to clear all entries from local storage.

Uploaded by

TRIBILLIOgmailcom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
10 views4 pages

PRACTICE

This document is an HTML file that implements a simple school list application using JavaScript. Users can add, edit, and delete school names, with data stored in local storage for persistence. The application features a form for input, a display area for the list, and a button to clear all entries from local storage.

Uploaded by

TRIBILLIOgmailcom
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 4

PRACTICE EVERYDAY

JAVASCRIPT 1
<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>School List</title>

</head>

<body>

<form>

<label for="schools">Enter School</label>

<input type="text" placeholder="Name of school" id="schools" required/>

<button class="btn" type="submit">Enter</button>

</form>

<button class="clearboard">Clear board</button>

<div class="display"></div>

<script>

const schools = document.getElementById("schools");

const form = document.querySelector("form");

const display = document.querySelector(".display");

const clearboard = document.querySelector(".clearboard");


let contain = JSON.parse(localStorage.getItem("contain")) || [];

function displayOnBoard() {

display.innerHTML = "";

contain.forEach((item, index) => {

const listed = document.createElement("ul");

listed.innerHTML = `

<li>

<span id="text-${index}">${item}</span>

<input type="text" id="input-${index}" value="${item}" style="display: none;">

<button onclick="enableEdit(${index})">Edit</button>

<button onclick="saveEdit(${index})" style="display: none;">Save</button>

<button onclick="deleteItem(${index})">Delete</button>

</li>

`;

display.appendChild(listed);

});

function enableEdit(index) {

document.getElementById(`text-${index}`).style.display = "none";

document.getElementById(`input-${index}`).style.display = "inline";

event.target.nextElementSibling.style.display = "inline"; // Show Save button

}
function saveEdit(index) {

let newValue = document.getElementById(`input-${index}`).value.trim();

if (newValue !== "") {

contain[index] = newValue;

localStorage.setItem("contain", JSON.stringify(contain));

displayOnBoard();

function deleteItem(index) {

contain.splice(index, 1);

localStorage.setItem("contain", JSON.stringify(contain));

displayOnBoard();

displayOnBoard();

form.addEventListener("submit", function(event) {

event.preventDefault();

let data = schools.value.trim();

if (data !== "") {

contain.push(data);

localStorage.setItem("contain", JSON.stringify(contain));

displayOnBoard();
schools.value = "";

});

clearboard.addEventListener("click", function() {

localStorage.clear();

contain = [];

displayOnBoard();

});

console.log(contain);

</script>

</body>

</html>

You might also like