Fetch GET API Call

PHOTO

Wed Jun 22 2022 15:23:36 GMT+0000 (UTC)

Saved by @zaccamp #markup

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>

https://www.digitalocean.com/community/tutorials/how-to-use-the-javascript-fetch-api-to-get-data

Save snippets that work from anywhere online with our extensions

Available in the Chrome Web Store

Get Firefox Add-on

Get VS Code extension

Comments

More like this

#markup #link #stylesheet

Working with Hypertext Attributes

href=”url” -------------Provides the url of the hypertext link

target=(_blank|_parent|_self|_top) --------------Specifies where to open the linked document

download=”filename” ------------Indicates that the link should be downloaded as
a file, where filename is the name given to the
downloaded file [HTML5]

rel=”type” ---------Provides the relationship between the linked
document and the current page

hreflang=”lang” --------------Indicates the language of the linked document

type=”mime-type” -------------Indicates the media type of the linked document

#markup #link #stylesheet

Linking to a Phone Number

tel:phone
Call: <a href=”tel:+17045551151”>(704) 555-1151</a>

#markup #link #stylesheet

To link to an e-mail address:

<a href=”mailto:curbside.thai@example.com”>
 curbside.thai@example.com
</a>

#markup #link #stylesheet

Turning an Inline Image into a Link - reference to the hypertext link

<a href=”ct_start.html”><img src=”ct_logo2.png”
alt=”Curbside Thai” /></a>

#markup #link #stylesheet

Marking a Hypertext Link

<a href=”url”>content</a>

#markup #link #stylesheet

Description Lists

<dl>
 <dt>term1</dt>
 <dd>description1</dd>
 <dt>term2</dt>
 <dd>description2a</dd>
 <dd>description2b</dd>
 ...
</dl>

#markup #link #stylesheet

<img src=”file” alt=”text” />

#markup #link #stylesheet

Linking an HTML Document to a Style Sheet

<link href=”file” rel=”stylesheet” />

Writing the Page Body

<body>
 <header>
 </header>
 <nav>
 </nav>
 <article>
 </article>
 <aside>
 </aside>
 <footer>
 </footer>
</body>

HTML5 Structural Elements<article>

<article>
   <h1>PB&J Sandwiches</h1>
   <p>Here's how to make this snack staple.</p> 
   
   <section>
      <h2>Ingredients</h2>
      <ul>
         <li>Peanut Butter</li>
         <li>Jelly</li>
         <li>Bread</li>
      </ul>
   </section>

   <section>
      <h2>Instructions</h2>
      <ol>
         <li>Get two slices of bread.</li>
         <li>Spread peanut butter on one side of both slices.</li>
         <li>Spread jelly over the peanut button on one slice of bread.</li>
         <li>Press bread slices together.</li>
      </ol>
   </section>
</article>

HTML5 Structural Elements

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Chili Recipe</title>
</head>
<body>
   <h1>Recipe Book</h1>
   <nav>
      <ul>
         <li><a href="recipes.html">Recipes</a></li>
         <li><a href="tips.html">Tips</a></li>
         <li><a href="about.html">About</a></li>
      </ul>
   </nav>
   
   <main>
      <h2>Recipe for Chili</h2>
      <p>Instructions...</p>
   </main>
   
   <footer>Copyright, me</footer>
   
</body>
</html>

Basic slick Slider Codes

<html>
  <head>
  <title>My Now Amazing Webpage</title>
  <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
  <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
  </head>
  <body>

  <div class="your-class">
    <div>your content</div>
    <div>your content</div>
    <div>your content</div>
  </div>

  <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  <script type="text/javascript" src="slick/slick.min.js"></script>

  <script type="text/javascript">
    $(document).ready(function(){
      $('.your-class').slick({
        setting-name: setting-value
      });
    });
  </script>

  </body>
</html>

Fetch GET API Call

<h1>Authors</h1>
<ul id="authors"></ul>

<script>
  const ul = document.getElementById('authors');
  const list = document.createDocumentFragment();
  const url = 'https://jsonplaceholder.typicode.com/users';

  fetch(url)
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      let authors = data;

      authors.map(function(author) {
        let li = document.createElement('li');
        let name = document.createElement('h2');
        let email = document.createElement('span');

        name.innerHTML = `${author.name}`;
        email.innerHTML = `${author.email}`;

        li.appendChild(name);
        li.appendChild(email);
        list.appendChild(li);
      });
    }).
    .catch(function(error) {
      console.log(error);
    });

  ul.appendChild(list);
</script>

How to Use Position: Sticky for Sidebars with Pure CSS and Bootstrap | DigitalOcean

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Sticky Position Example</title>
    <style>
      * {
        box-sizing: border-box;
      }

      html,
      body {
        margin: 0;
        padding: 0;
      }

      .placeholder-example {
        background: lavender;
        height: 100vh;
        padding: 1em;
      }

      .sticky-example {
        background: cornflowerblue;
        padding: 1em;
      }

      .sticky {
        position: sticky;
        top: 0;
      }
    </style>
  </head>
  <body>
    <div class="sticky-example sticky">Sticky</div>
    <div class="placeholder-example">Placeholder</div>
  </body>
</html>

HTML5 Template: A Basic Boilerplate for Any Project - SitePoint

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>A Basic HTML5 Template</title>
  <meta name="description" content="A simple HTML5 Template for new projects.">
  <meta name="author" content="SitePoint">

  <meta property="og:title" content="A Basic HTML5 Template">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.sitepoint.com/a-basic-html5-template/">
  <meta property="og:description" content="A simple HTML5 Template for new projects.">
  <meta property="og:image" content="image.png">

  <link rel="icon" href="/favicon.ico">
  <link rel="icon" href="/favicon.svg" type="image/svg+xml">
  <link rel="apple-touch-icon" href="/apple-touch-icon.png">

  <link rel="stylesheet" href="css/styles.css?v=1.0">

</head>

<body>
  <!-- your content here... -->
  <script src="js/scripts.js"></script>
</body>
</html>

Browse more snippets >>