ਇੱਕ ਫਰੰਟ-ਐਂਡ ਡਿਵੈਲਪਰ ਲਈ ਛੇ ਕੰਮ

1. ਕ੍ਰੈਡਿਟ ਕਾਰਡ ਫਾਰਮ

ਨਿਰਵਿਘਨ ਅਤੇ ਮਜ਼ੇਦਾਰ ਮਾਈਕ੍ਰੋ-ਇੰਟਰੈਕਸ਼ਨਾਂ ਦੇ ਨਾਲ ਇੱਕ ਠੰਡਾ ਕ੍ਰੈਡਿਟ ਕਾਰਡ ਸ਼ਕਲ। ਨੰਬਰ ਫਾਰਮੈਟਿੰਗ, ਤਸਦੀਕ ਅਤੇ ਆਟੋਮੈਟਿਕ ਕਾਰਡ ਕਿਸਮ ਦੀ ਪਛਾਣ ਸ਼ਾਮਲ ਹੈ। ਇਹ Vue.js 'ਤੇ ਬਣਾਇਆ ਗਿਆ ਹੈ ਅਤੇ ਪੂਰੀ ਤਰ੍ਹਾਂ ਜਵਾਬਦੇਹ ਵੀ ਹੈ। (ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ ਇੱਥੇ.)

ਕ੍ਰੈਡਿਟ-ਕਾਰਡ-ਫਾਰਮ

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਫਾਰਮ ਦੀ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਪ੍ਰਮਾਣਿਤ ਕਰੋ
• ਘਟਨਾਵਾਂ ਨੂੰ ਸੰਭਾਲੋ (ਉਦਾਹਰਨ ਲਈ, ਜਦੋਂ ਖੇਤਰ ਬਦਲਦੇ ਹਨ)
• ਸਮਝੋ ਕਿ ਪੰਨੇ 'ਤੇ ਤੱਤਾਂ ਨੂੰ ਕਿਵੇਂ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਹੈ ਅਤੇ ਕਿਵੇਂ ਰੱਖਣਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਕ੍ਰੈਡਿਟ ਕਾਰਡ ਦੀ ਜਾਣਕਾਰੀ ਜੋ ਫਾਰਮ ਦੇ ਸਿਖਰ 'ਤੇ ਦਿਖਾਈ ਦਿੰਦੀ ਹੈ

ਲੇਖ ਦਾ ਅਨੁਵਾਦ EDISON ਸੌਫਟਵੇਅਰ ਦੇ ਸਮਰਥਨ ਨਾਲ ਕੀਤਾ ਗਿਆ ਸੀ, ਜੋ ਕਿ ਪ੍ਰੋਗਰਾਮਰਾਂ ਦੀ ਸਿਹਤ ਅਤੇ ਉਨ੍ਹਾਂ ਦੇ ਨਾਸ਼ਤੇ ਦਾ ਧਿਆਨ ਰੱਖਦਾ ਹੈਅਤੇ ਕਸਟਮ ਸਾਫਟਵੇਅਰ ਵਿਕਸਿਤ ਕਰਦਾ ਹੈ.

2. ਹਿਸਟੋਗ੍ਰਾਮ

ਇੱਕ ਹਿਸਟੋਗ੍ਰਾਮ ਇੱਕ ਚਾਰਟ ਜਾਂ ਗ੍ਰਾਫ਼ ਹੁੰਦਾ ਹੈ ਜੋ ਆਇਤਾਕਾਰ ਬਾਰਾਂ ਦੇ ਨਾਲ ਉੱਚਾਈ ਜਾਂ ਲੰਬਾਈ ਦੇ ਨਾਲ ਉਹਨਾਂ ਦੁਆਰਾ ਦਰਸਾਉਂਦੇ ਮੁੱਲਾਂ ਦੇ ਅਨੁਪਾਤਕ ਸ਼੍ਰੇਣੀ ਵਾਲੇ ਡੇਟਾ ਨੂੰ ਦਰਸਾਉਂਦਾ ਹੈ।

