ਸਧਾਰਣ ਟੂ‑ਡੂ ਐਪ ਕਦਮ-ਬੜੀ ਕਦਮ ਬਣਾਓ (ਸਿੱਧੀ ਭਾਸ਼ਾ)

ਅਸੀਂ ਕੀ ਬਣਾ ਰਹੇ ਹਾਂ (ਅਤੇ ਤੂੰ ਕੀ ਸਿੱਖੋਗੇ)

ਇਸ ਮਾਰਗਦਰਸ਼ਨ ਵਿੱਚ ਜਦੋਂ ਮੈਂ “ਐਪ” ਕਹਿੰਦਾ/ਕਹਿੰਦੀ ਹਾਂ, ਮੇਰਾ ਮਤਲਬ ਇੱਕ ਛੋਟਾ ਵੈੱਬ ਐਪ ਹੈ: ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਜੋ ਤੂੰ ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹਦਾ/ਖੋਲ੍ਹਦੀ ਹੋ ਅਤੇ ਜੋ ਤੇਰੇ ਕਲਿੱਕ ਅਤੇ ਟਾਈਪ 'ਤੇ ਪ੍ਰਤੀਕਿਰਿਆ ਕਰਦਾ ਹੈ। ਕਿਸੇ ਇੰਸਟਾਲ, ਖਾਤਿਆਂ ਜਾਂ ਭਾਰੀ ਸੈਟਅਪ ਦੀ ਲੋੜ ਨਹੀਂ—ਸਿਰਫ਼ ਇੱਕ ਸਧਾਰਨ ਪ੍ਰੋਜੈਕਟ ਜੋ ਤੂੰ ਲੋਕਲ ਤੌਰ 'ਤੇ ਚਲਾ ਸਕਦਾ/ਸਕਦੀ ਹੈ।

ਮਕਸਦ (ਅਪਲਿਕੇਸ਼ਨ ਅੰਤ ਤੱਕ ਕੀ ਕਰੇਗੀ)

ਅੰਤ ਤੱਕ, ਤੇਰੇ ਕੋਲ ਇੱਕ ਟੂ‑ਡੂ ਐਪ ਹੋਵੇਗਾ ਜੋ ਇਹ ਕਰ ਸਕਦਾ ਹੈ:

• ਟਾਸਕ ਜੋੜੋ ਇਕ ਇਨਪੁਟ ਬਾਕਸ ਤੋਂ
• ਟਾਸਕ ਨੂੰ ਮੁਕੰਮਲ ਦਰਜਾ ਦਿਓ (ਤਾਂ ਜੋ ਤੁਸੀਂ ਵੇਖ ਸਕੋ ਕੀ ਹੋ ਚੁੱਕਾ ਹੈ)
• ਟਾਸਕ ਹਟਾਓ ਜਿਹੜੇ ਹੁਣ ਲੋੜੀਂਦੇ ਨਹੀਂ
• ਟਾਸਕ ਰੀਫ੍ਰੇਸ਼ ਦੇ ਬਾਅਦ ਵੀ ਰਹਿਣ localStorage ਦੀ ਵਰਤੋਂ ਨਾਲ (ਤਾਂ ਜੋ ਟੈਬ ਬੰਦ ਕਰਨ ਨਾਲ ਸਾਰਾ ਡਾਟਾ ਮਿਟੇ ਨਾ)

ਇਹ ਪਰਫੈਕਟ ਜਾਂ “ਐਨਟਰਪ੍ਰਾਈਜ਼-ਗ੍ਰੇਡ” ਨਹੀਂ ਹੋਵੇਗਾ, ਅਤੇ ਇਹੀ ਦਿਲਚਸਪੀ ਹੈ। ਇਹ ਇੱਕ ਸ਼ੁਰੂਆਤੀ ਪ੍ਰੋਜੈਕਟ ਹੈ ਜੋ ਬਿਨਾਂ ਬਹੁਤ ਸਾਰੇ ਟੂਲਾਂ ਦੇ ਬੁਨਿਆਦੀ ਗੱਲਾਂ ਸਿਖਾਉਂਦਾ ਹੈ।

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ (ਸਧਾਰਨ ਭਾਸ਼ਾ ਵਿੱਚ)

ਤੂੰ ਪਦ-ਪਦ ਕਰਕੇ ਐਪ ਬਣਾਵੇਗਾ/ਬਣਾਵੇਗੀ ਅਤੇ ਫਰੰਟ-ਐਂਡ ਵੈੱਬ ਐਪਸ ਦੇ ਮੁੱਖ ਹਿੱਸੇ ਸਿੱਖੇਗਾ/ਸਿੱਖੇਗੀ:

• HTML ਪੇਜ ਦੀ ਬਣਤਰ ਬਣਾਉਣ ਲਈ (input, button, list)
• CSS ਤਾਂ ਜੋ ਇਹ ਪੜ੍ਹਨ ਯੋਗ ਅਤੇ ਅਚਛਾ ਦਿਸੇ
• JavaScript ਕਲਿੱਕਸ ਨੂੰ ਸੰਭਾਲਣ, ਲਿਸਟ ਆਈਟਮ ਬਣਾਉਣ ਅਤੇ ਪੇਜ ਅੱਪਡੇਟ ਕਰਨ ਲਈ
• localStorage ਟਾਸਕ ਸੇਵ ਅਤੇ ਲੋਡ ਕਰਨ ਲਈ ਤਾਂ ਕਿ ਓਹ ਟਿਕੇ ਰਹਿਣ
• ਮੂਢੀ ਟੈਸਟਿੰਗ ਅਤੇ ਡੀਬੱਗਿੰਗ (ਛੋਟੀਆਂ ਗਲਤੀਆਂ ਝਲਕਾਉਣ ਅਤੇ ਠੀਕ ਕਰਨ)

ਸ਼ੁਰੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਲੋੜੀਂਦੀ ਚੀਜ਼

ਸਧਾਰਾ ਰੱਖੋ। ਤੁਹਾਨੂੰ ਸਿਰਫ ਇਹ ਚਾਹੀਦਾ ਹੈ:

• ਇੱਕ ਕੰਪਿਊਟਰ (Windows, Mac, ਜਾਂ Linux)
• ਇੱਕ ਆਧੁਨਿਕ ਬਰਾਊਜ਼ਰ (Chrome, Firefox, Safari, ਜਾਂ Edge)
• ਇੱਕ ਕੋਡ ਐਡੀਟਰ (VS Code ਲੋਕਪ੍ਰਿਯ ਹੈ, ਪਰ ਕੋਈ ਵੀ ਐਡੀਟਰ ਚਲ ਜਾਵੇਗਾ)

ਜੇ ਤੁਸੀਂ ਫੋਲਡਰ ਬਣਾਉਣ ਅਤੇ ਕੁਝ ਫਾਇਲਾਂ ਸੋਧਣ ਆਉਂਦਾ ਹੈ, ਤਾਂ ਤੁਸੀਂ ਤਿਆਰ ਹੋ।

ਕਦਮ 1: ਐਪ ਦਾ ਮਕਸਦ ਅਤੇ ਫੀਚਰ ਤੈਅ ਕਰੋ

ਕੋਡ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ, ਫੈਸਲਾ ਕਰੋ ਕਿ “ਸਫਲਤਾ” ਕਿਸ ਨੂੰ ਕਹਾਂਗੇ। ਇਹ ਟਿਊਟੋਰਿਯਲ ਇੱਕ ਛੋਟਾ ਐਪ ਬਣਾਉਂਦਾ ਹੈ ਜਿਸਦਾ ਇਕ ਸਾਫ਼ ਕੰਮ ਹੈ: ਤੁਹਾਡੇ ਕਰਕੇ ਟਰੈਕ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰਨਾ ਕਿ ਤੁਸੀਂ ਕੀ ਕਰਣਾ ਹੈ।

ਐਪ ਦਾ ਇੱਕ ਕੰਮ ਚੁਣੋ

