Building a To-Do Tutorial with Only HTML: A Beginner's Guide

Beyond the Code: A Deep Dive into 'Vibe' and Why It's Your Most Important Frontend Metric


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">Want to build a project to practice your new HTML skills? A to-do list is a classic! But what if you want to build one using <strong class="font-semibold text-black">only HTML</strong>, without any JavaScript or CSS? It's not only possible, but it's also the perfect way to learn about some of the most important semantic tags in the language. This tutorial will show you how.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We won't be building a dynamic application—you won't be able to add new items without editing the code. Instead, you'll build a <strong class="font-semibold text-black">structurally sound, semantic, and accessible</strong> checklist. This is the solid foundation that all web development is built on. Let's get started.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">What You'll Build: The Final Code</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">First, let's look at the final product. This is all the HTML you need. You can copy this, save it as an `index.html` file, and open it in your browser right now to see it in action.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
&lt;<span class="text-[#569cd6]">form</span>&gt;
  &lt;<span class="text-[#569cd6]">fieldset</span>&gt;
    &lt;<span class="text-[#569cd6]">legend</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"text-2xl font-semibold p-2"</span>&gt;My Daily Tasks&lt;/<span class="text-[#569cd6]">legend</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">style</span>=<span class="text-[#ce9178]">"margin-bottom: 10px;"</span>&gt;
      &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task1"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task1"</span>&gt;
      &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task1"</span>&gt;Finish this HTML tutorial&lt;/<span class="text-[#569cd6]">label</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">style</span>=<span class="text-[#ce9178]">"margin-bottom: 10px;"</span>&gt;
      &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task2"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task2"</span>&gt;
      &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task2"</span>&gt;Learn about semantic tags like &amp;lt;fieldset&amp;gt;&lt;/<span class="text-[#569cd6]">label</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">style</span>=<span class="text-[#ce9178]">"margin-bottom: 10px;"</span>&gt;
      &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task3"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task3"</span>&gt;
      &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task3"</span>&gt;Plan my next project&lt;/<span class="text-[#569cd6]">label</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">style</span>=<span class="text-[#ce9178]">"margin-top: 20px;"</span>&gt;
      &lt;<span class="text-[#569cd6]">button</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"reset"</span>&gt;Reset List&lt;/<span class="text-[#569cd6]">button</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
  &lt;/<span class="text-[#569cd6]">fieldset</span>&gt;
&lt;/<span class="text-[#569cd6]">form</span>&gt;
</code>
    </pre>
  </div>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Notice a few things: the checkboxes work, clicking the text (the \`&lt;label&gt;\`) also checks the box, and the "Reset List" button will uncheck all the items for you. This is all built-in browser functionality, brought to life with the right HTML tags.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Step-by-Step Breakdown: Crafting Your To-Do List</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Let's break down that code, tag by tag, so you understand the "why" behind each piece.</p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 1: The `&lt;form&gt;` Container</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">A to-do list is, semantically, a form. It's a list of inputs that a user interacts with. The `&lt;form&gt;` tag is the container for all form elements, like checkboxes, text fields, and buttons. Even though we aren't "submitting" this form to a server, using the tag tells the browser and screen readers, "This is an interactive group of controls."</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 2: The `&lt;fieldset&gt;` and `&lt;legend&gt;` for Grouping</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the most important semantic trick. A `&lt;fieldset&gt;` tag is used to group related controls within a form. A `&lt;legend&gt;` tag provides a caption or title for that group. By wrapping our tasks in a `&lt;fieldset&gt;` and giving it a `&lt;legend&gt;` of "My Daily Tasks," we are explicitly telling assistive technologies (like screen readers) that all the checkboxes inside belong to this group. It's a huge win for accessibility.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
&lt;<span class="text-[#569cd6]">form</span>&gt;
  &lt;<span class="text-[#569cd6]">fieldset</span>&gt;
    &lt;<span class="text-[#569cd6]">legend</span>&gt;My Daily Tasks&lt;/<span class="text-[#569cd6]">legend</span>&gt;
    ... tasks go here ...
  &lt;/<span class="text-[#569cd6]">fieldset</span>&gt;
&lt;/<span class="text-[#569cd6]">form</span>&gt;
</code>
    </pre>
  </div>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 3: Adding Tasks with `&lt;input&gt;` and `&lt;label&gt;`</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the core of our list. Each task is a combination of two tags:</p>
  
  <ol class="list-decimal list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">`&lt;input type="checkbox"&gt;`</strong>: This HTML tag tells the browser to render a clickable checkbox.</li>
    <li><strong class="font-semibold text-black">`&lt;label&gt;`</strong>: This tag provides the text description for the input.</li>
  </ol>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The magic is how they are linked. Notice the `id` on the `&lt;input&gt;` and the `for` on the `&lt;label&gt;`. The `for` attribute of the label must <strong class="font-semibold text-black">exactly match</strong> the `id` of the input. This does two things:
  1.  It tells screen readers that the label "Finish this HTML tutorial" describes the first checkbox.
  2.  It allows the user to click on the text label to toggle the checkbox, which is great for usability, especially on mobile devices.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
&lt;<span class="text-[#569cd6]">div</span>&gt;
  &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task1"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task1"</span>&gt;
  &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task1"</span>&gt;Finish this HTML tutorial&lt;/<span class="text-[#569cd6]">label</span>&gt;
&lt;/<span class="text-[#569cd6]">div</span>&gt;
</code>
    </pre>
  </div>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 4: The `&lt;button type="reset"&gt;`</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Finally, we add a `&lt;button&gt;`. By setting its `type` attribute to `"reset"`, we get free functionality from the browser. When clicked, this button will reset all controls inside its parent `&lt;form&gt;` to their default values (which, for checkboxes, is "unchecked"). It's a simple, no-JavaScript way to add a bit of interaction.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Limitations and Next Steps</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is a <strong class="font-semibold text-black">static</strong> list. You've built the "skeleton" of a to-do list, but it's not a full application. To add features like saving tasks or adding new tasks without editing the code, you would need to learn:</p>
  
  <ul class="list-disc list-inside space-y-4 text-lg text-black mb-6">
    <li><strong class="font-semibold text-black">CSS:</strong> To make your list look beautiful, change colors, fonts, and layout.</li>
    <li><strong class="font-semibold text-black">JavaScript:</strong> To add interactivity, like creating new tasks, deleting tasks, and saving them to the browser's local storage.</li>
  </ul>
  
  <p class="text-lg text-black mb-6 leading-relaxed">But don't rush! Mastering semantic HTML is the most important first step. You've learned how to build a page that is accessible and makes sense to a browser, not just one that looks a certain way.</p>
  
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: Your First Step in Web Development</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Congratulations! You've successfully built a complete, functional, and accessible to-do list using <strong class="font-semibold text-black">only HTML</strong>. You've learned how to use forms, group elements with &lt;fieldset&gt; and &lt;legend&gt;, and properly link inputs and labels for maximum accessibility.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This project is the perfect foundation. The "skeleton" you built is now ready to be styled with CSS and brought to life with JavaScript. You're well on your way to becoming a frontend developer. Keep building!</p>
</div>
  

How to Make a Simple To-Do List with Only HTML: A Beginner's Tutorial


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">In the last tutorial, we built a perfectly semantic to-do list using only HTML. It's functional, but it looks a bit plain. What if we want to make it look great and add interactive states, like a strikethrough on completed items? You don't need JavaScript for that. This tutorial will show you how to style your entire to-do list using <strong class="font-semibold text-black">only CSS</strong>.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We'll use the power of CSS pseudo-selectors like <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">:checked</code> and pseudo-elements like <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">::before</code> to create a beautiful, custom, and interactive list.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The Starting Point: Our HTML</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">First, we need our clean, semantic HTML. This is the same structure from our previous HTML-only tutorial. The CSS we write will target these specific tags.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
&lt;<span class="text-[#569cd6]">form</span>&gt;
  &lt;<span class="text-[#569cd6]">fieldset</span>&gt;
    &lt;<span class="text-[#569cd6]">legend</span>&gt;My Daily Tasks&lt;/<span class="text-[#569cd6]">legend</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"task-item"</span>&gt;
      &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task1"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task1"</span>&gt;
      &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task1"</span>&gt;Finish this CSS tutorial&lt;/<span class="text-[#569cd6]">label</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"task-item"</span>&gt;
      &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task2"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task2"</span>&gt;
      &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task2"</span>&gt;Learn about the :checked selector&lt;/<span class="text-[#569cd6]">label</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
    &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"task-item"</span>&gt;
      &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"checkbox"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task3"</span> <span class="text-[#9cdcfe]">name</span>=<span class="text-[#ce9178]">"task3"</span>&gt;
      &lt;<span class="text-[#569cd6]">label</span> <span class="text-[#9cdcfe]">for</span>=<span class="text-[#ce9178]">"task3"</span>&gt;Build a custom checkbox&lt;/<span class="text-[#569cd6]">label</span>&gt;
    &lt;/<span class="text-[#569cd6]">div</span>&gt;
    
  &lt;/<span class="text-[#569cd6]">fieldset</span>&gt;
&lt;/<span class="text-[#569cd6]">form</span>&gt;
</code>
    </pre>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Part 1: Basic List Styling</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Let's start by styling the container. We'll style the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;fieldset&gt;</code>, <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;legend&gt;</code>, and each <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">.task-item</code> div to give our list a clean, modern look.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#d7ba7d]">body</span> {
  <span class="text-[#9cdcfe]">background-color</span>: <span class="text-[#ce9178]">#111827</span>;
  <span class="text-[#9cdcfe]">color</span>: <span class="text-[#ce9178]">#E5E7EB</span>;
  <span class="text-[#9cdcfe]">font-family</span>: <span class="text-[#ce9178]">sans-serif</span>;
  <span class="text-[#9cdcfe]">display</span>: <span class="text-[#ce9178]">grid</span>;
  <span class="text-[#9cdcfe]">place-items</span>: <span class="text-[#ce9178]">center</span>;
  <span class="text-[#9cdcfe]">min-height</span>: <span class="text-[#ce9178]">100vh</span>;
}

<span class="text-[#d7ba7d]">form</span> {
  <span class="text-[#9cdcfe]">width</span>: <span class="text-[#ce9178]">90%</span>;
  <span class="text-[#9cdcfe]">max-width</span>: <span class="text-[#ce9178]">400px</span>;
}

<span class="text-[#d7ba7d]">fieldset</span> {
  <span class="text-[#9cdcfe]">border</span>: <span class="text-[#ce9178]">2px solid #374151</span>;
  <span class="text-[#9cdcfe]">border-radius</span>: <span class="text-[#ce9178]">8px</span>;
  <span class="text-[#9cdcfe]">padding</span>: <span class="text-[#ce9178]">20px</span>;
}

<span class="text-[#d7ba7d]">legend</span> {
  <span class="text-[#9cdcfe]">font-size</span>: <span class="text-[#ce9178]">1.5rem</span>;
  <span class="text-[#9cdcfe]">font-weight</span>: <span class="text-[#ce9178]">bold</span>;
  <span class="text-[#9cdcfe]">padding</span>: <span class="text-[#ce9178]">0 10px</span>;
  <span class="text-[#9cdcfe]">color</span>: <span class="text-[#ce9178]">#F9FAFB</span>;
}

<span class="text-[#d7ba7d]">.task-item</span> {
  <span class="text-[#9cdcfe]">display</span>: <span class="text-[#ce9178]">block</span>;
  <span class="text-[#9cdcfe]">margin-bottom</span>: <span class="text-[#ce9178]">12px</span>;
  <span class="text-[#9cdcfe]">position</span>: <span class="text-[#ce9178]">relative</span>;
}

<span class="text-[#d7ba7d]">label</span> {
  <span class="text-[#9cdcfe]">font-size</span>: <span class="text-[#ce9178]">1.125rem</span>;
  <span class="text-[#9cdcfe]">line-height</span>: <span class="text-[#ce9178]">1.5</span>;
  <span class="text-[#9cdcfe]">cursor</span>: <span class="text-[#ce9178]">pointer</span>;
}
</code>
    </pre>
  </div>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Part 2: The "Magic" - Styling the Checked State</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the key to our CSS-only interactivity. We can use the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">:checked</code> pseudo-class to detect when the checkbox is clicked. Then, using the <strong class="font-semibold text-black">adjacent sibling selector (<code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">+</code>)</strong>, we can apply styles to the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;label&gt;</code> that comes right after it.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#d7ba7d]">input[type="checkbox"]:checked + label</span> {
  <span class="text-[#9cdcfe]">text-decoration</span>: <span class="text-[#ce9178]">line-through</span>;
  <span class="text-[#9cdcfe]">color</span>: <span class="text-[#ce9178]">#6B7280</span>;
}
</code>
    </pre>
  </div>
  <p class="text-lg text-black mb-6 leading-relaxed">Just like that, clicking the checkbox will now add a strikethrough to the text, with no JavaScript involved!</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">(Advanced) Part 3: Creating Custom Checkboxes</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The default browser checkboxes are small and ugly. Let's hide them and create our own custom-styled checkbox using pseudo-elements.</p>
  
  <div class="bg-black rounded-lg mb-6 font-mono text-sm text-white overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
/* 1. Hide the original checkbox */
input[type="checkbox"] {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

/* 2. Adjust label padding to make space for our box */
label {
  padding-left: 35px; /* 25px box + 10px margin */
}

/* 3. Create the custom box using ::before */
label::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border: 2px solid #6B7280;
  border-radius: 4px;
  background-color: #1F2937;
  transition: all 0.2s ease;
}

/* 4. Style the box when the (hidden) input is checked */
input[type="checkbox"]:checked + label::before {
  background-color: #3B82F6;
  border-color: #3B82F6;
}

/* 5. Create the checkmark using ::after */
label::after {
  content: '';
  position: absolute;
  left: 9px;
  top: 6px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 6. Show the checkmark when the input is checked */
input[type="checkbox"]:checked + label::after {
  opacity: 1;
}

/* 7. Add a focus state for accessibility */
input[type="checkbox"]:focus + label::before {
  box-shadow: 0 0 0 3px #3B82F680;
}
</code>
    </pre>
  </div>
  
  </div>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: The Power of Pure CSS</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">You have now built a beautiful, interactive to-do list using <strong class="font-semibold text-black">only HTML and CSS</strong>. You've learned how to use the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">:checked</code> selector and sibling combinators to create interactivity, and how to build custom form elements from scratch.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This is the power of modern CSS. Before you reach for JavaScript, always ask: "Can I do this with CSS alone?" Often, the answer is yes.</p>
</div>
  

How to Style a To-Do List with Only CSS (No JavaScript)


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">We've built a static to-do list with HTML and styled it with CSS. Now it's time to make it functional. This tutorial will show you how to use <strong class="font-semibold text-black">pure JavaScript</strong> to add, complete, and delete tasks. This is the foundation of all modern web applications, known as DOM manipulation.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The HTML We Need</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">JavaScript needs a basic HTML structure to interact with. We'll add an <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;input&gt;</code>, a <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;button&gt;</code> to add tasks, and an empty <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;ul&gt;</code> where our tasks will appear.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
&lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"todo-container"</span>&gt;
  &lt;<span class="text-[#569cd6]">h1</span>&gt;My JavaScript Tasks&lt;/<span class="text-[#569cd6]">h1</span>&gt;
  &lt;<span class="text-[#569cd6]">div</span> <span class="text-[#9cdcfe]">class</span>=<span class="text-[#ce9178]">"input-container"</span>&gt;
    &lt;<span class="text-[#569cd6]">input</span> <span class="text-[#9cdcfe]">type</span>=<span class="text-[#ce9178]">"text"</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task-input"</span> <span class="text-[#9cdcfe]">placeholder</span>=<span class="text-[#ce9178]">"Add a new task..."</span>&gt;
    &lt;<span class="text-[#569cd6]">button</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"add-task-btn"</span>&gt;Add&lt;/<span class="text-[#569cd6]">button</span>&gt;
  &lt;/<span class="text-[#569cd6]">div</span>&gt;
  &lt;<span class="text-[#569cd6]">ul</span> <span class="text-[#9cdcfe]">id</span>=<span class="text-[#ce9178]">"task-list"</span>&gt;
    &lt;!-- Tasks will be dynamically added here --&gt;
  &lt;/<span class="text-[#569cd6]">ul</span>&gt;
&lt;/<span class="text-[#569cd6]">div</span>&gt;
</code>
    </pre>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The JavaScript Logic: Step-by-Step</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We will write JavaScript to listen for events and manipulate these HTML elements.</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 1: Get References to DOM Elements</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">First, we need to tell JavaScript which elements to "watch". We use <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">document.getElementById</code> to grab them by their ID.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> taskInput = <span class="text-[#9cdcfe]">document</span>.<span class="text-[#dcdcaa]">getElementById</span>(<span class="text-[#ce9178]">'task-input'</span>);
<span class="text-[#569cd6]">const</span> addTaskBtn = <span class="text-[#9cdcfe]">document</span>.<span class="text-[#dcdcaa]">getElementById</span>(<span class="text-[#ce9178]">'add-task-btn'</span>);
<span class="text-[#569cd6]">const</span> taskList = <span class="text-[#9cdcfe]">document</span>.<span class="text-[#dcdcaa]">getElementById</span>(<span class="text-[#ce9178]">'task-list'</span>);
</code>
    </pre>
  </div>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 2: Create a Function to Add a Task</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">We'll make a reusable function that creates a new task item, adds the delete button, and appends it to the list.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
function addTask() {
  const taskText = taskInput.value.trim();

  if (taskText === "") {
    alert("Please enter a task.");
    return;
  }

  // Create the list item (li)
  const li = document.createElement('li');
  li.textContent = taskText;

  // Create the delete button
  const deleteBtn = document.createElement('button');
  deleteBtn.textContent = 'Delete';
  deleteBtn.className = 'delete-btn';

  // Add the button to the list item
  li.appendChild(deleteBtn);
  
  // Add the list item to the task list
  taskList.appendChild(li);

  // Clear the input field
  taskInput.value = "";
}
</code>
    </pre>
  </div>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 3: Listen for Clicks</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Now we add "event listeners" to run our <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">addTask</code> function when the button is clicked.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
addTaskBtn.addEventListener('click', addTask);

// Optional: Also add task when 'Enter' key is pressed
taskInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTask();
  }
});
</code>
    </pre>
  </div>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Step 4: Handle "Complete" and "Delete" with Event Delegation</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Instead of adding a listener to every new task, we add <strong class="font-semibold text-black">one</strong> listener to the parent <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">&lt;ul&gt;</code>. This is called event delegation and is much more efficient. We check <em class="italic">what</em> was clicked inside the list.</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
taskList.addEventListener('click', function(e) {
  // Check if the clicked item is an LI (a task)
  if (e.target.tagName === 'LI') {
    e.target.classList.toggle('completed');
  }
  
  // Check if the clicked item is a delete button
  if (e.target.className === 'delete-btn') {
    e.target.parentElement.remove();
  }
});
</code>
    </pre>
  </div>
  <p class="text-lg text-black mb-6 leading-relaxed">To make the ".completed" class work, you'd add this CSS: <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">li.completed { text-decoration: line-through; color: #888; }</code></p>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Bringing it Local: Madrid's JavaScript Ecosystem</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">What you just learned—DOM manipulation—is the core skill for any frontend developer. In Madrid, the tech scene is booming, and JavaScript is the language that powers it all. Nearly every major tech company and startup in Madrid relies on JavaScript frameworks like <strong class="font-semibold text-black">React</strong>, <strong class="font-semibold text-black">Node.js</strong>, and <strong class="font-semibold text-black">Vue.js</strong>, all of which are built on the fundamental principles you just practiced.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This local information is vital for SEO, as it connects a technical skill (JavaScript) with career-focused user intent ("JavaScript jobs Madrid").</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Top JavaScript Meetups & Communities in Madrid</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Connecting with the community is the best way to grow. Here are some of the most active JavaScript-focused groups in Madrid.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Community Name</th>
          <th scope="col" class="px-6 py-4">Focus Area</th>
          <th scope="col" class="px-6 py-4">Why It's Worth Joining</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">MadridJS</strong></td>
          <td class="px-6 py-4 text-black">General JavaScript, Frameworks</td>
          <td class="px-6 py-4 text-black">The largest and most established JS community in the city. Covers everything from new framework features to deep dives on JS fundamentals.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Node.js Madrid</strong></td>
          <td class="px-6 py-4 text-black">Backend JavaScript (Node.js)</td>
          <td class="px-6 py-4 text-black">Essential for those who want to take their JS skills to the server-side. Great for learning about APIs, microservices, and performance.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Open Frontend Community</strong></td>
          <td class="px-6 py-4 text-black">Frontend, React, Vue, CSS</td>
          <td class="px-6 py-4 text-black">A fantastic community for all frontend topics. They often host talks on React, state management, and modern CSS-in-JS.</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Madrid Tech Companies Built on JavaScript</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Many of Spain's top tech "unicorns" and major companies have massive engineering teams in Madrid, with JavaScript (especially React and Node.js) as their primary stack.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Company Name</th>
          <th scope="col" class="px-6 py-4">Key Product</th>
          <th scope="col" class="px-6 py-4">Relevance to JavaScript</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Idealista</strong></td>
          <td class="px-6 py-4 text-black">Real Estate Portal</td>
          <td class="px-6 py-4 text-black">A major user of React for their web platform, offering a complex and dynamic user interface.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Cabify</strong></td>
          <td class="px-6 py-4 text-black">Ride-hailing App</td>
          <td class="px-6 py-4 text-black">Employs JavaScript heavily across its stack, from React/React Native for its apps to Node.js for backend services.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Wallapop</strong></td>
          <td class="px-6 py-4 text-black">Marketplace App</td>
          <td class="px-6 py-4 text-black">Uses a modern, component-based frontend stack to handle its massive user base and real-time messaging.</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: You're Now a DOM Manipulator!</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Congratulations! You've successfully built a complete, dynamic web application using pure JavaScript. You learned how to get elements, create elements, listen for user events, and update the page in real-time. These are the most important skills in frontend development and the foundation for learning any framework like React or Vue.</p>
</div>
    

How to Build a Dynamic To-Do List with JavaScript (No Frameworks)


<div class="prose prose-invert max-w-none">
  
  <p class="text-lg text-black mb-6 leading-relaxed">This tutorial is different from the others. HTML, CSS, JavaScript, and React are <strong class="font-semibold text-black">frontend</strong> technologies; they run in the user's browser to create a visual interface (UI). <strong class="font-semibold text-black">Node.js is a backend runtime</strong>. It runs JavaScript on a server or in your terminal, not in the browser. It cannot create visual websites by itself.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Therefore, a "to-do list only with Node.js" is a <strong class="font-semibold text-black">Command-Line Interface (CLI)</strong> application. You will run it from your terminal. This is the foundation of all backend development: managing data, files, and logic. We will use the built-in <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">fs</code> (File System) module to save your tasks in a JSON file.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">The Full Node.js Code (Save as 'app.js')</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This single file is your entire application. You will also need an empty <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code> file in the same directory (just create a file with <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code> in it).</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
const fs = require('fs');
const path = require('path');

const tasksFilePath = path.join(__dirname, 'tasks.json');

// Helper function to load tasks from tasks.json
function loadTasks() {
  try {
    const data = fs.readFileSync(tasksFilePath, 'utf8');
    return JSON.parse(data);
  } catch (error) {
    // If file doesn't exist or is empty, return empty array
    return [];
  }
}

// Helper function to save tasks to tasks.json
function saveTasks(tasks) {
  fs.writeFileSync(tasksFilePath, JSON.stringify(tasks, null, 2));
}

// Get command-line arguments
const [,, command, ...args] = process.argv;
const taskText = args.join(' ');

// Load tasks
let tasks = loadTasks();

switch (command) {
  case 'add':
    const newTask = { text: taskText, completed: false };
    tasks.push(newTask);
    saveTasks(tasks);
    console.log(`Task added: "${taskText}"`);
    break;

  case 'list':
    console.log('Your To-Do List:');
    if (tasks.length === 0) {
      console.log('No tasks found. Add one with: node app.js add "My task"');
    }
    tasks.forEach((task, index) => {
      const status = task.completed ? '[x]' : '[ ]';
      console.log(`${index}. ${status} ${task.text}`);
    });
    break;

  case 'complete':
    const completeIndex = parseInt(taskText, 10);
    if (!isNaN(completeIndex) && tasks[completeIndex]) {
      tasks[completeIndex].completed = true;
      saveTasks(tasks);
      console.log(`Task ${completeIndex} marked as complete.`);
    } else {
      console.log('Invalid task number.');
    }
    break;

  case 'delete':
    const deleteIndex = parseInt(taskText, 10);
    if (!isNaN(deleteIndex) && tasks[deleteIndex]) {
      const deletedTask = tasks.splice(deleteIndex, 1);
      saveTasks(tasks);
      console.log(`Deleted task: "${deletedTask[0].text}"`);
    } else {
      console.log('Invalid task number.');
    }
    break;

  default:
    console.log('--- Node.js To-Do List ---');
    console.log('Usage:');
    console.log('  node app.js list');
    console.log('  node app.js add "Your new task"');
    console.log('  node app.js complete <task_number>');
    console.log('  node app.js delete <task_number>');
}
</code>
    </pre>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">How to Use Your CLI To-Do List</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">Open your terminal in the same directory as <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">app.js</code> and <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code>. Run the following commands:</p>
  
  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
# See all tasks
$ node app.js list
Your To-Do List:
No tasks found. Add one with: node app.js add "My task"

# Add a new task
$ node app.js add "Learn Node.js fs module"
Task added: "Learn Node.js fs module"

# Add another task
$ node app.js add "Build a CLI app"
Task added: "Build a CLI app"

# List all tasks
$ node app.js list
Your To-Do List:
0. [ ] Learn Node.js fs module
1. [ ] Build a CLI app

# Complete a task
$ node app.js complete 0
Task 0 marked as complete.

# List tasks again
$ node app.js list
Your To-Do List:
0. [x] Learn Node.js fs module
1. [ ] Build a CLI app

# Delete a task
$ node app.js delete 1
Deleted task: "Build a CLI app"
</code>
    </pre>
  </div>
  
  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Code Breakdown</h2>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">1. Importing Modules ('fs' and 'path')</h3>
  <p class="text-lg text-black mb-6 leading-relaxed">We use <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">require('fs')</code> to get the built-in <strong class="font-semibold text-black">File System</strong> module, which lets us read and write files. <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">require('path')</code> helps build file paths that work on any operating system (Windows, macOS, Linux).</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">2. Reading Command-Line Arguments ('process.argv')</h3>
  <p class="text-lg text-black mb-6 leading-relaxed"><code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv</code> is an array containing all the command-line arguments.
  <br>When you run <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">node app.js add "My task"</code>:
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[0]</code> is "node"
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[1]</code> is "app.js"
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[2]</code> is "add" (our <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">command</code>)
  <br> - <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">process.argv[3]</code> is "My task" (our <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">args</code>)
  </p>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">3. Persisting Data ('fs.readFileSync' and 'fs.writeFileSync')</h3>
  <p class="text-lg text-black mb-6 leading-relaxed">This is our "database." <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">loadTasks</code> reads the <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">tasks.json</code> file, parses the JSON text into a JavaScript array, and returns it. <code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">saveTasks</code> does the opposite: it takes the JavaScript array, turns it into a formatted JSON string (<code class="text-sm font-mono bg-gray-300 rounded px-1 py-0.5">JSON.stringify</code>), and writes it back to the file, overwriting the old one.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Bringing it Local: Node.js for Madrid's Backend</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">What you've just built is a simple "server-side" application. This is the heart of backend development. In Madrid, Node.js is a dominant technology for building the <strong class="font-semibold text-black">APIs and microservices</strong> that power the React frontends of major companies. The React app (client) calls a Node.js API (server) to get and save data. This is the full-stack connection.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">This SEO-focused section links the tutorial (Node.js) to high-value local career paths ("Node.js jobs Madrid," "backend developer Madrid").</p>

  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Top Backend/Node.js Communities in Madrid</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">To move from a simple script to building robust APIs, connecting with the local backend community is key.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Community Name</th>
          <th scope="col" class="px-6 py-4">Focus Area</th>
          <th scope="col" class="px-6 py-4">Why It's Worth Joining</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Node.js Madrid</strong></td>
          <td class="px-6 py-4 text-black">Backend JavaScript, APIs, Performance</td>
          <td class="px-6 py-4 text-black">The official, premier community for all things Node.js in Madrid. Essential for backend developers.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">MadridJS</strong></td>
          <td class="px-6 py-4 text-black">General JavaScript, Full-Stack</td>
          <td class="px-6 py-4 text-black">Covers both frontend and backend JavaScript, making it great for understanding the full picture, from React to Node.js.</td>
        </tr>
      </tbody>
    </table>
  </div>
  
  <h3 class="text-2xl font-semibold text-black mt-8 mb-4">Madrid Tech Companies Building APIs with Node.js</h3>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The same companies known for React frontends rely on Node.js for their fast, scalable backends.</p>

  <div class="overflow-x-auto my-8">
    <table class="min-w-full text-left text-sm font-light text-surface dark:text-white">
      <thead class="border-b border-neutral-200 font-medium dark:border-white/10">
        <tr>
          <th scope="col" class="px-6 py-4">Company Name</th>
          <th scope="col" class="px-6 py-4">Relevance to Node.js</th>
        </tr>
      </thead>
      <tbody>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Cabify</strong></td>
          <td class="px-6 py-4 text-black">A pioneer in using Node.js for its microservices architecture, handling millions of requests for its ride-hailing platform.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/1pre-wrap">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Idealista</strong></td>
          <td class="px-6 py-4 text-black">Uses Node.js to build and maintain the high-performance APIs that feed data to its React-based web applications.</td>
        </tr>
        <tr class="border-b border-neutral-200 dark:border-white/10">
          <td class="whitespace-nowrap px-6 py-4 font-medium"><strong class="font-semibold text-black">Telefonica Tech</strong></td>
          <td class="px-6 py-4 text-black">Employs Node.js extensively in its digital transformation projects for building modern, scalable backend services.</td>
        </tr>
      </tbody>
    </table>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Conclusion: You're Now a Backend Developer</h2>
  
  <p class="text-lg text-black mb-6 leading-relaxed">You have successfully used JavaScript on both the <strong class="font-semibold text-black">client</strong> (with React) and the <strong class="font-semibold text-black">server</strong> (with Node.js). You've learned how to read from and write to the file system, process terminal commands, and manage data outside of a browser.</p>
  
  <p class="text-lg text-black mb-6 leading-relaxed">The next logical step is to combine them: build a Node.js API (using a framework like <strong class="font-semibold text-black">Express.js</strong>) that your React app can fetch data from. This is the essence of a <strong class="font-semibold text-black">full-stack application</strong>.</p>
</div>
  

How to Build a Command-Line (CLI) To-Do List with Node.js

<div class="prose prose-invert max-w-none">
  <p class="text-lg text-black mb-6 leading-relaxed">Welcome back. In this article, we're going to dive deep into the absolute core of working with data in JavaScript: <strong class="font-semibold text-black">Objects</strong> and <strong class="font-semibold text-black">Arrays</strong>.</p>

  <p class="text-lg text-black mb-6 leading-relaxed">If you've already worked with variables, you know they are great for storing a single piece of data. But in real-world applications—whether you're building an app with React, a backend with Node.js, or anything else—you will never deal with just a single isolated value. You will deal with <em>collections</em> of data. You need to group things. And that is exactly what Objects and Arrays allow us to do.</p>

  <p class="text-lg text-black mb-6 leading-relaxed">We won't just look at the basic syntax; I want you to understand what happens "under the hood" and how to manipulate these structures like a pro.</p>

  

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Arrays: Ordered Lists and Their Secrets</h2>

  <p class="text-lg text-black mb-6 leading-relaxed">Let's start with Arrays. Imagine you are building an app for the Madrid Metro. You have a list of lines. The order matters, right? Line 1 comes before Line 2.</p>

  <p class="text-lg text-black mb-6 leading-relaxed">In JavaScript, we use square brackets <code>[]</code> to create an Array. It is, essentially, a list of values where each value has a numerical position or <strong>index</strong>.</p>

  

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> madridMetroLines = [
  <span class="text-[#ce9178]">'Line 1'</span>,
  <span class="text-[#ce9178]">'Line 2'</span>,
  <span class="text-[#ce9178]">'Line 3'</span>
];

<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(madridMetroLines[<span class="text-[#b5cea8]">0</span>]);
<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(madridMetroLines[<span class="text-[#b5cea8]">2</span>]);
</code>
    </pre>
  </div>

  <p class="text-lg text-black mb-6 leading-relaxed">It is crucial to remember that indices start at <strong>0</strong>. But Arrays are much more than simple lists; they are iterable objects that come with super powerful built-in methods.</p>

  <h3 class="text-2xl font-bold text-black mt-8 mb-4">Manipulating Arrays</h3>

  <p class="text-lg text-black mb-6 leading-relaxed">We rarely create an Array and leave it static. We need to add elements, remove them, or transform them. This is where methods like <code>push</code> or the modern <code>map</code> come into play.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> prices = [<span class="text-[#b5cea8]">10</span>, <span class="text-[#b5cea8]">20</span>, <span class="text-[#b5cea8]">30</span>];

prices.<span class="text-[#dcdcaa]">push</span>(<span class="text-[#b5cea8]">40</span>);

<span class="text-[#569cd6]">const</span> taxAdjustedPrices = prices.<span class="text-[#dcdcaa]">map</span>((price) => price * <span class="text-[#b5cea8]">1.21</span>);

<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(prices);
<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(taxAdjustedPrices);
</code>
    </pre>
  </div>

  

  <p class="text-lg text-black mb-6 leading-relaxed">Notice how we use <code>map</code>. This is one of the most important functions in modern development, especially in React, to transform data without mutating the original array.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Objects: Key-Value Pairs</h2>

  <p class="text-lg text-black mb-6 leading-relaxed">While Arrays are for ordered lists, Objects are for grouping data related to a specific entity. A user, a product, a configuration. We use curly braces <code>{}</code> and define <strong>key: value</strong> pairs.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> user = {
  <span class="text-[#9cdcfe]">name</span>: <span class="text-[#ce9178]">'Carlos'</span>,
  <span class="text-[#9cdcfe]">role</span>: <span class="text-[#ce9178]">'Frontend Developer'</span>,
  <span class="text-[#9cdcfe]">location</span>: <span class="text-[#ce9178]">'Madrid'</span>,
  <span class="text-[#9cdcfe]">details</span>: {
    <span class="text-[#9cdcfe]">hobbies</span>: [<span class="text-[#ce9178]">'Gaming'</span>, <span class="text-[#ce9178]">'Coding'</span>]
  }
};

<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(user.<span class="text-[#9cdcfe]">name</span>);
<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(user[<span class="text-[#ce9178]">'role'</span>]);
</code>
    </pre>
  </div>

  <p class="text-lg text-black mb-6 leading-relaxed">Here is something interesting: you can access properties using dot notation (<code>user.name</code>) or bracket notation (<code>user['role']</code>). Bracket notation is extremely useful when the key you want to access is stored inside a variable.</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Reference Types vs. Primitives</h2>

  <p class="text-lg text-black mb-6 leading-relaxed">This is a concept where many developers stumble. You might have noticed that I used <code>const</code> to declare the Array and the Object above. You might wonder: "Max, if it's <code>const</code>, why can I change things inside it?"</p>

  <p class="text-lg text-black mb-6 leading-relaxed">Great question! This happens because Arrays and Objects are <strong>Reference Types</strong>. The variable does not store the value itself, but a <em>memory address</em> (a pointer) that points to where the data is.</p>

  

  <p class="text-lg text-black mb-6 leading-relaxed">When we modify a property inside the object, we are not changing the memory address, only the data at that destination. That's why <code>const</code> allows it. However, this also means that if we copy an object simply by assigning it to another variable, we are copying the pointer, not the data!</p>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Modern Syntax: Spread and Destructuring</h2>

  <p class="text-lg text-black mb-6 leading-relaxed">Modern JavaScript (ES6+) gave us fantastic tools to work with these structures in a cleaner way.</p>

  <h3 class="text-2xl font-bold text-black mt-8 mb-4">The Spread Operator (...)</h3>

  <p class="text-lg text-black mb-6 leading-relaxed">If you want to create a real copy of an object or combine two arrays, the Spread operator is your best friend.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> hobbies = [<span class="text-[#ce9178]">'Sports'</span>, <span class="text-[#ce9178]">'Cooking'</span>];
<span class="text-[#569cd6]">const</span> newHobbies = [<span class="text-[#ce9178]">'Reading'</span>, ...hobbies];

<span class="text-[#569cd6]">const</span> person = { <span class="text-[#9cdcfe]">name</span>: <span class="text-[#ce9178]">'Max'</span>, <span class="text-[#9cdcfe]">age</span>: <span class="text-[#b5cea8]">30</span> };
<span class="text-[#569cd6]">const</span> updatedPerson = { ...person, <span class="text-[#9cdcfe]">age</span>: <span class="text-[#b5cea8]">31</span> };

<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(newHobbies);
<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(updatedPerson);
</code>
    </pre>
  </div>

  <h3 class="text-2xl font-bold text-black mt-8 mb-4">Destructuring</h3>

  <p class="text-lg text-black mb-6 leading-relaxed">What if you only want to extract a specific property from an object and store it in a variable? Destructuring does this in a single line of code.</p>

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> { <span class="text-[#9cdcfe]">name</span>, <span class="text-[#9cdcfe]">location</span> } = user;
<span class="text-[#569cd6]">const</span> [ <span class="text-[#9cdcfe]">firstHobby</span> ] = hobbies;

<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(name);
<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(firstHobby);
</code>
    </pre>
  </div>

  <h2 class="text-3xl font-bold text-black mt-12 mb-6">Putting It All Together: Arrays of Objects</h2>

  <p class="text-lg text-black mb-6 leading-relaxed">Here is where theory meets reality. In almost all applications, you will work with Arrays of Objects. Think of a JSON response from an API.</p>

  

  <div class="bg-[#1e1e1e] rounded-lg mb-6 font-mono text-sm text-[#d4d4d4] overflow-hidden">
    <div class="flex items-center justify-end gap-2 px-4 py-2 bg-gray-800">
      <div class="w-3 h-3 rounded-full bg-red-500"></div>
      <div class="w-3 h-3 rounded-full bg-yellow-500"></div>
      <div class="w-3 h-3 rounded-full bg-green-500"></div>
    </div>
    <pre class="p-4 overflow-x-auto">
<code>
<span class="text-[#569cd6]">const</span> techEvents = [
  {
    <span class="text-[#9cdcfe]">id</span>: <span class="text-[#b5cea8]">1</span>,
    <span class="text-[#9cdcfe]">name</span>: <span class="text-[#ce9178]">'MadridJS Meetup'</span>,
    <span class="text-[#9cdcfe]">attendees</span>: <span class="text-[#b5cea8]">120</span>
  },
  {
    <span class="text-[#9cdcfe]">id</span>: <span class="text-[#b5cea8]">2</span>,
    <span class="text-[#9cdcfe]">name</span>: <span class="text-[#ce9178]">'Codemotion Madrid'</span>,
    <span class="text-[#9cdcfe]">attendees</span>: <span class="text-[#b5cea8]">2500</span>
  }
];

<span class="text-[#569cd6]">const</span> bigEvents = techEvents.<span class="text-[#dcdcaa]">filter</span>(event => event.<span class="text-[#9cdcfe]">attendees</span> > <span class="text-[#b5cea8]">500</span>);

<span class="text-[#9cdcfe]">console</span>.<span class="text-[#dcdcaa]">log</span>(bigEvents);
</code>
    </pre>
  </div>

  <p class="text-lg text-black mb-6 leading-relaxed">Mastering these structures is not just about learning syntax. It's about understanding how to model your data. Whether at Glovo handling menus or at Fever filtering events, you will always come back to these fundamentals.</p>

  <p class="text-lg text-black mb-6 leading-relaxed">I hope this gave you a much clearer vision! Try the code in your console and see you in the next article.</p>
</div>

CodeSyllabus Blog.

Web Development

Building a To-Do Tutorial with Only HTML: A Beginner's Guide

Frontend Development

Beyond the Code: A Deep Dive into 'Vibe' and Why It's Your Most Important Frontend Metric

HTML & CSS

How to Make a Simple To-Do List with Only HTML: A Beginner's Tutorial

How to Style a To-Do List with Only CSS (No JavaScript)

JavaScript

How to Build a Dynamic To-Do List with JavaScript (No Frameworks)

The DNA of Data: Objects & Arrays Masterclass

Node.js

How to Build a Command-Line (CLI) To-Do List with Node.js