ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

1. క్రెడిట్ కార్డ్ ఫారమ్

మృదువైన మరియు ఆనందించే సూక్ష్మ పరస్పర చర్యలతో కూడిన చల్లని క్రెడిట్ కార్డ్ ఆకృతి. నంబర్ ఫార్మాటింగ్, ధృవీకరణ మరియు ఆటోమేటిక్ కార్డ్ రకాన్ని గుర్తించడం వంటివి ఉంటాయి. ఇది Vue.jsలో నిర్మించబడింది మరియు పూర్తిగా ప్రతిస్పందిస్తుంది. (మీరు చూడగలరు ఇక్కడ.)

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

క్రెడిట్ కార్డ్-ఫారమ్

మీరు ఏమి నేర్చుకుంటారు:

  • ఫారమ్‌లను ప్రాసెస్ చేయండి మరియు ధృవీకరించండి
  • ఈవెంట్‌లను నిర్వహించండి (ఉదాహరణకు, ఫీల్డ్‌లు మారినప్పుడు)
  • పేజీలో ఎలిమెంట్లను ఎలా ప్రదర్శించాలో మరియు ఉంచాలో అర్థం చేసుకోండి, ముఖ్యంగా ఫారమ్ పైన కనిపించే క్రెడిట్ కార్డ్ సమాచారం

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

వ్యాసం EDISON సాఫ్ట్‌వేర్ మద్దతుతో అనువదించబడింది, ఇది ప్రోగ్రామర్ల ఆరోగ్యం మరియు వారి అల్పాహారం గురించి జాగ్రత్త తీసుకుంటుందిమరియు అనుకూల సాఫ్ట్‌వేర్‌ను అభివృద్ధి చేస్తుంది.

2. హిస్టోగ్రాం

హిస్టోగ్రాం అనేది చార్ట్ లేదా గ్రాఫ్, ఇది వారు సూచించే విలువలకు అనులోమానుపాతంలో ఎత్తులు లేదా పొడవులతో దీర్ఘచతురస్రాకార బార్‌లతో వర్గీకరణ డేటాను సూచిస్తుంది.

వాటిని నిలువుగా లేదా క్షితిజ సమాంతరంగా వర్తించవచ్చు. నిలువు బార్ చార్ట్‌ను కొన్నిసార్లు లైన్ చార్ట్ అని పిలుస్తారు.

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

మీరు ఏమి నేర్చుకుంటారు:

  • నిర్మాణాత్మకంగా మరియు అర్థమయ్యే రీతిలో డేటాను ప్రదర్శించండి
  • అదనంగా: మూలకాన్ని ఎలా ఉపయోగించాలో తెలుసుకోండి canvas మరియు దానితో అంశాలను ఎలా గీయాలి

ఇది మీరు ప్రపంచ జనాభా డేటాను కనుగొనవచ్చు. అవి సంవత్సరం వారీగా క్రమబద్ధీకరించబడతాయి.

3. ట్విట్టర్ హార్ట్ యానిమేషన్

తిరిగి 2016లో, ట్విట్టర్ తన ట్వీట్ల కోసం ఈ అద్భుతమైన యానిమేషన్‌ను పరిచయం చేసింది. 2019 నాటికి, ఇది ఇప్పటికీ భాగంగా కనిపిస్తుంది, కాబట్టి మీరే ఎందుకు సృష్టించకూడదు?

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు
మీరు ఏమి నేర్చుకుంటారు:

  • CSS లక్షణంతో పని చేయండి keyframes
  • HTML మూలకాలను మార్చండి మరియు యానిమేట్ చేయండి
  • జావాస్క్రిప్ట్, HTML మరియు CSSలను కలపండి

4. శోధన ఫంక్షన్‌తో GitHub రిపోజిటరీలు

ఇక్కడ ఫ్యాన్సీ ఏమీ లేదు-GitHub రిపోజిటరీలు కేవలం గ్లోరిఫైడ్ లిస్ట్ మాత్రమే.
రిపోజిటరీలను ప్రదర్శించడం మరియు వాటిని ఫిల్టర్ చేయడానికి వినియోగదారుని అనుమతించడం లక్ష్యం. వా డు అధికారిక GitHub API ప్రతి వినియోగదారు కోసం రిపోజిటరీలను పొందడానికి.

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

GitHub ప్రొఫైల్ పేజీ - github.com/indreklasn

మీరు ఏమి నేర్చుకుంటారు:

5. రెడ్డిట్-శైలి చాట్‌లు

చాట్‌లు వాటి సరళత మరియు వాడుకలో సౌలభ్యం కారణంగా ఒక ప్రసిద్ధ కమ్యూనికేషన్ మార్గం. అయితే ఆధునిక చాట్ రూమ్‌లకు నిజంగా ఇంధనం ఏది? వెబ్‌సాకెట్‌లు!

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

మీరు ఏమి నేర్చుకుంటారు:

  • WebSockets, నిజ-సమయ కమ్యూనికేషన్ మరియు డేటా అప్‌డేట్‌లను ఉపయోగించండి
  • వినియోగదారు యాక్సెస్ స్థాయిలతో పని చేయండి (ఉదాహరణకు, చాట్ ఛానెల్ యజమాని పాత్ర ఉంటుంది admin, మరియు గదిలో ఇతరులు - user)
  • ఫారమ్‌లను ప్రాసెస్ చేయండి మరియు ధృవీకరించండి - గుర్తుంచుకోండి, సందేశాన్ని పంపడానికి చాట్ విండో input
  • విభిన్న చాట్‌లను సృష్టించండి మరియు చేరండి
  • వ్యక్తిగత సందేశాలతో పని చేయండి. వినియోగదారులు ఇతర వినియోగదారులతో ప్రైవేట్‌గా చాట్ చేయవచ్చు. ముఖ్యంగా, మీరు ఇద్దరు వినియోగదారుల మధ్య WebSocket కనెక్షన్‌ని ఏర్పాటు చేస్తారు.

6. గీత-శైలి నావిగేషన్

ఈ నావిగేషన్ ప్రత్యేకత ఏమిటంటే పాప్‌ఓవర్ కంటైనర్ కంటెంట్‌కు సరిపోయేలా రూపాంతరం చెందుతుంది. కొత్త పాప్‌ఓవర్‌ను తెరవడం మరియు మూసివేయడం యొక్క సాంప్రదాయిక ప్రవర్తనతో పోలిస్తే ఈ పరివర్తనకు చక్కదనం ఉంది.

ఫ్రంట్-ఎండ్ డెవలపర్ కోసం ఆరు టాస్క్‌లు

మీరు ఏమి నేర్చుకుంటారు:

  • పరివర్తనాలతో CSS యానిమేషన్‌లను కలపండి
  • కంటెంట్‌ను మసకబారుస్తుంది మరియు ఫ్లోటెడ్ ఎలిమెంట్‌కు యాక్టివ్ క్లాస్‌ని వర్తింపజేయండి

ముందుగా దీన్ని మీరే చేయడానికి ప్రయత్నించండి, కానీ మీకు సహాయం కావాలంటే, దీన్ని చూడండి స్టెప్ బై స్టెప్ గైడ్.

మూలం: www.habr.com

ఒక వ్యాఖ్యను జోడించండి