ਇੱਕ ਵਾਕ ਵਿੱਚ ਲਿਖੋ ਜੋ ਤੁਸੀਂ ਬਣਾਉਂਦੇ ਸਮੇਂ ਆਪਣੀ ਅੱਖਾਂ 'ਤੇ ਰੱਖ ਸਕੋ:

“ਇਹ ਐਪ ਮੈਨੂੰ ਇੱਕ ਲਿਸਟ ਵਿੱਚ ਟਾਸਕ ਜੋੜਨ ਦਿੰਦੀ ਹੈ ਤਾਂ ਜੋ ਮੈਂ ਉਹ ਨਾ ਭੁੱਲਾਂ।”

бас। ਜੇ ਤੁਸੀਂ ਕੈਲੰਡਰ, ਰੀਮਾਈਨਡਰ, ਟੈਗ ਜਾਂ ਖਾਤਿਆਂ ਜੋੜਨ ਦੀ ਲਾਲਚ ਮਹਿਸੂਸ ਕਰੋ, ਉਹਨਾਂ ਵਿਚਾਰਾਂ ਨੂੰ ਬਾਦ ਲਈ ਰੱਖ ਦਿਓ।

ਅਨਿਵਾਰ्य বনਾਮ ਚੰਗਾ-ਹੋਵੇ

ਦੋ ਛੋਟੀਆਂ ਸੂਚੀਆਂ ਬਣਾ ਲਵੋ:

ਅਨਿਵਾਰ্য (ਇਸ ਪ੍ਰੋਜੈਕਟ ਲਈ):

• ਟਾਸਕ ਜੋੜੋ (ਟੈਕਸਟ ਟਾਈਪ ਕਰੋ, ਬਟਨ ਦਬਾਓ)
• ਲਿਸਟ ਵਿੱਚ ਟਾਸਕ ਵੇਖੋ
• ਟਾਸਕ ਨੂੰ ਮੁਕੰਮਲ ਨਿਸ਼ਾਨ ਲਗਾਉ (Done)
• ਟਾਸਕ ਹਟਾਓ
• ਰੀਫ੍ਰੈਸ਼ ਮਗਰੋਂ ਵੀ ਟਾਸਕ ਰਹਿਣ (ਅਸੀਂ ਬਾਅਦ ਵਿੱਚ localStorage ਵਰਤਾਂਗੇ)

ਚੰਗਾ ਹੋਵੇ (ਅਜੋਕੇ ਲਈ ਜ਼ਰੂਰੀ ਨਹੀਂ): ਮਿਆਦਾਂ, ਪ੍ਰਾਇਰਿਟੀਆਂ, ਸ਼੍ਰੇਣੀਆਂ, ਖੋਜ, ਡਰੈਗ-ਅਤੇ-ਡ੍ਰਾਪ, ਕਲਾਉਡ ਸਿੰਕ।

“ਅਨਿਵਾਰ्य” ਨੂੰ ਛੋਟਾ ਰੱਖਣ ਨਾਲ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਪਰੋਜੈਕਟ ਨੂੰ ਮੁਕੰਮਲ ਕਰ ਸਕਦੇ ਹੋ।

ਸਕਰੀਨ ਨੂੰ ਸਧਾਰਨ ਸ਼ਬਦਾਂ ਵਿੱਚ ਵੇਰਵਾ ਕਰੋ

ਇਹ ਐਪ ਇੱਕ ਸਿੰਗਲ ਪੇਜ ਹੋ ਸਕਦੀ ਹੈ ਜਿਸ ਵਿੱਚ:

• ਇੱਕ ਟੈਕਸਟ ਇਨਪੁਟ (“Add a task…”) ਅਤੇ ਇੱਕ “Add” ਬਟਨ
• ਹੇਠਾਂ ਇੱਕ ਟਾਸਕਾਂ ਦੀ ਲਿਸਟ
• ਹਰ ਟਾਸਕ ਕੋਲ ਇੱਕ “done” ਟੌਗਲ ਅਤੇ ਇੱਕ “delete” ਬਟਨ ਹੋਵੇ

“Done” ਦਾ ਕੀ ਮਤਲਬ ਹੈ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ

ਖਾਸ ਹੋਵੋ ਤਾਂ ਜੋ ਤੁਸੀਂ ਪੱਛੇ ਫਸ ਨਾ ਜਾਓ:

• “Done” = ਟਾਸਕ ਕੱਟ-ਸਮਾਨ (crossed out) ਜਾਂ ਫੀਕੇ ਦਿਸਦਾ ਹੈ, ਅਤੇ ਇਹ ਲਿਸਟ ਵਿੱਚ ਰਹਿੰਦਾ ਹੈ ਜਦ ਤੱਕ ਤੁਸੀਂ ਉਹਨੂੰ delete ਨਾ ਕਰੋ।

ਇਸ ਫੈਸਲੇ ਨਾਲ, ਤੁਸੀਂ ਪ੍ਰੋਜੈਕਟ ਫਾਇਲਾਂ ਸੈਟਅਪ ਕਰਨ ਲਈ ਤਿਆਰ ਹੋ।

ਕਦਮ 2: ਪ੍ਰੋਜੈਕਟ ਫਾਇਲਾਂ ਸੈਟਅਪ ਕਰੋ

ਕੋਡ ਲਿਖਣ ਤੋਂ ਪਹਿਲਾਂ, ਐਪ ਲਈ ਇੱਕ ਸਾਫ਼ ਘਰ ਬਣਾ ਲਵੋ। ਸ਼ੁਰੂ ਤੋਂ ਫਾਇਲਾਂ ਅਣੁਵੱਧਿਤ ਰੱਖਣ ਨਾਲ ਅਗਲੇ ਕਦਮ ਸੌਖੇ ਹੋ ਜਾਂਦੇ ਹਨ।

1) ਇੱਕ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ ਬਣਾਓ

ਆਪਣੇ ਕੰਪਿਊਟਰ 'ਤੇ ਇੱਕ ਨਵਾਂ ਫੋਲਡਰ ਬਣਾਓ ਅਤੇ ਇਸਦਾ ਨਾਮ ਕੁਝ ਇਸ ਤਰ੍ਹਾਂ ਰੱਖੋ todo-app. ਇਹ ਫੋਲਡਰ ਪ੍ਰੋਜੈਕਟ ਦੀਆਂ ਸਭ ਚੀਜ਼ਾਂ ਰੱਖੇਗਾ।

ਉਸ ਫੋਲਡਰ ਦੇ ਅੰਦਰ ਤਿੰਨ ਫਾਇਲਾਂ ਬਣਾਓ:

• index.html (ਪੇਜ ਦੀ ਬਣਤਰ)
• styles.css (ਲੁੱਕ ਅਤੇ ਲੇਆਊਟ)
• app.js (ਵਰਤੋਂਕਾਰ ਇੰਟਰਐਕਸ਼ਨ ਅਤੇ ਵਿਹੈਵਯਰ)

ਜੇ ਤੁਹਾਡਾ ਕੰਪਿਊਟਰ ਫਾਇਲ ਐਕਸਟੈਂਸ਼ਨ ਛੁਪਾਉਂਦਾ ਹੈ (ਜਿਵੇਂ “.html”), ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਅਸਲ ਵਿੱਚ ਸਹੀ ਫਾਇਲਾਂ ਬਣਾ ਰਹੇ ਹੋ। ਨਵੇਂ ਕੋਡਰਾਂ ਦੀ ਆਮ ਗਲਤੀ ਹੁੰਦੀ ਹੈ index.html.txt ਬਣ ਜਾਣਾ।

2) ਫੋਲਡਰ ਨੂੰ ਐਡੀਟਰ ਅਤੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ

