Gabriel
6 years ago
committed by
GitHub
parent
b47cf8261f
commit
233620809a
@ -0,0 +1,47 @@
|
||||
# Bin2Dec
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
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 to 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 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)
|
||||
- [Binary to Decimal converter using React](https://github.com/email2vimalraj/Bin2Dec)
|
||||
- [Binary to Decimal converter with plain html, js and css](https://grfreire.github.io/Bin2Dec/)
|
||||
- [Binary to Decimal converter using Flutter & Dart](https://github.com/israelss/AppIdeasCollection/tree/master/Tier1/Bin2Dec)
|
||||
- [Live preview built with Flutter for Web](https://bin2dec.web.app/#/)
|
||||
- [Binary to Decimal converter using React](https://github.com/geoffctn/Bin2Dec)
|
||||
- [Matrix-like Binary to Decimal converter using Angular](https://github.com/ZangiefWins/MatrixBin2Dec)
|
||||
- [Live preview on heroku](https://matrix-bin2dec.herokuapp.com/)
|
||||
@ -0,0 +1,26 @@
|
||||
# Border-radius Previewer
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
The border-radius property can have multiple values changed. Preview how the shape looks while changing these values.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a box which has a `border-radius` property applied to it
|
||||
- [ ] User can change the 4 `border-radius` values that are applied to the box (top-left, top-right, bottom-left, bottom-right)
|
||||
- [ ] User can copy the resulting CSS to the clipboard
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can change all 8 possible values of the border-radius in order to create a complex shape
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [CSS3 Borders](https://www.w3schools.com/css/css3_borders.asp)
|
||||
- [Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [9elements Fancy Border Radius](https://9elements.github.io/fancy-border-radius/)
|
||||
- [Border Radius](https://border-radius.com/)
|
||||
- [CSS Gradient Border](https://codepen.io/thebabydino/pen/zbqPVd)
|
||||
@ -0,0 +1,59 @@
|
||||
# CSV2JSON
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
In the [JSON2CSV](./JSON2CSV-App.md) application you translated JSON
|
||||
to a comma separated value (CSV) format. The objective of CSV2JSON is to
|
||||
reverse that process by converting a block of CSV text to JSON.
|
||||
|
||||
In CSV2JSON you'll start by copying the JSON2CSV app you created and then
|
||||
modify it to allow CSV to JSON conversion as well the JSON to CSV conversion
|
||||
that's already present. In additional to providing a useful function, this
|
||||
challenge will also give you practice in modifying existing applications to
|
||||
add new functionality.
|
||||
|
||||
### Constraints ###
|
||||
|
||||
- Read the user stories below carefully. Some of the functionality created
|
||||
for JSON2CSV will need to be modified.
|
||||
- You may not use any libraries or packages designed to perform this type of
|
||||
conversion.
|
||||
- Nested JSON structures are not supported.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can paste CSV syntax into a text box
|
||||
- [ ] User can click a 'Convert to JSON' button to validate the CSV text box and convert it to JSON
|
||||
- [ ] User can see an warning message if the CSV text box is empty or if it doesn't contain valid CSV
|
||||
- [ ] User can see the converted CSV in the JSON text box
|
||||
|
||||
### Stories already implemented in JSON2CSV
|
||||
- [ ] User can paste JSON syntax into a text box
|
||||
- [ ] User can click a 'Convert to CSV' button to validate the JSON text box and convert it to CSV
|
||||
- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON
|
||||
- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can enter the path to the CSV file on the local file system in a text box
|
||||
- [ ] User can click a 'Open CSV' button to load file containing the CSV into the text box
|
||||
- [ ] User can see a warning message if the CSV file is not found
|
||||
- [ ] User can click a 'Save CSV' button to save the CSV file to the file entered in the same text box used for opening the CSV file
|
||||
- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed.
|
||||
- [ ] User can enter the path to the JSON file on the local file system in a text box
|
||||
- [ ] User can click a 'Open JSON' button to load file containing the JSON into the text box
|
||||
- [ ] User can see a warning message if the JSON file is not found
|
||||
- [ ] User can click a 'Save JSON' button to save the JSON file to the file entered in the same text box used for opening the JSON file
|
||||
- [ ] User can see a warning message if the JSON text box is empty or if the save operation failed.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values)
|
||||
- [JavaScript Object Notation (JSON)](https://www.json.org/)
|
||||
- [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb)
|
||||
- [Reading files in Javascript](https://codepen.io/jduprey/details/xbale)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [CSV to JSON Converter](https://codepen.io/JFarrow/pen/CAwyo)
|
||||
- [JSV Converter](https://gpaiva00.github.io/json-csv)
|
||||
@ -0,0 +1,62 @@
|
||||
# Calculator
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Calculators are not only one of the most useful tools available, but they are
|
||||
also a great way to understand UI and event processing in an application. In
|
||||
this problem you will create a calculator that supports basic arithmetic
|
||||
calculations on integers.
|
||||
|
||||
The styling is up to you so use your imagination and get creative! You might
|
||||
also find it worth your time to experiment with the calculator app on your
|
||||
mobile device to better understand basic functionality and edge cases.
|
||||
|
||||
### Constraints
|
||||
|
||||
- You may not use the `eval()` function to execute calculations
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a display showing the current number entered or the
|
||||
result of the last operation.
|
||||
- [ ] User can see an entry pad containing buttons for the digits 0-9,
|
||||
operations - '+', '-', '/', and '=', a 'C' button (for clear), and an 'AC'
|
||||
button (for clear all).
|
||||
- [ ] User can enter numbers as sequences up to 8 digits long by clicking on
|
||||
digits in the entry pad. Entry of any digits more than 8 will be ignored.
|
||||
- [ ] User can click on an operation button to display the result of that
|
||||
operation on:
|
||||
* the result of the preceding operation and the last number entered OR
|
||||
* the last two numbers entered OR
|
||||
* the last number entered
|
||||
- [ ] User can click the 'C' button to clear the last number or the last
|
||||
operation. If the users last entry was an operation the display will be
|
||||
updated to the value that preceded it.
|
||||
- [ ] User can click the 'AC' button to clear all internal work areas and
|
||||
to set the display to 0.
|
||||
- [ ] User can see 'ERR' displayed if any operation would exceed the
|
||||
8 digit maximum.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can click a '+/-' button to change the sign of the number that is
|
||||
currently displayed.
|
||||
- [ ] User can see a decimal point ('.') button on the entry pad to that
|
||||
allows floating point numbers up to 3 places to be entered and operations to
|
||||
be carried out to the maximum number of decimal places entered for any one
|
||||
number.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Calculator (Wikipedia)](https://en.wikipedia.org/wiki/Calculator)
|
||||
- [MDN](https://developer.mozilla.org/en-US/)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [BHMBS - JS-Neumorphic-Calculator](https://barhouum7.github.io/JS-Neumorphic-Calc.github.io/)
|
||||
- [Javascript iOS Style Calculator](https://codepen.io/ssmkhrj/full/jOWBQqO)
|
||||
- [Javascript Calculator](https://codepen.io/giana/pen/GJMBEv)
|
||||
- [React Calculator](https://codepen.io/mjijackson/pen/xOzyGX)
|
||||
- [Javascript-CALC](https://github.com/x0uter/javascript-calc)
|
||||
- [Sample Calculator](https://sevlasnog.github.io/sample-calculator)
|
||||
- [Python Calculator](https://github.com/kana800/Side-Projects/tree/master/1-Beginner/calculator)
|
||||
@ -0,0 +1,34 @@
|
||||
# My calendar
|
||||
|
||||
**Tier:** 3-Advanced
|
||||
|
||||
Build a calendar application to organize you daily life. Add functionality to add events and reminder.
|
||||
Style your own calendar according to your requirement
|
||||
|
||||
- Understanding how calendar application works
|
||||
- Only basic understanding of HTML/CSS and JS is required
|
||||
- Working on more features help you learning advance concepts of JS
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can create event
|
||||
- [ ] User can edit event
|
||||
- [ ] User can delete event
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can drag events between dates
|
||||
- [ ] User can set reminder for a event
|
||||
- [ ] Change theme (light/dark) (play with css), play with css 😄
|
||||
- [ ] Store data locally so that events does not get deleted when server is restarted
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Local Storage](https://blog.logrocket.com/the-complete-guide-to-using-localstorage-in-javascript-apps-ba44edb53a36/)
|
||||
- [MDN](https://developer.mozilla.org/en-US/)
|
||||
- [Design Ideas](https://dribbble.com/tags/calendar)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Simple calendar](https://medium.com/@nitinpatel_20236/challenge-of-building-a-calendar-with-pure-javascript-a86f1303267d)
|
||||
- [eCalendar](https://github.com/muzhaqi16/eCalendar)
|
||||
@ -0,0 +1,67 @@
|
||||
# CauseEffect
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Patterns are integral to software engineering and represent potentially
|
||||
reusable components in program logic. However, patterns aren't used only
|
||||
for program logic, they are exist in other domains such as DevOps, user
|
||||
support, and the user interface.
|
||||
|
||||
A common user interface pattern is to summarize data in one section of a page
|
||||
that consists of some type of list (like text, images, or icons) that describes
|
||||
or categorizes a set of data. When a list item is clicked, the detailed data
|
||||
behind it is displayed in an adjacent pane on the page.
|
||||
|
||||
For example, on a real estate site clicking an address in a list of properties
|
||||
for sale displays the details about the property in another part of the
|
||||
page.
|
||||
|
||||
This challenge requires that the developer implementing it follow these
|
||||
constraints:
|
||||
|
||||
- You are responsible for creating your own test data. Use a hardcoded
|
||||
Javascript object to define your test data (see below).
|
||||
- Use only native HTML/CSS/Javascript in your first version of this app
|
||||
- You may use other packages or libraries when implementing subsequent
|
||||
versions.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a list of person names arranged vertically in a summary
|
||||
pane on the page.
|
||||
- [ ] User can click on a name in the list to update an adjacent pane on the
|
||||
page with that individuals full name, address, telephone number, and
|
||||
birthday.
|
||||
- [ ] User can click on another name in the list to refresh the detail pane
|
||||
with that individuals information.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see the person name in the summary pane highlighted when the
|
||||
cursor is hovered over it.
|
||||
- [ ] User can see the person name in the summary pane highlighted
|
||||
using a selection effect (color, size, etc.) when it is clicked. This is a
|
||||
different effect from the hover effect
|
||||
- [ ] User can see the selection effect removed from a name in the summary
|
||||
list when a new name is clicked.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [DOM Events](https://developer.mozilla.org/en-US/docs/Web/API/Event)
|
||||
- Consider defining your test data in a JavaScript object having a format
|
||||
such as this:
|
||||
|
||||
```
|
||||
const people = [
|
||||
{name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."},
|
||||
.
|
||||
.
|
||||
.
|
||||
{name: "...", street: "...", city: "...", state: "...", country: "...", telephone: "...", birthday: "..."}
|
||||
];
|
||||
```
|
||||
|
||||
## Example projects
|
||||
|
||||
Checkout the interaction between the Navigation items on the left hand side
|
||||
of the page and the main body of the page on the [Javascript MDN site](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
|
||||
@ -0,0 +1,36 @@
|
||||
# Christmas Lights
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
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 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)
|
||||
[Christmas Lights](https://codepen.io/irfanezani_/pen/mdeLpKo)
|
||||
|
||||
|
||||
@ -0,0 +1,41 @@
|
||||
# ColorCycle
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
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 other words, 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 receive 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://qhmit.com/css/css_color_codes.cfm)
|
||||
|
||||
## Example projects
|
||||
|
||||
[CSS Color Changing Background](https://codepen.io/SoumyajitChand/pen/wjKVed)
|
||||
@ -0,0 +1,61 @@
|
||||
# Countdown Timer
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
We all have important events we look forward to in life, birthdays,
|
||||
anniversaries, and holidays to name a few. Wouldn't it be nice to have an app
|
||||
that counts down the months, days, hours, minutes, and seconds to an event?
|
||||
Countdown Timer is just that app!
|
||||
|
||||
The objective of Countdown Timer is to provide a continuously decrementing
|
||||
display of the he months, days, hours, minutes, and seconds to a user entered
|
||||
event.
|
||||
|
||||
### Constraints
|
||||
|
||||
- Use only builtin language functions for your calculations rather than relying
|
||||
on a library or package like [MomentJS](https://momentjs.com/). This assumes,
|
||||
of course, that the language of your choice has adequate date and time
|
||||
manipulation functions built in.
|
||||
- You may not use any code generators such as the
|
||||
[Counting Down To](https://countingdownto.com/) site. You should develop your
|
||||
own original implementation.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see an event input box containing an event name field, an
|
||||
date field, an optional time, and a 'Start' button.
|
||||
- [ ] User can define the event by entering its name, the date it is
|
||||
scheduled to take place, and an optional time of the event. If the time is
|
||||
omitted it is assumed to be at Midnight on the event date in the local time
|
||||
zone.
|
||||
- [ ] User can see a warning message if the event name is blank.
|
||||
- [ ] User can see a warning message if the event date or time are incorrectly
|
||||
entered.
|
||||
- [ ] User can see a warning message if the time until the event data and time
|
||||
that has been entered would overflow the precision of the countdown timer.
|
||||
- [ ] User can click on the 'Start' button to see the countdown timer start
|
||||
displaying the days, hours, minutes, and seconds until the event takes place.
|
||||
- [ ] User can see the elements in the countdown timer automatically
|
||||
decrement. For example, when the remaining seconds count reaches 0 the remaining
|
||||
minutes count will decrement by 1 and the seconds will start to countdown from 59. This progression must take place from seconds all the way up to the remaining days position in countdown display.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can save the event so that it persists across sessions
|
||||
- [ ] User can see an alert when the event is reached
|
||||
- [ ] User can specify more than one event.
|
||||
- [ ] User can see a countdown timers for each event that has been defined.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- Images of analog tube-based countdown timers can be found
|
||||
[here](https://nixieshop.com/)
|
||||
- [`clearInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval)
|
||||
- [`setInterval` MDN](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
|
||||
- [Date MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Simple Clock/Countdown Timer](https://codepen.io/karlo-stekovic/pen/OajKVK)
|
||||
[Countdown Timer built with React](https://www.florin-pop.com/blog/2019/05/countdown-built-with-react/)
|
||||
@ -0,0 +1,29 @@
|
||||
# Dollars To Cents
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Converting dollars to cents would enable you to practice your fundamental knowledge of programming. Loops, if conditions and a simple algorithm will be used.
|
||||
Your task is to let the user input a dollar value (float), assuming that it can also accept extra cents (ex. $2.75), and convert it into an integer (in this case, if $2.75 = 275). After this, convert into coins with the sub-type of dollars: penny, nickel, dime and quarter. Use an algorithm that would divide the dollar value to the four coin types, and output few coins as possible.
|
||||
|
||||
The challenge: Try this without using any frameworks.
|
||||
|
||||
(EX. If you have $0.58, I would have 4 coins: 2 quarters, 0 dimes, 1 nickel and 3 pennies)
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can enter a dollar value
|
||||
- [ ] User can see the total cents from the converted dollar value
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see how many were pennies, nickels, quarters and dimes from the total cents
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Math functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math)
|
||||
- [Loops and iterations](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration)
|
||||
- [Money values in JavaScript](https://timleland.com/money-in-javascript/)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Dollars to cents converter](https://github.com/LimonJuice322/Dollars-to-cents-converter)
|
||||
@ -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 wherever 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)
|
||||
@ -0,0 +1,200 @@
|
||||
# Your First DB App
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Understanding database concepts and how to use them in your applications is
|
||||
knowledge all developers need to acquire. The objective of Your First DB App
|
||||
is to provide a gentle introduction to database concepts and learning one
|
||||
use case for databases in a frontend app.
|
||||
|
||||
So, did you know that modern browsers have a database management system
|
||||
built into them? IndexedDB is built into most modern browsers and provides
|
||||
developers with basic database features, transaction support, and client-side
|
||||
cross-session persistance.
|
||||
|
||||
### Requirements & Constraints
|
||||
|
||||
- The primary use case for a browser based database is to maintain state or
|
||||
status information that needs to persist across sessions, or as a work area
|
||||
for temporary data. For example, data retrieved from a server that must be
|
||||
reformatted or cleansed before it's presented to the user.
|
||||
|
||||
- It is important to keep in mind that since the client-side browser
|
||||
environment cannot be secured you should not maintain any confidential or
|
||||
personal identifying information (PII) in a browser based database.
|
||||
|
||||
- The following Javascript class is provided with the functionality to allow
|
||||
your app to initially populate and clear the database from the browser so you
|
||||
can test the query logic you'll be adding. You'll be required to hook up
|
||||
buttons on the web page you build to the `clearDB` and `loadDB` functions, and
|
||||
to write your own `queryDB` handler to connect to the `Query DB` button. You'll
|
||||
also need to add a `queryAllRows` function to the Customer class.
|
||||
```js
|
||||
class Customer {
|
||||
constructor(dbName) {
|
||||
this.dbName = dbName;
|
||||
if (!window.indexedDB) {
|
||||
window.alert("Your browser doesn't support a stable version of IndexedDB. \
|
||||
Such and such feature will not be available.");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove all rows from the database
|
||||
* @memberof Customer
|
||||
*/
|
||||
removeAllRows = () => {
|
||||
const request = indexedDB.open(this.dbName, 1);
|
||||
|
||||
request.onerror = (event) => {
|
||||
console.log('removeAllRows - Database error: ', event.target.error.code,
|
||||
" - ", event.target.error.message);
|
||||
};
|
||||
|
||||
request.onsuccess = (event) => {
|
||||
console.log('Deleting all customers...');
|
||||
const db = event.target.result;
|
||||
const txn = db.transaction('customers', 'readwrite');
|
||||
txn.onerror = (event) => {
|
||||
console.log('removeAllRows - Txn error: ', event.target.error.code,
|
||||
" - ", event.target.error.message);
|
||||
};
|
||||
txn.oncomplete = (event) => {
|
||||
console.log('All rows removed!');
|
||||
};
|
||||
const objectStore = txn.objectStore('customers');
|
||||
const getAllKeysRequest = objectStore.getAllKeys();
|
||||
getAllKeysRequest.onsuccess = (event) => {
|
||||
getAllKeysRequest.result.forEach(key => {
|
||||
objectStore.delete(key);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Populate the Customer database with an initial set of customer data
|
||||
* @param {[object]} customerData Data to add
|
||||
* @memberof Customer
|
||||
*/
|
||||
initialLoad = (customerData) => {
|
||||
const request = indexedDB.open(this.dbName, 1);
|
||||
|
||||
request.onerror = (event) => {
|
||||
console.log('initialLoad - Database error: ', event.target.error.code,
|
||||
" - ", event.target.error.message);
|
||||
};
|
||||
|
||||
request.onupgradeneeded = (event) => {
|
||||
console.log('Populating customers...');
|
||||
const db = event.target.result;
|
||||
const objectStore = db.createObjectStore('customers', { keyPath: 'userid' });
|
||||
objectStore.onerror = (event) => {
|
||||
console.log('initialLoad - objectStore error: ', event.target.error.code,
|
||||
" - ", event.target.error.message);
|
||||
};
|
||||
|
||||
// Create an index to search customers by name and email
|
||||
objectStore.createIndex('name', 'name', { unique: false });
|
||||
objectStore.createIndex('email', 'email', { unique: true });
|
||||
|
||||
// Populate the database with the initial set of rows
|
||||
customerData.forEach(function(customer) {
|
||||
objectStore.put(customer);
|
||||
});
|
||||
db.close();
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Web page event handlers
|
||||
const DBNAME = 'customer_db';
|
||||
|
||||
/**
|
||||
* Clear all customer data from the database
|
||||
*/
|
||||
const clearDB = () => {
|
||||
console.log('Delete all rows from the Customers database');
|
||||
let customer = new Customer(DBNAME);
|
||||
customer.removeAllRows();
|
||||
}
|
||||
|
||||
/**
|
||||
* Add customer data to the database
|
||||
*/
|
||||
const loadDB = () => {
|
||||
console.log('Load the Customers database');
|
||||
|
||||
// Customers to add to initially populate the database with
|
||||
const customerData = [
|
||||
{ userid: '444', name: 'Bill', email: 'bill@company.com' },
|
||||
{ userid: '555', name: 'Donna', email: 'donna@home.org' }
|
||||
];
|
||||
let customer = new Customer(DBNAME);
|
||||
customer.initialLoad(customerData);
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a web page containing a control panel containing three
|
||||
buttons - 'Load DB', 'Query DB', and 'Clear DB'.
|
||||
- [ ] User can see a notification panel where status messages will be posted.
|
||||
- [ ] User can see a scrollable log panel where execution details describing
|
||||
the apps operation and interface with the Customer instance will be posted.
|
||||
- [ ] User can see a running history of notification panel messages in the log
|
||||
panel.
|
||||
- [ ] User can see a scrollable query results area where retrieved customer
|
||||
data will be displayed.
|
||||
- [ ] User can click the 'Load DB' button to populate the database with data.
|
||||
The 'Load DB' button in your UI should be hooked to the `loadDB` event handler
|
||||
that's provided.
|
||||
- [ ] User can see a message displayed in the notification panel when the
|
||||
data load operation starts and ends.
|
||||
- [ ] User can click the 'Query DB' button to list all customers in the query
|
||||
results area. The 'Query DB' button in your UI should be hooked to a `queryDB`
|
||||
event handler you will add to the program.
|
||||
- [ ] User can see a message in the notification panel when the query starts
|
||||
and ends.
|
||||
- [ ] User can see a message in the query results area if there are no rows
|
||||
to display.
|
||||
- [ ] User can click on the 'Clear DB' button to remove all rows from the
|
||||
database. The 'Clear DB' button in your UI should be hooked to the `clearDB`
|
||||
event handler that's provided.
|
||||
- [ ] User can see a message in the notification panel when the clear
|
||||
operation starts and ends.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see buttons enabled and disabled according to the following
|
||||
table.
|
||||
|
||||
| State | Load DB | Query DB | Clear DB |
|
||||
|---------------------|----------|----------|----------|
|
||||
| Initial App display | enabled | enabled | disabled |
|
||||
| Load DB clicked | disabled | enabled | enabled |
|
||||
| Query DB clicked | disabled | enabled | enabled |
|
||||
| Clear DB clicked | enabled | enabled | disabled |
|
||||
|
||||
- [ ] User can see additional Customer data fields added to those included
|
||||
in the code provided. Developer should add date of last order and total sales
|
||||
for the year.
|
||||
- [ ] Developer should conduct a retrospection on this project:
|
||||
- What use cases can you see for using IndexedDB in your frontend apps?
|
||||
- What advantages and disadvantages can you see over using a file or
|
||||
local storage?
|
||||
- In general, what criteria might you use to determine if IndexedDB is right
|
||||
for your app. (Hint: 100% yes or no is not a valid answer).
|
||||
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [IndexedDB Concepts (MDN)](http://tinyw.in/7TIr)
|
||||
- [Using IndexedDB (MDN)](http://tinyw.in/w6k0)
|
||||
- [IndexedDB API (MDN)](http://tinyw.in/GqnF)
|
||||
- [IndexedDB Browser Support](https://caniuse.com/#feat=indexeddb)
|
||||
|
||||
## Example projects
|
||||
|
||||
- N/a
|
||||
@ -0,0 +1,35 @@
|
||||
# FlipImage
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
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,55 @@
|
||||
# GitHub Status
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Web apps acquire data in many ways. Through user input in web pages, through
|
||||
API's to backend systems, from files and databases, and sometimes by "scraping"
|
||||
websites. The objective of the GitHub Status app is to introduce you to one
|
||||
way to scrape information from another web site.
|
||||
|
||||
GitHub Status uses the NPM Request package to retrieve the current GitHub site
|
||||
status from the [GitHub Status](https://www.githubstatus.com/) web site. The
|
||||
Request package allows websites to be retrieved not to a browser window, but
|
||||
as a JSON document that can be readily accessed by your code.
|
||||
|
||||
Although this application specification relies heavily on Javascript, feel free
|
||||
to develop it using your language of choice!
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see the current status for GitHub Git operations, API Requests,
|
||||
Operational Issues, PRs, Dashboard, & Projects, Operational Notifications,
|
||||
Operational Gists, and Operational GitHub Pages as a list in the main app
|
||||
window.
|
||||
- [ ] User can retrieve the most recent status from the GitHub Status web
|
||||
site by clicking a 'Get Status' button.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see any of the GitHub components that are not in 'Operational'
|
||||
status highlighted by a different color, background animation, or any other
|
||||
technique to make it stand out. Use your imagination!
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Web Scraping (Wikipedia)](https://en.wikipedia.org/wiki/Web_scraping)
|
||||
- [NPM Request](https://www.npmjs.com/package/request)
|
||||
- [Javascript JSON (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON)
|
||||
- [Javascript Object Notation](https://json.org/)
|
||||
- Hint! You can use the following code to display the JSON for the GitHub Status
|
||||
web site page from the command line command `node ghstatus`. You can use this
|
||||
output to determine which JSON element contain the status information you'll
|
||||
need to develop this app.
|
||||
```
|
||||
ghstatus.js
|
||||
|
||||
const request = require('request');
|
||||
request('https://www.githubstatus.com/', { json: true }, (err, res, body) => {
|
||||
console.log(body);
|
||||
});
|
||||
```
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Peter Luczynski's example](https://peterluczynski.github.io/github-status/)
|
||||
- [Diogo Moreira's example](https://diogomoreira.github.io/github-status/)
|
||||
@ -0,0 +1,67 @@
|
||||
# Hello
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
It is a given that applications must provide users with the functionality
|
||||
necessary to accomplish some task or goal. The effectiveness of app functionality
|
||||
is the first determinate of how users perceive the apps they use. However, it
|
||||
is not the only thing that influences user satisfaction.
|
||||
|
||||
The User Interface and User Experience (UI/UX) features developers build into
|
||||
apps have at least an equal amount of influence on users perception of an app.
|
||||
It may be an oversimplification, but UI/UX is largely (but not wholly)
|
||||
concerned with an apps "form". Personalization is an aspect of UX that tailors
|
||||
characteristics and actions to
|
||||
the individual user. Personalizing app functionality in this manner works to
|
||||
make the app easier and more pleasing to use.
|
||||
|
||||
The objective of the Hello app is to leverage geolocation to obtain the users
|
||||
country so it can then generate a customized greeting in the users native
|
||||
language.
|
||||
|
||||
### Constraints
|
||||
|
||||
- Developers should use the [IP-API](http://ip-api.com/docs/api:json) service
|
||||
to obtain the users IP.
|
||||
- Developers should use the
|
||||
[Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/) service to
|
||||
obtain the greeting in the users native language by passing the users IP.
|
||||
- Developers must use a HTML entities decoding to decode the hello message.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a mock login panel containing a user name text input field,
|
||||
a password text input field, and 'Login' and 'Logout' buttons.
|
||||
- [ ] User can enter a mock login name into the User Name field.
|
||||
- [ ] User can enter a mock password into the Password field. Input should
|
||||
be masked so the user see's asterisks (`*`) for each character that is entered
|
||||
rather than the plaintext password.
|
||||
- [ ] User can click the 'Login' button to perform a mock login.
|
||||
- [ ] User can see a message if either or both of the input fields are empty
|
||||
and the border color of the field(s) in error should be changed to red.
|
||||
- [ ] User can see a login acknowledgement message in the format:
|
||||
`<hello-in-native-language> <user-name> you have successfully logged in!`
|
||||
- [ ] User can click the 'Logout' button to clear the text input fields and
|
||||
any previous messages.
|
||||
- [ ] User can see a new message when successfully logged out in the format:
|
||||
`Have a great day <user-name>!`
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see an additional text input field for a language code which
|
||||
will be used to override the IP obtained through geolocation. Hint:
|
||||
this is a great feature for testing your app.
|
||||
- [ ] User can see additional geolocation information after logging on that
|
||||
includes at least the local IP address, city, region, country name, zip code,
|
||||
longitude, latitude, and timezone.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Form Follows Function (Wikipedia)](https://en.wikipedia.org/wiki/Form_follows_function)
|
||||
- [Personalization (Wikipedia)](https://en.wikipedia.org/wiki/Personalization)
|
||||
- [Fourtonfish](https://www.fourtonfish.com/hellosalut/hello/)
|
||||
- [IP-API](http://ip-api.com/docs/api:json)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Fourtonfish Hello World](https://fourtonfish.com/hellosalut/helloworld/)
|
||||
@ -0,0 +1,122 @@
|
||||
# IOT Mailbox Simulator
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
The objective of the IOT Mailbox Simulator is to mimic how an Internet of Things
|
||||
(IOT) enabled physical mailbox might be used to notify you when "snail" mail
|
||||
has arrived. In doing so it will provide you with experience using callbacks
|
||||
to communicate state between different components of an app that are dependent
|
||||
on one another.
|
||||
|
||||
### Requirements & Constraints
|
||||
|
||||
- Even though this app is specified using Javascript concepts and terminology
|
||||
you are free to implement it in the language of your choice.
|
||||
|
||||
- The following Javascript class is provided to start and stop the monitoring
|
||||
process, and to signal the app web page with the state of the mailbox door
|
||||
(open or closed) at preset intervals. Keep in mind that the interval you specify
|
||||
shouldn't exceed the time it normally takes to open or close the door or you
|
||||
might miss a delivery!
|
||||
```
|
||||
/**
|
||||
* Monitor the light levels inside an IOT enabled snail mailbox to detect
|
||||
* when the mailbox door has been opened and closed.
|
||||
* @class IOTMailbox
|
||||
*/
|
||||
class IOTMailbox {
|
||||
/**
|
||||
* Creates an instance of IOTMailbox.
|
||||
* @param {number} [signalInterval=500] Timer interval for checking mailbox status.
|
||||
* @param {function} signalCallback Function to invoke when the timer interval expires.
|
||||
* @memberof IOTMailbox
|
||||
*/
|
||||
constructor(signalInterval = 500, signalCallback) {
|
||||
this.signalInterval = signalInterval;
|
||||
this.signalCallback = signalCallback;
|
||||
this.intervalID = null;
|
||||
this.lastLightLevel = 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Start monitoring of the mailbox and invoke the caller specified callback
|
||||
* function when the interval expires.
|
||||
* @memberof IOTMailbox
|
||||
*/
|
||||
startMonitoring = () => {
|
||||
console.log(`Starting monitoring of mailbox...`);
|
||||
this.intervalID = window.setInterval(this.signalStateChange, this.signalInterval);
|
||||
}
|
||||
|
||||
/**
|
||||
* Stop monitoring the mailbox status
|
||||
* @memberof IOTMailbox
|
||||
*/
|
||||
stopMonitoring = () => {
|
||||
if (this.intervalID === null) return;
|
||||
window.clearInterval(this.intervalID);
|
||||
this.intervalID = null;
|
||||
console.log(`Mailbox monitoring stopped...`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Pass the current light level inside the mailbox to the users callback
|
||||
* function. The positive light levels indicate the door is open while
|
||||
* negative levels indicate it is closed. Depending on the sampling interval
|
||||
* the mailbox door could be in any postion from fully closed to fully open.
|
||||
* This means the light level varies from interval-to-interval.
|
||||
* @memberof IOTMailbox
|
||||
*/
|
||||
signalStateChange = () => {
|
||||
const lightLevel = this.lastLightLevel >= 0
|
||||
? Math.random().toFixed(2) * -1
|
||||
: Math.random().toFixed(2);
|
||||
console.log(`Mailbox state changed - lightLevel: ${lightLevel}`);
|
||||
this.signalCallback(this.lightLevel);
|
||||
this.lastLightLevel = lightLevel;
|
||||
}
|
||||
};
|
||||
```
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a web page containing a control panel containing three
|
||||
buttons - 'Start Monitoring', 'Stop Monitoring', and 'Reset'.
|
||||
- [ ] User can see a notification panel where the mailbox status will be posted.
|
||||
- [ ] User can see a scrollable log panel where execution details describing
|
||||
the apps operation and interface with the IOTMailbox instance will be posted.
|
||||
- [ ] User can click the 'Start Monitoring' button to begin receiving state
|
||||
notifications from the mailbox.
|
||||
- [ ] User can see a message added to the log panel when monitoring starts.
|
||||
- [ ] User can see a message added to the log panel for light level passed
|
||||
through the callback function. This should include the numerical light level
|
||||
and whether the door is open or closed.
|
||||
- [ ] User can see a message added to the notification panel when the door has
|
||||
been opened.
|
||||
- [ ] User can click the 'Stop Monitoring' button to stop receiving state
|
||||
notifications from the mailbox.
|
||||
- [ ] User can see a message added to the log panel when monitoring stops.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see the 'Start Monitoring' button disabled until monitoring is
|
||||
stopped.
|
||||
- [ ] User can see the 'Stop Monitoring' button disabled until monitoring is
|
||||
started.
|
||||
- [ ] User can see an field in the control panel allowing the length of the
|
||||
monitoring interval to be specified.
|
||||
- [ ] User can see a message added to the notification panel if the door is
|
||||
left open.
|
||||
- [ ] User can hear an audible alert when the door is opened.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Snail Mail (Wikipedia)](https://en.wikipedia.org/wiki/Snail_mail)
|
||||
- [Internet of Things (Wikipedia)](https://en.wikipedia.org/wiki/Internet_of_things)
|
||||
- [IOT Mailbox: An Introduction](https://iotexpert.com/2018/08/13/iot-mailbox-an-introduction/)
|
||||
- [What the Heck is a Callback?](https://codeburst.io/javascript-what-the-heck-is-a-callback-aba4da2deced)
|
||||
- [window.setInterval (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
|
||||
|
||||
## Example projects
|
||||
|
||||
N/a
|
||||
@ -0,0 +1,56 @@
|
||||
# JSON2CSV
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Developers and end users are both experts in their own domains and as such,
|
||||
each speaks using a domain-specific language and terminology. This also extends
|
||||
to the tools used to manipulate data. Developers have found JSON to be a
|
||||
universally accepted method for transferring data between applications. End
|
||||
Users, on the other hand, rely on spreadsheets to organize and analyze data.
|
||||
|
||||
The objective of JSON2CSV is to help bridge the gap between JSON and CSV by
|
||||
converting JSON to CSV to make it easier to review data in a spreadsheet. It
|
||||
allows the user to paste JSON into a text box to generate its equivalent CSV.
|
||||
|
||||
### Constraints ###
|
||||
|
||||
- You may not use any libraries or packages designed to perform this type of
|
||||
conversion.
|
||||
- If you choose to implement this in JavaScript don't use complicated looping
|
||||
in your first implementation. Instead, use `Object.keys()` and `Object.values`
|
||||
to generate CSV for the header and data rows.
|
||||
- Nested JSON structures are not supported.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can paste JSON syntax into a text box
|
||||
- [ ] User can click a 'Convert' button to validate the JSON text box and convert it to CSV
|
||||
- [ ] User can see the converted CSV in another text box
|
||||
- [ ] User can see an warning message if the JSON text box is empty or if it doesn't contain valid JSON
|
||||
- [ ] User can click a 'Clear' button to clear the contents of both the JSON and CSV text boxes.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can enter the path to the JSON file on the local file system in a text box
|
||||
- [ ] User can click a 'Open' button to load file containing the JSON into the text box
|
||||
- [ ] User can see a warning message if the JSON file is not found
|
||||
- [ ] User can enter the path the CSV file is to be saved to in a text box
|
||||
- [ ] User can click a 'Save' button to save the CSV file to the local file system
|
||||
- [ ] User can see a warning message if the CSV text box is empty or if the save operation failed.
|
||||
- [ ] User can convert CSV data to JSON. See [CSV2JSON](./CSV2JSON-App.md)
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Comma Separated Values (CSV)](https://en.wikipedia.org/wiki/Comma-separated_values)
|
||||
- [JavaScript Object Notation (JSON)](https://www.json.org/)
|
||||
- [MDN Javascript Object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object)
|
||||
- [Saving a file with pure JS](https://codepen.io/davidelrizzo/pen/cxsGb)
|
||||
- [Reading files in Javascript](https://codepen.io/jduprey/details/xbale)
|
||||
|
||||
## Example projects
|
||||
|
||||
Try to complete your JSON2CSV implementation before reviewing the example
|
||||
project(s).
|
||||
|
||||
- [JSON to CSV Converter](https://codepen.io/JFarrow/pen/umjGF)
|
||||
- [JSV Converter](https://gpaiva00.github.io/json-csv)
|
||||
@ -0,0 +1,26 @@
|
||||
# Javascript Validation With Regex
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
In this challenge, you'd create a javascript validation script to validate the inputs entered by a user using RegEx.
|
||||
|
||||
You could always refer to the [Regular Expression Library](http://regexlib.com/(X(1)A(GijS7qxVy-6Gyc4cweUyFoK4ZvRn2WnlOe8SSKuq9sT7ps-2nbiTmZZMTCn_rFk4-mNoGnYL-DPU8pJhmNNOtkP-syqWE4WO_1aVt4bPa5nTsQPQe6VRAALnm6QW3YIWbYkVS78JFbZN39vmMI1UYiWlHXKwNMB99WjsZOn0qc_8dcN0unp2KMOBw0P__3OH0))/CheatSheet.aspx?AspxAutoDetectCookieSupport=1) for support
|
||||
|
||||
For this project, there'd be three required inputs for validation:
|
||||
- The first would require the user to enter five (5) capital letters, six (6) symbols and two hyphens (-) in any order. This could be used as a password.
|
||||
- The second which could be used as username would require the user to enter letters without spaces
|
||||
- The third which could be used as email address would require the user to enter only email addresses on gmail (...@gmail.com).
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User should be notified of any invalid inputs by error messages displayed on the form.
|
||||
- [ ] The submit button on the form would never be executed until all entries are validated.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Javascript form validation using regular expressions](http://form.guide/snippets/javascript-form-validation-using-regular-expression.html)
|
||||
- [JavaScript Form Validation Using Regular Expressions](https://study.com/academy/lesson/javascript-form-validation-using-regular-expressions-definition-example.html)
|
||||
|
||||
## Example project
|
||||
|
||||
- [Native HTML5 validation with CSS & Regex](https://codepen.io/helgesverre/pen/vWRevp)
|
||||
@ -0,0 +1,40 @@
|
||||
# Key Value
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Have you ever thought about what it means that the computer you are using is
|
||||
a digital device? Among other things it means that everything its capable of
|
||||
is achieved by translating a digital signal into a sequence of binary digits - 0's and 1's. These binary digits form codes used to represent data.
|
||||
|
||||
The keyboard you used to retrieve this project description is a great example
|
||||
of this. Pressing a key generates a digital signal that is translated by the
|
||||
computer into a code representing the key that was pressed.
|
||||
|
||||
The goal of the Key Value app is to display the encoded value on screen each
|
||||
time a key is pressed on the keyboard.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a display panel containing a text area where the key value
|
||||
and key code will be displayed along with display areas for four other
|
||||
indicators related to the keys on the keyboard - alt key, control key,
|
||||
meta key, and shift key.
|
||||
- [ ] User can see the key code and key value displayed in the display panel
|
||||
corresponding to the key when it is pressed.
|
||||
- [ ] User can see the appropriate indicator change from 'False' to 'True'
|
||||
when the alt, control, meta, or shift key is pressed.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can hear a unique tone played when a key is pressed.
|
||||
- [ ] User can see the background color of the key code and value change when
|
||||
a key is pressed.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Digital Electronics](https://en.wikipedia.org/wiki/Digital_electronics)
|
||||
- [Keyboard Event](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Javascript Keyevent Test Script](https://unixpapa.com/js/testkey.html)
|
||||
@ -0,0 +1,24 @@
|
||||
# Lorem Ipsum Generator
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
|
||||
This app should generate passages of lorem ipsum text suitable for use as placeholder copy in web pages, graphics, and more.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can type into an input field the number of paragraphs of lorem ipsum to be generated
|
||||
- [ ] Use can see the generated paragraphs of lorem ipsum and is able to copy them
|
||||
|
||||
## Trello Board
|
||||
|
||||
You can track your progress by cloning this [Trello Board](https://trello.com/b/T0xA0Glj/lorem-ipsum-generator)
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [lorem-ipsum npm package](https://www.npmjs.com/package/lorem-ipsum)
|
||||
- [lorem-ipsum CDN](https://www.jsdelivr.com/package/npm/lorem-ipsum)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Lipsum.com](https://www.lipsum.com/)
|
||||
@ -0,0 +1,29 @@
|
||||
# Notes App
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Create and store your notes for later purpose!
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can create a note
|
||||
- [ ] User can edit a note
|
||||
- [ ] User can delete a note
|
||||
- [ ] When closing the browser window the notes will be stored and when the User returns, the data will be retrieved
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can create and edit a note in Markdown format. On save it will convert Markdown to HTML
|
||||
- [ ] User can see the date when he created the note
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
|
||||
- [Markdown Guide](https://www.markdownguide.org/basic-syntax/)
|
||||
- [Marked - A markdown parser](https://github.com/markedjs/marked)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Markdown Notes built with Angular on Codepen](https://codepen.io/nickmoreton/full/gbyygq)
|
||||
- [Markdown Notes built with React](https://github.com/email2vimalraj/notes-app)
|
||||
- [Markdown Notes built with Angular 7 and bootstrap 4](https://github.com/omdnaik/angular-ui)
|
||||
@ -0,0 +1,63 @@
|
||||
# Pearson Regression
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
There are few, if any, applications that don't require some form of
|
||||
cross-disciplinary knowledge in order to implement useful functionality for
|
||||
a user. In the case of an app for the medical profession it might be domain
|
||||
expertise in biology or pharmacology. A paint manufacturer or a crop science
|
||||
business might rely on apps with an intimate knowledge of chemistry. And, a
|
||||
payroll application will certainly incorporate HR and accounting concepts.
|
||||
|
||||
Regardless of the industry segment an app is developed for one cross domain
|
||||
expertise in common with them all is mathematics. As an application developer
|
||||
you don't have to be a mathematician, but it's useful to have an understanding
|
||||
of how to apply mathematical concepts to the problems you are trying to solve.
|
||||
|
||||
The objective of this app is to apply the Pearson Correlation Coefficient
|
||||
against two sets of data to provide the user with the degree to which they
|
||||
may or may not be related. For example, given a set of temperatures and another
|
||||
set of car prices this would let the user test whether or not they are related
|
||||
(spoiler alert: they are unrelated!).
|
||||
|
||||
### Constraints
|
||||
|
||||
- The Developer must program all calculations without relying on a package.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see an input panel with two input fields allowing entry of `x`
|
||||
and `y` coordinates, and 'Add' and 'Calculate' buttons.
|
||||
- [ ] User can enter numbers into these boxes where `x` and `y` are observations
|
||||
from the two data sets.
|
||||
- [ ] User can click the 'Add' button to add the `x` and `y` to a tabular
|
||||
output area listing the pairs of observations.
|
||||
- [ ] User can see and error message if either of the two input fields are
|
||||
empty or do not contain valid real numbers.
|
||||
- [ ] User can see the 'Calculate' button is disabled until errors have been
|
||||
corrected.
|
||||
- [ ] User can click the 'Calculate' button to perform the regression analysis
|
||||
and to display its results.
|
||||
- [ ] User can see results of the calculation which include:
|
||||
- Arithmetic means for both the `x` and `y` observations
|
||||
- Standard deviations for both the `x` and `y` observations
|
||||
- Pearson correlation coefficient with one of the following interpretations:
|
||||
- No correlation
|
||||
- Neutral
|
||||
- Some correlation
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see a scatter plot of the observations
|
||||
- [ ] User can upload observations from a file on the local machine.
|
||||
- [ ] User can see a regression line overlaying the scatter plot
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Pearson Correlation Coefficient (Wikipedia)](https://en.wikipedia.org/wiki/Pearson_correlation_coefficient)
|
||||
- [Linear Regression](https://en.wikipedia.org/wiki/Linear_regression)
|
||||
- [Pearson's Correlation Coefficient](http://www.code-in-javascript.com/pearsons-correlation-coefficient-in-javascript/)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Correlation](https://memory.psych.mun.ca/tech/js/correlation.shtml)
|
||||
@ -0,0 +1,28 @@
|
||||
# Pomodoro Clock
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. The technique uses a timer to break down work into intervals, traditionally 25 minutes in length, separated by short breaks - 5 minutes.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a timer for 25 minutes - the **working** session
|
||||
- [ ] After the **working** session is over, the User can see a timer for 5 minutes - the **break** session
|
||||
- [ ] User can _start_ / _pause_, _stop_ and _reset_ the timers
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can hear a sound playing when the timer hits `00:00` - denoting that the session has ended
|
||||
- [ ] User can change / customize the minutes in both sessions before starting
|
||||
- [ ] User can set a **long break** session of 10 minutes. This will be activated every 4th **break** session
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- More about the [Pomodoro Technique](https://en.m.wikipedia.org/wiki/Pomodoro_Technique)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Joe Weaver's example](https://codepen.io/JoeWeaver/pen/bLbbxK)
|
||||
- [FreeCodeCamp Pomodoro Clock example](https://codepen.io/freeCodeCamp/full/XpKrrW)
|
||||
- [A desktop pomodoro app for menubar/tray.](https://github.com/amitmerchant1990/pomolectron)
|
||||
- [Sheri Richardson's example](https://srd-pomodoro-timer.netlify.com/)
|
||||
@ -0,0 +1,38 @@
|
||||
# Product Landing Page
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Whenever you have a product (or a service) that you want to sell, you'll want to have a website that will promote that product in the best way possible. You need to make sure that the information on the page is relevant, simple to understand and highlights all the awesome features of the product in order to higher the conversion rate.
|
||||
|
||||
Conversion rate - the % of the visitors which purchase the product or service.
|
||||
|
||||
When you have completed this app and the bonus features try leveling up your
|
||||
skills by expanding it to incorporate the features specified in the
|
||||
[Simple Online Store](../2-Intermediate/Simple-Online-Store.md).
|
||||
|
||||
## User Stories
|
||||
|
||||
These will cover the visual part of the project.
|
||||
|
||||
- [ ] User can see on the page one or more images with the product
|
||||
- [ ] User can see a list with all the features of the product
|
||||
- [ ] User can see how this product will improve the buyers life. Why should he buy it?
|
||||
- [ ] User can see a contact section (a text with the email)
|
||||
|
||||
## Bonus features
|
||||
|
||||
These will cover the functional part of the project.
|
||||
|
||||
- [ ] User can see a FAQ section
|
||||
- [ ] User can contact the staff members via a contact form
|
||||
- [ ] User can sign up to receive notifications about the product
|
||||
- [ ] User can purchase the product
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
There are plenty of Product Landing Pages out there. You can use [Dribbble](www.dribbble.com) and [Behance](www.behance.net) for inspiration.
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Netlify](https://www.netlify.com/)
|
||||
- [Product Landing Page - Codepen](https://codepen.io/l4ci/pen/LoGjk)
|
||||
@ -0,0 +1,33 @@
|
||||
# Quiz App
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Practice and test your knowledge by answering questions in a quiz application.
|
||||
|
||||
As a developer you can create a quiz application for testing coding skills of other developers. (HTML, CSS, JavaScript, Python, PHP, etc...)
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can start the quiz by pressing a `button`
|
||||
- [ ] User can see a question with 4 possible answers
|
||||
- [ ] After selecting an answer, display the next question to the User. Do this until the quiz is finished
|
||||
- [ ] At the end, the User can see the following statistics
|
||||
- Time it took to finish the quiz
|
||||
- How many correct answers did he get
|
||||
- A message showing if he `passed` or `failed` the quiz
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can share the result of a quiz on social media
|
||||
- [ ] Add multiple quizzes to the application. User can select which one to take
|
||||
- [ ] User can create an account and have all the scores saved in his dashboard. User can complete a quiz multiple times
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Open Trivia Database](https://opentdb.com/api_config.php)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Quiz app built with React](http://tranquil-beyond-43849.herokuapp.com/) (wait for it to load as it is hosted on Heroku)
|
||||
- [Quiz app interface](https://codepen.io/FlorinPop17/full/qqYNgW)
|
||||
- [Quiz Progressive Web App built with React](https://github.com/SafdarJamal/quiz-app)
|
||||
@ -0,0 +1,24 @@
|
||||
# Random Meal Generator
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Generate a random meal from an API.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can click a button that will get a random meal from an external API (see below)
|
||||
- [ ] The app should display: **Recipe name**, **Ingredients**, **Instructions** and a **Picture** of the meal
|
||||
- [ ] By clicking the button again, another meal will be generated
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] The app should display a **YouTube Video**
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [TheMealDB API](https://www.themealdb.com)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Random Meal Generator by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/WNeggor)
|
||||
- [Random Meal Generator by ShinSpiegel on github](https://github.com/shinspiegel/random-meal-generator)
|
||||
@ -0,0 +1,28 @@
|
||||
# Random-Number-Generator
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Generate a random number between a range of defined minimun and maximun.
|
||||
|
||||
The generator allows the user to use the random property for purposes like games that contains some kind of lottary or for statistics.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can define maximun and minimun values for the random number.
|
||||
- [ ] User can press the generate button to generate random number.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can add option for negative values
|
||||
- [ ] User can add option for decimal numbers
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
[What's this fuss about true randomness?](https://www.random.org/)
|
||||
|
||||
## Example projects
|
||||
|
||||
Try not to view this until you've developed your own solution:
|
||||
|
||||
- [Example](https://alonjoshua.github.io/random-number-generator/)
|
||||
- [Project](https://github.com/AlonJoshua/random-number-generator/)
|
||||
@ -0,0 +1,51 @@
|
||||
# Recipe
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
You might not have realized this, but recipe's are nothing more than culinary
|
||||
algorithms. Like programs, recipes are a series of imperative steps which,
|
||||
if followed correctly, result in a tasty dish.
|
||||
|
||||
The objective of the Recipe app is to help the user manage recipes in a way
|
||||
that will make them easy to follow.
|
||||
|
||||
### Constraints
|
||||
|
||||
- For the initial version of this app the recipe data may be encoded as a
|
||||
JSON file. After implementing the initial version of this app you may
|
||||
expand on this to maintain recipes in a file or database.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a list of recipe titles
|
||||
- [ ] User can click a recipe title to display a recipe card containing the
|
||||
recipe title, meal type (breakfast, lunch, supper, or snack), number of people
|
||||
it serves, its difficulty level (beginner, intermediate, advanced), the list
|
||||
of ingredients (including their amounts), and the preparation steps.
|
||||
- [ ] User click a new recipe title to replace the current card with a new
|
||||
recipe.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see a photo showing what the item looks like after it has
|
||||
been prepared.
|
||||
- [ ] User can search for a recipe not in the list of recipe titles by
|
||||
entering the meal name into a search box and clicking a 'Search' button. Any
|
||||
open source recipe API may be used as the source for recipes (see The MealDB
|
||||
below).
|
||||
- [ ] User can see a list of recipes matching the search terms
|
||||
- [ ] User can click the name of the recipe to display its recipe card.
|
||||
- [ ] User can see a warning message if no matching recipe was found.
|
||||
- [ ] User can click a 'Save' button on the cards for recipes located through
|
||||
the API to save a copy to this apps recipe file or database.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Using Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
|
||||
- [Axios](https://www.npmjs.com/package/axios)
|
||||
- [The MealDB API](https://www.themealdb.com/api.php)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Recipe Box - a Free Code Camp Project (FCC)](https://codepen.io/eddyerburgh/pen/xVeJvB)
|
||||
- [React Recipe Box](https://codepen.io/inkblotty/pen/oxWRme)
|
||||
@ -0,0 +1,38 @@
|
||||
# Roman to Decimal numbers Converter
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
The numeric system represented by Roman numerals originated in ancient Rome and remained the
|
||||
usual way of writing numbers throughout Europe well into the Late Middle Ages.
|
||||
Roman numerals, as used today, employ seven symbols, each with a fixed integer value.
|
||||
|
||||
See the below table the _Symbol - Value_ pairs:
|
||||
|
||||
- I - 1
|
||||
- V - 5
|
||||
- X - 10
|
||||
- L - 50
|
||||
- C - 100
|
||||
- D - 500
|
||||
- M - 1000
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User should be able to enter one Roman number in an input field
|
||||
- [ ] User could see the results in a single output field containing the decimal (base 10) equivalent of the roman number that was entered by pressing a button
|
||||
- [ ] If a wrong symbol is entered, the User should see an error
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User could see the conversion to be made automatically as I type
|
||||
- [ ] User should be able to convert from decimal to Roman (vice-versa)
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [An explanation of Roman Numbers](https://en.wikipedia.org/wiki/Roman_numerals)
|
||||
|
||||
## Example projects
|
||||
|
||||
Try not to view this until you've developed your own solution:
|
||||
|
||||
- [Roman Number Converter](https://www.calculatorsoup.com/calculators/conversions/roman-numeral-converter.php)
|
||||
@ -0,0 +1,25 @@
|
||||
# Slider Design
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Display multiple images using a slider / carousel.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a slider displaying multiple images every `x` seconds
|
||||
- [ ] User can click on `previous` and `next` buttons and the slider will display the corresponding image
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] Add animation to the slides
|
||||
- [ ] Add text over the slides
|
||||
- [ ] Create a 3D effect
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Unsplash](https://unsplash.com/) for free images
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Full Page Slider](https://codepen.io/FlorinPop17/full/LvOroe)
|
||||
- [WOWSlider](http://wowslider.com/3d-slider-jquery-fresh-cube-demo.html)
|
||||
@ -0,0 +1,27 @@
|
||||
# Stopwatch App
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
A stopwatch helps you track the time you spent on activities.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can `start` a clock
|
||||
- [ ] User can `stop` the clock
|
||||
- [ ] When the clock is `stopped` the user can click `start` again and the clock will continue counting up
|
||||
- [ ] User can `restart` the clock
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can create `laps` - these will be displayed on the screen
|
||||
- [ ] User can clear all the laps
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [setInterval](https://www.w3schools.com/jsref/met_win_setinterval.asp)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Stopwatch by Hilo](https://codepen.io/hilotacker/pen/ONZWoX)
|
||||
- [Stopwatch by Billy Brown](https://codepen.io/_Billy_Brown/pen/dbJeh)
|
||||
- [Svelte Stopwatch by Gabriele Corti](https://codepen.io/borntofrappe/pen/KKKPZZg)
|
||||
@ -0,0 +1,29 @@
|
||||
# Tic Tac Toe Game
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
An offline Tic Tac Toe Game where 2 players can play in the same machine. Make it responsive than players can also play in cellphones.
|
||||
|
||||
This game will help the developer improve his skills with arrays and conditional cases.
|
||||
|
||||
By the 2 players functionality you can add 2 variables where one will be player 1 receiving true to its value and player 2 will be opposite receiving false, after player 1 do his move the variable will receive false and so one.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can have a good experience with game layout
|
||||
- [ ] User can see how many times he won
|
||||
- [ ] User can see a text or a popup when it draw
|
||||
- [ ] User can play in cellphone
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can chose between X and O
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
[Grid Layout](https://www.w3schools.com/css/css_grid.asp)
|
||||
[Conditionals](https://www.w3schools.com/js/js_if_else.asp)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Tic Tac Toe by Vasanth Krishnamoorthy](https://codepen.io/vasanthkay/pen/KVzYzG)
|
||||
@ -0,0 +1,36 @@
|
||||
# TrueOrFalse
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
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 implementation 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
|
||||
@ -0,0 +1,68 @@
|
||||
# Vigenere Cipher
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
The rate and impact of security breaches in recent years makes it imperative
|
||||
that developers understand the methods bad actors use to compromise apps.
|
||||
Understanding how an app can be compromised is the first step in coming up
|
||||
with effective protection measures.
|
||||
|
||||
One of the easiest ways bad actors can compromise an app is to access
|
||||
data that's left unencrypted by the developer. There are a number of strong
|
||||
encryption algorithms available to ensure that data is not readable even if
|
||||
access is compromised. These include AES, Blowfish, and TripleDES to name a
|
||||
few.
|
||||
|
||||
However, these algorithms can be quite complex to implement so the objective
|
||||
of this app is to implement a classical encryption algorithm, the Vigenere
|
||||
Cipher to learn the basics of how ciphers work.
|
||||
|
||||
### Requirements & Constraints
|
||||
|
||||
- Developers should use only native language features to implement the Vigenere
|
||||
Cipher. Libraries are not allowed.
|
||||
- Developers should design and implement their own solution using only the
|
||||
description of the steps in the Vigenere Cipher algorithm.
|
||||
- After successfully implementing this algorithm Developer should ask
|
||||
themselves these questions:
|
||||
- Would you feel confident encrypting your financial information using the
|
||||
Vigenere Cipher? Why?
|
||||
- How would you detect that a message had been encrypted using the
|
||||
Vigenere Cipher?
|
||||
- How would you go about trying to crack this encryption?
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see the app window with these components:
|
||||
- Plain text message input field
|
||||
- Encryption key input field
|
||||
- Action buttons - 'Encrypt' and 'Decrypt'
|
||||
- Resulting encrypted or decrypted message
|
||||
- [ ] User can enter the text to be encrypted in the plain text message input
|
||||
field
|
||||
- [ ] User can enter the Encryption key the Vigenere algorithm will use to
|
||||
encrypt the plain text message.
|
||||
- [ ] User can click see see the 'Decrypt' button disabled until the plain
|
||||
text has been encrypted.
|
||||
- [ ] User can click the 'Encrypt' button to encrypt the plain text message
|
||||
- [ ] User can see the encrypted message displayed in the result field.
|
||||
- [ ] User can see the 'Decrypt' button enabled after the encrypted message
|
||||
has been displayed.
|
||||
- [ ] User can click the 'Decrypt' button to decrypt the encrypted message
|
||||
and to display its contents in the result field.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see a 'Compare' button after decryption that compares the
|
||||
original plain text message with the decrypted message
|
||||
- [ ] User can see an error message if the 'Compare' detects differences
|
||||
in the contents of these two fields.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Bad Actors](http://solutionsreservoir.com/resources/introduction-to-cybersecurity/part-1-cybersecurity-overview)
|
||||
- [Vigenere Cypher](https://www.geeksforgeeks.org/vigenere-cipher/)
|
||||
|
||||
## Example projects
|
||||
|
||||
[Vigenere Encryption](https://codepen.io/max1128/pen/VdyJmd)
|
||||
@ -0,0 +1,26 @@
|
||||
# Weather App
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
A weather application to get the temperature, weather condition and whether it is day or night of a particular city using `accuweather`. A free weather api.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] Enter the name of a city into the `input` field.
|
||||
- [ ] By pressing enter, the user submits the name of the city which updates the `DOM` with the temperature, weather condition, image of day or night and weather condition icon.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] By closing the browser window the city name will be stored in localStorage and when the user returns, the name will be retrieved to make an api call to update the `DOM`.
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
|
||||
- [accuweather](https://developer.accuweather.com/)
|
||||
- [axios](https://github.com/axios/axios)
|
||||
- [bootstrap](https://getbootstrap.com/)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Weather App on Codepen](https://codepen.io/tutsplus/pen/gObLaEP) by [George Martsoukos]
|
||||
- [Coding A Weather App In Pure JavaScipt](https://www.youtube.com/watch?v=ZPG2wGNj6J4)
|
||||
@ -0,0 +1,30 @@
|
||||
# Windchill
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
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)
|
||||
[Svelte Wind Chill Index by Gabriele Corti](https://codepen.io/borntofrappe/pen/WNNrrJg)
|
||||
@ -0,0 +1,44 @@
|
||||
# Word Frequency
|
||||
|
||||
**Tier:** 1-Beginner
|
||||
|
||||
Calculating the frequency of words in a block of text is a technique which has
|
||||
various uses in algorithms such as searching, sorting, and semantic analysis.
|
||||
The objective of the Word Frequency app is count the frequency of words in a
|
||||
block of text and create a tabular display of each unique word in the text
|
||||
along with its frequency, in descending order by frequency.
|
||||
|
||||
## User Stories
|
||||
|
||||
- [ ] User can see a text input box, a 'Translate' button, and a word
|
||||
frequency table.
|
||||
- [ ] User can enter text (or cut and paste) into the input box. This input
|
||||
box must allow the entry of large blocks of text (maximum of 2048 characters).
|
||||
- [ ] User can click the 'Translate' button to analyze the word frequency in
|
||||
the text that has been input.
|
||||
- [ ] User can see an error message if the text input box is empty.
|
||||
- [ ] User can see the word frequency table populated when the 'Translate'
|
||||
button is clicked. Each row in the table contains a word and the number of times
|
||||
it occurs in the input text.
|
||||
- [ ] User can see the word frequency table ordered in descending sequence
|
||||
by word frequency.
|
||||
|
||||
## Bonus features
|
||||
|
||||
- [ ] User can see a graphical representation of the word frequency in a
|
||||
bubble chart, column chart, or any other form of graphical representation the
|
||||
developer chooses.
|
||||
- [ ] User may choose to enter the URL of a web page whose content is to be
|
||||
analyzed instead of manually entering text. (Hint: See the
|
||||
[Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) application for ideas).
|
||||
|
||||
## Useful links and resources
|
||||
|
||||
- [Bag of Words Model (Wikipedia)](https://en.wikipedia.org/wiki/Bag-of-words_model)
|
||||
- [Semantic Analysis (Wikipedia)](https://en.wikipedia.org/wiki/Sentiment_analysis)
|
||||
|
||||
## Example projects
|
||||
|
||||
- [Word Frequency Counter](https://codepen.io/maxotar/pen/aLrwJM)
|
||||
- [Bubble Chart](https://codepen.io/Quendoline/pen/pjELpM)
|
||||
- [Svelte Word Frequency by Gabriele Corti](https://codepen.io/borntofrappe/pen/QWWWqQM)
|
||||
Loading…
Reference in new issue