diff --git a/Projects/1-Beginner/Theme-Switcher.md b/Projects/1-Beginner/Theme-Switcher.md new file mode 100644 index 00000000..181a33f3 --- /dev/null +++ b/Projects/1-Beginner/Theme-Switcher.md @@ -0,0 +1,37 @@ +# Theme Switcher + +**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) diff --git a/README.md b/README.md index 2d209743..e178a584 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 |