diff --git a/Projects/Bin2Dec-App.md b/Projects/Bin2Dec-App.md new file mode 100644 index 00000000..8a9e373d --- /dev/null +++ b/Projects/Bin2Dec-App.md @@ -0,0 +1,38 @@ +# Bin2Dec + +Binary is the number system all digital computers are based on. +Therefore it's important for developers to understand binary, or base 2, +mathematics. The purpose of Bin2Dec is to provide practice and +understanding of how binary calculations. + +Bin2Dec allows the user to enter strings of up to 8 binary digits, 0's +and 1's, in any sequence and then displays its decimal equivalent. + +This challenge requires that the developer implementing it follow these +constraints: + +- Arrays may not be used contain the binary digits entered by the user +- Determining the decimal equivalent of a particular binary digit in the +sequence must be calculated using a single mathematical function, for +example the natural logarithm. It's up to you to figure out which function +to use. + +## User Stories + +- [ ] User can enter up to 8 binary digits in one input field +- [ ] User must be notified if anything other than a 0 or 1 was entered. +- [ ] User views the results in a single output field containing the +decimal (base 10) equivalent of the the binary number that was entered + +## Bonus features + +- [ ] User can enter a variable number of binary digits + +## Useful links and resources + +[Binary number system](https://en.wikipedia.org/wiki/Binary_number) + +## Example projects + +Try not to view this until you've developed your own solution: +- [Binary to decimal conversion program for beginners](https://www.youtube.com/watch?v=YMIALQE26KQ) 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/Projects/Flip-Image-App.md b/Projects/Flip-Image-App.md new file mode 100644 index 00000000..93189e3b --- /dev/null +++ b/Projects/Flip-Image-App.md @@ -0,0 +1,36 @@ +# FlipImage + +It's important for Web Developers to understand the basics of manipulating +images since rich web applications rely on images to add value to the user +interface and user experience (UI/UX). + +FlipImage explores one aspect of image manipulation - image rotation. This +app displays a square pane containing a single image presented in a 2x2 +matrix. Using a set of up, down, left, and right arrows adjacent to each +of the images the user may flip them vertically or horizontally. + +You must only use native HTML, CSS, and Javascript to implement this app. +Image packages and libraries are not allowed. + +## User Stories + +- [ ] User can see a pane containing a single image repeated in a 2x2 matrix. +- [ ] User can flip any one of the images vertically or horizontally using +a set of up, down, left, and right arrows next to the image. + +## Bonus features + +- [ ] User can change the default image by entering the URL of a different +image in an input field. +- [ ] User can display the new image by clicking a 'Display' button next to +the input field +- [ ] User can see an error message if the new images URL is not found + +## Useful links and resources + +- [How to Flip an Image](https://www.w3schools.com/howto/howto_css_flip_image.asp) +- [Create a CSS Flipping Animatin](https://davidwalsh.name/css-flip) + +## Example projects + +[Image Effects by @bennettfeely](https://codepen.io/seyedi/pen/gvqYQv) diff --git a/Projects/True-or-False-App.md b/Projects/True-or-False-App.md new file mode 100644 index 00000000..b20eb710 --- /dev/null +++ b/Projects/True-or-False-App.md @@ -0,0 +1,37 @@ +# TrueOrFalse + +Something every developer needs to clearly understand is the result of +conditional expressions like `x === y`. This is a bit more involved for +Javascript developers who must also understand the concept of _truthiness_. + +TrueOrFalse helps by displaying the result when a conditional operator is +applied to two values. Users can use this to test their knowledge and +explore edge cases. + +The two values and the conditional operator are entered by the user and the +result to be displayed will be TRUE or FALSE. The implemenation must not use +the `eval()` function to generate the result of the conditional. + +## User Stories + +- [ ] User can enter two strings to be compared +- [ ] User can enter a valid Javascript conditional operator to be used +to compare the two strings +- [ ] User can see the result of the conditional as TRUE or FALSE +- [ ] User can see a warning if the input strings or conditional operator +that has been entered is not valid. + +## Bonus features + +- [ ] User can specify the type of each of the two strings so numbers can +be compared to strings, strings to booleans, etc. + +## Useful links and resources + +- [Comparison Operators](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators) +- [Conditional Javascript for Experts](https://hackernoon.com/conditional-javascript-for-experts-d2aa456ef67c) +- [Truthy and Falsy: When all is not equal in Javascript](https://www.sitepoint.com/javascript-truthy-falsy/) + +## Example projects + +N/a diff --git a/README.md b/README.md index 1bbebba2..e7f7bc6c 100644 --- a/README.md +++ b/README.md @@ -25,8 +25,11 @@ Each project has the following **features**: | Name | | ------------------------------------------------------------------ | +| [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) | | [Markdown Table Generator](./Projects/Markdown-Table-Generator.md) | @@ -35,6 +38,8 @@ Each project has the following **features**: | [Slack Archiver](./Projects/Slack-Archiver.md) | | [String Art](./Projects/String-Art.md) | | [Timezone Slackbot](./Projects/Timezone-Slackbot.md) | +| [TrueOrFalse](./Projects/True-or-False-App.md) | +| [Wind Chill](./Projects/Windchill-App.md) | ## Contribution @@ -53,4 +58,7 @@ If the information from this repo was useful to you in any way, make sure you gi Do you have any suggestions on how we could improve this project overall? Let me know! I'd love to hear your feedback! -You can find me on [Twitter](https://twitter.com/florinpop1705) and on my [website](https://florin-pop.com). +### Main Contributors + +- **Florin Pop**: [Twitter](https://twitter.com/florinpop1705) - [website](https://florin-pop.com). +- **Jim Medlock**: [Twitter](https://twitter.com/jd_medlock)