/FCC-Ziplines

Front End Development Projects that I've built as part of the FreeCodeCamp curriculum.

Primary LanguageJavaScript

FreeCodeCamp Ziplines

Front End Web Development Projects by Kaia

These are Front End Development Projects that I've built as part of the FreeCodeCamp curriculum. Since I completed them, the order and user stories may have changed. The user stories here reflect the parameters I built my app within. Bonfires have moved to https://github.com/LawlietBlack/algorithms under JavaScript.

Skills Used

  • AngularJS
  • ReactJS
  • Bootstrap
  • Sass
  • HTML5
  • CSS3
  • Responsive Web Design
  • RESTful APIs
  • JSON
  • AJAX

Zipline 01 - Personal Portfolio Webpage

User Stories

  • As a user, I can access all of the portfolio webpage's content just by scrolling.
  • As a user, I can click different buttons that will take me to the portfolio creator's different social media pages.
  • As a user, I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)
  • As a user, I navigate to different sections of the webpage by clicking buttons in the navigation.

Zipline 02 - Random Quote Machine

User Stories

  • As a user, As a user, I can click a button to show me a new random quote.
  • As a user, As a user, I can press a button to tweet out a quote.

Zipline 03 - Show the Local Weather

User Stories

  • As a user, I can see the weather in my current location.
  • As a user, I can see an icon depending on the weather.
  • As a user, I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
  • As a user, I can push a button to toggle between Fahrenheit and Celsius.

Zipline 04 - Pomodoro Clock

User Stories

  • As a user, I can start a 25 minute pomodoro, and the timer will go off once 25 minutes has elapsed.
  • As a user, I can reset the clock for my next pomodoro.
  • As a user, I can customize the length of each pomodoro.

Zipline 05 - Use the Twitch.tv JSON API

User Stories

  • As a user, I can see whether Free Code Camp is currently streaming on Twitch.tv.
  • As a user, I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.
  • As a user, if Free Code Camp is streaming, I can see additional details about what they are streaming.
  • As a user, I can search through the streams listed.
  • As a user, I will see a placeholder notification if a streamer has closed their Twitch account. You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.

Zipline 06 - Stylize Stories on Camper News

User Stories

  • As a user, I can browse recent posts from Camper News.
  • As a user, I can click on a post to be taken to the story's original URL.
  • As a user, I can see how many upvotes each story has.

Zipline 07 - Wikipedia Viewer

User Stories

  • As a user, I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
  • As a user, I can click a button to see a random Wikipedia entry.
  • As a user, when I type in the search box, I can see a dropdown menu with autocomplete options for matching Wikipedia entries.

Zipline 08 - JavaScript Calculator

User Stories

  • As a user, I can add, subtract, multiply and divide two numbers.
  • As a user, I can clear the input field with a clear button.
  • As a user, I can keep chaining mathematical operations together until I hit the clear button, and the calculator will tell me the correct output.

Zipline 09 - Tic Tac Toe Game

User Stories

  • As a user, I can play a game of Tic Tac Toe with the computer.
  • As a user, I can never actually win against the computer - at best I can tie.
  • As a user, my game will reset as soon as it's over so I can play again.
  • As a user, I can choose whether I want to play as X or O.

Zipline 10 - Simon Game

User Stories

  • As a user, I am presented with a random series of button presses.
  • As a user, each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
  • As a user, I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
  • As a user, 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.
  • As a user, I can see how many steps are in the current series of button presses.
  • As a user, if I want to restart, I can hit a button to do so, and the game will return to a single step.
  • As a user, 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.
  • As a user, the tempo of the game speeds up incrementally on the 5th, 9th and 13th step.
  • As a user, I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.

Zipline 11 - Markdown Previewer

User Stories

  • As a user, I can type GitHub-flavored Markdown into a text area.
  • As a user, I can see a preview of the output of my markdown that is updated as I type.

Zipline 12 - Build a Camper Leaderboard

User Stories

  • As a user, I can see a table of the Free Code Camp campers who've earned the most brownie points in the past 30 days.
  • As a user, I can see how many brownie points they've earned in the past 30 days, and how many they've earned total.
  • As a user, I can toggle between sorting the list by how many bronwie points they've earned in the past 30 days and by how many brownie points they've earned total.

Zipline 13 - Build a Recipe Box

User Stories

  • I can create recipes that have names and ingredients.
  • I can see an index view where the names of all the recipes are visible.
  • I can click into any of those recipes to view it.
  • I can edit these recipes.
  • I can delete these recipes.
  • All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.

Zipline 14 - Game of Life

User Stories

  • When I first arrive at the game, it will randomly generate a board and start playing.
  • I can start and stop the board.
  • I can set up the board.
  • I can clear the board.
  • When I press start, the game will play out.
  • Each time the board changes, I can see how many generations have gone by.

Zipline 15 - Roguelike Game

User Stories

  • I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.
  • All the items and enemies on the map are arranged at random.
  • I can move throughout a map, discovering items.
  • I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.
  • 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.
  • When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.
  • 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.
  • When I find and beat the boss, I win.
  • The game should be challenging, but theoretically winnable.

Zipline 16 - Bar Chart

User Stories

  • I can see US Gross Domestic Product by quarter, over time.
  • I can mouse over a bar and see a tooltip with the GDP amount and exact year and month that bar represents.

Zipline 17 - Scatterplot Graph

User Stories

  • I can see performance time visualized in a scatterplot graph.
  • I can mouse over a plot to see a tooltip with additional details.

Zipline 18 - Heat Map

User Stories

  • I can view a heat map with data represented both on the Y and X axis.
  • Each cell is colored based its relationship to other data.
  • I can mouse over a cell in the heat map to get more exact information.

Zipline 19 - Force Directed Map

User Stories

  • I can see a Force-directed Graph that shows which campers are posting links on Camper News to which domains.
  • I can see each camper's icon on their node.
  • I can see the relationship between the campers and the domains they're posting.
  • I can tell approximately many times campers have linked to a specific domain from it's node size.
  • I can tell approximately how many times a specific camper has posted a link from their node's size.

Zipline 20 - Map Data Across the Globe

User Stories

  • I can see where all Meteorites landed on a world map.
  • I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
  • I can mouse over the meteorite's data point for additional data.