Day 18 of Learning Web Development — I Took User Input (And My Website Started Responding to Real Users)

For the past 17 days, I’ve been learning step by step.

HTML. CSS. Flexbox. Grid. Responsive Design. JavaScript basics. Variables and conditions.

Yesterday, I learned how to make my code “think.”

That was powerful.

But something was still missing.

My code was still using fixed values.

Not real user data.

So today, I focused on something important:

Taking input from the user.

And this changed everything.

🚀 Why User Input Matters

Until now, my website was controlled by me.

• I set the values
• I wrote the logic
• The user didn’t really interact

But real websites are different.

They respond to users.

So I asked myself:

“How can I get information from the user?”

That became my goal today.

🧠 What I Focused On Today

I kept it simple:

• Input fields in HTML
• Getting values with JavaScript
• Using that value in logic

📦 Step 1 — Creating an Input Field (HTML)

First, I added an input box:

<input type="text" id="username" placeholder="Enter your name">
<button>Submit</button>

💡 What This Does

• User types something
• Clicks button

Now I need to capture it.

🔥 Step 2 — Getting the Input Value

This was the key part:

let name = document.querySelector("#username").value;

👉 This takes the value from the input field.

💡 Big Realization

Now:

👉 The website can read user input

🖱️ Step 3 — Connecting It to a Button

I added a click event:

document.querySelector("button").onclick = function() {
  let name = document.querySelector("#username").value;
  alert("Hello " + name);
};

🤯 What Happened

• User types name
• Click button
• Website responds

👉 This felt like a real interaction.

🎯 Step 4 — Using Conditions with Input

Then I added logic:

document.querySelector("button").onclick = function() {
  let name = document.querySelector("#username").value;

  if (name === "") {
    alert("Please enter your name");
  } else {
    alert("Welcome " + name);
  }
};

💡 Why This Is Important

Now the website:

• Checks input
• Responds differently

👉 Real logic + real user

⚠️ What Felt Difficult

Let’s be honest.

Today had challenges:

• Remembering .value
• Writing correct selectors
• Debugging when nothing worked

At one point, I clicked the button…

And nothing happened.

💡 What Helped Me

I slowed down and checked:

• Is the ID correct?
• Is the button working?
• Is JavaScript linked?

Step by step…

It worked.

🧪 My Mini Project

Today I built:

• Input field
• Button
• Personalized message

Simple.

But interactive.

🧠 What I Realized Today

This was a big moment:

My website is no longer static.

It reacts.

It responds.

It interacts.

🎯 What I Learned Today

• Input fields collect data
• JavaScript reads user input
• Conditions improve interaction
• Small features feel powerful

🔥 What’s Next?

Now that I can handle user input…

Tomorrow, I want to:

Display the result directly on the page (not just alerts).

So the experience feels more real.

💬 Final Thoughts

Day 18 felt exciting.

Because now…

My website interacts with real users.

If you’re learning web development too, try this:

Don’t just build pages.

Make them respond.

That’s where real development begins.