prof3ssorSt3v3/a.mjs

## a.mjs
const PIE = 3.14;

function f() {
  console.log('function f inside module a');
}

function f123() {
  //not accessible
}

export { PIE, f };

## b.js
export const CAKE = 'a lie';

function g() {
  console.log('function g in module b');
}

export default g;

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Beyond Beginner</title>
    <style>
      html {
        font-size: 20px;
        line-height: 1.7;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-weight: 300;
        color: cornflowerblue;
      }
      h1 {
        font-size: 3rem;
      }
      h2 {
        font-size: 2rem;
      }
    </style>
  </head>
  <body>
    <header>
      <h1>Going Beyond the Basics of JavaScript</h1>
      <h2>How to Structure your Scripts</h2>
    </header>
    <script src="./js/main-3.js" type="module"></script>
  </body>
</html>

## main-1.js
//start using namespaces so your code does not conflict
//with other libraries

const APP = {
  today: new Date(),
  KEY: 'jhj3245gj23h42j34',
  init: function () {
    //function to start things off
    console.log(APP.today.toLocaleDateString());
    //add some event listeners
    APP.addListeners();
    //make a call to an API with a callback
    let url = `https://jsonplaceholder.typicode.com/posts?key=${APP.KEY}`;
    APP.getData(url, APP.afterFetch);
  },
  addListeners: function () {
    console.log('adding listeners to the page');
  },
  abc: () => {
    console.log('abc');
  },
  getData() {
    //do fetch call
    fetch(url)
      .then((res) => res.json())
      .then((content) => {
        //call function to add content
        //call the callback
        if (cb) {
          cb();
        }
      })
      .catch((err) => console.error);
  },
  afterFetch() {
    console.log('data fetch completed');
  },
};
document.addEventListener('DOMContentLoaded', APP.init);

const CONTACT = {};

const CART = {};

const MAPPING = {};

## main-2.js
// IIFE - Immediately Invoked Function Expressions
// Uses namespaces but also lets you control access

