exercicio modulos

stebsnusch · stebsnusch · commit 323af7581e41 · 2021-06-09T18:14:54.000-03:00
diff --git a/DOM/assets/js/scripts.js b/DOM/assets/js/scripts.js
@@ -1,32 +1,33 @@
-function toggleMode() {
+function changeMode() {
 	changeClasses();
 	changeText();
 }
 
 function changeClasses() {
-	body.classList.toggle('dark-mode');
-	h1.classList.toggle('dark-mode');
-	button.classList.toggle('dark-mode');
-	footer.classList.toggle('dark-mode');
+	button.classList.toggle(darkModeClass);
+	h1.classList.toggle(darkModeClass);
+	body.classList.toggle(darkModeClass);
+	footer.classList.toggle(darkModeClass);
 }
 
 function changeText() {
-	const darkMode = 'Dark Mode';
 	const lightMode = 'Light Mode';
+	const darkMode = 'Dark Mode';
 
-	if (h1.classList.contains('dark-mode')) {
-		h1.innerHTML = darkMode + ' ON';
+	if (body.classList.contains(darkModeClass)) {
 		button.innerHTML = lightMode;
+		h1.innerHTML = darkMode + ' ON';
 		return;
 	}
 
-	h1.innerHTML = lightMode + ' ON';
 	button.innerHTML = darkMode;
+	h1.innerHTML = lightMode + ' ON';
 }
 
-const body = document.getElementsByTagName('body')[0];
-const h1 = document.getElementById('page-title');
+const darkModeClass = 'dark-mode';
 const button = document.getElementById('mode-selector');
+const h1 = document.getElementById('page-title');
+const body = document.getElementsByTagName('body')[0];
 const footer = document.getElementsByTagName('footer')[0];
 
-button.addEventListener('click', toggleMode);
+button.addEventListener('click', changeMode);
diff --git a/modulos/README.md b/modulos/README.md
@@ -0,0 +1,3 @@
+# Módulos
+
+Este repositório contém a atividade prática do Curso "Módulos", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).
diff --git a/modulos/imports-dinamicos/README.md b/modulos/imports-dinamicos/README.md
@@ -0,0 +1,9 @@
+# Imports Dinâmicos
+
+Os imports dinâmicos não foram abordados no curso de "Módulos" porque é necessário que você tenha conhecimento prévio de Javascript Assíncrono. Sendo assim, recomendo que você volte neste repositório após completar o curso de Javascript Assíncrono que também faz parte deste Basecamp.
+
+## Exercício
+
+Este exercício serve apenas como um exemplo de como utilizar módulos **por demanda**. Na nossa página HTML, ao clicar no botão, o fundo da página fica vermelho.
+
+Não se esqueça de utilizar a extensão "Live Server" caso você vá tentar realizar este desafio!
diff --git a/modulos/imports-dinamicos/index.html b/modulos/imports-dinamicos/index.html
@@ -0,0 +1,13 @@
+<!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>
+	</head>
+	<body>
+		<button id="myBtn">Clique aqui</button>
+		<script type="module" src="./main.js"></script>
+	</body>
+</html>
diff --git a/modulos/imports-dinamicos/main.js b/modulos/imports-dinamicos/main.js
@@ -0,0 +1,12 @@
+const btn = document.getElementById('myBtn');
+const body = document.getElementsByTagName('body')[0];
+
+const listener = function () {
+	btn.addEventListener('click', async () => {
+		const { paintRed } = await import('./modules/metodos.js');
+
+		paintRed(body);
+	});
+};
+
+listener();
diff --git a/modulos/imports-dinamicos/modules/metodos.js b/modulos/imports-dinamicos/modules/metodos.js
@@ -0,0 +1,5 @@
+function paintRed(el) {
+	el.style.backgroundColor = 'red';
+}
+
+export { paintRed };
diff --git a/playground.js b/playground.js
@@ -0,0 +1,23 @@
+function calculaIdade(anos) {
+	return `Daqui a ${anos} anos, ${this.nome} terá ${
+		this.idade + anos
+	} anos de idade.`;
+}
+
+const pessoa1 = {
+	nome: 'Maria',
+	idade: 30,
+};
+
+const pessoa2 = {
+	nome: 'Carla',
+	idade: 26,
+};
+
+const animal = {
+	nome: 'Fiona',
+	idade: 5,
+	raca: 'Pug',
+};
+
+console.log(calculaIdade.apply(pessoa1, [4]));

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# Módulos`
	`2`	`+`
	`3`	`+Este repositório contém a atividade prática do Curso "Módulos", que faz parte do Basecamp de Javascript que minstrei pela [Digital Innovation One](https://digitalinnovation.one/).`