Dia 33

2024-01-23 13:52:08 +01:00
parent ad40171fb4
commit b83034e0ab
12 changed files with 408 additions and 0 deletions
--- a/4/ejercicio04_DOM.html
+++ b/4/ejercicio04_DOM.html
@@ -0,0 +1,49 @@
+<!Doctype html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Lista de la compra JAVASCRIPT</title>
+		
+		<script>
+			
+			function eliminar(elemento) {
+				// Utilizar remove
+				elemento.remove();
+			}
+			
+			function anadir() {
+				let listaCompra = document.getElementById("listaCompra");
+				let nuevoItem = document.getElementById("anadir").value;
+				
+				if (nuevoItem === "") {
+					alert("No has añadido nada");
+					} else {
+					let item = document.createElement("li");
+					item.textContent = nuevoItem;
+					item.addEventListener("dblclick", function() {
+						eliminar(item);
+					});
+					listaCompra.appendChild(item);
+					document.getElementById("anadir").value = "";
+				}
+			}	
+		</script>
+		
+	</head>
+	<body>
+		<div id="container">
+			
+            <label>Mi lista de la compra:</label>
+            <input type="text" name="campo" id="anadir">
+            <input type="button" value="Añadir a la lista" onclick="anadir()">
+			
+			<ul id="listaCompra"></ul>
+			
+			<p>Nota: Puedes eliminar elementos de la lista haciendo doble click sobre ellos</p>
+		</div>
+		
+		
+		<br>
+		
+	</body>
+</html>
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="./js/main.js" defer></script>
+    <title>Ejercicio DOM 4</title>
+</head>
+<body>
+    <div>
+        <label for="lista">Mi lista de la compra: </label> <input type="text" name="lista" id="txtlista">
+        <button onclick="addElement()">Añadir a la lista</button>
+    </div>
+    <div>
+        <ul id="listUl"></ul>
+    </div>
+</body>
+</html>
--- a/Practicas/Practicas
+++ b/Practicas/Practicas
@@ -0,0 +1,16 @@
+
+function addElement(){
+    let txtElemento = document.getElementById('txtlista').value;
+    add(txtElemento);
+}
+function add(elemento){
+    let listUl = document.getElementById('listUl')
+    let listItem =document.createElement('li');
+    listItem.textContent=elemento;
+    listItem.addEventListener('dblclick',()=>{delElement(listItem)});
+    listUl.appendChild(listItem);
+}
+
+function delElement(elemento){
+    elemento.remove();
+}