Merge branch 'master' of https://github.com/florinpop17/app-ideas
Florin Pop
6 years ago
commit
6abd229485
@ -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)
|
||||||
@ -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)
|
||||||
@ -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)
|
||||||
@ -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
|
||||||
Loading…
Reference in new issue