├── README.md ├── backend ├── README.md ├── api-file-metadata │ └── README.md ├── api-image-search │ └── README.md ├── api-request-header │ └── README.md ├── api-timestamp │ └── README.md ├── api-url-shortener │ └── README.md ├── app-book-trading │ └── README.md ├── app-nightlife │ └── README.md ├── app-pinterest-clone │ └── README.md ├── app-stock-market │ └── README.md └── app-voting │ └── README.md ├── data-vis ├── README.md ├── bar-chart │ └── README.md ├── camper-leaderboard │ └── README.md ├── data-across-globe │ └── README.md ├── dungeon-crawler │ └── README.md ├── force-directed-graph │ └── README.md ├── game-of-life │ └── README.md ├── heat-map │ └── README.md ├── markdown-previewer │ └── README.md ├── recipe-box │ └── README.md └── scatterplot-graph │ └── README.md ├── frontend ├── README.md ├── calculator │ └── README.md ├── local-weather │ └── README.md ├── pomodoro-clock │ └── README.md ├── portfolio │ └── README.md ├── random-quote-machine │ └── README.md ├── simon-game │ └── README.md ├── tictactoe-game │ └── README.md ├── tribute-page │ └── README.md ├── twitch-client │ └── README.md └── wikipedia-viewer │ └── README.md └── portfolio └── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Chingu FCC Speedrun Challenge 2 | 3 | ## Details 4 | 5 | Fork this repository and add your code for each project to the appropriate folder in your repository. As you complete each project, write a blog post about your experience (most publish their blog posts to Medium so they can be easily added to the Chingu Medium publication, but you are free to post wherever you are most comfortable). 6 | 7 | You may work in pairs for phase 1 and you and your pair may share the same repository for phase 1. For phase 2, each participant should create a new repository to contain their personal Portfolio SPA. 8 | 9 | 10 | ### The goal (Phase 1) 11 | 12 | Complete as many of the FCC Projects as you can in a three week period. To be considered complete: the code for the project should be committed to the appropriate folder in your fork of this repository, you should have created a blog post about your experience working on the project, and you should "check off" this project in this readme file, adding a link to your blog post. 13 | 14 | To prepare for Phase 2 you'll want to ensure that you use the same "stack" (same backend language, same frontend framework) and keep to a consistent coding style across projects. 15 | 16 | **Time limit:** three weeks 17 | 18 | ### The goal (Phase 2) 19 | 20 | Integrate all of the FCC Projects you created in Phase 1 into one comprehensive single page portfolio application. 21 | 22 | **Time limit:** one week 23 | 24 | **Deadline to complete both Phases:** 25 | 26 | One month from the day you started. 27 | 28 | ### The Rules 29 | 30 | * Pick one stack (backend language and frontend framework) and stick to it (it'll make Phase 2 easier). Any stack is fine, but stick to just one. 31 | * You may reuse code you previously wrote, but try to improve on your prior effort in some way. 32 | * You may work in pairs for Phase 1 and contribute to a shared repository for Phase 1. 33 | * Each individual must complete Phase 2 solo, in their own repository. 34 | * For each project in Phase 1, each participant must write their own blog post about their experience working on that project. This can be on your own blog, Medium, wherever and can contain whatever you want: a brief blog style ramble about how you felt during the project, a tutorial explaining some concept you learned during the project, a series of photos showing your cat sleeping on your desk while you worked on the project - whatever - but something. 35 | * All code for Phase 1 should be committed to your fork of this repo. 36 | * Phase 2 code should be in a separate repository each participant creates to contain their personal Portfolio SPA. 37 | * You may ask for help and help others - preference should always be given to helping someone understand, not handing them code they don't. 38 | * If someone is stuck, you may pair with them to help them get unstuck (on as many projects as you want) even if you're doing your own entry separately or with another pair. 39 | * If someone pairs with you to help you get unstuck, be sure to make a note to credit them in your repo and in your blog posts. 40 | 41 | ### Deliverables 42 | 43 | * For Phase 1, all of your code should be committed/pushed to the appropriate directories in your fork of this repository. 44 | * For Phase 1, you do NOT need to host the projects on a live site, merely test them locally, then commit your code. You can, of course, host a demo of the project if you want to though. 45 | * For Phase 1, you must write a blog post for each project you complete and link to it in the projects table (in your fork of) this README file. 46 | * For Phase 2, you must each create a repository to hold your individual Phase 2 project, then link to that project in the portfolio/README.md file of this project. 47 | * For Phase 2, you must both commit your code to github, and host a live version of your project. 48 | 49 | ### The Competition 50 | 51 | Who can complete the most projects in Phase 1? 52 | 53 | Who can make the most complete and professional looking portfolio in Phase 2? 54 | 55 | **Note:** This is the type of competition where, yes, winning is awesome, but participating and giving it your all is the best prize, and everyone can get that :D 56 | 57 | ## FCC Projects 58 | 59 | Copy this table as needed to make a separate table for each team member for recording blog posts 60 | 61 | Start date: 62 | 63 | | Complete Date | Blog Post |Project | 64 | |----------|---------|----------| 65 | | | N/A| [Comprehensive Portfolio as a Single Page App](./portfolio) | | 66 | | | [ ]() | [Build a Tribute Page](./frontend/tribute-page) | | 67 | | | [ ]() | [Build a Personal Portfolio Webpage](./frontend/portfolio) | | 68 | | | [ ]() | [Build a Random Quote Machine](./frontend/random-quote-machine) | | 69 | | | [ ]() | [Show the Local Weather](./frontend/local-weather) | | 70 | | | [ ]() | [Build a Wikipedia Viewer](./frontend/wikipedia-viewer) | | 71 | | | [ ]() | [Use the Twitch.tv JSON API](./frontend/twitch-client) | | 72 | | | [ ]() | [Build a JavaScript Calculator](./frontend/calculator) | | 73 | | | [ ]() | [Build a Pomodoro Clock](./frontend/pomodoro-clock) | | 74 | | | [ ]() | [Build a Tic Tac Toe Game](./frontend/tictactoe-game) | | 75 | | | [ ]() | [Build a Simon Game](./frontend/simon-game) | | 76 | | | [ ]() | [Build a Markdown Previewer](./data-vis/markdown-previewer) | | 77 | | | [ ]() | [Build a Camper Leaderboard](./data-vis/camper-leaderboard) | | 78 | | | [ ]() | [Build a Recipe Box](./data-vis/recipe-box) | | 79 | | | [ ]() | [Build the Game of Life](./data-vis/game-of-life) | | 80 | | | [ ]() | [Build a Roguelike Dungeon Crawler](./data-vis/dungeon-crawler) | | 81 | | | [ ]() | [Visualize Data with a Bar Chart](./data-vis/bar-chart) | | 82 | | | [ ]() | [Visualize Data with a Scatterplot Graph](./data-vis/scatterplot-graph) | | 83 | | | [ ]() | [Visualize Data with a Heat Map](./data-vis/heat-map) | | 84 | | | [ ]() | [Show National Contiguity with a Force Directed Graph](./data-vis/force-directed-graph) | | 85 | | | [ ]() | [Map Data Across the Globe](./data-vis/data-across-globe) | | 86 | | | [ ]() | [Timestamp Microservice](./backend/api-timestamp) | | 87 | | | [ ]() | [Request Header Parser Microservice](./backend/api-request-header) | | 88 | | | [ ]() | [URL Shortener Microservice](./backend/api-url-shortener) | | 89 | | | [ ]() | [Image Search Abstraction Layer](./backend/api-image-search) | | 90 | | | [ ]() | [File Metadata Microservice](./backend/api-file-metadata) | | 91 | | | [ ]() | [Build a Voting App](./backend/app-voting) | | 92 | | | [ ]() | [Build a Nightlife Coordination App](./backend/app-nightlife) | | 93 | | | [ ]() | [Chart the Stock Market](./backend/app-stock-market) | | 94 | | | [ ]() | [Manage a Book Trading Club](./backend/app-book-trading) | | 95 | | | [ ]() | [Build a Pinterest Clone](./backend/app-pinterest-clone) | | 96 | 97 | 98 | -------------------------------------------------------------------------------- /backend/README.md: -------------------------------------------------------------------------------- 1 | # Backend Projects 2 | 3 | ## Notes 4 | 5 | * Pick the backend language and ecosystem you prefer - node.js, golang, python, java, rust, elixer, php, ruby - whatever you like - but be consistent and use the same for all the projects, it will make integrating them into the comprehensive portfolio later an easier process. 6 | * Use the frontend framework you intend to use for the data visualization projects if you'd like the additional practice. 7 | * Consider using Sass/Scss, Less or Stylus, whichever you intend to use in the data visualization projects. 8 | * Try to keep to a consistent coding and design style across the projects, it will make integrating them into the comprehensive portfolio later an easier process. -------------------------------------------------------------------------------- /backend/api-file-metadata/README.md: -------------------------------------------------------------------------------- 1 | # File Metadata Microservice 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: https://aryanj-file-size.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can submit a FormData object that includes a file upload. 10 | 11 | * User Story: When I submit something, I will receive the file size in bytes within the JSON response 12 | 13 | **Hint:** You may want to use this package: https://www.npmjs.com/package/multer 14 | 15 | ## Notes -------------------------------------------------------------------------------- /backend/api-image-search/README.md: -------------------------------------------------------------------------------- 1 | # Image Search Abstraction Layer 2 | 3 | ## Objective 4 | 5 | Build a full stack app that allows you to search for images like this: https://cryptic-ridge-9197.herokuapp.com/api/imagesearch/lolcats%20funny?offset=10 and browse recent search queries like this: https://cryptic-ridge-9197.herokuapp.com/api/latest/imagesearch/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can get the image URLs, alt text and page urls for a set of images relating to a given search string. 10 | 11 | * User Story: I can paginate through the responses by adding a ?offset=2 parameter to the URL. 12 | 13 | * User Story: I can get a list of the most recently submitted search strings. 14 | 15 | ## Notes -------------------------------------------------------------------------------- /backend/api-request-header/README.md: -------------------------------------------------------------------------------- 1 | # Request Header Parser Microservice 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: https://cryptic-ridge-9197.herokuapp.com/api/whoami/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can get the IP address, language and operating system for my browser. 10 | 11 | ## Notes -------------------------------------------------------------------------------- /backend/api-timestamp/README.md: -------------------------------------------------------------------------------- 1 | # Timestamp Microservice 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: https://timestamp-ms.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can pass a string as a parameter, and it will check to see whether that string contains either a unix timestamp or a natural language date (example: January 1, 2016). 10 | 11 | * User Story: If it does, it returns both the Unix timestamp and the natural language form of that date. 12 | 13 | * User Story: If it does not contain a date or Unix timestamp, it returns null for those properties. 14 | 15 | ## Notes -------------------------------------------------------------------------------- /backend/api-url-shortener/README.md: -------------------------------------------------------------------------------- 1 | # URL Shortener Microservice 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: https://little-url.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can pass a URL as a parameter and I will receive a shortened URL in the JSON response. 10 | 11 | * User Story: If I pass an invalid URL that doesn't follow the valid http://www.example.com format, the JSON response will contain an error instead. 12 | 13 | * User Story: When I visit that shortened URL, it will redirect me to my original link. 14 | 15 | ## Notes -------------------------------------------------------------------------------- /backend/app-book-trading/README.md: -------------------------------------------------------------------------------- 1 | # Manage a Book Trading Club 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: http://bookjump.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can view all books posted by every user. 10 | 11 | * User Story: I can add a new book. 12 | 13 | * User Story: I can update my settings to store my full name, city, and state. 14 | 15 | * User Story: I can propose a trade and wait for the other user to accept the trade. 16 | 17 | ## Notes -------------------------------------------------------------------------------- /backend/app-nightlife/README.md: -------------------------------------------------------------------------------- 1 | # Build a Nightlife Coordination App 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: http://whatsgoinontonight.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: As an unauthenticated user, I can view all bars in my area. 10 | 11 | * User Story: As an authenticated user, I can add myself to a bar to indicate I am going there tonight. 12 | 13 | * User Story: As an authenticated user, I can remove myself from a bar if I no longer want to go there. 14 | 15 | * User Story: As an unauthenticated user, when I login I should not have to search again. 16 | 17 | **Hint:** Try using the Yelp API to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app. 18 | 19 | ## Notes -------------------------------------------------------------------------------- /backend/app-pinterest-clone/README.md: -------------------------------------------------------------------------------- 1 | # Build a Pinterest Clone 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: https://midnight-dust.hyperdev.space. 6 | 7 | ## Requirements 8 | 9 | * User Story: As an unauthenticated user, I can login with Twitter. 10 | 11 | * User Story: As an authenticated user, I can link to images. 12 | 13 | * User Story: As an authenticated user, I can delete images that I've linked to. 14 | 15 | * User Story: As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to. 16 | 17 | * User Story: As an unauthenticated user, I can browse other users' walls of images. 18 | 19 | * User Story: As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection) 20 | 21 | **Hint:** Masonry.js is a library that allows for Pinterest-style image grids. 22 | 23 | ## Notes -------------------------------------------------------------------------------- /backend/app-stock-market/README.md: -------------------------------------------------------------------------------- 1 | # Chart the Stock Market 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: http://watchstocks.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can view a graph displaying the recent trend lines for each added stock. 10 | 11 | * User Story: I can add new stocks by their symbol name. 12 | 13 | * User Story: I can remove stocks. 14 | 15 | * User Story: I can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets. 16 | 17 | ## Notes -------------------------------------------------------------------------------- /backend/app-voting/README.md: -------------------------------------------------------------------------------- 1 | # Build a Voting App 2 | 3 | ## Objective 4 | 5 | Build a full stack app that is functionally similar to this: https://fcc-voting-arthow4n.herokuapp.com/. 6 | 7 | ## Requirements 8 | 9 | * User Story: As an authenticated user, I can keep my polls and come back later to access them. 10 | 11 | * User Story: As an authenticated user, I can share my polls with my friends. 12 | 13 | * User Story: As an authenticated user, I can see the aggregate results of my polls. 14 | 15 | * User Story: As an authenticated user, I can delete polls that I decide I don't want anymore. 16 | 17 | * User Story: As an authenticated user, I can create a poll with any number of possible items. 18 | 19 | * User Story: As an unauthenticated or authenticated user, I can see and vote on everyone's polls. 20 | 21 | * User Story: As an unauthenticated or authenticated user, I can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.) 22 | 23 | * User Story: As an authenticated user, if I don't like the options on a poll, I can create a new option. 24 | 25 | ## Notes -------------------------------------------------------------------------------- /data-vis/README.md: -------------------------------------------------------------------------------- 1 | # Data Visualization Projects 2 | 3 | ## Notes 4 | 5 | * Use D3 for charting / graphing 6 | * Pick whichever frontend framework you prefer, try to stick to the same framwork across all projects (it'll make aggregating into a portfolio easier) - common choices are Angular 2, React, and Vue 7 | * Try to use a CSS preprocessor where it makes sense to do so - common choices are Sass/Scss, Less, and Stylus 8 | 9 | -------------------------------------------------------------------------------- /data-vis/bar-chart/README.md: -------------------------------------------------------------------------------- 1 | # Visualize Data with a Bar Chart 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/vGjLVZ. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can see US Gross Domestic Product by quarter, over time. 10 | 11 | * User Story: I can mouse over a bar and see a tooltip with the GDP amount and exact year and month that bar represents. 12 | 13 | **Hint:** Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json 14 | 15 | ## Notes -------------------------------------------------------------------------------- /data-vis/camper-leaderboard/README.md: -------------------------------------------------------------------------------- 1 | # Build a Camper Leaderboard 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/eZGMjp/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days. 10 | 11 | * User Story: I can see how many brownie points they've earned in the past 30 days, and how many they've earned total. 12 | 13 | * User Story: I can toggle between sorting the list by how many brownie points they've earned in the past 30 days and by how many brownie points they've earned total. 14 | 15 | **Hint:** To get the top 100 campers for the last 30 days: https://fcctop100.herokuapp.com/api/fccusers/top/recent. 16 | 17 | **Hint:** To get the top 100 campers of all time: https://fcctop100.herokuapp.com/api/fccusers/top/alltime. 18 | 19 | ## Notes -------------------------------------------------------------------------------- /data-vis/data-across-globe/README.md: -------------------------------------------------------------------------------- 1 | # Map Data Across the Globe 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/mVEJag. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can see where all Meteorites landed on a world map. 10 | 11 | * User Story: I can tell the relative size of the meteorite, just by looking at the way it's represented on the map. 12 | 13 | * User Story: I can mouse over the meteorite's data point for additional data. 14 | 15 | **Hint:** Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json 16 | 17 | ## Notes -------------------------------------------------------------------------------- /data-vis/dungeon-crawler/README.md: -------------------------------------------------------------------------------- 1 | # Build a Roguelike Dungeon Crawler Game 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/PNJRyd/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items. 10 | 11 | * User Story: All the items and enemies on the map are arranged at random. 12 | 13 | * User Story: I can move throughout a map, discovering items. 14 | 15 | * User Story: I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it. 16 | 17 | * User Story: Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed. 18 | 19 | * User Story: When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level. 20 | 21 | * User Story: When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range. 22 | 23 | * User Story: When I find and beat the boss, I win. 24 | 25 | * User Story: The game should be challenging, but theoretically winnable. 26 | 27 | ## Notes -------------------------------------------------------------------------------- /data-vis/force-directed-graph/README.md: -------------------------------------------------------------------------------- 1 | # Show National Contiguity with a Force Directed Graph 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/xVopBo. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can see a Force-directed Graph that shows which countries share borders. 10 | 11 | * User Story: I can see each country's flag on its node. 12 | 13 | **Hint:** Here's a dataset you can use to build this: https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json 14 | 15 | **Hint:** You can create a spritesheet of national flags at https://www.flag-sprites.com. 16 | 17 | ## Notes -------------------------------------------------------------------------------- /data-vis/game-of-life/README.md: -------------------------------------------------------------------------------- 1 | # Build the Game of Life 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/reGdqx/. 6 | 7 | ## Requirements 8 | 9 | * User Story: When I first arrive at the game, it will randomly generate a board and start playing. 10 | 11 | * User Story: I can start and stop the board. 12 | 13 | * User Story: I can set up the board. 14 | 15 | * User Story: I can clear the board. 16 | 17 | * User Story: When I press start, the game will play out. 18 | 19 | * User Story: Each time the board changes, I can see how many generations have gone by. 20 | 21 | **Hint:** Here's an explanation of Conway's Game of Life from John Conway himself: https://www.youtube.com/watch?v=E8kUJL04ELA 22 | 23 | **Hint:** Here's an overview of Conway's Game of Life with rules for your reference: https://en.wikipedia.org/wiki/Conway%27s_Game_of_Life 24 | 25 | ## Notes -------------------------------------------------------------------------------- /data-vis/heat-map/README.md: -------------------------------------------------------------------------------- 1 | # Visualize Data with a Heat Map 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/aNLYPp/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can view a heat map with data represented both on the Y and X axis. 10 | 11 | * User Story: Each cell is colored based its relationship to other data. 12 | 13 | * User Story: I can mouse over a cell in the heat map to get more exact information. 14 | 15 | **Hint:** Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/global-temperature.json 16 | 17 | ## Notes -------------------------------------------------------------------------------- /data-vis/markdown-previewer/README.md: -------------------------------------------------------------------------------- 1 | # Build a Markdown Previewer 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/JXrLLE/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can type GitHub-flavored Markdown into a text area. 10 | 11 | * User Story: I can see a preview of the output of my markdown that is updated as I type. 12 | 13 | **Hint:** You don't need to interpret Markdown yourself - you can import the Marked library for this: https://cdnjs.com/libraries/marked 14 | 15 | ## Notes -------------------------------------------------------------------------------- /data-vis/recipe-box/README.md: -------------------------------------------------------------------------------- 1 | # Build a Recipe Box 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/xVXWag/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can create recipes that have names and ingredients. 10 | 11 | * User Story: I can see an index view where the names of all the recipes are visible. 12 | 13 | * User Story: I can click into any of those recipes to view it. 14 | 15 | * User Story: I can edit these recipes. 16 | 17 | * User Story: I can delete these recipes. 18 | 19 | * User Story: All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there. 20 | 21 | ## Notes -------------------------------------------------------------------------------- /data-vis/scatterplot-graph/README.md: -------------------------------------------------------------------------------- 1 | # Visualize Data with a Scatterplot Graph 2 | 3 | 4 | ## Objective 5 | 6 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/ONxvaa/. 7 | 8 | ## Requirements 9 | 10 | * User Story: I can see performance time visualized in a scatterplot graph. 11 | 12 | * User Story: I can mouse over a plot to see a tooltip with additional details. 13 | 14 | **Hint:** Here's a dataset you can use to build this: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json 15 | 16 | ## Notes -------------------------------------------------------------------------------- /frontend/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Projects 2 | 3 | ## Notes 4 | 5 | * Use the frontend framework you intend to use for the data visualization projects if you'd like the additional practice. 6 | * Consider using Sass/Scss, Less or Stylus, whichever you intend to use in the data visualization projects. 7 | * Try to keep to a consistent coding and design style across the projects, it will make integrating them into the comprehensive portfolio later an easier process. 8 | 9 | 10 | -------------------------------------------------------------------------------- /frontend/calculator/README.md: -------------------------------------------------------------------------------- 1 | # Build a JavaScript Calculator 2 | 3 | ## Objective 4 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/rLJZrA/. 5 | 6 | ## Requirements 7 | 8 | * User Story: I can add, subtract, multiply and divide two numbers. 9 | 10 | * User Story: I can clear the input field with a clear button. 11 | 12 | * User Story: I can keep chaining mathematical operations together until I hit the equal button, and the calculator will tell me the correct output. 13 | 14 | ## Notes -------------------------------------------------------------------------------- /frontend/local-weather/README.md: -------------------------------------------------------------------------------- 1 | # Show the Local Weather 2 | 3 | ## Objective 4 | Build an app that is functionally similar to this: http://codepen.io/FreeCodeCamp/full/bELRjV. 5 | 6 | ## Requirements 7 | * User Story: I can see the weather in my current location. 8 | 9 | * User Story: I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather. 10 | 11 | * User Story: I can push a button to toggle between Fahrenheit and Celsius. 12 | 13 | ## Notes -------------------------------------------------------------------------------- /frontend/pomodoro-clock/README.md: -------------------------------------------------------------------------------- 1 | # Build a Pomodoro Clock 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/aNyxXR/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed. 10 | 11 | * User Story: I can reset the clock for my next pomodoro. 12 | 13 | * User Story: I can customize the length of each pomodoro. 14 | 15 | ## Notes -------------------------------------------------------------------------------- /frontend/portfolio/README.md: -------------------------------------------------------------------------------- 1 | # Build a Personal Portfolio Webpage 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/YqLyXB/. 6 | 7 | ## Requirements 8 | 9 | User Story: I can access all of the portfolio webpage's content just by scrolling. 10 | 11 | User Story: I can click different buttons that will take me to the portfolio creator's different social media pages. 12 | 13 | User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.) 14 | 15 | User Story: I navigate to different sections of the webpage by clicking buttons in the navigation. 16 | 17 | ## Notes -------------------------------------------------------------------------------- /frontend/random-quote-machine/README.md: -------------------------------------------------------------------------------- 1 | # Build a Random Quote Machine 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/ONjoLe/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can click a button to show me a new random quote. 10 | 11 | * User Story: I can press a button to tweet out a quote. 12 | 13 | ## Notes -------------------------------------------------------------------------------- /frontend/simon-game/README.md: -------------------------------------------------------------------------------- 1 | # Build a Simon Game 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/obYBjE. 6 | 7 | ## Requirements 8 | 9 | * User Story: I am presented with a random series of button presses. 10 | 11 | * User Story: Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step. 12 | 13 | * User Story: I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button. 14 | 15 | * User Story: If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again. 16 | 17 | * User Story: I can see how many steps are in the current series of button presses. 18 | 19 | * User Story: If I want to restart, I can hit a button to do so, and the game will return to a single step. 20 | 21 | * User Story: I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses. 22 | 23 | * User Story: I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over. 24 | 25 | **Hint:** Here are mp3s you can use for each button: 26 | 27 | https://s3.amazonaws.com/freecodecamp/simonSound1.mp3, 28 | https://s3.amazonaws.com/freecodecamp/simonSound2.mp3, 29 | https://s3.amazonaws.com/freecodecamp/simonSound3.mp3, 30 | https://s3.amazonaws.com/freecodecamp/simonSound4.mp3. 31 | 32 | ## Notes -------------------------------------------------------------------------------- /frontend/tictactoe-game/README.md: -------------------------------------------------------------------------------- 1 | # Build a Tic Tac Toe Game 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/KzXQgy/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can play a game of Tic Tac Toe with the computer. 10 | 11 | * User Story: My game will reset as soon as it's over so I can play again. 12 | 13 | * User Story: I can choose whether I want to play as X or O. 14 | 15 | ## Notes -------------------------------------------------------------------------------- /frontend/tribute-page/README.md: -------------------------------------------------------------------------------- 1 | # Build a Tribute Page 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can view a tribute page with an image and text. 10 | 11 | * User Story: I can click on a link that will take me to an external website with further information on the topic. 12 | 13 | ## Notes -------------------------------------------------------------------------------- /frontend/twitch-client/README.md: -------------------------------------------------------------------------------- 1 | # Use the Twitchtv JSON API 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/Myvqmo/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can see whether Free Code Camp is currently streaming on Twitch.tv. 10 | 11 | * User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel. 12 | 13 | * User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming. 14 | 15 | * User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers. 16 | 17 | **Hint:** Here's an array of the Twitch.tv usernames of people who regularly stream: ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"] 18 | 19 | **UPDATE:** Due to a change in conditions on API usage explained here Twitch.tv now requires an API key, but we've built a workaround. Use https://wind-bow.gomix.me/twitch-api instead of twitch's API base URL (i.e. https://api.twitch.tv/kraken ) and you'll still be able to get account information, without needing to sign up for an API key. 20 | 21 | ## Notes -------------------------------------------------------------------------------- /frontend/wikipedia-viewer/README.md: -------------------------------------------------------------------------------- 1 | # Build a Wikipedia Viewer 2 | 3 | ## Objective 4 | 5 | Build an app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/wGqEga/. 6 | 7 | ## Requirements 8 | 9 | * User Story: I can search Wikipedia entries in a search box and see the resulting Wikipedia entries. 10 | 11 | * User Story: I can click a button to see a random Wikipedia entry. 12 | 13 | **Hint #1:** Here's a URL you can use to get a random Wikipedia article: https://en.wikipedia.org/wiki/Special:Random. 14 | 15 | **Hint #2:** Here's an entry on using Wikipedia's API: https://www.mediawiki.org/wiki/API:Main_page. 16 | 17 | **Hint #3:** Use this link to experiment with Wikipedia's API. 18 | 19 | ## Notes -------------------------------------------------------------------------------- /portfolio/README.md: -------------------------------------------------------------------------------- 1 | # Phase 2 Portfolio 2 | 3 | Link here to: 4 | 5 | * the repo for your Phase 2 Portfolio 6 | * the live site for your Phase 2 Portfolio --------------------------------------------------------------------------------