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

[MyrinNew]

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







lang="en">

charset="UTF-8">
name="viewport" content="width=device-width, initial-scale=1.0">
Simple Login


class="box" id="formBox">
Login Form
type="text" id="name" placeholder="Enter name" required>
type="number" id="age" placeholder="Enter age" required>
type="text" id="qualification" placeholder="Enter qualification" required>
onclick="submitForm()">Submit



class="box hidden" id="outputBox">
Your Details
id="outName">

id="outAge">

id="outQualification">












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.rem ove('hidden');

// display data
document.getElementById('outName').innerText = "Name: " + name;
document.getElementById('outAge').innerText = "Age: " + age;
document.getElementById('outQualification').innerT ext = "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!!!




More...