ექვსი ამოცანა Front-End დეველოპერისთვის

1. საკრედიტო ბარათის ფორმა

მაგარი საკრედიტო ბარათის ფორმა გლუვი და სასიამოვნო მიკრო ურთიერთქმედებით. მოიცავს ნომრის ფორმატირებას, გადამოწმებას და ბარათის ტიპის ავტომატურ ამოცნობას. ის აგებულია Vue.js-ზე და ასევე სრულად რეაგირებს. (Შეგიძლია ნახო აქ.)

საკრედიტო ბარათის ფორმა

რას ისწავლით:

• ფორმების დამუშავება და შემოწმება
• მოვლენების დამუშავება (მაგალითად, როდესაც იცვლება ველები)
• გაიგეთ, როგორ უნდა აჩვენოთ და განათავსოთ ელემენტები გვერდზე, განსაკუთრებით საკრედიტო ბარათის ინფორმაცია, რომელიც გამოჩნდება ფორმის თავზე

სტატია ითარგმნა EDISON Software-ის მხარდაჭერით, რომელიც ზრუნავს პროგრამისტების ჯანმრთელობაზე და მათ საუზმეზედა ავითარებს საბაჟო პროგრამულ უზრუნველყოფას.

2. ჰისტოგრამა

ჰისტოგრამა არის დიაგრამა ან დიაგრამა, რომელიც წარმოადგენს კატეგორიულ მონაცემებს მართკუთხა ზოლებით, სიმაღლით ან სიგრძით, პროპორციული მათი წარმოდგენილ მნიშვნელობებთან.

ისინი შეიძლება გამოყენებულ იქნას ვერტიკალურად ან ჰორიზონტალურად. ვერტიკალურ ზოლიან დიაგრამას ზოგჯერ ხაზოვან დიაგრამასაც უწოდებენ.

რას ისწავლით:

• მონაცემების ჩვენება სტრუქტურირებული და გასაგებად
• დამატებით: ისწავლეთ ელემენტის გამოყენება canvas და როგორ დავხატოთ ელემენტები მასთან

აქ თქვენ შეგიძლიათ იპოვოთ მსოფლიო მოსახლეობის მონაცემები. ისინი დალაგებულია წლის მიხედვით.

3. Twitter Heart Animation

ჯერ კიდევ 2016 წელს Twitter-მა წარმოადგინა ეს საოცარი ანიმაცია თავისი ტვიტებისთვის. 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, რეალურ დროში კომუნიკაცია და მონაცემთა განახლებები
• იმუშავეთ მომხმარებლის წვდომის დონეებთან (მაგალითად, ჩეთის არხის მფლობელს აქვს როლი adminდა სხვები ოთახში - user)
• ფორმების დამუშავება და გადამოწმება - გახსოვდეთ, შეტყობინების გაგზავნის ჩატის ფანჯარა არის input
• შექმენით და შეუერთდით სხვადასხვა ჩეთებს
• იმუშავეთ პირად შეტყობინებებთან. მომხმარებლებს შეუძლიათ სხვა მომხმარებლებთან პირადი საუბარი. არსებითად, თქვენ დაამყარებთ WebSocket კავშირს ორ მომხმარებელს შორის.

6. ზოლის სტილის ნავიგაცია

რაც ამ ნავიგაციას უნიკალურს ხდის არის ის, რომ პოპოვერის კონტეინერი გარდაიქმნება კონტენტთან შესაბამისობაში. ამ გადასვლას აქვს ელეგანტურობა ახალი პოპოვერის გახსნისა და დახურვის ტრადიციულ ქცევასთან შედარებით.

რას ისწავლით:

• შეუთავსეთ CSS ანიმაციები გადასვლებთან
• ჩამქრალი შინაარსი და გამოიყენეთ აქტიური კლასი მოძრავ ელემენტზე

სცადეთ ამის გაკეთება ჯერ საკუთარ თავს, მაგრამ თუ დახმარება გჭირდებათ, შეამოწმეთ ეს ნაბიჯ ნაბიჯ სახელმძღვანელო.

წყარო: www.habr.com