ಫ್ರಂಟ್-ಎಂಡ್ ಡೆವಲಪರ್‌ಗಾಗಿ ಆರು ಕಾರ್ಯಗಳು

1. Форма кредитной карты

ಮೃದುವಾದ ಮತ್ತು ಆನಂದಿಸಬಹುದಾದ ಸೂಕ್ಷ್ಮ ಸಂವಾದಗಳೊಂದಿಗೆ ತಂಪಾದ ಕ್ರೆಡಿಟ್ ಕಾರ್ಡ್ ಆಕಾರ. ಸಂಖ್ಯೆ ಫಾರ್ಮ್ಯಾಟಿಂಗ್, ಪರಿಶೀಲನೆ ಮತ್ತು ಸ್ವಯಂಚಾಲಿತ ಕಾರ್ಡ್ ಪ್ರಕಾರ ಪತ್ತೆಯನ್ನು ಒಳಗೊಂಡಿದೆ. ಇದನ್ನು Vue.js ನಲ್ಲಿ ನಿರ್ಮಿಸಲಾಗಿದೆ ಮತ್ತು ಸಂಪೂರ್ಣವಾಗಿ ಸ್ಪಂದಿಸುತ್ತದೆ. (ನೀವು ನೋಡಬಹುದು ಇಲ್ಲಿ.)

ಕ್ರೆಡಿಟ್ ಕಾರ್ಡ್-ಫಾರ್ಮ್

ನೀವು ಏನು ಕಲಿಯುವಿರಿ:

• ಫಾರ್ಮ್‌ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ ಮತ್ತು ಮೌಲ್ಯೀಕರಿಸಿ
• ಈವೆಂಟ್‌ಗಳನ್ನು ನಿರ್ವಹಿಸಿ (ಉದಾಹರಣೆಗೆ, ಕ್ಷೇತ್ರಗಳು ಬದಲಾದಾಗ)
• ಪುಟದಲ್ಲಿ ಅಂಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು ಮತ್ತು ಇರಿಸುವುದು ಹೇಗೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಿ, ವಿಶೇಷವಾಗಿ ಫಾರ್ಮ್‌ನ ಮೇಲ್ಭಾಗದಲ್ಲಿ ಕಂಡುಬರುವ ಕ್ರೆಡಿಟ್ ಕಾರ್ಡ್ ಮಾಹಿತಿ

EDISON ಸಾಫ್ಟ್‌ವೇರ್‌ನ ಬೆಂಬಲದೊಂದಿಗೆ ಲೇಖನವನ್ನು ಅನುವಾದಿಸಲಾಗಿದೆ ಪ್ರೋಗ್ರಾಮರ್‌ಗಳ ಆರೋಗ್ಯ ಮತ್ತು ಅವರ ಉಪಹಾರವನ್ನು ನೋಡಿಕೊಳ್ಳುತ್ತದೆಮತ್ತು ಕಸ್ಟಮ್ ಸಾಫ್ಟ್‌ವೇರ್ ಅನ್ನು ಅಭಿವೃದ್ಧಿಪಡಿಸುತ್ತದೆ.

2. Гистограмма

ಹಿಸ್ಟೋಗ್ರಾಮ್ ಎನ್ನುವುದು ಚಾರ್ಟ್ ಅಥವಾ ಗ್ರಾಫ್ ಆಗಿದ್ದು ಅದು ಪ್ರತಿನಿಧಿಸುವ ಮೌಲ್ಯಗಳಿಗೆ ಅನುಗುಣವಾಗಿ ಎತ್ತರಗಳು ಅಥವಾ ಉದ್ದಗಳೊಂದಿಗೆ ಆಯತಾಕಾರದ ಬಾರ್‌ಗಳೊಂದಿಗೆ ವರ್ಗೀಯ ಡೇಟಾವನ್ನು ಪ್ರತಿನಿಧಿಸುತ್ತದೆ.

ಅವುಗಳನ್ನು ಲಂಬವಾಗಿ ಅಥವಾ ಅಡ್ಡಲಾಗಿ ಅನ್ವಯಿಸಬಹುದು. ಲಂಬ ಬಾರ್ ಚಾರ್ಟ್ ಅನ್ನು ಕೆಲವೊಮ್ಮೆ ಲೈನ್ ಚಾರ್ಟ್ ಎಂದು ಕರೆಯಲಾಗುತ್ತದೆ.

