Dev Pal Screencast 1: Promises, async and await — basic fetch

In this example below you will see how to do a Dev Pal Screencast 1: Promises, async and await — basic fetch with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by hankchizljaw, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright hankchizljaw ©
  • HTML
  • CSS
  • JavaScript
    <section class="boilerform">
    <h2>Find a GitHub user</h2>
    <form class="form" method="post">
        <div class="form__row">
            <label for="name" class="c-label">Username</label>
            <input type="search" name="username" id="username" class="[ c-input-field ] [ js-name-field ]" value="" autocorrect="off" required />
        </div>
        <div class="form__row">
            <button class="c-button" type="submit">Search</button>    
        </div>
    </form>
</section>
<div class="user" aria-live="assertive">
    <div class="user__avatar">
        <img class="js-avatar" src="https://www.placehold.it/200X200" alt="A placeholder image" />
    </div>
    <div class="user__info">
        <h2 class="js-name">Loading a user...</h2>
        <p class="js-bio"></p>
        <p><a href="#" class="js-profile-link">GitHub profile</a></p>
    </div>
</div>

/*Downloaded from https://www.codeseek.co/hankchizljaw/dev-pal-screencast-1-promises-async-and-await-andx2014-basic-fetch-YLpWLV */
    :root {
    --bg: #f3f3f3;
    --radius: 4px;
    --border: #999;
    --links: #b71540
}

body {
    padding: 2rem;
    font-family: -apple-system, BlinkMacSystemFont, 
                    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", 
                    "Fira Sans", "Droid Sans", "Helvetica Neue", 
                    sans-serif;
    background: var(--bg);
}

.form__row + .form__row {
    padding-top: 1rem;
}

h2 {
    font-weight: 300;
    margin: 0 0 1rem 0;
}

.user {
    display: flex;
    align-items: flex-start;
    padding: 2rem 0 0 0;
    margin: 2rem 0 0 0;
    border-top: 1px solid var(--border);
    max-width: 500px;
}

.user__avatar {
    width: 70px;
    flex-shrink: 0;
}

.user__avatar img {
    border-radius: var(--radius);
    width: 100%;
}

.user__info {
    padding-left: 1rem;
}

a {
    color: var(--links);
    text-decoration-skip-ink: auto;
}

a:hover,
a:focus {
    text-decoration: none;
}


/*Downloaded from https://www.codeseek.co/hankchizljaw/dev-pal-screencast-1-promises-async-and-await-andx2014-basic-fetch-YLpWLV */
    // See the screencast here: https://youtu.be/DBPpqAlGS0k?t=1m33s

// Clear our console to remove any other logs from extensions etc
console.clear();

// We created this object in the screencast, but never actually used it ­čÖâ
//const sharedState = {
//    
//};

// Load our DOM elements
const nameElement = document.querySelector('.js-name');
const bioElement = document.querySelector('.js-bio');
const profileLinkElement = document.querySelector('.js-profile-link');
const imageElement = document.querySelector('.js-avatar');
const formElement = document.querySelector('form');
const nameField = document.querySelector('.js-name-field');

// Load the data for our user from GitHub. We'll load my (hankchizljaw) profile by default
function loadUser(name = 'hankchizljaw') {
    
    fetch(`https://api.github.com/users/${ name }`)
        .then(response => {
            
            // Run the `json` method to extract the json payload from the GitHub response
            return response.json();
        })
        .then(json => {
            
            // We've got json, so render the user
            renderUser(json);
        })
        // We catch any errors here 
        .catch(error => { console.error(error) });
}

// Take the passed data and assign to the relevant DOM elements
function renderUser(data) {
    nameElement.innerHTML = data.name;
    bioElement.innerHTML = data.bio;
    profileLinkElement.setAttribute('href', data.html_url);
    imageElement.setAttribute('alt', `Image of ${ data.name }`);
    imageElement.setAttribute('src', data.avatar_url);
}

// Catch the form's submit method 
formElement.addEventListener('submit', handleSubmit);

function handleSubmit(evt) {
    
    // Stop the form from posting back to the server
    evt.preventDefault();
    
    // Load our user
    loadUser(nameField.value);
}

// Load the default user to begin
loadUser();

Comments