ਉਹਨਾਂ ਨੂੰ ਲੰਬਕਾਰੀ ਜਾਂ ਖਿਤਿਜੀ ਰੂਪ ਵਿੱਚ ਲਾਗੂ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ. ਇੱਕ ਲੰਬਕਾਰੀ ਬਾਰ ਚਾਰਟ ਨੂੰ ਕਈ ਵਾਰ ਇੱਕ ਲਾਈਨ ਚਾਰਟ ਕਿਹਾ ਜਾਂਦਾ ਹੈ।

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਇੱਕ ਢਾਂਚਾਗਤ ਅਤੇ ਸਮਝਣ ਯੋਗ ਤਰੀਕੇ ਨਾਲ ਡੇਟਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰੋ
• ਇਸ ਤੋਂ ਇਲਾਵਾ: ਤੱਤ ਦੀ ਵਰਤੋਂ ਕਰਨਾ ਸਿੱਖੋ canvas ਅਤੇ ਇਸਦੇ ਨਾਲ ਤੱਤ ਕਿਵੇਂ ਖਿੱਚਣੇ ਹਨ

ਇਹ ਇਸ ਲਈ ਹੈ ਤੁਸੀਂ ਵਿਸ਼ਵ ਆਬਾਦੀ ਡੇਟਾ ਲੱਭ ਸਕਦੇ ਹੋ। ਉਹ ਸਾਲ ਦੁਆਰਾ ਕ੍ਰਮਬੱਧ ਕੀਤੇ ਗਏ ਹਨ.

3. ਟਵਿੱਟਰ ਹਾਰਟ ਐਨੀਮੇਸ਼ਨ

2016 ਵਿੱਚ ਵਾਪਸ, ਟਵਿੱਟਰ ਨੇ ਆਪਣੇ ਟਵੀਟਸ ਲਈ ਇਸ ਸ਼ਾਨਦਾਰ ਐਨੀਮੇਸ਼ਨ ਨੂੰ ਪੇਸ਼ ਕੀਤਾ। 2019 ਤੱਕ, ਇਹ ਅਜੇ ਵੀ ਹਿੱਸਾ ਦਿਖਦਾ ਹੈ, ਤਾਂ ਕਿਉਂ ਨਾ ਇੱਕ ਖੁਦ ਬਣਾਓ?

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• CSS ਗੁਣ ਨਾਲ ਕੰਮ ਕਰੋ keyframes
• HTML ਤੱਤਾਂ ਨੂੰ ਹੇਰਾਫੇਰੀ ਅਤੇ ਐਨੀਮੇਟ ਕਰੋ
• JavaScript, HTML ਅਤੇ CSS ਨੂੰ ਜੋੜੋ

4. ਖੋਜ ਫੰਕਸ਼ਨ ਦੇ ਨਾਲ GitHub ਰਿਪੋਜ਼ਟਰੀਆਂ

ਇੱਥੇ ਕੁਝ ਵੀ ਫੈਂਸੀ ਨਹੀਂ ਹੈ — GitHub ਰਿਪੋਜ਼ਟਰੀਆਂ ਸਿਰਫ਼ ਇੱਕ ਵਡਿਆਈ ਸੂਚੀ ਹਨ।
ਉਦੇਸ਼ ਰਿਪੋਜ਼ਟਰੀਆਂ ਨੂੰ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨਾ ਅਤੇ ਉਪਭੋਗਤਾ ਨੂੰ ਉਹਨਾਂ ਨੂੰ ਫਿਲਟਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦੇਣਾ ਹੈ. ਵਰਤੋ ਅਧਿਕਾਰਤ GitHub API ਹਰੇਕ ਉਪਭੋਗਤਾ ਲਈ ਰਿਪੋਜ਼ਟਰੀਆਂ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ.

GitHub ਪ੍ਰੋਫਾਈਲ ਪੇਜ - github.com/indreklasn

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• API ਤੋਂ ਡੇਟਾ ਪ੍ਰਾਪਤ ਕਰੋ
• API ਤੋਂ ਡੇਟਾ ਡਿਸਪਲੇ ਕਰੋ
• ਫਿਲਟਰ ਕਰੋ ਅਤੇ ਹਰੇਕ ਖੋਜ ਲਈ ਸੰਬੰਧਿਤ ਡੇਟਾ ਦਿਖਾਓ
• ਵਿਕਲਪਿਕ: ਜੇਕਰ ਤੁਸੀਂ ਕਿਸੇ ਚੁਣੌਤੀ ਲਈ ਤਿਆਰ ਹੋ, ਤਾਂ ਵਰਤੋ API v4, GraphQL ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਬਣਾਇਆ ਗਿਆ। ਜੇਕਰ ਤੁਸੀਂ GraphQL ਸਿੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ, ਤਾਂ ਮੇਰੇ ਪਿਛਲੇ ਲੇਖਾਂ ਵਿੱਚੋਂ ਇੱਕ 'ਤੇ ਜਾਓ.

