Playground - Implementación de Observador en Newsletter

30 días de JavaScript

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 - Implementación de Observador en Newsletter

Todos los cursos GRATIS

Se acaba en:

00díasd:00hrsh:00minm:00segs

Comentarios36

Alejandro Anaya

Estudiante

Hace 3 años

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

Mi solución al reto:

Archivo: exercise.js

export class Newsletter {
 subscribers = []

 subscribe(subscriber) {
   this.subscribers.push(subscriber)
 }

 unsubscribe(email) {
   let indexToRemove = this.subscribers.findIndex((s) => s.email === email)
   return this.subscribers.splice(indexToRemove, 1);
 }

 post(article) {
   for (let s of this.subscribers) {
     s.receive(article)
   }
 }
}

Archivo: Subscriber.js

export class Subscriber {
  // Tu código aquí 👈
  constructor(email) {
    this.email = email
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

andres valencia

Estudiante

Hace 3 años

exercises.js

export class Newsletter {
  // Tu código aquí 👈
  constructor() {
    this.subscribers =[]
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber)
    console.log(`Se ha suscrito el usuario con correo ${subscriber.email}`)
  }
  
  unsubscribe(email) {
    const index = this.subscribers.findIndex(el => el.email === email);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
      console.log(`Se ha eliminado de la lista de suscriptores el usuario con correo ${email}`);
    }
    
  }
  post(article) {
    console.log(`Se ha publicado un nuevo artículo: ${article.title}`);
    console.log(`Contenido: ${article.content}`)
    this.subscribers.forEach(subscriber => subscriber.receive(article));
  }
}

Subscriber.js

export class Subscriber {
  // Tu código aquí 👈
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El usuario con correo ${this.email} ha recibido el artículo ${article.title}`);
  }
  
}

Frandel Corporan Rodríguez

Estudiante

Hace 3 años

ez el tutorial en veldad

exercise.js

export class Newsletter {
  subscribers = []
  subscribe(subscriber) {
    this.subscribers.push(subscriber)
  }
  unsubscribe(email) {
    const index = this.subscribers.findIndex(item => item.email === email)
    this.subscribers.splice(index,1)
  }
  post(article) {
    this.subscribers.forEach(sub => sub.receive(article))
  }
}

subcriber.js

export class Subscriber {
  constructor(email) {
    this.email = email
  }
  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

Raul Carrillo Garrido

Estudiante

Hace 3 años

No me aparece el día 24 (pero si el 25 y 26 aunque no puedo saltar adelante) ¿A alguien mas le paso? gracias!

Joan Alexander Valerio Rodríguez

Estudiante

Hace 2 años

Super agradecido de que redactaron bien este reto. Aquí les comparto mi solución:

Daniel Romao

Estudiante

Hace 3 años

Mi solución: . . . . . . . . . Subscriber.js

export class Subscriber {
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    return console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`);
  }
}

exercise.js

export class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    const subIndex = this.subscribers.findIndex(sub => sub.email == email);
    this.subscribers.splice(subIndex, 1);
  }

  post(article) {
    this.subscribers.forEach(sub => sub.receive(article));
  }
}

Rubén Hernández Hernández

Estudiante

Hace 3 años

💚 Mi solución💚

🛡️ MURO ANTI-SPOILERS 🛡️

!cat

Subscriber.js

export class Subscriber {
  constructor(email) {
    this.email = email
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

exercise.js

export class Newsletter {
  constructor() {
    this.subscribers = []
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber)
  }

  unsubscribe(email){
    let indexToDelete = this.subscribers.findIndex(subscriber => subscriber.email === email)
    if (indexToDelete === -1)
      throw new Error("Email no suscrito")
    this.subscribers.splice(indexToDelete, 1)
  }

  post(article) {
    this.subscribers.forEach(subscriber => subscriber.receive(article))
  }

}

Andres Felipe Diago Matta

Estudiante

Hace 3 años

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

class Newsletter {
    // Tu código aquí 👈
    constructor(){
        this.subscribers = [];
    }

    subscribe(subscriber){
        this.subscribers.push(subscriber);
    }

    unsubscribe(email){
        this.subscribers = this.subscribers.filter(subscriber => subscriber.email !== email);
    }

    post(article){
        this.subscribers.forEach(subscriber => subscriber.receive(article));
    }
}
class Subscriber {
    // Tu código aquí 👈
    constructor(email){
        this.email = email;
    }

