<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="centrarFormulario">
<form id="formulario">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" placeholder="Ingrese su nombre" />
<label for="apellido">Apellido:</label>
<input id="apellido" type="text" placeholder="Ingrese su apellido" />
<label for="email">email:</label>
<input id="email" type="email" placeholder="Ingrese su email" />
<label for="edad">Edad:</label>
<input id="edad" type="number" placeholder="Ingrese su Edad" />
<label for="id">Id:</label>
<input
id="id"
type="number"
placeholder="Ingrese su n° de cliente en orden"
/>
<label for="dni">dni:</label>
<input id="dni" type="number" placeholder="Ingrese su DNI" />
<label for="telefono">Telefono:</label>
<input id="telefono" type="number" placeholder="Ingrese su Telefono" />
<label for="calle">Dirección:</label>
<input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
<h3>Ingrese los datos del pedido</h3>
<label for="asistencia">Cantidad de ingresantes:</label>
<input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
<label for="aplicantes">cantidad de ancianos y menores:</label>
<input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
<button id="btnLoad" type="submit">Enviar</button>
<button type="reset">Restablecer</button>
<button type="button" id="btnDeleteStorage">Borrar Storage</button>
</form>
</div>
<table>
<thead id="tableHead">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Edad</th>
<th>DNI</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="appsrc="js/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="centrarFormulario">
<form id="formulario">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" placeholder="Ingrese su nombre" />
<label for="apellido">Apellido:</label>
<input id="apellido" type="text" placeholder="Ingrese su apellido" />
<label for="email">email:</label>
<input id="email" type="email" placeholder="Ingrese su email" />
<label for="edad">Edad:</label>
<input id="edad" type="number" placeholder="Ingrese su Edad" />
<label for="id">Id:</label>
<input
id="id"
type="number"
placeholder="Ingrese su n° de cliente en orden"
/>
<label for="dni">dni:</label>
<input id="dni" type="number" placeholder="Ingrese su DNI" />
<label for="telefono">Telefono:</label>
<input id="telefono" type="number" placeholder="Ingrese su Telefono" />
<label for="calle">Dirección:</label>
<input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
<h3>Ingrese los datos del pedido</h3>
<label for="asistencia">Cantidad de ingresantes:</label>
<input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
<label for="aplicantes">cantidad de ancianos y menores:</label>
<input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
<button id="btnLoad" type="submit">Enviar</button>
<button type="reset">Restablecer</button>
<button type="button" id="btnDeleteStorage">Borrar Storage</button>
</form>
</div>
<table>
<thead id="tableHead">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Edad</th>
<th>DNI</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="app.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="css/main.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="centrarFormulario">
<form id="formulario">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" placeholder="Ingrese su nombre" />
<label for="apellido">Apellido:</label>
<input id="apellido" type="text" placeholder="Ingrese su apellido" />
<label for="email">email:</label>
<input id="email" type="email" placeholder="Ingrese su email" />
<label for="edad">Edad:</label>
<input id="edad" type="number" placeholder="Ingrese su Edad" />
<label for="id">Id:</label>
<input
id="id"
type="number"
placeholder="Ingrese su n° de cliente en orden"
/>
<label for="dni">dni:</label>
<input id="dni" type="number" placeholder="Ingrese su DNI" />
<label for="telefono">Telefono:</label>
<input id="telefono" type="number" placeholder="Ingrese su Telefono" />
<label for="calle">Dirección:</label>
<input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
<h3>Ingrese los datos del pedido</h3>
<label for="asistencia">Cantidad de ingresantes:</label>
<input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
<label for="aplicantes">cantidad de ancianos y menores:</label>
<input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
<button id="btnLoad" type="submit">Enviar</button>
<button type="reset">Restablecer</button>
<button type="button" id="btnDeleteStorage">Borrar Storage</button>
</form>
</div>
<table>
<thead id="tableHead">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Edad</th>
<th>DNI</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="js/main.js"></script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="centrarFormulario">
<form id="formulario">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" placeholder="Ingrese su nombre" />
<label for="apellido">Apellido:</label>
<input id="apellido" type="text" placeholder="Ingrese su apellido" />
<label for="email">email:</label>
<input id="email" type="email" placeholder="Ingrese su email" />
<label for="edad">Edad:</label>
<input id="edad" type="number" placeholder="Ingrese su Edad" />
<label for="id">Id:</label>
<input
id="id"
type="number"
placeholder="Ingrese su n° de cliente en orden"
/>
<label for="dni">dni:</label>
<input id="dni" type="number" placeholder="Ingrese su DNI" />
<label for="telefono">Telefono:</label>
<input id="telefono" type="number" placeholder="Ingrese su Telefono" />
<label for="calle">Dirección:</label>
<input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
<h3>Ingrese los datos del pedido</h3>
<label for="asistencia">Cantidad de ingresantes:</label>
<input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
<label for="aplicantes">cantidad de ancianos y menores:</label>
<input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
<button id="btnLoad" type="submit">Enviar</button>
<button type="reset">Restablecer</button>
<button type="button" id="btnDeleteStorage">Borrar Storage</button>
</form>
</div>
<table>
<thead id="tableHead">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Edad</th>
<th>DNI</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="app.js"></script>
</body>
</html>
$(document).ready(function () {
const tableBody = $("#tableBody");
const tableHead = $("#tableHead");
if (getUserFromStorage("users")) {
drawTable();
} else {
tableHead.hide();
}
console.log($("#nombre").val());
console.log($("#apellido").val());
console.log($("#email").val());
console.log($("#edad").val());
console.log($("#id").val());
console.log($("#dni").val());
console.log($("#telefono").val());
console.log($("#ingresantes").val());
console.log($("#aplicantes").val());
const form = $("#formulario");
const inputName = $("#nombre");
const inputSurname = $("#apellido");
const inputEmail = $("#email");
const inputAge = $("#edad");
const inputId = $("#id");
const inputDni = $("#dni");
const inputPhone = $("#telefono");
const allInputs = document.querySelectorAll("input");
const btnDeleteStorage = $("#btnDeleteStorage"); //Capturo boton reset Storage
// pronto usare esto para dar resultados sobre la compra de boletos
// const inputIncoming = $("#ingresantes");
// const inputApplicants = $("#aplicantes");
//---------------------------------------------------------------
function User(id, nombre, apellido, email, edad, dni, telefono) {
this.id = id;
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.edad = edad;
this.id = id;
this.dni = dni;
this.telefono = telefono;
}
let listUser = [];
if (getUserFromStorage("users")) {
listUser = getUserFromStorage("users");
}
function saveToStorage(key, user) {
listUser.push(user);
localStorage.setItem(key, JSON.stringify(listUser));
}
function getUserFromStorage(key) {
if (localStorage.getItem(key)) {
return JSON.parse(localStorage.getItem(key));
}
}
function drawTable() {
for (const user of getUserFromStorage("users")) {
tableHead.show();
tableBody.append(`<tr>
<td>${user.id}</td>
<td>${user.nombre}</td>
<td>${user.apellido}</td>
<td>${user.email}</td>
<td>${user.edad}</td>
<td>${user.dni}</td>
<td>${user.telefono}</td>
</tr>`);
}
}
form.submit(function (event) {
event.preventDefault();
const id = inputId.val();
const nombre = inputName.val();
const apellido = inputSurname.val();
const email = inputEmail.val();
const edad = inputAge.val();
const dni = inputDni.val();
const telefono = inputPhone.val();
const user = new User(id, nombre, apellido, email, edad, dni, telefono);
saveToStorage("users", user); //Guardo user en storage
tableBody.empty(); //Borro el tbody de la tabla
drawTable(); //Dibujo tabla actualizada
//Pongo todos los input en blanco tras agregar a la tabla y storage.
for (const input of allInputs) {
input.value = "";
}
});
//Al presionar botón se borra Storage y se recarga la página para borrar tabla
btnDeleteStorage.click(() => {
localStorage.clear();
location.reload();
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="centrarFormulario">
<form id="formulario">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" placeholder="Ingrese su nombre" />
<label for="apellido">Apellido:</label>
<input id="apellido" type="text" placeholder="Ingrese su apellido" />
<label for="email">email:</label>
<input id="email" type="email" placeholder="Ingrese su email" />
<label for="edad">Edad:</label>
<input id="edad" type="number" placeholder="Ingrese su Edad" />
<label for="id">Id:</label>
<input
id="id"
type="number"
placeholder="Ingrese su n° de cliente en orden"
/>
<label for="dni">dni:</label>
<input id="dni" type="number" placeholder="Ingrese su DNI" />
<label for="telefono">Telefono:</label>
<input id="telefono" type="number" placeholder="Ingrese su Telefono" />
<label for="calle">Dirección:</label>
<input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
<h3>Ingrese los datos del pedido</h3>
<label for="asistencia">Cantidad de ingresantes:</label>
<input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
<label for="aplicantes">cantidad de ancianos y menores:</label>
<input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
<button id="btnLoad" type="submit">Enviar</button>
<button type="reset">Restablecer</button>
</form>
</div>
<table>
<thead id="tableHead">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Edad</th>
<th>DNI</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="app.js"></script>
</body>
</html>
$(document).ready(function () {
const tableBody = $("#tableBody");
const tableHead = $("#tableHead");
if (getUserFromStorage("users")) {
drawTable();
} else {
tableHead.hide();
}
console.log($("#nombre").val());
console.log($("#apellido").val());
console.log($("#email").val());
console.log($("#edad").val());
console.log($("#id").val());
console.log($("#dni").val());
console.log($("#telefono").val());
console.log($("#ingresantes").val());
console.log($("#aplicantes").val());
const form = $("#formulario");
const inputName = $("#nombre");
const inputSurname = $("#apellido");
const inputEmail = $("#email");
const inputAge = $("#edad");
const inputId = $("#id");
const inputDni = $("#dni");
const inputPhone = $("#telefono");
const allInputs = document.querySelectorAll("input");
// pronto usare esto para dar resultados sobre la compra de boletos
// const inputIncoming = $("#ingresantes");
// const inputApplicants = $("#aplicantes");
//---------------------------------------------------------------
function User(id, nombre, apellido, email, edad, dni, telefono) {
this.id = id;
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.edad = edad;
this.id = id;
this.dni = dni;
this.telefono = telefono;
}
let listUser = [];
if (getUserFromStorage("users")) {
listUser = getUserFromStorage("users");
}
function saveToStorage(key, user) {
listUser.push(user);
localStorage.setItem(key, JSON.stringify(listUser));
}
function getUserFromStorage(key) {
if (localStorage.getItem(key)) {
return JSON.parse(localStorage.getItem(key));
}
}
function drawTable() {
for (const user of getUserFromStorage("users")) {
tableHead.show();
tableBody.append(`<tr>
<td>${user.id}</td>
<td>${user.nombre}</td>
<td>${user.apellido}</td>
<td>${user.email}</td>
<td>${user.edad}</td>
<td>${user.dni}</td>
<td>${user.telefono}</td>
</tr>`);
}
}
form.submit(function (event) {
event.preventDefault();
const id = inputId.val();
const nombre = inputName.val();
const apellido = inputSurname.val();
const email = inputEmail.val();
const edad = inputAge.val();
const dni = inputDni.val();
const telefono = inputPhone.val();
const user = new User(id, nombre, apellido, email, edad, dni, telefono);
saveToStorage("users", user); //Guardo user en storage
tableBody.empty(); //Borro el tbody de la tabla
drawTable(); //Dibujo tabla actualizada
//Pongo todos los input en blanco tras agregar a la tabla y storage.
for (const input of allInputs) {
input.value = "";
}
});
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div class="centrarFormulario">
<form id="formulario">
<label for="nombre">Nombre:</label>
<input id="nombre" type="text" placeholder="Ingrese su nombre" />
<label for="apellido">Apellido:</label>
<input id="apellido" type="text" placeholder="Ingrese su apellido" />
<label for="email">email:</label>
<input id="email" type="email" placeholder="Ingrese su email" />
<label for="edad">Edad:</label>
<input id="edad" type="number" placeholder="Ingrese su Edad" />
<label for="id">Id:</label>
<input
id="id"
type="number"
placeholder="Ingrese su n° de cliente en orden"
/>
<label for="dni">dni:</label>
<input id="dni" type="number" placeholder="Ingrese su DNI" />
<label for="telefono">Telefono:</label>
<input id="telefono" type="number" placeholder="Ingrese su Telefono" />
<label for="calle">Dirección:</label>
<input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
<h3>Ingrese los datos del pedido</h3>
<label for="asistencia">Cantidad de ingresantes:</label>
<input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
<label for="aplicantes">cantidad de ancianos y menores:</label>
<input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
<button id="btnLoad" type="submit">Enviar</button>
<button type="reset">Restablecer</button>
<button type="button" id="btnDeleteStorage">Borrar Storage</button>
</form>
</div>
<table>
<thead id="tableHead">
<tr>
<th>Id</th>
<th>Nombre</th>
<th>Apellido</th>
<th>Email</th>
<th>Edad</th>
<th>DNI</th>
<th>Teléfono</th>
</tr>
</thead>
<tbody id="tableBody"></tbody>
</table>
<script src="app.js"></script>
</body>
</html>
$(document).ready(function () {
const tableBody = $("#tableBody");
const tableHead = $("#tableHead");
if (getUserFromStorage("users")) {
drawTable();
} else {
tableHead.hide();
}
console.log($("#nombre").val());
console.log($("#apellido").val());
console.log($("#email").val());
console.log($("#edad").val());
console.log($("#id").val());
console.log($("#dni").val());
console.log($("#telefono").val());
console.log($("#ingresantes").val());
console.log($("#aplicantes").val());
const form = $("#formulario");
const inputName = $("#nombre");
const inputSurname = $("#apellido");
const inputEmail = $("#email");
const inputAge = $("#edad");
const inputId = $("#id");
const inputDni = $("#dni");
const inputPhone = $("#telefono");
const allInputs = document.querySelectorAll("input");
const btnDeleteStorage = $("#btnDeleteStorage"); //Capturo boton reset Storage
// pronto usare esto para dar resultados sobre la compra de boletos
// const inputIncoming = $("#ingresantes");
// const inputApplicants = $("#aplicantes");
//---------------------------------------------------------------
function User(id, nombre, apellido, email, edad, dni, telefono) {
this.id = id;
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.edad = edad;
this.id = id;
this.dni = dni;
this.telefono = telefono;
}
let listUser = [];
if (getUserFromStorage("users")) {
listUser = getUserFromStorage("users");
}
function saveToStorage(key, user) {
listUser.push(user);
localStorage.setItem(key, JSON.stringify(listUser));
}
function getUserFromStorage(key) {
if (localStorage.getItem(key)) {
return JSON.parse(localStorage.getItem(key));
}
}
function drawTable() {
for (const user of getUserFromStorage("users")) {
tableHead.show();
tableBody.append(`<tr>
<td>${user.id}</td>
<td>${user.nombre}</td>
<td>${user.apellido}</td>
<td>${user.email}</td>
<td>${user.edad}</td>
<td>${user.dni}</td>
<td>${user.telefono}</td>
</tr>`);
}
}
form.submit(function (event) {
event.preventDefault();
const id = inputId.val();
const nombre = inputName.val();
const apellido = inputSurname.val();
const email = inputEmail.val();
const edad = inputAge.val();
const dni = inputDni.val();
const telefono = inputPhone.val();
const user = new User(id, nombre, apellido, email, edad, dni, telefono);
saveToStorage("users", user); //Guardo user en storage
tableBody.empty(); //Borro el tbody de la tabla
drawTable(); //Dibujo tabla actualizada
//Pongo todos los input en blanco tras agregar a la tabla y storage.
for (const input of allInputs) {
input.value = "";
}
});
//Al presionar botón se borra Storage y se recarga la página para borrar tabla
btnDeleteStorage.click(() => {
localStorage.clear();
location.reload();
});
});
$(document).ready(function () {
const tableBody = $("#tableBody");
const tableHead = $("#tableHead");
if (getUserFromStorage("users")) {
drawTable();
} else {
tableHead.hide();
}
console.log($("#nombre").val());
console.log($("#apellido").val());
console.log($("#email").val());
console.log($("#edad").val());
console.log($("#id").val());
console.log($("#dni").val());
console.log($("#telefono").val());
console.log($("#ingresantes").val());
console.log($("#aplicantes").val());
const form = $("#formulario");
const inputName = $("#nombre");
const inputSurname = $("#apellido");
const inputEmail = $("#email");
const inputAge = $("#edad");
const inputId = $("#id");
const inputDni = $("#dni");
const inputPhone = $("#telefono");
const allInputs = document.querySelectorAll("input");
// pronto usare esto para dar resultados sobre la compra de boletos
// const inputIncoming = $("#ingresantes");
// const inputApplicants = $("#aplicantes");
//---------------------------------------------------------------
function User(id, nombre, apellido, email, edad, dni, telefono) {
this.id = id;
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.edad = edad;
this.id = id;
this.dni = dni;
this.telefono = telefono;
}
let listUser = [];
if (getUserFromStorage("users")) {
listUser = getUserFromStorage("users");
}
function saveToStorage(key, user) {
listUser.push(user);
localStorage.setItem(key, JSON.stringify(listUser));
}
function getUserFromStorage(key) {
if (localStorage.getItem(key)) {
return JSON.parse(localStorage.getItem(key));
}
}
function drawTable() {
for (const user of getUserFromStorage("users")) {
tableHead.show();
tableBody.append(`<tr>
<td>${user.id}</td>
<td>${user.nombre}</td>
<td>${user.apellido}</td>
<td>${user.email}</td>
<td>${user.edad}</td>
<td>${user.dni}</td>
<td>${user.telefono}</td>
</tr>`);
}
}
form.submit(function (event) {
event.preventDefault();
const id = inputId.val();
const nombre = inputName.val();
const apellido = inputSurname.val();
const email = inputEmail.val();
const edad = inputAge.val();
const dni = inputDni.val();
const telefono = inputPhone.val();
const user = new User(id, nombre, apellido, email, edad, dni, telefono);
saveToStorage("users", user); //Guardo user en storage
tableBody.empty(); //Borro el tbody de la tabla
drawTable(); //Dibujo tabla actualizada
//Pongo todos los input en blanco tras agregar a la tabla y storage.
for (const input of allInputs) {
input.value = "";
}
});
});
$(document).ready(function () {
const tableBody = $("#tableBody");
const tableHead = $("#tableHead");
if (getUserFromStorage("users")) {
drawTable();
} else {
tableHead.hide();
}
console.log($("#nombre").val());
console.log($("#apellido").val());
console.log($("#email").val());
console.log($("#edad").val());
console.log($("#id").val());
console.log($("#dni").val());
console.log($("#telefono").val());
console.log($("#ingresantes").val());
console.log($("#aplicantes").val());
const form = $("#formulario");
const inputName = $("#nombre");
const inputSurname = $("#apellido");
const inputEmail = $("#email");
const inputAge = $("#edad");
const inputId = $("#id");
const inputDni = $("#dni");
const inputPhone = $("#telefono");
allInputs = document.querySelectorAll("input");
// pronto usare esto para dar resultados sobre la compra de boletos
// const inputIncoming = $("#ingresantes");
// const inputApplicants = $("#aplicantes");
//---------------------------------------------------------------
function User(id, nombre, apellido, email, edad, dni, telefono) {
this.id = id;
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.edad = edad;
this.id = id;
this.dni = dni;
this.telefono = telefono;
}
let listUser = [];
if (getUserFromStorage("users")) {
listUser = getUserFromStorage("users");
}
function saveToStorage(key, user) {
listUser.push(user);
localStorage.setItem(key, JSON.stringify(listUser));
}
function getUserFromStorage(key) {
if (localStorage.getItem(key)) {
return JSON.parse(localStorage.getItem(key));
}
}
function drawTable() {
for (const user of getUserFromStorage("users")) {
tableHead.show();
tableBody.append(`<tr>
<td>${user.id}</td>
<td>${user.nombre}</td>
<td>${user.apellido}</td>
<td>${user.email}</td>
<td>${user.edad}</td>
<td>${user.dni}</td>
<td>${user.telefono}</td>
</tr>`);
}
}
form.submit(function (event) {
event.preventDefault();
const id = inputId.val();
const nombre = inputName.val();
const apellido = inputSurname.val();
const email = inputEmail.val();
const edad = inputAge.val();
const dni = inputDni.val();
const telefono = inputPhone.val();
const user = new User(id, nombre, apellido, email, edad, dni, telefono);
saveToStorage("users", user); //Guardo user en storage
tableBody.empty(); //Borro el tbody de la tabla
drawTable(); //Dibujo tabla actualizada
//Pongo todos los input en blanco tras agregar a la tabla y storage.
for (const input of allInputs) {
input.value = "";
}
});
});
$(document).ready(function () {
const tableBody = $("#tableBody");
const tableHead = $("#tableHead");
if (getUserFromStorage("users")) {
drawTable();
} else {
tableHead.hide();
}
console.log($("#nombre").val());
console.log($("#apellido").val());
console.log($("#email").val());
console.log($("#edad").val());
console.log($("#id").val());
console.log($("#dni").val());
console.log($("#telefono").val());
console.log($("#ingresantes").val());
console.log($("#aplicantes").val());
const form = $("#formulario");
const inputName = $("#nombre");
const inputSurname = $("#apellido");
const inputEmail = $("#email");
const inputAge = $("#edad");
const inputId = $("#id");
const inputDni = $("#dni");
const inputPhone = $("#telefono");
const allInputs = document.querySelectorAll("input");
// pronto usare esto para dar resultados sobre la compra de boletos
// const inputIncoming = $("#ingresantes");
// const inputApplicants = $("#aplicantes");
//---------------------------------------------------------------
function User(id, nombre, apellido, email, edad, dni, telefono) {
this.id = id;
this.nombre = nombre;
this.apellido = apellido;
this.email = email;
this.edad = edad;
this.id = id;
this.dni = dni;
this.telefono = telefono;
}
let listUser = [];
if (getUserFromStorage("users")) {
listUser = getUserFromStorage("users");
}
function saveToStorage(key, user) {
listUser.push(user);
localStorage.setItem(key, JSON.stringify(listUser));
}
function getUserFromStorage(key) {
if (localStorage.getItem(key)) {
return JSON.parse(localStorage.getItem(key));
}
}
function drawTable() {
for (const user of getUserFromStorage("users")) {
tableHead.show();
tableBody.append(`<tr>
<td>${user.id}</td>
<td>${user.nombre}</td>
<td>${user.apellido}</td>
<td>${user.email}</td>
<td>${user.edad}</td>
<td>${user.dni}</td>
<td>${user.telefono}</td>
</tr>`);
}
}
form.submit(function (event) {
event.preventDefault();
const id = inputId.val();
const nombre = inputName.val();
const apellido = inputSurname.val();
const email = inputEmail.val();
const edad = inputAge.val();
const dni = inputDni.val();
const telefono = inputPhone.val();
const user = new User(id, nombre, apellido, email, edad, dni, telefono);
saveToStorage("users", user); //Guardo user en storage
tableBody.empty(); //Borro el tbody de la tabla
drawTable(); //Dibujo tabla actualizada
//Pongo todos los input en blanco tras agregar a la tabla y storage.
for (const input of allInputs) {
input.value = "";
}
});
});
Loading
Loading
default