ನೀವು ಏನು ಕಲಿಯುವಿರಿ:

• ರಚನಾತ್ಮಕ ಮತ್ತು ಅರ್ಥವಾಗುವ ರೀತಿಯಲ್ಲಿ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಿ
• ಹೆಚ್ಚುವರಿಯಾಗಿ: ಅಂಶವನ್ನು ಹೇಗೆ ಬಳಸುವುದು ಎಂದು ತಿಳಿಯಿರಿ canvas ಮತ್ತು ಅದರೊಂದಿಗೆ ಅಂಶಗಳನ್ನು ಹೇಗೆ ಸೆಳೆಯುವುದು

ಇದು ನೀವು ವಿಶ್ವ ಜನಸಂಖ್ಯೆಯ ಡೇಟಾವನ್ನು ಕಾಣಬಹುದು. ಅವುಗಳನ್ನು ವರ್ಷದಿಂದ ವಿಂಗಡಿಸಲಾಗಿದೆ.

3. Анимация сердечка Twitter

2016 ರಲ್ಲಿ, Twitter ತನ್ನ ಟ್ವೀಟ್‌ಗಳಿಗಾಗಿ ಈ ಅದ್ಭುತ ಅನಿಮೇಷನ್ ಅನ್ನು ಪರಿಚಯಿಸಿತು. 2019 ರ ಹೊತ್ತಿಗೆ, ಇದು ಇನ್ನೂ ಭಾಗವಾಗಿ ಕಾಣುತ್ತದೆ, ಆದ್ದರಿಂದ ನೀವೇ ಏಕೆ ರಚಿಸಬಾರದು?

ನೀವು ಏನು ಕಲಿಯುವಿರಿ:

• ಸಿಎಸ್ಎಸ್ ಗುಣಲಕ್ಷಣದೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಿ keyframes
• HTML ಅಂಶಗಳನ್ನು ಕುಶಲತೆಯಿಂದ ಮತ್ತು ಅನಿಮೇಟ್ ಮಾಡಿ
• JavaScript, HTML ಮತ್ತು CSS ಅನ್ನು ಸಂಯೋಜಿಸಿ

4. Репозитории GitHub с функцией поиска

ಇಲ್ಲಿ ಅಲಂಕಾರಿಕ ಏನೂ ಇಲ್ಲ - GitHub ರೆಪೊಸಿಟರಿಗಳು ಕೇವಲ ವೈಭವೀಕರಿಸಿದ ಪಟ್ಟಿಯಾಗಿದೆ.
ರೆಪೊಸಿಟರಿಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವುದು ಮತ್ತು ಬಳಕೆದಾರರಿಗೆ ಅವುಗಳನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಲು ಅವಕಾಶ ನೀಡುವುದು ಗುರಿಯಾಗಿದೆ. ಬಳಸಿ ಅಧಿಕೃತ GitHub API ಪ್ರತಿ ಬಳಕೆದಾರರಿಗಾಗಿ ರೆಪೊಸಿಟರಿಗಳನ್ನು ಪಡೆಯಲು.

GitHub ಪ್ರೊಫೈಲ್ ಪುಟ - github.com/indreklasn

ನೀವು ಏನು ಕಲಿಯುವಿರಿ:

• API ನಿಂದ ಡೇಟಾವನ್ನು ಸ್ವೀಕರಿಸಿ
• API ನಿಂದ ಡೇಟಾವನ್ನು ಪ್ರದರ್ಶಿಸಿ
• ಪ್ರತಿ ಹುಡುಕಾಟಕ್ಕೆ ಸಂಬಂಧಿತ ಡೇಟಾವನ್ನು ಫಿಲ್ಟರ್ ಮಾಡಿ ಮತ್ತು ತೋರಿಸಿ
• ಐಚ್ಛಿಕ: ನೀವು ಸವಾಲಿಗೆ ಸಿದ್ಧರಾಗಿದ್ದರೆ, ಬಳಸಿ API v4, GraphQL ಬಳಸಿ ನಿರ್ಮಿಸಲಾಗಿದೆ. ನೀವು GraphQL ಕಲಿಯಲು ಬಯಸಿದರೆ, ನನ್ನ ಹಿಂದಿನ ಲೇಖನಗಳಲ್ಲಿ ಒಂದಕ್ಕೆ ಹೋಗಿ.

5. Чаты в стиле Reddit

