Contenido del curso
Playground - Personaliza productos de una tienda
Osvaldo Martinez Guillen
Estudiante
willmar fernando romero marin
EstudianteOsvaldo Martinez Guillen
Estudiante
Sergio Luis Arango Montes
Estudiante
Jesús Emiliano Alonso López
Estudiante
Joan Alexander Valerio Rodríguez
EstudianteDaniel Romao
Estudiante
Rubén Hernández Hernández
Estudiante
David Ochoa
Estudiante
Pablo Perez
Estudiante
Alexis Corrales
Estudiante
Angel Javier Sanchez Tenjo
Estudiantewillmar fernando romero marin
Estudiante
Elias Rayas Gonzalez
Estudiante
Pablo Pincay Alvarez
Estudiante
Carina Payleman
Estudiante
JAIME EDUARDO DIAZ TOBON
EstudianteVictor Ortiz
Estudiante
Andrés Camilo Vélez Mejía
Estudiante
Alejandro Anaya
Estudiante
Gabriel Luna
Estudiante
Jose Carlos Machado
Estudiante
Abril Darynka Tapia Sosa
EstudianteMuy entendible, listo.
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(); this.price = price; this.description = description; } getDescription() { return this.description; } }
++WarrantyDecorator.js++
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + ' con garantía'; } }
++ShippingInsurance.js++
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + ' con seguro de envío'; } }
hola gracias por el aporte, ¿ porque no envia datos al constructor de la clase padre?
Es correcto, puedes enviar mediante super(price) y asi accedes a this.price o puedes hacerlo de la manera que lo hice, la que usted propone es la mejor manera.
Dejo por mi aporte un aporte. Creo que es mejor declarar siempre las constantes en este caso utilice un objeto para guardar los precios y cadenas del decorador, en todo lo demás se ve igual al resto de soluciones. XD
class ShippingInsuranceDecorator extends Product { SHIPPING_INSURANCE = { price: 20, description: " con seguro de envío", } constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + this.SHIPPING_INSURANCE.price; } getDescription() { return this.product.getDescription() + this.SHIPPING_INSURANCE.description; } }
class WarrantyDecorator extends Product { WARRANTY = { price: 20, description: " con garantía", } constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + this.WARRANTY.price; } getDescription() { return this.product.getDescription() + this.WARRANTY.description; } }
🛡️Escudo anti-spoilers🛡️
aquí mi código
ShippingInsurance.js
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + " con seguro de envío"; } }
WarrantyDecorator.js
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + " con garantía"; } }
exercise.js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(); this.price = price; this.description = description; } getDescription() { // Tu código aquí 👈 return this.description } }
Para aquellos que practicaron bien la clase anterior, debieron encontrar este ejercicio muy fácil :). Por cierto, muchas gracias por documentar bien el ejercicio, se pudo entender a la primera.
Mi solucion: . . . . . . . . . . exercise.js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
WarrantyDecorator.js
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + " con garantía"; } }
ShippingInsurance
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + " con seguro de envío"; } }
Mi solución 💚
Nada más una nota, tanto en ShippingInsurance como en WarrantyDecorator se nos pide heredar de Product. Sin embargo, por las descripciones solicitadas (y como se observa en el ejemplo) siento que es más prudente si se hereda directamente de BasicProduct. De esa manera se evitan errores por no tener productos sin descripción y se reduce mucho el código.
!delivery
exercise.js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price) this.description = description } getDescription() { return this.description } }
ShippingInsurance.js
import { BasicProduct } from "./exercise"; export class ShippingInsuranceDecorator extends BasicProduct { constructor(product) { super(product.price + 20, `${product.description} con seguro de envío`) } }
WarrantyDecorator.js
import { BasicProduct } from "./exercise"; export class WarrantyDecorator extends BasicProduct { constructor(product) { super(product.price + 20, `${product.description} con garantía`) } }
🛡️🛡️🛡️Escudo anti spoilers🛡️🛡️🛡️
Personaliza productos de una tienda
!Spoiler Shield
exercise.js
export class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(); this.price = price; this.description = description; } getDescription() { // Tu código aquí 👈 return this.description; } }
Warranty decorator
export class WarrantyDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.product = product; this.product.price += 20; this.product.description += " con garantia"; } getPrice() { // Tu código aquí 👈 } getDescription() { // Tu código aquí 👈 return this.product.description; } }
Shipping Insurance
export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + ' con seguro de envío'; } }
// ShippingInsurance.js export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return `${this.product.getDescription()} con seguro de envío`; } }
// WarrantyDecorator.js export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return `${this.product.getDescription()} con garantía`; } }
// exercise.js export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
ShippingInsurance.js
export class ShippingInsuranceDecorator extends Product { constructor(product) { super(product.getPrice() + 20, product.getDescription() + " con seguro de envío"); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + " con seguro de envío"; } }
WarrantyDecorator
export class WarrantyDecorator extends Product { constructor(product) { super(product.getPrice() + 20, product.getDescription() + " con garantía"); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + " con garantía"; } }
exercise.js
export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
Hola mi solución.
✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
ShippingInsurance.js
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(product); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return `${this.product.getDescription()} con seguro de envío`; } }
WarrantyDecorator.js
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(product); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return `${this.product.getDescription()} con garantía`; } }
exercise.js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
product.js
export class Product { // Este código no debe ser editado ❌ constructor(price) { this.price = price; } getPrice() { return this.price; } getDescription() { throw new Error("Este método debe ser implementado en las subclases"); } }
hola. gracias por su aporte. ¿ porque unos no envian datos al constructor de la calse padrea?
Solución
class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(); this.price = price; this.description = description; } getDescription() { // Tu código aquí 👈 return this.description; } } export class WarrantyDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.price = product.price + 20; this.description = ` ${product.description} with warranty`; } getPrice() { // Tu código aquí 👈 return this.price; } getDescription() { // Tu código aquí 👈 return this.description; } } export class ShippingInsuranceDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.price = product.price + 20; this.description = ` ${product.description} with shipping insurance`; } getPrice() { // Tu código aquí 👈 return this.price; } getDescription() { // Tu código aquí 👈 return this.description; } }
SPOILER!!! . .
. . . .
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.price + 20; } getDescription() { return `${this.product.getDescription()} con seguro de envío` } }
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.price + 20; } getDescription() { return `${this.product.getDescription()} con garantía` } }
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price) this.description = description } getDescription() { return this.description } }
exercise.js:
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
WarrantyDecorator.js:
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.price + 20; } getDescription() { return `${this.product.getDescription()} con garantía` } }
ShippingInsurance.js:
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.price + 20; } getDescription() { return `${this.product.getDescription()} con seguro de envío` } }
++MI SOLUCION++ 💪 . . . . . . . . . . . . . class BasicProduct
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
class WarrantyDecorator
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super(product.price); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return `${this.product.getDescription()} con garantía`; } }
class ShippingInsuranceDecorator
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super(product.price); this.product = product; } getPrice() { return this.product.getPrice() + 20; } getDescription() { return `${this.product.getDescription()} con seguro de envío`; } }
Seguimos, pero por un acento no me pasaba: . . . . . . . . . . . . . . . . . . . . . . .
exercise,js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(); this.price = price; this.description = description; } getDescription() { // Tu código aquí 👈 return this.description; } }
WarrantyDecorator.js
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.product = product; } getPrice() { // Tu código aquí 👈 return this.product.getPrice() + 20; } getDescription() { // Tu código aquí 👈 return this.product.getDescription() + ' con garantía'; } }
ShippingInsurance.js
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.product = product; } getPrice() { // Tu código aquí 👈 return this.product.getPrice() + 20; } getDescription() { // Tu código aquí 👈 return this.product.getDescription() + ' con seguro de envío'; } }
exercise.js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(price); this.description = description; } getDescription() { // Tu código aquí 👈 return this.description; } }
ShippingInsurance.js
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.product = product; } getPrice() { // Tu código aquí 👈 return this.product.getPrice() + 20; } getDescription() { // Tu código aquí 👈 return `${this.product.getDescription()} con seguro de envío` } }
WarrantyDecorator.js
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.product = product; } getPrice() { // Tu código aquí 👈 return this.product.getPrice() + 20; } getDescription() { // Tu código aquí 👈 return `${this.product.getDescription()} con garantía`; } }
🛡️🛡️Escudo anti-spoilers🛡️🛡️
Mi solución al reto:
import { Product } from "./product"; export class ShippingInsuranceDecorator extends Product { constructor(product) { super() this.product = product } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + ' con seguro de envío' } }
WarrantyDecorator.js
import { Product } from "./product"; export class WarrantyDecorator extends Product { constructor(product) { super() this.product = product } getPrice() { return this.product.getPrice() + 20; } getDescription() { return this.product.getDescription() + ' con garantía' } }
exercise.js
import { Product } from "./product"; export class BasicProduct extends Product { constructor(price, description) { super(price, description) this.description = description this.price = price } getDescription() { return this.description } }
Aquí mi solución: . . . . . . . . . . . . exercise.js
export class BasicProduct extends Product { constructor(price, description) { super(price); this.description = description; } getDescription() { return this.description; } }
WarrantyDecorator .js
export class WarrantyDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20 } getDescription() { return this.product.getDescription() + " con garantía" } }
ShippingInsuranceDecorator.js
export class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; } getPrice() { return this.product.getPrice() + 20 } getDescription() { return this.product.getDescription() + " con seguro de envío" } }
Muy bien detallado, creo que es el primero que hago a la primera jeje, aquí dejo mi código.... :)
export class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(price); this.description = description; } getDescription() { // Tu código aquí 👈 return this.description; } }
export class Product { // Este código no debe ser editado ❌ constructor(price) { this.price = price; } getPrice() { return this.price; } getDescription() { throw new Error("Este método debe ser implementado en las subclases"); } }
export class WarrantyDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.price = product.price + 20; this.description = product.description; } getPrice() { // Tu código aquí 👈 return this.price; } getDescription() { // Tu código aquí 👈 return `${this.description} con garantía`; } }
export class ShippingInsuranceDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.price = product.price + 20; this.description = product.description; } getPrice() { // Tu código aquí 👈 return this.price; } getDescription() { // Tu código aquí 👈 return `${this.description} con seguro de envío`; } }
Hola, dejo mi solución . . . .. . . . . .
class Product { // Este código no debe ser editado ❌ constructor(price) { this.price = price; } getPrice() { return this.price; } getDescription() { throw new Error("Este método debe ser implementado en las subclases"); } } // ShippingInsurance.js class ShippingInsuranceDecorator extends Product { constructor(product) { super(); this.product = product; // Tu código aquí 👈 } getPrice() { // Tu código aquí 👈 return parseFloat(this.product.getPrice()) + 20; } getDescription() { // Tu código aquí 👈 return `${this.product.getDescription()} con seguro de envío`; } } // WarrantyDecorator.js class WarrantyDecorator extends Product { constructor(product) { // Tu código aquí 👈 super(); this.product = product; } getPrice() { // Tu código aquí 👈 return parseFloat(this.product.getPrice()) + 20; } getDescription() { // Tu código aquí 👈 return `${this.product.getDescription()} con garantía`; } } // exercise.js class BasicProduct extends Product { constructor(price, description) { // Tu código aquí 👈 super(); this.price = price; this.description = description; } getDescription() { // Tu código aquí 👈 return this.description; } }
