Merge pull request #209 from pankaj-bind/random-user-generator

Random user generator
dishamodi0910 · Jul 20, 2024 · aad1355 · aad1355
2 parents ca6edb8 + 9d4c850
commit aad1355
Show file tree

Hide file tree

Showing 8 changed files with 291 additions and 0 deletions.
diff --git a/Existing_API_Collection/Dad_Joke_API/README.md b/Existing_API_Collection/Dad_Joke_API/README.md
@@ -0,0 +1,40 @@
+# Best Jokes Web App
+
+This is a simple web application that fetches and displays jokes from the "icanhazdadjoke" API to entertain users with humor.
+
+## Features
+
+- Fetch and display jokes with a click of a button.
+- Enjoy a variety of funny jokes to lighten your mood.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Usage
+
+1. Open the `index.html` file in your web browser.
+2. Click the "Next Joke" button to load a new joke.
+3. Repeat step 2 to enjoy more jokes.
+
+## Code Explanation
+
+- HTML defines the structure of the web page.
+- CSS styles the elements to enhance visual appeal.
+- JavaScript handles the fetching of jokes from the API and updates the content dynamically.
+
+## API Integration
+
+This web app integrates with the "icanhazdadjoke" API to fetch random jokes.
+
+- It sends a request to the API and displays the retrieved joke on the webpage.
+
+## Credits
+
+- [icanhazdadjoke API](https://icanhazdadjoke.com)
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
diff --git a/Existing_API_Collection/Dad_Joke_API/index.html b/Existing_API_Collection/Dad_Joke_API/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Best Jokes</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="box">
+            <h3>😂Best Jokes to make your day😂</h3>
+            <div class="joke">Loading funny jokes...</div>
+        </div>
+        <button class="btn" id="btn">Next Joke</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Dad_Joke_API/script.js b/Existing_API_Collection/Dad_Joke_API/script.js
@@ -0,0 +1,25 @@
+const jokes = document.querySelector('.joke');
+const btn = document.getElementById('btn');
+
+const generateJokes = async () => {
+    try {
+        const setHeader = {
+            headers: {
+                Accept: "application/json"
+            }
+        }
+        // Fetching Api with async await
+        const url = "https://icanhazdadjoke.com";
+        const res = await fetch(url, setHeader);
+        const data = await res.json();
+        console.log(data);
+        jokes.innerHTML = data.joke;
+    }
+    catch (error) {
+        console.log(`The error is ${error}`);
+    }
+}
+
+// Calling a function
+btn.addEventListener('click', generateJokes);
+generateJokes();
diff --git a/Existing_API_Collection/Dad_Joke_API/style.css b/Existing_API_Collection/Dad_Joke_API/style.css
@@ -0,0 +1,82 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100&family=Raleway:ital,wght@0,300;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Roboto:wght@100;300;400;700&family=Ubuntu:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500;1,700&display=swap');
+
+* {
+    font-family: 'Poppins', sans-serif;
+}
+
+body {
+    background-color: rgb(158, 181, 197);
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    height: 100vh;
+}
+
+.box {
+    background-color: azure;
+    border-radius: 18px;
+    box-shadow: rgba(129, 129, 152, 0.2) 0px 7px 29px 0px;
+    text-align: center;
+    width: 650px;
+    max-height: 300px;
+    padding: 12px;
+    border: 2px solid red;
+
+}
+
+h3 {
+    font-size: 30px;
+}
+
+.btn {
+    width: 100px;
+    height: 40px;
+    background-color: rgb(182 196 237);
+    margin-top: 23px;
+    font-size: 15px;
+    font-weight: 600;
+    border-radius: 13px;
+    box-shadow: rgba(0, 0, 0, 0.02) 0px 1px 3px 0px, rgba(27, 31, 35, 0.15) 0px 0px 0px 1px;
+    cursor: pointer;
+    transition: all 0.5s ease;
+}
+
+.btn:hover {
+    background-color: rgb(101, 159, 136);
+}
+
+.joke {
+    font-size: 18px;
+    line-height: 1.5rem;
+    padding: 0 5px 35px 5px;
+    font-weight: 500;
+}
+
+@media only screen and (max-width:400px) {
+    .box {
+        width: 300px;
+        max-height: 500px;
+    }
+
+    h3 {
+        font-size: 23px;
+    }
+}
+
+@media only screen and (max-width:355px) {
+    .box {
+        width: 270px;
+    }
+
+    h3 {
+        font-size: 22px;
+    }
+
+    .joke {
+        font-size: 16px;
+    }
+}
diff --git a/Existing_API_Collection/Random_User_Generator_ API/README.md b/Existing_API_Collection/Random_User_Generator_ API/README.md
@@ -0,0 +1,40 @@
+# Random User Generator Web App
+
+This is a simple web application that generates information about a random fake user, including their gender, name, email, and address. It utilizes the RandomUser API to fetch the user data and displays it on the webpage.
+
+## Features
+
+- Click the "Generate Random User" button to fetch information about a random fake user.
+- Displayed user information includes their profile picture, name, gender, email, and address.
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## Usage
+
+1. Open the `index.html` file in your web browser.
+2. Click the "Generate Random User" button to fetch a random user's information.
+3. View the displayed user information on the webpage.
+
+## Code Explanation
+
+- HTML provides the structure of the webpage.
+- CSS styles the elements for improved visual presentation.
+- JavaScript fetches data from the RandomUser API and dynamically updates the content on the webpage.
+
+## API Integration
+
+This web app integrates with the RandomUser API to fetch random user data.
+
+- It sends a request to the API endpoint and displays the retrieved user information on the webpage.
+
+## Credits
+
+- [RandomUser API](https://randomuser.me/)
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.
diff --git a/Existing_API_Collection/Random_User_Generator_ API/index.html b/Existing_API_Collection/Random_User_Generator_ API/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Random User Generator</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <h1>Random User Generator</h1>
+    <button id="generate-btn">Generate Random User</button>
+    <div class="user-info" id="user-info"></div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Existing_API_Collection/Random_User_Generator_ API/script.js b/Existing_API_Collection/Random_User_Generator_ API/script.js
@@ -0,0 +1,21 @@
+const generateUser = async () => {
+    try {
+        const response = await fetch('https://randomuser.me/api/');
+        const data = await response.json();
+        const user = data.results[0];
+
+        const userInfo = `
+            <img src="${user.picture.large}" alt="User Picture">
+            <h2>${user.name.title} ${user.name.first} ${user.name.last}</h2>
+            <p><strong>Gender:</strong> ${user.gender}</p>
+            <p><strong>Email:</strong> ${user.email}</p>
+            <p><strong>Address:</strong> ${user.location.street.number}, ${user.location.street.name}, ${user.location.city}, ${user.location.state}, ${user.location.country}, ${user.location.postcode}</p>
+        `;
+
+        document.getElementById('user-info').innerHTML = userInfo;
+    } catch (error) {
+        console.error('Error fetching user:', error);
+    }
+};
+
+document.getElementById('generate-btn').addEventListener('click', generateUser);
diff --git a/Existing_API_Collection/Random_User_Generator_ API/style.css b/Existing_API_Collection/Random_User_Generator_ API/style.css
@@ -0,0 +1,47 @@
+body {
+    font-family: Arial, sans-serif;
+    text-align: center;
+    background-color: #f4f4f4;
+}
+
+h1 {
+    margin-top: 30px;
+}
+
+#generate-btn {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 16px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+#generate-btn:hover {
+    background-color: #0056b3;
+}
+
+.user-info {
+    margin-top: 30px;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 5px;
+    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
+}
+
+.user-info img {
+    width: 150px;
+    border-radius: 50%;
+    margin-bottom: 10px;
+}
+
+.user-info h2 {
+    margin-bottom: 5px;
+}
+
+.user-info p {
+    margin: 5px 0;
+}