Codepen Projects

codepen.io is basically a playground for the front-end side of the web. The possibilities are nearly endless. A few of my favorite creations, or most recent, are found on this page. Not every pen I have created is on this page, but you can find the rest here. Click the individual tabs to see the html, stylesheet, and javascript related to each codepen.

Use the twitch.tv JSON API

I find myself watching twitch.tv often so this project from Free Code Camp was very exciting. Basically, it uses the JSON API from twitch to display whether a streamer is online or offline. If the streamer is online it displays what game they’re playing. The codepen will also show a placeholder notification for if the streamer account has closed or if it never existed. The JSON data is obtained using the $.getJSON() method.

See the Pen Use the twitch.tv JSON API by mtlong29 (@mtlong29) on CodePen.

This Navigation Bar wasn’t originally created for any reason other than wanting to create it. I ended up using most of it on Pare and Flourish. This navigation bar sticks to the bottom of the page (or under an element’s height depending on your needs) until the user scrolls past it which then sticks to the top. It is responsive which means what you’re likely looking at is the mobile version. To see the desktop version you’ll have to open it up on codepen or you can see a similar version on Pare and Flourish. Most of the navbar was built using jQuery.

See the Pen Navigation Bar by mtlong29 (@mtlong29) on CodePen.

Show the Local Weather

This local weather project is a project assigned from Free Code Camp as well. It gets the user’s IP address using $.get("http://ipinfo.io", function(){}). Based off of the location of the IP address it uses the Open Weather Map API to display the weather information.

See the Pen Show the Local Weather by mtlong29 (@mtlong29) on CodePen.

Build a Wikipedia Viewer

This project uses the wikipedia API to search for wikipedia articles.

See the Pen Build a Wikipedia Viewer by mtlong29 (@mtlong29) on CodePen.