🚀 30 Days of JavaScript – Day 21 Today I explored how applications communicate with servers. 💡 Project: Fetching Data from API This project loads user data from an external API and displays it dynamically. 🧠 Concepts Used: i) fetch API ii) async/await iii) JSON data handling iv) DOM rendering 📌 This helped me understand how frontend applications interact with backend services. 🎥 Demo below 👇 Full source code in the First comments. #JavaScript #WebDevelopment #API #FrontendDevelopment #LearningJavaScript

<!DOCTYPE html> <html> <head>   <title>API Fetch</title>   <style>     body {       font-family: Arial;       text-align: center;       margin-top: 50px;     }     .user {       margin: 10px;       padding: 10px;       border: 1px solid #ccc;     }   </style> </head> <body> <h2>User List (From API)</h2> <button onclick="getUsers()">Load Users</button> <div id="output"></div> <script> async function getUsers() {   let res = await fetch("https://jsonplaceholder.typicode.com/users");   let data = await res.json();   let output = document.getElementById("output");   output.innerHTML = "";   data.forEach(user => {     let div = document.createElement("div");     div.className = "user";     div.innerHTML = `       <b>${user.name}</b><br>       ${user.email}<br>       ${user.address.city}     `;     output.appendChild(div);   }); } </script> </body> </html>

Like
Reply

To view or add a comment, sign in

Explore content categories