Crafting Code with Pride: The Unspoken Rewards of Building Something You're Proud Of
There’s a quiet joy in writing code that just works—not because it’s flawless, but because it’s yours. It’s the kind of pride that comes from solving a problem, no matter how small, with your own hands. In this tutorial, we’ll build a simple but meaningful project: a Personal Achievement Tracker. It’s beginner-friendly, practical, and—most importantly—something you can look at and say, “I made that.”
By the end, you’ll have a working web app that lets you log personal wins, big or small. But more than that, you’ll experience the unspoken reward of crafting something you're proud of.
🛠️ What We’ll Build
A simple web app where you can:
- Add achievements (e.g., "Learned CSS Grid", "Ran 5K")
- View your list of achievements
- Mark them as complete
- Delete them
We’ll use HTML, CSS, and vanilla JavaScript—no frameworks, no build tools. Just pure, readable code.
Step 1: Set Up the Project
Create a new folder and three files:
mkdir achievement-tracker
cd achievement-tracker
touch index.html style.css script.js
Now open index.html and add the basic structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>My Wins</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<h1>My Wins 🏆</h1>
<form id="achievementForm">
<input type="text" id="achievementInput" placeholder="I did this today..." required />
<button type="submit">Add Win</button>
</form>
<ul id="achievementList"></ul>
</div>
<script src="script.js"></script>
</body>
</html>
This gives us:
- A title
- A form to add achievements
- A list to display them
- Links to our CSS and JS
Step 2: Style It with CSS
Open style.css and add some clean, friendly styling:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', sans-serif;
background-color: #f7f9fc;
color: #333;
line-height: 1.6;
}
.container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
background: white;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #2c3e50;
}
form {
display: flex;
gap: 10px;
margin-bottom: 20px;
}
#achievementInput {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 6px;
font-size: 16px;
}
button {
padding: 10px 15px;
background: #3498db;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
font-size: 16px;
transition: background 0.3s;
}
button:hover {
background: #2980b9;
}
ul {
list-style: none;
}
li {
padding: 12px 15px;
background: #f1f8ff;
border-left: 4px solid #3498db;
margin-bottom: 8px;
border-radius: 4px;
display: flex;
justify-content: space-between;
align-items: center;
}
li.completed {
background: #e8f5e9;
color: #2e7d32;
border-left-color: #4caf50;
text-decoration: line-through;
}
li button {
background: #e74c3c;
padding: 6px 10px;
font-size: 14px;
}
It’s not flashy, but it’s clean, readable, and feels rewarding to use.
Step 3: Add JavaScript Functionality
Now the fun part. Open script.js and let’s bring it to life.
1. Select DOM Elements
const form = document.getElementById('achievementForm');
const input = document.getElementById('achievementInput');
const list = document.getElementById('achievementList');
2. Load Achievements from Local Storage
We’ll store achievements in the browser so they persist.
let achievements = JSON.parse(localStorage.getItem('achievements')) || [];
3. Render the List
Create a function to display all achievements:
javascript
function renderAchievements() {
list.innerHTML = '';
achievements.forEach((item, index) => {
const li = document.createElement('li');
if (item.completed) li.classList.add('completed');
li.innerHTML = `
<span>${item.text}</span>
---
☕ **Community-focused tone**: "Join the community that makes my work possible!
Top comments (0)