L6

yamoreno2021 · Feb 29, 2024 · 00a0bd4 · 00a0bd4
1 parent 7e10718
commit 00a0bd4
Show file tree

Hide file tree

Showing 39 changed files with 1,013 additions and 1 deletion.
diff --git a/P1/CV Template Responsive 2024-20240226/2c-template.css b/P1/CV Template Responsive 2024-20240226/2c-template.css
@@ -0,0 +1,65 @@
+/* https://www.w3schools.com/howto/howto_css_two_columns.asp */
+/* https://developer.mozilla.org/es/docs/Web/CSS/box-sizing */
+/* Así definimos el comportamiento de caja para todos los elementos */
+* {
+    box-sizing: border-box;
+  }
+
+/* Crear columnas de ancho diferente que se colocan una a continuación de la otra */
+.columna {
+float: left;
+padding: 10px;
+min-height: 500px;
+}
+
+.izquierda {
+width: 25%;
+}
+
+.derecha {
+width: 75%;
+}
+
+/* Clear floats despues de las columnas para eliminar la superposición */
+.filla:after {
+content: "";
+display: table;
+clear: both;
+}
+
+#c1 {
+    background-color:#aaa;
+}
+
+#c2 {
+    background-color:#bbb;
+}
+
+/* estilos para imágenes https://www.w3schools.com/css/css3_images.asp */
+/* posicionamiento de imágenes https://www.w3schools.com/css/css_positioning.asp */
+
+img {
+    width: 100%;
+    height: auto;
+}
+
+.iresponsive {
+    padding: 0 6px;
+    float: left;
+    width: 50%;
+  }
+
+/* Responsive layout - cuando el ancho de pantalla es menor a 600px, muestra las columnas apiladas. */
+/* Así conseguimos que el contenido se vea bien en dispositvos móviles */
+
+@media screen and (max-width: 600px) {
+    .columna {
+      width: 100%;
+    }
+
+    .iresponsive {
+        width: 100%;
+    }
+}
+
+/* Más sobre diseño web responsive https://www.w3schools.com/css/css_rwd_intro.asp */
diff --git a/P1/CV Template Responsive 2024-20240226/css.png b/P1/CV Template Responsive 2024-20240226/css.png
diff --git a/P1/CV Template Responsive 2024-20240226/favicon.ico b/P1/CV Template Responsive 2024-20240226/favicon.ico
diff --git a/P1/CV Template Responsive 2024-20240226/html5.png b/P1/CV Template Responsive 2024-20240226/html5.png
diff --git a/P1/CV Template Responsive 2024-20240226/index.html b/P1/CV Template Responsive 2024-20240226/index.html
@@ -0,0 +1,51 @@
+<!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>CV Dos columnas</title>
+
+   <!-- Hoja de estilo -->
+   <link rel="stylesheet" href="2c-template.css">    
+
+</head>
+<body>
+
+    <h2>Diseño de plantilla a dos columnas</h2>
+
+    <div class="fila">
+      <div id="c1" class="columna izquierda">
+        <h2>Columna Izquierda</h2>
+
+        <div class="iresponsive">
+            <img id="imghtml" src="html5.png" alt="html5" width="200" height="200">
+        </div>
+
+        <div class="iresponsive">
+            <img id="imgcss" src="css.png" alt="css" width="200" height="200">
+        </div>
+
+        <p>Senserit mediocrem vis ex, et dicunt deleniti gubergren mei. Mel id clita mollis repudiare. 
+            Sed ad nostro delicatissimi, postea pertinax est an. Adhuc sensibus percipitur sed te, 
+            eirmod tritani debitis nec ea. Cu vis quis gubergren.
+        </p>
+        <ul>
+            <li>Contacto</li>
+            <li>Formación</li>
+            <li>Experiencia</li>
+            <li>Acerca de</li>
+        </ul>
+      </div>
+      <div id="c2" class="columna derecha">
+        <h2>Columna Derecha</h2>
+        <img src="web-tech.png" alt="Tecnologías web">
+        <p>Senserit mediocrem vis ex, et dicunt deleniti gubergren mei. Mel id clita mollis repudiare. 
+            Sed ad nostro delicatissimi, postea pertinax est an. Adhuc sensibus percipitur sed te, 
+            eirmod tritani debitis nec ea. Cu vis quis gubergren.
+        </p>
+      </div>
+    </div>
+
+</body>
+</html>
diff --git a/P1/CV Template Responsive 2024-20240226/web-tech.png b/P1/CV Template Responsive 2024-20240226/web-tech.png
diff --git a/P2/L6/calc-02-target.html b/P2/L6/calc-02-target.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <script src="calc0-02-target.js" defer></script>
+    <title>Calculadora 0.2</title>
+</head>
+<body>
+    <p id="display">0</p>
+    <button type="button" id="boton1" value="1">1</button>
+    <button type="button" id="boton2" value="2">2</button>
+    <button type="button" id="suma" value="+">+</button>
+    <br>
+    <br>
+    <button type="button" id="clear">AC</button>
+    <button type="button" id="igual">=</button>
+</body>
+</html>
diff --git a/P2/L6/calc-02-target.js b/P2/L6/calc-02-target.js
@@ -0,0 +1,40 @@
+console.log("Ejecutando JS...");
+
+
+//-- Elementos de la interfaz de la calculadora
+display = document.getElementById("display")
+boton1 = document.getElementById("boton1")
+boton2 = document.getElementById("boton2")
+suma = document.getElementById("suma")
+igual = document.getElementById("igual")
+clear = document.getElementById("clear")
+
+//-- Funciones de retrollamada de los botones
+//-- Cada vez que se aprieta un botón se actúa
+//-- sobre la cadena: añadiendo dígito, operador +
+//-- poniendo a cero o evaluando la expresión
+
+// -- Digito 1
+boton1.onclick = (ev) => {
+    display.innerHTML += ev.target.value;
+}
+
+//-- Digito 2
+boton2.onclick = (ev) => {
+    display.innerHTML += ev.target.value;
+}
+
+//-- Simbolo de sumar
+suma.onclick = (ev) => {
+    display.innerHTML += ev.target.value;
+}
+
+//-- Evaluar la expresión
+igual.onclick = () => {
+  display.innerHTML = eval(display.innerHTML);
+}
+
+//-- Poner a cero la expresión
+clear.onclick = () => {
+  display.innerHTML = "0";
+}
diff --git a/P2/L6/calc-03-sameClass.html b/P2/L6/calc-03-sameClass.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <script src="calc-03-sameClass.js" defer></script>
+    <title>Calculadora 0.3</title>
+</head>
+<body>
+    <p id="display"></p>
+    <button type="button" id="boton1" value="1" class="digito">1</button>
+    <button type="button" id="boton2" value="2" class="digito">2</button>
+    <button type="button" id="boton1" value="3" class="digito">3</button>
+    <button type="button" id="boton2" value="4" class="digito">4</button>
+    <button type="button" id="boton1" value="5" class="digito">5</button>
+    <button type="button" id="boton2" value="6" class="digito">6</button>
+    <button type="button" id="boton1" value="7" class="digito">7</button>
+    <button type="button" id="boton2" value="8" class="digito">8</button>
+    <button type="button" id="boton1" value="9" class="digito">9</button>
+    <button type="button" id="suma" value="+">+</button>
+    <br>
+    <br>
+    <button type="button" id="clear">AC</button>
+    <button type="button" id="igual">=</button>
+</body>
+</html>
diff --git a/P2/L6/calc-03-sameClass.js b/P2/L6/calc-03-sameClass.js
@@ -0,0 +1,39 @@
+console.log("Ejecutando JS...");
+
+display = document.getElementById("display")
+suma = document.getElementById("suma")
+igual = document.getElementById("igual")
+clear = document.getElementById("clear")
+
+//-- Obtener una colección con todos los elementos
+//-- de la clase dígito
+digitos = document.getElementsByClassName("digito")
+
+//-- Establecer la misma función de retrollamada
+//-- para todos los botones de tipo dígito
+for (let boton of digitos) {
+
+    //-- Se ejecuta cuando se pulsa un boton
+    //-- que es un dígito
+    boton.onclick = (ev) => {
+        display.innerHTML += ev.target.value;
+        console.log("DIGITO!!!");
+    }
+}
+
+//-------- Resto de funciones de retrollamada
+
+//-- Insertar simbolo de sumar
+suma.onclick = (ev) => {
+  display.innerHTML += ev.target.value;
+}
+
+//-- Evaluar la expresión
+igual.onclick = () => {
+  display.innerHTML = eval(display.innerHTML);
+}
+
+//-- Poner a cero la expresión
+clear.onclick = () => {
+  display.innerHTML = "";
+}
diff --git a/P2/L6/calc-04-Estados.html b/P2/L6/calc-04-Estados.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<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">
+    <script src="calc-04-Estados.js" defer></script>
+    <title>Calculadora 0.4</title>
+</head>
+<body>
+    <p id="display">0</p>
+    <button type="button" id="boton1" value="1" class="digito">1</button>
+    <button type="button" id="boton2" value="2" class="digito">2</button>
+    <button type="button" id="boton1" value="3" class="digito">3</button>
+    <button type="button" id="boton2" value="4" class="digito">4</button>
+    <button type="button" id="boton1" value="5" class="digito">5</button>
+    <button type="button" id="boton2" value="6" class="digito">6</button>
+    <button type="button" id="boton1" value="7" class="digito">7</button>
+    <button type="button" id="boton2" value="8" class="digito">8</button>
+    <button type="button" id="boton1" value="9" class="digito">9</button>
+    <button type="button" id="suma" value="+">+</button>
+    <br>
+    <br>
+    <button type="button" id="clear">AC</button>
+    <button type="button" id="igual">=</button>
+</body>
+</html>
diff --git a/P2/L6/calc-04-Estados.js b/P2/L6/calc-04-Estados.js
@@ -0,0 +1,98 @@
+console.log("Ejecutando JS...");
+
+display = document.getElementById("display")
+suma = document.getElementById("suma")
+igual = document.getElementById("igual")
+clear = document.getElementById("clear")
+
+//-- Estados de la calculadora
+const ESTADO = {
+    INIT: 0,
+    OP1: 1,
+    OPERATION: 2,
+    OP2: 3
+}
+
+ //-- Variable de estado de la calculadora
+ //-- Al comenzar estamos en el estado inicial
+ let estado = ESTADO.INIT;   
+
+//-- Función de retrollamada de los dígitos
+function digito(ev)
+{
+    //-- Se ha recibido un dígito
+    //-- Según en qué estado se encuentre la calculadora
+    //-- se hará una cosa u otra
+
+    //-- Si es el primer dígito, no lo añadimos,
+    //-- sino que lo mostramos directamente en el display
+    if (estado == ESTADO.INIT) {
+
+        display.innerHTML = ev.target.value;
+
+        //-- Pasar al siguiente estado
+        estado = ESTADO.OP1;
+
+    } else {
+
+        //--En cualquier otro estado lo añadimos
+        display.innerHTML += ev.target.value;
+
+        //-- Y nos quedamos en el mismo estado
+        //-- Ojo! Este ejemplo sólo implementa el primer
+        //-- estado del diagrama. Habría que tener en 
+        //-- cuenta el resto... lo debes hacer en tu práctica
+    } 
+
+}
+
+
+//-- Obtener una colección con todos los elementos
+//-- de la clase dígito
+digitos = document.getElementsByClassName("digito")
+
+//-- Establecer la misma función de retrollamada
+//-- para todos los botones de tipo dígito
+for (let boton of digitos) {
+
+    //-- Se ejecuta cuando se pulsa un botón
+    //-- que es un dígito. Para que el código sea 
+    //-- mas legible la función de retrollamada se
+    //-- escribe como una función normal (digito)
+    boton.onclick = digito;
+}
+
+//-------- Resto de funciones de retrollamada
+
+//-- Operación de sumar
+suma.onclick = (ev) => {
+
+    //-- Insertar simbolo de sumar
+    display.innerHTML += ev.target.value;
+
+    //-- ¡Ojo! Aquí se inserta el + siempre!
+    //-- Para que la calculadora funcione bien
+    //-- sólo se debe permitir insertar el operador
+    //-- en el estado OP1, y debe cambiar el estado
+    //-- a OPERATION (según el diagrama de estados)
+
+}
+
+//-- Evaluar la expresión
+igual.onclick = () => {
+
+    //-- Calcular la expresión y añadirla al display
+    display.innerHTML = eval(display.innerHTML);
+
+    //-- ¡Ojo! Aquí se hace siempre!
+    //-- Sólo se debe permitir que eso se haga
+    //-- si se está en el estado final (OP2)
+
+}
+
+//-- Poner a cero la expresión
+//-- Y volver al estado inicial
+clear.onclick = () => {
+  display.innerHTML = "0";
+  estado = ESTADO.INIT;
+}