Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Nazgul: Asynchronous programming, 3 weeks #399

Open
NazgulM opened this issue Aug 26, 2022 · 1 comment
Open

Nazgul: Asynchronous programming, 3 weeks #399

NazgulM opened this issue Aug 26, 2022 · 1 comment
Assignees
@NazgulM
Labels
check-in week-1 week-2
Milestone
8. Asynchronous P...

Comments

@NazgulM
Copy link
Contributor

NazgulM commented Aug 26, 2022

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);
        }
    }
}
@NazgulM NazgulM added this to the 8. Asynchronous Programming milestone Aug 26, 2022
@NazgulM NazgulM self-assigned this Aug 26, 2022
@NazgulM
Copy link
Contributor Author

NazgulM commented Aug 26, 2022

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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@NazgulM NazgulM

Labels
check-in week-1 week-2
Projects
None yet
Milestone
8. Asynchronous Programming
Development

No branches or pull requests
1 participant
@NazgulM