Initial commit

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+.eslintrc.json
+Thumbs.db
+package.json
+package-lock.json
+node_modules/

README.md

@@ -0,0 +1,136 @@
+<a id="readme-top"></a>
+
+<!-- TABLE OF CONTENTS -->
+<details>
+  <summary>Table of Contents</summary>
+  <ol>
+    <li>
+      <a href="#about-the-project">About The Project</a>
+      <ul>
+        <li><a href="#built-with">Built With</a></li>
+      </ul>
+    </li>
+    <li>
+      <a href="#getting-started">Getting Started</a>
+      <ul>
+        <li><a href="#prerequisites">Prerequisites</a></li>
+        <li><a href="#installation">Installation</a></li>
+      </ul>
+    </li>
+    <li><a href="#usage">Usage</a></li>
+    <li><a href="#roadmap">Roadmap</a></li>
+    <li><a href="#contributing">Contributing</a></li>
+    <li><a href="#license">License</a></li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#acknowledgments">Acknowledgments</a></li>
+  </ol>
+</details>
+
+<!-- ABOUT THE PROJECT -->
+
+## About The Project
+
+This is a JavaScript project that implements:
+
+-   Async and callback functions.
+-   APIs
+-   Parsing data as JSON.
+-   for...of loops.
+-   Change event handlers.
+-   Creating and appending HTML elements.
+
+This web page displays contact cards. Select how many cards you want displayed on screen from the dropdown menu, and your page will automatically populate with cards that pull random users from the Random User Generator API.
+
+<div align="center">
+
+![screenshot1](screenshots/screenshot1.png "before")
+![screenshot2](screenshots/screenshot2.png "after")
+
+</div>
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+### Built With
+
+-   HTML
+-   CSS
+-   JavaScript
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- GETTING STARTED -->
+
+## Getting Started
+
+This web page was crafted with vanilla code. No dependencies here!
+
+### Prerequisites
+
+All you need is a browser (to view/interact) and a text editor (to modify).
+
+### Installation
+
+1. Clone this repo and you're all set!
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- USAGE EXAMPLES -->
+
+## Usage
+
+-   `index.html`: structure and layout.
+-   `styles.css`: design and aesthetics.
+-   `script.js`: functionality.
+-   [Random User Generator API](https://randomuser.me/)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ROADMAP -->
+
+## Roadmap
+
+There are no plans to implement additional features at this time.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTRIBUTING -->
+
+## Contributing
+
+This project is for learning/demonstration and is not being actively developed.
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- LICENSE -->
+
+## License
+
+Distributed under the [MIT License](https://choosealicense.com/licenses/mit/).
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- CONTACT -->
+
+## Contact
+
+Nate: [GitHub](https://github.com/nvsmith) | [Grepper](https://www.grepper.com/profile/intra)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>
+
+<!-- ACKNOWLEDGMENTS -->
+
+## Acknowledgments
+
+#### Skillcrush - JavaScript Fundamentals
+
+-   Module 12: Intro to APIs
+    -   Step 7 of 7: Practice Exercises: Intro to APIs
+        -   Exercise #1
+        -   Exercise #2
+-   [normalize.css](github.com/necolas/normalize.css)
+
+#### README Template
+
+-   [Best-README-Template](https://github.com/othneildrew/Best-README-Template/tree/master)
+
+<p align="right">(<a href="#readme-top">back to top</a>)</p>

css/main.css

@@ -0,0 +1,49 @@
+body {
+  font-size: 16px;
+  font-family: "Archivo Narrow", sans-serif;
+  text-align: center;
+}
+
+.hide {
+  display: none;
+}
+
+h1 {
+  padding: 0.5em;
+  font-size: 2.5em;
+  font-family: "Julius Sans One", sans-serif;
+}
+
+img {
+  border-radius: 50%;
+  border: 3px solid steelblue;
+}
+
+.random-peeps {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.random-peeps div {
+  flex-basis: 250px;
+  text-align: center;
+  padding: 0.5em;
+  border: 1px solid steelblue;
+  background-color: #c6f6f6;
+  margin: 1em;
+  -webkit-box-shadow: 5px 5px 8px 5px rgba(0, 0, 0, 0.377);
+  box-shadow: 5px 5px 18px 5px rgba(0, 0, 0, 0.377);
+}
+.num-users label {
+  font-size: 1.25em;
+}
+
+#users {
+  margin: 0 0.75em;
+  padding: 0.5em;
+  color: steelblue;
+  font-weight: bold;
+  font-size: 1em;
+  font-family: "Archivo Narrow", sans-serif;
+}

index.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Random User Generator</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" />
+        <link
+            href="https://fonts.googleapis.com/css2?family=Archivo+Narrow&family=Julius+Sans+One&display=swap"
+            rel="stylesheet"
+        />
+        <link rel="stylesheet" href="css/main.css" />
+        <script src="js/script.js" defer></script>
+    </head>
+
+    <body>
+        <div class="main">
+            <h1>Random User Generator!</h1>
+            <div class="num-users">
+                <label for="users">How many users would you like?</label>
+                <select name="users" id="users">
+                    <option value="1">1</option>
+                    <option value="3">3</option>
+                    <option value="5">5</option>
+                </select>
+            </div>
+            <div class="random-peeps"></div>
+        </div>
+    </body>
+</html>

js/script.js

@@ -0,0 +1,57 @@
+// Step 7 of 7
+// Practice Exercises: Intro to APIs
+
+// Exercise #1
+// fetch(), async/await syntax, .json(), function expression,
+// innerHTML, for…of loop, createElement(), append()
+
+// Exercise #2
+// async functions, fetch, template literals, change event
+
+// ----- Random User Generator API -----
+
+const randomFolks = document.querySelector(".random-peeps"); // cards container
+const selectUserNumber = document.querySelector("#users"); // drop-down list
+
+// Begin communication between program & API.
+const getData = async function (numUsers) {
+  //   Get data from a selected number of random users.
+  const usersRequest = await fetch(
+    `https://randomuser.me/api?results=${numUsers}`
+  );
+  const data = await usersRequest.json();
+  const userResults = data.results; // array of objects
+  displayUsers(userResults);
+};
+
+// getData(1); optional: pass a default number of user cards to load.
+getData();
+
+// Display users with their name, country, and avatar
+const displayUsers = function (userResults) {
+  // Clear the cards container element.
+  randomFolks.innerHTML = "";
+
+  // Loop thru each user.
+  for (let user of userResults) {
+    // Parse the desired data
+    const country = user.location.country;
+    const name = user.name.first;
+    const imageUrl = user.picture.medium;
+
+    // Append each user's data to the webpage as a new card div.
+    const userDiv = document.createElement("div");
+    userDiv.innerHTML = `
+        <h3>${name}</h3>
+        <p>${country}</p>
+        <img src=${imageUrl} alt="user avatar" />
+        `;
+    randomFolks.append(userDiv);
+  }
+};
+
+// Select number of users to fetch/display.
+selectUserNumber.addEventListener("change", function (e) {
+  const numUsers = e.target.value;
+  getData(numUsers);
+});