From 4b5a0bc3c1d772fef3d2f65f3488f2dd801d1306 Mon Sep 17 00:00:00 2001 From: Xaid-vfx Date: Sun, 16 Oct 2022 21:46:58 +0530 Subject: [PATCH] Hacktoberfest --- Fetch and Display data from any API/index.css | 16 ++++++++++++++++ Fetch and Display data from any API/index.html | 18 ++++++++++++++++++ Fetch and Display data from any API/script.js | 9 +++++++++ 3 files changed, 43 insertions(+) create mode 100644 Fetch and Display data from any API/index.css create mode 100644 Fetch and Display data from any API/index.html create mode 100644 Fetch and Display data from any API/script.js diff --git a/Fetch and Display data from any API/index.css b/Fetch and Display data from any API/index.css new file mode 100644 index 0000000..cc70c93 --- /dev/null +++ b/Fetch and Display data from any API/index.css @@ -0,0 +1,16 @@ +#card{ + display: flex; + justify-content: center; + flex-wrap: wrap; + align-items: center; +} +p{ + padding: 50px; + width: 200px; + height: 200px; + border: 1px solid; + margin: 20px; +} +h2{ + text-align: center; +} \ No newline at end of file diff --git a/Fetch and Display data from any API/index.html b/Fetch and Display data from any API/index.html new file mode 100644 index 0000000..3b1b9c6 --- /dev/null +++ b/Fetch and Display data from any API/index.html @@ -0,0 +1,18 @@ + + + + + + + + + Document + + +

How to Fetch and Display Data From an API

+
+ +
+ + + \ No newline at end of file diff --git a/Fetch and Display data from any API/script.js b/Fetch and Display data from any API/script.js new file mode 100644 index 0000000..bce812c --- /dev/null +++ b/Fetch and Display data from any API/script.js @@ -0,0 +1,9 @@ +async function get() { + const data = await fetch('https://fakestoreapi.com/products').then(res => res.json()); + data.map(e => { + const para = document.createElement("p"); + para.innerHTML = e.title; + document.getElementById("card").appendChild(para); + }) +} +get();