Welcome to My Day 5, Session 2 Blog — Simple Login Form with HTML, CSS, and JavaScript

#webdev #javascript #css #html

Hey Devs!!
Today I worked on a small but fun project: a login form where users can enter their name, age, and qualification — and once they hit submit, the form hides and displays their details neatly.

What I Built

1.HTML → I set up a simple form with three input fields (name, age, qualification) and a submit button.

2.CSS → I styled the form with a clean white box, soft rounded corners, and a colorful background gradient (pink to light yellow).
I also used flexbox to center the form on the screen.

3.JavaScript → Here’s where the magic happens!

I wrote a small function called submitForm() that runs when the user clicks Submit.
It checks if all the fields are filled.
If everything is entered, it hides the form and shows the output box with the user’s details.
If something’s missing, it alerts the user to fill all fields.

Codes:
html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Login</title>
</head>
<body>
    <div class="box" id="formBox">
        <h2>Login Form</h2>
        <input type="text" id="name" placeholder="Enter name" required>
        <input type="number" id="age" placeholder="Enter age" required>
        <input type="text" id="qualification" placeholder="Enter qualification" required>
        <button onclick="submitForm()">Submit</button>
    </div>

    <div class="box hidden" id="outputBox">
        <h2>Your Details</h2>
        <p id="outName"></p>
        <p id="outAge"></p>
        <p id="outQualification"></p>
    </div>
</body>
</html>

CSS

body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(to right, pink, lightyellow);
            margin: 0;
        }
        .box {
            background: white;
            padding: 20px;
            border-radius: 10px;
            width: 250px;
            text-align: center;
        }
        .hidden {
            display: none;
        }
        input, button {
            margin: 5px 0;
            width: 100%;
        }

JS

script>
        function submitForm() {
            // get input values
            const name = document.getElementById('name').value;
            const age = document.getElementById('age').value;
            const qualification = document.getElementById('qualification').value;

            // check if inputs are filled
            if (name && age && qualification) {
                // hide form, show output
                document.getElementById('formBox').classList.add('hidden');
                document.getElementById('outputBox').classList.remove('hidden');

                // display data
                document.getElementById('outName').innerText = "Name: " + name;
                document.getElementById('outAge').innerText = "Age: " + age;
                document.getElementById('outQualification').innerText = "Qualification: " + qualification;
            } else {
                alert("Please fill all fields!");
            }
        }
    </script>

What I Learned

This session helped me understand:

How to get values from input fields in JavaScript using document.getElementById.
How to toggle visibility between two sections using .classList.add() and .classList.remove().
Why input validation is important to make sure users don’t submit empty data.
How CSS flexbox and background gradients can make even simple layouts look polished.

Today's Recap:

While the project is simple, it taught me valuable lessons about:
1.Handling user input
2.Validating form data
3.Dynamically updating the page content
4.Applying clean and responsive design with CSS

This hands-on practice helped me realize that even small projects can boost confidence and solidify core skills.

Keep Learing!! Happy Coding!!!

Top comments (5)

Nevo David • Jun 7

pretty cool seeing you build and learn from each bit, tbh the small projects always end up teaching me the most - you ever find the little wins keep you pushing to do more?