primera versión funcional crud javascript

configuroweb · Nov 21, 2020 · d835265 · d835265
commit d835265
Show file tree

Hide file tree

Showing 4 changed files with 330 additions and 0 deletions.
diff --git a/index-w3s.css b/index-w3s.css
@@ -0,0 +1,14 @@
+button {
+  color: aquamarine;
+  background-color: brown;
+}
+
+.w3-container {
+  width : 100vw;
+  /* border : 1px solid blue; */
+}
+
+.w3-input {
+  width : 100%;
+  margin : 0.5rem;
+}
diff --git a/index-w3s.js b/index-w3s.js
@@ -0,0 +1,52 @@
+let el, i;
+let data = [
+  { firstname: "Mauricio", lastname: "Sevilla" },
+  { firstname: "Jorge", lastname: "Barón" },
+  { firstname: "Andrés", lastname: "Espinoza" },
+  { firstname: "Rafael", lastname: "Pérez" }
+];
+let panel = document.querySelector("#panel");
+
+
+function clearForm() {
+  document.querySelector("#fname").value = "";
+  document.querySelector("#lname").value = "";
+}
+
+function renderItem() {
+
+  panel.textContent = "";
+  data.forEach(x => {
+    el = document.createElement("option");
+    el.innerText = `${x.firstname} ${x.lastname}`;
+    panel.append(el);
+  });
+}
+
+function create() {
+  let fn = document.querySelector("#fname").value;
+  let ln = document.querySelector("#lname").value;
+  data = [...data, { firstname: fn, lastname: ln }];
+  clearForm();
+  console.log(data)
+  renderItem();
+}
+
+function panelClick() {
+  i = panel.selectedIndex;
+  document.querySelector("#fname").value = data[i].firstname;
+  document.querySelector("#lname").value = data[i].lastname;
+}
+
+function update() {
+  data[i].firstname = document.querySelector("#fname").value;
+  data[i].lastname = document.querySelector("#lname").value;
+  renderItem();
+}
+
+function deleteItem() {
+  data.splice(i, 1);
+  renderItem();
+}
+
+ renderItem();
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="es">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./w3.css">
+    <link rel="stylesheet" href="./index-w3s.css">
+    <title>CRUD Javascript ConfiguroWeb</title>
+  </head>
+
+  <body>
+    <div class="w3-container w3-blue">
+      <h2>Formulario de Entrada</h2>
+    </div>
+  <form class="w3-container" onsubmit="event.preventDefault()">
+    <input class="w3-input" id="fname" name="fname" placeholder="Nombre" />
+    <input class="w3-input" id="lname" name="lname" placeholder="Apellido" />
+    <button class="w3-button w3-round w3-yellow" onclick="clearForm()">Limpiar Formulario</button>
+    <br /><br />
+
+    <button class="w3-button w3-round w3-blue" onclick="create()">Crear</button>
+    <button class="w3-button w3-round w3-blue" onclick="update()">Actualizar</button>
+    <button class="w3-button w3-round w3-blue" onclick="deleteItem()">Eliminar</button>
+    <br /><br />
+    <select id="panel" size="20" onclick="panelClick()"> </select>
+  </form>
+
+    <script src="index-w3s.js">
+    </script>
+
+  </body>
+</html>