    receive(article){
        console.log(`El suscriptor ${this.email}  ha recibido el artículo: ${article.title}`);
    }
}

//Ejemplo
//Input:

const newsletter = new Newsletter();
const subscriber1 = new Subscriber("pepe@mail.com");
const subscriber2 = new Subscriber("juanito@mail.com");
const subscriber3 = new Subscriber("pedro@mail.com");

const article = {
    title: "30 días de js",
    content: "Aprende js en 30 días"
}

newsletter.subscribe(subscriber1);
newsletter.subscribe(subscriber2);
newsletter.subscribe(subscriber3);

newsletter.post(article);

/*Output:
"El suscriptor pepe@mail.com ha recibido el artículo: 30 días de js"
"El suscriptor juanito@mail.com ha recibido el artículo: 30 días de js"
"El suscriptor pedro@mail.com ha recibido*/

David Ochoa

Estudiante

Hace 3 años

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

Implementación de observador en newsletter

!Spoiler Shield

Subscriber.js

export class Subscriber {
  // Tu código aquí 👈
  constructor(email) {
    this.email = email;
  }
  receive(article) {
    return `El suscriptor ${this.email} ha recibido el artículo: ${article.title}`;
  }
}

exercise.js


export class Newsletter {
  // Tu código aquí 👈
  constructor() {
    this.subscribers = [];
    this.articles = [];
  }
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }
  unsubscribe(email) {
    this.subscribers = this.subscribers.filter(
      (subscriber) => subscriber.email != email
    );
  }
  post(article) {
    this.articles.push(article);
    this.subscribers.forEach((subscriber) => subscriber.receive(article));
  }
}

Pablo Perez

Estudiante

Hace 3 años

// Subscriber.js
export class Subscriber {
  constructor(email) {
    this.email = email
  }
  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

// Exercise.js
export class Newsletter {
  constructor() {
    this.subscribers = []
  }
  subscribe(subscriber) {
    this.subscribers.push(subscriber)
  }
  unsubscribe(email) {
    const index = this.subscribers.findIndex(s => s.email === email)
    this.subscribers.splice(index, 1)
  }
  post(article) {
    this.subscribers.forEach(s => s.receive(article))
  }
}

Alexis Corrales

Estudiante

Hace 3 años

export class Subscriber {
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`);
  }
}

export class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    const index = this.subscribers.findIndex(subscriber => subscriber.email === email);
    if (index !== -1) {
      this.subscribers.splice(index, 1);
    }
  }

  post(article) {
    this.subscribers.forEach(subscriber => subscriber.receive(article));
  }
}

Angel Javier Sanchez Tenjo

Estudiante

Hace 3 años

Hola dejo mi solución al Reto:

Subscriber.js

export class Subscriber {

  constructor(email) {
    this.articles = [];
    this.email = email;
  }

  receive(article) {
    this.articles.push(article);
    console.log(
      `El suscriptor ${this.email} ha recibido el artículo: ${article.title}`
    );
  }
}

exercise.js

export class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    this.subscribers = this.subscribers.filter(
      (subscriber) => subscriber.email !== email
    );
  }

  post(article) {
    this.subscribers.forEach((subscriber) => subscriber.receive(article));
  }
}

Elias Rayas Gonzalez

Estudiante

Hace 3 años

Solución

class Subscriber {
  // Tu código aquí 👈
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(
      `Suscriber ${this.email}, received the ${article.title} article.`
    );
  }
}

class Newsletter {
  // Tu código aquí 👈
  subscribers = [];

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    const deletedSubscriberIndex = this.subscribers.findIndex(
      (sub) => sub.email === email
    );
    this.subscribers.splice(deletedSubscriberIndex, 1);
  }

  post(article) {
    this.subscribers.forEach((sub) => sub.receive(article));
  }
}

Raul Carrillo Garrido

Estudiante

Hace 3 años

. . . . . .

export class Subscriber {
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`);
  }
}

. . . .

export class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    this.subscribers = this.subscribers.filter(subscriber => subscriber.email !== email);
  }

  post(article) {
    this.subscribers.forEach(subscriber => subscriber.receive(article));
  }
}

Carina Payleman

Estudiante

Hace 3 años

. . . . . .

