Hi und zwar lerne ich gerade JavaScript.. naja das Ziel ist Typescript und Angular aber die Grundkentnisse müssen ja auch irgendwie her kommen... hab also 2 Tage mit JQuery an einer TODO-Liste gesessen und ich muss schon sagen: die Sprache ist im Gegensatz zu java sehr unstrukturiert und ich freue mich wirklich auf typescript... naja egal ich habe jetzt meine TODO-Liste fertig und ich wollte fragen, wie ich die Elemente den auf mein NAS bekomme, damit eine Speicherung möglich ist..
[CODE lang="javascript" title="JS"]"use strict"
const KEY_ENTER=13;
document.addEventListener("DOMContentLoaded",()=>{
const inputText= document.querySelector("input");
const ulItems= document.querySelector(".todo-list");
const liItems= document.querySelectorAll(".todo-list li");
const footerClearCompleted= document.querySelector(".clear-completed");
queryList();
footerClearCompleted.addEventListener("click",()=>{
const listItems= document.querySelectorAll("ul li")
for(const item of listItems){
const checkbox= item.querySelector("div input");
if(checkbox.checked){
item.remove();
queryList();
}
}
});
inputText.addEventListener("keydown",(event)=>{
if(event.keyCode==KEY_ENTER){
const $getText=inputText.value;
// new listelement
if($getText===""){return}
const button= document.createElement("button");
button.classList.add("destroy");
const label= document.createElement("label");
label.appendChild(document.createTextNode($getText));
const input= document.createElement("input");
input.classList.add("toggle");
input.type="checkbox";
const div = document.createElement("div");
div.classList.add("view");
div.appendChild(input);
div.appendChild(label);
div.appendChild(button)
const liElement= document.createElement("li");
liElement.appendChild(div)
removeListItem(liElement)
countingElement(liElement)
queryCheckbox(liElement)
ulItems.appendChild(liElement);
queryList();
inputText.value="";
}
})
for(const item of liItems){
removeListItem(item)
queryCheckbox(item)
countingElement(item)
}
});
const removeListItem= (liElement)=>{
const $elementInput= liElement.querySelector("div input");
const button= $elementInput.nextElementSibling.nextElementSibling;
button.addEventListener("click",()=>{
liElement.remove()
let value=parseInt(document.querySelector(".todo-count strong").innerText,10)
document.querySelector(".todo-count strong").innerText= --value
queryList();
})
}
const countingElement=(item)=>{
let countItem = document.querySelector(".todo-count strong").innerText;
countItem=parseInt(countItem,10);
const items= document.querySelectorAll(".todo-list li");
if(item.classList.contains("completed")) {
document.querySelector(".todo-count strong").innerText= --countItem
return
}
document.querySelector(".todo-count strong").innerText= ++countItem
}
const queryList= ()=>{
const ulItem= document.querySelector(".todo-list");
const footer= document.querySelector(".footer");
if(ulItem.children.length===0){
footer.style.display="none";
}
else if(ulItem.children.length===1){
let countItem = document.querySelector(".todo-count strong").innerText=1;
footer.style.display="block";
}
else {
footer.style.display="block";
}
}
const queryCheckbox= (liElement)=>{
const checkbox= liElement.querySelector("div input");
checkbox.addEventListener("change",()=>{
if(checkbox.checked)
{
liElement.classList.add("completed");
countingElement(liElement)
}
else{
liElement.classList.remove("completed");
countingElement(liElement)
}
})
}
const checkedItemToRemove=(liItem)=>{
const footerClearCompleted= document.querySelector(".clear-completed");
}
[/CODE]
[CODE lang="html" title="HTML"]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script src="node_modules/todomvc-common/base.js"></script>
<script src="js/app.js"></script>
</body>
</html>
[/CODE]
[CODE lang="javascript" title="JS"]"use strict"
const KEY_ENTER=13;
document.addEventListener("DOMContentLoaded",()=>{
const inputText= document.querySelector("input");
const ulItems= document.querySelector(".todo-list");
const liItems= document.querySelectorAll(".todo-list li");
const footerClearCompleted= document.querySelector(".clear-completed");
queryList();
footerClearCompleted.addEventListener("click",()=>{
const listItems= document.querySelectorAll("ul li")
for(const item of listItems){
const checkbox= item.querySelector("div input");
if(checkbox.checked){
item.remove();
queryList();
}
}
});
inputText.addEventListener("keydown",(event)=>{
if(event.keyCode==KEY_ENTER){
const $getText=inputText.value;
// new listelement
if($getText===""){return}
const button= document.createElement("button");
button.classList.add("destroy");
const label= document.createElement("label");
label.appendChild(document.createTextNode($getText));
const input= document.createElement("input");
input.classList.add("toggle");
input.type="checkbox";
const div = document.createElement("div");
div.classList.add("view");
div.appendChild(input);
div.appendChild(label);
div.appendChild(button)
const liElement= document.createElement("li");
liElement.appendChild(div)
removeListItem(liElement)
countingElement(liElement)
queryCheckbox(liElement)
ulItems.appendChild(liElement);
queryList();
inputText.value="";
}
})
for(const item of liItems){
removeListItem(item)
queryCheckbox(item)
countingElement(item)
}
});
const removeListItem= (liElement)=>{
const $elementInput= liElement.querySelector("div input");
const button= $elementInput.nextElementSibling.nextElementSibling;
button.addEventListener("click",()=>{
liElement.remove()
let value=parseInt(document.querySelector(".todo-count strong").innerText,10)
document.querySelector(".todo-count strong").innerText= --value
queryList();
})
}
const countingElement=(item)=>{
let countItem = document.querySelector(".todo-count strong").innerText;
countItem=parseInt(countItem,10);
const items= document.querySelectorAll(".todo-list li");
if(item.classList.contains("completed")) {
document.querySelector(".todo-count strong").innerText= --countItem
return
}
document.querySelector(".todo-count strong").innerText= ++countItem
}
const queryList= ()=>{
const ulItem= document.querySelector(".todo-list");
const footer= document.querySelector(".footer");
if(ulItem.children.length===0){
footer.style.display="none";
}
else if(ulItem.children.length===1){
let countItem = document.querySelector(".todo-count strong").innerText=1;
footer.style.display="block";
}
else {
footer.style.display="block";
}
}
const queryCheckbox= (liElement)=>{
const checkbox= liElement.querySelector("div input");
checkbox.addEventListener("change",()=>{
if(checkbox.checked)
{
liElement.classList.add("completed");
countingElement(liElement)
}
else{
liElement.classList.remove("completed");
countingElement(liElement)
}
})
}
const checkedItemToRemove=(liItem)=>{
const footerClearCompleted= document.querySelector(".clear-completed");
}
[/CODE]
[CODE lang="html" title="HTML"]<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Template • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<!-- CSS overrides - remove if you don't need it -->
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus>
</header>
<!-- This section should be hidden by default and shown when there are todos -->
<section class="main">
<input id="toggle-all" class="toggle-all" type="checkbox">
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
</ul>
</section>
<!-- This footer should hidden by default and shown when there are todos -->
<footer class="footer">
<!-- This should be `0 items left` by default -->
<span class="todo-count"><strong>0</strong> item left</span>
<!-- Remove this if you don't implement routing -->
<ul class="filters">
<li>
<a class="selected" href="#/">All</a>
</li>
<li>
<a href="#/active">Active</a>
</li>
<li>
<a href="#/completed">Completed</a>
</li>
</ul>
<!-- Hidden if no completed items are left ↓ -->
<button class="clear-completed">Clear completed</button>
</footer>
</section>
<footer class="info">
<!-- Remove the below line ↓ -->
<p>Template by <a href="http://sindresorhus.com">Sindre Sorhus</a></p>
<!-- Change this out with your name and url ↓ -->
<p>Created by <a href="http://todomvc.com">you</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<!-- Scripts here. Don't remove ↓ -->
<script src="node_modules/todomvc-common/base.js"></script>
<script src="js/app.js"></script>
</body>
</html>
[/CODE]
