msb-public
/
app-ideas
mirror of https://github.com/florinpop17/app-ideas
2
1
Code Issues Projects Releases Wiki Activity

Tic Tac Toe-Game

Browse Source
pull/252/head
Gabriel 6 years ago committed by GitHub
parent b47cf8261f
commit 233620809a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
37 changed files with 1753 additions and 0 deletions
Show Stats Download Patch File Download Diff File

47
1-Beginner/Bin2Dec-App.md
Unescape View File

@ -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/)

26
1-Beginner/Border-Radius-Previewer.md
Unescape View File

@ -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)

59
1-Beginner/CSV2JSON-App.md
Unescape View File

@ -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)

62
1-Beginner/Calculator-App.md
Unescape View File

@ -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)

34
1-Beginner/Calendar-App.md
Unescape View File

@ -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)

67
1-Beginner/Cause-Effect-App.md
Unescape View File

@ -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)

36
1-Beginner/Christmas-Lights-App.md
Unescape View File

@ -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)

41
1-Beginner/Color-Cycle-App.md
Unescape View File

@ -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)

61
1-Beginner/Countdown-Timer-App.md
Unescape View File

@ -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/)

29
1-Beginner/Dollars-To-Cents-App.md
Unescape View File

@ -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)

49
1-Beginner/Dynamic-CSSVar-app.md
Unescape View File

@ -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)

200
1-Beginner/First-DB-App.md
Unescape View File

@ -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

35
1-Beginner/Flip-Image-App.md
Unescape View File

@ -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)

55
1-Beginner/GitHub-Status-App.md
Unescape View File

@ -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/)

67
1-Beginner/Hello-App.md
Unescape View File

@ -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/)

122
1-Beginner/IOT-Mailbox-App.md
Unescape View File

@ -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

56
1-Beginner/JSON2CSV-App.md
Unescape View File

@ -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)

26
1-Beginner/Javascript-Validation-With-Regex.md
Unescape View File

@ -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)

40
1-Beginner/Key-Value-App.md
Unescape View File

@ -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)

24
1-Beginner/Lorem-Ipsum-Generator.md
Unescape View File

@ -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/)

29
1-Beginner/Notes-App.md
Unescape View File

@ -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)

63
1-Beginner/Pearson-Regression-App.md
Unescape View File

@ -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)

28
1-Beginner/Pomodoro-Clock.md
Unescape View File

@ -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/)

38
1-Beginner/Product-Landing-Page.md
Unescape View File

@ -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)

33
1-Beginner/Quiz-App.md
Unescape View File

@ -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)

24
1-Beginner/Random-Meal-Generator.md
Unescape View File

@ -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)

28
1-Beginner/Random-Number-Generator.md
Unescape View File

@ -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/)

51
1-Beginner/Recipe-App.md
Unescape View File

@ -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)

38
1-Beginner/Roman-to-Decimal-Converter.md
Unescape View File

@ -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)

25
1-Beginner/Slider-Design.md
Unescape View File

@ -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)

27
1-Beginner/Stopwatch-App.md
Unescape View File

@ -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)

29
1-Beginner/Tic-Tac-Toe-Game.md
Unescape View File

@ -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)

36
1-Beginner/True-or-False-App.md
Unescape View File

@ -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

68
1-Beginner/Vigenere-Cipher.md
Unescape View File

@ -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)

26
1-Beginner/Weather-App.md
Unescape View File

@ -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)

30
1-Beginner/Windchill-App.md
Unescape View File

@ -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)

44
1-Beginner/Word-Frequency-App.md
Unescape View File

@ -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)
Write Preview
Loading…
Cancel
Save