Small toy Program – Project Todo – Step #1

Working with LLMs as an Experienced Programmer

I’m going to create a simple Project Todo because the rapid development of large language models (LLMs) can be overwhelming, especially for old programmers like me who have been in the field for a long time. At first, I felt a sense of despair. The way people now code—with vibe-based prompts, automation tools, and AI-assisted workflows—felt foreign and unfamiliar.

But as I started experimenting, a small spark of hope appeared.

While I may not be fully fluent in prompt-driven development yet, my years of experience have given me something equally valuable: the ability to see the big picture. I know how to structure systems. I’ve learned that if I break down a problem into smaller components—like building blocks—and assemble them step by step, the outcome is much more robust and reliable.

I also have a strong sense for architecture, debugging, and testing. These are things that don’t change easily, even as tools evolve. And I believe that strength gives me an edge in delivering real-world, production-ready software.

So now, instead of resisting, I’m choosing to embrace LLMs—not just as tools to build, but as tools to build with. Sure, it’s still a bit awkward. Until recently, my focus was on creating machine learning systems, not collaborating with them.

But I’m realizing this shift could be fun. And fun, after all, is the best kind of motivation.

Conversation with LLM for the Small toy Program Project Todo

I want to build a simple ToDo app for my phone. How should I get started?

First, I need to decide how to build it.

As a mobile app? → Flutter, React Native, Kotlin, or Swift
As a web app? → HTML + JS (can feel like an app if built as a PWA)

…

My development environment isn’t very powerful. Which option is easier to develop?

If your setup isn’t great, building it as a web app (PWA) is easier.
Why?
You don’t need to install anything—just use a browser.

…

Okay, let’s go with the web option. Tell me what to do first.

index.html

style.css

script.js

Then show me the code.

index.html – V1

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Simple Todo</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>📝 Todo List</h1>
  <input type="text" id="todo-input" placeholder="Input Todo..." />
  <button id="add-btn">Add</button>
  <ul id="todo-list"></ul>

  <script src="script.js"></script>
</body>
</html>

style.css – V1

body {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
}
input {
  padding: 10px;
  width: 200px;
}
button {
  padding: 10px;
}
li {
  margin: 10px 0;
}

script.js – V1

const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');

addBtn.addEventListener('click', () => {
  const text = input.value.trim();
  if (text === '') return;

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

  li.addEventListener('click', () => {
    li.style.textDecoration = li.style.textDecoration === 'line-through' ? '' : 'line-through';
  });

  list.appendChild(li);
  input.value = '';
});

Save to LocalStorage, automatically add the registration/completion date, and make a delete button.

Show time added: Added: YYYY-MM-DD HH:MM

Can be deleted with the ❌ button

Save time in completedAt when done

Show (completed: date) on crossed out item

Clicking again to cancel also resets completedAt

Script.js – V2

const input = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const list = document.getElementById('todo-list');

let todos = JSON.parse(localStorage.getItem('todos')) || [];
renderTodos();

addBtn.addEventListener('click', () => {
  const text = input.value.trim();
  if (text === '') return;

  const newTodo = {
    text,
    done: false,
    createdAt: new Date().toISOString(),
    completedAt: null,
    deletedAt: null
  };

  todos.push(newTodo);
  saveTodos();
  renderTodos();
  input.value = '';
});

function renderTodos() {
  list.innerHTML = '';

  todos.forEach((todo, index) => {
    if (todo.deletedAt) return;

    const li = document.createElement('li');

    const textSpan = document.createElement('span');
    let displayText = todo.text;

    if (todo.done && todo.completedAt) {
      displayText += ' (Completed: ${formatDate(todo.completedAt)})';
    } else {
      displayText += ' (Add: ${formatDate(todo.createdAt)})';
    }

    textSpan.textContent = displayText;
    if (todo.done) {
      textSpan.style.textDecoration = 'line-through';
    }

    textSpan.addEventListener('click', () => {
      todos[index].done = !todos[index].done;
      todos[index].completedAt = todos[index].done ? new Date().toISOString() : null;
      saveTodos();
      renderTodos();
    });

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '❌';
    deleteBtn.style.marginLeft = '10px';
    deleteBtn.addEventListener('click', () => {
      todos[index].deletedAt = new Date().toISOString();
      saveTodos();
      renderTodos();
    });

    li.appendChild(textSpan);
    li.appendChild(deleteBtn);
    list.appendChild(li);
  });
}

function saveTodos() {
  localStorage.setItem('todos', JSON.stringify(todos));
}

function formatDate(isoStr) {
  const date = new Date(isoStr);
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

Can you recommend a free web service that I can use to continue testing locally?

1. Render (https://render.com)

Use case: Full-stack apps (e.g., FastAPI + React)

Free tier: Yes — free web services with auto-deploy from GitHub

Local testing: Develop locally, then push to deploy

Note: Free tier may sleep after inactivity

2. Vercel (https://vercel.com)

Use case: Frontend frameworks (React, Next.js)

Free tier: Yes — very developer-friendly

Local testing: vercel dev command lets you test locally

Note: Best for frontend + serverless functions

3. Replit (https://replit.com)

Use case: Quick prototyping, supports Python, JS, etc.

Free tier: Yes — with instant preview in browser

Local testing: Built-in, no setup required

Note: Ideal for beginners or quick sharing

4. GitHub Codespaces (https://github.com/features/codespaces)

Use case: Full VS Code in the browser

Free tier: Yes, for small usage with GitHub Free

Local testing: Dev container support, good for remote-like local testing

Note: Needs GitHub + some setup

5. ngrok (https://ngrok.com)

Use case: Expose your local server to the web

Free tier: Yes — limited usage

Local testing: Runs on your machine, makes it public

Note: Great for testing webhooks, mobile devices

6. Glitch (https://glitch.com)

Use case: Node.js and small web apps

It doesn’t have to be a dynamic page to begin with

1. GitHub Pages

Best for: Hosting static websites from a GitHub repo

How to use: Push your HTML/CSS to GitHub, enable GitHub Pages

Free: 100% free

URL example: https://yourusername.github.io/yourproject

2. Netlify

Best for: Static sites with build steps (e.g., HTML + Tailwind)

Features: Drag-and-drop deploy, custom domain support

Free: Yes, generous free tier

Local testing: Use netlify-cli with netlify dev

3. Vercel

Best for: Static or frontend frameworks (e.g., Next.js, React)

Deploy: Connect GitHub > Auto-deploy

Free: Yes

Local testing: Use vercel dev

4. Cloudflare Pages

Best for: Static site deployment via Git

Free: Yes

Fast CDN: Ultra-fast global edge hosting

Bonus: No sleep downtime like some other free tier

Tell them how to upload to your Github page

Github – Page

I’ve been using github for a long time, and now I know this feature. I’m actually new to web programming, so I’ve never used github before. I’ve only done system programming, so it’s quite unfamiliar, but it’s fun and fast, and I wonder if web programs are fast in the first place.

Small toy Program – Project Todo – Step #1

Working with LLMs as an Experienced Programmer

Conversation with LLM for the Small toy Program Project Todo

index.html – V1

style.css – V1

script.js – V1

Script.js – V2

1. Render (https://render.com)

2. Vercel (https://vercel.com)

3. Replit (https://replit.com)

4. GitHub Codespaces (https://github.com/features/codespaces)

5. ngrok (https://ngrok.com)

6. Glitch (https://glitch.com)

1. GitHub Pages

2. Netlify

3. Vercel

4. Cloudflare Pages

Github – Page

By Mark