1. Luottokorttilomake
Viileä luottokorttimuoto sulavilla ja nautinnollisilla mikrovuorovaikutuksilla. Sisältää numeron muotoilun, vahvistuksen ja automaattisen korttityypin tunnistuksen. Se on rakennettu Vue.js:lle ja on myös täysin reagoiva. (Sinä pystyt näkemään .)
Mitä opit:
- Käsittele ja vahvista lomakkeita
- Käsittele tapahtumia (esimerkiksi kun kentät muuttuvat)
- Ymmärrä elementtien näyttäminen ja sijoittaminen sivulla, erityisesti lomakkeen päällä näkyvät luottokorttitiedot
Artikkeli on käännetty EDISON Softwaren tuella, joka Ja .
2. Histogrammi
Histogrammi on kaavio tai kaavio, joka edustaa kategorista dataa suorakulmaisilla palkkeilla, joiden korkeus tai pituus on verrannollinen niiden edustamiin arvoihin.
Niitä voidaan levittää pysty- tai vaakasuoraan. Pystypylväskaaviota kutsutaan joskus viivakaavioksi.
Mitä opit:
- Näytä tiedot jäsennellyllä ja ymmärrettävällä tavalla
- Lisäksi: Opi käyttämään elementtiä
canvasja kuinka piirtää elementtejä sen avulla
löydät maailman väestötiedot. Ne on lajiteltu vuoden mukaan.
3. Twitter-sydänanimaatio
Vuonna 2016 Twitter esitteli tämän hämmästyttävän animaation twiitteihinsä. Vuodesta 2019 lähtien se näyttää edelleen osalta, joten miksi et luo sellaisen itse?
Mitä opit:
- Työskentele CSS-attribuutin kanssa
keyframes - Manipuloi ja animoi HTML-elementtejä
- Yhdistä JavaScript, HTML ja CSS
4. GitHub-arkistot hakutoiminnolla
Tässä ei ole mitään hienoa – GitHub-tietovarastot ovat vain ylistetty luettelo.
Tavoitteena on näyttää arkistot ja antaa käyttäjän suodattaa niitä. Käyttää saadaksesi arkistot jokaiselle käyttäjälle.
GitHub-profiilisivu -
Mitä opit:
- Vastaanota tietoja API:lta
- Näytä tiedot API:sta
- Suodata ja näytä kunkin haun osuvat tiedot
- Valinnainen: Jos olet valmis haasteeseen, käytä , rakennettu GraphQL:llä. .
5. Reddit-tyyliset keskustelut
Chatit ovat suosittu tapa kommunikoida yksinkertaisuutensa ja helppokäyttöisyytensä vuoksi. Mutta mikä todella ruokkii nykyaikaisia chat-huoneita? WebSockets!
Mitä opit:
- Käytä WebSocketsia, reaaliaikaista viestintää ja tietojen päivityksiä
- Työskentele käyttäjien käyttöoikeustasojen kanssa (esimerkiksi chat-kanavan omistajalla on rooli
adminja muut huoneessa -user) - Käsittele ja vahvista lomakkeita - muista, että viestin lähettämisen chat-ikkuna on
input - Luo erilaisia keskusteluja ja liity niihin
- Työskentele henkilökohtaisten viestien kanssa. Käyttäjät voivat keskustella muiden käyttäjien kanssa yksityisesti. Pohjimmiltaan luot WebSocket-yhteyden kahden käyttäjän välille.
6. Raitatyylinen navigointi
Tästä navigoinnista ainutlaatuisen tekee se, että ponnahdusikkuna muuttuu sisällön mukaan. Tässä siirtymässä on eleganssia verrattuna perinteiseen uuden ponnahdusikkunan avaamiseen ja sulkemiseen.
Mitä opit:
- Yhdistä CSS-animaatiot siirtymiin
- Himmennä sisältö ja käytä aktiivista luokkaa kelluvaan elementtiin
Kokeile ensin itse, mutta jos tarvitset apua, katso tästä .
Lähde: will.com
