User Profile Card Generator | HTML, CSS & JavaScript

User Profile Card Generator with HTML, CSS & JavaScript

30 DAYS 30 PROJECT CHALLENGE

Day #11

Project Overview

A User Profile Card Generator built using HTML, CSS, and JavaScript that allows users to create a personalized profile card by entering basic details.
The project dynamically generates a visually styled profile card from user input, demonstrating interactive form handling and real-time UI rendering.

Key Features

Create a profile card using user-provided details.
Supports profile image via image URL with fallback image.
Dynamically updates UI without page reload.
Validates required input fields before generation.
Clean, responsive, and reusable card layout.
Beginner-friendly project showcasing interactive UI logic.

HTML Code

<!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

* {
  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

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";
}