todo-app ਫੋਲਡਰ ਨੂੰ ਆਪਣੇ ਕੋਡ ਐਡੀਟਰ (VS Code, Sublime Text ਆਦਿ) ਵਿੱਚ ਖੋਲ੍ਹੋ। ਫਿਰ index.html ਨੂੰ ਆਪਣੇ ਵੈੱਬ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ।

ਇਸ ਵੇਲੇ, ਤੁਹਾਡਾ ਪੇਜ ਖਾਲੀ ਹੋ ਸਕਦਾ ਹੈ—ਅਤੇ ਓਹ ਠੀਕ ਹੈ। ਅਸੀਂ ਅਗਲੇ ਕਦਮ ਵਿੱਚ ਸਮੱਗਰੀ ਜੋੜਾਂਗੇ।

3) ਤੁਸੀਂ ਬਦਲਾਅ ਕਿਵੇਂ ਵੇਖੋਗੇ

ਜਦੋਂ ਤੁਸੀਂ ਫਾਇਲਾਂ ਸੋਧਦੇ ਹੋ, ਬਰਾਊਜ਼ਰ ਆਟੋਮੈਟਿਕ ਅੱਪਡੇਟ ਨਹੀਂ ਕਰੇਗਾ (ਜੇ ਤੱਕ ਤੁਸੀਂ ਕੋਈ ਟੂਲ ਨਹੀਂ ਵਰਤਦੇ)।

ਇਸ ਲਈ ਬੁਨਿਆਦੀ ਲੂਪ ਇਹ ਹੈ:

1. ਐਡੀਟਰ ਵਿੱਚ ਫਾਇਲ ਸੰਭਾਲੋ (Save)
2. ਬਰਾਊਜ਼ਰ ਟੈਬ 'ਤੇ ਜਾਓ
3. ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ ਤੇ ਬਦਲਾਅ ਵੇਖੋ

ਜੇ ਕੁਝ “ਕਾਮ ਨਹੀਂ ਕਰ ਰਿਹਾ”, ਤਾਂ ਰੀਫ੍ਰੈਸ਼ ਸਭ ਤੋਂ ਪਹਿਲਾਂ ਕਰਨ ਵਾਲੀ ਚੀਜ਼ ਹੁੰਦੀ ਹੈ।

ਵਿਕਲਪ: ਇੱਕ ਸਧਾਰਨ ਲੋਕਲ ਸਰਵਰ ਵਰਤੋ (ਚੰਗਾ ਪਰ ਲਾਜ਼ਮੀ ਨਹੀਂ)

ਤੂੰ ਸਿੱਧਾ index.html ਨੂੰ ਡਬਲ-ਕਲਿਕ ਕਰਕੇ ਇਹ ਐਪ ਚਲਾ ਸਕਦਾ/ਸਕਦੀ ਹੈ, ਪਰ ਇੱਕ ਲੋਕਲ ਸਰਵਰ ਅੱਗੇ ਆ ਕੇ ਕੁਝ ਅਜਿਹੀਆਂ ਸਮੱਸਿਆਵਾਂ ਤੋਂ ਬਚਾਉਂਦਾ ਹੈ (ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਸੀਂ ਡਾਟਾ ਸੇਵ/ਲੋਡ ਕਰਦੇ ਹੋ)।

ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਓਪਸ਼ਨ:

• VS Code ਵਿੱਚ Live Server ਇੰਸਟਾਲ ਕਰੋ ਅਤੇ “Go Live” ਦਬਾਓ
• ਜੇ ਤੁਹਾਡੇ ਕੋਲ Python ਹੈ, ਤਾਂ ਫੋਲਡਰ ਦੇ ਅੰਦਰ ਇਹ ਚਲਾਓ:

python -m http.server

