exercicio async await

stebsnusch · stebsnusch · commit 7b3add727278 · 2021-06-10T23:53:30.000-03:00
diff --git a/javascript-assincrono/projeto-html/assets/css/styles.css b/javascript-assincrono/projeto-html/assets/css/styles.css
@@ -0,0 +1,36 @@
+@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600&display=swap');
+
+body {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	font-family: 'Quicksand', sans-serif;
+	height: 100vh;
+	margin: 0;
+	background-color: beige;
+}
+
+img {
+	max-width: 600px;
+	border-radius: 30px;
+}
+
+main {
+	text-align: center;
+}
+
+button {
+	border: 0;
+	font-size: 1.2rem;
+	font-weight: 500;
+	padding: 16px;
+	background: orangered;
+	color: white;
+	margin: 20px 0;
+	cursor: pointer;
+	transition: all 0.5s ease-in-out;
+}
+
+button:hover {
+	background: orange;
+}
diff --git a/javascript-assincrono/projeto-html/assets/js/scripts.js b/javascript-assincrono/projeto-html/assets/js/scripts.js
@@ -0,0 +1,21 @@
+const BASE_URL = 'https://thatcopy.pw/catapi/rest/';
+
+const getCats = async () => {
+	try {
+		const data = await fetch(BASE_URL);
+		const json = await data.json();
+		return json.url;
+	} catch (e) {
+		console.log(e.message);
+	}
+};
+
+const loadImg = async () => {
+	const img = document.getElementsByTagName('img')[0];
+	img.src = await getCats();
+};
+
+loadImg();
+
+const btn = document.getElementById('change-cat');
+btn.addEventListener('click', loadImg);
diff --git a/javascript-assincrono/projeto-html/index.html b/javascript-assincrono/projeto-html/index.html
@@ -0,0 +1,18 @@
+<!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" />
+		<link rel="stylesheet" href="assets/css/styles.css" />
+		<title>Just... cats!</title>
+	</head>
+	<body>
+		<main>
+			<h1>Just... cats!</h1>
+			<img id="cat" /><br />
+			<button id="change-cat">Change cat</button>
+		</main>
+		<script src="assets/js/scripts.js"></script>
+	</body>
+</html>
diff --git a/playground.js b/playground.js
@@ -1,23 +1,19 @@
-function calculaIdade(anos) {
-	return `Daqui a ${anos} anos, ${this.nome} terá ${
-		this.idade + anos
-	} anos de idade.`;
-}
-
-const pessoa1 = {
-	nome: 'Maria',
-	idade: 30,
-};
+async function resolvePromise() {
+	const myPromise = new Promise((resolve, reject) => {
+		window.setTimeout(() => {
+			resolve('Resolvida');
+		}, 3000);
+	});
 
-const pessoa2 = {
-	nome: 'Carla',
-	idade: 26,
-};
+	let result;
 
-const animal = {
-	nome: 'Fiona',
-	idade: 5,
-	raca: 'Pug',
-};
+	try {
+		result = await myPromise
+			.then((result) => result + ' passando pelo then')
+			.then((result) => result + ' e agora acabou!');
+	} catch (err) {
+		result = err.message;
+	}
 
-console.log(calculaIdade.apply(pessoa1, [4]));
+	return result;
+}
