Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:1eval:tema03.c [2025/11/05 12:16] – [Arquitectura CSS] Lorenzo
+++ clase:daw:diw:1eval:tema03.c [2025/11/10 11:52] (actual) – [Ejercicios] Lorenzo
@@ Línea 218: / Línea 218: @@
     * [[https://philipwalton.com/articles/css-architecture/|CSS Architecture]]
     * [[https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/|ITCSS: Scalable and Maintainable CSS Architecture]]
+===== Ejercicios =====
+==== Ejercicio 1.A ====
+Crea un componente que tenga lo siguiente:
+{{:clase:daw:diw:1eval:articulo.png|}}
+La imagen es esta: [[https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:1eval:monitor.webp|monitor.webp]]
+Los caracteres de la estrella y el camión son:
+  * ⭐
+  * 🚚
+<sxh ts>
+<c-articulo
+  nombre="Monitor Acer Nitro KG241YX3BIP 23.8' FHD 200Hz VA FreeSync Premium HDR10"
+urlImagen="https://logongas.es/lib/exe/fetch.php?cache=&media=clase:daw:diw:1eval:monitor.webp"
+[precioActual]="89.99"
+[precioAnterior]="99.99"
+[valoracion]="4.6"
+[numeroOpiniones]="1472"
+[fechaEntrega]="fechaEntrega"
+[precioEnvio]="0.00"
+[otrosEnvios]="true"
+/>
+</sxh>
+<sxh ts;title:c-articulo.ts>
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+@Component({
+  selector: 'c-articulo',
+  imports: [CommonModule],
+  templateUrl: './c-articulo.html',
+  styleUrl: './c-articulo.scss'
+})
+export class CArticulo  {
+  @Input() nombre:string="";
+  @Input() urlImagen:string="";
+  @Input() precioActual:number=0;
+  @Input() precioAnterior:number=0;
+  @Input() valoracion:number=0;
+  @Input() numeroOpiniones:number=0;
+  @Input() fechaEntrega:Date=new Date();
+  @Input() precioEnvio:number=0;
+  @Input() otrosEnvios:boolean=false;
+}
+</sxh>
+<sxh ts;title:c-articulo.html>
+<div class="c-articulo">
+  <img class="c-articulo__image" src="{{urlImagen}}" >
+  <h3 class="c-articulo__title">{{nombre}}</h3>
+  <p class="g--margin-vertical-2">
+    <span class="c-articulo__precio c-articulo__precio--actual">{{precioActual | currency}}</span>
+    &nbsp;
+    <span class="c-articulo__precio c-articulo__precio--anterior">{{precioAnterior | currency}}</span>
+  </p>
+  <p>
+    <span class="c-articulo__valoracion">{{valoracion}}/5</span>&nbsp;
+    <span class="g--font-size-4">⭐</span>&nbsp;
+    <span class="c-articulo__opiniones">{{numeroOpiniones}} opiniones</span>
+  </p>
+  <p class="">
+    🚚&nbsp;
+    <span class="c-articulo__entrega c-articulo__entrega--positivo">{{precioEnvio | currency}}</span>&nbsp;
+    <span class="c-articulo__entrega c-articulo__entrega--negativo">{{fechaEntrega| date:'shortDate'}}</span>
+  </p>
+  <p class="c-articulo__otras-opciones g--margin-top-2">
+    Otras opciones disponibles
+  </p>
+</div>
+</sxh>
+<sxh sass;title:c-articulo.scss>
+.c-articulo {
+  font-family: "Open Sans", Arial, sans-serif;
+  width: 197px;
+  color: #333;
+  &__title {
+    font-size: 14px;
+    font-weight: 500;
+    color: #333;
+  }
+  &__precio {
+    &--actual {
+      font-size: 17px;
+      font-weight: 700;
+      color: #bf0019;
+    }
+    &--anterior {
+      font-size: 14px;
+      color: #6e6e6e;
+      text-decoration: line-through;
+    }
+    &-envio {
+      color: #ff7a00;
+      font-weight: 600;
+    }
+  }
+  &__valoracion {
+    font-size: 13px;
+    font-weight: 600;
+    color: #333;
+  }
+  &__opiniones {
+    color: #333333;
+    font-size: 13px;
+  }
+  &__entrega {
+    font-size: 13px;
+    font-weight: 700;
+    &--positivo {
+      color: #008000;
+    }
+    &--negativo {
+      color: #333333;
+    }
+  }
+  &__otras-opciones {
+    font-size: 13px;
+    color: #777;
+    font-weight: 600;
+  }
+}
+</sxh>
+==== Ejercicio 1.B ====
+Modifica ahora el componente para que
+  * Si los gastos de envío
+    * Son 0€ se muestre "Entrega gratis." de color verde
+    * Sino que no es muestre nada.
+  * Si la fecha de entrega es
+    * Mañana que muestre  "Recíbelo mañana" en color verde
+    * Sino mostrara "Recíbelo a partir del jueves 13 de noviembre" en color negro. (Obviamente hay que poner la fecha de entrega en letras)
+  * Si no hay precio anterior que no lo muestre
+  * Si no hay otras opciones disponibles que no muestre el texto
+{{:clase:daw:diw:1eval:articulo2.png|}}