diff --git a/Projects/Christmas-Lights-App.md b/Projects/Christmas-Lights-App.md new file mode 100644 index 00000000..bdb16002 --- /dev/null +++ b/Projects/Christmas-Lights-App.md @@ -0,0 +1,31 @@ +# ChristmasLights + +The ChristmasLights application relies on your development talents to create +a mesmerizing light display. Your task is to draw seven colored circles +in a row and based on a timer change the intensity of each each circle. When +a circle is brightened it's predecessor returns to its normal intensity. + +This simulates the effect of a string of rippling lights, similar to the ones +displayed during the Christmas Holidays. + +## User Stories + +- [ ] User can press a button to start and stop the display +- [ ] User can change the interval of time controlling the change in intensity + +## Bonus features + +- [ ] User can select the color used to fill each circle. +- [ ] User can specify the intensity value. +- [ ] User can change the size of any circle in the row +- [ ] User can specify the number of rows to be included in the display. From +one to seven rows can be chosen. + +## Useful links and resources + +- [Sample Image](https://previews.123rf.com/images/whiterabbit/whiterabbit1003/whiterabbit100300020/6582600-seven-color-balls-red-orange-yellow-green-cyan-blue-and-magenta-in-a-row-on-a-white-background.jpg) +- [Adafruit LED Matrix](https://cdn-shop.adafruit.com/970x728/1487-02.jpg) + +## Example projects + +[PureCSSChristmasLights](https://codepen.io/tobyj/pen/QjvEex) diff --git a/Projects/String-Art.md b/Projects/String-Art.md new file mode 100644 index 00000000..88ed126b --- /dev/null +++ b/Projects/String-Art.md @@ -0,0 +1,45 @@ +# StringArt + +The purpose of String Art is to provide the developer with practice creating a +simple animated graphic, using geometry in the animation algorithm, and +creating something that's visually pleasant to watch. + +String Art draws a single multicolored line which smoothly moves until one +end touches a side of the enclosing window. At the point it touches a "bounce" +effect is applied to change it's direction. + +A ripple effect is created by only retaining 10-20 images of the line as it +moves. Older images are progressively faded until they disappear. + +Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript. + +## User Stories + +- [ ] Start by drawing a multicolored line at a random position within the +boundary of it's enclosing window. +- [ ] Each 20ms draw a new copy of the line at a new position based on a +trajectory - the incremental distance from the previous line based on the +endpoints. +- [ ] When either endpoint of the line touches the boundary of the enclosing +window change it's direction and randomly alter its angle. +- [ ] Progressively fade the intensity of old lines so that only the most +recent 10-20 lines are visible to create the sense of movement or "ripple". + +## Bonus features + +- [ ] User can specify the length of the line and it's velocity +- [ ] User can specify the multiple lines within the window, all +moving along different trajectories and velocities + +## Useful links and resources + +- [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/) +- [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations) + +## Example projects + +This project is very close, but has a small enclosing window and is monchromatic. +[Daniel Cortes](https://codepen.io/dgca/pen/dpxreO) + +This project is similar, but contains multiple lines and is monochromatic +[Brendan Mcintosh](https://codepen.io/BrendanMcintosh/pen/eBvRpy) diff --git a/Projects/Timezone-Slackbot.md b/Projects/Timezone-Slackbot.md new file mode 100644 index 00000000..b37d4e7c --- /dev/null +++ b/Projects/Timezone-Slackbot.md @@ -0,0 +1,37 @@ +# Timezone Slackbot - TZ + +Team members often need to find out each others timezone as the first step +in finding times for meetings and pair programming sessions. To help with this +the Timezone Slack bot accepts as list of Slack user names and displays the +the timezone for each user in a stacked format as follows: +``` + -12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14 +Fred X +Nisha X +Ming X + . + . + . +``` +Note that this format is provided for descriptive purposes only. When +implemented a more pleasing and user-friendly format may be used. + +## User Stories + +- [ ] User can enter `/tz ...` to display + tabular representation showing each users timezone +- [ ] User can see information displayed using alternate row colors to +increase clarity and readability. + +## Bonus features + +- [ ] User can see the persons timezone displayed next to their name. For +example, 'IST' for India Standard Time. + +## Useful links and resources + +More information about timezones can be found [here](https://www.timeanddate.com/time/current-number-time-zones.html). + +## Example projects + +[Quickly Determine What Country and Time Zone Your Coworkers Are in This Week Using This Tool](https://lifehacker.com/quickly-determine-what-country-and-time-zone-your-cowor-1833011887) diff --git a/Projects/Windchill-App.md b/Projects/Windchill-App.md new file mode 100644 index 00000000..ce0284a4 --- /dev/null +++ b/Projects/Windchill-App.md @@ -0,0 +1,35 @@ +# Windchill + +Windchill combines the actual temperature with the wind speed to calculate +the windchill factor, or what the perceived temperature is versus the actual +temperature. + +## User Stories + +- [ ] User can select the measurement system calculations will be performed +in - Metric or English. +- [ ] User can enter the actual temperature and the wind speed +- [ ] User can press the `Calculate` button to display the wind chill +- [ ] User will receive an error message when `Calculate` is clicked if data +values are not entered. + +## Bonus features + +- [ ] User will receive an error message when `Calculate` is clicked if the +resulting wind chill factor is greater than or equal to the actual temperature. +Since this signifies an internal error in the calculation you may also +satisfy this requirement using an assertion. +- [ ] User will be prompted to enter new data values if `Calculate` is +pressed without first changing at least one of the input fields. +- [ ] User will see an updated wind chill factor whenever new actual +temperature or wind speed values are entered, without being required to +click the `Calculate` button. + +## Useful links and resources + +- [Wikipedia Wind Chill](https://en.wikipedia.org/wiki/Wind_chill) +- [Javascript Assert](https://developer.mozilla.org/en-US/docs/Web/API/console/assert) + +## Example projects + +[Wind Chill Calculator](http://www.jsmadeeasy.com/javascripts/Calculators/Wind%20Chill%20Calculator/index.htm) diff --git a/README.md b/README.md index a2a8f216..1bbebba2 100644 --- a/README.md +++ b/README.md @@ -26,12 +26,15 @@ Each project has the following **features**: | Name | | ------------------------------------------------------------------ | | [Book Finder App](./Projects/Book-Finder-App.md) | +| [Christmas Lights](./Projects/Christmas-Lights-App.md) | | [Kudos Slackbot](./Projects/Kudos-Slackbot.md) | | [Markdown Previewer](./Projects/Markdown-Previewer.md) | | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | | [Notes App](./Projects/Notes-App.md) | | [Pomodoro Clock](./Projects/Pomodoro-Clock.md) | | [Slack Archiver](./Projects/Slack-Archiver.md) | +| [String Art](./Projects/String-Art.md) | +| [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | ## Contribution