ਫਿਰ ਉਸ ਐਡਰੈੱਸ ਨੂੰ ਖੋਲ੍ਹੋ ਜੋ ਉਹ ਪ੍ਰਿੰਟ ਕਰੇਗਾ (ਅਕਸਰ http://localhost:8000) ਆਪਣੇ ਬਰਾਊਜ਼ਰ ਵਿੱਚ।

ਕਦਮ 3: ਪੇਜ ਬਣਤਰ ਤਿਆਰ ਕਰੋ (HTML)

ਹੁਣ ਅਸੀਂ ਐਪ ਲਈ ਇਕ ਸਾਫ਼ ਖਾਕਾ ਬਣਾਊਂਗੇ। ਇਹ HTML ਅਜੇ ਇੰਟਰਐਕਟਿਵ ਨਹੀਂ ਬਣਾਏਗਾ (ਉਸ ਦੇ ਲਈ ਅਗਲਾ ਕਦਮ ਹੈ), ਪਰ ਇਹ ਤੁਹਾਡੇ JavaScript ਨੂੰ ਵਧੀਆ ਢੰਗ ਨਾਲ ਕੰਮ ਕਰਨ ਲਈ ਸਪੇਸ ਦੇਵੇਗਾ।

ਜੋ ਘੱਟੋ-ਘੱਟ ਲੇਆਊਟ ਲੋੜੀਂਦਾ ਹੈ

ਅਸੀਂ ਸ਼ਾਮਿਲ ਕਰਾਂਗੇ:

• ਇੱਕ ਸਿਰਲੇਖ ਤਾਂ ਜੋ ਪੇਜ ਇੱਕ ਨਜ਼ਰ 'ਤੇ ਸਮਝ ਆ ਜਾਏ
• ਟਾਸਕ ਟੈਕਸਟ ਲਈ ਇੱਕ ਇਨਪੁਟ ਬਾਕਸ
• ਟਾਸਕ ਜੋੜਨ ਲਈ ਇੱਕ Add ਬਟਨ
• ਜਿੱਥੇ ਨਵੇਂ ਟਾਸਕ ਦਿਖਣਗੇ ਉਸ ਲਈ ਲਿਸਟ ਖੇਤਰ

ਨਾਂ ਸਧਾਰਨ ਅਤੇ ਪੜ੍ਹਨ ਯੋਗ ਰੱਖੋ। ਵਧੀਆਂ 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 ਵਿੱਚ ਗੱਲ ਕਰੋਗੇ।

ਕਦਮ 4: ਸੁੰਦਰ ਦਿਸ਼ਾ ਦਿਓ (CSS)

ਹੁਣ ਤੱਕ ਤੁਹਾਡਾ ਪੇਜ ਹੈ, ਪਰ ਇਹ ਸ਼ਾਇਦ ਇੱਕ ਆਮ ਦਸਤਾਵੇਜ਼ ਵਰਗਾ ਦਿਖਦਾ ਹੈ। ਥੋੜ੍ਹੀ 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” ਲਈ ਦਰਸ਼ਨੀ ਨਿਸ਼ਾਨ ਦਿਓ

ਜਦੋਂ ਟਾਸਕ ਮੁਕੰਮਲ ਹੋ ਜਾਵੇ, ਉਨ੍ਹਾਂ ਨੂੰ ਵਿਜ਼ੂਅਲ ਤੌਰ 'ਤੇ ਬਦਲ ਦਿਖਾਓ ਤਾਂ ਜੋ ਇੱਕ ਨਜ਼ਰ ਵਿੱਚ ਪਤਾ ਲੱਗ ਜਾਵੇ।

.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 ਨਾਲ ਵਿਹੈਵਿਯਰ ਜੁੜਾਂਗੇ।

ਕਦਮ 5: ਟਾਸਕ ਜੋੜੋ (JavaScript ਮੂਢੀ)

ਹੁਣ ਜਦ ਤੁਹਾਡੇ ਕੋਲ ਇਨਪੁਟ, ਬਟਨ ਅਤੇ ਲਿਸਟ ਹੈ, ਅਸੀਂ ਉਨ੍ਹਾਂ ਨੂੰ ਕੰਮ ਕਰਨਯੋਗ ਬਣਾਵਾਂਗੇ। ਲਕਸ਼ ਸਧਾਰਨ ਹੈ: ਜਦ ਕੋਈ ਟਾਸਕ ਟਾਈਪ ਕਰੇ ਅਤੇ Add ਦਬਾਏ (ਜਾਂ Enter ਦਬਾਏ), ਇੱਕ ਨਵਾਂ ਆਈਟਮ ਲਿਸਟ ਵਿੱਚ ਆ ਜਾਂਦਾ ਹੈ।

ਬਟਨ ਅਤੇ 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 ਸਿਲੈਕਟਰ ਇਕੋ-ਇਕ ਹੋਣ ਦੀ ਜਾਂਚ ਕਰੋ (ਇਹ ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਸਭ ਤੋਂ ਆਮ ਗੱਲ)।

ਕਦਮ 6: ਟਾਸਕ ਨੂੰ Done ਕਰੋ ਅਤੇ ਹਟਾਓ

ਹੁਣ ਜਦ ਤੁਸੀਂ ਟਾਸਕ ਜੋੜ ਸਕਦੇ ਹੋ, ਆਓ ਉਹਨਾਂ ਨੂੰ ਇਕਸ਼ਨਯੋਗ ਬਣਾਈਏ: ਟਾਸਕ ਨੂੰ ਮੁਕੰਮਲ ਨਿਸ਼ਾਨ ਲਗਾਉਣ ਅਤੇ ਹਟਾਉਣ ਦੀ ਸਮਰੱਥਾ ਹੋਣੀ ਚਾਹੀਦੀ ਹੈ।

ਟਾਸਕਾਂ ਨੂੰ ਸਧਾਰਨ ਡਾਟਾ ਵਜੋਂ ਸੰਭਾਲੋ

ਟਾਸਕਾਂ ਨੂੰ ਸਧਾਰਨ ਸਤਰਾਂ ਵਜੋਂ ਰੱਖਣ ਦੀ ਬਜਾਏ, ਉਨ੍ਹਾਂ ਨੂੰ ਆਬਜੈਕਟ ਵਜੋਂ ਰੱਖੋ। ਇਸ ਨਾਲ ਹਰ ਟਾਸਕ ਨੂੰ ਇੱਕ ਪੱਕੀ ਪਛਾਣ ਮਿਲਦੀ ਹੈ ਅਤੇ “done” ਸਥਿਤੀ ਟਰੈਕ ਕਰਨ ਲਈ ਜਗ੍ਹਾ ਮਿਲਦੀ ਹੈ:

• text: ਟਾਸਕ ਦਾ ਪਾਠ
• done: true ਜਾਂ false
• id: ਇੱਕ unique ਨੰਬਰ ਤਾਂ ਜੋ ਅਸੀਂ ਸਹੀ ਟਾਸਕ ਲੱਭ/ਹਟਾ ਸਕੀਏ

ਇਹ ਇੱਕ ਸਧਾਰਨ ਉਦਾਹਰਣ ਹੈ:

let tasks = [
  { id: 1, text: "Buy milk", done: false },
  { id: 2, text: "Email Sam", done: true }
];

Done ਕੰਟਰੋਲ ਅਤੇ Delete ਬਟਨ ਜੋੜੋ

ਜਦ ਤੁਸੀਂ ਹਰ ਟਾਸਕ ਨੂੰ ਪੇਜ 'ਤੇ ਰੈਂਡਰ ਕਰੋ, ਤਾਂ ਇੱਕ 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 ਕਲਾਸ ਜੋੜ ਕੇ ਮੁਕੰਮਲ ਟਾਸਕ ਦਿਖਾਓ।

ਕਦਮ 7: ਟਾਸਕ ਸੇਵ ਕਰੋ ਤਾਂ ਜੋ ਉਹ ਰਹਿਣ (localStorage)

ਹੁਣ ਤੱਕ ਤੁਹਾਡੀ ਟੂ‑ਡੂ ਲਿਸਟ ਦਾ ਇੱਕ ਨਿਰਾਸ਼ਜਨਕੀ ਸਮੱਸਿਆ ਹੈ: ਜੇ ਤੁਸੀਂ ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ (ਜਾਂ ਟੈਬ ਬੰਦ ਕਰੋ), ਸਭ ਕੁਝ ਗਾਇਬ ਹੋ ਜਾਂਦਾ ਹੈ।

ਇਹ ਇਸ ਲਈ ਹੁੰਦਾ ਹੈ ਕਿਉਂਕਿ ਤੁਹਾਡੇ ਟਾਸਕ ਸਿਰਫ JavaScript ਮੈਮੋਰੀ ਵਿੱਚ ਹਨ। ਜਦ ਪੇਜ ਰੀਲੋਡ ਹੁੰਦਾ ਹੈ, ਉਹ ਮੈਮੋਰੀ ਰੀਸੈੱਟ ਹੋ ਜਾਂਦੀ ਹੈ।

localStorage = ਬਰਾਊਜ਼ਰ ਦੇ ਅੰਦਰ ਇੱਕ ਛੋਟਾ “ਸੇਵ ਬਾਕਸ”

localStorage ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਬਣਿਆ ਹੋਇਆ ਹੁੰਦਾ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਛੋਟੇ ਬਾਕਸ ਵਜੋਂ ਸੋਚੋ ਜਿਸ ਵਿੱਚ ਤੁਸੀਂ ਲਿਖਤ (text) ਕਿਸੇ ਨਾਮ (key) ਦੇ ਤਹਿਤ ਰੱਖ ਸਕਦੇ ਹੋ। ਇਹ ਸ਼ੁਰੂਆਤੀਆਂ ਲਈ ਬਹੁਤ ਵਧੀਆ ਹੈ ਕਿਉਂਕਿ ਇਸਨੂੰ ਸਰਵਰ ਜਾਂ ਖਾਤੇ ਦੀ ਲੋੜ ਨਹੀਂ।

ਅਸੀਂ ਪੂਰੀ ਟਾਸਕ ਲਿਸਟ ਨੂੰ JSON ਟੈਕਸਟ ਵਜੋਂ ਸਟੋਰ ਕਰਾਂਗੇ, ਫਿਰ ਪੇਜ ਖੁੱਲਣ 'ਤੇ ਉਸਨੂੰ ਫੇਰ ਲੋਡ ਕਰਾਂਗੇ।

1) ਹਰ تبدیلی ਤੋਂ ਬਾਅਦ ਸੇਵ ਕਰੋ

ਜਦ ਵੀ ਤੁਸੀਂ ਟਾਸਕ ਜੋੜੋ, ਟਾਸਕ 'ਤੇ Done ਕਰੋ, ਜਾਂ ਹਟਾਓ, saveTasks() ਕਾਲ ਕਰੋ।

const STORAGE_KEY = "todo.tasks";

function saveTasks(tasks) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks));
}

ਜਿੱਥੇ ਵੀ ਤੁਹਾਡਾ ਐਪ tasks ਐਰੇ ਨੂੰ ਅੱਪਡੇਟ ਕਰਦਾ ਹੈ, ਉਸ ਦੇ ਬਾਅਦ ਇਹ ਕਰੋ:

saveTasks(tasks);
renderTasks(tasks);

2) ਪੇਜ ਸ਼ੁਰੂ ਤੇ ਲੋਡ ਕਰੋ (ਅਤੇ render)

ਜਦ ਪੇਜ ਲੋਡ ਹੁੰਦਾ ਹੈ, ਸੇਵ ਕੀਤੀ ਹੋਈ ਵੈਲਯੂ ਪੜ੍ਹੋ। ਜੇ ਅਜੇ ਕੁਝ ਸੇਵ ਨਹੀਂ ਹੈ, ਤਾਂ ਖਾਲੀ ਲਿਸਟ ਵਰਤੋਂ।

function loadTasks() {
  const saved = localStorage.getItem(STORAGE_KEY);
  return saved ? JSON.parse(saved) : [];
}

let tasks = loadTasks();
renderTasks(tasks);

