#Adds restapi (create, update, delete), styles, sanitize post data, c…

…reate page after activate plugin

assets/js/app.js

@@ -1 +1,5 @@
 import $ from 'jquery';
+
+import MyToDoApp from './modules/MyToDoApp';
+
+var mytodoapp = new MyToDoApp();

assets/js/modules/MyToDoApp.js

@@ -0,0 +1,135 @@
+import $ from 'jquery';
+
+class MyToDoApp {
+    constructor(){
+        this.taskInput = $("#mytodoapp-task-title");
+        this.taskList = $('#mytodoapp-alerts');
+        this.taskCheckbox = 0;
+        this.events();
+    }
+
+    events(){
+        $(document).on("keyup", this.createTask.bind(this));
+        $("#mytodoapp-list").on("keyup", ".mytodoapp-list-item-title", this.updateTask.bind(this));
+        $("#mytodoapp-list").on("click", ".mytodoapp-list-item-checkbox", this.taskStatus.bind(this));
+        $("#mytodoapp-list").on("click", ".mytodoapp-delete", this.deleteTask);
+    }
+
+    createTask(e){
+        if($('#mytodoapp-task-done').is(':checked') ){
+            this.taskCheckbox = $("#mytodoapp-task-done").val();
+        }
+        const ourNewPost = {
+            'title': $("#mytodoapp-task-title").val(),
+            'mytodoapp_checkbox_value': this.taskCheckbox,
+            'status': 'publish'
+        }
+        if (e.keyCode == 13 && $("#mytodoapp-task-title").is(':focus') && $("#mytodoapp-task-title").val() != '') { 
+            $.ajax({
+                beforeSend: (xhr) => {
+                    xhr.setRequestHeader('X-WP-Nonce', mytodoappData.nonce);
+                },
+                url: mytodoappData.root_url + '/wp-json/wp/v2/mytodoapp/',
+                type: 'POST',
+                data: ourNewPost,
+                success: (response) => {
+                    this.taskList.text("");
+                    $(`
+                    <li data-id="${response.id}" id="post-${response.id}" class="mytodoapp-item post-${response.id}" >
+                        <div class="mytodoapp-list-item-checkbox-wrapper">
+                            <input class="mytodoapp-list-item-checkbox" type="checkbox" name="${response.id}" value="yes" ${(response.mytodoapp_metabox.mytodoapp_checkbox_value[0] == 'yes') ? 'checked="checked"' : '' }  /> 
+                        </div>
+                        <div class="mytodoapp-list-item-title-wrapper">
+                            <input class="mytodoapp-list-item-title" type="text" value="${response.title.raw}" /> 
+                        </div>
+                        <div class="mytodoapp-delete">&#10006;</div>
+                    </li>
+                `).appendTo("#mytodoapp-list").hide().slideDown();
+                    this.taskInput.val('');
+                    this.taskInput.blur();
+                },
+                error: (response) => {
+                },
+            });
+        } else if (e.keyCode == 13 && $("#mytodoapp-task-title").is(':focus'))  {
+            this.taskList.text("Please enter title");
+        }
+        this.taskCheckbox = 0;
+    }
+
+    updateTask(e){
+        const thisTask = $(e.target).parents(".mytodoapp-item");
+        const thisTaskInput = $(e.target);
+        if(thisTask.find(".mytodoapp-list-item-checkbox").is(':checked') ){
+            this.taskCheckbox = "yes";
+        }
+        const ourUpdatedPost = {
+            'title': thisTask.find(".mytodoapp-list-item-title").val(),
+            'mytodoapp_checkbox_value': this.taskCheckbox
+        }
+        if (e.keyCode == 13 && thisTask.find(".mytodoapp-list-item-title").is(':focus') && thisTask.find(".mytodoapp-list-item-title").val() != '') {   
+            $.ajax({
+                beforeSend: (xhr) => {
+                    xhr.setRequestHeader('X-WP-Nonce', mytodoappData.nonce);
+                },
+                url: mytodoappData.root_url + '/wp-json/wp/v2/mytodoapp/' + thisTask.data('id'),
+                type: 'POST',
+                data: ourUpdatedPost,
+                success: (response) => {
+                    this.taskList.text("");
+                    thisTaskInput.blur();
+                },
+                error: (response) => {
+                },
+
+            });
+        } else if (e.keyCode == 13 && thisTask.find(".mytodoapp-list-item-title").is(':focus'))  {
+            this.taskList.text("Please enter title");
+        }
+    }
+
+    taskStatus(e){
+        const thisTask = $(e.target).parents(".mytodoapp-item-js");
+        if(thisTask.find(".mytodoapp-list-item-checkbox").is(':checked') ){
+            this.taskCheckbox = "yes";
+        }
+        var ourUpdatedPost = {
+            'mytodoapp_checkbox_value': this.taskCheckbox
+        } 
+
+        if (thisTask.hasClass("mytodoapp-item-js")) {
+            $.ajax({
+                beforeSend: (xhr) => {
+                    xhr.setRequestHeader('X-WP-Nonce', mytodoappData.nonce);
+                },
+                url: mytodoappData.root_url + '/wp-json/wp/v2/mytodoapp/' + thisTask.data('id'),
+                type: 'POST',
+                data: ourUpdatedPost,
+                success: (response) => {
+                    this.taskList.text("");
+                },
+                error: (response) => {
+                },
+            });
+        }
+    }
+
+    deleteTask(e){
+        const thisTask = $(e.target).parents(".mytodoapp-item");
+        $.ajax({
+            beforeSend: (xhr) => {
+                xhr.setRequestHeader('X-WP-Nonce', mytodoappData.nonce);
+            },
+            url: mytodoappData.root_url + '/wp-json/wp/v2/mytodoapp/' + thisTask.data('id'),
+            type: 'DELETE',
+            success: (response) => {
+                thisTask.slideUp();
+            },
+            error: (response) => {
+            },
+
+        });
+    }
+
+}
+export default MyToDoApp;

