# Jinntakk Twitch API adviceplease!

**URL:** <https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786>\
**Category:** I Built This\
**Created:** [March 31, 2018, 4:55pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786 "2018-03-31T16:55:11Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![jinntakk](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinntakk](https://forum.freecodecamp.org/u/jinntakk)\
**Post date:** [March 31, 2018, 4:55pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/1 "2018-03-31T16:55:11Z")

</div>

> **[ZxvOoM](https://codepen.io/jinntakk/full/ZxvOoM/)**
>
> ...

Hey guys this is my Twitch API project. Everything is hardcoded right now, so I’d love to get some help. This project was a little bit harder than I thought (tried using Bootstrap 4 for the first time), and I made it with the table tag, and I was wondering if there is a way I could make my code a little bit more dynamic instead of everything being so hardcoded. Any advice is appreciated!

Thanks guys!

---

<div class="post-metadata">

**Author:** ![JohnnyBizzel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnnybizzel/32/37661_2.png) [@JohnnyBizzel](https://forum.freecodecamp.org/u/JohnnyBizzel)\
**Post date:** [April 1, 2018, 9:36am UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/2 "2018-04-01T09:36:36Z")

</div>

It’s good design but it shows there are 3 streams all offline. Where are the online streams?

---

<div class="post-metadata">

**Author:** ![jinntakk](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinntakk](https://forum.freecodecamp.org/u/jinntakk)\
**Post date:** [April 1, 2018, 2:37pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/3 "2018-04-01T14:37:02Z")

</div>

Thanks so much! The middle stream is supposed to be online 24/7. I just checked it myself and it seems to be online. Maybe you checked when the stream inadvertently went down.

If you don’t mind, would you check my code to see if there are anything I could make my code a little bit more dynamic?

---

<div class="post-metadata">

**Author:** ![JohnnyBizzel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnnybizzel/32/37661_2.png) [@JohnnyBizzel](https://forum.freecodecamp.org/u/JohnnyBizzel)\
**Post date:** [April 1, 2018, 6:56pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/4 "2018-04-01T18:56:28Z")

</div>

And how do I toggle between the online and offline?  
Your code is not very DRY (re-usable). What if you were to add another 10 streams. You have to write a lot of code for each stream. Try to re-factor the code.

---

<div class="post-metadata">

**Author:** ![jinntakk](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinntakk](https://forum.freecodecamp.org/u/jinntakk)\
**Post date:** [April 1, 2018, 7:30pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/5 "2018-04-01T19:30:36Z")

</div>

Is it possible with the table tag I used or would I have to change up my code? This is my first time using Bootstrap 4 so I’m not yet too sure what I can and can’t do with it.

---

<div class="post-metadata">

**Author:** ![JohnnyBizzel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnnybizzel/32/37661_2.png) [@JohnnyBizzel](https://forum.freecodecamp.org/u/JohnnyBizzel)\
**Post date:** [April 2, 2018, 12:56pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/6 "2018-04-02T12:56:27Z")

</div>

You can use jQuery to append more rows to the table.

---

<div class="post-metadata">

**Author:** ![jinntakk](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinntakk](https://forum.freecodecamp.org/u/jinntakk)\
**Post date:** [April 2, 2018, 6:57pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/7 "2018-04-02T18:57:04Z")

</div>

Thank you for the advice! With a lot of trial and error, I’ve finally cleaned up my code so that it isn’t hardcoded anymore. Would you mind taking a look to see if there’s anything else I can fix?

Also, for toggling it wasn’t one of the user story so I ended up not doing it, but how could I do it? I’m not too sure how to collapse tables.

---

<div class="post-metadata">

**Author:** ![JohnnyBizzel](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/johnnybizzel/32/37661_2.png) [@JohnnyBizzel](https://forum.freecodecamp.org/u/JohnnyBizzel)\
**Post date:** [April 2, 2018, 7:00pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/8 "2018-04-02T19:00:14Z")

</div>

Looks much better.  
You could re-draw the table on user click. I would like to see a few more streams on the list.  
It looks a bit sad with only 3 streams.

---

<div class="post-metadata">

**Author:** ![jinntakk](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinntakk](https://forum.freecodecamp.org/u/jinntakk)\
**Post date:** [April 2, 2018, 10:19pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/9 "2018-04-02T22:19:42Z")

</div>

Thanks so much for the help. I super appreciate it!

I’ve added more streams on there, and added buttons, but it looks a bit primitive. Any advice for that, or do you think it looks okay?

---

<div class="post-metadata">

**Author:** ![fajfara](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/fajfara/32/90119_2.png) [@fajfara](https://forum.freecodecamp.org/u/fajfara)\
**Post date:** [April 3, 2018, 10:02am UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/10 "2018-04-03T10:02:12Z")

</div>

This might just be my personal opinion, but I hate that moving navbar when I click the button on top. I had the same problem, me personally I found this useful: [Content jumping around](https://css-tricks.com/content-jumping-avoid/)

---

<div class="post-metadata">

**Author:** ![jinntakk](https://avatars.discourse-cdn.com/v4/letter/j/22d042/32.png) [@jinntakk](https://forum.freecodecamp.org/u/jinntakk)\
**Post date:** [April 5, 2018, 4:59pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/11 "2018-04-05T16:59:16Z")

</div>

How would I incorporate that into my navbar? I don’t think setting height limits to it would do anything right?

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [June 1, 2021, 1:53pm UTC](https://forum.freecodecamp.org/t/jinntakk-twitch-api-adviceplease/182786/12 "2021-06-01T13:53:50Z")

</div>