بس: ਹੁਣ ਤੁਹਾਡਾ ਐਪ ਰੀਫ੍ਰੈਸ਼ ਤੋਂ ਬਾਅਦ ਵੀ ਟਾਸਕ ਯਾਦ ਰੱਖਦਾ ਹੈ।

ਸੁਝਾਅ: localStorage ਸਿਰਫ ਸਤਰਾਂ (strings) ਸਟੋਰ ਕਰਦਾ ਹੈ, ਇਸ ਲਈ JSON.stringify() ਤੁਹਾਡੇ ਐਰੇ ਨੂੰ ਟੈਕਸਟ ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ, ਅਤੇ JSON.parse() ਇਸਨੂੰ ਵਾਪਸ ਅਸਲ ਐਰੇ ਕਰ ਦਿੰਦਾ ਹੈ।

ਕਦਮ 8: ਆਮ ਬੱਗਾਂ ਦੀ ਟੈਸਟਿੰਗ ਅਤੇ ਠੀਕ ਕਰਨਾ

ਟੈਸਟਿੰਗ ਸੁਣਨ ਵਿੱਚ ਬੋRing ਲੱਗ ਸਕਦੀ ਹੈ, ਪਰ ਇਹ ਤੇਜ਼ ਤਰੀਕੇ ਨਾਲ ਤੁਹਾਡੇ ਟੂ‑ਡੂ ਐਪ ਨੂੰ “ਮੇਰੇ ਮਸ਼ੀਨ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ” ਤੋਂ “ਹਰ ਵਾਰੀ ਕੰਮ ਕਰਦਾ ਹੈ” ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ। ਹਰ ਛੋਟੀ ਚੇਜ਼ ਬਦਲਣ ਤੋਂ ਬਾਅਦ ਇਕ ਛੋਟੀ ਜਾਂਚ ਕਰੋ।

ਇੱਕ ਤੇਜ਼ ਟੈਸਟ ਪਾਸ (60 ਸਕਿੰਟ)

ਮੁੱਖ ਫਲੋ ਇਹਨਾਂ ਕ੍ਰਮ ਵਿੱਚ ਚਲਾਓ:

• ਇੱਕ ਟਾਸਕ ਜੋੜੋ
• ਉਸਨੂੰ Done ਕਰੋ
• ਉਸਨੂੰ ਡਿਲੀਟ ਕਰੋ
• ਪੇਜ ਨੂੰ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ (UI ਅਜੇ ਵੀ ਉਮੀਦ ਮੁਤਾਬਕ ਹੈ ਕਿ ਨਹੀਂ, ਦੇਖੋ)

ਜੇ ਕਿਸੇ ਵੀ ਕਦਮ ਵਿੱਚ ਫੇਲ ਹੋ ਰਿਹਾ ਹੈ, ਨਵੇਂ ਫੀਚਰ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਉਸਨੂੰ ਠੀਕ ਕਰੋ। ਛੋਟੇ ਐਪ ਇੱਕਠੇ ਸਮੱਸਿਆਵਾਂ ਨਾਲ ਗੰਦੇ ਹੋ ਜਾਂਦੇ ਹਨ।

ਉਹ Edge cases ਅਜ਼ਮਾਓ ਜੋ ਸ਼ੁਰੂਆਤੀ ਐਪ ਤੋੜ ਦਿੰਦੇ ਹਨ

Edge cases ਉਹ ਇਨਪੁਟ ਹਨ ਜਿਨ੍ਹਾਂ ਲਈ ਤੁਸੀਂ ਉਡੀਕ ਨਹੀਂ ਕੀਤੀ, ਪਰ ਅਸਲ ਲੋਕ ਫਿਰ ਵੀ ਕਰਦੇ ਹਨ:

• ਬਹੁਤ ਲੰਮਾ ਟੈਕਸਟ (ਕੀ ਓਹ ਓਵਰਫਲੋ ਜਾਂ ਬਟਨ ਨੂੰ ਧੱਕਦਾ ਹੈ?)
• ਦੋਹਰਾਏ ਗਏ ਟਾਸਕ (ਕੀ ਤੁਸੀਂ ਸਹੀ ਇਕ ਨੂੰ ਡਿਲੀਟ ਕਰ ਰਹੇ ਹੋ?)
• ਖਾਲੀ ਇਨਪੁਟ (ਕੀ ਇਹ ਖਾਲੀ ਟਾਸਕ ਜੋੜਦਾ ਹੈ?)

ਇੱਕ ਆਮ ਫਿਕਸ ਖਾਲੀ ਟਾਸਕ ਰੋਕਣਾ ਹੈ:

const text = input.value.trim();
addButton.disabled = text === "";