ಚಾಟ್‌ಗಳು ಅವುಗಳ ಸರಳತೆ ಮತ್ತು ಬಳಕೆಯ ಸುಲಭತೆಯಿಂದಾಗಿ ಸಂವಹನದ ಜನಪ್ರಿಯ ಮಾರ್ಗವಾಗಿದೆ. ಆದರೆ ಆಧುನಿಕ ಚಾಟ್ ರೂಮ್‌ಗಳಿಗೆ ನಿಜವಾಗಿಯೂ ಯಾವುದು ಇಂಧನವಾಗಿದೆ? ವೆಬ್‌ಸಾಕೆಟ್‌ಗಳು!

ನೀವು ಏನು ಕಲಿಯುವಿರಿ:

• WebSockets, ನೈಜ-ಸಮಯದ ಸಂವಹನ ಮತ್ತು ಡೇಟಾ ನವೀಕರಣಗಳನ್ನು ಬಳಸಿ
• ಬಳಕೆದಾರರ ಪ್ರವೇಶ ಮಟ್ಟಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಿ (ಉದಾಹರಣೆಗೆ, ಚಾಟ್ ಚಾನಲ್‌ನ ಮಾಲೀಕರು ಪಾತ್ರವನ್ನು ಹೊಂದಿರುತ್ತಾರೆ admin, ಮತ್ತು ಕೋಣೆಯಲ್ಲಿ ಇತರರು - user)
• ಫಾರ್ಮ್‌ಗಳನ್ನು ಪ್ರಕ್ರಿಯೆಗೊಳಿಸಿ ಮತ್ತು ಮೌಲ್ಯೀಕರಿಸಿ - ನೆನಪಿಡಿ, ಸಂದೇಶವನ್ನು ಕಳುಹಿಸಲು ಚಾಟ್ ವಿಂಡೋ input
• ವಿಭಿನ್ನ ಚಾಟ್‌ಗಳನ್ನು ರಚಿಸಿ ಮತ್ತು ಸೇರಿಕೊಳ್ಳಿ
• ವೈಯಕ್ತಿಕ ಸಂದೇಶಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡಿ. ಬಳಕೆದಾರರು ಇತರ ಬಳಕೆದಾರರೊಂದಿಗೆ ಖಾಸಗಿಯಾಗಿ ಚಾಟ್ ಮಾಡಬಹುದು. ಮೂಲಭೂತವಾಗಿ, ನೀವು ಎರಡು ಬಳಕೆದಾರರ ನಡುವೆ WebSocket ಸಂಪರ್ಕವನ್ನು ಸ್ಥಾಪಿಸುವಿರಿ.

6. Навигация в стиле Stripe

ಈ ನ್ಯಾವಿಗೇಷನ್ ಅನ್ನು ಅನನ್ಯವಾಗಿಸುವುದು ಏನೆಂದರೆ ಪಾಪೋವರ್ ಕಂಟೇನರ್ ವಿಷಯಕ್ಕೆ ಸರಿಹೊಂದುವಂತೆ ರೂಪಾಂತರಗೊಳ್ಳುತ್ತದೆ. ಹೊಸ ಪಾಪೋವರ್ ಅನ್ನು ತೆರೆಯುವ ಮತ್ತು ಮುಚ್ಚುವ ಸಾಂಪ್ರದಾಯಿಕ ನಡವಳಿಕೆಗೆ ಹೋಲಿಸಿದರೆ ಈ ಪರಿವರ್ತನೆಗೆ ಒಂದು ಸೊಬಗು ಇದೆ.

ನೀವು ಏನು ಕಲಿಯುವಿರಿ:

• ಪರಿವರ್ತನೆಗಳೊಂದಿಗೆ CSS ಅನಿಮೇಷನ್‌ಗಳನ್ನು ಸಂಯೋಜಿಸಿ
• ವಿಷಯವನ್ನು ಮಂದಗೊಳಿಸಿ ಮತ್ತು ತೇಲುವ ಅಂಶಕ್ಕೆ ಸಕ್ರಿಯ ವರ್ಗವನ್ನು ಅನ್ವಯಿಸಿ

Попробуйте сначала сделать это самостоятельно, но если вам нужна помощь, ознакомьтесь с этим ಹಂತ ಹಂತದ ಮಾರ್ಗದರ್ಶಿ.

ಮೂಲ: www.habr.com