Created
March 26, 2020 09:08
-
-
Save RajSolai/871ba691a4846108c56d2453092614a1 to your computer and use it in GitHub Desktop.
Simple Dynamic fetch from API using Vanilla JS
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| let app = document.documentElement; // the whole document object | |
| let container = document.getElementById("res"); | |
| // onload function that is fired when the document loads | |
| const onload = () => { | |
| getData(); | |
| }; | |
| // fucntion to get remote data in (backend integration) | |
| const getData = () => { | |
| fetch("https://jsonplaceholder.typicode.com/users") | |
| .then(res => res.json()) | |
| .then(datas => { | |
| datas.map(data => { | |
| console.log(data); | |
| createCard(data.name, data.username); | |
| }); | |
| }); | |
| }; | |
| const createCard = (title, content) => { | |
| let card = document.createElement("div", { class: "card" }); | |
| let cardTitle = document.createElement("h3"); | |
| let cardContent = document.createElement("p"); | |
| // setting up class name for elements | |
| card.setAttribute("class","card"); | |
| // adding values | |
| cardTitle.innerText = title; | |
| cardContent.innerText = content; | |
| // appending created elements to the parent element | |
| card.appendChild(cardTitle); | |
| card.appendChild(cardContent); | |
| container.appendChild(card); | |
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <link rel="stylesheet" href="css/style.css" /> | |
| <title>My App</title> | |
| </head> | |
| <body id="body" onload="onload()"> | |
| <div class="header"> | |
| <h1>Sample app</h1> | |
| </div> | |
| <main> | |
| <div class="jumbo"> | |
| <h2>Card Title 💖</h2> | |
| <p> | |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis | |
| deserunt, commodi dolore reprehenderit, eius beatae nostrum alias | |
| assumenda quasi nam odio eos cumque dolores dolorem laborum harum | |
| autem aliquid Lorem, ipsum dolor sit amet consectetur adipisicing | |
| elit. Veritatis labore natus officia nihil. Ut asperiores nisi | |
| doloribus, facere temporibus blanditiis eius? Veniam voluptatibus | |
| laudantium ipsam. Totam, doloremque. Ea, culpa fugiat. | |
| </p> | |
| </div> | |
| <div id="res"> | |
| </div> | |
| </main> | |
| <script src="js/app.js"></script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| :root{ | |
| padding: 0; | |
| margin: 0; | |
| font-size: 16px; | |
| font-family:'Courier New', Courier, monospace; | |
| --primary-body : #ffffff; | |
| --primary-color : pink; | |
| --primary-header : #f76a8c; | |
| --primary-card : #be79df; | |
| --primary-font : #000000; | |
| } | |
| body{ | |
| margin: 0; | |
| padding: 0; | |
| background: var(--primary-body); | |
| transition: none; | |
| } | |
| .header{ | |
| display: flex; | |
| justify-content: start; | |
| color: var(--primary-font); | |
| align-items: center; | |
| background: var(--primary-header); | |
| padding: 10px; | |
| } | |
| .header-ctrls{ | |
| align-self: center; | |
| margin-left: auto; | |
| } | |
| .btn{ | |
| margin: 1rem; | |
| border: solid #000000 0px; | |
| border-radius: 5px; | |
| font-weight: bold; | |
| font-family: 'Courier New', Courier, monospace; | |
| padding: 10px 20px; | |
| } | |
| h1{ | |
| margin: 0; | |
| padding: 0; | |
| } | |
| .jumbo{ | |
| padding: 2rem; | |
| border-radius: 2px; | |
| color: var(--primary-font); | |
| background-color: var(--primary-color); | |
| } | |
| .card{ | |
| padding: 2rem; | |
| margin: 1rem; | |
| border-radius: 2px; | |
| color: var(--primary-font); | |
| background-color: var(--primary-card); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment