React30-Project 1: ID card generator

7 min readNov 3, 2023

What is React 30?

Are you ready to elevate your React skills to the next level? Introducing React30 — a dynamic and immersive coding challenge that will catapult you into the world of React development and clearing frontend interviews. Over the course of 30 days, I’ll guide you through the creation of 16 unique React projects, each designed to hone specific skills and techniques in frontend development.

From interactive user interfaces to powerful web applications, React30 covers a wide spectrum of project types, ensuring you gain a well-rounded understanding of React’s capabilities. Whether you’re a seasoned developer looking to enhance your portfolio or a beginner eager to dive into the world of front-end development, React30 has something for everyone.

This expertly crafted tutorials will walk you through every step of the development process, providing clear explanations and code samples. Along the way, you’ll learn best practices, design principles, and how to leverage powerful React features to create stunning, responsive, and efficient applications.

What you’ll gain from React30:
- Mastery of React fundamentals and advanced concepts.
- Hands-on experience with popular libraries and tools in the React ecosystem.
- Insight into building scalable, modular, and maintainable React applications.
- Confidence in tackling diverse front-end development challenges.

Join me for React30 and build live projects which you can showcase in your portfolio! The best part is this course is completely free.
Keep an eye out for our daily article releases and let’s build something amazing together.

Project 1: ID card generator for students in Javascript

Introduction
Before deep diving into react, we should first have our Javascript fundamentals clear. In this article, we’ll walk through the process of creating an ID card generator using Vanilla JavaScript. This project will serve as a great exercise to refresh and solidify our JavaScript fundamentals before diving into more complex libraries like React.

Project Overview
The goal of this project is to create an ID card generator that takes inputs such as Student Name, College Name, and Location, and generates an ID card when the user clicks the “Generate Card” button as shown below:-

Learnings

DOM manipulation using JavaScript
Form handling

Explanation of DOM Manipulation in JavaScript for beginners:

Think of a webpage as a magical coloring book. Each page has different pictures and colors. Now, imagine you have a magic wand (JavaScript), and with it, you can change the colors of the pictures or add new ones! That's what we do when we manipulate the DOM.
So, when you click a button and a new cat picture appears on a webpage, it's like magic wand waving and making the coloring book change! JavaScript helps make the webpage do fun things by talking to its magical coloring book and telling it what to show.

Technical Explanation of DOM Manipulation in JavaScript:

The Document Object Model (DOM) is like a structured representation of a webpage. It's a tree-like structure where each element (like paragraphs, images, buttons) is a part of the tree. JavaScript allows us to manipulate this structure.

When we say "DOM manipulation," we mean using JavaScript to change the content, structure, or style of a webpage in response to user actions or other events.

Here's a quick breakdown:

1. Selecting Elements:

You can use JavaScript to select HTML elements, just like pointing to a specific part of the coloring book.

let myButton = document.getElementById('magicButton');

2. Changing Content:

You can change the text or other content inside those elements.

myButton.innerHTML = 'Abracadabra!';

3. Adding or Removing Elements:

You can create new elements or remove existing ones.

let newCatImage = document.createElement('img');
newCatImage.src = 'magic_cat.png';
document.body.appendChild(newCatImage);

4. Styling Elements:

You can change the colors, sizes, or other styles of elements.

newCatImage.style.border = '2px solid purple';

In summary, JavaScript gives us the power to perform magic on webpages by interacting with their underlying structure and making them respond to our commands.

Starter Code:-
You can download starter code from this repo:-
react30_1_id_card_generator/1_starter_code

Try creating this UI by yourself first and then come back to see the solution below.

Project Implementation

Step 1: Setting up the HTML
Create a new folder and within it, create an index.html file. In the <head> section, import Bootstrap and Font Awesome for styling:

<head>
        <title>
            ID Card generator
        </title>
        <link rel="stylesheet" href="./css/index.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" />
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" />
    </head>

Step 2: Creating the UI

Set up the HTML skeleton for the input form and the generated card along with the header:

<header class="navbar navbar-expand navbar-dark flex-column flex-md-row bd-navbar">
        <div class="text-light w-100 h3 text-center">ID Card generator</div>
    </header>
    <div class="container d-flex">
        <div class="section-container col-6 p-4">
            <div class="text-center font-weight-bold">
              <h3>Input form</h3>
            </div>
            <form onsubmit="return false">
                <div class="form-element py-3">
                    <label class="form-label">
                        Enter Name:
                    </label>
                    <input type="text" id="name" />
                </div>
                <div class="form-element py-3">
                    <label class="form-label">
                        Enter College Name:
                    </label>
                    <input type="text" id="collegeName" />
                </div>
                <div class="form-element py-3">
                    <label class="form-label">
                        Enter Location:
                    </label>
                    <input type="text" id="location" />
                </div>
                <button onclick="generateCard()" type="button" class="btn generateButton">Generate Card</button>
            </form>
        </div>
        <div class="section-container col-6">
            <div class="id-card-container" id="collegeCard">
                <div class="text-center">
                  <h3>Generated Card</h3>
                </div>
                <div class="card-container">
                    <div class="card-wrapper">
                        <div class="user-card">
                            <span class="user-photo">
                                <i class="fa fa-user"></i>
                            </span>
                        </div>
                        <div class="general-information">
                            <div class="card-element card-name">
                                <span>Name:</span>
                                <span id="cardName"></span>
                            </div>
                            <div class="card-element college-name">
                                <span>College Name:</span>
                                <span id="cardCollegeName"></span>
                            </div>
                            <div class="card-element college-name">
                                <span>Location:</span>
                                <span id="cardLocation"></span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