(ਤੁਸੀਂ ਇਹ ਨੂੰ ਹਰ input ਇਵੈਂਟ 'ਤੇ ਚਲਾ ਸਕਦੇ ਹੋ, ਅਤੇ ਫਿਰ ਅਸਲ ਜੋੜਨ ਤੋਂ ਪਹਿਲਾਂ ਫਿਰ ਇੱਕ ਵਾਰੀ ਚੈੱਕ ਕਰੋ।)

ਤੇਜ਼ “ਕੁਝ ਨਹੀਂ ਹੋ ਰਿਹਾ” ਚੈਕਲਿਸਟ

ਜਦੋਂ ਕਲਿੱਕ ਕੁਝ ਨਹੀਂ ਕਰਦੇ, ਆਮ ਤੌਰ 'ਤੇ ਇਹਨਾਂ ਵਿੱਚੋਂ ਕੋਈ ਇੱਕ ਕਾਰਨ ਹੁੰਦਾ ਹੈ:

• ਕੋਈ ਸਿਲੈਕਟਰ ਮਿਲਦਾ ਨਹੀਂ (HTML ਅਤੇ JS ਵਿੱਚ id ਜਾਂ class ਨਾਮ ਵੱਖਰੇ ਹਨ)
• ਤੁਹਾਡਾ ਸਕ੍ਰਿਪਟ ਲੋਡ ਨਹੀਂ ਹੋ ਰਿਹਾ (ਗਲਤ ਫਾਇਲ ਨਾਮ/ਪਾਥ, ਜਾਂ app.js ਨਹੀਂ ਮਿਲਿਆ)
• ਕੋਈ JavaScript error ਹੋਇਆ ਜੋ ਫਾਇਲ ਦੇ ਬਾਕੀ ਹਿਸੇ ਨੂੰ ਰੋਕ ਰਿਹਾ ਹੈ

ਅਸਲ ਗਲਤੀ ਨੂੰ ਪਤਾ ਕਰਨ ਲਈ console ਵਰਤੋ

ਜਦੋਂ ਕੁਝ ਗੁਪਤ ਮਹਿਸੂਸ ਹੁੰਦਾ ਹੈ, ਤਾਂ ਲੌਗ ਕਰੋ:

console.log("Adding:", text);
console.log("Current tasks:", tasks);

ਬਰਾਊਜ਼ਰ ਦੀ Console ਵਿੱਚ ਗਲਤੀਆਂ (ਲਾਲ ਟੈਕਸਟ) ਦੇਖੋ। ਜਦ ਤੁਸੀਂ ਮੁੱਦੇ ਨੂੰ ਠੀਕ ਕਰ ਲੈਂਦੇ ਹੋ, ਤਾਂ ਲੌਗ ਹਟਾ ਦਿਓ ਤਾਂ ਜੋ ਉਹ ਪ੍ਰੋਜੈਕਟ ਨੂੰ ਭਾਰ ਨਾ ਦੇਣ।

ਕਦਮ 9: ਵਰਤੋਂਕਾਰ-ਮਿਤ੍ਰ ਅਤੇ ਮੋਬਾਈਲ ਲਈ ਸੁਧਾਰ (Accessibility + Mobile)

ਇੱਕ ਟੂ‑ਡੂ ਐਪ ਸਿਰਫ਼ “ਮੁਕੰਮਲ” ਤਦੋਂ ਹੁੰਦਾ ਹੈ ਜਦ ਇਹ ਅਸਲ ਲੋਕਾਂ ਲਈ ਆਰਾਮਦੇਹ ਹੋ—ਫੋਨ 'ਤੇ, ਕੀਬੋਰਡ ਨਾਲ, ਅਤੇ ਸੁਨੇਹੇ ਪੜ੍ਹਨ ਵਾਲਿਆਂ (screen readers) ਨਾਲ।

ਮੋਬਾਈਲ 'ਤੇ ਟੈਪ ਲਈ ਆਸਾਨ ਬਣਾਓ

ਛੋਟੇ ਸਕ੍ਰੀਨਾਂ 'ਤੇ, ਛੋਟੇ ਬਟਨ ਰੋਕਾਵਟ ਹੁੰਦੇ ਹਨ। ਕਲਿੱਕ-ਯੋਗ ਚੀਜ਼ਾਂ ਨੂੰ ਕਾਫੀ ਜਗ੍ਹਾ ਦਿਓ:

• ਬਟਨਾਂ ਨੂੰ ਵੱਡੀ padding ਦਿਓ (ਲਕੜੀ-ਮੰਨਕੇ ~44px ਉਚਾਈ ਤੱਕ ਲੱਖੇ)
• Done ਅਤੇ Delete ਬਟਨਾਂ ਵਿਚਕਾਰ ਫਾਸਲਾ ਰੱਖੋ ਤਾਂ ਜੋ ਗਲਤ-ਟੈਪ ਨਾ ਹੋਵੇ
• ਆਪਣੇ ਇਨਪੁਟ ਫੀਲਡ ਨੂੰ ਮੋਬਾਈਲ 'ਤੇ ਫੁੱਲ-ਚੌੜਾਈ ਰੱਖੋ ਤਾਂ ਜੋ ਟਾਈਪਿੰਗ ਆਸਾਨ ਹੋਵੇ

ਜੇ ਤੁਸੀਂ CSS ਵਰਤ ਰਹੇ ਹੋ, ਤਾਂ padding, font-size, ਅਤੇ gap ਵਧਾਉਣਾ ਸਭ ਤੋਂ ਵੱਡਾ ਫਰਕ ਬਣਾਉਂਦਾ ਹੈ।

ਲੇਬਲ ਅਤੇ ARIA ਜੋੜੋ (ਕੀ ਅਤੇ ਕਿਉਂ)

Screen readers ਨੂੰ ਨਿਯਤ ਨਾਵਾਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ।

• ਤੇਰਾ ਟੈਕਸਟ ਇਨਪੁਟ ਇੱਕ ਸਹੀ \u003clabel\u003e ਰੱਖਣਾ ਚਾਹੀਦਾ ਹੈ (ਇਹ ਸਭ ਤੋਂ ਵਧੀਆ ਵਿਕਲਪ ਹੈ)। ਜੇ ਤੁਸੀਂ ਇਸਨੂੰ ਦਿਖਾਉਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ, ਤਾਂ CSS ਨਾਲ ਵਿਜ਼ੂਅਲੀ ਤੌਰ 'ਤੇ ਛੁਪਾ ਸਕਦੇ ਹੋ, ਪਰ HTML ਵਿਚ ਲੇਬਲ ਬਚਾਓ।
• ਸਿਰਫ਼ ਆਈਕਨ-ਆਧਾਰਿਤ ਬਟਨ (ਜਿਵੇਂ ਟ੍ਰੈਸ਼ ਆਈਕਨ) ਨੂੰ aria-label="Delete task" ਜਿਵੇਂ ਲੇਖ ਮਿਲਣਾ ਚਾਹੀਦਾ ਹੈ ਤਾਂ ਕਿ screen reader ਨੂੰ ਸਮਝ ਆ ਜਾਵੇ ਕਿ ਇਹ ਬਟਨ ਕੀ ਕਰਦਾ ਹੈ।

ਇਸ ਨਾਲ ਲੋਗ ਇਹ ਸਮਝ ਸਕਦੇ ਹਨ ਕਿ ਹਰ ਕੰਟਰੋਲ ਕੀ ਕਰਦਾ ਹੈ ਬਿਨਾਂ ਅਨੁਮਾਨ ਲਗਾਉਣ ਦੇ।

ਕੀਬੋਰਡ ਸਮਰਥਨ: Tab + Enter

ਸੁਰੱਖਿਅਤ ਬਣਾਓ ਕਿ ਤੁਸੀਂ ਪੂਰੇ ਐਪ ਨੂੰ ਮਾਊਸ ਦੇ ਬਿਨਾਂ ਵੀ ਵਰਤ ਸਕੋ:

• ਤੁਸੀਂ ਇਨਪੁਟ ਅਤੇ ਬਟਨਾਂ 'ਤੇ Tab ਨਾਲ ਜਾ ਸਕੋ
• ਇਨਪੁਟ ਵਿੱਚ Enter ਦਬਾਉਣ 'ਤੇ ਟਾਸਕ ਜੁੜਣਾ ਚਾਹੀਦਾ ਹੈ (ਇੱਕ \u003cform\u003e ਵਰਤਣ ਨਾਲ Enter ਕੁਦਰਤੀ ਤੌਰ 'ਤੇ ਕੰਮ ਕਰਦਾ ਹੈ)
• ਜਦ ਇੱਕ ਟਾਸਕ ਜੋੜਿਆ ਜਾਵੇ, ਸੋਚੋ ਕਿ ਫੋਕਸ ਵਾਪਸ ਇਨਪੁਟ 'ਤੇ ਰੱਖਣਾ ਤੇਜ਼ੇ-ਤੇਜ਼ੇ ਹਮੇਸ਼ਾ ਕਰਨ ਵਿੱਚ ਸਹਾਇਕ ਹੈ

ਪੜ੍ਹਨਯੋਗਤਾ: ਕੰਟਰਾਸਟ ਅਤੇ ਫੋਂਟ ਸਾਈਜ਼

