Feature: Add Dynamic CSS Variables app specification

Add Dynamic CSS Variables app specification

Resolves: N/a
See also: N/a

Projects/Dynamic-CSSVar-app.md

@@ -0,0 +1,49 @@
+# Dynamic CSS Variables
+
+**Tier:** 1-Beginner
+
+CSS variables are a powerful tool that lets the developer associate a symbolic
+name with a value, and then use that name in the stylesheet whereever that
+value is required. The advantage is that when a change to that value is 
+required it only needs to change in the CSS variable definition rather than in
+the many spots it may be used.
+
+What can make this even more powerful is to dynamically change the value of a
+CSS variable at runtime.
+
+The goal of this app is to dynamically change the background color of text boxes
+based to let you gain experience using both CSS variables and dynamically 
+changing them from within the app.
+
+## User Stories
+
+-   [ ] User can see three two boxes to be used to enter a User ID and Password
+along with 'Cancel' and 'Login' buttons underneath them. The default background
+color of the text boxes is white.
+-   [ ] User can enter a user id and password into the text boxes.
+-   [ ] User can click the 'Login' button to validate the user id and password.
+-   [ ] User can see a warning message if one or both of the text boxes contains
+spaces and the background color of the empty text box will change to light
+yellow.
+-   [ ] User can see a warning message if the user id doesn't match 'testuser'
+and the background color of the text box will change to light red.
+-   [ ] User can see a warning message if the password doesn't match 'mypassword'
+and the background color of the text box will change to light red.
+-   [ ] User can click the 'Cancel' button to clear the text boxes and reset
+their background colors to white.
+
+## Bonus features
+
+-   [ ] User can see the color of the text box border change when an error is
+detected
+-   [ ] User can see the size and font of the contents of the text box change
+when an error is detected.
+
+## Useful links and resources
+
+- [Custom properties (--*): CSS variables (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/--*)
+- [CSSStyleDeclaration (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration)
+
+## Example projects
+
+[Dynamic CSS Variables](https://codepen.io/gordawn/pen/oOWBXX)

README.md

@@ -49,6 +49,7 @@ required to complete them.
 | [Color Cycle](./Projects/Color-Cycle-App.md)                           | Cycle a color value through incremental changes           | 1-Beginner |
 | [🌟Countdown Timer](./Projects/Countdown-Timer-App.md)                   | Event Countdown timer                                     | 1-Beginner |
 | [CSV2JSON App](./Projects/CSV2JSON-App.md)                             | CSV to JSON converter                                     | 1-Beginner |
+| [🌟Dynamic CSS Variables](./Projects/Dynamic-CSSVar-app.md)              | Dynamically change CSS variable settings               | 1-Beginner |
 | [Flip Image](./Projects/Flip-Image-App.md)                             | Change the orientation of images across two axes          | 1-Beginner |
 | [🌟GitHub Status](./Projects/GitHub-Status-App.md)                       | Display Current GitHub Status                       | 1-Beginner |
 | [JSON2CSV App](./Projects/JSON2CSV-App.md)                             | JSON to CSV converter                                     | 1-Beginner |