Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.Oppiskele Haaste: Tyylittele Painikkeet | Peruskomponenttien Rakentaminen
Tailwind CSS Verkkokehitykseen

bookHaaste: Tyylittele Painikkeet

Tehtävä

Käytä Tailwind CSS:ää ja luo painike, joka täyttää seuraavat vaatimukset:

  1. Painikkeessa tulee olla sininen tausta (esim. bg-blue-500);
  2. Kun hiiren osoitin on painikkeen päällä, taustavärin tulee muuttua tummemman siniseksi (esim. bg-blue-700);
  3. Kun painike on valittuna (focus), taustavärin tulee olla keltainen (esim. bg-yellow-500);
  4. Kun painiketta painetaan (active), taustavärin tulee muuttua vielä tummemman siniseksi (esim. bg-blue-900);
  5. Kun painike on pois käytöstä (disabled), sen tulee näkyä 50% läpinäkyvyydellä ja osoittimen tulee ilmaista, ettei sitä voi klikata.
index.html

index.html

copy
  • Käytä hover:bg-blue-700 hover-tilassa;
  • Käytä focus:bg-yellow-500 focus-tilassa;
  • Käytä active:bg-blue-900 aktiivisessa tilassa;
  • Käytä opacity-50 cursor-not-allowed poistetussa (disabled) tilassa.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 2

Kysy tekoälyä

expand

Kysy tekoälyä

ChatGPT

Kysy mitä tahansa tai kokeile jotakin ehdotetuista kysymyksistä aloittaaksesi keskustelumme

Suggested prompts:

Can you show me the complete HTML code for the button using Tailwind CSS?

How do I make the button disabled using Tailwind classes?

Can you explain how to combine these Tailwind classes for all the required states?

Awesome!

Completion rate improved to 3.57

bookHaaste: Tyylittele Painikkeet

Pyyhkäise näyttääksesi valikon

Tehtävä

Käytä Tailwind CSS:ää ja luo painike, joka täyttää seuraavat vaatimukset:

  1. Painikkeessa tulee olla sininen tausta (esim. bg-blue-500);
  2. Kun hiiren osoitin on painikkeen päällä, taustavärin tulee muuttua tummemman siniseksi (esim. bg-blue-700);
  3. Kun painike on valittuna (focus), taustavärin tulee olla keltainen (esim. bg-yellow-500);
  4. Kun painiketta painetaan (active), taustavärin tulee muuttua vielä tummemman siniseksi (esim. bg-blue-900);
  5. Kun painike on pois käytöstä (disabled), sen tulee näkyä 50% läpinäkyvyydellä ja osoittimen tulee ilmaista, ettei sitä voi klikata.
index.html

index.html

copy
  • Käytä hover:bg-blue-700 hover-tilassa;
  • Käytä focus:bg-yellow-500 focus-tilassa;
  • Käytä active:bg-blue-900 aktiivisessa tilassa;
  • Käytä opacity-50 cursor-not-allowed poistetussa (disabled) tilassa.
index.html

index.html

copy

Oliko kaikki selvää?

Miten voimme parantaa sitä?

Kiitos palautteestasi!

Osio 3. Luku 2
some-alt