M3kH/extendAndGetClasses.js

## extendAndGetClasses.js

class MovieEmployed {

  constructor(name) {
    this.name = name;
    this.movies = [];
  }

  addMovie(movieInstance) {
    this.movies.push(movieInstance);
  }

}

class Actor extends MovieEmployed {

  addMovie(movie) {
    movie.actors.push(this);
    super.addMovie({role: 'actor', movie});
  }

}

class Director extends MovieEmployed {

  addMovie(movie) {
    movie.directors.push(this);
    super.addMovie({role: 'director', movie});
  }

}

class Movie {

  set newDirector (newDirector) {
    this.directors.push(newDirector);
  }

  get directorString() {
    return `Directors are ${this.directors.map(director => director.name).join(' & ')}`;
  }

  constructor(name){
    this.name = name;
    this.actors = [];
    this.directors = [];
  }

}

const Clooney = new Actor('George Clooney');
const CoenBrothers = new Director('Coen Brothers');
const Suburbicon = new Movie('Suburbicon');

Clooney.addMovie(new Movie('Ocean 11'));
CoenBrothers.addMovie(new Movie('Is not a Land for Old'));

Clooney.addMovie(Suburbicon);
CoenBrothers.addMovie(Suburbicon);

//console.log('Cloonie movies:', Clooney.movies);
//console.log('Coen Brothers movies:', CoenBrothers.movies);
Suburbicon.newDirector = Clooney;
console.log(Suburbicon.directorString);

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Sample Promises</title>
  </head>
  <body>
    <script src="./promisesAndObjects.js" type="text/javascript"></script>
  </body>
</html>

## promises.js

// const oReq = new XMLHttpRequest();
// oReq.addEventListener("load", function () {
//     console.log(this.responseText);
// });
// oReq.open("GET", "https://api.github.com/users/M3kH");
// oReq.send();
//
// const oReqB = new XMLHttpRequest();
// oReqB.addEventListener("load", function () {
//     console.log(this.responseText);
// });
// oReqB.open("GET", "https://api.github.com/users/M3kH/followers");
// oReqB.send();

function getMeAJobPromise (jobNumber) {
  return new Promise((resolve, reject) => {
    console.log(`Hey there, I'm starting the job ${jobNumber}...`);

      setTimeout(() => {
        try {
          if (jobNumber === 3) {
            throw new Error('Something went on fire 🔥');
          }
          console.log(`Hey there I finish the job ${jobNumber}`);
        } catch (e){
          console.log(`Hey we try to solve the job ${jobNumber} but didn't work!`);
        }
        resolve(new Date);
      }, 1000);
  })
}

getMeAJobPromise(1).then((dateObject) => {
  console.log(`The job got finished`, dateObject);
  return getMeAJobPromise(2);
}).then((dateObject) => {
  console.log(`The job got finished`, dateObject);
  return getMeAJobPromise(3);
}).then((dateObject) => {
  console.log(`The job got finished`, dateObject);
  return getMeAJobPromise(4);
}).then((dateObject) => {
    console.log(`The job got finished`, dateObject);
}).catch(e => {
  console.log('We find an error', e);
});

## promisesAndObjects.js
class GitHubUser {

  get template() {
    const template = [];
    template.push(`
      <div>
        <h1>${this.login}</h1>
        <img src="${this.avatar_url}" />
      </div>
      `);

    template.push('<ul>');
    template.push(this.followers.map(follower => `<li>
      <h5>${follower.login}</h5>
      <img src="${follower.avatar_url}" />
    </li>`).join(''));
    template.push('</ul>');
    return template.join('');
  }

  constructor (data){
    Object.keys(data).forEach(key => {
      this[key] = data[key];
    });
  }
}

function getUrl (url){
  return new Promise((resolve, reject) => {
    const req = new XMLHttpRequest();
    req.addEventListener('load', function() {
      resolve(JSON.parse(this.responseText));
    })
    req.open('GET', url);
    req.send();
  });
}

