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

🍱 Created pt-BR folder to put the translations.

Browse Source
pull/610/head
VITOR PEREIRA 3 years ago
parent c5f5ce3930
commit 47d6234568
91 changed files with 4703 additions and 0 deletions
Show Stats Download Patch File Download Diff File

47
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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)

36
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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
pt-BR/Projetos/1-Iniciante/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)

76
pt-BR/Projetos/2-Intermediario/Bit-Masks-App.md
Unescape View File

@ -0,0 +1,76 @@
# Bit Masks
**Tier:** 2-Intermediate
It's difficult to find an app that doesn't rely on some form of conditional
logic to implement its functionality. This is almost always performed using
statements like:
```
if (processAccount === true) {
/* do something */
}
```
If and switch statements work well for a limited number of conditionals, but
what if your app had 10's or 100's of conditionals to evaluate? Luckily, there's
another way.
The goal of the Bit Masks app is demonstrate how to use bit masks to evaluate
longer sequences of switches without having to rely on long strings of
conditional statements.
## User Stories
- [ ] User can see a vertical list of checkboxes with the following cities
and their timezones:
- Moscow: GMT +3
- Paris: GMT +2
- Berlin: GMT +2
- Brussels: GMT +2
- Amsterdam: GMT +2
- Rome: GMT +2
- London: GMT +1
- Dublin: GMT +1
- New York: GMT -4
- Washington, DC: GMT -4
- St. Louis: GMT -5
- Los Angeles: GMT -7
- Tokyo: GMT +9
- Beijing: GMT +8
- Ho Chi Mihn City: GMT +7
- Mumbai: GMT +5
- [ ] User can see a GMT search box where an integer representing a GMT offset
can be entered into and a 'Find Cities' button.
- [ ] User can click the 'Find Cities' button to display the names of the
cities in that GMT offset in an output area.
### Developer Notes
For this exercise the developer should use sequences of 24
binary bits, each corresponding a GMT time zone from +12 to -12 to map cities
to their timezones.
Searches should be conducted by combining a bit mask for the desired time zone
against the city-specific bit sequences to identify matches. Determining if a
city meets the search criteria shouldn't rely on a statement such as
```
if (city[i].gmtOffset === searchOffset ) {
/* Found it! */
}
```
It should instead rely on a bitwise operation.
## Bonus features
- [ ] User can search for cities NOT in the GMT offset entered in the
search box.
- [ ] User can see a summary count of the number of cities that met the
search criteria.
## Useful links and resources
- [World Time Zones](https://greenwichmeantime.com/time-zone/definition/)
- [Bitwise Operators (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators)
## Example projects
[Bitwise Operation](https://codepen.io/Lunoware/pen/VBZgQd)

26
pt-BR/Projetos/2-Intermediario/Book-Finder-App.md
Unescape View File

@ -0,0 +1,26 @@
# Book Finder App
**Tier:** 2-Intermediate
Create an application that will allow users to search for books by entering a query (Title, Author, etc). Display the resulting books in a list on the page with all the corresponding data.
## User Stories
- [ ] User can enter a search query into an `input` field
- [ ] User can submit the query. This will call an API that will return an array of books with the corresponding data (**Title**, **Author**, **Published Date**, **Picture**, etc)
- [ ] User can see the list of books appearing on the page
## Bonus features
- [ ] For each item in the list add a link that will send the User to an external site which has more information about the book
- [ ] Implement a Responsive Design
- [ ] Add loading animations
## Useful links and resources
You can use the [Google Books API](https://developers.google.com/books/docs/overview)
## Example projects
[Book Finder](https://book-finder-by-deyl.netlify.com/)
[Search Books](https://booksure.netlify.app/)

33
pt-BR/Projetos/2-Intermediario/Calculator-CLI.md
Unescape View File

@ -0,0 +1,33 @@
# Calculator CLI
**Tier:** 2-Intermediate
Create a basic calculator with addition feature.
## User Stories
- [ ] User can add multiple numbers using `add` command.
- [ ] User can add floating numbers using the `-f` flag.
- [ ] User can add only even/odd numbers using `even`/`odd` sub-command.
- [ ] User can use `--help` or `-h` flag to get all the available commands and flags.
> Note: The stories 1 and 2 are basically for static typed language, where passed arguments must be of same type.
## Bonus Features
- [ ] User can use all the basic arithmetic operations like (addition, subtraction, multiplication and divison).
- [ ] User can use `--help` or `-h` flag to get the sub-commands of command.
- [ ] **Power of** and **Square Root of** operation.
## Useful links and resources
- [5 keys to create a killer CLI in Go](https://blog.alexellis.io/5-keys-to-a-killer-go-cli/)
- [How to build a CLI tool in NodeJS ?](https://www.freecodecamp.org/news/how-to-build-a-cli-tool-in-nodejs-bc4f67d898ec/)
- [Build a Command Line Interface (CLI) Application with Node.js](https://codeburst.io/build-a-command-line-interface-cli-application-with-node-js-59becec90e28)
- [Building Beautiful Command Line Interfaces with Python](https://codeburst.io/building-beautiful-command-line-interfaces-with-python-26c7e1bb54df)
- [How to create a CLI in golang with cobra](https://schadokar.dev/posts/how-to-create-a-cli-in-golang-with-cobra/)
- [Building a Network Command Line Interface in Go](https://tutorialedge.net/golang/building-a-cli-in-go/)
## Example projects
- [my-calc](https://github.com/schadokar/my-calc)

33
pt-BR/Projetos/2-Intermediario/Card-Memory-Game.md
Unescape View File

@ -0,0 +1,33 @@
# Card-Memory-Game
**Tier:** 2-Intermediate
Card memory is a game where you have to click on a card to see what image is underneath it and try to find the matching image underneath the other cards.
## User Stories
- [ ] User can see a grid with n x n cards (`n` is an integer). All the cards are faced down initially (`hidden` state)
- [ ] User can click a button to start the game. When this button is clicked, a timer will start
- [ ] User can click on any card to unveil the image that is underneath it (change it to `visible` state). The image will be displayed until the user clicks on a 2nd card
When the User clicks on the 2nd card:
- [ ] If there is a match, the 2 cards will be eliminated from the game (either hide/remove them or leave them in the `visible` state)
- [ ] If there isn't a match, the 2 cards will flip back to their original state (`hidden` state)
- [ ] When all the matches have been found, the User can see a dialog box showing a Congratulations message with a counter displaying the time it took to finish the game
## Bonus features
- [ ] Use can choose between multiple levels of difficulty (Easy, Medium, Hard). Increased difficulty means: decreasing the time available to complete and/or increasing the number of cards
- [ ] User can see the game statistics (nr. of times he won / he lost, best time for each level)
## Useful links and resources
- [Wikipedia](<https://en.wikipedia.org/wiki/Concentration_(game)>)
## Example projects
- [Flip - card memory game](https://codepen.io/zerospree/full/bNWbvW)
- [Memory Game](https://jdmedlock.github.io/memorygame/)
- [SMB3 Memory Card Game](https://codepen.io/hexagoncircle/full/OXBJxV)
- [BHMBS - Memory Game](https://barhouum7.github.io/JS-MemoryGame.github.io/)

150
pt-BR/Projetos/2-Intermediario/Charity-Finder-App.md
Unescape View File

@ -0,0 +1,150 @@
# Charity Finder
**Tier:** 2-Intermediate
With the Charity Finder app you'll not only get to refine your Web Developer
skills, but you will also have an opportunity to see how you can do good. The
objective of this app is to utilize the [Global Giving](https://www.globalgiving.org/) organizations API to provide your users with a list of global charities they
can search to find a charity that matches their philanthropic interests.
### Constraints
- Since the app is asking the user to choose and contribute to a charitable
cause it's important that the presentation of information be clear and concise.
Just as important is the need for the UI/UX to be polished and engaging to use.
Although this is true of all apps, its even more the case here since each
user that abandons the site represents the loss of an opportunity to do good
(see ['What is Web Site Conversion?](##useful-links-and-resources)) below.
## User Stories
- [ ] User can see a page heading containing the application name.
- [ ] User can see an overview of what the app is intended for in 'splash'
page format.
- [ ] User can see a search area containing an set of drop down boxes that
allow the user to specify search criteria for charitable organizations
including:
- Organization name
- Organizations home country
- Countries the organization serves
- [ ] User can see a 'Search' button
- [ ] User can click on the 'Search' button to display information cards
for the matching organizations in a search results area.
- [ ] User can see organization information cards in the search results area
containing:
- ID
- Name
- Address
- Logo
- [ ] User can click the logo in the organizations information card to open a
new window to that organizations home page.
- [ ] User can see a page footer with links to your GitHub and social media
accounts including social media icons (like the Twitter icon).
## Bonus features
- [ ] User can see a search dropdown for themes the charity focuses on.
- [ ] User can select multiple options in the search dropdowns.
- [ ] User can see a project link (e.g. 'PROJECT') on the organization
information card.
- [ ] User can click on the project link to display a page with information
describing the Global Giving project the organization is associated with.
Hint: examine the structure of the JSON returned from the API to understand
the relationship between projects and organizations.
## Useful links and resources
- [What is Web Site Conversion?](https://www.marketing91.com/what-is-website-conversion/)
- [Global Giving API](https://www.globalgiving.org/api/)
- Sample XML for a project returned through the API:
```
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<projects numberFound="26842">
<hasNext>true</hasNext>
<nextProjectId>367</nextProjectId>
<project>
<active>false</active>
<activities>To fund the training of health professionals including nurses, psychologists, and social workers, and buy medicine and equipment.</activities>
<additionalDocumentation>https://www.globalgiving.org/pfil/359/projdoc.doc</additionalDocumentation>
<approvedDate>2004-06-01T12:43:27-04:00</approvedDate>
<contactAddress>28 Pine Street</contactAddress>
<contactCity>Mechanic Falls</contactCity>
<contactCountry>United States</contactCountry>
<contactPostal>04256</contactPostal>
<contactState>Maine</contactState>
<contactUrl>http://groups.yahoo.com/group/FOCUSonCambodia</contactUrl>
<country>Cambodia</country>
<funding>8239.33</funding>
<goal>55000.00</goal>
<id>359</id>
<image id="0">
<imagelink size="small">
<url>https://www.globalgiving.org/pfil/359/pict_grid1.jpg</url>
</imagelink>
<imagelink size="thumbnail">
<url>https://www.globalgiving.org/pfil/359/pict_thumbnail.jpg</url>
</imagelink>
<imagelink size="medium">
<url>https://www.globalgiving.org/pfil/359/pict_med.jpg</url>
</imagelink>
<imagelink size="large">
<url>https://www.globalgiving.org/pfil/359/pict_grid7.jpg</url>
</imagelink>
<imagelink size="extraLarge">
<url>https://www.globalgiving.org/pfil/359/pict_large.jpg</url>
</imagelink>
<imagelink size="original">
<url>https://www.globalgiving.org/pfil/359/pict_original.jpg</url>
</imagelink>
<title>Improving the Health of Children in Cambodia</title>
</image>
<imageGallerySize>1</imageGallerySize>
<imageLink>https://www.globalgiving.org/pfil/359/pict.jpg</imageLink>
<iso3166CountryCode>KH</iso3166CountryCode>
<longTermImpact>This project will help improve the mental and physical health of orphaned children in Cambodia. This project will also ensure the sustainability of the Nutrition Center in Child Mental Health Center.</longTermImpact>
<need>Our beneficiaries will be orphaned children suffering from AIDS/HIV and other diseases and children with mental health problems whose parents do not know how to cope because they were deprived of family experiences by the forced separations of the Pol Pot regime. At the Nutrition Center in Phnom Penh, we will help urban orphans from brothels and hospitals that have abandoned them. At the Child Mental Health Center, we will help families, largely the working poor, from all over Cambodia.</need>
<numberOfDonations>102</numberOfDonations>
<organization>
<activeProjects>0</activeProjects>
<addressLine1>1062 Lewiston Road</addressLine1>
<addressLine2></addressLine2>
<bridgeId>5824171103</bridgeId>
<city>New Gloucester</city>
<countries>
<country>
<iso3166CountryCode>KH</iso3166CountryCode>
<name>Cambodia</name>
</country>
</countries>
<country>United States</country>
<id>10</id>
<iso3166CountryCode>US</iso3166CountryCode>
<mission>The mission of FOCUS is to pursue humanitarian programs that include medical aid, school construction and supplies, distribution of rice and rice seeds, road improvements, agricultural improvements, fish farms, basic housing, hospital restoration, school scholarships, and loans for infrastructure improvements. We want to help disadvantaged youth and their families, if they have any, in a country where the infrastructure is still weak due to Khmer Rouge depredations.</mission>
<name>Friends of Cambodia in the U.S. (FOCUS)</name>
<postal>4260</postal>
<state>Maine</state>
<themes>
<theme>
<id>health</id>
<name>Health</name>
</theme>
</themes>
<totalProjects>2</totalProjects>
<url></url>
</organization>
<progressReportLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/updates/</progressReportLink>
<projectLink>https://www.globalgiving.org/projects/educating-children-of-cambodia/</projectLink>
<region>Asia and Oceania</region>
<remaining>46760.67</remaining>
<status>funded</status>
<summary>To help abandoned children, many afflicted with HIV/AIDS, and children with mental health problems. We want to address lack of food, medicine and staff training.</summary>
<themeName>Health</themeName>
<title>Improving the Health of Children in Cambodia</title>
<type>project</type>
</project>
</projects>
```
## Example projects
[Playing with card layout](https://codepen.io/bradjdouglas/pen/xOZJRz)

29
pt-BR/Projetos/2-Intermediario/Chrome-Theme-Extension.md
Unescape View File

@ -0,0 +1,29 @@
# Chrome Theme Extension
**Tier:** 2-Intermediate
Build your own customized chrome theme extension. You can also add night light (also known as blue light filter) feature that will automatically turn on during the night time so that user's eye won't get stressed while coding whole night or binge watching netflix 😛
- How chrome extension work(behind the scenes).
- Basic understanding of HTML/CSS, JS, JSON is required.
## User Stories
- [ ] User can make a theme according to their own personal color preference
- [ ] This will extremely benefit the people suffering from color blindness.
- [ ] User can install and set it as the default theme.
## Bonus features
- [ ] Deploy extension to chrome store
- [ ] Add a toggle button to control the night sight feature manually
- [ ] Create same extension for multiple browsers like firefox, etc.
## Useful links and resources
- [Getting Started](https://developer.chrome.com/extensions/getstarted)
## Example projects
- [chrome-developer-edition-dark](https://github.com/KeenRivals/chrome-developer-edition-dark)
- [Night Shift(BlueLight Filter)](https://chrome.google.com/webstore/detail/night-shiftbluelight-filt/hkjikimiiojjiiffmgngnkefacpbgajl?hl=en)

27
pt-BR/Projetos/2-Intermediario/Currency-Converter.md
Unescape View File

@ -0,0 +1,27 @@
# Currency Converter
**Tier:** 2-Intermediate
A currency converter is used to convert an amount in one currency to its corresponding value in another currency using their current exchange rate, for example it can be used to calculate the value of 100 US Dollars in Euros. Current exchange rates are usually provided by banks and other financial service providers, they also (in some cases) offer free and paid APIs for developers to get current and historical exchange rates between two or more currencies.
## User Stories
- [ ] User can enter up to 9 digits to represent the amount to convert in a source input field
- [ ] User can view a sorted list of available currencies and select the currency to convert from in a source drop-down list
- [ ] User can view a sorted list of available currencies and select the currency to convert to in a destination drop-down list
- [ ] User views the value (rounded to two decimal places) of the source amount converted to the destination currency in a single output field as soon as either the input value, the source currency, or the destination currency is changed.
- [ ] User must be alerted if the input is not a number
## Bonus features
- [ ] User should be able to swap the values of the source and destination drop-down lists on the click of a button
## Useful links and resources
- [Free currency converter API](https://free.currencyconverterapi.com/)
- [XE currency converter](https://www.xe.com/)
- [How to use fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) to fetch data
## Example projects
- [Currency Converter](https://acodedoer.github.io/currency-converter/)
- [Currency converter code](https://github.com/acodedoer/currency-converter)

27
pt-BR/Projetos/2-Intermediario/Drawing-App.md
Unescape View File

@ -0,0 +1,27 @@
# Drawing App
**Tier:** 2-Intermediate
Create digital artwork on a canvas on the web to share online and also export as images.
## User Stories
- [ ] User can draw in a `canvas` using the mouse
- [ ] User can change the color
- [ ] User can change the size of the tool
- [ ] User can press a button to clear the `canvas`
## Bonus features
- [ ] User can save the artwork as an image (`.png`, `.jpg`, etc format)
- [ ] User can draw different shapes (`rectangle`, `circle`, `star`, etc)
- [ ] User can share the artwork on social media
## Useful links and resources
- [Learn how to create a Drawing Application using p5js](https://www.florin-pop.com/blog/2019/04/drawing-app-built-with-p5js/)
## Example projects
- [Drawing App by Florin Pop](https://codepen.io/FlorinPop17/full/VNYyZQ)
- [Drawing App by t0mm4rx](https://codepen.io/t0mm4rx/full/dLowvZ)

39
pt-BR/Projetos/2-Intermediario/Emoji-Translator-App.md
Unescape View File

@ -0,0 +1,39 @@
# Emoji Translator
**Tier:** 2-Intermediate
Emojis have become the _lingua franca_ of modern society. They are a fun and
fast way to communicate, but an also extremely expressive mechanism for
communicating emotions and reactions.
The objective of the Emoji Translator app is to translate text entered by the
user into an equivalent string of emojis, translated from one or more words in
the original text, and words for which there is no corresponding emoji.
## User Stories
- [ ] User can enter a string of words, numbers, and punctuation into a text
box
- [ ] User can click a 'Translate' button to translate words in the entered
text into their corresponding emojis.
- [ ] User can see a warning message if 'Translate' was clicked, but the
input text box was empty or unchanged from the last translation.
- [ ] User can see text elements in the entered text translated to their
equivalent emojis in an output text box. Text elements for which there is no
emoji will be left unchanged.
- [ ] User can click a 'Clear' button to clear the input and output text boxes.
## Bonus features
- [ ] Developer will implement an emoji synonym feature to allow the app to
translate a wider variety of words to emoji.
- [ ] User can select the language the input text is entered from a dropdown
list of languages.
## Useful links and resources
[Full Emoji List v12.0](https://unicode.org/emoji/charts/full-emoji-list.html)
## Example projects
[Emoji Translate](https://emojitranslate.com/)

51
pt-BR/Projetos/2-Intermediario/FlashCards-App.md
Unescape View File

@ -0,0 +1,51 @@
# FlashCards
**Tier:** 2-Intermediate
FlashCards are a time tested technique used by students to review and test
their knowledge on a particular subject.
This app is based on a knowledge base of questions and answers about a
particular subject and randomly displays a card with the question and multiple
answers. The objective is for the user to select the correct answer(s).
## User Stories
- [ ] User can see a single card, randomly picked from the "deck" displayed
at any point in time
- [ ] User can see a question on the card and a list of four possible answers,
each of which is identified by a letter.
- [ ] User can select an answer by clicking on it
- [ ] User can see an error displayed when the wrong answer is selected
- [ ] User can see a congratulations message when the correct answer is
selected.
- [ ] User can click a 'Next Question' button to display the next flash card.
### Additional Info for the Developer
- For this app the knowledge base of questions and answers should be encoded in
a JavaScript object.
- The possible answers display on each card should be randomly chosen from
other flashcards.
## Bonus features
- [ ] User can click a 'Results' button to display the tallies of
correct and incorrect answers.
- [ ] User can click a 'Reset' button to reset the tallies of correct
and incorrect answers.
- [ ] User can click a 'Shuffle' button to re-randomize the "deck"
- [ ] User can click a 'More Info' button to flip the flash card to see
additional information. For example, detailed information about the subject
of the question on the front of the card.
## Useful links and resources
The definitive source for HTML/CSS/Javascript is [MDN](https://developer.mozilla.org/en-US/)
Example Javascript questions and answers can be found at
[Brainscape](https://www.brainscape.com/subjects/javascript).
## Example projects
[Vintage Multiplication Flash Cards](https://codepen.io/NinoLopezTech/pen/vJBMpZ)

86
pt-BR/Projetos/2-Intermediario/Flip-Art-App.md
Unescape View File

@ -0,0 +1,86 @@
# Flip Art
**Tier:** 2-Intermediate
Many developers have found that adding animation to an application is a
useful technique that adds impact to the UI, to make it more appealing to its users,
and to explain complex subject matter. But, as a developer how do you create
these and how do you know what images make effective animations?
The objective of the Flip Art app is to address both of these needs by
providing a simple way to collect and arrange a set of images into an
animated sequence that can be replayed and adjusted to achieve the desired
impact and effect.
### Requirements & Constraints
Developers should not rely on animation or graphics libraries to implement
this app. Instead, try using vanilla Javascript, CSS, and HTML.
## User Stories
- [ ] User can see the following primary components in the app window:
- Configuration panel containing elements used to tailor the animation
process.
- Operation buttons
- Animation display panel animations will be presented in
### Configuration Panel
- [ ] User can see eight thumbnails that will contain individual animation
frames
- [ ] User can see a button under each thumbnail - '+'
- [ ] User can click the '+' button to add a new image to an empty thumbnail
- [ ] User can see a file open dialog when the '+' button is clicked to
allow an `.jpg` image to be loaded into the thumbnail.
- [ ] User can see the '+' button label change to '-' after a thumbnail is
loaded.
- [ ] User can click the '-' button to remove or replace a thumbnail.
- [ ] User can see an 'Transition Speed' slider control.
- [ ] User can adjust the 'Transition Speed' slider from slow to fast to
adjust the transition time between thumbnails in the Animation Display.
### Operation Buttons
- [ ] User can see two buttons - 'Clear Configuration' and 'Start Animation'
- [ ] User can see the 'Start Animation' button disabled until at least one
thumbnail has been added via the Configuration Panel.
- [ ] User can click the 'Clear Configuration' button to clear all thumbnails
from the configuration panel.
- [ ] User can click the 'Start Animation' button to begin the Animation
Display panel
- [ ] User can see the 'Start Animation' button label change to 'Stop
Animation' once an animation has been started.
- [ ] User can click the 'Stop Animation' button to halt the animation in
the animation display
- [ ] User can see the 'Stop Animation' button label change to 'Start
Animation' when an animation has been stopped.
### Animation Display Panel
- [ ] User can see thumbnails added in the Configuration panel displayed
when theh 'Start Animation' button is clicked.
- [ ] User can see thumbnails transtion from one to the next at the rate
defined by the 'Transition Speed' slider.
## Bonus features
- [ ] User can see the border around the thumbnail in the Configuration Panel
highlighted when that thumbnail is displayed in the Animation Display panel.
- [ ] User can dynamically add any number of thumbnails rather than being
restricted to just eight.
- [ ] User can hear unique sounds associated with modifying thumbnails in the
Configuration Panel.
- [ ] User can see a transition type dropdown in the Configuration Panel to
define the transition effect between thumbnails in the Animation Display -
ease, ease-in, ease-out, ease-in-out
- [ ] User can drag and drop thumbnails to reorder them
- [ ] User can save the animation as a `.gif` file.
## Useful links and resources
- [How to Make Flip Book Animation](https://www.youtube.com/watch?v=Njl-uqnmBGA)
- [CSS Animation (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/animation)
- [Using CSS Transitions (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions)
- [CSS Transition (MDN)](https://developer.mozilla.org/en-US/docs/Web/CSS/transition)
## Example projects
[FlipAnim](http://flipanim.com/)

25
pt-BR/Projetos/2-Intermediario/Game-Suggestion-App.md
Unescape View File

@ -0,0 +1,25 @@
# Game suggestion app
**Tier:** 2-Intermediate
An app where users can create polls where voters can suggest any games available on [IGDB](https://www.igdb.com/) to play on a stream or a gaming get-together. IGDB (Internet Game Data Base) has a handy [API](https://www.igdb.com/api) for getting games and implementing some kind of AJAX search for it would be necessary.
## User Stories
- [ ] User can create polls
- [ ] User can vote on polls (add games)
- [ ] User can see the poll results as a top 10 or 5 list of the most voted games
## Bonus features
- [ ] Poll admin can restrict the voting to a certain tag or genre
- [ ] User can login and see their old polls
## Useful links and resources
- [IGDB API documentation](https://api-docs.igdb.com/)
## Example projects
- [Strawpoll, one of the most popular polling apps](https://www.strawpoll.me/)

32
pt-BR/Projetos/2-Intermediario/GitHub-Profiles.md
Unescape View File

@ -0,0 +1,32 @@
# GitHub Profiles
**Tier:** 2-Intermediate
APIs allow you to use the real world data that drives platforms like GitHub. You can communicate with the remote servers and get data that you can use to build an app.
In this project you create a search app that uses GitHub API to retrieve user information when a valid username is input. It should display avatar, username, followers count, repository count, top 4 repositories based on forks and stars.
## User Stories
- [ ] User can enter a username
- [ ] User can click on search button to retrieve information
- [ ] User can see the avatar, username, followers and repository count of searched user
- [ ] User can see the top 4 repositories of searched user
- [ ] User should get an alert if the username is not valid
## Bonus features
- [ ] User can toggle dark/light mode
- [ ] Selected mode should persist when user comes back to the app again
## Useful links and resources
To get the data you need to communicate with GitHub API. you can either
- [Read Docs](https://developer.github.com/v3/)
- [Check API directly](https://api.github.com/users/chaharshivam)
To get data from API you can check [fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) in javascript
## Example projects
- [GitHub profiles](https://github-profiles.netlify.app/) ([repo](https://github.com/GabrielNBDS/GitHub-Profiles))
- [github-profile-search](https://github-profile-search-272901.web.app/) ([repo](https://github.com/guerra08/github-profile-search))

50
pt-BR/Projetos/2-Intermediario/HighStriker-Game.md
Unescape View File

@ -0,0 +1,50 @@
# HighStriker
**Tier:** 2-Intermediate
Carnivals and circuses have featured the HighStriker sideshow game since at
least the 1930's. This game consists of a tower with a bell mounted at the top
and a levered platform at the bottom. When the levered platform is struck with
a mallet it causes a puck to travel up a track attached to the tower.
When the platform is struck the puck travels vertically up the track. If hit
hard enough the puck will ring the bell, signifying a winner.
The objective of the Highstriker app is to simulate this carnival
game. Instead of physical force to move the puck up the track use an algorithm
of your own design and a random number generator to determine the puck's
speed and the distance it travels.
## User Stories
- [ ] User can see an image of the High Striker tower with the bell at the
top, the levered platform at the bottom and the track connecting the two.
- [ ] User can click the 'Strike!' button under the levered platform to play
the game.
- [ ] User can see the puck travel up the rail.
- [ ] User can hear the bell ring if the puck travels far enough to strike it.
- [ ] User can see a score updated for each click of the 'Strike!' button -
the number of times the bell was struck and the number of attempts.
- [ ] User can click a 'Clear' button to clear the score.
- [ ] User can see a congratulations message when a total of 10 points are
reached.
## Bonus features
- [ ] User can see the bell vibrate when it is struck.
- [ ] User can be awarded points on a scale based on the distance the puck
travels up the track. For example, 1 point for 1/8 to 1/4 distance, 2 points
for 1/4 to 1/2 distance, 3 points for 1/2 to 3/4 distance, 4 points for 3/4 to
the bottom of the bell, and 5 points if the bell is struck.
- [ ] User can hear a sound as the puck travels up the rail.
- [ ] User can hear unique sounds when different points are awarded.
## Useful links and resources
- [HighStriker Game (Wikipedia)](https://en.wikipedia.org/wiki/High_striker)
- [HighStriker Video (YouTube)](https://www.youtube.com/watch?v=1W5jGH4xh1E)
- [Implementing Velocity, Acceleration, and Friction on a Canvas](https://codepen.io/Tobsta/post/implementing-velocity-acceleration-and-friction-on-a-canvas)
## Example projects
N/a

28
pt-BR/Projetos/2-Intermediario/Image-Scaner.md
Unescape View File

@ -0,0 +1,28 @@
# Image Scanner
**Tier:** 2-Intermediate
Create an android and ios app to find phone numbers, email and website links available in a photo and then organise it in the app.
## User Stories
- [ ] User can either click a photo or upload a photo from the gallery
- [ ] Processing is done on the image.
- [ ] If there are any phone numbers, email or web links present in the image then they are listed in the cards properly organized.
- [ ] On tap on the details, an option is provided to save as contact.
- [ ] History of search results are provided in the list view
## Bonus features
- [ ] Provide an option to add tags for each search results.
- [ ] Add search funtionality based on tags
- [ ] Add login and sync the results across multiple devices.
## Useful links and resources
- Use google OCR to read text from the image uploaded. https://cloud.google.com/vision/docs/ocr
- Apply regex to identify the phone number , emails and website links on the text identified from the OCR.
## Example projects
- Android App for text detection - https://github.com/alexzaitsev/ocr-google-vision

27
pt-BR/Projetos/2-Intermediario/Markdown-Previewer.md
Unescape View File

@ -0,0 +1,27 @@
# Markdown Previewer
**Tier:** 2-Intermediate
Convert Github flavored markdown into HTML code.
## User Stories
- [ ] User can enter Github flavored markdown into a `textarea`
- [ ] User can see the resulting `HTML` in another container/box by pressing on a button
## Bonus features
- [ ] User can see the resulting `HTML` updated automatically when the markdown `textarea` is changed
- [ ] When closing the browser window the markdown formatted text will be stored in `localStorage` and when the User returns, the data will be retrieved and displayed
- [ ] User can click a button and the content of the box is saved to the `clipboard`
## 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)
- [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)
## Example projects
- [Markdown Live Preview](https://markdownlivepreview.com/)

29
pt-BR/Projetos/2-Intermediario/Markdown-Table-Generator.md
Unescape View File

@ -0,0 +1,29 @@
# Markdown Table Generator
**Tier:** 2-Intermediate
Create an application that will convert a regular table with data provided by the User (optionally) into a Markdown formatted table.
## User Stories
- [ ] User can create an `HTML table` with a given number of **Rows** and **Columns**
- [ ] User can insert text in each cell of the `HTML table`
- [ ] User can generate a `Markdown formatted table` that will contain the data from the `HTML table`
- [ ] User can preview the `Markdown formatted table`
## Bonus features
- [ ] User can copy the `Markdown formatter table` to the clipboard by pressing a button
- [ ] User can insert a new **Row** or **Column** to a specified location
- [ ] User can delete a **Row** or a **Column** entirely
- [ ] User can align (to the _left_, _right_ or _center_) a **cell**, a **column**, a **row**, or the entire **table**
## Useful links and resources
- [Markdown Guide](https://www.markdownguide.org/)
- [Marked - A markdown parser](https://github.com/markedjs/marked)
- [How to Copy to Clipboard](https://www.w3schools.com/howto/howto_js_copy_clipboard.asp)
## Example project
- [Tables Generator / Markdown Tables](https://www.tablesgenerator.com/markdown_tables)

30
pt-BR/Projetos/2-Intermediario/Meme-Generator-App.md
Unescape View File

@ -0,0 +1,30 @@
# Meme Generator App
**Tier:** 2-Intermediate
Allow users to generate custom memes by adding text over an image.
## User Stories
- [ ] User can upload an image that will appear in a canvas
- [ ] User can add text in the top part of the image
- [ ] User can add text in the bottom part of the image
- [ ] User can select the color of the text
- [ ] User can select the size of the text
- [ ] User can save the resulting meme
## Bonus features
- [ ] User can select the font-family for the text
- [ ] User can share the meme on social media (twitter, reddit, facebook, etc)
- [ ] User can drag the text around and place it wherever he wants on top of the image
- [ ] User can draw shapes on top of the image (circles, rectangles, or free drawing with the mouse)
## Useful links and resources
Working with canvas is made very easy by the [p5js](http://p5js.org/) library.
## Example projects
- [Meme Generator by imgflip](https://imgflip.com/memegenerator)
- [Meme Generator by Niels Vadot](https://codepen.io/ninivert/pen/BpLKRx)

17
pt-BR/Projetos/2-Intermediario/Name-Generator.md
Unescape View File

@ -0,0 +1,17 @@
# Name generation using Recurrent Neural Networks
**Tier:** 2-Intermediate
Name Generation is nothing more than a sequence of letters that follow certain patterns to create a certain probability density for choosing the next letter in a name.
This App should utilize a RNN model with LSTM/GRUs to ensure highly likeable naming patterns
## User Stories
- [ ] User can specify the first 2 to 3 letters to be used for the initial name
- [ ] Use can see the generated name and use it accordingly
## Useful links and resources
- [RNN for Pokemon names](https://towardsdatascience.com/generating-pok%C3%A9mon-names-using-rnns-f41003143333)
- [RNN for Dinosaur names](https://datascience-enthusiast.com/DL/Dinosaurus_Island_Character_level_language_model.html)

25
pt-BR/Projetos/2-Intermediario/Password-Generator.md
Unescape View File

@ -0,0 +1,25 @@
# Password Generator
**Tier:** 2-Intermediate
Generate passwords based on certain characteristics selected by the user.
## User Stories
- [ ] User can select the length of the generated password
- [ ] User can select one or multiple of the following: `Include uppercase letters`, `Include lowercase letters`, `Include numbers`, `Include symbols`
- [ ] By clicking the `Generate password` button, the user can see a password being generated
- [ ] User can click a `Copy to clipboard` button which will save the password to the clipboard
## Bonus features
- [ ] User can see the password strength
## Useful links and resources
- [Password strength checked - zxcvbn](https://github.com/dropbox/zxcvbn)
## Example projects
- [Password Generator by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/BaBePej)
- [PasswordGenerator](https://passwordsgenerator.net)

88
pt-BR/Projetos/2-Intermediario/Podcast-Directory-App.md
Unescape View File

@ -0,0 +1,88 @@
# Podcast Directory
**Tier:** 2-Intermediate
In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) app you learned how to use the
Request package to scrape information from a web page. The Podcast Directory
continues this process and introduces you to another web scraping package -
[Puppeteer](https://github.com/GoogleChrome/puppeteer).
Although Request is a useful package it isn't built specifically for web
scraping like Puppeteer. As you gain experience with web scraping you'll find
that there are web sites and applications where web scraping is made easier
by using a tool like Puppeteer that is specifically built for scaping.
It is important to note that while web scraping has its place, the use of
an API or a data source such as a file or database is always preferable to
scraping information from a page. The reason being that even minor changes to
page styling can render your web scraper inoperable. For example, the change
of a CSS class name your scraping logic is dependent on.
The goal of the Podcast Directory app is to pull the most recent episodes of
the [Javascript Jabber](https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast)
and [Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)
podcasts from [Podbean](https://www.podbean.com) and create a new page that
creates a combined list of episodes, sorted by broadcast date.
## User Stories
- [ ] User can see a table of podcast episodes
- [ ] User can see rows in this table showing a clickable episode icon, the
title of the episode, and the date it was originally broadcast.
- [ ] User can scroll through the list
- [ ] User can click on the episode icon to display that episodes page on
the Podbean web site.
## Bonus features
- [ ] User can see rows in the episode table have alternating background
colors.
- [ ] User can see a summary above the episode table showing the number
of episodes for each podcast.
- [ ] User can see a clickable checkbox next to each podcast name in the
summary above the episode table.
- [ ] User can click the radio button next to the podcast name to include
episodes for that podcast in the episode table.
## Useful links and resources
- [Puppeteer](https://github.com/GoogleChrome/puppeteer)
- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)
- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)
- Hint! You can use the following code to help you get started with this
project. You can execute this using the command line command `node puptest`.
```
// puptest.js
const puppeteer = require('puppeteer');
const run = async () => {
return new Promise(async (resolve, reject) => {
try {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto("https://www.podbean.com/podcast-detail/d4un8-57595/JavaScript-Jabber-Podcast");
let episodeLinks = await page.evaluate(() => {
return Array.from(document.querySelectorAll('a.title')).map((item) => ({
url: item.getAttribute('href'),
text: item.innerText
})
);
});
browser.close();
return resolve(episodeLinks);
} catch (e) {
return reject(e);
}
})
}
run()
.then(console.log)
.catch(console.error);
```
- When you have completed this project check out the advanced project
[MyPodcast Library](../3-Advanced/MyPodcast-Library-app.md)
## Example projects
N/a

70
pt-BR/Projetos/2-Intermediario/QRCode-Badge-App.md
Unescape View File

@ -0,0 +1,70 @@
# QRCode Badge Generator
**Tier:** 2-Intermediate
At some point in your career you will probably find yourself involved helping
to coordinate a company-sponsored event or a local technical Meetup. It's not
uncommon in these types of gatherings for attendees to want to exchange contact
information between themselves.
But how to do that? Attendees could always exchange business cards or write
down each others email or social media account names, but that can be slow and
error prone. Wouldn't it be nice to be able to scan a each others badges to
capture this type of information quickly and more dependably?
If you answered 'Yes!" to this question then QRCode Badge Generator is an
app you will be interested in creating. The objective of this application is
to collect a meeting attendee's name, email address, Twitter, and GitHub
account names and print a name badge with a QRcode that can be scanned using
a smartphone.
### Requirements & Constraints
- For this app you'll want to use the NPM package
[QRCode Generator](https://www.npmjs.com/package/qrcode-generator) to encode
the information you collect from the attendee in a QR code.
- To test your implementation you'll need to download a QR code reader onto
your smartphone or tablet. There are many such readers that are free of charge.
Check the app store for your device to find the one that best suites your needs.
## User Stories
- [ ] User can see an input panel containing input fields for the attendee
name, email address, Twitter account name, GitHub account name, and 'Cancel'
and 'Create' buttons.
- [ ] User can enter data into these input fields. Note that attendee name
and email address are required, but the Twitter and GitHub account names are
optional fields.
- [ ] User can click the 'Cancel' button to clear all input fields as well as
the badge panel (see below) if it has been created.
- [ ] User can click the 'Create' button to generated an image of the
attendees name badge.
- [ ] User can see an error message if any of the following are true:
- Required fields are empty
- A first name and last name have not been entered
- Email input field isn't a properly formatted email address
- Twitter account name doesn't start with '@'
- [ ] User can see an badge panel displayed on screen containing this
information, plus a QR code encoded with this information.
## Bonus features
- [ ] User can see a 'Print' button below the badge panel.
- [ ] User can see the 'Print' button enabled only after the input fields
have been validated and the badge is displayed in the badge panel.
- [ ] User can make corrections to the input fields and click 'Create' to
update the contents of the badge panel.
- [ ] User can click the 'Print' button to reproduce the badge panel on a
label or hardcopy.
- [ ] User can see the '@' symbol automatically prepended to the Twitter
account name so it doesn't have to be manually entered.
## Useful links and resources
- [QR code (Wikipedia)](https://en.wikipedia.org/wiki/QR_code)
- [QRCode Generator](https://www.npmjs.com/package/qrcode-generator)
## Example projects
[QRCode Generator](https://kazuhikoarase.github.io/qrcode-generator/js/demo/)

41
pt-BR/Projetos/2-Intermediario/RegExp-Helper-App.md
Unescape View File

@ -0,0 +1,41 @@
# Regular Expression Helper
**Tier:** 2-Intermediate
Regular Expressions should be a valuable part of any developers toolbox. They
provide a concise way to describe a pattern that can be used to test, search,
match, replace, or split the contents of a
string. Regular Expressions provide functionality you might otherwise have to
implement using loops and more lines of code.
The Regular Expression Helper helps you learn more about Regular Expressions
by building a useful tool you'll also be able to use to test expressions
you use in your apps.
## User Stories
- [ ] User can enter a regular expression.
- [ ] User can enter a string the regular expression can be run against.
- [ ] User can click a 'Run' button to test
- [ ] User can see a warning message if no regular expression was entered.
- [ ] User can see a warning message if no string was entered.
- [ ] User can see the matching text highlighted indicating if `test()` was able to locate the pattern in the string.
- [ ] User can see a message if none of the text was matched.
## Bonus features
- [ ] User can select the flags (like 'g') to be used in the regular expression from a dropdown - global, case insensitive, multiline, sticky.
- [ ] User can select the RegExp function to be applied from a dropdown - test, search, or match
- [ ] User can see a message indicating the result of the selected RegExp function.
- [ ] Developer can run automated tests using a testing framework such as
[Jest](https://jestjs.io/)
## Useful links and resources
- [Javascript RegExp](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp)
- [Regular Expressions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions)
## Example projects
- [RegExr](https://regexr.com/)
- [Regular Expressions 101](https://regex101.com/)

87
pt-BR/Projetos/2-Intermediario/Sales-DB-App.md
Unescape View File

@ -0,0 +1,87 @@
# Sales Reciepts
**Tier:** 2-Intermediate
In the [First DB App](../1-Beginner/First-DB-App.md) you were able to learn the basics of
how to use the IndexedDB database that's built into the browser. In Sales
Reciepts you'll take this a step further by creating an app that records
point of sales receipts, presumably for subsequent balancing against cash in
the stores cash register.
The objective of Sales Receipts is to implement point-of-sale functionality for
a merchant and to make a record of all sales in a database.
### Requirements & Constraints
- Developer should implement this app as a frontend application that uses the
IndexedDB database in the browser to record all sales receipts.
- Developer may implement the inventory of items available for sale as an
array of objects in the application source. Each item should be defined with
the following attributes:
- Item number (unique)
- Description
- Unit price
- Developer should use her UI/UX skills to create a pleasant and efficient
window layout that makes it easy for the user to purchase items and display
purchase history.
- 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.
## User Stories
- [ ] User can see an purchase panel containing buttons for each item containing
the item number, description, and unit price, as well as a 'Clear' and a
'Checkout' button.
- [ ] User can click an item button to make a purchase.
- [ ] User can see an field displaying the total sale amount incremented as
items are purchased.
- [ ] User can see a reciept panel displaying the date and time of the sale,
as well as all items selected for purchase. This includes the item number,
description, and unit price.
- [ ] User can click the 'Clear' button to clear all purchases at any time
before checking out.
- [ ] User can click the 'Checkout' button to complete purchase all selected
items. The final total purchase amount will be added to the end of the reciept
panel and all selected items will be added to the database.
- [ ] User can see the receipt panel cleared after all items have been added
to the database.
- [ ] User can see a 'Daily Sales' and a 'Clear All' button at the bottom of
the app window.
- [ ] User can click the 'Daily Sales' button to display all items purchased
by all customers in the receipt panel along with the total of them all.
- [ ] User can click the 'Clear All' button to clear the receipt panel and
delete the record of all purchases from the database.
## Bonus features
- [ ] User can see an thumbnail image of the items on the item buttons.
- [ ] User can see the 'Clear' button replaced by 'Clear Entry' and 'Cancel
All' buttons under the purchase panel
- [ ] User can click the 'Clear Entry' button to clear the last selected item
from the receipt panel. This has the effect of unselecting that item.
- [ ] User can click the 'Cancel All' button to clear all purchases made
before checking out.
- [ ] User can see an input field in the input panel the user may enter the
name of the customer into when a purchase is made. The customer name will be
added to all items purchased by that customer in the receipt panel and in the
rows added to the database.
## 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

74
pt-BR/Projetos/2-Intermediario/Simple-Online-Store.md
Unescape View File

@ -0,0 +1,74 @@
# Simple Online Store
**Tier:** 2-Intermediate
In the [Product Landing Page](../1-Beginner/Product-Landing-Page.md) project you implemented
a landing page to provide your users with information about a product and to
hopefully increase your sites conversion rate.
The goal of the Simple Online Store is to give your users the capability of
selecting a product to purchase, viewing purchase information, adding it to
an online shopping cart, and finally, actually purchasing the products in the
shopping cart.
### Constraints
- Starting out you may implement your product inventory as an array of
Javascript objects if you are developing in Javascript. For other languages
feel free to choose the in memory solution of your choice.
## User Stories
- [ ] User can click on a `View Products` button on the Landing Page to
display the Products Page.
- [ ] User can see a card on the Products Page for each
Product showing the product thumbnail, name, price, a short description,
and a `Select` button.
- [ ] User can see a Product Details page displayed when the `Select` button
is clicked showing the same information from the product card, but also a
unique product id, a long description, `Add to Cart` button, and a
`See More Products` button.
- [ ] User can see a confirmation message when the product is added to the
shopping cart.
- [ ] User can click on the `See More Products` page to return to the
Products Page.
- [ ] User can see a `Shopping Cart` button on both the Landing
Page or the Products Page. Hint: a top bar might be a good common location
for this button.
- [ ] User can click on the `Shopping Cart` button to display the Shopping
Cart page containing the product id, name, price, and quantity
ordered input box for each product previously added to the Shopping Cart.
- [ ] User can see a total purchase amount on the Shopping Card that is
calculated as the sum of the quantities multiplied by the unit price for each
product ordered.
- [ ] User can adjust the quantity ordered for any product to adjust the
total purchase amount.
- [ ] User can click a `Place Order` button on the Shopping Cart Page to
complete the order. User will see a confirmation number when the order has been
placed.
- [ ] User can click a `Cancel Order` button on the Shopping Cart Page to
cancel the order. User will see the product quantities and the total purchase
amount reset to zero.
- [ ] User can click a `See More Products` button on the Shopping Cart Page
to return to the Products Page. If the order hasn't been placed yet this will
not clear the products that have already been added to the Products Page.
## Bonus features
- [ ] User can see an error message if the quantity ordered exceeds the
"on hand" quantity of the product.
- [ ] User can specify a bill to and ship to address when the order is
placed from the Shopping Cart Page
- [ ] User can see shipping charges added to the total purchase amount
- [ ] User can see sales taxes added to the total purchase amount
- [ ] Developer will implement the product inventory in an external file or
a database.
## Useful links and resources
There are plenty of eCommerce Site Pages out there. You can use [Dribbble](https://www.dribbble.com) and [Behance](https://www.behance.net) for inspiration.
## Example projects
- [eCommerce Animations](https://codepen.io/RSH87/pen/RagqEv)

45
pt-BR/Projetos/2-Intermediario/Sports-Bracket-Generator.md
Unescape View File

@ -0,0 +1,45 @@
# Sports Bracket Generator
**Tier:** 2-Intermediate
Whether your main sport is soccer, baseball, cricket, or competitive
Esports following the progress of your favorite team during tournaments is an
activity enjoyed by many.
Tracking team progress is traditionally done using a horizontal tree diagram
showing all of the initial matches on the lefthand side. At the end of each
match the winner advances to the next round in the tournament along with the
winner of the adjacent match. Columns in the diagram are used to represent
each round and contain one-half of the teams in the adjacent column on the left
and twice as many teams as the adjacent column to the right. The number of
teams in each column decreases from left to right until the last round
(column) contains the final winner in the tournament.
The SportsBracket Generator automates the process of creating this type of chart by
drawing it in a browser window to relieve the user from having to draw it by
hand.
## User Stories
- [ ] User can enter the name of the tournament
- [ ] User can enter the starting and ending dates of the tournament
- [ ] User can enter the number of teams competing in the tournament
- [ ] User can see a warning if either the starting or ending date is
invalid
- [ ] User can see a warning if an odd number of competing teams is entered
## Bonus features
- [ ] User can enter the competing team names for each match
- [ ] User can enter the date for each match
- [ ] User can enter the final score for each match
- [ ] User can expect that this data will persist across sessions
## Useful links and resources
- [Bracket (tournament)](https://en.wikipedia.org/wiki/Bracket_(tournament))
## Example projects
- [Pure CSS & DOM Sports Bracket](https://codepen.io/cbleslie/pen/ZOLLXg)
- [Responsive Sports Bracket](https://codepen.io/MrCaseiro/pen/bxJpwV)

38
pt-BR/Projetos/2-Intermediario/String-Art.md
Unescape View File

@ -0,0 +1,38 @@
# StringArt
**Tier:** 2-Intermediate
The purpose of String Art is to provide the developer with practice creating a
simple animated graphic, using geometry in the animation algorithm, and
creating something that's visually pleasant to watch.
String Art draws a single multicolored line which smoothly moves until one
end touches a side of the enclosing window. At the point it touches a "bounce"
effect is applied to change it's direction.
A ripple effect is created by only retaining 10-20 images of the line as it
moves. Older images are progressively faded until they disappear.
Animation libraries are not allowed. Use only Vanilla HTML/CSS/JavaScript.
## User Stories
- [ ] Start by drawing a multicolored line at a random position within the boundary of it's enclosing window
- [ ] Each 20ms draw a new copy of the line at a new position based on a trajectory - the incremental distance from the previous line based on the endpoints
- [ ] When either endpoint of the line touches the boundary of the enclosing window change it's direction and randomly alter its angle
- [ ] Progressively fade the intensity of old lines so that only the most recent 10-20 lines are visible to create the sense of movement or "ripple"
## Bonus features
- [ ] User can specify the length of the line and it's velocity
- [ ] User can specify the multiple lines within the window, all moving along different trajectories and velocities
## Useful links and resources
- [Using Multistep Animations & Transitions](https://css-tricks.com/using-multi-step-animations-transitions/)
- [Animation Basics](https://www.khanacademy.org/computing/computer-programming/programming/animation-basics/a/what-are-animations)
## Example projects
This project is very close, but has a small enclosing window and is monochromatic.
[Daniel Cortes](https://codepen.io/dgca/pen/dpxreO)

27
pt-BR/Projetos/2-Intermediario/This-or-That-Game.md
Unescape View File

@ -0,0 +1,27 @@
# This or That Game
**Tier:** 2-Intermediate
A game in which the user can select their favorite image between two choices.
**Note**: `image`s - might be dogs (as in the example below), cats, cars, houses, pretty much anything.
## User Stories
- [ ] User can see two images
- [ ] User can select it's favorite from the two images
- [ ] After a selection is made, other 2 images are displayed
## Bonus features
- [ ] Add a smooth animation when switching between images
- [ ] Save the votes in a database
- [ ] Add a leaderboard in which the user can see the top 10 voted images
## Useful links and resources
- [Public APIs](https://github.com/public-apis/public-apis) - access to a lot of Public APIs
## Example projects
- [This or That (w/ dogs) by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/rNBRYKZ)

38
pt-BR/Projetos/2-Intermediario/Timezone-Slackbot.md
Unescape View File

@ -0,0 +1,38 @@
# Timezone Slackbot - TZ
**Tier:** 2-Intermediate
Team members often need to find out each others timezone as the first step
in finding times for meetings and pair programming sessions. To help with this
the Timezone Slack bot accepts as list of Slack user names and displays the
the timezone for each user in a stacked format as follows:
```
-12 -11 -10 -9 -8 -7 -6 -5 -4 -3 -2 -1 0 +1 +2 +3 +4 +5 +6 +7 +8 +9 +10 +11 +12 +13 +14
Fred X
Nisha X
Ming X
.
.
.
```
Note that this format is provided for descriptive purposes only. When
implemented a more pleasing and user-friendly format may be used.
## User Stories
- [ ] User can enter `/tz <user-name> <user-name>...<user-name>` to display tabular representation showing each users timezone
- [ ] User can see information displayed using alternate row colors to increase clarity and readability
## Bonus features
- [ ] User can see the persons timezone displayed next to their name. For example, 'IST' for India Standard Time
## Useful links and resources
More information about timezones can be found [here](https://www.timeanddate.com/time/current-number-time-zones.html)
## Example projects
[Quickly Determine What Country and Time Zone Your Coworkers Are in This Week Using This Tool](https://lifehacker.com/quickly-determine-what-country-and-time-zone-your-cowor-1833011887)

31
pt-BR/Projetos/2-Intermediario/To-Do-App.md
Unescape View File

@ -0,0 +1,31 @@
# To-Do App
**Tier:** 2-Intermediate
The classic To-Do application where a user can write down all the things he wants to accomplish.
## User Stories
- [ ] User can see an `input` field where he can type in a to-do item
- [ ] By pressing enter (or a button), the User can submit the to-do item and can see that being added to a list of to-do's
- [ ] User can mark a to-do as `completed`
- [ ] User can remove a to-do item by pressing on a button (or on the to-do item itself)
## Bonus features
- [ ] User can edit a to-do
- [ ] User can see a list with all the completed to-do's
- [ ] User can see a list with all the active to-do's
- [ ] User can see the date when he created the to-do
- [ ] When closing the browser window the to-do's will be stored and when the User returns, the data will be retrieved
## Useful links and resources
- [localStorage](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage)
## Example projects
- [Todo App built with React](http://todomvc.com/examples/react/#/)
- [To Do List on Codepen](https://codepen.io/yesilfasulye/pen/eJIuF) by [Burak Kaya](https://codepen.io/yesilfasulye/)
- [Todo App in Plain JavaScript](https://safdarjamal.github.io/todo-app/)
- [Todo App in Golang](https://github.com/schadokar/go-to-do-app)

56
pt-BR/Projetos/2-Intermediario/Typing-Practice-App.md
Unescape View File

@ -0,0 +1,56 @@
# Typing Practice
**Tier:** 2-Intermediate
Some things are so obvious they can be easily overlooked. As a developer
your ability to type quickly and accurately is one factor that influences
your development productivity. The objective of the Typing Practice app is
to provide you with typing practice along with metrics to allow you to
measure your progress.
Typing practice displays a word which you must then type within a specific
interval of time. If the word is incorrectly typed it stays on
screen and the time interval remains the same. But when the word is correctly
typed a new word is displayed and the time interval is slightly reduced.
Hopefully, this repetitive practice will help you improve both your typing
speed and accuracy.
## User Stories
- [ ] User can see the time interval words must be typed in displayed in
the app window.
- [ ] User can see the number of successful attempts and the number of total
attempts in a score box.
- [ ] User can click a 'Start Practice' button to start the practice session.
- [ ] User can see the prompt word displayed in a text box.
- [ ] User can begin typing the word in a text input box.
- [ ] User can see the letters that have been typed flash if an incorrect
letter is entered and the text input box will be cleared.
- [ ] User can see the a message adjacent to the text input box indicating
the user should try again if an incorrect letter is entered.
- [ ] User can see the number of total attempts incremented in the score box.
- [ ] User can see a congratulations message if the word is correctly typed.
- [ ] User can see the time interval words must be typed decremented by a
small amount if the word is correctly typed.
- [ ] User can see the number of successful attempts incremented in the score
box if the word was correctly typed.
- [ ] User can click a 'Stop Practice' button to stop the practice session.
## Bonus features
- [ ] User can hear a unique audible tone signalling when a new word is
displayed, a word is correctly entered, or an incorrect letter is typed in
the word.
- [ ] User can login to the app
- [ ] User can see cumulative performance statistics across all of his/her
practice sessions.
## Useful links and resources
- [keydown](https://developer.mozilla.org/en-US/docs/Web/Events/keydown)
- [setInterval](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval)
## Example projects
[Twiddler Typing Tutor](http://twiddler.tekgear.com/tutor/twiddler.html)

24
pt-BR/Projetos/2-Intermediario/Voting-App.md
Unescape View File

@ -0,0 +1,24 @@
# Voting App
**Tier:** 2-Intermediate
Allow users to vote give multiple choices
## User Stories
- [ ] User can see a list of items he can vote on
- [ ] These items must have a button that the user can click on to vote
- [ ] After the user clicked a button, the user should see all the votes
## Bonus features
- [ ] Store items and votes in a database
- [ ] Only allow authenticated users to vote
## Useful links and resources
- [Firebase](https://firebase.google.com) for a realtime database
## Example projects
- [Voting App by Florin Pop on Codepen](https://codepen.io/FlorinPop17/full/NWKQWmq)

29
pt-BR/Projetos/2-Intermediario/math-editor.md
Unescape View File

@ -0,0 +1,29 @@
# Math Formula Editor
**Tier:** 2-Intermediate
An app (desktop or web) which you can use to edit different kinds of math formulas. The app will be particularry useful for doing your math homework digitally.
The app will probably use a math markup system such as LaTeX.
## User Stories
- [ ] User can write to a text document
- [ ] User can add a math formula to that text document
- [ ] User can save the document either to a database or as a file locally
- [ ] User can load the file and all the formulas should be still intact
## Bonus features
- [ ] User can change the font size of text
- [ ] User can change other attributes of text (color, bold, etc.)
- [ ] User can add images to the document
## Useful links and resources
- [Mathquill](http://mathquill.com/)
## Example projects
- [L'math, a math editor for finnish high school students, change the language on the top left corner](https://www.lehtodigital.fi/lmath/?p=download)
- [Online demo of a simple math editor](https://math-demo.abitti.fi)

32
pt-BR/Projetos/3-Avançado/Battleship-Bot.md
Unescape View File

@ -0,0 +1,32 @@
# Battleship Bot
**Tier:** 3-Advanced
Battleship Bot takes the [Battleship Game Engine](./Battleship-Game-Engine.md)
to the next level. This challenge uses your Battleship Game Engine to create a
presentation layer using Discord's bot API to allow you to play the game
via a Discord chat.
## User Stories
- [ ] User can display game rules by entering `bb help` into the chat window.
- [ ] User can start a game by entering `bb start` into the chat
- [ ] User can target a cell by entering `bb shoot r,c` into the chat window, where `r` and `c` are the row and column coordinates of the cell to be targeted.
- [ ] User can see the game board showing hits and misses displayed by the bot after each shot is taken
- [ ] User can see a congratulations message after the shot that sinks the last remaining ship.
## Bonus features
- [ ] User can surrender a game by entering `bb surrender` in the chat window.
- [ ] User can see a card containing a graphical representation of the hits and misses rather than a simple 2D table of characters.
## Useful links and resources
- [Battleship Game Engine](./Battleship-Game-Engine.md)
- [How to Create a Discord Bot Under 15 Minutes](https://medium.freecodecamp.org/how-to-create-a-discord-bot-under-15-minutes-fb2fd0083844)
- [Using Embeds in Messages](https://anidiots.guide/first-bot/using-embeds-in-messages)
- [Discord Developer Portal](https://discordapp.com/developers/docs/intro)
## Example projects
- [Gamebot(Battleship)](https://repl.it/talk/challenge/GameBot-Battleship/8813)

74
pt-BR/Projetos/3-Avançado/Battleship-Game-Engine.md
Unescape View File

@ -0,0 +1,74 @@
# Battleship Game Engine
**Tier:** 3-Advanced
Battleship Game Engine (BGE) implements the classic turn-based board game as a
package that's separated from any presentation layer. This is a type of
architectural pattern that useful in many application since it allows
any number of apps to utilize the same service.
The BGE itself is invoked through a series of function calls rather than
through directly coupled end user actions. In this respect using the BGE is
is similar to using an API or a series of routes exposed by a web server.
This challenge requires that you develop the BGE and a very thin, text-based
presentation layer for testing that's separate from the engine itself. Due to
this the User Stories below are divided two sets - one for the BGE and one
for the text-based presentation layer.
BGE is responsible for maintaining game state.
## User Stories
### BGE
- [ ] Caller can invoke a `startGame()` function to begin a 1-player game. This function will generate an 8x8 game board consisting of 3 ships having a width of one square and a length of:
- Destroyer: 2 squares
- Cruiser: 3 squares
- Battleship: 4 squares
`startGame()` will randomly place these ships on the board in any direction and will return an array representing ship placement.
- [ ] Caller can invoke a `shoot()` function passing the target row and column coordinates of the targeted cell on the game board. `shoot()` will return indicators representing if the shot resulted in a hit or miss, the number of ships left (i.e. not yet sunk), the ship placement array, and an updated hits and misses array.
Cells in the hits and misses array will contain a space if they have yet to be targeted, `O` if they were targeted but no part of a ship was at that location, or `X` if the cell was occupied by part of a ship.
### Text-based Presentation Layer
- [ ] User can see the hits and misses array displayed as a 2 dimensional character representation of the game board returned by the `startGame()` function.
- [ ] User can be prompted to enter the coordinates of a target square on the game board.
- [ ] User can see an updated hits and misses array display after taking a shot.
- [ ] User can see a message after each shot indicating whether the shot resulted in a hit or miss.
- [ ] User can see an congratulations message after the shot that sinks the last remaining ship.
- [ ] User can be prompted to play again at the end of each game. Declining to play again stops the game.
## Bonus features
### BGE
- [ ] Caller can specify the number of rows and columns in the game board as a parameter to the `startGame()` function.
- [ ] Caller can invoke a `gameStats()` function that returns a Javascript object containing metrics for the current game. For example, number of turns played, current number of hits and misses, etc.
- [ ] Caller can specify the number of players (1 or 2) when calling `startGame()` which will generate one board for each player randomly populated with ships.
`shoot()` will accept the player number the shot is being made for along with the coordinates of the shot. The data it returns will be for that player.
### Text-based Presentation Layer
- [ ] User can see the current game statics at any point by entering the phrase `stats` in place of target coordinates. (Note that this requires the `gameStats()` function in the BGE)
- [ ] User can specify a two player game is to be played, with each player alternating turns in the same terminal session (Note that this requires corresponding Bonus Features in the BGE)
- [ ] User can see the player number in prompts associated with the inputs in each turn.
- [ ] User can see both players boards at the end of each turn.
## Useful links and resources
- [Battleship Game (Wikipedia)](<https://en.wikipedia.org/wiki/Battleship_(game)>)
- [Battleship Game Rules (Hasbro)](https://www.hasbro.com/common/instruct/battleship.pdf)
## Example projects
This YouTube video shows how a text-based [Battleship Game](https://www.youtube.com/watch?v=TKksu3JXTTM) is played.
The following example is provided as a demonstration of the Battleship game if it is unfamiliar to you. Remember you are to implement a text based presentation layer for testing.
- [Battleship Game by Chris Brody](https://codepen.io/CodifyAcademy/pen/ByBEOz)

96
pt-BR/Projetos/3-Avançado/Boole-Bot-Game.md
Unescape View File

@ -0,0 +1,96 @@
# Boole Bots Game
**Tier:** 3-Advanced
Boole Bots is a game that is not only fun, but also an aid in helping to
understand basic Boolean logic. This game has an arena of 8x8 game tiles in
which your bots move at random speeds and trajectories. The Bots are assigned
boolean values of 0 or 1 and boolean operations - AND, OR, NOR, NOT.
When a bot collides with another bot its boolean operation is applied to both
it and the other bots' boolean value to determine which one wins or looses, or
if the collision results in a tie. Loosing bots disappear and winning bots
continue moving about the arena until only one remains.
### Requirements & Constraints
- Developers may use graphics and game physics libraries to build the game.
## User Stories
- [ ] User can see the game window with these components
- Game configuration input panel
- Leaderboard showing bots ranked by their scores
- Game controls
- Arena of 8x8 game tiles where the bots battle
### Game Configuration Panel
- [ ] User can see a game configuration panel with these subcomponents:
- Four bot panels with controls to allow the user to input a unique bot
name, select its Boolean value and operation, select the bots speed using a
slider, and a dropdown to specify its starting direction - North, South,
East, West
- [ ] User can enter a unique name for each bot into an input text box
- [ ] User can see an error message if the name entered is the same name
assigned to another bot.
- [ ] User can select the bots Boolean value (0 or 1) from a dropdown.
- [ ] User can select a bots Boolean operation from a dropdown - AND, OR, XOR,
or NOT.
- [ ] User can move the speed slider to set a bots speed
- [ ] User can select a bots starting direction from the direction dropdown.
- [ ] User can see the bot randomly assigned to a tile in the arena once its
name has been defined.
### Game Controls
- [ ] User can a button in the game control panel to 'Battle!'
- [ ] User can click the 'Battle!' button to start the bot battle in the arena.
- [ ] User can see bots move based on the speed and direction assigned to them.
- [ ] User can see the 'Battle!' button text change to 'Stop!' once a battle
is started.
- [ ] User can click the 'Stop!' button to halt gameplay
- [ ] User can see the 'Stop!' button text change back to 'Battle!' once a
single bot wins the match.
### Arena
- [ ] User can see bots bounce off the boundary walls of the arena in a new
direction
- [ ] User can see bots pause for an instant when they collide.
- [ ] User can see a bot disappear after colliding if the result of it's
boolean operation appied to its boolean value and that of the bot is has
collided with result in 0.
- [ ] User can see a bot that wins a collision resume its path at the same
speed and direction.
- [ ] User can see both colliding bots resume their paths at the same speed
and direction in the event of a tie. In other words, when the collision resulted
in the same boolean result (0 or 1) for both.
- [ ] User can see gameplay stop when only one bot remains.
### Leaderboard
- [ ] User can see the display of wins and losses for each bot on the
leaderboard
- [ ] User can see the tally of wins incremented for bots winning a collision.
- [ ] User can see the tally of losses decremented for bots loosing a collision.
## Bonus features
- [ ] User can see a log panel displaying the details of game milestones.
Hint: This may be useful to the Developer during development and debugging.
- [ ] User can see a game clock displaying current elapsed game time that is
updated every second.
- [ ] User may choose a bots starting direction as North, Northeast, Southeast,
South, Southwest, West, or Northwest.
- [ ] User may specify the dimensions of the arena.
- [ ] User may select an unique icon for a bot from a palette of icons. Icons
in the palette are disabled once they are assigned.
- [ ] User can see the bot with the most wins highlighted in some way in the
Leaderboard.
## Useful links and resources
- [George Boole (Wikipedia)](https://en.wikipedia.org/wiki/George_Boole)
- [Boolean Algebra (Wikipedia)](https://en.wikipedia.org/wiki/Boolean_algebra)
- [Video Game Physics Tutorial - Part I: An Introduction to Rigid Body Dynamics](https://www.toptal.com/game/video-game-physics-part-i-an-introduction-to-rigid-body-dynamics)
## Example projects
- N/a

79
pt-BR/Projetos/3-Avançado/Bug-Race-Game.md
Unescape View File

@ -0,0 +1,79 @@
# Bug Race
**Tier:** 3-Advanced
In this project you will test your animation skills by creating a game that
lets the user race bugs while trying to guess the winner. As part of this
you'll need to provide the user with various controls that allow the game to
be customized including bug icons, assigning names to the bugs, making a choice
of who the winner might be, and bug speed.
### Constraints
- The developer will need to select the bug icons to be used in the game
- The developer should randomly adjust the speed of each bug before a race
starts so they travel at different rates within the speed selected by the
user (slow, normal, or fast).
- It is up to the developer to define the speed ranges associated with the slow,
normal, and fast speed setting.
- You may use an animation library, but you'll get more out of this project
if you try to implement it using native language features.
## User Stories
- [ ] User can see:
- An input panel containing controls to configure the game's UI and
operation.
- A race track consisting of four horizontal lanes the bugs will travel in
- A radio button associated with each lane to allow the user to select a
potential winner
- A 'Start' button.
### Game Controls
- [ ] User can see the following controls in the input panel.
- A list of race lane numbers with radio buttons for each showing
thumbnails for three unique bugs, and a text box the user can use to
give the bug a name.
- An Speed selection control with three radio buttons - Slow, Normal, Fast
- [ ] User can click a radio button to select the bug icon to be assigned
to a lane.
- [ ] User can see an warning message if the same icon is selected for more
than one lane.
- [ ] User can enter a name for the bug in each lane.
- [ ] User can see an error message if the same name is repeated for more than
one bug.
- [ ] User can select the bug speed by clicking one of the Speed radio buttons
### Racing
- [ ] User can select a potential winner by clicking on the radio button on
any lane.
- [ ] User can start a race by clicking on the 'Start' button
- [ ] User can see the 'Start' button is disabled until the race is over
- [ ] User can see an error message if no winner was selected.
- [ ] User can see bugs race across their assigned lane to the finish line
- [ ] User can see all bugs stop moving when the first one reaches the finish
line
- [ ] User can see game metrics updated to show the number of races run in
this session.
## Bonus features
- [ ] User can see race metrics for each bug showing the number of races
run, number of wins, and number of losses.
- [ ] User can see the winning bug bounce when it wins a race
- [ ] User can see loosing bugs flip on their backs when they loose a race
- [ ] User can hear unique sounds played when the race starts and ends.
## Useful links and resources
- [3D Bug Images](https://www.google.com/search?q=3d+bug+drawings&tbm=isch&source=hp&sa=X&ved=2ahUKEwjxkNT7--jhAhUI-6wKHW3_CgQQsAR6BAgHEAE&biw=1279&bih=550)
- [Basic Animations (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations
)
- [How to build a simple Sprite animation in Javascript](https://medium.com/dailyjs/how-to-build-a-simple-sprite-animation-in-javascript-b764644244aa)
- [Javascript Animations](https://javascript.info/animation)
## Example projects
- [Arcade Game](https://jdmedlock.github.io/arcadegame/)
- [Drag Race Animation](https://codepen.io/Delime/pen/IyuAr)
- [Horse Race](https://codepen.io/nathanielzanzouri/pen/jVgEZY)

50
pt-BR/Projetos/3-Avançado/Calorie-Counter-App.md
Unescape View File

@ -0,0 +1,50 @@
# Calorie Counter
**Tier:** 3-Advanced
Getting and staying healthy requires a combination of mental balance,
exercise, and nutrition. The goal of the Calorie Counter app is to help the
user address nutritional needs by counting calories for various foods.
This app provides the number of calories based on the result of a user search
for a type of food. The U.S. Department of Agriculture MyPyramid Food Raw Data
will be searched to determine the calorie values.
Calorie Counter also provides you, the developer, with experience in transforming
raw data into a format that will make it easier to search. In this case, the
MyPyramid Food Raw Data file, which is an MS Excel spreadsheet, must be
downloaded and transformed into a JSON file that will be easier to load and
search at runtime (hint: take a look at the CSV file format).
## User Stories
- [ ] Developer will create a JSON file containing the food items to be
searched. This will be loaded when the app is started.
- [ ] User can see an panel containing a food description input text box,
a 'Search' button, and a 'Clear' button.
- [ ] User can enter search terms into the food description input text box.
- [ ] User can click on the 'Search' button to search for the matching food.
- [ ] User can see a warning message if no search terms were entered.
- [ ] User can see a warning message if no matches were found.
- [ ] User can see a list of the matching food items, portion sizes, and
calories in a scrollable results panel that is limited to 25 entries.
- [ ] User can click on the 'Clear' button to clear the search terms and
results list.
## Bonus features
- [ ] User can see the count of the number of matching food items adjacent to
the results list.
- [ ] User can use a wildcard character in search terms.
- [ ] User can see more than 25 entries from a search by clicking a Down
icon button to add more matching food items to the search results list.
- [ ] Developer will implement load the MyPyramid data into a database or a
data structure other than an array for faster searching.
## Useful links and resources
[MyPyramid Food Raw Data](https://catalog.data.gov/dataset/mypyramid-food-raw-data)
## Example projects
[Food Calculator](https://www.webmd.com/diet/healthtool-food-calorie-counter)

35
pt-BR/Projetos/3-Avançado/Chat-App.md
Unescape View File

@ -0,0 +1,35 @@
# Chat App
**Tier:** 3-Advanced
Real-time chat interface where multiple users can interact with each other by sending messages.
As a MVP(Minimum Viable Product) you can focus on building the Chat interface. Real-time functionality can be added later (the bonus features).
## User Stories
- [ ] User is prompted to enter a username when he visits the chat app. The username will be stored in the application
- [ ] User can see an `input field` where he can type a new message
- [ ] By pressing the `enter` key or by clicking on the `send` button the text will be displayed in the `chat box` alongside his username (e.g. `John Doe: Hello World!`)
## Bonus features
- [ ] The messages will be visible to all the Users that are in the chat app (using WebSockets)
- [ ] When a new User joins the chat, a message is displayed to all the existing Users
- [ ] Messages are saved in a database
- [ ] User can send images, videos and links which will be displayed properly
- [ ] User can select and send an emoji
- [ ] Users can chat in private
- [ ] Users can join `channels` on specific topics
## Useful links and resources
- [Socket.io](https://socket.io)
- [How to build a React.js chat app in 10 minutes - article](https://medium.freecodecamp.org/how-to-build-a-react-js-chat-app-in-10-minutes-c9233794642b)
- [Build a chat application like Slack - React / JavaScript Tutorial - Youtube](https://www.youtube.com/watch?v=a-JKj7m2LIo)
- [Socket.io Chat App Using Websockets - Youtube Tutorial](https://www.youtube.com/watch?v=tHbCkikFfDE)
## Example projects
- [Chatty2](https://web-chatty.herokuapp.com/)
- [Simple TCP Socket based Chat application](https://github.com/dularish/Simple-TCP-Socket-based-Chat-App)

110
pt-BR/Projetos/3-Avançado/Contribution-Tracker-App.md
Unescape View File

@ -0,0 +1,110 @@
# Contribution Tracker
**Tier:** 3-Advanced
In the [Charity Finder](../2-Intermediate/Charity-Finder-App.md) project you created an app to
help you locate a charity worthy of your contributions. Once a contribution
has been made the goal of the Contribution Tracker app is to track it so to
provide users with a record of all contributions for use in monitoring how
funds are being directed and to provide records for financial reporting
purposes. For example, for tax reporting.
### Constraints
- Developers may use Vanilla JS, or a framework of their choice (like React,
VueJS, etc.).
- Developers should not use libraries for calculating and manipulating monetary
amounts. All calculation and formatting should be done in the language chosen
to develop the application.
- Developers may use a graphics presentation library or service of their choice,
like [AMCharts](https://www.amcharts.com/).
- Developers may choose to have transactions persist across sessions using
either files or databases. Sensitive data, like transactions, must not be
maintained in local storage. Remember that although you can implement
protections it is impossible to totally secure browser applications.
## User Stories
- [ ] User can see a Navigation Bar at the top of each page containing the
application name and a "hamburger" menu with these option:
- Dashboard
- Transactions
- [ ] User can see a Footer Bar at the bottom of each page containing an
About link
### Dashboard Page
- [ ] User can see the Dashboard page when the app is started containing
graphical summaries of the following key metrics. The graphical representation
for each is left up to the Developer.
- Contributions by month for the current year
- Total contributions by year
- Contribution increase/decrease by year
- Average contribution amount by month and year
- [ ] User can return to the Dashboard page, if currently on another page, by
clicking on the 'Dashboard' option in the hamburger menu in the Navigation Bar.
### Transactions Page
- [ ] User can see a transaction input panel containing the following:
- Transaction date
- Payee name
- Amount
- Memo
- Action buttons - 'Clear', 'Add'
- [ ] User can see a tabular transaction ledger containing previously
entered transactions. Each row will also contain a 'Modify' and a 'Delete'
button.
- [ ] User can enter values describing the transaction into the input fields
- [ ] User can click the 'Clear' button to reset all input fields to an
empty state.
- [ ] User can click the 'Add' button to validate the input that has been
entered, add the validated entry to the transaction ledger, and clear the input
fields.
- [ ] User can see a consolidated error message detailing any errors detected
in input fields, including:
- Invalid date
- Blank Payee name
- Non-numeric amount field
- [ ] User can click on the 'Update' button to modify a previously entered
transaction. The transaction details will be copied to the transaction input
panel and the 'Add' button will change to 'Modify'.
- [ ] User can change values in the input fields and click the 'Modify' to
validate the input and update that transactions entry in the ledger. If
successful the 'Modify' button will change back to 'Add' and the input fields
will be cleared.
- [ ] User can click the 'Delete' button to remove a previously entered
transaction. A popup dialog will be displayed containing 'Cancel' and 'Okay'
buttons to cancel or confirm the delete. If the delete is confirmed the
transaction will be removed from the ledger.
- [ ] User can return to the Transactions page, if currently on another page,
by clicking on the 'Transactions' option in the hamburger menu in the Navigation
Bar.
### About Page
- [ ] User can click the About link in the Footer Bar to display information
about the Developer.
- [ ] User can see links to the Developers GitHub and social media accounts
including social media icons (like the Twitter icon).
## Bonus features
- [ ] User can click in the transaction date field to display a calendar
the date can be selected from rather than manually entering it.
- [ ] User can see alternating row background colors in the transaction ledger.
- [ ] User can click on a column heading in the transaction ledger to toggle
the sort sequence on the values in that column.
- [ ] User can see a PDF option near the Transaction Ledger to create a PDF
of all transactions (Hint: checkout how this capability can be implemented via
[Puppeteer](https://github.com/GoogleChrome/puppeteer)).
## Useful links and resources
- [How to Handle Monetary Values in Javascript](https://frontstuff.io/how-to-handle-monetary-values-in-javascript)
- [How to Format Number as Currency](https://flaviocopes.com/how-to-format-number-as-currency-javascript/)
- [Mintable (GitHub)](https://github.com/kevinschaich/mintable)
## Example projects
N/a

64
pt-BR/Projetos/3-Avançado/Elevator-App.md
Unescape View File

@ -0,0 +1,64 @@
# Elevator
**Tier:** 3-Advanced
It's tough to think of a world without elevators. Especially if you have to
walk up and down 20 flights of stairs each day. But, if you think about it
elevators were one of the original implementations of events and event handlers
long before web applications came on the scene.
The objective of the Elevator app is to simulate the operation of an elevator
and more importantly, how to handle the events generated when the buildings
occupants use it. This app simulates occupants calling for an elevator from
any floor and pressing the buttons inside the elevator to indicate the floor
they wish to go to.
### Constraints
- You must implement a single event handler for the up and down buttons on
each floor. For example, if there are 4 floors a single event handler should
be implemented rather than 8 (two buttons per floor).
- Similarly, a single event handler should be implemented for all buttons on
the control panel in the elevator rather than a unique event handler for each
button.
## User Stories
- [ ] User can see a cross section diagram of a building with four floors,
an elevator shaft, the elevator, and an up button on the first floor, up and
down buttons on the second and third floors, and a down button on the fourth
floor.
- [ ] User can see the elevator control panel with a button for each of the
floors to the side of the diagram.
- [ ] User can click the up and down button on any floor to call the
elevator.
- [ ] User can expect that clicking the up and down buttons on any floor
to request the elevator will be queued and serviced in the sequence they were
clicked.
- [ ] User can see the elevator move up and down the shaft to the floor it
was called to.
- [ ] User can click the elevator control panel to select the floor it
should travel to.
- [ ] User can expect the elevator to pause for 5 seconds waiting for a
floor button on the control panel to be clicked. If a floor button isn't
clicked within that time the elevator will process the next call request.
- [ ] User can expect the elevator to return to the first floor when there
are no requests to process.
## Bonus features
- [ ] User can see a warning sound if the number of elevator requests
exceeds the maximum number allowed. This limit is left to the developer.
- [ ] User can hear a sound when the elevator arrives at a floor.
- [ ] User can see an occupant randomly arrive at a floor to indicate when
the user should click the up or down elevator call button on that floor.
- [ ] User can specify the time interval between new occupants arriving to
call an elevator.
## Useful links and resources
[First-in, first out queue (Wikipedia)](https://en.wikipedia.org/wiki/FIFO_(computing_and_electronics))
## Example projects
[Elevator](https://codepen.io/nibalAn/pen/prWdjq)

82
pt-BR/Projetos/3-Avançado/FastFood-App.md
Unescape View File

@ -0,0 +1,82 @@
# Fast Food Simulator App
**Tier:** 3-Advanced
Fast Food simulates the operation of a simple take-away restaurant and is
designed to help the developer put his or her knowledge of Promises and SOLID
design principles to work.
This app simulates customers of a take-away restaurant placing orders and
and waiting for them to be prepared and delivered to a pickup counter. After
placing the order the customer waits on the order to be announced before
picking it up and proceeding to the dining area.
The user stories that make up this app center around four distinct roles:
- User - the end user using the application
- Customer - the simulated Customer
- Order Taker - the simulated Order Taker
- Cook - the simulated Cook
- Server - the simulated Server
This app has quite a few User Stories. Don't be overwhelmed though. Take the
time to sketch out not just the UI, but how the different actors (roles)
interact and incrementally build the app following Agile principles.
### Constraints
- Order tickets can be represented as two different types of Promises - one
the Server waits on while the Cook prepares the order and another the Customer
waits on while in the serving line.
- Use the native equivalent of JS Promises in whichever language you choose
to develop in. JS developers should use native Promises and not `async/await`.
- Create this app using native language features. You may NOT use a simulation
package or library.
- New customers arrive in the order line at a fixed interval of time. In other
words, new customers arrive at a constant rate.
- Order tickets are fulfilled at a fixed interval of time as well. They are
completed at a constant rate.
## User Stories
### Application Operation
- [ ] User can see an input area that allows the entry of the time interval
for customer arrival and a time interval for the fulfilment of an
_order ticket_ by the cook.
- [ ] User can see a customized warning message if the customer arrival
interval or the order fulfilment interval is incorrectly entered.
- [ ] User can start the simulation by clicking on a Start button.
- [ ] User can see an order line area containing a text box showing the
number of customers waiting to place orders.
- [ ] User can see an order area containing text boxes showing the
_order number_ currently being taken.
- [ ] User can see a kitchen area containing a text box showing the
_order number_ that's being prepared and a text box listing the waiting
orders in sequence, along with a count of the number of waiting orders.
- [ ] User can see a Pickup area containing a text box showing the
_order number_ that's currently available for pickup by the Customer and a
text box showing the number of Customers waiting in the serving line.
- [ ] User can stop the simulation at any time by clicking a Stop button.
## Bonus features
- [ ] User can specify how long it takes for an Order Taker to create an
_order ticket_.
- [ ] User can specify how long it takes for the Server to deliver an order
to the customer.
- [ ] User can specify the total amount of time the simulation is to run
once the Start button has been clicked.
- [ ] User can see an animated view of Customers and orders as they move
through the workflow.
## Useful links and resources
- [Fast Food Simulator - Logical Workflow](https://drive.google.com/file/d/1Thfm5cFDm1OjTg_0LsIt2j1uPL5fv-Dh/view?usp=sharing)
- [Agile Manifesto & 12 Principles of Agile Software](http://agilemanifesto.org/)
- [SOLID Principles Every Developer Should Know](https://blog.bitsrc.io/solid-principles-every-developer-should-know-b3bfa96bb688)
- [Using Promises](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)
- [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
## Example projects
- N/a

55
pt-BR/Projetos/3-Avançado/GitHub-Timeline-App.md
Unescape View File

@ -0,0 +1,55 @@
# GitHub Timeline
**Tier:** 3-Advanced
API's and graphical representation of information are hallmarks of modern
web applications. GitHub Timeline combines the two to create a visual history
of a users GitHub activity.
The goal of GitHup Timeline is accept a GitHub user name and produce a
timeline containing each repo and annotated with the repo names, the date
they were created, and their descriptions. The timeline should be one that
could be shared with a prospective employer. It should be easy to read and
make effective use of color and typography.
Only public GitHub repos should be displayed.
## User Stories
- [ ] User can enter a GitHub user name
- [ ] User can click a 'Generate' button to create and display the named
users repo timeline
- [ ] User can see a warning message if the GitHub user name is not a valid
GitHub user name.
## Bonus features
- [ ] User can see a summary of the number of repos tallied by the year they
were created
## Useful links and resources
GitHub offers two API's you may use to access repo data. You may also choose
to use an NPM package to access the GitHub API.
Documentation for the GitHub API can be found at:
- [GitHub REST API V3](https://developer.github.com/v3/)
- [GitHub GraphQL API V4](https://developer.github.com/v4/)
Sample code showing how to use the GitHub API's are:
- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/)
- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js)
You can use this CURL command to see the JSON returned by the V3 REST API for
your repos:
```
curl -u "user-id" https://api.github.com/users/user-id/repos
```
## Example projects
- [CSS Timeline](https://codepen.io/NilsWe/pen/FemfK)
- [Building a Vertical Timeline With CSS and a Touch of JavaScript](https://codepen.io/tutsplus/pen/QNeJgR)

72
pt-BR/Projetos/3-Avançado/GitTweet-App.md
Unescape View File

@ -0,0 +1,72 @@
# GitTweet
**Tier:** 3-Advanced
In the [GitHub Timeline](./GitHub-Timeline-App.md) app you used GitHub's API to
create a timeline of your repos. What could be more powerful that using an API
such as this? Why using two API's, of course.
The goal of GitTweet is to create a GitHub app to tweet when a pull request
is created for one of your repos.
## User Stories
- [ ] User can see an input area tabular display prepopulated with rows for
each of the GitHub repos she owns and a selection checkbox next to each repo
name, a single input date field, and a 'Scan' button.
- [ ] User can click the checkboxes in the repo list to select or deselect
repos for processing.
- [ ] User can enter a date into the date field. This defines the point after
which any new PR requests will be tweeted.
- [ ] User can click the 'Scan' button to identify repos that have had a new
PR created that has not been previously tweeted. In other words. Consecutively
entering the same date to scan from should only generate tweets for PR's that
have not yet been tweeted.
- [ ] User can see an error message if no date was entered, if it is not a
valid date, or if it is a future date.
- [ ] User can see repos highlighted if a tweet will be generated for them
and the 'Scan' button will change to 'Tweet'.
- [ ] User may deselect a repo by clicking on its checkbox. Doing this will
change the button back to 'Scan' and clicking it will repeat the search for
repos that have had new PR's (not yet tweeted) created since the scan date
entered by the user.
- [ ] User may enter an new scan date at this point which also changes the
button back to 'Scan'.
- [ ] User may click the 'Tweet' button to send a tweet bearing the following
message - `Pull Requst #<pr-number> created for repo <repo name> - <repo description>`.
- [ ] User can see this tweet send from her Twitter account.
## Bonus features
- [ ] User does not need to manually enter a scan date. If omitted the scan
will resume from the last scan date which must persist across sessions.
- [ ] User may enter a custom tweet message
- [ ] User repo selections will persist across sessions so they do not have
to be reselected each time.
## Useful links and resources
- [Twitter Developer Docs](https://developer.twitter.com/en.html)
- [GitHub Apps](https://developer.github.com/apps//)
- GitHub offers two API's you may use to access repo data. You may also choose
to use an NPM package to access the GitHub API. Documentation for the GitHub
API can be found at:
- [GitHub REST API V3](https://developer.github.com/v3/)
- [GitHub GraphQL API V4](https://developer.github.com/v4/)
Sample code showing how to use the GitHub API's are:
- [GitHub REST API client for JavaScript ](https://github.com/octokit/rest.js/)
- [GitHub GraphQL API client for browsers and Node](https://github.com/octokit/graphql.js)
You can use this CURL command to see the JSON returned by the V3 REST API for
your repos:
```
curl -u "user-id" https://api.github.com/users/user-id/repos
```
## Example projects
[Zapier GitHub Integration](https://zapier.com/apps/github/integrations/twitter)

36
pt-BR/Projetos/3-Avançado/Instagram-Clone-App.md
Unescape View File

@ -0,0 +1,36 @@
# Instagram Clone
**Tier:** 3-Advanced
A clone of Facebook's Instagram app where you can login/register, create new posts, follow other users and see other people you follows posts
You should create a MVP (Minimum Viable Product) using a Full stack approach such as the MEAN, MERN or VENM Stack to store images to the server and display them to the client.
## User Stories
- [ ] User can register for an account storing their name, email/username and password then login to the app using their credentials
- [ ] User can create a post and store images to the server (Preferably in a database)
- [ ] User has a profile that displays all the images they have uploaded
- [ ] User can follow other users
- [ ] User can see other users posts (people who the user follows)
## Bonus features
- [ ] User can see a global feed of images
- [ ] The feed auth refreshes when a new post is added (You can use Web Sockets)
- [ ] User can send messages to other users
- [ ] User can create a story for followers
## Useful links and resources
- [How to make an Instagram clone](https://www.youtube.com/watch?v=9dRSNQe7PWw)
- [Node & Mongo Basic CRUD Operations](https://codeburst.io/writing-a-crud-app-with-node-js-and-mongodb-e0827cbbdafb)
- [Socket.io](https://socket.io)
- [MERN Stack](http://mern.io/)
- [MEAN Stack](http://mean.io/)
- [User Authentication with Node](https://medium.com/silibrain/using-passport-bcrypt-for-full-stack-app-user-authentication-fe30a013604e)
- [Express File Uploads with Multer](https://scotch.io/tutorials/express-file-uploads-with-multer)
## Example projects
- [Instagram](https://www.instagram.com/)

42
pt-BR/Projetos/3-Avançado/Kudos-Slackbot.md
Unescape View File

@ -0,0 +1,42 @@
# Kudo's Slackbot
**Tier:** 3-Advanced
Have you ever recognized a team mate's contributions or assistance in a Slack
channel only to find that it's lost after a few days? Let _*Kudo's*_ come to
the rescue.
Kudo's is a Slackbot that allows you to create a recognition of someone else's
efforts and to make it available through a simple Slack command.
## User Stories
- [ ] User can create a kudu using the Slack command: `/kudo add <slack-id> <text>` where:
- `<slack-id>` defines the individual receiving the recognition
- `<text>` is your kudo for that person
- [ ] User can modify a kudu using the Slack command: `/kudo replace <kudo-id> <text>` where:
- `<action>` is 'replace' or 'delete'
- `<kudo-id>` is the kudo identifier
- `<text>` is your kudo for that person
- [ ] User can delete a kudu using the Slack command: `/kudo delete <kudo-id>`
- [ ] User may display the most recent _n_ kudos using the Slack command: `/kudo list <n>` where `n` is an integer or `*` for all kudos
- [ ] User may display all kudos for an individual with the Slack command: `/kudo user <slack-id>`
## Bonus features
- [ ] User may list the individual having the most kudos, in descending order, user the Slack command: `/kudo top <n>` where `n` is an integer or `*` for all individuals who have received a kudo
## Useful links and resources
- [Slack API](https://api.slack.com/)
## Example project
- [Kudos Slackbot Example](https://cubic-quince.glitch.me/)
-

30
pt-BR/Projetos/3-Avançado/Movie-App.md
Unescape View File

@ -0,0 +1,30 @@
# Movie Database App
**Tier:** 3-Advanced
Find your next movie or create your watchlist with this App. It include reviews, rating, actors and anything you need to know about the movie.
- This application will help users find their next movie to watch by showing helpful stats
- Resource needed for the project is movie api, examples include Imdb, MovieDB etc.
## User Stories
- [ ] User can see all the latest movie on the front page
- [ ] User scroll down to see all other movies according to release date
- [ ] User can click on any of the movie to go to their own separate page
- [ ] User can then see all about the movie ratings, about, actors present on each separate movie page
## Bonus features
- [ ] User can create an account
- [ ] User can create their own watch list
- [ ] User can review movies
## Useful links and resources
- [MovieDB Api](https://developers.themoviedb.org/3)
## Example projects
[Movie Database App w/ React by Oliver Gomes](http://phobic-heat.surge.sh/)
[Movie Browser App w/ React&Redux&Bootstrap by Nataliia Pylypenko](https://api-cinema-10d15.firebaseapp.com/)

92
pt-BR/Projetos/3-Avançado/MyPodcast-Library-app.md
Unescape View File

@ -0,0 +1,92 @@
# My Podcast Library
**Tier:** 3-Advanced
In the [GitHub Status](../1-Beginner/GitHub-Status-App.md) and [Podcast Directory](../2-Intermediate/Podcast-Directory-App.md) you learned what web scraping is and how you can
use it as an alternative data source when API's and backend databases aren't
available. The _My Podcast Library_ app merges your newfound knowledge of
web scraping with your frontend skills to extend the simple Podcast Directory
app into something more complex and useful.
The goal of _My Podcast Library_ is to build a more personalized library of
your favorite podcasts and episodes. In this app you'll use
[Puppeteer](https://github.com/GoogleChrome/puppeteer) and
[Podbean](https://www.podbean.com) to create an app to maintain your
personal library of podcasts.
This project is described in detail by the following user stories, but feel
free to use your imagination.
## User Stories
### Favorite Podcast Display
- [ ] User can see their favorite podcasts in a tabular display area
- [ ] User can see the message 'No podcasts added yet' in watermark format
in this area if no podcasts have been added.
- [ ] User can see an overview of each favorite podcast that has been added
in this area. This includes the podcast icon, it's name, and the number of
most recent episodes.
- [ ] User can click on the podcast icon to display a page containing a list
of the most recent episodes.
### Favorite Podcast Entry
- [ ] User can see a '+' button at the top of the favorite podcast area with
the hover text 'Add a new podcast'
- [ ] User can click the '+' button to display a popup panel to allow a new
favorite podcast added. This panel contains an input area containing a text
input box for the podcasts page on Podbean (e.g.
[Techpoint Charlie](https://www.podbean.com/podcast-detail/k76vd-8adc7/Techpoint-Charlie-Podcast)), a 'Save' button, and a 'Cancel' button.
- [ ] User can click the 'Save' button to validate the URL and add the
podcast to the favorite podcast area.
- [ ] User can see a warning message if the url doesn't start with
```https://www.podbean.com/podcast-detail/``` or if navigating to the page
results in a 404 error.
- [ ] User can see valid URLs for favorite podcasts retained across sessions.
- [ ] User can click the 'Cancel' button to discard any data and dismiss the
popup.
### Most Recent Episodes for a Podcast Page
- [ ] User can see a table of podcast episodes
- [ ] User can see rows in this table showing a clickable episode icon, the
title of the episode, the date it was originally broadcast, and a heart icon
button to mark it as a favorite.
- [ ] User can scroll through the list
- [ ] User can click on the episode icon to display that episodes page on
the Podbean web site.
- [ ] User can click on an episode's heart icon to mark it as a favorite.
- [ ] User can click on an episode's heart icon to remove it as a favorite.
- [ ] User can see the table sorted with most recent episodes at the top,
followed by those previously marked as favorites.
- [ ] User can see favorite episodes persist across sessions.
## Bonus features
### Episode Ratings
- [ ] User can see 5 star icons with each episode that denotes how the user
rates it.
- [ ] User may click stars from left-to-right to rate an episode. Stars are
filled or changed to a new color when clicked.
- [ ] User may change a rating by clicking on the stars from right-to-left
to deselect them.
- [ ] User can see the list of favorite episodes on the page sorted in
descending rating sequence.
### Searching & Hashtags
- [ ] User can enter a freeform hashtag with an episode on the most recent
episodes page. This hashtag does not need to be predefined.
- [ ] User can see a search box on the main page and a 'Search' button
- [ ] User can enter hashtags in the search box to display a page of episodes
from any podcast with the same format as the most recent episodes page.
- [ ] User can click on a cancel button on the search results page to return
to the main page.
## Useful links and resources
- [Puppeteer](https://github.com/GoogleChrome/puppeteer)
- [Web Scraping with a Headless Browser: A Puppeteer Tutorial](https://www.toptal.com/puppeteer/headless-browser-puppeteer-tutorial)
- [querySelectorAll](https://developer.mozilla.org/en-US/docs/Web/API/ParentNode/querySelectorAll)
## Example projects
N/a

62
pt-BR/Projetos/3-Avançado/NASA-Exoplanet-Query.md
Unescape View File

@ -0,0 +1,62 @@
# NASA Exoplanet Query
**Tier:** 3-Advanced
Since 1992 over 4,000 exoplanets have been discovered outside our solar
system. The United States National Aeronautics and Space Administration (NASA)
maintains a publicly accessible archive of the data collected on these in
comma separated value (CSV) format.
The objective of the NASA Exoplanet Query app is to make this data available
for simple queries by its users.
### Requirements & Constraints
- The Developer should implement a means of efficiently loading the exoplanet
CSV data obtained from NASA to minimize any delays when the application starts.
- Similarly, the Developer should utilize a data structure and search mechanism
that minimizes the time required to query the exoplanet data and display the
results.
- The Developer will need to review the Exoplanet Archive documentation to
understand the format of the data fields.
## User Stories
- [ ] User can see an query input panel containing dropdowns allowing the
user to query on year of discovery, discovery method, host name, and discovery
facility.
- [ ] User can also see 'Clear' and 'Search' buttons in the query input panel.
- [ ] User can select a single value from any one or all of the query
dropdowns.
- [ ] User can click the 'Search' button to search for exoplanets matching
all of the selected query values.
- [ ] User can see an error message if the 'Search' button was clicked, but
no query values were selected.
- [ ] User can see the matching exoplanet data displayed in tabular format
in an results panel below the query panel. Only the queriable fields should
be displayed.
- [ ] User can click the 'Clear' button to reset the query selections and
clear any data displayed in the results panel, if a search had been performed.
## Bonus features
- [ ] User can see the host name as a hyperlink to NASA's Confirmed Planet
Overview Page for that planet
- [ ] User can click on the host name to display the Confirmed Planet Overview
Page in a new browser tab.
- [ ] User can see icons (such as up and down symbols) in the column headers
- [ ] User can click on the up symbol to sort the rows in the results panel
in ascending order on the values in that column.
- [ ] User can click on the down symbol to sort the rows in the results panel
in descending order on the values in the column.
## Useful links and resources
- [Big O Notation (Wikipedia)](https://en.wikipedia.org/wiki/Big_O_notation)
- [CSV2JSON](../1-Beginner/CSV2JSON-App.md)
- [Exoplanet (Wikipedia)](https://en.wikipedia.org/wiki/Exoplanet)
- [NASA Exoplanet Archive](https://exoplanetarchive.ipac.caltech.edu/cgi-bin/TblView/nph-tblView?app=ExoTbls&config=planets)
## Example projects
N/a

53
pt-BR/Projetos/3-Avançado/Shell-Game.md
Unescape View File

@ -0,0 +1,53 @@
# Shell Game
**Tier:** 3-Advanced
A Shell game is a classic gambling game that dates back to ancient Greece.
Playing it requires three shells, a pea, hand dexterity by the operator, and
keen observation skills on the part of the player. It's also a classic con
game since its easy for the operator to swindle the player. Thank goodness
the latter isn't our intent with this app.
This Shell game is intended to provide a graphical interface to the classical
shell game and to provide the player with an honest game to play. Our game
draws three shells on the canvas along with the pea, moves the pea under one,
of the shells, and shuffles the shells for a specific interval of time. The
user must then click on the shell she thinks the pea is hidden under. The user
is allowed to continue guessing until the pea is located.
## User Stories
- [ ] User can see the canvas with three shells and the pea.
- [ ] User can click the shell the pea is to be hidden under.
- [ ] User can see the pea move under the shell that's been clicked.
- [ ] User can click on a 'Shuffle' button to start an animated shuffling of
the shells for 5 seconds.
- [ ] User can click on the shell she believes the pea is hidden under when
the animation stops.
- [ ] User can see the shell that has been clicked rise to reveal if the pea
is hidden under it.
- [ ] User can continue clicking shells until the pea is found.
- [ ] User can see a congratulations message when the pea is located
- [ ] User can start a new game by clicking a shell the pea is to be hidden
under (step #2 above). The steps above are then repeated.
## Bonus features
- [ ] User can see a score panel containing the number of wins and the
number of games played.
- [ ] User can see the number of games played increase when the pea is hidden
under a shell
- [ ] User can see the number of wins incremented when the pea is found on
the first guess.
- [ ] User can see the shell hiding the pea to animate (color, size, or
some other effect) when it is clicked (a correct guess).
## Useful links and resources
- [Shell Game (Wikipedia)](https://en.wikipedia.org/wiki/Shell_game)
- [Javascript HTML DOM Animation](https://www.w3schools.com/js/js_htmldom_animate.asp)
- [p5js Animation Library](https://p5js.org/)
## Example projects
[Shell Game](https://codepen.io/RedCactus/pen/dwEjXy)

60
pt-BR/Projetos/3-Avançado/Shuffle-Deck-App.md
Unescape View File

@ -0,0 +1,60 @@
# Shuffle Card Deck
**Tier:** 3-Advanced
As a Web Developer you'll be asked to come up with innovative applications that
solve real world problems for real people. But something you'll quickly learn
is that no matter how many wonderful features you pack into an app users won't
use it if it isn't performant. In other words, there is a direct link between
how an app performs and whether users perceive it as usable.
The objective of the Shuffle Card Deck app is to find the fastest technique for
shuffling a deck of cards you can use in game apps you create. But, more
important it will provide you with experience at measuring and evaluating app
performance.
Your task is to implement the performance evaluation algorithm, the Xorshift
pseudorandom number generator, as well as the WELL512a.c algorithm if you
choose to attempt the bonus feature.
## User Stories
- [ ] User can see a panel containing a text box the user can enter the
number of rounds into, three output text boxes to contain the starting time,
ending time, and total time of the test, and two buttons - 'JS Random',
'Xorshift'.
- [ ] User can enter a number from 1 to 10,000 to specify the number of
times (or rounds) the selected random number is to be executed.
- [ ] User can click one of the three buttons to start the evaluation of the
selected random number algorithm. The random number algorithm will be executed
for the number of rounds entered by the user above.
- [ ] User can see a warning message if number of rounds has not been entered,
if it is not within the range 1 to 10,000, or if it is not a valid integer.
- [ ] User can see a tabular output area where the results of each algorithm
are displayed - algorithm name, time started, time ended, and total time.
- [ ] User can see a warning dialog with a 'Cancel' and a 'OK' button if the
number of rounds is changed before all three tests have been run.
- [ ] User can click the 'Cancel' button in the warning dialog to dismiss
the dialog with no changes.
- [ ] User can click the 'OK' button in the warning dialog to clear the
output area and close the warning dialog.
## Bonus features
- [ ] User can see a third algorithm button - 'WELL512a.c'.
- [ ] Developer should review the output and determine why the fastest
algorithm is faster than the slowest algorithm.
## Useful links and resources
- [Random Number Generation (Wikipedia)](https://en.wikipedia.org/wiki/Random_number_generation)
- [Math.random (MDN)](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random)
- [Xorshift (Wikipedia)](https://en.wikipedia.org/wiki/Xorshift)
- [WELL512a.c](http://www.iro.umontreal.ca/~panneton/well/WELL512a.c)
- [console.time (MDN)](https://developer.mozilla.org/en-US/docs/Web/API/Console/time)
- [Using the Chrome DevTools Audit Feature to Measure and Optimize Performance (Part 1)](https://medium.com/chingu/using-the-chrome-devtools-audit-feature-to-measure-and-optimize-performance-part-1-868a20bbfde8)
- [Using the Chrome DevTools Audit Feature to Measure and Optimize Performance (Part 2)](https://medium.com/chingu/using-the-chrome-devtools-audit-feature-to-measure-and-optimize-performance-part-2-af4a78bc6cf0)
## Example projects
Add one or more examples of projects that have similar functionalities to this application. This will act as a guide for the developer.

45
pt-BR/Projetos/3-Avançado/Slack-Archiver.md
Unescape View File

@ -0,0 +1,45 @@
# Slack Archiver
**Tier:** 3-Advanced
Slack is a tool many teams rely on for collaboration not only between
developers, but also between developers and their users. It's especially
attractive to Open Source Software (OSS) teams since it supports a highly
functional free tier.
One problem is the free tier is limited to a maximum of 10K messages. When
this limit is reached older messages become unavailable since they are
purged. This is very impactful to active Slack teams and communities since
older messages quite often hold a great deal of "institutional knowledge"
that's lost when the message limit is reached.
The Slack Archiver seeks to remedy this situation by extracting the history
for specific channels to an database or file. Messages could be extracted up to
the maximum allowed limit of 50 messages per minute for the `channels.history`
API method. At this rate (tier 4) 86.4K messages could be theoretically
retrieved per day.
Implementers are cautioned that further research will be required to
determine the best extraction method to use prior to attempting any
development of this application.
## User Stories
- [ ] Allow the user to specify the channels to be archived. This includes both adding and removing channels from the list
- [ ] Only the owners of the Slack Team should be allowed to archive messages
- [ ] For each channel to be archived periodically extract messages starting from the last message retrieved in the last extract and write them to a database
- [ ] Allow the user to copy and extracted channel to a file
- [ ] Archiving should be an automatic process. Unlike a Slack 'bot, no manual intervention should be required to start or stop and archive operation
## Bonus features
- [ ] Implement an API that allows an application to extract archived messages from the archive database
## Useful links and resources
Details of the Slack API can be found [here](https://api.slack.com/).
## Example projects
For an example of a commercial archiving application for Slack see
[Chronicle](https://chingu-prework.slack.com/apps/A47KWM6Q4-chronicle)

43
pt-BR/Projetos/3-Avançado/SpellIt-App.md
Unescape View File

@ -0,0 +1,43 @@
# Spell-It
**Tier:** 3-Advanced
Knowing how to spell is a fundamental part of being fluent in any language.
Whether you are a youngster learning how to spell or an individual learning a
new language being able to practice helps to solidify your language skills.
The Spell-It app helps users practice their spelling by playing the audio
recording of a word the user must then spell using the computer keyboard.
## User Stories
- [ ] User can click the 'Play' button to hear the word that's to be entered
- [ ] User can see letters displayed in the word input text box as they are
entered on the keyboard
- [ ] User can click the 'Enter' button to submit the word that has been
typed in the word input text box
- [ ] User can see a confirmation message when the correct word is typed
- [ ] User can see a message requesting the word be typed again when it is
spelled incorrectly
- [ ] User can see a tally of the number of correct spellings, total number
of words attempted, and a percentage of successful entries.
## Bonus features
- [ ] User can hear an confirmation sound when the word is correctly spelled
- [ ] User can hear a warning sound when the word is incorrectly spelled
- [ ] User can click the 'Hint' button to highlight the incorrect letters
in the word input text box
- [ ] User can press the 'Enter' key on the keyboard to submit a typed word
or click the 'Enter' button in the app window
## Useful links and resources
- [Texas Instruments Speak and Spell](<https://en.wikipedia.org/wiki/Speak_%26_Spell_(toy)>)
- [Web Audio API](https://codepen.io/2kool2/pen/RgKeyp)
- [Click and Speak](https://codepen.io/shangle/pen/Wvqqzq)
## Example projects
- [Speak N Spell on Google Play](https://play.google.com/store/apps/details?id=au.id.weston.scott.SpeakAndSpell&hl=en_US)
- [Word Wizard for iOS](https://itunes.apple.com/app/id447312716)

98
pt-BR/Projetos/3-Avançado/Survey-App.md
Unescape View File

@ -0,0 +1,98 @@
# Survey App
**Tier:** 3-Advanced
Surveys are a valuable part of any developers toolbox. They are useful for
getting feedback from your users on a variety of topics including application
satisfaction, requirements, upcoming needs, issues, priorities, and just plain
aggravations to name a few.
The Survey app gives you the opportunity to learn by developing a full-featured
app that will you can add to your toolbox. It provides the ability to define a
survey, allow users to respond within a predefined timeframe, and tabulate
and present results.
Users of this app are divided into two distinct roles, each having different
requirements:
- _Survey Coordinators_ define and conduct surveys. This is an administrative
function not available to normal users.
- _Survey Respondents_ Complete surveys and view results. They have no
administrative privileges within the app.
Commercial survey tools include distribution functionality that mass emails
surveys to Survey Respondents. For simplicity, this app assumes that surveys
open for responses will be accessed from the app's web page.
## User Stories
### General
- [ ] Survey Coordinators and Survey Respondents can define, conduct, and
view surveys and survey results from a common website
- [ ] Survey Coordinators can login to the app to access administrative
functions, like defining a survey.
### Defining a Survey
- [ ] Survey Coordinator can define a survey containing 1-10 multiple choice
questions.
- [ ] Survey Coordinator can define 1-5 mutually exclusive selections to each
question.
- [ ] Survey Coordinator can enter a title for the survey.
- [ ] Survey Coordinator can click a 'Cancel' button to return to the home
page without saving the survey.
- [ ] Survey Coordinator can click a 'Save' button save a survey.
### Conducting a Survey
- [ ] Survey Coordinator can open a survey by selecting a survey from a
list of previously defined surveys
- [ ] Survey Coordinators can close a survey by selecting it from a list of
open surveys
- [ ] Survey Respondent can complete a survey by selecting it from a list of
open surveys
- [ ] Survey Respondent can select responses to survey questions by clicking
on a checkbox
- [ ] Survey Respondents can see that a previously selected response will
automatically be unchecked if a different response is clicked.
- [ ] Survey Respondents can click a 'Cancel' button to return to the home
page without submitting the survey.
- [ ] Survey Respondents can click a 'Submit' button submit their responses
to the survey.
- [ ] Survey Respondents can see an error message if 'Submit' is clicked,
but not all questions have been responded to.
### Viewing Survey Results
- [ ] Survey Coordinators and Survey Respondents can select the survey to
display from a list of closed surveys
- [ ] Survey Coordinators and Survey Respondents can view survey results as
in tabular format showing the number of responses for each of the possible
selections to the questions.
## Bonus features
- [ ] Survey Respondents can create a unique account in the app
- [ ] Survey Respondents can login to the app
- [ ] Survey Respondents cannot complete the same survey more than once
- [ ] Survey Coordinators and Survey Respondents can view graphical
representations of survey results (e.g. pie, bar, column, etc. charts)
## Useful links and resources
Libraries for building surveys:
- [SurveyJS](https://surveyjs.io/Overview/Library/)
Some commercial survey services include:
- [Survey Monkey](https://www.surveymonkey.com/)
- [Traversy](https://youtu.be/SSDED3XKz-0)
- [Typeform](https://www.typeform.com/)
## Example projects
[Javascript Questionnaire](https://codepen.io/amyfu/pen/oLChg)
[React Survey App](https://chamatt.github.io/survey-web-app/#/) ([Code](https://github.com/chamatt/survey-web-app))

181
pt-BR/README.md
Unescape View File

@ -0,0 +1,181 @@
## :ledger: App Ideas Collection
![App Ideas Image](../app-ideas.png)
[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](./CONTRIBUTING.md)
Você já quis construir algo, mas não tinha ideia do que fazer? Assim como autores às vezes o "bloqueio criativo" também é uma verdade para os desenvolvedores. Esta lista destina-se a resolver este problema de uma vez por todas! 👍
Essas aplicações são:
- ótimas para melhorar suas habilidades de codificação :muscle:;
- ótimas para experimentar novas tecnologias 🆕;
- ótimas para adicionar ao seu portfólio para mostrar ao seu próximo empregador/cliente :file_folder:;
- ótimas para usar os exemplos em tutoriais (artigos ou vídeos) :page_with_curl:;
- fácil de completar e também facilmente extensível com novos recursos :ok_hand:;
Esta não é apenas uma lista simples de projetos, mas uma coleção que descreve cada projeto com detalhes suficientes para que você possa desenvolvê-lo desde o início!
Cada projeto tem as seguintes **features**:
1. Um objetivo claro e descritivo;
2. Uma lista de _User Stories_ que devem ser implementada (essas ações funcionam mais como um guia do que uma lista forçada de _To-Do's_. Sinta-se à vontade para adicionar suas próprias ações se quiser);
3. Uma lista de recursos de bônus que não apenas melhoram o projeto base, assim como irá melhorar as suas habilidades ao mesmo tempo (estes são opcionais e devem ser tentados somente depois de concluir as ações de necessárias);
4. Todos os recursos e links para ajudá-lo a encontrar o que você precisa para concluir o projeto.
Aqui você pode [assisti um vídeo sobre este repositório.](https://www.youtube.com/watch?v=TNzCfgwIDCY)
## Projetos
Os projetos são divididos em três níveis com base no conhecimento e experiência necessários para completá-los.
| Nível | Perfil do desenvolvedor |
| :--: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 1 | Desenvolvedores nos estágios iniciais de sua jornada de aprendizado. Aqueles que normalmente estão focados na criação de aplicativos voltados para o usuário. |
| 2 | Desenvolvedores em estágio intermediário de aprendizado e experiência. Eles se sentem confortáveis ​​em UI/UX, usando ferramentas de desenvolvimento e criando aplicativos que usam serviços de API. |
| 3 | Desenvolvedores que têm todos os itens acima e estão aprendendo técnicas mais avançadas, como implementar aplicativos de back-end e serviços de banco de dados. |
🌟 - Projeto Novo
### Nível-1: Projetos para Iniciante
| Nome | Descrição | Nível |
| --------------------------------------------------------------------------------- | ---------------------------------------------------------- | ---------- |
| [Bin2Dec](./Projetos/1-Iniciante/Bin2Dec-App.md) | Binary-to-Decimal number converter | 1-Iniciante |
| [Border Radius Previewer](./Projetos/1-Iniciante/Border-Radius-Previewer.md) | Preview how CSS3 border-radius values affect an element | 1-Iniciante |
| [Calculator](./Projetos/1-Iniciante/Calculator-App.md) | Calculator | 1-Iniciante |
| [Christmas Lights](./Projetos/1-Iniciante/Christmas-Lights-App.md) | Simulate a string of Christmas lights | 1-Iniciante |
| [Cause Effect App](./Projetos/1-Iniciante/Cause-Effect-App.md) | Click list item to display item details | 1-Iniciante |
| [Color Cycle](./Projetos/1-Iniciante/Color-Cycle-App.md) | Cycle a color value through incremental changes | 1-Iniciante |
| [Countdown Timer](./Projetos/1-Iniciante/Countdown-Timer-App.md) | Event Countdown timer | 1-Iniciante |
| [CSV2JSON App](./Projetos/1-Iniciante/CSV2JSON-App.md) | CSV to JSON converter | 1-Iniciante |
| [Dollars to Cents](./Projetos/1-Iniciante/Dollars-To-Cents-App.md) | Convert dollars to cents | 1-Iniciante |
| [Dynamic CSS Variables](./Projetos/1-Iniciante/Dynamic-CSSVar-app.md) | Dynamically change CSS variable settings | 1-Iniciante |
| [First DB App](./Projetos/1-Iniciante/First-DB-App.md) | Your first Database app! | 1-Iniciante |
| [Flip Image](./Projetos/1-Iniciante/Flip-Image-App.md) | Change the orientation of images across two axes | 1-Iniciante |
| [GitHub Status](./Projetos/1-Iniciante/GitHub-Status-App.md) | Display Current GitHub Status | 1-Iniciante |
| [Hello](./Projetos/1-Iniciante/Hello-App.md) | User native language greeting | 1-Iniciante |
| [IOT Mailbox Simulator](./Projetos/1-Iniciante/IOT-Mailbox-App.md) | Use callbacks to check your snail mail | 1-Iniciante |
| [JS Input Validation](./Projetos/1-Iniciante/Javascript-Validation-With-Regex.md) | Script to validate inputs entered by a user using RegEx | 1-Iniciante |
| [JSON2CSV App](./Projetos/1-Iniciante/JSON2CSV-App.md) | JSON to CSV converter | 1-Iniciante |
| [Key Value](./Projetos/1-Iniciante/Key-Value-App.md) | Keyboard Event Values | 1-Iniciante |
| [Lorem Ipsum Generator](./Projetos/1-Iniciante/Lorem-Ipsum-Generator.md) | Generate lorem ipsum placeholder text | 1-Iniciante |
| [Notes App](./Projetos/1-Iniciante/Notes-App.md) | Create an online note pad | 1-Iniciante |
| [Pearson Regression](./Projetos/1-Iniciante/Pearson-Regression-App.md) | Calculate the correlation coefficient for two sets of data | 1-Iniciante |
| [Pomodoro Clock](./Projetos/1-Iniciante/Pomodoro-Clock.md) | Task timer to aid personal productivity | 1-Iniciante |
| [Product Landing Page](./Projetos/1-Iniciante/Product-Landing-Page.md) | Showcase product details for possible buyers | 1-Iniciante |
| [Quiz App](./Projetos/1-Iniciante/Quiz-App.md) | Test your knowledge by answering questions | 1-Iniciante |
| [Recipe App](./Projetos/1-Iniciante/Recipe-App.md) | Recipe | 1-Iniciante |
| [Random Meal Generator](./Projetos/1-Iniciante/Random-Meal-Generator.md) | Generate random meals | 1-Iniciante |
| [Random Number Generator](./Projetos/1-Iniciante/Random-Number-Generator.md) | Generate random number between range. | 1-Iniciante |
| [Roman to Decimal Converter](./Projetos/1-Iniciante/Roman-to-Decimal-Converter.md) | Convert Roman to Decimal numbers | 1-Iniciante |
| [Slider Design](./Projetos/1-Iniciante/Slider-Design.md) | Display images using a slider control | 1-Iniciante |
| [Stopwatch App](./Projetos/1-Iniciante/Stopwatch-App.md) | Count time spent on activities | 1-Iniciante |
| [TrueOrFalse](./Projetos/1-Iniciante/True-or-False-App.md) | Identify the result of a conditional comparison | 1-Iniciante |
| [Vigenere Cipher](./Projetos/1-Iniciante/Vigenere-Cipher.md) | Encrypt text using the Vigenere Cypher | 1-Iniciante |
| [Wind Chill](./Projetos/1-Iniciante/Windchill-App.md) | Calculate the windchill factor from an actual temperature | 1-Iniciante |
| [Word Frequency](./Projetos/1-Iniciante/Word-Frequency-App.md) | Calculate word frequency in a block of text | 1-Iniciante |
| [Weather App](./Projetos/1-Iniciante/Weather-App.md) | Get the temperature, weather condition of a city. | 1-Iniciante |
### Nível-2: Projetos Intermediário
| Nome | Descrição | Nível |
| --------------------------------------------------------------------------------- | -------------------------------------------------- | -------------- |
| [Bit Masks](./Projetos/2-Intermediario/Bit-Masks-App.md) | Using Bit Masks for Conditions | 2-Intermediário |
| [Book Finder App](./Projetos/2-Intermediario/Book-Finder-App.md) | Search for books by multiple criteria | 2-Intermediário |
| [Calculator CLI](./Projetos/2-Intermediario/Calculator-CLI.md) | Create a basic calculator cli. | 2-Intermediário |
| [Card Memory Game](./Projetos/2-Intermediario/Card-Memory-Game.md) | Memorize and match hidden images | 2-Intermediário |
| [Charity Finder App](./Projetos/2-Intermediario/Charity-Finder-App.md) | Find a Global Charity to donate to | 2-Intermediário |
| [Chrome Theme Extension](./Projetos/2-Intermediario/Chrome-Theme-Extension.md) | Build your own chrome theme extention. | 2-Intermediário |
| [Currency Converter](./Projetos/2-Intermediario/Currency-Converter.md) | Convert one currency to another. | 2-Intermediário |
| [Drawing App](./Projetos/2-Intermediario/Drawing-App.md) | Create digital artwork on the web | 2-Intermediário |
| [Emoji Translator App](./Projetos/2-Intermediario/Emoji-Translator-App.md) | Translate sentences into Emoji | 2-Intermediário |
| [Flashcards App](./Projetos/2-Intermediario/FlashCards-App.md) | Review and test your knowledge through Flash Cards | 2-Intermediário |
| [Flip Art App](./Projetos/2-Intermediario/Flip-Art-App.md) | Animate a set of images | 2-Intermediário |
| [Game Suggestion App](./Projetos/2-Intermediario/Game-Suggestion-App.md) | Create polls to decide what games to play | 2-Intermediário |
| [GitHub Profiles](./Projetos/2-Intermediario/GitHub-Profiles.md) | A GitHub user search App | 2-Intermediário |
| [HighStriker Game](./Projetos/2-Intermediario/HighStriker-Game.md) | Highstriker strongman carnival game | 2-Intermediário |
| [Image Scanner](./Projetos/2-Intermediario/Image-Scaner.md) | Image Scanner App | 2-Intermediário |
| [Markdown Previewer](./Projetos/2-Intermediario/Markdown-Previewer.md) | Preview text formatted in GitHub flavored markdown | 2-Intermediário |
| [Markdown Table Generator](./Projetos/2-Intermediario/Markdown-Table-Generator.md) | Convert a table into Markdown-formatted text | 2-Intermediário |
| [Math Editor](./Projetos/2-Intermediario/math-editor.md) | A math editor for students to use | 2-Intermediário |
| [Meme Generator App](./Projetos/2-Intermediario/Meme-Generator-App.md) | Create custom memes | 2-Intermediário |
| [Name Generation using RNNs](./Projetos/2-Intermediario/Name-Generator.md) | Generate names using names dataset | 2-Intermediário |
| [Password Generator](./Projetos/2-Intermediario/Password-Generator.md) | Generate random passwords | 2-Intermediário |
| [Podcast Directory](./Projetos/2-Intermediario/Podcast-Directory-App.md) | Directory of favorite podcasts | 2-Intermediário |
| [QR Code Badge Generator](./Projetos/2-Intermediario/QRCode-Badge-App.md) | Encode badge info in a QRcode | 2-Intermediário |
| [Regular Expression Helper](./Projetos/2-Intermediario/RegExp-Helper-App.md) | Test Regular Expressions | 2-Intermediário |
| [Sales Reciepts App](./Projetos/2-Intermediario/Sales-DB-App.md) | Record Sales Receipts in a DB | 2-Intermediário |
| [Simple Online Store](./Projetos/2-Intermediario/Simple-Online-Store.md) | Simple Online Store | 2-Intermediário |
| [Sports Bracket Generator](./Projetos/2-Intermediario/Sports-Bracket-Generator.md) | Generate a sports bracket diagram | 2-Intermediário |
| [String Art](./Projetos/2-Intermediario/String-Art.md) | An animation of moving, colored strings | 2-Intermediário |
| [This or That Game](./Projetos/2-Intermediario/This-or-That-Game.md) | This or That Game | 2-Intermediário |
| [Timezone Slackbot](./Projetos/2-Intermediario/Timezone-Slackbot.md) | Display Team Timezones | 2-Intermediário |
| [To-Do App](./Projetos/2-Intermediario/To-Do-App.md) | Manage personal to-do tasks | 2-Intermediário |
| [Typing Practice](./Projetos/2-Intermediario/Typing-Practice-App.md) | Typing Practice | 2-Intermediário |
| [Voting App](./Projetos/2-Intermediario/Voting-App.md) | Voting App | 2-Intermediate |
### Nível-3: Avançado Projects
| Nome | Descrição | Nível |
| ----------------------------------------------------------------------------- | ------------------------------------------------------------------- | ---------- |
| [Battleship Bot](./Projetos/3-Avançado/Battleship-Bot.md) | Create a Discord bot that plays Battleship | 3-Avançado |
| [Battleship Game Engine](./Projetos/3-Avançado/Battleship-Game-Engine.md) | Create a callable engine to play the Battleship game | 3-Avançado |
| [Boole Bots Game](./Projetos/3-Avançado/Boole-Bot-Game.md) | Battling Bots driven by Boolean algebra | 3-Avançado |
| [Calendar](./Projetos/1-Iniciante/Calendar-App.md) | Create your own Calendar | 3-Avançado |
| [Calorie Counter](./Projetos/3-Avançado/Calorie-Counter-App.md) | Calorie Counter Nutrition App | 3-Avançado |
| [Chat App](./Projetos/3-Avançado/Chat-App.md) | Real-time chat interface | 3-Avançado |
| [Contribution Tracker App](./Projetos/3-Avançado/Contribution-Tracker-App.md) | Track funds donated to charity | 3-Avançado |
| [Elevator](./Projetos/3-Avançado/Elevator-App.md) | Elevator simulator | 3-Avançado |
| [Fast Food Simulator](./Projetos/3-Avançado/FastFood-App.md) | Fast Food Restaurant Simulator | 3-Avançado |
| [Instagram Clone](./Projetos/3-Avançado/Instagram-Clone-App.md) | A clone of Facebook's Instagram app | 3-Avançado |
| [GitHub Timeline](./Projetos/3-Avançado/GitHub-Timeline-App.md) | Generate a timeline of a users GitHub Repos | 3-Avançado |
| [Kudos Slackbot](./Projetos/3-Avançado/Kudos-Slackbot.md) | Give recognition to a deserving peer | 3-Avançado |
| [Movie App](./Projetos/3-Avançado/Movie-App.md) | Browse, Find Ratings, Check Actors and Find you next movie to watch | 3-Avançado |
| [MyPodcast Library](./Projetos/3-Avançado/MyPodcast-Library-app.md) | Create a library of favorite podcasts | 3-Avançado |
| [NASA Exoplanet Query](./Projetos/3-Avançado/NASA-Exoplanet-Query.md) | Query NASA's Exoplanet Archive | 3-Avançado |
| [Shell Game](./Projetos/3-Avançado/Shell-Game.md) | Animated shell game | 3-Avançado |
| [Shuffle Deck](./Projetos/3-Avançado/Shuffle-Deck-App.md) | Evaluate different algorithms for shuffling a card deck | 3-Avançado |
| [Slack Archiver](./Projetos/3-Avançado/Slack-Archiver.md) | Archive Slack Messages | 3-Avançado |
| [Spell-It App](./Projetos/3-Avançado/SpellIt-App.md) | A twist on the classic Speak N Spell game | 3-Avançado |
| [Survey App](./Projetos/3-Avançado/Survey-App.md) | Define, conduct, and view a survey | 3-Avançado |
## Planos para o futuro
Estamos planejando adicionar mais e mais projetos a este repositório. Para isso, precisamos da sua ajuda! Saiba como contribuir abaixo. 👇
Também estamos planejando criar um site onde você possa navegar facilmente por todos os projetos.
## Contribuição
Quaisquer contribuições são muito apreciadas. :pray: Você pode contribuir de duas maneiras:
1. crie um problema e conte-nos a sua ideia :bulb:. Certifique-se de usar o rótulo **nova ideia** neste caso;
2. Fork o projeto e envie um PR com sua nova ideia. Antes de fazer isso, certifique-se de ler e seguir o [Guia de Contribuição (ainda em inglês)](../CONTRIBUTING.md);
### Exemplos
Você também pode adicionar seus próprios exemplos aos projetos depois de concluí-los. Eu encorajo você a fazer isso, pois mostrará aos outros que coisas incríveis foram construídas! 👍
## Divulgue para o mundo!
Se as informações deste repositório foram úteis para você de alguma forma, certifique-se de dar uma estrela 🌟, assim outras pessoas podem encontrá-las e se beneficiar também! Juntos podemos crescer e tornar nossa comunidade melhor! :risonho:
Você tem alguma sugestão sobre como podemos melhorar este projeto em geral? Nos informe! Adoraríamos ouvir seus comentários!
### Principais contribuidores 🙂🙂
- **Florin Pop**: [Twitter](https://twitter.com/florinpop1705) - [YouTube Channel](https://youtube.com/florinpop) - [website](https://florin-pop.com).
- **Jim Medlock**: [Twitter](https://twitter.com/jd_medlock) - [articles](https://medium.com/@jdmedlock)
## 100Days100Projects 🚀
Como bonus, eu criei o [#100Days100Projects challenge](https://www.florin-pop.com/blog/2019/09/100-days-100-projects). Você pode encontrar nele mais 100 ideias para projetos pequenos. Aproveite! 😄
## Traduções
- [Português - Brasil](./README.md)
## Histórico de Estrelas
[![Stargazers over time](https://starchart.cc/florinpop17/app-ideas.svg)](https://starchart.cc/florinpop17/app-ideas)
Write Preview
Loading…
Cancel
Save