# Projekt mit meinem Nas verbinden zur Speicherung



## Panda9296 (22. Dez 2020)

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]


----------



## mihe7 (22. Dez 2020)

Panda9296 hat gesagt.:


> mit JQuery an einer TODO-Liste


Dein Code hat jetzt aber nichts mit jQuery zu tun.



Panda9296 hat gesagt.:


> die Sprache ist im Gegensatz zu java sehr unstrukturiert


"What logic does JavaScript use? Well, one other reminder: you never use the word logic and JavaScript on the same line either." Dr. Venkat Subramaniam


----------