Subscriber.js

 class Subscriber {
  // OBSERVADOR
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

exercise.js

export class Newsletter {
  //OBSERVABLE:
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    const removedSubscriber = this.subscribers.findIndex((subscriber) => subscriber.email === email)
    return this.subscribers.splice(removedSubscriber, 1);
  }

  post(article) {
    this.subscribers.forEach(subscriber => {
      subscriber.receive(article);
    });
  }
}

Victor Ortiz

Estudiante

Hace 3 años

otro mas, ya me quedan menos . . . . . . . . . . . . . . . . . . . .

exercise.js

export class Newsletter {
  // Tu código aquí 👈
  constructor() {
    this.subscribers = []
  }
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }
  unsubscribe(email) {
    this.subscribers = this.subscribers.filter(sub => sub.email !== email)
  }
  post(article) {
    this.subscribers.forEach(sub => sub.receive(article));
  }
}

Subscriber.js

export class Subscriber {
  // Tu código aquí 👈
  constructor(email) {
    this.email = email;
  }
  receive(article) {
    console.log(`El subscriptor ${this.email} ha recibido un: ${article.title}`);
  }
}

Abril Darynka Tapia Sosa

Estudiante

Hace 3 años

Mi solución . . . . . . . . . . . . . .

class Newsletter {
  // Tu código aquí 👈
  constructor(){
    this.subscribers = [];
  }
  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  } 
  unsubscribe(email) {
    const index = this.subscribers.findIndex((item) => item.email === email);
    this.subscribers.splice(index, 1)
  }
  post(article){
    this.subscribers.forEach((subscriber) => subscriber.receive(article));
  }
}

class Subscriber{
  constructor(email) {
    this.email = email;
  }
  receive(article){
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

Esteban Alzate Atehortua

Estudiante

Hace 3 años

Mi solución: fui feliz por lograrlo a la primera :D (aunque igual estaba fácil) . . . . . . . . . . . . . . . . exercise.js

export class Newsletter {
    constructor() {
        this.subscribers = [];
      }
      subscribe(subscriber) {
        this.subscribers.push(subscriber);
      }
      unsubscribe(email) {
        const toDelete = this.subscribers.findIndex(subscriber => {
          subscriber.email = email
        })
        this.subscribers.splice(toDelete, 1);
      }
      post(article){
        this.subscribers.forEach(subscriber=> {
            subscriber.receive(article);
        })
      }
}

Subscriber.js

export class Newsletter {
    constructor() {
        this.subscribers = [];
      }
      subscribe(subscriber) {
        this.subscribers.push(subscriber);
      }
      unsubscribe(email) {
        const toDelete = this.subscribers.findIndex(subscriber => {
          subscriber.email = email
        })
        this.subscribers.splice(toDelete, 1);
      }
      post(article){
        this.subscribers.forEach(subscriber=> {
            subscriber.receive(article);
        })
      }
}

JAIME EDUARDO DIAZ TOBON

Estudiante

Hace 3 años

++MI SOLUCION++ 💪 . . . . . . . . . . . . . . . class Subscriber

export class Subscriber {
  constructor(email) {
    this.email = email;
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`);
  }
}

class Newsletter

export class Newsletter {
  constructor() {
    this.subscribers = [];
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber);
  }

  unsubscribe(email) {
    const index = this.subscribers.findIndex(subscribe => subscribe.email === email);
    this.subscribers.splice(index, 1);
  }

  post(article) {
    this.subscribers.forEach(subscribe => subscribe.receive(article));
  }
}

Israel Blas

Estudiante

Hace 3 años

Bueno aportando mi solución:

. . . . . . . . . . .

Subscriber.js

export class Subscriber {
  constructor(email) {
    this.email = email
  }

  receive(article) {
    console.log(`El suscriptor ${this.email} ha recibido el artículo: ${article.title}`)
  }
}

exercise.js

export class Newsletter {
  constructor() {
    this.subscribers = []
  }

  subscribe(subscriber) {
    this.subscribers.push(subscriber)
  }

  unsubscribe(email) {
    const pos = this.subscribers.findIndex(subscriber => subscriber.email === email)
    this.subscribers.splice(pos, 1)
  }

  post(article) {
    this.subscribers.forEach(subscriber => subscriber.receive(article))
  }

}

Playground - Implementación de Observador en Newsletter

¡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