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

In this example below you will see how to do a Dev Pal Screencast 1: Promises, async and await — basic fetch (template) 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-template-MGJBJX */
    :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-template-MGJBJX */
    // See the full pen here: https://codepen.io/hankchizljaw/pen/YLpWLV
// See the screencast here: https://youtu.be/DBPpqAlGS0k?t=1m33s

Comments