joellobo · May 7, 2018 16:55
diff --git a/HTML5 b/HTML5
 <!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>

    <link rel="import" href="header.html">

    <form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
        <label for="add-name">Name</label>
        <input type="text" id="nome">

        <label for="add-name">E-mail</label>
        <input type="email" id="email">

        <label for="add-name">Telefone</label>
        <input type="phone" id="telefone">

        <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-nome">
            <input type="text" id="edit-email">
            <input type="text" id="edit-telefone">
            <input type="submit" value="Edit" />
            <a onclick="CloseInput()" aria-label="Close">&#10006;</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 = [{
                nome: 'Joel Lobo',
                email: '[email protected]',
                telefone: '988113848'
            }];
            this.Count = function (data) {
                var el = document.getElementById('counter');
                var name = 'pessoa';
                if (data) {
                    if (data > 1) {
                        name = 'pessoas';
                    }
                    el.innerHTML = data + ' ' + name;
                } else {
                    el.innerHTML = 'No register';
                }
            };

            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].nome + '</td>';
                        data += '<td>' + this.countries[i].email + '</td>';
                        data += '<td>' + this.countries[i].telefone + '</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 () {
                nome = document.getElementById('nome');
                email = document.getElementById('email');
                telefone = document.getElementById('telefone');

                var item = {};
                item.nome = nome.value;
                item.email = email.value;
                item.telefone = telefone.value;

                if (item) {
                    // Add the new value
                    this.countries.push(item);
                    // Reset input value
                    nome.value = '';
                    email.value = '';
                    telefone.value = '';

                    // Dislay the new list
                    this.FetchAll();
                }
            };
            this.Edit = function (item) {
                var nome = document.getElementById('edit-nome');
                var email = document.getElementById('edit-email');
                var telefone = document.getElementById('edit-telefone');

                // Display value in the field
                nome.value = this.countries[item].nome;
                email.value = this.countries[item].email;
                telefone.value = this.countries[item].telefone;

                // Display fields
                document.getElementById('spoiler').style.display = 'block';
                self = this;
                document.getElementById('saveEdit').onsubmit = function () {
                    // Get value
                    var item = {};
                    item.nome = nome.value;
                    item.email = email.value;
                    item.telefone = telefone.value;
    
                    if (item) {
                        // Edit value
                        self.countries.splice(item, 1, item);
                        // 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>
	<!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>

	<link rel="import" href="header.html">

	<form action="javascript:void(0);" method="POST" onsubmit="app.Add()">
	<label for="add-name">Name</label>
	<input type="text" id="nome">

	<label for="add-name">E-mail</label>
	<input type="email" id="email">

	<label for="add-name">Telefone</label>
	<input type="phone" id="telefone">

	<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-nome">
	<input type="text" id="edit-email">
	<input type="text" id="edit-telefone">
	<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 = [{
	nome: 'Joel Lobo',
	email: '[email protected]',
	telefone: '988113848'
	}];
	this.Count = function (data) {
	var el = document.getElementById('counter');
	var name = 'pessoa';
	if (data) {
	if (data > 1) {
	name = 'pessoas';
	}
	el.innerHTML = data + ' ' + name;
	} else {
	el.innerHTML = 'No register';
	}
	};

	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].nome + '</td>';
	data += '<td>' + this.countries[i].email + '</td>';
	data += '<td>' + this.countries[i].telefone + '</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 () {
	nome = document.getElementById('nome');
	email = document.getElementById('email');
	telefone = document.getElementById('telefone');

	var item = {};
	item.nome = nome.value;
	item.email = email.value;
	item.telefone = telefone.value;

	if (item) {
	// Add the new value
	this.countries.push(item);
	// Reset input value
	nome.value = '';
	email.value = '';
	telefone.value = '';

	// Dislay the new list
	this.FetchAll();
	}
	};
	this.Edit = function (item) {
	var nome = document.getElementById('edit-nome');
	var email = document.getElementById('edit-email');
	var telefone = document.getElementById('edit-telefone');

	// Display value in the field
	nome.value = this.countries[item].nome;
	email.value = this.countries[item].email;
	telefone.value = this.countries[item].telefone;

	// Display fields
	document.getElementById('spoiler').style.display = 'block';
	self = this;
	document.getElementById('saveEdit').onsubmit = function () {
	// Get value
	var item = {};
	item.nome = nome.value;
	item.email = email.value;
	item.telefone = telefone.value;

	if (item) {
	// Edit value
	self.countries.splice(item, 1, item);
	// 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>