Playground - Personaliza productos de una tienda

Cursos Empresas Blog Live Conf Precios

Contenido del curso

¡Te damos la bienvenida a este reto!

1
¡Bienvenido al mundo de JavaScript!
01:33 min

Día 1

Día 2

Día 3

Día 4

Día 5 - Checkpoint

20
Playground - encuentra el palindromo más grande

Día 6

Día 7

Día 8

Día 9

Día 10 - Checkpoint

Día 11

Día 12

Día 13

Día 14

Día 15 - Checkpoint

50
Playground - Sistema de reservaciones de un hotel

Día 16

Día 17

Día 18

Día 19

Día 20 - Checkpoint

65
Playground - Agenda de vuelos

Día 21

Día 22

Día 23

Día 24 - Checkpoint

77
Playground - Crea un task manager con patrones de diseño

Día 25

Día 26

Día 27

Día 28

Día 29

Día 30

93
¡Lo lograste!
01:41 min

Live Class

Tomar examen

Playground - Personaliza productos de una tienda

Comentarios

Osvaldo Martinez Guillen

student

Muy entendible, listo.

++excercise.js++

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';
  }
}

willmar fernando romero marin

student

hola gracias por el aporte, ¿ porque no envia datos al constructor de la clase padre?

Osvaldo Martinez Guillen

student

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.

Sergio Luis Arango Montes

student

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;
  }
}

Jesús Emiliano Alonso López

student

🛡️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
  }
}

Joan Alexander Valerio Rodríguez

student

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.

Daniel Romao

student

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";
  }
}

Rubén Hernández Hernández

student

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`)
  }
}

David Ochoa

student

🛡️🛡️🛡️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';
  }
}

Pablo Perez

student

// 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;
  }
}

Alexis Corrales

student

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;
  }
}

Angel Javier Sanchez Tenjo

student

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");
  }
}

willmar fernando romero marin

student

hola. gracias por su aporte. ¿ porque unos no envian datos al constructor de la calse padrea?

Elias Rayas Gonzalez

student

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;
  }
}

Pablo Pincay Alvarez

student

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
  }
}

Carina Payleman

student

. . . . . .

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`
  }
}

JAIME EDUARDO DIAZ TOBON

student

++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`;
  }
}

Victor Ortiz

student

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';
  }
}

Andrés Camilo Vélez Mejía

student

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`;
  }
}

Alejandro Anaya

student

🛡️🛡️Escudo anti-spoilers🛡️🛡️

Mi solución al reto:

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) {
    super(price, description)
    this.description = description
    this.price = price
  }

  getDescription() {
    return this.description
  }
}

Gabriel Luna

student

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"
  }
}

Jose Carlos Machado

student

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`;
  }
}

Abril Darynka Tapia Sosa

student

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;
  }
}

¡Te damos la bienvenida a este reto!

¡Bienvenido al mundo de JavaScript!

Día 1

Variables, funciones y sintaxis básica

Tipos de datos

Playground - Retorna el tipo

Tipos de datos - pt 2

Día 2

Operadores

Hoisting y coerción

Playground - Calcula la propina

Alcance de las variables

Día 3

Condicionales

Playground - Calcula años bisiestos

Switch

Playground - Obten información de mascotas según su tipo

Ciclos

Playground - Dibuja un triangulo

Día 4

Arrays

Playground - Encuentra al michi mas famoso

Objetos

Playground - Obten el promedio de los estudiantes

Día 5 - Checkpoint

Playground - encuentra el palindromo más grande

Día 6

Reasignación y redeclaración

Modo estricto

Día 7

Debugging y manejo de errores

Programación funcional

Día 8

Closures

Playground - Crea una calculadora con closures

Higher order functions

Playground - Crea tu propio método map

Día 9

ECMAScript

TC39

Día 10 - Checkpoint

ES6

ES7

Playground - Task planner

Día 11

Asincronismo

Playground - Promesas

Manejando el asincronismo

Playground - Resuelve el callback hell usando promesas

Playground - Resuelve el callback hell usando async/await

Día 12

Arrays a profundidad

Métodos de arrays: Every, Find y findIndex

Playground - Válida el formulario

Día 13

Métodos de arrays: Includes, Join y concat

Playground - agrupa los productos

Métodos de arrays: Flat y FlatMap

Playground - Encuentra la ubicación del valor buscado

Día 14

Mutable functions

Playground - Modifica una lista de compras

Métodos de arrays: sort

Playground - Ordena los productos

Día 15 - Checkpoint

Playground - Sistema de reservaciones de un hotel

Día 16

Programación orientada a objetos en JavaScript

Objetos literales

Playground - Congela el objeto recursivamente

Día 17

Prototipos en JavaScript

Playground - Modifica el prototype de los arrays

Playground - Crea un auto usando clases

Día 18

Abstracción en JavaScript

Playground - Sistema de carrito de compras

Encapsulamiento en JavaScript

Playground - Encapsula datos de los usuarios

Día 19