Deployed 4ea8708 with MkDocs version: 1.5.3

rest/index.html

@@ -552,6 +552,30 @@
     </span>
   </a>
 
+    <nav class="md-nav" aria-label="HTTP Requests in JavaScript">
+      <ul class="md-nav__list">
+
+          <li class="md-nav__item">
+  <a href="#example-usage-github-rest-api" class="md-nav__link">
+    <span class="md-ellipsis">
+      Example Usage (GitHub REST API)
+    </span>
+  </a>
+
+</li>
+
+          <li class="md-nav__item">
+  <a href="#example-output" class="md-nav__link">
+    <span class="md-ellipsis">
+      Example output
+    </span>
+  </a>
+
+</li>
+
+      </ul>
+    </nav>
+
 </li>
 
         <li class="md-nav__item">
@@ -686,6 +710,30 @@
     </span>
   </a>
 
+    <nav class="md-nav" aria-label="HTTP Requests in JavaScript">
+      <ul class="md-nav__list">
+
+          <li class="md-nav__item">
+  <a href="#example-usage-github-rest-api" class="md-nav__link">
+    <span class="md-ellipsis">
+      Example Usage (GitHub REST API)
+    </span>
+  </a>
+
+</li>
+
+          <li class="md-nav__item">
+  <a href="#example-output" class="md-nav__link">
+    <span class="md-ellipsis">
+      Example output
+    </span>
+  </a>
+
+</li>
+
+      </ul>
+    </nav>
+
 </li>
 
         <li class="md-nav__item">
@@ -721,6 +769,25 @@ <h2 id="http-request-lingo">HTTP Request Lingo<a class="headerlink" href="#http-
 <p>When you are looking for answers, it helps to ask the right questions. If you want to get information from a REST API then you need to understand <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods">HTTP request methods</a>.</p>
 <h2 id="http-requests-in-javascript">HTTP Requests in JavaScript<a class="headerlink" href="#http-requests-in-javascript" title="Permanent link">&para;</a></h2>
 <p>I made my first API request with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API">Fetch</a> from a browser. Since then I have been learning more about <a href="https://nodejs.org/en">Node</a> and using <a href="https://axios-http.com/">Axios</a> to interact with REST APIs.</p>
+<h3 id="example-usage-github-rest-api">Example Usage (<a href="https://docs.github.com/en/rest?apiVersion=2022-11-28">GitHub REST API</a>)<a class="headerlink" href="#example-usage-github-rest-api" title="Permanent link">&para;</a></h3>
+<div class="language-javascript highlight"><pre><span></span><code><span id="__span-0-1"><span class="kd">const</span><span class="w"> </span><span class="nx">projectNames</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="p">[];</span>
+</span><span id="__span-0-2">
+</span><span id="__span-0-3"><span class="k">try</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-0-4"><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="s2">&quot;Fetching GitHub projects...&quot;</span><span class="p">);</span>
+</span><span id="__span-0-5"><span class="w">  </span><span class="kd">const</span><span class="w"> </span><span class="nx">result</span><span class="w"> </span><span class="o">=</span><span class="w"> </span><span class="k">await</span><span class="w"> </span><span class="nx">axios</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">process</span><span class="p">.</span><span class="nx">env</span><span class="p">.</span><span class="nx">API_URL</span><span class="p">);</span>
+</span><span id="__span-0-6"><span class="w">  </span><span class="nx">result</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">forEach</span><span class="p">((</span><span class="nx">element</span><span class="p">)</span><span class="w"> </span><span class="p">=&gt;</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-0-7"><span class="w">    </span><span class="nx">projectNames</span><span class="p">.</span><span class="nx">push</span><span class="p">(</span><span class="nx">element</span><span class="p">.</span><span class="nx">name</span><span class="p">);</span>
+</span><span id="__span-0-8"><span class="w">  </span><span class="p">});</span>
+</span><span id="__span-0-9"><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="sb">`My GitHub project names:\n</span><span class="si">${</span><span class="nx">projectNames</span><span class="p">.</span><span class="nx">join</span><span class="p">(</span><span class="s2">&quot;, &quot;</span><span class="p">)</span><span class="si">}</span><span class="sb">`</span><span class="p">);</span>
+</span><span id="__span-0-10"><span class="p">}</span><span class="w"> </span><span class="k">catch</span><span class="w"> </span><span class="p">(</span><span class="nx">error</span><span class="p">)</span><span class="w"> </span><span class="p">{</span>
+</span><span id="__span-0-11"><span class="w">  </span><span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">error</span><span class="p">);</span>
+</span><span id="__span-0-12"><span class="p">}</span>
+</span></code></pre></div>
+<h3 id="example-output">Example output<a class="headerlink" href="#example-output" title="Permanent link">&para;</a></h3>
+<div class="language-bash highlight"><pre><span></span><code><span id="__span-1-1">Fetching<span class="w"> </span>GitHub<span class="w"> </span>projects...
+</span><span id="__span-1-2">My<span class="w"> </span>GitHub<span class="w"> </span>project<span class="w"> </span>names:
+</span><span id="__span-1-3">CRA-Starter,<span class="w"> </span>FCC-Front-End-Libraries-Projects,<span class="w"> </span>FCC-JavaScript-Algorithms-and-Data-Structures-Projects,<span class="w"> </span>FCC-Responsive-Web-Design-Projects,<span class="w"> </span>github-react-portfolio-template,<span class="w"> </span>mshuber1981,<span class="w"> </span>next-starter,<span class="w"> </span>Portfolio,<span class="w"> </span>react-contact-form,<span class="w"> </span>work-life
+</span></code></pre></div>
 <h2 id="my-work-life-in-json">My work life in JSON<a class="headerlink" href="#my-work-life-in-json" title="Permanent link">&para;</a></h2>
 <p>I have to look at it so often now, when people start describing problems to me at work now I catch myself thinking about key-value pairs and what things might be objects vs arrays. This is a great resource to understand what JSON is and why it is important.</p>
 <p><a href="https://stackoverflow.blog/2022/06/02/a-beginners-guide-to-json-the-data-format-for-the-internet/">A beginner’s guide to JSON, the data format for the internet</a></p>