Introduction
JavaScript is the language that brings web pages to life. It’s everywhere: websites, apps, games, automation scripts, and even robots.
In this first article, we’ll go beyond the classic alert() — we’ll build a real, functional mini-app using nothing but HTML + CSS + JavaScript.
What We’ll Build
We’ll create a small shopping list app where the user can:
- Type in a product
- Click “Add”
- See the product appear in a list — instantly, without reloading the page
1. HTML – The Structure of the Page
Code:
<h1>My Shopping List</h1>
<input id="item" placeholder="Type a product" />
<button onclick="addItem()">Add</button>
<ul id="list"></ul>
Explanation:
<h1>: the page title.<input>: a text field where the user types a product. It hasid="item"so JavaScript can access it.<button>: clicking it calls theaddItem()function.<ul>: an unordered list, initially empty. Each added product becomes a<li>inside it.
2. JavaScript – The Brain of the Page
Code:
<script>
function addItem() {
// Get the text from the input field
let text = document.getElementById("item").value;
// If empty, do nothing
if (text === "") return;
// Create a new <li> and set its text
let newItem = document.createElement("li");
newItem.textContent = text;
// Add it to the <ul>
document.getElementById("list").appendChild(newItem);
// Clear the input field
document.getElementById("item").value = "";
}
</script>
Explanation:
getElementById: selects an element in the page by itsid.createElement("li"): creates a new list item.textContent = text: sets its content to what the user typed.appendChild: visually adds the element to the list.- Finally, the input field is reset so the user can add another product.
3. CSS – A Touch of Style (Optional)
Code:
<style>
body { font-family: sans-serif; padding: 20px; }
input, button { padding: 8px; margin: 6px 0; }
ul { margin-top: 20px; }
li { margin: 6px 0; font-weight: bold; }
</style>4. Test the project
👉 Click here to test the project
Or just copy and paste this code into a file called shopping_list.html and open it in your browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Shopping List</title>
<style>
body { font-family: sans-serif; padding: 20px; }
input, button { padding: 8px; margin: 6px 0; }
ul { margin-top: 20px; }
li { margin: 6px 0; font-weight: bold; }
</style>
</head>
<body>
<h1>My Shopping List</h1>
<input id="item" placeholder="Type a product" />
<button onclick="addItem()">Add</button>
<ul id="list"></ul>
<script>
function addItem() {
let text = document.getElementById("item").value;
if (text === "") return;
let newItem = document.createElement("li");
newItem.textContent = text;
document.getElementById("list").appendChild(newItem);
document.getElementById("item").value = "";
}
</script>
</body>
</html>
Learning Path: What’s Next?
Here’s a preview of what we’ll build in future lessons. The links will become active as each part is published:
| Chapter | Topic | Link |
|---|---|---|
| ✅ 1 | Build your first interactive app (shopping list) | You are here! |
| ✅ 2 | Add a “Remove” button to each item | Click here! |
| ✅ 3 | Separate HTML and JavaScript, use addEventListener | Click here! |
| ✅ 4 | Add dynamic CSS classes (e.g., mark items as complete) | Click here! |
| ✅ 5 | Save your list in the browser with localStorage | Click here! |
| ✅ 6 | Turn the app into a full-featured to-do list | Click here! |
Conclusion
You just built your first real mini-app with JavaScript. No plugins, no frameworks — just clean, native code.
In the next chapters, we’ll improve the app step by step, learning how to:
- organize your code better
- add interactive features
- save data across sessions
- make your app feel modern and smooth
📩 Want to receive future lessons by email or RSS?
Leave a comment or subscribe to the newsletter!
