Haaste: Dynaamisten Tyylien Soveltaminen DOM-Elementteihin

Tehtävä

Rakennat interaktiivista korttia, jonka ulkoasua käyttäjä voi muuttaa. Käyttäjät voivat vaihtaa kortin taustaväriä, muuttaa sen kokoa ja ottaa käyttöön tai poistaa "korostettu"-tilan lisätyylityksiä varten.

1. Muuta sisäisiä tyylejä: Kun painiketta painetaan:
   • Vaihda <div>-elementin, jonka ID on card, taustaväriksi "lightblue";
   • Aseta kortin leveys arvoon "300px";
   • Lisää korttiin reunus 2px solid #333.
2. Korostusluokan vaihtaminen: Kun painiketta painetaan:
   • Lisää tai poista highlight-luokka <div>-elementistä, jonka ID on card.
3. Tumman teeman luokan lisääminen: Kun painiketta painetaan:
   • Lisää tai poista dark-theme-luokka <body>-elementistä, jolloin sivun teema vaihtuu.

• Käytä style.backgroundColor vaihtaaksesi <div>-elementin, jonka ID on card, taustaväriksi "lightblue";
• Käytä style.width asettaaksesi kortin leveydeksi "300px";
• Käytä style.border lisätäksesi korttiin reunuksen 2px solid #333;
• Käytä classList.toggle() lisätäksesi tai poistaaksesi highlight-luokan <div>-elementistä, jonka ID on card;
• Käytä classList.toggle() lisätäksesi tai poistaaksesi dark-theme-luokan <body>-elementistä, jolloin sivun teema vaihtuu.