assets/scss/layout/_form-style.scss

@@ -0,0 +1,117 @@
+.mytodoapp-alerts {
+  margin: 0 auto;
+  width: 250px;
+  max-width: 100%;
+  text-align: center;
+  margin-bottom: 10px;
+  font-size: 14px;
+  color: #8b8f97;
+
+}
+
+.mytodoapp-list {
+  background: #fff;
+  font-family: 'Open Sans', sans-serif;
+  list-style: none;
+  padding: 0;
+  width: 250px;
+  max-width: 100%;
+  margin: 0 auto;
+  border: 1px solid #e3e1e1;
+  box-shadow: 0px 2px 2px -1px rgba(225,222,222,1);
+
+
+}
+
+.mytodoapp-item:not(:last-child) {
+  border-bottom: 1px solid #e3e1e1;
+}
+
+.mytodoapp-item {
+  position: relative;
+  display: flex;
+}
+
+.mytodoapp-delete {
+  position: absolute;
+  top: 50%;
+  right: 5px;
+  transform: translateY(-50%);
+  cursor: pointer;
+  font-size: 10px;
+  opacity:0;
+  transition: opacity .3s;
+  .mytodoapp-item:hover &{
+      opacity: 1;
+  }
+}
+
+.mytodoapp-list-item-checkbox-wrapper {
+  flex: 0 0 40px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  border-right: 1px solid #f2e3df;
+  margin-right: 4px;
+}
+
+.mytodoapp-list-item-checkbox {
+  appearance: none;
+  position: relative;
+  width: 15px;
+  height: 15px;
+  background-color: #faf9f9;
+  border: 1px solid #6bb3ca;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  &:checked {
+      background-color: #fdfdfd;
+      border: 1px solid #c8c8c8;
+      &::after {
+          content: '\2713';
+          font-size: 10px;
+          color: #cccecf;
+      }
+  }
+  &:focus {
+      outline: none;
+  }
+}
+
+.mytodoapp-list-item-title-wrapper {
+  border-left: 1px solid #f2e3df;
+  flex-grow: 1;
+}
+
+.mytodoapp-list-item-title,
+.mytodoapp-task-title {
+  border: none;
+  padding: 10px 30px 10px 10px; 
+  font-size: 14px;
+  color: #8b8f97;
+  width: 100%;
+  border: 1px solid transparent;
+  font-weight: 700;
+  &:focus {
+      outline: none;
+      border-color: #6bb3ca; 
+  }
+}
+
+.mytodoapp-task-title {
+  padding-top: 18px;
+  background: transparent;
+  &::placeholder {
+      color: #c0c6d2;
+  }
+}
+
+.mytodoapp-add {
+  background: #f3f3f3;
+  .mytodoapp-list-item-checkbox-wrapper {
+      padding-top: 8px;
+  }
+}