Fictizia · Pepovkp · Feb 24, 2020 · Feb 25, 2020 · Feb 26, 2020 · Feb 26, 2020
diff --git a/Kiril/Clase13/clase13.js b/Kiril/Clase13/clase13.js
@@ -0,0 +1,99 @@
+console.log("created");
+
+
+
+/* Selecciono el elemento de cada input y lo almaceno en una variable */
+let nombre = document.getElementById("field1");
+let raza = document.getElementById("field2");
+let color = document.getElementById("field3");
+let edad = document.getElementById("field4");
+let observaciones = document.getElementById("field5");
+
+const descmascota = document.getElementById("mascota");
+const titulomascota = document.getElementById("resumen_mascota");
+
+//console.log (nombre.value);
+
+
+
+
+function valores(event) {
+    /* event, significa que cuando hacemos click en el html llamamos a este event, y 
+    le digo preventDefault que lo que hace es quitar el comportamiento del submit 
+    por defecto (actualiar y recoger los datos) */
+    console.log(event);
+    /* Muestro el evento entero */
+    event.preventDefault();
+    /* Muestro los campos que quiero solo  */
+    console.log(nombre.value);
+    console.log(raza.value);
+    console.log(color.value);
+    console.log(edad.value);
+    console.log(observaciones.value);
+    /* Creo un objeto con los datos que capturo del formulario.  */
+    let mascota = {
+        nombre: nombre.value,
+        raza: raza.value,
+        color: color.value,
+        edad: edad.value,
+        observaciones: observaciones.value,
+        /* mostrar : function(){
+            alert("El nombre de tu mascota es: " + this.mascota[0]);
+        } */
+
+    };
+    //descmascota.innerText = mascota.nombre;
+    /* Pinto el objeto entero */
+    console.log(mascota);
+    /* Pinto solo la edad */
+    console.log(mascota.edad);
+
+    /* Llamo la funcion de insertar que con ellas creo una lista desordenada en el HTML y voy 
+    insertando los campos que quiero */
+
+    titulodatos();
+    insertar(nombre.value);
+    insertar(raza.value);
+    insertar(color.value);
+    insertar(edad.value);
+    insertar(observaciones.value);
+
+
+}
+
+
+
+
+/* -------------------------------Funciones------------------------------------------------------ */
+function titulodatos() {
+    var node = document.createElement("h2");
+    var textnode = document.createTextNode("Los datos de la mascota son");
+    node.appendChild(textnode);
+    document.getElementById("resumen_mascota").appendChild(node);
+
+};
+
+/* La funcion insertar para crear la lista con los datos del formulario, 
+la tengo que pasar el valor que quiero que pinte */
+function insertar(item) {
+    //descmascota.innerHTML="";
+    var node = document.createElement("LI"); // Create a <li> node
+    var textnode = document.createTextNode(item); // Create a text node
+    node.appendChild(textnode); // Append the text to <li>
+    document.getElementById("mascota").appendChild(node);
+    /* 3.- Asignamos las clases, para dar formato h2*/
+    titulomascota.setAttribute("class", "result-list");
+    cambiarFondo();
+
+
+};
+
+function cambiarFondo() {
+    // color = 'rgb(255,0,255'
+    var color = 'rgb(' + Math.floor((Math.random() * 255)) + ',';
+    color += Math.floor((Math.random() * 255)) + ',';
+    color += Math.floor((Math.random() * 255)) + ')';
+    resumen_mascota.style.backgroundColor = color;
+
+}
+
diff --git a/Kiril/Clase13/index.html b/Kiril/Clase13/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <link rel="stylesheet" href="styles.css">
+    <link href="https://fonts.googleapis.com/css?family=Pacifico&display=swap" rel="stylesheet">
+    <title>Document</title>
+</head>
+
+<body>
+    <section class="wrapper">
+        <form action="" class="form">
+            <fieldset class="formulario">
+                <legend class="lprincipa">Datos Mascota</legend>
+                <label class="label  " for=field1>Nombre</label>
+                <input class="inputt" id=field1 maxlength="50" autofocus size="50px" placeholder="Nombre">
+
+                <label class="label  " for=field2>Raza</label>
+                <input class="inputt" id=field2 maxlength="100" size="50px" placeholder="Raza">
+
+                <label class=" label  " for=field3>Color</label>
+                <input class="inputt" id=field3 maxlength="100" size="50px" placeholder="Color">
+
+                <label class="label  " for=field4>Edad</label>
+                <input class="inputt" id=field4 maxlength="200" size="50px" placeholder="Edad">
+
+                <label class="labelobserva" for=field5>Observaciones</label>
+                <input type=text class="inputobser" id=field5 maxlength="200" size="100px" placeholder="Observaciones">
+
+
+            </fieldset>
+            <input id="enviar" type="submit" onclick="valores(event)" value="Enviar" class="enviar">
+            <input type=reset value=Restablecer class="reset">
+        </form>
+
+
+    </section>
+
+    <section id="resumen_mascota">
+
+
+        <ul id="mascota">
+        </ul>
+    </section>
+
+    <script type="text/javascript" src="clase13.js"></script>
+
+</body>
+
+</html>
diff --git a/Kiril/Clase13/recursos.js b/Kiril/Clase13/recursos.js
@@ -0,0 +1,81 @@
+
+/* lip/listap ==>> Hace referente a la lista pendiente */
+/* lit/listat ==>> Hace referente a la lista terminados */
+
+
+listap.addEventListener("click", evento => {
+    /* Mostramos lo que capturamos */
+    console.log (evento.target);
+    console.log (evento.currentTarget);
+    /* Insertamos en el array terminados el elemento, pero solo seleccionamos el innerText que es el texto*/
+    /* Con el evento target vemos que nos trae el elemento, y vemos que solo nos interesa el texto del medio */
+    terminado.push(evento.target.innerText);
+    /* Determinamos la posicion en la que tenemos que eliminar el elemento del array (proceso) */
+    posicion = proceso.indexOf(evento.target.innerText);
+    /* Eliminamos el elemento del del array (proceso)*/
+    proceso.splice(posicion, 1);
+    refrescarlistas();
+
+});
+
+listat.addEventListener("click", evento => {
+    console.log (evento.target);
+    /* Insertamos en el array procesos el elemento, pero solo seleccionamos el innerText que es el texto*/
+    /* Con el evento target vemos que nos trae el elemento, y vemos que solo nos interesa el texto del medio */
+    proceso.push(evento.target.innerText);
+    /* Determinamos la posicion del array posicion */
+    posicion = terminado.indexOf(evento.target.innerText);
+    /* Eliminamos el elemento del array (terminado) con la posicion que hemos sacado */
+    terminado.splice(posicion, 1);
+    refrescarlistas();
+
+});
+
+refrescarlistas();
+
+
+
+/* Hacemos una funcion para poder llamarla y poder refrescar las listas las veces que quiera */
+function refrescarlistas(){ 
+    /* Aqui tenemos que vaciar la lista, porque si no cada vez que entremos  se nos acumularia lo 
+    que tenemos de la otra  vez*/
+    listap.innerHTML = "" 
+    listat.innerHTML = ""
+    /* ["banana", "naranja", kiwi].foreach(element => {
+    )} */
+proceso.forEach(item => {
+    /* 1.-Crear un li ---- let li = document.createelement("li")  */
+    let lip = document.createElement("li");
+    /* 2. Añadir texto ---- li.innerHTML = element */
+    lip.innerHTML = item;
+    /* 3.- Asignamos las clases, para dar formato al ul y li*/
+    listap.setAttribute("class", "result-list");
+    lip.setAttribute("class", "result-list-itemP");
+    /* 4.- Añadir li al ul ---- ul.uppendChild(li) */
+    listap.appendChild(lip);
+
+});
+
+
+terminado.forEach(item => {
+    /* 1.-Crear un li ---- let li = document.createelement("li")  */
+    let lit = document.createElement("li");
+    /* 2. Añadir texto ---- li.innerHTML = element */
+    lit.innerHTML = item;
+    /* 3.- Asignamos las clases, para dar formato al ul y li*/
+    listat.setAttribute("class", "result-list");
+    lit.setAttribute("class", "result-list-itemT");
+    /* 4.- Añadir li al ul ---- ul.uppendChild(li) */
+    listat.appendChild(lit);
+
+});
+}
+
+function cambiarFondo() {
+    // color = 'rgb(255,0,255'
+    var color = 'rgb(' + Math.floor((Math.random() * 255))+ ',';
+    color += Math.floor((Math.random() * 255)) + ',';
+    color += Math.floor((Math.random() * 255)) + ')';
+    document.body.style.backgroundColor= color;
+    console.info("Nuevo color:", color);
+}
diff --git a/Kiril/Clase13/styles.css b/Kiril/Clase13/styles.css
@@ -0,0 +1,89 @@
+.wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    font-size: 16px;
+    color: rgb(64, 17, 235);
+    background-color: #ccc;
+}
+
+.lprincipa {
+    font-size: 8rem;
+    position: relative;
+    font-family: 'Pacifico';
+    /* background-color:white; */
+}
+
+.inputt {
+    display: block;
+    width: 300px;
+    height: 20px;
+    /* left: 50%;
+    transform: translate(-50%); */
+    margin: 0 auto;
+}
+
+.inputobser {
+    display: block;
+    width: 300px;
+    height: 40px;
+    /* left: 50%;
+    transform: translate(-50%); */
+    margin: 0 auto;
+    overflow: scroll;
+}
+
+.form {
+    position: relative;
+    display: block;
+    /* background-color:red; */
+}
+
+fieldset {
+    display: flex;
+    position: relative;
+    flex-wrap: wrap;
+    justify-content: center;
+    font-size: xx-large;
+    text-align: center;
+    border: 5px black solid;
+}
+
+.reset {
+    display: block;
+    width: 11rem;
+    height: 3rem;
+    font-family: 'Pacifico';
+    font-size: 20px;
+    /* background: greenyellow; */
+    /* left: 50%;
+   transform: translate(-50%); */
+    top: 33em;
+    color: red;
+    border-radius: 10px;
+    margin: 10px auto 10px;
+}
+
+.enviar {
+    display: block;
+    width: 11rem;
+    height: 3rem;
+    color: blue;
+    font-family: 'Pacifico';
+    font-size: 20px;
+    /* background: greenyellow; */
+    /* left: 50%;
+   transform: translate(-50%); */
+    margin: 10px auto 10px;
+    top: 30em;
+    border-radius: 10px;
+}
+
+.result-list {
+    color: red;
+    border: 5px solid black;
+    font-size: x-large;
+}
diff --git a/Kiril/clase7/repaso.js b/Kiril/clase7/repaso.js
@@ -45,7 +45,7 @@ function seleccion() {
 var confirmacion = confirm("¿Quieres empezar el juego?");
 var opcion = 0;
 
-var verificacionRetun ()
+var verificacionRetun()
 
 
 if (confirmacion === true) {