prof3ssorSt3v3/app.js

## app.js
import Movie from './movie.js';

let theMovies = [];

document.addEventListener('DOMContentLoaded', init);

function init() {
  fetch('https://swapi.dev/api/films')
    .then((resp) => {
      if (!resp.ok) throw new Error(resp.statusText);
      return resp.json();
    })
    .then((data) => {
      console.log(data);
      //using the original data
      // theMovies = data.results;
      //create Movie Objects
      theMovies = data.results.map((film) => new Movie(film));
      buildList();
    })
    .catch((err) => {
      console.error(err);
    });
}

function buildList() {
  let title = document.querySelector('nav>h2');
  title.innerHTML = `${Movie.getTotalMovies()} Star Wars Movies`;
  let main = document.querySelector('main');
  main.innerHTML = theMovies
    .map((m) => {
      return `<div class="movie" data-ref="${m.id}" data-episode="${
        m.episode_id
      }">
        <h2>Star Wars: ${m.title} ( ${m.getYear()} )</h2>
        <p>Directed by: ${m.director}</p>
        <p>Random character:
          <span class="char">${m.getRandomChar()}</span>
        </p>
        <p><a href="${m.url}" target="_blank">More info</a></p>
      </div>`;
    })
    .join('');
}

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="app.js" type="module"></script>
  </head>
  <body>
    <nav>
      <h2>Title</h2>
    </nav>
    <main></main>
  </body>
</html>

## movie.js
//What to extend...
//A data object so we can do validation
//include static members
//use getters || setters
//include private fields
//transform data from original state

class Movie {
  #ref = 'x'; //private
  #date; //private
  static #count = 0; //private
  #characters;
  static getTotalMovies() {
    return Movie.#count;
  }

  constructor(film) {
    if (
      !film.title ||
      !film.url ||
      !film.director ||
      !film.release_date ||
      !film.episode_id ||
      !film.characters
    ) {
      throw new Error('Missing required movie info');
    }
    this.title = film.title;
    this.url = film.url;
    this.director = film.director;
    this.episode_id = film.episode_id;
    this.#characters = film.characters;
    this.#date = new Date(film.release_date);
    Movie.#count++;
    this.#ref = (Math.random() * Movie.#count).toString(16).substr(2, 10);

    // this.year = this.date.getFullYear()
    //returns `this`
  }

  get id() {
    // this.id   m.id
    //format
    return this.#ref.toUpperCase();
  }
  set id(val) {
    // this.id = val    m.id = value
    //validate val
    console.error('This cannot be changed');
    //throw new Error()
    return false;
  }

  getYear() {
    // this.getYear()
    return this.#date.getFullYear();
  }
  getRandomChar() {
    let idx = Math.floor(Math.random() * this.#characters.length);
    return this.#characters[idx];
  }
}

export default Movie;

class Documentary extends Movie {
  constructor(film) {
    super(film);
    //private vars from Movie not visible here
  }
}
	import Movie from './movie.js';

	let theMovies = [];

	document.addEventListener('DOMContentLoaded', init);

	function init() {
	fetch('https://swapi.dev/api/films')
	.then((resp) => {
	if (!resp.ok) throw new Error(resp.statusText);
	return resp.json();
	})
	.then((data) => {
	console.log(data);
	//using the original data
	// theMovies = data.results;
	//create Movie Objects
	theMovies = data.results.map((film) => new Movie(film));
	buildList();
	})
	.catch((err) => {
	console.error(err);
	});
	}

	function buildList() {
	let title = document.querySelector('nav>h2');
	title.innerHTML = `${Movie.getTotalMovies()} Star Wars Movies`;
	let main = document.querySelector('main');
	main.innerHTML = theMovies
	.map((m) => {
	return `<div class="movie" data-ref="${m.id}" data-episode="${
	m.episode_id
	}">
	<h2>Star Wars: ${m.title} ( ${m.getYear()} )</h2>
	<p>Directed by: ${m.director}</p>
	<p>Random character:
	<span class="char">${m.getRandomChar()}</span>
	</p>
	<p><a href="${m.url}" target="_blank">More info</a></p>
	</div>`;
	})
	.join('');
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script src="app.js" type="module"></script>
	</head>
	<body>
	<nav>
	<h2>Title</h2>
	</nav>
	<main></main>
	</body>
	</html>
	//What to extend...
	//A data object so we can do validation
	//include static members
	//use getters \|\| setters
	//include private fields
	//transform data from original state

	class Movie {
	#ref = 'x'; //private
	#date; //private
	static #count = 0; //private
	#characters;
	static getTotalMovies() {
	return Movie.#count;
	}

	constructor(film) {
	if (
	!film.title \|\|
	!film.url \|\|
	!film.director \|\|
	!film.release_date \|\|
	!film.episode_id \|\|
	!film.characters
	) {
	throw new Error('Missing required movie info');
	}
	this.title = film.title;
	this.url = film.url;
	this.director = film.director;
	this.episode_id = film.episode_id;
	this.#characters = film.characters;
	this.#date = new Date(film.release_date);
	Movie.#count++;
	this.#ref = (Math.random() * Movie.#count).toString(16).substr(2, 10);

	// this.year = this.date.getFullYear()
	//returns `this`
	}

	get id() {
	// this.id m.id
	//format
	return this.#ref.toUpperCase();
	}
	set id(val) {
	// this.id = val m.id = value
	//validate val
	console.error('This cannot be changed');
	//throw new Error()
	return false;
	}

	getYear() {
	// this.getYear()
	return this.#date.getFullYear();
	}
	getRandomChar() {
	let idx = Math.floor(Math.random() * this.#characters.length);
	return this.#characters[idx];
	}
	}

	export default Movie;

	class Documentary extends Movie {
	constructor(film) {
	super(film);
	//private vars from Movie not visible here
	}
	}