-
-
Save U68116820/c0de7c476b12249dbc50825c327edfca to your computer and use it in GitHub Desktop.
A simple CRUD application with Javascript | https://medium.com/@etiennerouzeaud/a-simple-crud-application-with-javascript-ebc82f688c59#.nu6ycg8hi
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Countries CRUD</title> | |
| <style> | |
| input[type='submit'], button, [aria-label]{ | |
| cursor: pointer; | |
| } | |
| #spoiler{ | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <form action="javascript:void(0);" method="POST" onsubmit="app.Add()"> | |
| <input type="text" id="add-name" placeholder="New country"> | |
| <input type="submit" value="Add"> | |
| </form> | |
| <div id="spoiler" role="aria-hidden"> | |
| <form action="javascript:void(0);" method="POST" id="saveEdit"> | |
| <input type="text" id="edit-name"> | |
| <input type="submit" value="Edit" /> <a onclick="CloseInput()" aria-label="Close">✖</a> | |
| </form> | |
| </div> | |
| <p id="counter"></p> | |
| <table> | |
| <tr> | |
| <th>Name</th> | |
| </tr> | |
| <tbody id="countries"> | |
| </tbody> | |
| </table> | |
| <script> | |
| var app = new function() { | |
| this.el = document.getElementById('countries'); | |
| this.countries = ['France', 'Germany', 'England', 'Spain', 'Belgium', 'Italy', 'Portugal', 'Irland', 'Luxembourg']; | |
| this.Count = function(data) { | |
| var el = document.getElementById('counter'); | |
| var name = 'country'; | |
| if (data) { | |
| if (data > 1) { | |
| name = 'countries'; | |
| } | |
| el.innerHTML = data + ' ' + name ; | |
| } else { | |
| el.innerHTML = 'No ' + name; | |
| } | |
| }; | |
| this.FetchAll = function() { | |
| var data = ''; | |
| if (this.countries.length > 0) { | |
| for (i = 0; i < this.countries.length; i++) { | |
| data += '<tr>'; | |
| data += '<td>' + this.countries[i] + '</td>'; | |
| data += '<td><button onclick="app.Edit(' + i + ')">Edit</button></td>'; | |
| data += '<td><button onclick="app.Delete(' + i + ')">Delete</button></td>'; | |
| data += '</tr>'; | |
| } | |
| } | |
| this.Count(this.countries.length); | |
| return this.el.innerHTML = data; | |
| }; | |
| this.Add = function () { | |
| el = document.getElementById('add-name'); | |
| // Get the value | |
| var country = el.value; | |
| if (country) { | |
| // Add the new value | |
| this.countries.push(country.trim()); | |
| // Reset input value | |
| el.value = ''; | |
| // Dislay the new list | |
| this.FetchAll(); | |
| } | |
| }; | |
| this.Edit = function (item) { | |
| var el = document.getElementById('edit-name'); | |
| // Display value in the field | |
| el.value = this.countries[item]; | |
| // Display fields | |
| document.getElementById('spoiler').style.display = 'block'; | |
| self = this; | |
| document.getElementById('saveEdit').onsubmit = function() { | |
| // Get value | |
| var country = el.value; | |
| if (country) { | |
| // Edit value | |
| self.countries.splice(item, 1, country.trim()); | |
| // Display the new list | |
| self.FetchAll(); | |
| // Hide fields | |
| CloseInput(); | |
| } | |
| } | |
| }; | |
| this.Delete = function (item) { | |
| // Delete the current row | |
| this.countries.splice(item, 1); | |
| // Display the new list | |
| this.FetchAll(); | |
| }; | |
| } | |
| app.FetchAll(); | |
| function CloseInput() { | |
| document.getElementById('spoiler').style.display = 'none'; | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment