Merge pull request #15 from FACG2/DomWork

MainDom
FACG2 · Aug 17, 2017 · ed81124 · ed81124
2 parents de6c24d + dfb6697
commit ed81124
Show file tree

Hide file tree

Showing 4 changed files with 204 additions and 42 deletions.
diff --git a/public/dom.js b/public/dom.js
@@ -11,45 +11,147 @@ function request(url, cb) {
     xhr.open("GET", url, true)
     xhr.send()
 }
+var container = document.getElementById('showContainer');
+var addNoteForm = document.getElementById('add-todo');
+///////////////////////////////////////////////////////////////////////////////////////////////
+(function() {
 
-function updateDom(err, data) {
-    if (err) {
-        console.log(err)
-    } else {
-        var result = JSON.parse(data)
-        var stable = document.getElementById("s-table")
-        var ctable = document.getElementById("c-table")
-        var gtable = document.getElementById("g-table")
-
-        result.forEach(function(rs) {
-            var row1 = document.createElement("tr")
-            var stoptd = document.createElement("td")
-            var user = document.createElement("td")
-            stoptd.innerHTML = rs.text
-            user.innerHTML = rs.name
-            row1.appendChild(stoptd)
-            row1.appendChild(user)
-            stable.appendChild(row1)
-
-            var row2 = document.createElement("tr")
-            var conttd = document.createElement("td")
-            var user2 = document.createElement("td")
-            conttd.innerHTML = rs.text
-            user2.innerHTML = rs.name
-            row2.appendChild(conttd)
-            row2.appendChild(user2)
-            ctable.appendChild(row2)
-
-            var row3 = document.createElement("tr")
-            var gotd = document.createElement("td")
-            var user3 = document.createElement("td")
-            gotd.innerHTML = rs.text
-            user3.innerHTML = rs.name
-            row3.appendChild(gotd)
-            row3.appendChild(user3)
-            gtable.appendChild(row3)
-        })
+
+    state = JSON.parse(localStorage.getItem('newState'));
+
+
+    var createNoteNode = function(note) {
+        var noteNode = document.createElement('li');
+        noteNode.id = note.id;
+
+        var spanDescription = document.createElement('span');
+        spanDescription.textContent = note.description;
+        noteNode.appendChild(spanDescription);
+
+
+        var deleteButtonNode = document.createElement('button');
+        deleteButtonNode.setAttribute("title", "del");
+        var txt = document.createTextNode("\ ");
+        deleteButtonNode.addEventListener('click', function(event) {
+            var newState = noteFunctions.deleteNote(state, note.id);
+            localStorage.setItem('newState', JSON.stringify(newState));
+            update(newState);
+        });
+        deleteButtonNode.className = "close";
+        deleteButtonNode.appendChild(txt);
+        noteNode.appendChild(deleteButtonNode);
+
+
+        return noteNode;
+    };
+
+    if (addNoteForm) {
+        addNoteForm.addEventListener('submit', function(event) {
+            event.preventDefault();
+            var newDescription = document.getElementsByName("description")[0].value;
+            if (/\S/.test(newDescription)) {
+                var noteObject = {
+                    description: newDescription
+                };
+                var newState = noteFunctions.addNote(state, noteObject);
+                localStorage.setItem('newState', JSON.stringify(newState));
+
+                update(newState);
+
+                document.getElementsByName("description")[0].value = "";
+            } else {
+                alert("Empty inputs not allowed!");
+            }
+            i
+        });
     }
+
+    var update = function(newState) {
+        state = JSON.parse(localStorage.getItem('newState'));
+        renderState(state);
+    };
+
+    var renderState = function(state) {
+        var noteListNode = document.createElement('ul');
+
+        state.forEach(function(note) {
+            noteListNode.appendChild(createNoteNode(note));
+        });
+        container.replaceChild(noteListNode, container.firstChild);
+    };
+
+    if (container) renderState(state);
+})();
+var noteFunctions = {
+    generateId: (function() {
+        var idCounter = 0;
+
+        function incrementCounter() {
+            return (idCounter += 1);
+        }
+
+        return incrementCounter;
+    })(),
+    addNote: function(notes, newNote) {
+        var newId = this.generateId();
+        var newItem = {
+            id: newId,
+            description: newNote.description,
+            done: false
+        };
+        return notes.concat([newItem]);
+    },
+    deleteNote: function(notes, idToDelete) {
+        var newArray = notes.map(function(el) {
+            return Object.assign({}, el);
+        });
+        return newArray.filter(function(el) {
+            return el.id !== idToDelete;
+        });
+    },
 }
 
-request('/users', updateDom)
+//////////////////////////////////////////////////////////////////////////////////
+
+
+// function updateDom(err, data) {
+//     if (err) {
+//         console.log(err)
+//     } else {
+//         var result = JSON.parse(data)
+//         var stable = document.getElementById("s-table")
+//         var ctable = document.getElementById("c-table")
+//         var gtable = document.getElementById("g-table")
+
+//         result.forEach(function(rs) {
+//             var row1 = document.createElement("tr")
+//             var stoptd = document.createElement("td")
+//             var user = document.createElement("td")
+//             stoptd.innerHTML = rs.text
+//             user.innerHTML = rs.name
+//             row1.appendChild(stoptd)
+//             row1.appendChild(user)
+//             stable.appendChild(row1)
+
+//             var row2 = document.createElement("tr")
+//             var conttd = document.createElement("td")
+//             var user2 = document.createElement("td")
+//             conttd.innerHTML = rs.text
+//             user2.innerHTML = rs.name
+//             row2.appendChild(conttd)
+//             row2.appendChild(user2)
+//             ctable.appendChild(row2)
+
+//             var row3 = document.createElement("tr")
+//             var gotd = document.createElement("td")
+//             var user3 = document.createElement("td")
+//             gotd.innerHTML = rs.text
+//             user3.innerHTML = rs.name
+//             row3.appendChild(gotd)
+//             row3.appendChild(user3)
+//             gtable.appendChild(row3)
+//         })
+//     }
+// }
+
+// request('/users', updateDom)
diff --git a/public/img/del.png b/public/img/del.png
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 
 <head>
     <meta charset="utf-8">
-    <title>PG workshop - get users from the database</title>
+    <title>SGC,The simpelest way!</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="main.css">
     <link href="https://fonts.googleapis.com/css?family=Acme" rel="stylesheet">
@@ -16,7 +16,7 @@ <h1>
     </h1>
     <div class="container">
         <form class="form" action="/create-scg" method="post">
-            <label for="input-name">Your Name : </label>
+            <label for="input-name">Your Name (optional) : </label>
             <input type="text" name="name" id="input-name" placeholder="Name" required>
             <label text="Section" id="secLabel">Section :  </label>
             <form id="sec">
@@ -27,9 +27,13 @@ <h1>
                 <input id="go" type="radio" name="scg-sec" value="Go">
                 <label for="go"><span><span></span></span> Go </label>
             </form>
-            <form id="add-todo">
+            <form id="add-note">
                 <input type="text" id="desc" name="description" value="" aria-labelledby="add-todo" placeholder="Say whatever you want . . " maxlength="100" required>
                 <input type="submit" name="sub" value="Add" class="addBtn">
+                <div id="showContainer">
+
+
+                </div>
             </form>
     </div>
     <div class="subDiv"> <input type="submit" class="subBtn" value="Submit" id="input-submit">

diff --git a/public/main.css b/public/main.css
@@ -16,6 +16,62 @@ h1 {
     width: 100%;
 }
 
+span {
+    text-justify: distribute;
+}
+
+ul {
+    margin: auto;
+    padding: 0 0 0 0;
+    width: 50%;
+}
+
+ul li {
+    cursor: pointer;
+    position: relative;
+    padding: 25px 8px 12px 40px;
+    background: #A2DED0;
+    font-size: 25px;
+    color: black;
+    transition: 0.2s;
+    /* make the list items unselectable */
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    list-style: none;
+    max-width: 546px;
+}
+
+ul li:nth-child(odd) {
+    background: #65C6BB;
+}
+
+ul li:hover {
+    background: #26A65B;
+}
+
+.close {
+    position: absolute;
+    height: 65px;
+    right: 0;
+    top: 0;
+    padding: 30px 50px 16px 25px;
+    border: none;
+    background-image: url('img/del.png');
+    background-size: 70px;
+    background-repeat: no-repeat;
+    font-size: 16px;
+    border-left: 1px solid #95a5a6;
+}
+
+.close:hover {
+    background-color: #e74c3c;
+    color: white;
+    /* height: 65px; */
+    cursor: pointer;
+}
+
 #desc {
     width: 84%;
 }
@@ -45,7 +101,7 @@ select {
 }
 
 .subBtn {
-    width: 40%;
+    width: 30%;
     background-color: #27ae60;
     color: white;
     padding: 14px 20px;