Here the first half contains left section of form for taking user inputs. Second half contains generated card which needs to be shown when Generate Card button is clicked.

Step 3: Adding CSS Styling
Add CSS styles to the header, input forms, and generated cards for a polished look:

/* Header css */
.bd-navbar {
    min-height: 4rem;
    background-color: #7952b3;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.05), inset 0 -1px 0 rgba(0,0,0,.1);
}

.text-center {
    text-align: center;
}

.section-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border: 1px solid black;
}

.form-element {
  margin: 5px;
  min-width: 200px;
  display: flex;
}

.form-label {
  min-width: 150px;
}

.id-card-container {
  display: none;
}

.card-container {
    width: 90vw;
    height: 300px;
    border-radius: 10px;
    margin: 10px;
    background: #fceeb5;
    font-family: Abel, Arial, Verdana, sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 500px;
}

.card-wrapper {
    width: 80vw;
    height: 250px;
    background-color: #fff;
    background: linear-gradient(#f8f8f8, #fff);
    box-shadow: 0 8px 16px -8px rgba(0, 0, 0, 0.4);
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    margin: 1.5rem;
    display: flex;
}

.user-card {
    width: 30vw;
    height: 100%;
    position: relative;
    background: linear-gradient(#92bca6, #a2ccb6);
    display: flex;
    justify-content: center;
    align-items: center;
}

.general-information {
    width: 60vw;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.user-photo {
  font-size: 7em;
}

.card-element {
  margin-left: 10px;
  margin-bottom: 15px;
}

.card-name {
  font-size: 1.5rem;
}

.college-name {
  font-size: 1.2rem;
}
.cardLocation{
    font-size : 1.2rem;
}

.generateButton {
   background-color: #7952b3;
  color:white;
}

Step 4: Implementing JavaScript Logic

Add JavaScript functions to read form input values and generate card contents:

function generateCard() {
    // Get value of Student name from form input 
    const nameElement = document.getElementById("name");
    const nameValue = nameElement.value; 
    // Assign the value of student name to generated card
    const cardNameElement = document.getElementById("cardName");
    cardNameElement.innerHTML = nameValue;

    // Get value of college name from form input 
    const collegeNameValue = document.getElementById("collegeName").value;
    // Assign the value of college name to generated card
    document.getElementById("cardCollegeName").innerHTML = collegeNameValue;

    // Get value of location name from form input 
    const locationValue = document.getElementById("location").value;
    // Assign the value of location name to generated card
    document.getElementById("cardLocation").innerHTML = locationValue;
    
    // Display final generated card to user     
    document.getElementById("collegeCard").style.display = "block";
}

In the generateCard function, we retrieve the values of the input fields, assign them to the corresponding elements on the generated card, and then display the card.
We take the student's name, college name and location from input by first accessing the individual elements using document.getElementById method and reading their values. Then we retrieve the the target card elements using same method and populate values using `innerHTML` method. Lastly, we display generated card by manipulation of display property CSS of card using JavaScript.

Additionally make sure to understand usage of `createElement` method in Javascript from below article since it will help you understand how React.js internally creates elements.
HTML DOM Document createElement()

You can find live preview on this codepen:-
Id Card Generation (codepen.io)

Github repo for the project:-
saurabhnative/react30_1_id_card_generator

Learning Resources:

JavaScript Cheat Sheets

Some good resources for Javascript,HTML and CSS

Conclusion

With this project, we’ve built a functional ID card generator using Vanilla JavaScript. This exercise not only reinforces our JavaScript skills but also provides a solid foundation for more advanced front-end development with libraries like React. Feel free to explore and expand upon this project to further enhance your coding skills!

Check out my Youtube channel for more content:-
SaurabhNative-Youtube

Check out next part in the series here: React30-Project 2

Bonus Content:

Here’s some additional content which can benefit your learning journey:-

Github repo for ID Card Generator using Tailwind CSS:-
saurabhnative/id-card-generator-2021
Github repo for ID Card Generator using Vue.js:-
saurabhnative/vuejs-id-card-generator
Youtube videos on ID card generation using Vue.js:-
Building Id Card Generator using Vue.js— YouTube