Dev Pal Screencast 1: Promises, async and await — running code in sequence(template)

In this example below you will see how to do a Dev Pal Screencast 1: Promises, async and await — running code in sequence(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
    <div id="output-element" aria-live="assertive"></div>

/*Downloaded from https://www.codeseek.co/hankchizljaw/dev-pal-screencast-1-promises-async-and-await-andx2014-running-code-in-sequencetemplate-OZWwjm */
    :root {
    --bg: #f3f3f3;
    --border: #999
}

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);
}

ul {
    list-style: none;
    margin: 0;
}

li {
    display: block;
}

li + li {
    border-top: 1px solid var(--border);
}

dl {
    line-height: 1.6;
}

dd:after {
    content: "\A";
    white-space: pre;
}

dt {
    font-weight: 600;
    min-width: 80px;
    display: inline-block;
}

dd {
    margin: 0 0 0 0.4rem;
    display: inline;
}


/*Downloaded from https://www.codeseek.co/hankchizljaw/dev-pal-screencast-1-promises-async-and-await-andx2014-running-code-in-sequencetemplate-OZWwjm */
    // See the screecast here: https://youtu.be/DBPpqAlGS0k?t=25m52s
// See the full pen: https://codepen.io/hankchizljaw/pen/erBzwN

Comments