Nazgul: Asynchronous programming, 3 weeks

2 weeks

Sorry I forgot to create check-ins for last week. Sometimes is good, sometimes I really don't know what happened around me. Last week was good with understandings promise. So for this week I stucked with get user by id. This is my code:

import { INPUT, OUTPUT, SEARCH, BUTTON_GETUSERS } from "./data.js";
import { CLICK_EVENT, CLICK_EVENT_BYID } from "./data.js";

const url = "https://jsonplaceholder.typicode.com/users";

// fetch(url)
// .then(res => {
//     if(res.ok) {
//         console.log('success')
//     } else {
//         console.log('not successful')
//     }
//     res.json()
// })
// .then(data => console.log(data))
// .catch(error => console.log('error'))

let getUsersBtn = document.getElementById('getUsers-btn');
getUsersBtn.addEventListener('click', programFunction);
const result = document.getElementById('result')

function programFunction() {
    fetch(url)
    .then((response) => {
        if(response.ok) {
            return response.json()
        } else {
            throw Error
        }
    })

    .then(function(data) {
        showUsers(data);
    })

    .catch(function(err) {
        document.getElementById('cannotLoad').innerHTML = err.message;
        console.log(err)
    });
    function showUsers(data) {
        let usersSummary = document.getElementById('result');
        clearResult();
        for (let i = 0; i<data.length; i++) {
            let li = document.createElement('li');
            li.innerHTML = 'USER ID' +  ' ' + data[i].id + ('<br>')+ 'Name: ' + data[i].name +  ' ' + ("<br>") + 'Username: ' + data[i].username + 
            ' ' + ("<br>") + 'Email: ' + data[i].email + ' ' + ("<br>") + 'Address: ' + data[i].address.street + ' ' + data[i].address.suite + 
            ' ' + ("<br>") + 'Phone: ' + data[i].phone + ' ' + ("<br>") + 'Website: ' + data[i].website;
            usersSummary.appendChild(li);

            document.getElementById("getUsers-btn").disabled = 'true';

        }
    }
    function getUser (input) {
        fetch(url)
    .then((response) => {
        if(response.ok) {
            return response.json()
        } else {
            throw Error
        }
    })

    .then(function(data) {
        showUserById(data);
    })

    .catch(function(err) {
        document.getElementById('cannotLoad').innerHTML = err.message;
        console.log(err)
    });
    function showUserById(data) {
        let userById = document.getElementById('result');

        for (let i = 0; i<data.length; i++) {
            let li = document.createElement('li');
            li.innerHTML = 'USER ID' +  ' ' + data[i].id + ('<br>')+ 'Name: ' + data[i].name +  ' ' + ("<br>") + 'Username: ' + data[i].username + 
            ' ' + ("<br>") + 'Email: ' + data[i].email + ' ' + ("<br>") + 'Address: ' + data[i].address.street + ' ' + data[i].address.suite + 
            ' ' + ("<br>") + 'Phone: ' + data[i].phone + ' ' + ("<br>") + 'Website: ' + data[i].website;
            usersSummary.appendChild(li);
    }   
}
    const button = document.getElementById('checkId-btn');
    button.addEventListener('click', clickById)
    function clickById() {
        const input = document.getElementById('enterId').value;
        getUser(input);
    }
}
function clearResult() {
        while (result.firstChild) {
        result.removeChild(result.firstChild);
        }
    }
}

I can see all users, but cannot get user by Id, also saw other classmates work, not helping for me. So just can ask here. 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>Practice task</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1 class="text-center">Welcome to users API</h1>
    <div class="col-md-12 text-center py-3">
    <button type="button" class="btn btn-outline-primary" id ="getUsers-btn">Get users</button>
</div>
<div class="input-group mb-3">
    <input type="number" class="form-control" placeholder="Enter a id" id="enterId">
    <input type="submit" class="btn btn-outline-success" id ="checkId-btn">
    <div class="d-flex justify-content-center">  
    </div>
</div>
    <div id="result"></div>

<script type="module" src="./init.js"></script>
</body>
</html>

lab-brussels-1 / home

Nazgul: Asynchronous programming, 3 weeks #399

2 weeks