Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn how to create a random user card generator. To build this project we need HTML, CSS and Javascript.
We use the ‘Random Data API’ for this project. It’s free and easy to use.
This is a beginner-friendly javascript project. You need a little knowledge of fetch() to get started with this project.
If you are looking for more projects to improve your javascript skills, you can check out this playlist here. This playlist consists of 100+ javascript projects. The difficulty of these projects varies from easy to difficult. Hence the projects from this playlist are suitable for all kinds of javascript learners including javascript beginners to javascript experts.
Video Tutorial:
If you are interested to learn by watching a video tutorial rather than reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel where I post new tutorials every alternate day.
Project Folder Structure:
Before we start coding, let us create the project folder structure. We create a project folder called – ‘Random User Card Generator’. Inside this project, we have three files. These files are index.html, style.css and script.js. The first file is our HTML document. Next, we have our stylesheet. And finally, we have the script file.
HTML:
We begin with the HTML code. First, copy the code below and paste it into your HTML document.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Random User Card</title>
<!-- Font Awesome Icons -->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css"
/>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="card">
<div class="img-container"></div>
<div class="details"></div>
</div>
<button id="get-user-btn">Get Random User</button>
</div>
<!-- Script -->
<script src="script.js"></script>
</body>
</html>
CSS:
Next, we style our project using CSS. For this copy, the code provided to you below and paste it into your stylesheet.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--theme-color: #5074f3;
}
body {
background-color: var(--theme-color);
}
.container {
width: 90%;
max-width: 25em;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.card {
width: 100%;
padding: 4em 0;
background-color: #ffffff;
text-align: center;
border-radius: 0.5em;
}
.card .img-container {
height: 11.25em;
width: 11.25em;
display: block;
margin: -8.75em auto 0 auto;
background-color: #ffffff;
box-shadow: 0 0 0 0.3em #ffffff, 0 0 0 0.9em var(--theme-color);
border-radius: 50%;
}
.img-container img {
width: 100%;
border-radius: 50%;
}
.container button {
display: block;
font-size: 1.2em;
width: 90%;
margin: 2em auto 0 auto;
padding: 1.1em 0;
border-radius: 0.3em;
border: none;
outline: mome;
font-weight: 600;
color: #000341;
cursor: pointer;
}
.card h2 {
margin-top: 1.8em;
font-weight: 600;
color: #000341;
}
.card h3,
.card h4 {
font-size: 1em;
letter-spacing: 0.02em;
margin-top: 0.5em;
font-weight: 300;
color: #90919e;
}
.card i {
color: var(--theme-color);
margin-right: 0.3em;
}
.card h4 {
margin-top: 0.4em;
}
Javascript:
Finally, we implement the functionality with javascript. For this copy the below and paste it into your script file.
let details = document.querySelector(".details");
let imgContainer = document.querySelector(".img-container");
let getUserBtn = document.getElementById("get-user-btn");
let url = "https://random-data-api.com/api/v2/users?response_type=json";
let getUser = () => {
fetch(url)
.then((resp) => resp.json())
.then((data) => {
imgContainer.innerHTML = `<img src= ${data.avatar}>`;
details.innerHTML = `
<h2>${data.first_name} ${data.last_name}</h2>
<h3>${data.employment.title}</h3>
<h4><i class="fa-solid fa-location-dot"></i> ${data.address.city}</h4>`;
let randomColor =
"#" + ((Math.random() * 0xffffff) << 0).toString(16).padStart(6, "0");
document.documentElement.style.setProperty("--theme-color", randomColor);
});
};
window.addEventListener("load", getUser);
getUserBtn.addEventListener("click", getUser);
That’s it for this tutorial. Your random user card generator is now ready. If you face any issues while creating this project you can download the source code by clicking on the ‘Download Code’ button below. Also, I would to hear from you guys. So if you have any queries, suggestions or feedback you can comment below.
Happy Coding!
please respond!
Our brand saw some of your YouTube videos and creative works and we will like to use them in our upcoming app. The app is meant to teach people coding basically.
Can we use them for free or Can we get a license to use them ? how much will this cost if possible?
I have responded to your email. Please check your inbox.