add day

lzaquine · Aug 4, 2022 · f1a4a74 · f1a4a74
1 parent e2e739e
commit f1a4a74
Show file tree

Hide file tree

Showing 3 changed files with 142 additions and 0 deletions.
diff --git a/Week_5_Classes/Day_4_05/aula2.js b/Week_5_Classes/Day_4_05/aula2.js
@@ -0,0 +1,69 @@
+/* npm i axios
+
+create a folder called services and inside create api.service.js
+inside of this file,
+
+const axios = require('axios')
+
+class ApiService {
+    constructor() {
+        this.api = axios.create({
+            baseURL: 'https://ih-crud.api.herokuapp.com',
+        });
+    }
+
+    getAllCharacters = () => {
+        return this.api.get(`/characters`)
+    }
+
+    getOneCharacter = (id) => {
+        return this.api.get(`/characters/:{id}`)
+    }
+
+    createCharacter = (character) => {
+        return this.api.post(`/characters`, character)
+    }
+
+    editCharacter = (id, updatedInfo) => {
+        return this.api.put(`/characters/${id}`, updatedInfo)
+    }
+
+    deleteOneCharacter = (id) => {
+        return this.api.delete(`/characters/:{id}`)
+    }
+
+} 
+
+module.exports = ApiService;
+
+
+
+depois disso, criamos o character.router.js no routes
+
+const router = require('express').Router();
+const ApiService = require('./services/api.service');
+
+
+// Our route, from our own API/server
+
+// get all characters
+router.get('/characters', (req, res, next) => {
+    characterApi.getAllCharacters()
+    .then((response) => {
+        res.json(response.data);
+    });
+})
+
+
+
+
+module.exports = router;
+
+
+lembrar que temos que adicionar no app.js cada file
+
+const characterRoutes
+
+
+
+*/
diff --git a/Week_5_Classes/Day_4_05/index.html b/Week_5_Classes/Day_4_05/index.html
@@ -0,0 +1,32 @@
+<!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>Countries</title>
+</head>
+<body>
+    <h1>Countries info</h1>
+
+
+
+    <div>
+
+        <input type="text" id="country-name-input">
+        <button type="submit" id="get-country-btn">Search Country</button>
+
+    </div>
+
+    <h2 id="country-name"></h2>
+    <p id="country-capital"></p>
+
+    <div>
+        <img src="" id="country-flag" height="200px" alt="country flag">
+    </div>
+
+
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Week_5_Classes/Day_4_05/script.js b/Week_5_Classes/Day_4_05/script.js
@@ -0,0 +1,41 @@
+/* axios({
+    method: 'GET',  HTTP method to be used - get, post, put, ... 
+    url: 'https://restcountries.com',  URL to be used for the requests 
+    params: {name: 'Andre'},  URL parameters to be sent to the API 
+})
+.then((response) => {
+     Use the code from the response
+})
+.catch((err) => console.log(err)); */
+
+/* axios
+.get('https://restcountries.com/v3.1/name/russia')
+.then((response) => {
+    console.log(response.data);
+})
+.catch((err) => console.log(err)); */
+
+const getCountryInfo = async (countryName) => {
+    try {
+    let response = await axios.get(`https://restcountries.com/v3.1/name/${countryName}`);
+    let country = response.data[0];
+    console.log(country);
+
+    document.getElementById('country-name').innerText = country.name.common;
+    document.getElementById('country-capital').innerText = country.capital[0];
+    document.getElementById('country-flag').setAttribute('src', country.flags.png)
+
+    } catch (error) {
+        console.log(error);
+        // Terniary operator
+        // First step - ? condition to check
+        // After the ? - What runs if condition is true
+        // After the : - What runs if the condition is false
+        error.response.status === 404 ? alert(`The country ${countryName} doesn't exists.`) : alert(`Sorry, server error.`);
+    }
+}
+
+document.getElementById('get-country-btn').addEventListener('click', () => {
+    const userInput = document.getElementById('country-name-input').value
+    getCountryInfo(userInput); 
+})