So, I decided to build this little thing called “Tiny Travel.” I’ve been itching to create something, anything, and this idea just popped into my head – a super simple app to track places I want to visit. Nothing fancy, just a list, really.
Getting Started
First, I needed a basic setup. I went with HTML for the structure, you know, the bones of the thing. Then some CSS to make it look, well, not terrible. And of course, a bit of JavaScript to make it actually do something.
Building the Structure
I started with a simple HTML file. Added a heading, an input field where I could type in the name of a place, and a button to add it to my list. Below that, I created an unordered list (<ul>) – this is where my destinations would appear.
My HTML file looked like this:
<body>
<h2>Tiny Travel</h2>
<input type="text" id="placeInput" placeholder="Enter a place">
<button id="addButton">Add Place</button>
<ul id="placesList">
</ul>
</body>
Adding Some Style
Next, I added just basic CSS. I’m no design wizard, but I wanted it to look presentable. I centered everything, gave the input field and button some decent spacing, and picked a nice, readable font. I made it so the added places would display as a simple, clean list.
Making it Work
Now for the JavaScript – the part that brings it to life. I wrote a function that grabbed the text from the input field, created a new list item (<li>), and stuck that text inside the list item. Then, it added that list item to my unordered list. I made sure the input field cleared out after adding a place, just to keep things tidy.
I also added a quick event listener so click event on the “Add” button. That’s what tells the browser, “Hey, when someone clicks this button, run that function I just wrote!”
Testing and Tweaking
I kept testing it as I went along, adding places, making sure they showed up correctly. I noticed a couple of small things I wanted to change – like, the cursor wasn’t automatically focusing in the input field when the page loaded. Easy fix, I just added the autofocus attribute to the input element.
The Final Result
It’s nothing groundbreaking, I know. But it works! I can type in a place, hit the button, and boom, it’s on my list. It’s a tiny little app, but it does exactly what I wanted it to do. And the best part? I built it from scratch. That’s a pretty good feeling.