ਇੱਕ ਪੜ੍ਹਨਯੋਗ ਫੋਂਟ ਸਾਈਜ਼ ਵਰਤੋ (16px ਚੰਗੀ ਬੇਸਲਾਇਨ ਹੈ) ਅਤੇ ਮਜ਼ਬੂਤ ਰੰਗ ਕੰਟਰਾਸਟ (ਹਲਕੇ ਬੈਕਗ੍ਰਾਊਂਡ 'ਤੇ ਡਾਰ्क ਟੈਕਸਟ ਜਾਂ ਉਲਟ)। “Done” ਦਿਖਾਉਣ ਲਈ ਸਿਰਫ਼ ਰੰਗ ਤੇ ਨਿਰਭਰ ਨਾ ਰਹੋ—ਇੱਕ ਸਪਸ਼ਟ ਸ਼ੈਲੀ ਵਰਗੇ strikethrough ਦੇ ਨਾਲ ਇੱਕ “Done” ਸਥਿਤੀ ਜੋੜੋ।

ਕਦਮ 10: ਕੋਡ ਸਾਫ਼-ਸੁਥਰਾ ਅਤੇ ਕਰਮ-ਬੱਧ ਕਰੋ

ਹੁਣ ਜਦ ਸਭ ਕੁਝ ਕੰਮ ਕਰਦਾ ਹੈ, 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 ਪਾਥ ਮੇਲ ਖਾਂਦੇ ਹੋ।

JavaScript ਨੂੰ ਪੜ੍ਹਨਯੋਗ ਬਣਾਉ

ਚੰਦ ਛੋਟੇ ਸੁਝਾਅ:

• ਵਧੀਆ ਨਾਮ ਵਰਤੋ: taskInput, taskList, saveTasks()
• ਫੰਕਸ਼ਨ ਛੋਟੇ ਰੱਖੋ: ਇੱਕ ਫੰਕਸ਼ਨ ਇਕ ਹੀ ਕੰਮ ਕਰੇ
• ਜਿੱਥੇ ਕੋਡ ਸਾਫ਼ ਨਾ ਹੋਵੇ, ਥੋੜ੍ਹੇ ਟਿੱਪਣੀਆਂ ਰੱਖੋ (ਪਰ ਹਰ ਲਾਈਨ 'ਤੇ ਟਿੱਪਣੀ ਨਾ ਕਰੋ)

ਉਦਾਹਰਨ ਲਈ, ਇਹ ਪਰਖਣਾ ਸੁਗਮ ਹੈ:

• renderTasks(tasks)
• addTask(text)
• toggleTask(id)
• deleteTask(id)

ਇੱਕ ਛੋਟੀ README ਜੋੜੋ

ਤੁਹਾਡਾ README.md ਸਧਾਰਨ ਹੋ ਸਕਦਾ ਹੈ:

• ਇਹ ਕੀ ਕਰਦਾ ਹੈ (ਇੱਕ ਟੂ‑ਡੂ ਲਿਸਟ ਜੋ ਟਾਸਕ ਸੇਵ ਕਰਦੀ ਹੈ)
• ਕਿਵੇਂ ਚਲਾਉਣਾ ਹੈ (index.html ਨੂੰ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਖੋਲ੍ਹੋ)
• ਵਿਕਲਪ: ਕੋਈ ਜਾਣੀ-ਪਛਾਣ ਸੀਮਾਵਾਂ

ਪ੍ਰੋਜੈਕਟ ਬੈਕਅਪ ਕਰੋ

ਘੱਟੋ-ਘੱਟ, ਇੱਕ ਮਿਲਸਟੋਨ ਦੇ ਬਾਅਦ ਫੋਲਡਰ ਨੂੰ zip ਕਰ ਲਵੋ (ਜਿਵੇਂ “localStorage ਕੰਮ ਕਰਦਾ ਹੈ” ਮਾਇਲਸਟੋਨ)। ਜੇ ਤੁਸੀਂ ਵਰਜ਼ਨ ਇਤਿਹਾਸ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ Git ਵਧੀਆ ਹੈ—ਪਰ ਵਿਕਲਪਿਕ। ਇੱਕ ਬੈਕਅਪ ਕਾਪੀ ਵੀ ਅਕਸਮਾਤ ਮਿਟਾਉਣ ਤੋਂ ਬਚਾ ਲੈਂਦੀ ਹੈ।

ਕਦਮ 11: ਆਪਣੇ ਐਪ ਨੂੰ ਪ੍ਰਕਾਸ਼ਿਤ ਕਰੋ ਅਤੇ ਸਾਂਝਾ ਕਰੋ

ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਦਾ ਮਤਲਬ ਇਹ ਹੈ ਕਿ ਤੁਹਾਡੇ ਐਪ ਦੀਆਂ ਫਾਇਲਾਂ (HTML, CSS, JavaScript) ਇੰਟਰਨੈੱਟ 'ਤੇ ਕਿਸੇ ਜਗ੍ਹਾ ਰੱਖੋ ਤਾਂ ਜੋ ਹੋਰ ਲੋਕ ਲਿੰਕ ਖੋਲ੍ਹ ਕੇ ਇਸਨੂੰ ਵਰਤ ਸਕਣ। ਕਿਉਂਕਿ ਇਹ ਟੂ‑ਡੂ ਐਪ ਇੱਕ "ਸਟੈਟਿਕ ਸਾਈਟ" ਹੈ (ਇਹ ਬਰਾਊਜ਼ਰ ਵਿੱਚ ਹੀ ਚਲਦੀ ਹੈ ਤੇ ਸਰਵਰ ਦੀ ਲੋੜ ਨਹੀਂ), ਤੁਸੀਂ ਮੁਫ਼ਤ ਹੋਸਟਿੰਗ ਸਰਵਿਸਾਂ ਤੇ ਇਸਨੂੰ ਰੱਖ ਸਕਦੇ ਹੋ।

ਵਿਕਲਪ 1: GitHub Pages (ਸਟੈਟਿਕ ਸਾਈਟ ਲਈ ਵਧੀਆ)

ਉੱਚ-ਸਤਰ ਦੇ ਕਦਮ:

1. GitHub ਖਾਤਾ ਬਣਾਓ (ਜੇ ਤੁਹਾਡੇ ਕੋਲ ਨਹੀਂ ਹੈ)
2. ਇੱਕ ਨਵਾਂ ਰਿਪੋ ਬਣਾਓ ਅਤੇ ਆਪਣੀਆਂ ਫਾਇਲਾਂ ਅਪਲੋਡ ਕਰੋ (ਜਾਂ Git ਨਾਲ push ਕਰੋ)
3. ਰਿਪੋ ਵਿੱਚ Settings → Pages 'ਤੇ ਜਾਓ
4. ਪ੍ਰਕਾਸ਼ਿਤ ਕਰਨ ਲਈ branch ਚੁਣੋ (ਅਕਸਰ main) ਅਤੇ ਫੋਲਡਰ (ਅਕਸਰ / root)
5. Save—GitHub ਤੁਹਾਨੂੰ ਇੱਕ ਪਬਲਿਕ URL ਦੇਵੇਗਾ

ਜੇ ਤੁਹਾਡਾ ਐਪ ਵੱਖ-ਵੱਖ ਫਾਇਲਾਂ ਵਰਤਦਾ ਹੈ, ਤਾਂ ਆਪਣੀਆਂ ਫਾਇਲ-ਨਾਮਾਂ ਅਤੇ link ਮੈਚ ਖਾਤਰ ਕਰੋ (ਜਿਵੇਂ styles.css ਬਨਾਮ style.css).

ਵਿਕਲਪ 2: Netlify ਜਾਂ Vercel (ਸਰਲ drag-and-drop)

ਜੇ ਤੁਸੀਂ ਸਭ ਤੋਂ ਸੌਖਾ ਢੰਗ ਚਾਹੁੰਦੇ ਹੋ:

1. Netlify ਜਾਂ Vercel 'ਤੇ ਖਾਤਾ ਬਣਾਓ
2. Deploy / Add New Project ਦੇ ਵਿਕਲਪ ਨੂੰ ਖੋੋ
3. ਆਪਣਾ ਪ੍ਰੋਜੈਕਟ ਫੋਲਡਰ drag-and-drop ਕਰੋ (ਜਾਂ GitHub ਰਿਪੋ ਨਾਲ ਜੋੜੋ)
4. ਬਿਲਡ/ਅਪਲੋਡ ਰੁਕਣ ਦੀ ਉਡੀਕ ਕਰੋ
5. ਜਨਰੇਟ ਕੀਤੀ URL ਖੋਲ੍ਹੋ ਅਤੇ ਟੈਸਟ ਕਰੋ

ਸਾਂਝਾ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਤੁਰੰਤ ਚੈੱਕਲਿਸਟ

• ਪੇਜ ਰੀਫ੍ਰੈਸ਼ ਕਰੋ: ਤੁਹਾਡੇ ਟਾਸਕ ਵੱਧੇ-ਘੱਟ ਠੀਕ ਰਹਿਣੇ ਚਾਹੀਦੇ ਹਨ (localStorage ਕੰਮ ਕਰ ਰਿਹਾ ਹੈ)
• ਟਾਸਕ ਜੋੜੋ, ਮੁਕੰਮਲ ਕਰੋ, ਅਤੇ ਵਟਾਓ: ਕਿਸੇ ਬਟਨ ਵਿੱਚ ਖ਼ਰਾਬੀ ਨਹੀਂ ਹੋਣੀ ਚਾਹੀਦੀ
• ਮੋਬਾਈਲ 'ਤੇ ਖੋਲ੍ਹੋ (ਜਾਂ ਬਰਾਊਜ਼ਰ ਵਿੰਡੋ ਨੂੰ ਤੰਗ ਕਰੋ): ਕੁਝ ਵੀ ਸਕ੍ਰੀਨ ਤੋਂ ਬਾਹਰ ਨਾ ਜਾਵੇ

ਜਦ ਇਹ ਠੀਕ ਹੋ ਜਾਵੇ, ਕਿਸੇ ਮਿੱਤਰ ਨੂੰ ਲਿੰਕ ਭੇਜੋ ਅਤੇ ਉਹਨਾਂ ਤੋਂ ਟੈਸਟ ਕਰਵਾਉ—ਨਵੀ ਨਜ਼ਰਾਂ ਜਲਦੀ ਸਮੱਸਿਆਵਾਂ ਪਕੜ ਲੈਂਦੀਆਂ ਹਨ।

ਅਗਲੇ ਕਦਮ: ਆਸਾਨ ਅਪਗ੍ਰੇਡ ਜੋ ਤੁਸੀਂ ਕੋਸ਼ਿਸ਼ ਕਰ ਸਕਦੇ ਹੋ

ਤੁਸੀਂ ਇੱਕ ਕੰਮ ਕਰਨਯੋਗ ਟੂ‑ਡੂ ਐਪ ਬਣਾ ਲਿਆ। ਜੇ ਤੁਸੀਂ ਵਧਣੀ ਚਾਹੁੰਦੇ ਹੋ ਪਰ ਇੱਕ ਵੱਡੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਦਿੱਖ ਜਾਣਾ ਨਹੀਂ ਚਾਹੁੰਦੇ, ਇਹ ਅਪਗ੍ਰੇਡ ਉਪਯੋਗੀ ਹਨ ਤੇ ਵਾਜਬੀ ਪੈਟਰਨ ਸਿਖਾਉਂਦੀਆਂ ਹਨ।

1) ਟਾਸਕ ਟੈਕਸਟ ਸੰਪਾਦਨ

ਹਰ ਟਾਸਕ ਦੇ ਕੋਲ ਇੱਕ “Edit” ਬਟਨ ਜੋੜੋ। ਜਦ ਇਹ ਦਬਾਈਏ, ਟਾਸਕ ਲੇਬਲ ਦੀ ਥਾਂ ਇੱਕ ਛੋਟਾ ਇਨਪੁਟ ਫੀਲਡ ਆ ਜਾਵੇ (ਪੂਰੇ ਪੂਰਵ-ਭਰਿਆ), ਨਾਲ ਹੀ “Save” ਅਤੇ “Cancel” ਹੋਣ।

ਟਿੱਪ: ਆਪਣੇ ਟਾਸਕ ਡਾਟਾ ਨੂੰ id ਅਤੇ text ਵਾਲੇ ਆਬਜੈਕਟਾਂ ਵਜੋਂ ਰੱਖੋ। ਤੇੰ ਸੰਪਾਦਨ ਇਸ ਤਰ੍ਹਾਂ ਬਣੇਗਾ: ਸਹੀ id ਲੱਭੋ, text ਅੱਪਡੇਟ ਕਰੋ, ਰੀ-ਰੈਂਡਰ ਕਰੋ, ਅਤੇ ਸੇਵ ਕਰੋ।

2) ਫਿਲਟਰ: All / Active / Done

