Build a Collection of Miniature Web Front End Apps

Develop Miniature Web Front End Apps

Use the common web front end development tools and concepts to build a collection of miniature web apps. This project is part of deliverables for my Web Front End Certification with freeCodeCamp, a free online nonprofit learning place for learners to acquire and improve on their coding skill.

Process

The certification was completed in May 2017 and followed this web front end coding curriculum to build miniature web apps leveraging HTML, CSS, JavaScript Algorithms, Data Structures, JQuery and Responsive Web Design Libraries. Below are some of the web apps from the collection:

1. Build A Simon Game

Buid a CodePen.io app that is functionally similar to this Simon® Game App.

$\Rightarrow$ live Simon Game show.

Fulfill the following user stories:

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

See code here.

2. Build A Tic Tac Toe Game

Buid a CodePen.io app that is functionally similar to this Tic Tac Toe Game App.

$\Rightarrow$ live Tic Tac Toe Game show.

Fulfill the following user stories:

• I can play a game of Tic Tac Toe with the computer.
• My game will reset as soon as it’s over so I can play again.
• I can choose whether I want to play as X or O.

See code here.

3. Build A Pomodoro Clock

Buid a CodePen.io app that is functionally similar to this Pomodoro Clock App.

$\Rightarrow$ live Pomodoro Clock show.

Fulfill the following user stories:

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

See code here.

4. Build A JavaScript Calculator

Buid a CodePen.io app that is functionally similar to this JavaScript Calculator App.

$\Rightarrow$ live Javascript Calculator show.

Fulfill the following user stories:

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

See code here.

5. Use the Twitchtv JSON API

Buid a CodePen.io app that is functionally similar to this Twitchtv JSON API App.

$\Rightarrow$ live Twitchtv JSON API show.

Fulfill the following user stories:

• I can see whether Free Code Camp is currently streaming on Twitch.tv.
• I can click the status output and be sent directly to the Free Code Camp’s Twitch.tv channel.
• If a Twitch user is currently streaming, I can see additional details about what they are streaming.
• 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 comster 404 to your array of Twitch streamers.

See code here.

6. Build a Wikipedia Viewer

Buid a CodePen.io app that is functionally similar to this Wikipedia Viewer App.

$\Rightarrow$ live Wikipedia Viewer show.

Fulfill the following user stories:

• I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
• I can click a button to see a random Wilipedia entry.

See code here.

7. Show the Local Weather

Buid a CodePen.io app that is functionally similar to this Local Weather App.

$\Rightarrow$ live Local Weather App show.

Fulfill the following user stories:

• I can see the weather in my current location.
• I can see a different icon or background on the weather.
• I can push a button to toggle between Fahrenheit and Celsius.

See code here.

8. Build a Personal Portfolio Webpage

Buid a CodePen.io app that is functionally similar to this Personal Portfolio Webpage App.

$\Rightarrow$ live Build a Personal Portfolio Webpage show.

Fulfill the following user stories:

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

See code here.

9. Build a Tribute Page

Buid a CodePen.io app that is functionally similar to this Tribute Page App.

$\Rightarrow$ live Build a Tribute Page (English) show.

$\Rightarrow$ live Build a Tribute Page (Deutsch) show.

Fulfill the following user stories:

• I can view a tribute page with an image and text
• I can click on a link that will take me to an external website with further information on the topic.

See code here.

Language

HTML, CSS, JavaScript

Programming Library

Bootstrap, jQuery

Artifact

• Build a Simon Game
• Tic Tac Toe Game
• Pomodoro Clock
• Javascript Calculator
• Twitchtv JSON API
• Wikipedia Viewer
• Local Weather App
• Build a Personal Portfolio Webpage
• Build a Tribute Page (English and Deutsch)