From 1aee1f7fafccdaa0a218ed08a9107e7252317006 Mon Sep 17 00:00:00 2001 From: Lorenzo Battistela Date: Sun, 10 Oct 2021 08:35:12 -0300 Subject: [PATCH 1/3] adding theme switcher project --- Projects/1-Beginner/Theme-Switcher.md | 35 +++++++++++++++++++++++++++ 1 file changed, 35 insertions(+) create mode 100644 Projects/1-Beginner/Theme-Switcher.md diff --git a/Projects/1-Beginner/Theme-Switcher.md b/Projects/1-Beginner/Theme-Switcher.md new file mode 100644 index 00000000..87901c10 --- /dev/null +++ b/Projects/1-Beginner/Theme-Switcher.md @@ -0,0 +1,35 @@ +**Tier:** 1-Beginner + +Something really popular in websites and applications these days is the possibility +of changing website theme, usually from light to dark theme. This is more involved for JavaScript, CSS and HTML, +as it lives in web environment. + +Theme Switcher helps the user to change theme when clicking a button, usually +a [Switch Button](https://cdn.dribbble.com/users/3482593/screenshots/6844698/switch.gif). Users can use +this to increment the UI/UX, giving the possibility of choosing the theme for the website. + +When switch button is clicked, the theme changes either to light or dark, where it changes to the one +which is not applied before button is clicked. + +It can be done with javascript, html and css or just html and css. + +## User Stories + +- [] User can switch themes multiple times. +- [] User can see described in the button which theme is active. +- [] User can see the result by seeeing website colors change. + +## Bonus Features + +- [] Switch button performs an animation when clicked. + +## Useful Links and Resources + +- [Article on theme switcher](https://medium.com/@haxzie/dark-and-light-theme-switcher-using-css-variables-and-pure-javascript-zocada-dd0059d72fa2) +- [JavaScript Selectors](https://www.w3schools.com/w3js/w3js_add_class.asp) +- [Event Listener Javascript](https://developer.mozilla.org/pt-BR/docs/Web/API/EventTarget/addEventListener) + +## Example projects + +- [Project 1](https://codepen.io/michellebarker/pen/GzzrGJ) +- [Project 2](https://codepen.io/haxzie/pen/xxKNEGM) From e56a02ec6db8dc615daecbb22e0f5d4336ff4269 Mon Sep 17 00:00:00 2001 From: Lorenzo Battistela Date: Sun, 10 Oct 2021 08:36:36 -0300 Subject: [PATCH 2/3] adding title --- Projects/1-Beginner/Theme-Switcher.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Projects/1-Beginner/Theme-Switcher.md b/Projects/1-Beginner/Theme-Switcher.md index 87901c10..181a33f3 100644 --- a/Projects/1-Beginner/Theme-Switcher.md +++ b/Projects/1-Beginner/Theme-Switcher.md @@ -1,3 +1,5 @@ +# Theme Switcher + **Tier:** 1-Beginner Something really popular in websites and applications these days is the possibility From 3d2f3726cd13a41a88f65573f2cd4987b7cc1b88 Mon Sep 17 00:00:00 2001 From: Lorenzo Battistela Date: Sun, 10 Oct 2021 08:43:04 -0300 Subject: [PATCH 3/3] adding theme switcher to readme --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index f6557617..128fd2cf 100644 --- a/README.md +++ b/README.md @@ -73,6 +73,8 @@ required to complete them. | [Roman to Decimal Converter](./Projects/1-Beginner/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Beginner | | [Slider Design](./Projects/1-Beginner/Slider-Design.md) | Display images using a slider control | 1-Beginner | | [Stopwatch App](./Projects/1-Beginner/Stopwatch-App.md) | Count time spent on activities | 1-Beginner | +| [Theme Switcher](./Projects/1-Beginner/Theme-Switcher.md) | Switch theme (light or dark) of a website | +| 1-Beginner | | [TrueOrFalse](./Projects/1-Beginner/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Beginner | | [Vigenere Cipher](./Projects/1-Beginner/Vigenere-Cipher.md) | Encrypt text using the Vigenere Cypher | 1-Beginner | | [Wind Chill](./Projects/1-Beginner/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Beginner | @@ -85,11 +87,11 @@ required to complete them. | --------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- | | [Bit Masks](./Projects/2-Intermediate/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediate | | [Book Finder App](./Projects/2-Intermediate/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediate | -| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate | +| [Calculator CLI](./Projects/2-Intermediate/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediate | | [Card Memory Game](./Projects/2-Intermediate/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediate | | [Charity Finder App](./Projects/2-Intermediate/Charity-Finder-App.md) | Find a Global Charity to donate to | 2-Intermediate | | [Chrome Theme Extension](./Projects/2-Intermediate/Chrome-Theme-Extension.md) | Build your own chrome theme extention. | 2-Intermediate | -| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate | +| [Currency Converter](./Projects/2-Intermediate/Currency-Converter.md) | Convert one currency to another. | 2-Intermediate | | [Drawing App](./Projects/2-Intermediate/Drawing-App.md) | Create digital artwork on the web | 2-Intermediate | | [Emoji Translator App](./Projects/2-Intermediate/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediate | | [Flashcards App](./Projects/2-Intermediate/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediate |