From 64ea8fbf8e49c31a96c7def1780b62a31132ce81 Mon Sep 17 00:00:00 2001 From: jdmedlock Date: Sat, 9 Mar 2019 10:26:10 -0600 Subject: [PATCH] Feature: Add Color Cycle application specification Add Color Cylce application specification Resolves: N/a See also: N/a --- Projects/Color-Cycle-App.md | 40 +++++++++++++++++++++++++++++++++++++ README.md | 1 + 2 files changed, 41 insertions(+) create mode 100644 Projects/Color-Cycle-App.md diff --git a/Projects/Color-Cycle-App.md b/Projects/Color-Cycle-App.md new file mode 100644 index 00000000..a367325b --- /dev/null +++ b/Projects/Color-Cycle-App.md @@ -0,0 +1,40 @@ +# ColorCycle + +The use of color plays a major role in an applications User Interface and +User Experience (UI/UX). ColorCycle seeks to help WebDev's better understand +RBG colors by making small changes to a colored box over time. + +This app draws a box filled with a user specified color and makes small changes +over time also based on user input. In otherwords, from cycles through +changes to the originally specified color. These changes allow the user to +experience the visual impact different changes to the individual parts of +an RGB color specification (e.g. `#000000` color code). + +## User Stories + +- [ ] User can specify a starting fill color as a six hexadecimal standard +CSS color code in three individual components of two digits each - red, +blue, and green. +- [ ] User can specify an increment value for each color component that will +be added to that component every .25 second. +- [ ] User can see the box containing the fill color change every .25 seconds. +- [ ] User can only change the color components and their increments when +the app is stopped. +- [ ] User can start and stop the fill operation using a button whose name +changes to 'Start' when stopped and 'Stop' when started. +- [ ] User will recieve an warning if something other than hexadecimal digits +are entered for the color components. + +## Bonus features + +- [ ] User can change the time interval between color changes. +- [ ] User can specify the color encoding format used from RGB to another +format like HSL. + +## Useful links and resources + +[CSS Color Codes](https://www.quackit.com/css/css_color_codes.cfm) + +## Example projects + +[CSS Color Changing Background](https://codepen.io/SoumyajitChand/pen/wjKVed) diff --git a/README.md b/README.md index 9a7c7638..e7f7bc6c 100644 --- a/README.md +++ b/README.md @@ -28,6 +28,7 @@ Each project has the following **features**: | [Bin2Dec](./Projects/Bin2Dec-App.md) | | [Book Finder App](./Projects/Book-Finder-App.md) | | [Christmas Lights](./Projects/Christmas-Lights-App.md) | +| [Color Cycle](./Projects/Color-Cycle-App.md) | | [Flip Image](./Projects/Flip-image-App.md) | | [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | | [Markdown Previewer](./Projects/Markdown-Previewer.md) |