ਇੱਕ ਸਾਫ਼, ਕਦਮ-ਬੜੀ-ਕਦਮ ਗਾਈਡ ਇੱਕ ਛੋਟੇ ਟੂ‑ਡੂ ਐਪ ਬਣਾਉਣ ਲਈ: ਫੀਚਰ ਯੋਜਨਾ ਬਣਾਓ, ਸਕਰੀਨ ਤਿਆਰ ਕਰੋ, ਲਾਜਿਕ ਜੋੜੋ, ਡਾਟਾ ਸੇਵ ਕਰੋ, ਟੈਸਟ ਕਰੋ ਅਤੇ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ।

ਇਸ ਮਾਰਗਦਰਸ਼ਨ ਵਿੱਚ ਜਦੋਂ ਮੈਂ “ਐਪ” ਕਹਿੰਦਾ/ਕਹਿੰਦੀ ਹਾਂ, ਮੇਰਾ ਮਤਲਬ ਇੱਕ ਛੋਟਾ ਵੈੱਬ ਐਪ ਹੈ: ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਜੋ ਤੂੰ ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹਦਾ/ਖੋਲ੍ਹਦੀ ਹੋ ਅਤੇ ਜੋ ਤੇਰੇ ਕਲਿੱਕ ਅਤੇ ਟਾਈਪ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ। ਕਿਸੇ ਇੰਸਟਾਲ, ਖਾਤਿਆਂ ਜਾਂ ਭਾਰੀ ਸੈਟਅਪ ਦੀ ਲੋੜ ਨਹੀਂ—ਸਿਰਫ਼ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰੋਜੈਕਟ ਜੋ ਤੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਚਲਾ ਸਕਦਾ/ਸਕਦੀ ਹੈ।
ਅੰਤ ਤੱਕ, ਤੇਰੇ ਕੋਲ ਇੱਕ ਟੂ‑ਡੂ ਐਪ ਹੋਵੇਗਾ ਜੋ ਇਹ ਕਰ ਸਕਦਾ ਹੈ:
localStorage ਦੀ ਵਰਤੋਂ ਨਾਲ (ਤਾਂ ਜੋ ਟੈਬ ਬੰਦ ਕਰਨ ਨਾਲ ਸਾਰਾ ਡਾਟਾ ਮਿਟੇ ਨਾ)ਇਹ ਪਰਫੈਕਟ ਜਾਂ “ਐਨਟਰਪ੍ਰਾਈਜ਼-ਗ੍ਰੇਡ” ਨਹੀਂ ਹੋਵੇਗਾ, ਅਤੇ ਇਹੀ ਦਿਲਚਸਪੀ ਹੈ। ਇਹ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ ਬਿਨਾਂ ਬਹੁਤ ਸਾਰੇ ਟੂਲਾਂ ਦੇ ਬੁਨਿਆਦੀ ਗੱਲਾਂ ਸਿਖਾਉਂਦਾ ਹੈ।
ਤੂੰ ਪਦ-ਪਦ ਕਰਕੇ ਐਪ ਬਣਾਵੇਗਾ/ਬਣਾਵੇਗੀ ਅਤੇ ਫਰੰਟ-ਐਂਡ ਵੈੱਬ ਐਪਸ ਦੇ ਮੁੱਖ ਹਿੱਸੇ ਸਿੱਖੇਗਾ/ਸਿੱਖੇਗੀ:
ਸਧਾਰਾ ਰੱਖੋ। ਤੁਹਾਨੂੰ ਸਿਰਫ ਇਹ ਚਾਹੀਦਾ ਹੈ:
ਜੇ ਤੁਸੀਂ ਫੋਲਡਰ ਬਣਾਉਣ ਅਤੇ ਕੁਝ ਫਾਇਲਾਂ ਸੋਧਣ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਤਿਆਰ ਹੋ।
ਕੋਡ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ, ਫੈਸਲਾ ਕਰੋ ਕਿ “ਸਫਲਤਾ” ਕਿਸ ਨੂੰ ਕਹਾਂਗੇ। ਇਹ ਟਿਊਟੋਰਿਯਲ ਇੱਕ ਛੋਟਾ ਐਪ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸਦਾ ਇਕ ਸਾਫ਼ ਕੰਮ ਹੈ: ਤੁਹਾਡੇ ਕਰਕੇ ਟਰੈਕ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨਾ ਕਿ ਤੁਸੀਂ ਕੀ ਕਰਣਾ ਹੈ।
ਇੱਕ ਵਾਕ ਵਿੱਚ ਲਿਖੋ ਜੋ ਤੁਸੀਂ ਬਣਾਉਂਦੇ ਸਮੇਂ ਆਪਣੀ ਅੱਖਾਂ 'ਤੇ ਰੱਖ ਸਕੋ:
“ਇਹ ਐਪ ਮੈਨੂੰ ਇੱਕ ਲਿਸਟ ਵਿੱਚ ਟਾਸਕ ਜੋੜਨ ਦਿੰਦੀ ਹੈ ਤਾਂ ਜੋ ਮੈਂ ਉਹ ਨਾ ਭੁੱਲਾਂ।”
бас। ਜੇ ਤੁਸੀਂ ਕੈਲੰਡਰ, ਰੀਮਾਈਨਡਰ, ਟੈਗ ਜਾਂ ਖਾਤਿਆਂ ਜੋੜਨ ਦੀ ਲਾਲਚ ਮਹਿਸੂਸ ਕਰੋ, ਉਹਨਾਂ ਵਿਚਾਰਾਂ ਨੂੰ ਬਾਦ ਲਈ ਰੱਖ ਦਿਓ।
ਦੋ ਛੋਟੀਆਂ ਸੂਚੀਆਂ ਬਣਾ ਲਵੋ:
ਅਨਿਵਾਰ্য (ਇਸ ਪ੍ਰੋਜੈਕਟ ਲਈ):
ਚੰਗਾ ਹੋਵੇ (ਅਜੋਕੇ ਲਈ ਜ਼ਰੂਰੀ ਨਹੀਂ): ਮਿਆਦਾਂ, ਪ੍ਰਾਇਰਿਟੀਆਂ, ਸ਼੍ਰੇਣੀਆਂ, ਖੋਜ, ਡਰੈਗ-ਅਤੇ-ਡ੍ਰਾਪ, ਕਲਾਉਡ ਸਿੰਕ।
“ਅਨਿਵਾਰ्य” ਨੂੰ ਛੋਟਾ ਰੱਖਣ ਨਾਲ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਪਰੋਜੈਕਟ ਨੂੰ ਮੁਕੰਮਲ ਕਰ ਸਕਦੇ ਹੋ।
ਇਹ ਐਪ ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਹੋ ਸਕਦੀ ਹੈ ਜਿਸ ਵਿੱਚ:
ਖਾਸ ਹੋਵੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਪੱਛੇ ਫਸ ਨਾ ਜਾਓ:
ਇਸ ਫੈਸਲੇ ਨਾਲ, ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਫਾਇਲਾਂ ਸੈਟਅਪ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ।
ਕੋਡ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ, ਐਪ ਲਈ ਇੱਕ ਸਾਫ਼ ਘਰ ਬਣਾ ਲਵੋ। ਸ਼ੁਰੂ ਤੋਂ ਫਾਇਲਾਂ ਅਣੁਵੱਧਿਤ ਰੱਖਣ ਨਾਲ ਅਗਲੇ ਕਦਮ ਸੌਖੇ ਹੋ ਜਾਂਦੇ ਹਨ।
ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਦਾ ਨਾਮ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਰੱਖੋ todo-app. ਇਹ ਫੋਲਡਰ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਸਭ ਚੀਜ਼ਾਂ ਰੱਖੇਗਾ।
ਉਸ ਫੋਲਡਰ ਦੇ ਅੰਦਰ ਤਿੰਨ ਫਾਇਲਾਂ ਬਣਾਓ:
index.html (ਪੇਜ ਦੀ ਬਣਤਰ)styles.css (ਲੁੱਕ ਅਤੇ ਲੇਆਊਟ)app.js (ਵਰਤੋਂਕਾਰ ਇੰਟਰਐਕਸ਼ਨ ਅਤੇ ਵਿਹੈਵਯਰ)ਜੇ ਤੁਹਾਡਾ ਕੰਪਿਊਟਰ ਫਾਇਲ ਐਕਸਟੈਂਸ਼ਨ ਛੁਪਾਉਂਦਾ ਹੈ (ਜਿਵੇਂ “.html”), ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਸਹੀ ਫਾਇਲਾਂ ਬਣਾ ਰਹੇ ਹੋ। ਨਵੇਂ ਕੋਡਰਾਂ ਦੀ ਆਮ ਗਲਤੀ ਹੁੰਦੀ ਹੈ index.html.txt ਬਣ ਜਾਣਾ।
todo-app ਫੋਲਡਰ ਨੂੰ ਆਪਣੇ ਕੋਡ ਐਡੀਟਰ (VS Code, Sublime Text ਆਦਿ) ਵਿੱਚ ਖੋਲ੍ਹੋ। ਫਿਰ index.html ਨੂੰ ਆਪਣੇ ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ।
ਇਸ ਵੇਲੇ, ਤੁਹਾਡਾ ਪੇਜ ਖਾਲੀ ਹੋ ਸਕਦਾ ਹੈ—ਅਤੇ ਓਹ ਠੀਕ ਹੈ। ਅਸੀਂ ਅਗਲੇ ਕਦਮ ਵਿੱਚ ਸਮੱਗਰੀ ਜੋੜਾਂਗੇ।
ਜਦੋਂ ਤੁਸੀਂ ਫਾਇਲਾਂ ਸੋਧਦੇ ਹੋ, ਬਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਅੱਪਡੇਟ ਨਹੀਂ ਕਰੇਗਾ (ਜੇ ਤੱਕ ਤੁਸੀਂ ਕੋਈ ਟੂਲ ਨਹੀਂ ਵਰਤਦੇ)।
ਇਸ ਲਈ ਬੁਨਿਆਦੀ ਲੂਪ ਇਹ ਹੈ:
ਜੇ ਕੁਝ “ਕਾਮ ਨਹੀਂ ਕਰ ਰਿਹਾ”, ਤਾਂ ਰੀਫ੍ਰੈਸ਼ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਕਰਨ ਵਾਲੀ ਚੀਜ਼ ਹੁੰਦੀ ਹੈ।
ਤੂੰ ਸਿੱਧਾ index.html ਨੂੰ ਡਬਲ-ਕਲਿਕ ਕਰਕੇ ਇਹ ਐਪ ਚਲਾ ਸਕਦਾ/ਸਕਦੀ ਹੈ, ਪਰ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਅੱਗੇ ਆ ਕੇ ਕੁਝ ਅਜਿਹੀਆਂ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ (ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਸੀਂ ਡਾਟਾ ਸੇਵ/ਲੋਡ ਕਰਦੇ ਹੋ)।
ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਓਪਸ਼ਨ:
python -m http.server
ਫਿਰ ਉਸ ਐਡਰੈੱਸ ਨੂੰ ਖੋਲ੍ਹੋ ਜੋ ਉਹ ਪ੍ਰਿੰਟ ਕਰੇਗਾ (ਅਕਸਰ http://localhost:8000) ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ।
ਹੁਣ ਅਸੀਂ ਐਪ ਲਈ ਇਕ ਸਾਫ਼ ਖਾਕਾ ਬਣਾਊਂਗੇ। ਇਹ HTML ਅਜੇ ਇੰਟਰਐਕਟਿਵ ਨਹੀਂ ਬਣਾਏਗਾ (ਉਸ ਦੇ ਲਈ ਅਗਲਾ ਕਦਮ ਹੈ), ਪਰ ਇਹ ਤੁਹਾਡੇ JavaScript ਨੂੰ ਵਧੀਆ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਸਪੇਸ ਦੇਵੇਗਾ।
ਅਸੀਂ ਸ਼ਾਮਿਲ ਕਰਾਂਗੇ:
ਨਾਂ ਸਧਾਰਨ ਅਤੇ ਪੜ੍ਹਨ ਯੋਗ ਰੱਖੋ। ਵਧੀਆਂ IDs/classes ਬਾਅਦ ਵਿੱਚ ਜਾਵਾਸਕ੍ਰਿਪਟ ਲਈ ਆਸਾਨੀ ਬਣਾਉਂਦੇ ਹਨ ਕਿਉਂਕਿ ਫਿਰ ਤੂੰ ਅਸਾਨੀ ਨਾਲ ਓਹਨਾਂ ਤੱਤਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰ ਸਕਦੇ ਹੋ।
index.html ਵਿੱਚ ਪੇਸਟ ਕਰੋ\u003c!doctype html\u003e
\u003chtml lang=\"en\"\u003e
\u003chead\u003e
\u003cmeta charset=\"utf-8\" /\u003e
\u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\" /\u003e
\u003ctitle\u003eTo‑Do App\u003c/title\u003e
\u003clink rel=\"stylesheet\" href=\"styles.css\" /\u003e
\u003c/head\u003e
\u003cbody\u003e
\u003cmain class=\"app\" id=\"app\"\u003e
\u003ch1 class=\"app__title\" id=\"appTitle\"\u003eMy To‑Do List\u003c/h1\u003e
\u003cform class=\"task-form\" id=\"taskForm\"\u003e
\u003clabel class=\"task-form__label\" for=\"taskInput\"\u003eNew task\u003c/label\u003e
\u003cdiv class=\"task-form__row\"\u003e
\u003cinput
id=\"taskInput\"
class=\"task-form__input\"
type=\"text\"
placeholder=\"e.g., Buy milk\"
autocomplete=\"off\"
/\u003e
\u003cbutton id=\"addButton\" class=\"task-form__button\" type=\"submit\"\u003e
Add
\u003c/button\u003e
\u003c/div\u003e
\u003c/form\u003e
\u003cul class=\"task-list\" id=\"taskList\" aria-label=\"Task list\"\u003e\u003c/ul\u003e
\u003c/main\u003e
\u003cscript src=\"app.js\"\u003e\u003c/script\u003e
\u003c/body\u003e
\u003c/html\u003e
ਇਹ ਸੰਰਚਨਾ ਲਈ ਕਾਫੀ ਹੈ। ਧਿਆਨ ਦਿਓ ਕਿ ਅਸੀਂ id=\"taskInput\" ਅਤੇ id=\"taskList\" ਵਰਤੇ—ਇਹ ਦੋ ਤੱਤ ਉਹ ਹਨ ਜਿਨ੍ਹਾਂ ਨਾਲ ਤੁਸੀਂ ਜ਼ਿਆਦਾ JavaScript ਵਿੱਚ ਗੱਲ ਕਰੋਗੇ।
ਹੁਣ ਤੱਕ ਤੁਹਾਡਾ ਪੇਜ ਹੈ, ਪਰ ਇਹ ਸ਼ਾਇਦ ਇੱਕ ਆਮ ਦਸਤਾਵੇਜ਼ ਵਰਗਾ ਦਿਖਦਾ ਹੈ। ਥੋੜ੍ਹੀ CSS ਨਾਲ ਇਹ ਵਰਤਣ ਯੋਗ ਬਣ ਜਾਂਦਾ ਹੈ: ਖਾਲੀ ਜਗ੍ਹਾ, ਪਾਠ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਬਟਨ ਜੋ ਕਲਿੱਕ ਕਰਨ ਯੋਗ ਮਹਿਲੂਸ ਹੋਣ।
ਇੱਕ ਕੇਂਦਰਿਤ ਬਾਕਸ ਐਪ ਨੂੰ ਫੋਕਸ ਰੱਖਦਾ ਹੈ ਅਤੇ ਸਮੱਗਰੀ ਨੂੰ ਚੌੜੇ ਸਕ੍ਰੀਨ 'ਤੇ ਫੈਲਣ ਤੋਂ ਰੋਕਦਾ ਹੈ।
/* Basic page setup */
body {
font-family: Arial, sans-serif;
background: #f6f7fb;
margin: 0;
padding: 24px;
}
/* Centered app container */
.container {
max-width: 520px;
margin: 0 auto;
background: #ffffff;
padding: 16px;
border-radius: 10px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
ਹਰ ਟਾਸਕ ਇੱਕ ਵੱਖਰਾ “ਰੋ” ਵਰਗਾ ਦਿਖਨਾ ਚਾਹੀਦਾ ਹੈ, ਸਹੂਲਤ ਭਰੀ ਖਾਲੀ ਜਗ੍ਹਾ ਨਾਲ।
ul { list-style: none; padding: 0; margin: 16px 0 0; }
li {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border: 1px solid #e7e7ee;
border-radius: 8px;
margin-bottom: 10px;
}
.task-text { flex: 1; }
ਜਦੋਂ ਟਾਸਕ ਮੁਕੰਮਲ ਹੋ ਜਾਵੇ, ਉਨ੍ਹਾਂ ਨੂੰ ਵਿਜ਼ੂਅਲ ਤੌਰ 'ਤੇ ਬਦਲ ਦਿਖਾਓ ਤਾਂ ਜੋ ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਪਤਾ ਲੱਗ ਜਾਵੇ।
.done .task-text {
text-decoration: line-through;
color: #777;
opacity: 0.85;
}
ਬਟਨ ਇਕੋ-ਜਿਹੇ ਆਕਾਰ ਅਤੇ ਸਟਾਈਲ ਦੇ ਹੋਣ ਚਾਹੀਦੇ ਹਨ ਤਾਂ ਕਿ ਉਹ ਇੱਕ ਐਪ ਦਾ ਹਿੱਸਾ ਮਹਿਸੂਸ ਹੋਣ।
button {
border: none;
border-radius: 8px;
padding: 8px 10px;
cursor: pointer;
}
button:hover { filter: brightness(0.95); }
ਇਹ ਇੱਕ ਸਾਫ਼, ਦੋਸਤਾਨਾ UI ਲਈ ਕਾਫੀ ਹੈ—ਕੋਈ ਉੱਤਮ ਕੁਤੀ ਨਾ ਲੋੜੀਦੀ। ਅਗਲੇ ਕਦਮ ਵਿੱਚ ਅਸੀਂ JavaScript ਨਾਲ ਵਿਹੈਵਿਯਰ ਜੁੜਾਂਗੇ।
ਹੁਣ ਜਦ ਤੁਹਾਡੇ ਕੋਲ ਇਨਪੁਟ, ਬਟਨ ਅਤੇ ਲਿਸਟ ਹੈ, ਅਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਕੰਮ ਕਰਨਯੋਗ ਬਣਾਵਾਂਗੇ। ਲਕਸ਼ ਸਧਾਰਨ ਹੈ: ਜਦ ਕੋਈ ਟਾਸਕ ਟਾਈਪ ਕਰੇ ਅਤੇ Add ਦਬਾਏ (ਜਾਂ Enter ਦਬਾਏ), ਇੱਕ ਨਵਾਂ ਆਈਟਮ ਲਿਸਟ ਵਿੱਚ ਆ ਜਾਂਦਾ ਹੈ।
ਤੁਹਾਡੇ JavaScript ਫਾਇਲ ਵਿੱਚ, ਪਹਿਲਾਂ ਜਰੂਰੀ ਤੱਤ ਪ੍ਰਾਪਤ ਕਰੋ, ਫਿਰ ਦੋ ਕਾਰਵਾਈਆਂ ਲਈ ਸੁਣਨ ਵਾਲੇ (listeners) ਜੋੜੋ: ਬਟਨ ਕਲਿੱਕ ਅਤੇ ਇਨਪੁਟ ਵਿੱਚ Enter ਕੀ।
const taskInput = document.querySelector('#taskInput');
const addBtn = document.querySelector('#addBtn');
const taskList = document.querySelector('#taskList');
function addTask() {
const text = taskInput.value.trim();
// Block empty tasks (including ones that are just spaces)
if (text === '') return;
const li = document.createElement('li');
li.textContent = text;
taskList.appendChild(li);
// Clear the input and put the cursor back
taskInput.value = '';
taskInput.focus();
}
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keydown', (event) => {
if (event.key === 'Enter') {
addTask();
}
});
trim() ਵਰਤਦਾ ਹੈ।\u003cli\u003e ਬਣਾਉਂਦਾ ਹੈ, ਉਸ ਦਾ ਪਾਠ ਸੈੱਟ ਕਰਦਾ ਹੈ ਅਤੇ ਲਿਸਟ ਵਿੱਚ ਜੋੜਦਾ ਹੈ।ਜੇ ਕੁਝ ਨਹੀਂ ਹੋ ਰਿਹਾ, ਤਾਂ HTML ਵਿੱਚ ਟੱਤਿਆਂ ਦੇ IDs ਅਤੇ JavaScript ਸਿਲੈਕਟਰ ਇਕੋ-ਇਕ ਹੋਣ ਦੀ ਜਾਂਚ ਕਰੋ (ਇਹ ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਸਭ ਤੋਂ ਆਮ ਗੱਲ)।
ਹੁਣ ਜਦ ਤੁਸੀਂ ਟਾਸਕ ਜੋੜ ਸਕਦੇ ਹੋ, ਆਓ ਉਹਨਾਂ ਨੂੰ ਇਕਸ਼ਨਯੋਗ ਬਣਾਈਏ: ਟਾਸਕ ਨੂੰ ਮੁਕੰਮਲ ਨਿਸ਼ਾਨ ਲਗਾਉਣ ਅਤੇ ਹਟਾਉਣ ਦੀ ਸਮਰੱਥਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।
ਟਾਸਕਾਂ ਨੂੰ ਸਧਾਰਨ ਸਤਰਾਂ ਵਜੋਂ ਰੱਖਣ ਦੀ ਬਜਾਏ, ਉਨ੍ਹਾਂ ਨੂੰ ਆਬਜੈਕਟ ਵਜੋਂ ਰੱਖੋ। ਇਸ ਨਾਲ ਹਰ ਟਾਸਕ ਨੂੰ ਇੱਕ ਪੱਕੀ ਪਛਾਣ ਮਿਲਦੀ ਹੈ ਅਤੇ “done” ਸਥਿਤੀ ਟਰੈਕ ਕਰਨ ਲਈ ਜਗ੍ਹਾ ਮਿਲਦੀ ਹੈ:
text: ਟਾਸਕ ਦਾ ਪਾਠdone: true ਜਾਂ falseid: ਇੱਕ unique ਨੰਬਰ ਤਾਂ ਜੋ ਅਸੀਂ ਸਹੀ ਟਾਸਕ ਲੱਭ/ਹਟਾ ਸਕੀਏਇਹ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਹੈ:
let tasks = [
{ id: 1, text: "Buy milk", done: false },
{ id: 2, text: "Email Sam", done: true }
];
ਜਦ ਤੁਸੀਂ ਹਰ ਟਾਸਕ ਨੂੰ ਪੇਜ 'ਤੇ ਰੈਂਡਰ ਕਰੋ, ਤਾਂ ਇੱਕ checkbox ਜਾਂ “Done” ਬਟਨ ਅਤੇ ਇੱਕ “Delete” ਬਟਨ ਸ਼ਾਮਲ ਕਰੋ।
ਇੱਕ ਇਵੈਂਟ ਲਿਸਨਰ ਕੇਵਲ “ਕਲਿੱਕਾਂ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਨ ਦਾ ਤਰੀਕਾ” ਹੈ। ਤੁਸੀਂ ਇਹ ਬਟਨ (ਜਾਂ ਪੂਰੀ ਲਿਸਟ) ਤੇ ਲਗਾਉਂਦੇ ਹੋ, ਅਤੇ ਜਦ ਯੂਜ਼ਰ ਕਲਿੱਕ ਕਰਦਾ ਹੈ, ਤੁਹਾਡਾ ਕੋਡ ਚੱਲਦਾ ਹੈ।
ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਆਸਾਨ ਪੈਟਰਨ ਹੈ ਇਵੈਂਟ ਡੈਲੀਗੇਸ਼ਨ: ਇੱਕ ਹੀ ਕਲਿੱਕ ਲਿਸਨਰ task list container ਤੇ ਲਗਾਓ, ਫਿਰ ਵੇਖੋ ਕਿ ਕਿਹੜਾ ਤੱਤ ਕਲਿੱਕ ਕੀਤਾ ਗਿਆ।
function toggleDone(id) {
tasks = tasks.map(t => t.id === id ? { ...t, done: !t.done } : t);
renderTasks();
}
function deleteTask(id) {
tasks = tasks.filter(t => t.id !== id);
renderTasks();
}
document.querySelector("#taskList").addEventListener("click", (e) => {
const id = Number(e.target.dataset.id);
if (e.target.matches(".toggle")) toggleDone(id);
if (e.target.matches(".delete")) deleteTask(id);
});
ਆਪਣੀ renderTasks() ਫੰਕਸ਼ਨ ਵਿੱਚ:
data-id="${task.id}" ਜੋੜੋ।.done ਕਲਾਸ ਜੋੜ ਕੇ ਮੁਕੰਮਲ ਟਾਸਕ ਦਿਖਾਓ।ਹੁਣ ਤੱਕ ਤੁਹਾਡੀ ਟੂ‑ਡੂ ਲਿਸਟ ਦਾ ਇੱਕ ਨਿਰਾਸ਼ਜਨਕੀ ਸਮੱਸਿਆ ਹੈ: ਜੇ ਤੁਸੀਂ ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ (ਜਾਂ ਟੈਬ ਬੰਦ ਕਰੋ), ਸਭ ਕੁਝ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ।
ਇਹ ਇਸ ਲਈ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਡੇ ਟਾਸਕ ਸਿਰਫ JavaScript ਮੈਮੋਰੀ ਵਿੱਚ ਹਨ। ਜਦ ਪੇਜ ਰੀਲੋਡ ਹੁੰਦਾ ਹੈ, ਉਹ ਮੈਮੋਰੀ ਰੀਸੈੱਟ ਹੋ ਜਾਂਦੀ ਹੈ।
localStorage ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਛੋਟੇ ਬਾਕਸ ਵਜੋਂ ਸੋਚੋ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਲਿਖਤ (text) ਕਿਸੇ ਨਾਮ (key) ਦੇ ਤਹਿਤ ਰੱਖ ਸਕਦੇ ਹੋ। ਇਹ ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਕਿਉਂਕਿ ਇਸਨੂੰ ਸਰਵਰ ਜਾਂ ਖਾਤੇ ਦੀ ਲੋੜ ਨਹੀਂ।
ਅਸੀਂ ਪੂਰੀ ਟਾਸਕ ਲਿਸਟ ਨੂੰ JSON ਟੈਕਸਟ ਵਜੋਂ ਸਟੋਰ ਕਰਾਂਗੇ, ਫਿਰ ਪੇਜ ਖੁੱਲਣ 'ਤੇ ਉਸਨੂੰ ਫੇਰ ਲੋਡ ਕਰਾਂਗੇ।
ਜਦ ਵੀ ਤੁਸੀਂ ਟਾਸਕ ਜੋੜੋ, ਟਾਸਕ 'ਤੇ Done ਕਰੋ, ਜਾਂ ਹਟਾਓ, saveTasks() ਕਾਲ ਕਰੋ।
const STORAGE_KEY = "todo.tasks";
function saveTasks(tasks) {
localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}
ਜਿੱਥੇ ਵੀ ਤੁਹਾਡਾ ਐਪ tasks ਐਰੇ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ, ਉਸ ਦੇ ਬਾਅਦ ਇਹ ਕਰੋ:
saveTasks(tasks);
renderTasks(tasks);
ਜਦ ਪੇਜ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਸੇਵ ਕੀਤੀ ਹੋਈ ਵੈਲਯੂ ਪੜ੍ਹੋ। ਜੇ ਅਜੇ ਕੁਝ ਸੇਵ ਨਹੀਂ ਹੈ, ਤਾਂ ਖਾਲੀ ਲਿਸਟ ਵਰਤੋਂ।
function loadTasks() {
const saved = localStorage.getItem(STORAGE_KEY);
return saved ? JSON.parse(saved) : [];
}
let tasks = loadTasks();
renderTasks(tasks);
بس: ਹੁਣ ਤੁਹਾਡਾ ਐਪ ਰੀਫ੍ਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਵੀ ਟਾਸਕ ਯਾਦ ਰੱਖਦਾ ਹੈ।
ਸੁਝਾਅ: localStorage ਸਿਰਫ ਸਤਰਾਂ (strings) ਸਟੋਰ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ JSON.stringify() ਤੁਹਾਡੇ ਐਰੇ ਨੂੰ ਟੈਕਸਟ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਅਤੇ JSON.parse() ਇਸਨੂੰ ਵਾਪਸ ਅਸਲ ਐਰੇ ਕਰ ਦਿੰਦਾ ਹੈ।
ਟੈਸਟਿੰਗ ਸੁਣਨ ਵਿੱਚ ਬੋRing ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਤੇਜ਼ ਤਰੀਕੇ ਨਾਲ ਤੁਹਾਡੇ ਟੂ‑ਡੂ ਐਪ ਨੂੰ “ਮੇਰੇ ਮਸ਼ੀਨ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ” ਤੋਂ “ਹਰ ਵਾਰੀ ਕੰਮ ਕਰਦਾ ਹੈ” ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਹਰ ਛੋਟੀ ਚੇਜ਼ ਬਦਲਣ ਤੋਂ ਬਾਅਦ ਇਕ ਛੋਟੀ ਜਾਂਚ ਕਰੋ।
ਮੁੱਖ ਫਲੋ ਇਹਨਾਂ ਕ੍ਰਮ ਵਿੱਚ ਚਲਾਓ:
ਜੇ ਕਿਸੇ ਵੀ ਕਦਮ ਵਿੱਚ ਫੇਲ ਹੋ ਰਿਹਾ ਹੈ, ਨਵੇਂ ਫੀਚਰ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਉਸਨੂੰ ਠੀਕ ਕਰੋ। ਛੋਟੇ ਐਪ ਇੱਕਠੇ ਸਮੱਸਿਆਵਾਂ ਨਾਲ ਗੰਦੇ ਹੋ ਜਾਂਦੇ ਹਨ।
Edge cases ਉਹ ਇਨਪੁਟ ਹਨ ਜਿਨ੍ਹਾਂ ਲਈ ਤੁਸੀਂ ਉਡੀਕ ਨਹੀਂ ਕੀਤੀ, ਪਰ ਅਸਲ ਲੋਕ ਫਿਰ ਵੀ ਕਰਦੇ ਹਨ:
ਇੱਕ ਆਮ ਫਿਕਸ ਖਾਲੀ ਟਾਸਕ ਰੋਕਣਾ ਹੈ:
const text = input.value.trim();
addButton.disabled = text === "";
(ਤੁਸੀਂ ਇਹ ਨੂੰ ਹਰ input ਇਵੈਂਟ 'ਤੇ ਚਲਾ ਸਕਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਅਸਲ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਫਿਰ ਇੱਕ ਵਾਰੀ ਚੈੱਕ ਕਰੋ।)
ਜਦੋਂ ਕਲਿੱਕ ਕੁਝ ਨਹੀਂ ਕਰਦੇ, ਆਮ ਤੌਰ 'ਤੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਇੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ:
id ਜਾਂ class ਨਾਮ ਵੱਖਰੇ ਹਨ)app.js ਨਹੀਂ ਮਿਲਿਆ)ਜਦੋਂ ਕੁਝ ਗੁਪਤ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਲੌਗ ਕਰੋ:
console.log("Adding:", text);
console.log("Current tasks:", tasks);
ਬਰਾਊਜ਼ਰ ਦੀ Console ਵਿੱਚ ਗਲਤੀਆਂ (ਲਾਲ ਟੈਕਸਟ) ਦੇਖੋ। ਜਦ ਤੁਸੀਂ ਮੁੱਦੇ ਨੂੰ ਠੀਕ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਲੌਗ ਹਟਾ ਦਿਓ ਤਾਂ ਜੋ ਉਹ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਭਾਰ ਨਾ ਦੇਣ।
ਇੱਕ ਟੂ‑ਡੂ ਐਪ ਸਿਰਫ਼ “ਮੁਕੰਮਲ” ਤਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦ ਇਹ ਅਸਲ ਲੋਕਾਂ ਲਈ ਆਰਾਮਦੇਹ ਹੋ—ਫੋਨ 'ਤੇ, ਕੀਬੋਰਡ ਨਾਲ, ਅਤੇ ਸੁਨੇਹੇ ਪੜ੍ਹਨ ਵਾਲਿਆਂ (screen readers) ਨਾਲ।
ਛੋਟੇ ਸਕ੍ਰੀਨਾਂ 'ਤੇ, ਛੋਟੇ ਬਟਨ ਰੋਕਾਵਟ ਹੁੰਦੇ ਹਨ। ਕਲਿੱਕ-ਯੋਗ ਚੀਜ਼ਾਂ ਨੂੰ ਕਾਫੀ ਜਗ੍ਹਾ ਦਿਓ:
ਜੇ ਤੁਸੀਂ CSS ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ padding, font-size, ਅਤੇ gap ਵਧਾਉਣਾ ਸਭ ਤੋਂ ਵੱਡਾ ਫਰਕ ਬਣਾਉਂਦਾ ਹੈ।
Screen readers ਨੂੰ ਨਿਯਤ ਨਾਵਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।
\u003clabel\u003e ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ (ਇਹ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਹੈ)। ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਦਿਖਾਉਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ, ਤਾਂ CSS ਨਾਲ ਵਿਜ਼ੂਅਲੀ ਤੌਰ 'ਤੇ ਛੁਪਾ ਸਕਦੇ ਹੋ, ਪਰ HTML ਵਿਚ ਲੇਬਲ ਬਚਾਓ।aria-label="Delete task" ਜਿਵੇਂ ਲੇਖ ਮਿਲਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਕਿ screen reader ਨੂੰ ਸਮਝ ਆ ਜਾਵੇ ਕਿ ਇਹ ਬਟਨ ਕੀ ਕਰਦਾ ਹੈ।ਇਸ ਨਾਲ ਲੋਗ ਇਹ ਸਮਝ ਸਕਦੇ ਹਨ ਕਿ ਹਰ ਕੰਟਰੋਲ ਕੀ ਕਰਦਾ ਹੈ ਬਿਨਾਂ ਅਨੁਮਾਨ ਲਗਾਉਣ ਦੇ।
ਸੁਰੱਖਿਅਤ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਪੂਰੇ ਐਪ ਨੂੰ ਮਾਊਸ ਦੇ ਬਿਨਾਂ ਵੀ ਵਰਤ ਸਕੋ:
\u003cform\u003e ਵਰਤਣ ਨਾਲ Enter ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ)ਇੱਕ ਪੜ੍ਹਨਯੋਗ ਫੋਂਟ ਸਾਈਜ਼ ਵਰਤੋ (16px ਚੰਗੀ ਬੇਸਲਾਇਨ ਹੈ) ਅਤੇ ਮਜ਼ਬੂਤ ਰੰਗ ਕੰਟਰਾਸਟ (ਹਲਕੇ ਬੈਕਗ੍ਰਾਊਂਡ 'ਤੇ ਡਾਰ्क ਟੈਕਸਟ ਜਾਂ ਉਲਟ)। “Done” ਦਿਖਾਉਣ ਲਈ ਸਿਰਫ਼ ਰੰਗ ਤੇ ਨਿਰਭਰ ਨਾ ਰਹੋ—ਇੱਕ ਸਪਸ਼ਟ ਸ਼ੈਲੀ ਵਰਗੇ strikethrough ਦੇ ਨਾਲ ਇੱਕ “Done” ਸਥਿਤੀ ਜੋੜੋ।
ਹੁਣ ਜਦ ਸਭ ਕੁਝ ਕੰਮ ਕਰਦਾ ਹੈ, 10–15 ਮਿੰਟ ਲਈ ਸਪੋਰ-ਸਾਫ਼ੀ ਕਰੋ। ਇਹ ਭਵਿੱਖ ਵਿੱਚ ਫਿਕਸ ਕਰਨਾ ਆਸਾਨ ਬਣਾਂਦਾ ਹੈ ਅਤੇ ਜਦ ਤੁਸੀਂ ਮੁੜ ਆਓਗੇ ਤਾਂ ਆਪਣੀ ਪ੍ਰਾਜੈਕਟ ਨੂੰ ਸਮਝਣਾ ਸੁਗਮ ਬਣਾਉਂਦਾ ਹੈ।
ਇਸਨੂੰ ਛੋਟਾ ਅਤੇ ਪੇਚੀਦਾ ਰੱਖੋ:
/index.html — ਪੇਜ ਦੀ ਬਣਤਰ (input, button, list)/styles.css — ਐਪ ਕਿਵੇਂ ਦਿਖਦਾ ਹੈ (spacing, fonts, “done” style)/app.js — ਵਿਹੈਵਅਰ (add, toggle done, delete, save/load)/README.md — “ਭਵਿੱਖ ਦੇ ਤੁਸੀਂ” ਲਈ ਛੋਟੇ ਨੋਟਸਜੇ ਤੁਸੀਂ ਸਬਫੋਲਡਰ ਪਸੰਦ ਕਰਦੇ ਹੋ, ਤਾਂ ਆਪਣੀ ਬਨਾਇਆ ਹੋਇਆ ਅੰਕ-ਅਨੁਕਰਮੀ ਨੂੰ ਵਰਤ ਸਕਦੇ ਹੋ:
/css/styles.css/js/app.jsਸਿਰਫ਼ ਯਕੀਨੀ ਬਣਾਓ ਕਿ \u003clink\u003e ਅਤੇ \u003cscript\u003e ਪਾਥ ਮੇਲ ਖਾਂਦੇ ਹੋ।
ਚੰਦ ਛੋਟੇ ਸੁਝਾਅ:
taskInput, taskList, saveTasks()ਉਦਾਹਰਨ ਲਈ, ਇਹ ਪਰਖਣਾ ਸੁਗਮ ਹੈ:
renderTasks(tasks)addTask(text)toggleTask(id)deleteTask(id)ਤੁਹਾਡਾ README.md ਸਧਾਰਨ ਹੋ ਸਕਦਾ ਹੈ:
ਘੱਟੋ-ਘੱਟ, ਇੱਕ ਮਿਲਸਟੋਨ ਦੇ ਬਾਅਦ ਫੋਲਡਰ ਨੂੰ zip ਕਰ ਲਵੋ (ਜਿਵੇਂ “localStorage ਕੰਮ ਕਰਦਾ ਹੈ” ਮਾਇਲਸਟੋਨ)। ਜੇ ਤੁਸੀਂ ਵਰਜ਼ਨ ਇਤਿਹਾਸ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ Git ਵਧੀਆ ਹੈ—ਪਰ ਵਿਕਲਪਿਕ। ਇੱਕ ਬੈਕਅਪ ਕਾਪੀ ਵੀ ਅਕਸਮਾਤ ਮਿਟਾਉਣ ਤੋਂ ਬਚਾ ਲੈਂਦੀ ਹੈ।
ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡੇ ਐਪ ਦੀਆਂ ਫਾਇਲਾਂ (HTML, CSS, JavaScript) ਇੰਟਰਨੈੱਟ 'ਤੇ ਕਿਸੇ ਜਗ੍ਹਾ ਰੱਖੋ ਤਾਂ ਜੋ ਹੋਰ ਲੋਕ ਲਿੰਕ ਖੋਲ੍ਹ ਕੇ ਇਸਨੂੰ ਵਰਤ ਸਕਣ। ਕਿਉਂਕਿ ਇਹ ਟੂ‑ਡੂ ਐਪ ਇੱਕ "ਸਟੈਟਿਕ ਸਾਈਟ" ਹੈ (ਇਹ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਚਲਦੀ ਹੈ ਤੇ ਸਰਵਰ ਦੀ ਲੋੜ ਨਹੀਂ), ਤੁਸੀਂ ਮੁਫ਼ਤ ਹੋਸਟਿੰਗ ਸਰਵਿਸਾਂ ਤੇ ਇਸਨੂੰ ਰੱਖ ਸਕਦੇ ਹੋ।
ਉੱਚ-ਸਤਰ ਦੇ ਕਦਮ:
ਜੇ ਤੁਹਾਡਾ ਐਪ ਵੱਖ-ਵੱਖ ਫਾਇਲਾਂ ਵਰਤਦਾ ਹੈ, ਤਾਂ ਆਪਣੀਆਂ ਫਾਇਲ-ਨਾਮਾਂ ਅਤੇ link ਮੈਚ ਖਾਤਰ ਕਰੋ (ਜਿਵੇਂ styles.css ਬਨਾਮ style.css).
ਜੇ ਤੁਸੀਂ ਸਭ ਤੋਂ ਸੌਖਾ ਢੰਗ ਚਾਹੁੰਦੇ ਹੋ:
localStorage ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ)ਜਦ ਇਹ ਠੀਕ ਹੋ ਜਾਵੇ, ਕਿਸੇ ਮਿੱਤਰ ਨੂੰ ਲਿੰਕ ਭੇਜੋ ਅਤੇ ਉਹਨਾਂ ਤੋਂ ਟੈਸਟ ਕਰਵਾਉ—ਨਵੀ ਨਜ਼ਰਾਂ ਜਲਦੀ ਸਮੱਸਿਆਵਾਂ ਪਕੜ ਲੈਂਦੀਆਂ ਹਨ।
ਤੁਸੀਂ ਇੱਕ ਕੰਮ ਕਰਨਯੋਗ ਟੂ‑ਡੂ ਐਪ ਬਣਾ ਲਿਆ। ਜੇ ਤੁਸੀਂ ਵਧਣੀ ਚਾਹੁੰਦੇ ਹੋ ਪਰ ਇੱਕ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਦਿੱਖ ਜਾਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ, ਇਹ ਅਪਗ੍ਰੇਡ ਉਪਯੋਗੀ ਹਨ ਤੇ ਵਾਜਬੀ ਪੈਟਰਨ ਸਿਖਾਉਂਦੀਆਂ ਹਨ।
ਹਰ ਟਾਸਕ ਦੇ ਕੋਲ ਇੱਕ “Edit” ਬਟਨ ਜੋੜੋ। ਜਦ ਇਹ ਦਬਾਈਏ, ਟਾਸਕ ਲੇਬਲ ਦੀ ਥਾਂ ਇੱਕ ਛੋਟਾ ਇਨਪੁਟ ਫੀਲਡ ਆ ਜਾਵੇ (ਪੂਰੇ ਪੂਰਵ-ਭਰਿਆ), ਨਾਲ ਹੀ “Save” ਅਤੇ “Cancel” ਹੋਣ।
ਟਿੱਪ: ਆਪਣੇ ਟਾਸਕ ਡਾਟਾ ਨੂੰ id ਅਤੇ text ਵਾਲੇ ਆਬਜੈਕਟਾਂ ਵਜੋਂ ਰੱਖੋ। ਤੇੰ ਸੰਪਾਦਨ ਇਸ ਤਰ੍ਹਾਂ ਬਣੇਗਾ: ਸਹੀ id ਲੱਭੋ, text ਅੱਪਡੇਟ ਕਰੋ, ਰੀ-ਰੈਂਡਰ ਕਰੋ, ਅਤੇ ਸੇਵ ਕਰੋ।
ਉੱਪਰ ਤਿੰਨ ਬਟਨ ਜੋੜੋ: All, Active, Done।
ਮੌਜੂਦਾ ਫਿਲਟਰ ਨੂੰ ਇੱਕ ਵੈਰਿਏਬਲ currentFilter = 'all' ਵਿੱਚ ਰੱਖੋ। ਜਦ ਰੈਂਡਰ ਹੋਵੇ, ਦਿਖਾਓ:
ਹੁਣੇ ਹੀ ਹਲਕਾ ਰੱਖੋ:
YYYY-MM-DD) ਜੋੜੋ ਅਤੇ ਟਾਸਕ ਦੇ ਨਾਲ ਦਿਖਾਓਇੱਕ ਵਾਧੂ ਫੀਲਡ ਵੀ ਤੁਹਾਨੂੰ ਆਪਣੇ ਡਾਟਾ ਮਾਡਲ ਅਤੇ UI ਨੂੰ ਇਕੱਠੇ ਅੱਪਡੇਟ ਕਰਨਾ ਸਿਖਾਉਂਦਾ ਹੈ।
ਜਦ ਤੁਸੀਂ ਤਿਆਰ ਹੋ, ਵੱਡੀ ਸੋਚ ਇਹ ਹੈ: localStorage ਦੀ ਥਾਂ fetch() ਨਾਲ ਇੱਕ API ਨੂੰ ਟਾਸਕ ਭੇਜੋ। ਸਰਵਰ ਉਨ੍ਹਾਂ ਨੂੰ ਡੇਟਾਬੇਸ ਵਿੱਚ ਰੱਖੇਗਾ, ਤਾਂ ਟਾਸਕ ਡਿਵਾਈਸਾਂ ਵਿਚ ਸਮਕਾਲੀ ਹੋ ਸਕਣਗੇ।
ਜੇ ਤੁਸੀਂ ਇਸ ਕਦਮ ਨੂੰ ਬਿਨਾਂ ਮੁੜ-ਬਨਾਉਣ ਦੇ ਅਸੀਂ, ਕੋਈ vibe-coding ਪਲੇਟਫਾਰਮ ਜਿਵੇਂ Koder.ai ਤੁਹਾਨੂੰ ਅਗਲਾ ਵਰਜ਼ਨ ਤਿਆਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ: ਚੈਟ ਵਿੱਚ ਫੀਚਰ ਦੱਸੋ (API endpoints, ਡੇਟਾਬੇਸ ਟੇਬਲ, UI ਬਦਲਾਅ), ਯੋਜਨਾ ਮੋਡ ਵਿੱਚ ਦੁਹਰਾਉ, ਅਤੇ ਜਦ ਤਿਆਰ ਹੋਵੋ ਤਾਂ React/Go/PostgreSQL ਪ੍ਰੋਜੈਕਟ ਦਾ ਸਰੋਤ ਕੋਡ ਨਿਰੀਤ ਕਰੋ।
ਇੱਕ ਨੋਟਸ ਐਪ (ਖੋਜੀ ਖਾਸੀਅਤ ਨਾਲ) ਜਾਂ ਹੈਬਿਟ ਟ੍ਰੈਕਰ (ਰੋਜ਼ਾਨਾ ਚੈਕ‑ਇਨ) ਬਣਾਉ। ਇਹ ਉੱਪਰ ਦਿੱਤੀਆਂ ਹੀ ਹੁਨਰਾਂ ਨੂੰ ਦੁਹਰਾਉਂਦੇ ਹਨ: ਲਿਸਟ ਰੈਂਡਰਿੰਗ, ਸੋਧਣਾ, ਸੇਵ ਕਰਨਾ, ਅਤੇ ਸਧਾਰਨ UI ਡਿਜ਼ਾਇਨ।