5. Reddit-ਸ਼ੈਲੀ ਚੈਟ

ਗੱਲਬਾਤ ਉਹਨਾਂ ਦੀ ਸਾਦਗੀ ਅਤੇ ਵਰਤੋਂ ਵਿੱਚ ਸੌਖ ਦੇ ਕਾਰਨ ਸੰਚਾਰ ਦਾ ਇੱਕ ਪ੍ਰਸਿੱਧ ਤਰੀਕਾ ਹੈ। ਪਰ ਅਸਲ ਵਿੱਚ ਆਧੁਨਿਕ ਚੈਟ ਰੂਮਾਂ ਨੂੰ ਕੀ ਬਾਲਣ ਦਿੰਦਾ ਹੈ? WebSockets!

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• WebSockets, ਰੀਅਲ-ਟਾਈਮ ਸੰਚਾਰ ਅਤੇ ਡਾਟਾ ਅੱਪਡੇਟ ਵਰਤੋ
• ਉਪਭੋਗਤਾ ਪਹੁੰਚ ਪੱਧਰਾਂ ਨਾਲ ਕੰਮ ਕਰੋ (ਉਦਾਹਰਨ ਲਈ, ਇੱਕ ਚੈਟ ਚੈਨਲ ਦੇ ਮਾਲਕ ਦੀ ਭੂਮਿਕਾ ਹੈ admin, ਅਤੇ ਕਮਰੇ ਵਿੱਚ ਹੋਰ - user)
• ਫਾਰਮ ਦੀ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਪ੍ਰਮਾਣਿਤ ਕਰੋ - ਯਾਦ ਰੱਖੋ, ਸੁਨੇਹਾ ਭੇਜਣ ਲਈ ਚੈਟ ਵਿੰਡੋ ਹੈ input
• ਵੱਖ-ਵੱਖ ਚੈਟਾਂ ਬਣਾਓ ਅਤੇ ਸ਼ਾਮਲ ਹੋਵੋ
• ਨਿੱਜੀ ਸੰਦੇਸ਼ਾਂ ਨਾਲ ਕੰਮ ਕਰੋ। ਉਪਭੋਗਤਾ ਦੂਜੇ ਉਪਭੋਗਤਾਵਾਂ ਨਾਲ ਨਿੱਜੀ ਤੌਰ 'ਤੇ ਗੱਲਬਾਤ ਕਰ ਸਕਦੇ ਹਨ. ਜ਼ਰੂਰੀ ਤੌਰ 'ਤੇ, ਤੁਸੀਂ ਦੋ ਉਪਭੋਗਤਾਵਾਂ ਵਿਚਕਾਰ ਇੱਕ WebSocket ਕਨੈਕਸ਼ਨ ਸਥਾਪਤ ਕਰ ਰਹੇ ਹੋਵੋਗੇ.

6. ਪੱਟੀ-ਸ਼ੈਲੀ ਨੈਵੀਗੇਸ਼ਨ

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

ਤੁਸੀਂ ਕੀ ਸਿੱਖੋਗੇ:

• ਤਬਦੀਲੀਆਂ ਦੇ ਨਾਲ CSS ਐਨੀਮੇਸ਼ਨਾਂ ਨੂੰ ਜੋੜੋ
• ਸਮੱਗਰੀ ਨੂੰ ਮੱਧਮ ਕਰੋ ਅਤੇ ਫਲੋਟ ਕੀਤੇ ਤੱਤ 'ਤੇ ਕਿਰਿਆਸ਼ੀਲ ਕਲਾਸ ਲਾਗੂ ਕਰੋ

ਪਹਿਲਾਂ ਇਸਨੂੰ ਆਪਣੇ ਆਪ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ, ਪਰ ਜੇਕਰ ਤੁਹਾਨੂੰ ਮਦਦ ਦੀ ਲੋੜ ਹੈ, ਤਾਂ ਇਸਨੂੰ ਦੇਖੋ ਕਦਮ ਦਰ ਕਦਮ ਗਾਈਡ.

ਸਰੋਤ: www.habr.com