Merge pull request #193 from Mefisto04/mefisto

Create Avatar Generator Webpage
DhanushNehru · Oct 14, 2023 · eb0a236 · eb0a236
2 parents 473af6f + 4b7e3d1
commit eb0a236
Showing 1 changed file with 96 additions and 0 deletions.
diff --git a/Avatar Generator/avatar.html b/Avatar Generator/avatar.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            margin: 0;
+            padding: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+        }
+
+        .container {
+            text-align: center;
+            background-color: #fff;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 20px;
+            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+        }
+
+        h1 {
+            margin-bottom: 20px;
+        }
+
+        #userCards {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+        }
+
+        .userCard {
+            border: 1px solid #ccc;
+            border-radius: 5px;
+            padding: 20px;
+            margin: 10px;
+            width: 200px;
+            text-align: center;
+        }
+
+        .userAvatar {
+            border-radius: 50%;
+            width: 80px;
+            height: 80px;
+            margin-bottom: 10px;
+        }
+    </style>
+    <title>Random User Cards</title>
+</head>
+<body>
+    <div class="container">
+        <h1>Random User Cards</h1>
+        <div id="userCards"></div>
+    </div>
+
+    <script>
+        document.addEventListener('DOMContentLoaded', function () {
+            const userCardsContainer = document.getElementById('userCards');
+
+            function generateUserCards(numCards) {
+                for (let i = 0; i < numCards; i++) {
+                    fetch('https://randomuser.me/api/')
+                        .then(response => response.json())
+                        .then(data => {
+                            const user = data.results[0];
+                            const name = `${user.name.first} ${user.name.last}`;
+                            const experience = `Experience : ${user.dob.age-20}`;
+                            const city = user.location.city;
+                            const avatar = user.picture.medium;
+
+                            const userCard = document.createElement('div');
+                            userCard.classList.add('userCard');
+                            userCard.innerHTML = `
+                                <img src="${avatar}" alt="User Avatar" class="userAvatar">
+                                <h2>${name}</h2>
+                                <p>${experience}</p>
+                                <p>${city}</p>
+                            `;
+
+                            userCardsContainer.appendChild(userCard);
+                        })
+                        .catch(error => console.error('Error fetching random user:', error));
+                }
+            }
+
+            // Generate a specified number of user cards (e.g., 5)
+            generateUserCards(10);
+        });
+    </script>
+</body>
+</html>