ਉੱਪਰ ਤਿੰਨ ਬਟਨ ਜੋੜੋ: All, Active, Done।

ਮੌਜੂਦਾ ਫਿਲਟਰ ਨੂੰ ਇੱਕ ਵੈਰਿਏਬਲ currentFilter = 'all' ਵਿੱਚ ਰੱਖੋ। ਜਦ ਰੈਂਡਰ ਹੋਵੇ, ਦਿਖਾਓ:

• All: ਹਰ ਟਾਸਕ
• Active: ਜਿਹੜੇ ਟਾਸਕ ਮੁਕੰਮਲ ਨਹੀਂ
• Done: ਮੁਕੰਮਲ ਟਾਸਕ

3) ਮਿਆਦਾਂ ਜਾਂ ਸੀਧੀਆਂ ਸ਼੍ਰੇਣੀਆਂ

ਹੁਣੇ ਹੀ ਹਲਕਾ ਰੱਖੋ:

• ਇੱਕ ਵਿਕਲਪਿਕ due date (YYYY-MM-DD) ਜੋੜੋ ਅਤੇ ਟਾਸਕ ਦੇ ਨਾਲ ਦਿਖਾਓ
• ਜਾਂ ਛੋਟਾ dropdown ਜੋੜੋ ਜਿਵੇਂ “Work / Home / School” ਵਰਗੀ ਸ਼੍ਰੇਣੀ

ਇੱਕ ਵਾਧੂ ਫੀਲਡ ਵੀ ਤੁਹਾਨੂੰ ਆਪਣੇ ਡਾਟਾ ਮਾਡਲ ਅਤੇ UI ਨੂੰ ਇਕੱਠੇ ਅੱਪਡੇਟ ਕਰਨਾ ਸਿਖਾਉਂਦਾ ਹੈ।

4) ਬਾਅਦ ਵਿੱਚ: localStorage ਤੋਂ ਸਰਵਰ ਵਾਲੀ ਸੰਭਾਲ ਵੱਲ

ਜਦ ਤੁਸੀਂ ਤਿਆਰ ਹੋ, ਵੱਡੀ ਸੋਚ ਇਹ ਹੈ: localStorage ਦੀ ਥਾਂ fetch() ਨਾਲ ਇੱਕ API ਨੂੰ ਟਾਸਕ ਭੇਜੋ। ਸਰਵਰ ਉਨ੍ਹਾਂ ਨੂੰ ਡੇਟਾਬੇਸ ਵਿੱਚ ਰੱਖੇਗਾ, ਤਾਂ ਟਾਸਕ ਡਿਵਾਈਸਾਂ ਵਿਚ ਸਮਕਾਲੀ ਹੋ ਸਕਣਗੇ।

ਜੇ ਤੁਸੀਂ ਇਸ ਕਦਮ ਨੂੰ ਬਿਨਾਂ ਮੁੜ-ਬਨਾਉਣ ਦੇ ਅਸੀਂ, ਕੋਈ vibe-coding ਪਲੇਟਫਾਰਮ ਜਿਵੇਂ Koder.ai ਤੁਹਾਨੂੰ ਅਗਲਾ ਵਰਜ਼ਨ ਤਿਆਰ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ: ਚੈਟ ਵਿੱਚ ਫੀਚਰ ਦੱਸੋ (API endpoints, ਡੇਟਾਬੇਸ ਟੇਬਲ, UI ਬਦਲਾਅ), ਯੋਜਨਾ ਮੋਡ ਵਿੱਚ ਦੁਹਰਾਉ, ਅਤੇ ਜਦ ਤਿਆਰ ਹੋਵੋ ਤਾਂ React/Go/PostgreSQL ਪ੍ਰੋਜੈਕਟ ਦਾ ਸਰੋਤ ਕੋਡ ਨਿਰੀਤ ਕਰੋ।

5) ਇੱਕ ਵਧੀਆ ਅਗਲਾ ਸ਼ੁਰੂਆਤੀ ਪ੍ਰੋਜੈਕਟ

ਇੱਕ ਨੋਟਸ ਐਪ (ਖੋਜੀ ਖਾਸੀਅਤ ਨਾਲ) ਜਾਂ ਹੈਬਿਟ ਟ੍ਰੈਕਰ (ਰੋਜ਼ਾਨਾ ਚੈਕ‑ਇਨ) ਬਣਾਉ। ਇਹ ਉੱਪਰ ਦਿੱਤੀਆਂ ਹੀ ਹੁਨਰਾਂ ਨੂੰ ਦੁਹਰਾਉਂਦੇ ਹਨ: ਲਿਸਟ ਰੈਂਡਰਿੰਗ, ਸੋਧਣਾ, ਸੇਵ ਕਰਨਾ, ਅਤੇ ਸਧਾਰਨ UI ਡਿਜ਼ਾਇਨ।