Prompt Details
Model
Chat - (gpt-5.2)
Token size
555
Example input
[Describe the idea or feature]: A simple to-do list where users can add tasks and mark them as completed
[Insert]: JavaScript (Vanilla JS, browser-based)
[Beginner / Intermediate / Advanced]: Beginner
[Insert ]: Confused about how to structure logic without making it messy
[Low / Medium / High]: Low
Example output
1️⃣ Intent Clarification
✅ You want to build a basic to-do list that lets users
add tasks
mark tasks as completed
✅ The simplest approach is:
Store tasks in an array
Render tasks to the screen
Update the array when a task is clicked
No databases, no frameworks, no advanced patterns.
2️⃣ Logic Breakdown (Human First)
✅ Step 1: Create an empty list to store tasks
→ This is your single source of truth
✅ Step 2: Take user input and add it to the list
→ Each task is just text + a completed flag
✅ Step 3: Display the list on the page
→ Loop through tasks and show them
✅ Step 4: Allow clicking a task to mark it complete
→ Toggle a boolean value
✅ What we can safely ignore for now:
Saving to localStorage
Editing tasks
Deleting tasks
Fancy UI
3️⃣ Clean Code Draft
Copy code
Html
<!DOCTYPE html>
<html>
<head>
<title>Simple Todo</title>
</head>
<body>
<input id="taskInput" placeholder="Enter a task" />
<button onclick="addTask()">Add</button>
<ul id="taskList"></ul>
<script>
// Store all tasks here
const tasks = [];
function addTask() {
const input = document.getElementById("taskInput");
const text = input.value.trim();
if (text === "") return;
tasks.push({
name: text,
completed: false
});
input.value = "";
renderTasks();
}
function renderTasks() {
const list = document.getElementById("taskList");
list.innerHTML = "";
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.textContent = task.name;
if (task.completed) {
li.style.textDecoration = "line-through";
}
li.onclick = () => toggleTask(index);
list.appendChild(li);
});
}
function toggleTask(index) {
tasks[index].completed = !tasks[index].completed;
renderTasks();
}
</script>
</body>
</html>
4️⃣ Code Walkthrough
✅ tasks array
→ Holds all task data
✅ addTask()
→ Reads input
→ Adds task object
→ Refreshes UI
✅ renderTasks()
→ Clears the list
→ Rebuilds it from current data
✅ toggleTask(index)
→ Flips completed state
→ Re-renders list
Data always flows one way:
User action → tasks array → renderTasks()
5️⃣ Simplification Check
✅ No classes needed
✅ No complex event listeners
✅ No state libraries
🚫 Do NOT add yet:
Local storage
IDs
Filters
MVC patterns
This is intentionally small and calm.
6️⃣ Beginner-Friendly Notes
✅ Common mistakes to avoid:
Modifying the DOM without updating data
Forgetting to re-render after changes
✅ Concepts worth understanding:
Arrays and objects
Functions
Event handling
✅ Learn later:
localStorage
Component-based design
Frameworks
7️⃣ Debug & Improvement Hints
✅ How to test:
Add multiple tasks
Click tasks to toggle completion
✅ If it breaks:
Open browser console
Check for spelling errors
Console.log the tasks array
✅ One small improvement:
Add an alert when input is empty
8️⃣ Calm Refactor Option (Optional)
✅ Slight improvement:
Move inline styles to a CSS class
Why?
Cleaner separation
Easier styling later
(No behavior changes — just readability)
🔟 Vibe Summary
✅ Key principle applied:
One clear source of truth (the tasks array)
✅ Reminder:
If the code feels confusing, you’re probably adding things too early.
Simple first. Always.
Instant access
Commercial use
Money‑backBy purchasing this prompt, you agree to our terms of service
1
Favorites
33
Views
GPT-5.2
Many people know what they want to build but struggle with messy logic, unclear structure, or mental overload while coding.
This prompt acts as a vibe-aligned coding assistant—helping translate ideas into clean, readable code while maintaining clarity, flow, and focus.
What Buyers Get:
🧠 Turns rough ideas into structured code logic
🧩 Explains code in simple, human language
✍️ Improves readability and structure
🧘 Reduces coding overwhelm and confusion
🛠️ Works across frontend, backend, script
...more
Added over 1 month ago