const APP = (function () {
  document.addEventListener('DOMContentLoaded', init);

  let today = new Date();
  const KEY = 'jhj3245gj23h42j34';

  function init() {
    console.log('loaded');
    //function to start things off
    console.log(today.toLocaleDateString());
    //add some event listeners
    addListeners();
    //make a call to an API with a callback
    let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`;
    getData(url, afterFetch);
  }

  function addListeners() {
    console.log('adding listeners to the page');
  }

  function getData(url, cb) {
    //do fetch call
    fetch(url)
      .then((res) => res.json())
      .then((content) => {
        //call function to add content
        //call the callback
        if (cb) {
          cb();
        }
      })
      .catch((err) => console.error);
  }

  function afterFetch() {
    console.log('data fetch completed');
  }

  return {
    getData,
    today,
    KEY,
  };
})();

// APP.getData()
// APP.KEY
//APP.afterFetch(); - ERROR. Private

## main-3.js
import { PIE, f } from './modules/a.mjs';
import someFunc, { CAKE } from './modules/b.js';
//g will be someFunc

const APP = (function () {
  document.addEventListener('DOMContentLoaded', () => {
    console.log(PIE);
    f();
    someFunc();
    console.log(CAKE);
  });

  //rest of code just like in main-2
})();

## main.js
// Moving beyond beginner with scripts
//1. Basic code structure

let today = new Date();
const KEY = 'jhj3245gj23h42j34';

function init() {
  //function to start things off
  console.log(today.toLocaleDateString());
  //add some event listeners
  addListeners();
  //make a call to an API with a callback
  let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`;
  getData(url, afterFetch);
}
// let init = function(){}

function addListeners() {
  console.log('adding listeners to the page');
}

function getData(url, cb) {
  //do fetch call
  fetch(url)
    .then((res) => res.json())
    .then((content) => {
      //call function to add content
      //call the callback
      if (cb) {
        cb();
      }
    })
    .catch((err) => console.error);
}

function afterFetch() {
  console.log('data fetch completed');
}

document.addEventListener('DOMContentLoaded', init);
	const PIE = 3.14;

	function f() {
	console.log('function f inside module a');
	}

	function f123() {
	//not accessible
	}

	export { PIE, f };
	export const CAKE = 'a lie';

	function g() {
	console.log('function g in module b');
	}

	export default g;
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Beyond Beginner</title>
	<style>
	html {
	font-size: 20px;
	line-height: 1.7;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-weight: 300;
	color: cornflowerblue;
	}
	h1 {
	font-size: 3rem;
	}
	h2 {
	font-size: 2rem;
	}
	</style>
	</head>
	<body>
	<header>
	<h1>Going Beyond the Basics of JavaScript</h1>
	<h2>How to Structure your Scripts</h2>
	</header>
	<script src="./js/main-3.js" type="module"></script>
	</body>
	</html>
	//start using namespaces so your code does not conflict
	//with other libraries

	const APP = {
	today: new Date(),
	KEY: 'jhj3245gj23h42j34',
	init: function () {
	//function to start things off
	console.log(APP.today.toLocaleDateString());
	//add some event listeners
	APP.addListeners();
	//make a call to an API with a callback
	let url = `https://jsonplaceholder.typicode.com/posts?key=${APP.KEY}`;
	APP.getData(url, APP.afterFetch);
	},
	addListeners: function () {
	console.log('adding listeners to the page');
	},
	abc: () => {
	console.log('abc');
	},
	getData() {
	//do fetch call
	fetch(url)
	.then((res) => res.json())
	.then((content) => {
	//call function to add content
	//call the callback
	if (cb) {
	cb();
	}
	})
	.catch((err) => console.error);
	},
	afterFetch() {
	console.log('data fetch completed');
	},
	};
	document.addEventListener('DOMContentLoaded', APP.init);

	const CONTACT = {};

	const CART = {};

	const MAPPING = {};
	// IIFE - Immediately Invoked Function Expressions
	// Uses namespaces but also lets you control access

	const APP = (function () {
	document.addEventListener('DOMContentLoaded', init);

	let today = new Date();
	const KEY = 'jhj3245gj23h42j34';

	function init() {
	console.log('loaded');
	//function to start things off
	console.log(today.toLocaleDateString());
	//add some event listeners
	addListeners();
	//make a call to an API with a callback
	let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`;
	getData(url, afterFetch);
	}

	function addListeners() {
	console.log('adding listeners to the page');
	}

	function getData(url, cb) {
	//do fetch call
	fetch(url)
	.then((res) => res.json())
	.then((content) => {
	//call function to add content
	//call the callback
	if (cb) {
	cb();
	}
	})
	.catch((err) => console.error);
	}

	function afterFetch() {
	console.log('data fetch completed');
	}

	return {
	getData,
	today,
	KEY,
	};
	})();

	// APP.getData()
	// APP.KEY
	//APP.afterFetch(); - ERROR. Private
	import { PIE, f } from './modules/a.mjs';
	import someFunc, { CAKE } from './modules/b.js';
	//g will be someFunc

	const APP = (function () {
	document.addEventListener('DOMContentLoaded', () => {
	console.log(PIE);
	f();
	someFunc();
	console.log(CAKE);
	});

	//rest of code just like in main-2
	})();
	// Moving beyond beginner with scripts
	//1. Basic code structure

	let today = new Date();
	const KEY = 'jhj3245gj23h42j34';

	function init() {
	//function to start things off
	console.log(today.toLocaleDateString());
	//add some event listeners
	addListeners();
	//make a call to an API with a callback
	let url = `https://jsonplaceholder.typicode.com/posts?key=${KEY}`;
	getData(url, afterFetch);
	}
	// let init = function(){}

	function addListeners() {
	console.log('adding listeners to the page');
	}

	function getData(url, cb) {
	//do fetch call
	fetch(url)
	.then((res) => res.json())
	.then((content) => {
	//call function to add content
	//call the callback
	if (cb) {
	cb();
	}
	})
	.catch((err) => console.error);
	}

	function afterFetch() {
	console.log('data fetch completed');
	}

	document.addEventListener('DOMContentLoaded', init);