Merge 3d2f3726cd into 08b771c863

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)

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 |