FCC Speedrun: Twitch-Client
I just completed my twitch.tv app and it didn’t actually seem as difficult as I thought it would be. Maybe I’m getting the hang of this! Or maybe it really just wasn’t as difficult… I’m uncertain. Either way, I’m happy with the results but always looking for suggestions to improve!
Project 4: Twitch-Client App
The fifth front-end project on my Speedrun is to create an app that is functionally similar to this: https://codepen.io/freeCodeCamp/full/Myvqmo
Requirements:
- User can see whether Free Code Camp is currently streaming
- User can click and be sent directly to the twitch.tv channel
- If a twitch user is currently streaming, additional details are shown
Like previously, I began with my skeleton and built around it. Once I was able to get my basic functions, I decided to use the map() method to create a new array instead of using multiple for loops for more efficient code. Took a bit of playing around but it finally worked the way I wanted it to. I then had to append new divs for each twitch streamer and show which were online or offline with a small colored circle. After all my JavaScript was written, I began styling but didn’t want to invest too much time since I cared more about functionality than aesthetics this time around.
Things I learned along the way:
- How to use the map() method
- Improvement with flexbox
- Improvement with responsive web design
When finishing I was again proud of my work, but still have much to learn. I didn’t realize until after I completed the project that the P1xt Speedrun challenge included an additional requirement:
- Show placeholder if streamer has closed their account (or the account never existed)
When I redo my Speedrun (mentioned in previous post) I will incorporate this additional user story! Since I’m still following the original FCC map, my next project isn’t until the advanced front-end development projects, so for the time being I will be pausing my Speedjog and attempting to cruise through the algorithm challenges.
