User Profile Card Generator | HTML, CSS & JavaScript

User Profile Card Generator with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #11

Project Overview

The User Profile Card Generator is a beginner-friendly project built using HTML, CSS, and JavaScript. It allows users to create a personalized profile card by entering details such as their name, profile image URL, and a short biography. After the user enters the required information and clicks the Generate Profile button, JavaScript dynamically updates the profile card without refreshing the webpage. This project validates important fields and displays a fallback image when the user does not provide a profile image URL.

This project is useful for beginners who want to practice form handling, DOM manipulation, input validation, and dynamically updating webpage content. It also demonstrates how user-provided information can be transformed into an interactive and visually styled interface.

Key Features

Profile Information Input: Users can enter their full name, profile image URL, and a short biography in order to create a personalized profile card.
Dynamic Profile Generation: By using the JavaScript code, after the user clicked the Generate Profile button, the entered information will be dynamically displayed in the profile card.
Profile Image Support: The user will be able to provide an image URL to display their preferred profile picture in the generated card.
Fallback Profile Image: In case the user did not enter an image URL, the application will use the default fallback image so that the profile card will have a complete appearance.
Required Field Validation: JavaScript code will check if the necessary fields such as the name, role, and biography contain the information before generating the profile card.
Dynamic DOM Updates: The user information will be inserted into the different HTML elements by using JavaScript code, which will show how the DOM can be updated depending on the inputted data.
Instant Profile Preview: After the successful validation, the completed profile card will be displayed right away so that the user will be able to see the result of their inputted data.
Clean Profile Card Design: The generated profile card will have a clean design, which will include the profile image, name, role, and a short biography of the user.
Responsive Layout: The form and profile card can adjust to different screen sizes, making the project usable on desktops, tablets, and mobile devices.
Reusable Interface Concept: The same functionality can be extended to create multiple profile cards or customized further by adding social media links, skills, contact information, and other profile details.

What You'll Learn

Understand how to collect values from HTML input fields.
Learn how to use document.getElementById().
Practice using the .value property.
Understand how .trim() removes unnecessary spaces.
Learn how JavaScript validates user input.
Practice using conditional statements.
Understand how to update HTML content dynamically.
Learn how to change image sources using JavaScript.
Practice showing and hiding HTML elements.

HTML Code

HTML creates the structure of the User Profile Card Generator. First, the style.css file is linked inside the <head> section so CSS can control the appearance and layout of the application. The main content is placed inside a .container, which contains the profile form and the generated profile card. The form includes input fields for the user’s name, role or profession, and profile image URL. A <textarea> element provides space for entering a short biography.

The Generate Profile button calls the generateProfile() function when clicked and the profile card contains separate elements for displaying profile image, name, role, and biography. Each element has an ID so JavaScript can select it and dynamically update its content. Finally, the script.js file is loaded at the bottom of the <body> so JavaScript can access the HTML elements and generate the profile card.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>User Profile Card Generator</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

  <div class="container">

    <div class="form-box">
      <h2>Create Profile</h2>

      <input type="text" id="name" placeholder="Full Name" />
      <input type="text" id="role" placeholder="Role / Profession" />
      <input type="text" id="image" placeholder="Profile Image URL" />
      <textarea id="bio" placeholder="Short Bio"></textarea>

      <button onclick="generateProfile()">Generate Profile</button>
    </div>

    <div class="profile-card" id="profileCard">
      <img id="profileImg" src="" alt="Profile Image" />
      <h3 id="profileName"></h3>
      <p class="role" id="profileRole"></p>
      <p class="bio" id="profileBio"></p>
    </div>

  </div>

  <script src="script.js"></script>
</body>
</html>

CSS Code

CSS controls the appearance and layout of the User Profile Card Generator. The body uses Flexbox to center the main application on the page, while the .container uses a flexible layout to position the form and generated profile card next to each other, the .form-box class styles the input section by adding a background, padding, width, rounded corners, and shadow, input and textarea elements are styled to provide a clean and consistent appearance for entering profile information.

The .profile-card class styles the generated profile card and is initially hidden using display: none. The profile image uses a circular shape with border-radius: 50%, while the name, role, and biography receive separate styles for better readability, the flex-wrap property allows the layout to adjust when there is less available screen space, helping the application remain responsive on smaller devices.

* {
  box-sizing: border-box;
  font-family: "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  background: #042453;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
}

/* Form */
.form-box {
  background: #ffffff;
  padding: 25px;
  width: 300px;
  border-radius: 12px;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.form-box h2 {
  text-align: center;
  margin-bottom: 15px;
}

input, textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border: 1px solid #ccc;
  outline: none;
}

textarea {
  resize: none;
  height: 70px;
}

button {
  width: 100%;
  padding: 10px;
  background: #4f46e5;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

/* Profile Card */
.profile-card {
  display: none;
  background: #ffffff;
  width: 260px;
  padding: 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

.profile-card img {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.profile-card h3 {
  margin: 5px 0;
}

.role {
  font-size: 14px;
  color: #4f46e5;
}

.bio {
  font-size: 13px;
  color: #555;
  margin-top: 8px;
}

Javascript Code

JavaScript provides the main functionality of the User Profile Card Generator. The generateProfile() function first collects the values entered in the name, role, image, and biography fields. The .trim() method removes unnecessary spaces from the beginning and end of the input. Next, JavaScript checks whether the required fields contain information. If the name, role, or biography is empty, an alert message asks the user to complete the required fields.

When the validation is successful, JavaScript updates the profile card using innerText. The user’s name, role, and biography are displayed in their corresponding elements. The profile image source is also updated using the entered image URL. If no image URL is provided, a default fallback image is used instead. Finally, JavaScript changes the profile card’s display property to block, making the completed profile visible on the webpage.

function generateProfile() {
  const name = document.getElementById("name").value.trim();
  const role = document.getElementById("role").value.trim();
  const image = document.getElementById("image").value.trim();
  const bio = document.getElementById("bio").value.trim();

  if (!name || !role || !bio) {
    alert("Please fill all required fields");
    return;
  }

  document.getElementById("profileName").innerText = name;
  document.getElementById("profileRole").innerText = role;
  document.getElementById("profileBio").innerText = bio;

  const img = document.getElementById("profileImg");
  img.src = image || "https://images.unsplash.com/photo-1502685104226-ee32379fefbe?w=300";

  document.getElementById("profileCard").style.display = "block";
}