Crafting Code with Pride: The Unspoken Rewards of Building Something You're Proud Of

#beginners #productivity #career #programming

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 solves a real problem, it’s readable, and you can look at it and say, “I built that.” That pride isn’t about ego. It’s about craftsmanship.

In this tutorial, we’ll build a simple To-Do List App with local storage using HTML, CSS, and vanilla JavaScript. It’s beginner-friendly, practical, and—most importantly—something you can point to and feel proud of.

Let’s code with purpose.

🛠️ What We’re Building

A clean, functional To-Do List that:

Lets users add tasks
Marks tasks as complete
Deletes tasks
Saves tasks to the browser’s localStorage (so they persist after refresh)

No frameworks. No build tools. Just pure, readable code.

Step 1: Set Up the HTML

Create index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Proud To-Do</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="container">
    <h1>Proud To-Do List</h1>
    <form id="todo-form">
      <input type="text" id="todo-input" placeholder="Add a new task..." required />
      <button type="submit">Add</button>
    </form>
    <ul id="todo-list"></ul>
  </div>
  <script src="script.js"></script>
</body>
</html>

This is clean, semantic HTML. Nothing flashy—just structure.

Step 2: Style It with CSS

Create style.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Segoe UI', sans-serif;
  background: #f4f7f9;
  color: #333;
  line-height: 1.6;
}

.container {
  max-width: 500px;
  margin: 40px auto;
  padding: 20px;
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  color: #2c3e50;
}

#todo-form {
  display: flex;
  margin-bottom: 20px;
}

#todo-input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px 0 0 4px;
  font-size: 16px;
}

#todo-input:focus {
  outline: none;
  border-color: #3498db;
}

button {
  padding: 10px 15px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  font-size: 16px;
}

button:hover {
  background: #2980b9;
}

ul {
  list-style: none;
}

li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 10px;
  border-bottom: 1px solid #eee;
  font-size: 16px;
}

li.completed span {
  text-decoration: line-through;
  color: #7f8c8d;
}

li button {
  background: #e74c3c;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
}

li button:hover {
  background: #c0392b;
}

Clean, readable, and accessible. No over-engineering.

Step 3: Add Functionality with JavaScript

Create script.js:


javascript
// DOM Elements
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');

// Load tasks from localStorage
function loadTasks() {
  const tasks = JSON.parse(localStorage.getItem('tasks')) || [];
  tasks.forEach(task => addTaskToDOM(task.text, task.completed, false)); // false = don't save again
}

// Save tasks to localStorage
function saveTasks() {
  const tasks = [];
  document.querySelectorAll('#todo-list li').forEach(li => {
    tasks.push({
      text: li.querySelector('span').textContent,
      completed: li.classList.contains('completed')
    });
  });
  localStorage.setItem('tasks', JSON.stringify(tasks));
}

// Add a new task
function addTask(text, completed = false) {
  addTaskToDOM(text, completed);
  saveTasks();
}

// Add task to DOM
function addTaskToDOM(text, completed, save = true) {
  const li = document.createElement('li');
  if (completed) li.classList.add('completed');

  const span = document.createElement('span');
  span.textContent = text;

  // Toggle completion on click
  span.addEventListener('click', () => {
    li.classList.toggle('completed');
    saveTasks();


---

☕ **Appreciative**