//Fetch a user
let user;
getUrl('https://api.github.com/users/M3kH').then(userInformation => {
  user = new GitHubUser(userInformation);
  return getUrl('https://api.github.com/users/M3kH/followers');
}).then(followers => {
  user.followers = followers;
  document.querySelector('body').innerHTML = user.template;
});

	class MovieEmployed {

	constructor(name) {
	this.name = name;
	this.movies = [];
	}

	addMovie(movieInstance) {
	this.movies.push(movieInstance);
	}

	}

	class Actor extends MovieEmployed {

	addMovie(movie) {
	movie.actors.push(this);
	super.addMovie({role: 'actor', movie});
	}

	}

	class Director extends MovieEmployed {

	addMovie(movie) {
	movie.directors.push(this);
	super.addMovie({role: 'director', movie});
	}

	}

	class Movie {

	set newDirector (newDirector) {
	this.directors.push(newDirector);
	}

	get directorString() {
	return `Directors are ${this.directors.map(director => director.name).join(' & ')}`;
	}

	constructor(name){
	this.name = name;
	this.actors = [];
	this.directors = [];
	}

	}

	const Clooney = new Actor('George Clooney');
	const CoenBrothers = new Director('Coen Brothers');
	const Suburbicon = new Movie('Suburbicon');

	Clooney.addMovie(new Movie('Ocean 11'));
	CoenBrothers.addMovie(new Movie('Is not a Land for Old'));

	Clooney.addMovie(Suburbicon);
	CoenBrothers.addMovie(Suburbicon);

	//console.log('Cloonie movies:', Clooney.movies);
	//console.log('Coen Brothers movies:', CoenBrothers.movies);
	Suburbicon.newDirector = Clooney;
	console.log(Suburbicon.directorString);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Sample Promises</title>
	</head>
	<body>
	<script src="./promisesAndObjects.js" type="text/javascript"></script>
	</body>
	</html>

	// const oReq = new XMLHttpRequest();
	// oReq.addEventListener("load", function () {
	// console.log(this.responseText);
	// });
	// oReq.open("GET", "https://api.github.com/users/M3kH");
	// oReq.send();
	//
	// const oReqB = new XMLHttpRequest();
	// oReqB.addEventListener("load", function () {
	// console.log(this.responseText);
	// });
	// oReqB.open("GET", "https://api.github.com/users/M3kH/followers");
	// oReqB.send();

	function getMeAJobPromise (jobNumber) {
	return new Promise((resolve, reject) => {
	console.log(`Hey there, I'm starting the job ${jobNumber}...`);

	setTimeout(() => {
	try {
	if (jobNumber === 3) {
	throw new Error('Something went on fire 🔥');
	}
	console.log(`Hey there I finish the job ${jobNumber}`);
	} catch (e){
	console.log(`Hey we try to solve the job ${jobNumber} but didn't work!`);
	}
	resolve(new Date);
	}, 1000);
	})
	}

	getMeAJobPromise(1).then((dateObject) => {
	console.log(`The job got finished`, dateObject);
	return getMeAJobPromise(2);
	}).then((dateObject) => {
	console.log(`The job got finished`, dateObject);
	return getMeAJobPromise(3);
	}).then((dateObject) => {
	console.log(`The job got finished`, dateObject);
	return getMeAJobPromise(4);
	}).then((dateObject) => {
	console.log(`The job got finished`, dateObject);
	}).catch(e => {
	console.log('We find an error', e);
	});
	class GitHubUser {

	get template() {
	const template = [];
	template.push(`
	<div>
	<h1>${this.login}</h1>
	<img src="${this.avatar_url}" />
	</div>
	`);

	template.push('<ul>');
	template.push(this.followers.map(follower => `<li>
	<h5>${follower.login}</h5>
	<img src="${follower.avatar_url}" />
	</li>`).join(''));
	template.push('</ul>');
	return template.join('');
	}

	constructor (data){
	Object.keys(data).forEach(key => {
	this[key] = data[key];
	});
	}
	}

	function getUrl (url){
	return new Promise((resolve, reject) => {
	const req = new XMLHttpRequest();
	req.addEventListener('load', function() {
	resolve(JSON.parse(this.responseText));
	})
	req.open('GET', url);
	req.send();
	});
	}

	//Fetch a user
	let user;
	getUrl('https://api.github.com/users/M3kH').then(userInformation => {
	user = new GitHubUser(userInformation);
	return getUrl('https://api.github.com/users/M3kH/followers');
	}).then(followers => {
	user.followers = followers;
	document.querySelector('body').innerHTML = user.template;
	});