User points

ivor

New member
Hi, enyone help me. My script is saved localStorage, but i want he save like this, everyone see internet.



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Points</title>
<style>
body {
font-family: Arial, sans-serif;
}
.point-list {
list-style-type: none;
padding: 0;
}
.point-item {
margin-bottom: 10px;
}
.error {
color: red;
}
</style>
</head>
<body>

<h1> User points </h1>

<form id="pointForm">
<label for="personName">User name:</label>
<input type="text" id="personName" required>

<label for="points">Points:</label>
<input type="number" id="points" required>

<button type="button" onclick="addPoint()">Lisa punktid</button>
</form>

<ul id="pointList" class="point-list"></ul>

<script>
// Loads points if available
document.addEventListener("DOMContentLoaded", function() {
loadPoints();
});

function addPoint() {
var personNameInput = document.getElementById("personName");
var pointsInput = document.getElementById("points");

var personName = personNameInput.value;
var points = pointsInput.value;

if (personName.trim() === "" || isNaN(points)) {
alert("Palun sisestage kehtiv nimi ja punktid.");
return;
}

var pointList = document.getElementById("pointList");
var listItem = document.createElement("li");
listItem.className = "point-item";
listItem.innerHTML = "<strong>" + personName + ":</strong> <span id='pointsSpan'>" + points + "</span> punkti " +
"<button onclick=\"editPoint(this)\">Muuda</button> " +
"<button onclick=\"deletePoint(this)\">Kustuta</button>";
pointList.appendChild(listItem);

// save points
savePoints();

// We clear the fields after adding
personNameInput.value = "";
pointsInput.value = "";
}

function editPoint(button) {
var listItem = button.parentNode;
var pointsSpan = listItem.querySelector("#pointsSpan");
var currentPoints = pointsSpan.innerText;
var newPoints = prompt("Muuda punktide arvu:", currentPoints);

if (newPoints !== null && !isNaN(newPoints)) {
pointsSpan.innerText = newPoints;

// Save points
savePoints();
}
}

function deletePoint(button) {
var listItem = button.parentNode;
listItem.parentNode.removeChild(listItem);

// Save points
savePoints();
}

function savePoints() {
var pointList = document.getElementById("pointList");
var pointsData = [];

// We collect point data
for (var i = 0; i < pointList.children.length; i++) {
var listItem = pointList.children;
var personName = listItem.innerText.split(":")[0];
var points = listItem.querySelector("#pointsSpan").innerText;

pointsData.push({ personName: personName, points: points });
}

// Save localStorage
localStorage.setItem("pointsData", JSON.stringify(pointsData));
}

function loadPoints() {
var pointList = document.getElementById("pointList");
var pointsData = localStorage.getItem("pointsData");

if (pointsData) {
pointsData = JSON.parse(pointsData);

// Reset points
for (var i = 0; i < pointsData.length; i++) {
var data = pointsData;
var listItem = document.createElement("li");
listItem.className = "point-item";
listItem.innerHTML = "<strong>" + data.personName + ":</strong> <span id='pointsSpan'>" + data.points + "</span> punkti " +
"<button onclick=\"editPoint(this)\">Muuda</button> " +
"<button onclick=\"deletePoint(this)\">Kustuta</button>";
pointList.appendChild(listItem);
}
}
}
</script>

</body>
</html>
 
Back
Top