These are chat archives for FreeCodeCamp/HelpFrontEnd

22nd
Apr 2017
Wing Ng
@citrusapple
Apr 22 2017 00:00

Hey all, so I'm pretty new to coding and just got to this part with the random quote machine. I realized that I have not the slightest of clue how things link to each other. (how html, css, and java work together on codepen). I figured that applying the Jquery section made sense so I used the code we learned from the lesson "trigger click evens with JQuery" as a base for the project, but it didn't work. Not even when I copied and pasted the code from that lesson to try and mimic the page they created for the cat photo finder with the message button.

when I copy and paste this code

<script>
  $(document).ready(function() {$("#getMessage").on("click", function(){

});
    // Only change code below this line.
    $("#getMessage").on("click", function(){

});
    // Only change code above this line.
  });
</script>

into the Jquery box it tells me unexpected token.

so please help explain to me as to how to actually apply Jquery and Javascript code on codepen for my project? What am I missing?

Gulsvi
@gulsvi
Apr 22 2017 00:00
@jpdevpro Everyone hits that issue at one point or another - you aren't alone! Good luck. (bonŝancon) :)
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:01
@SkyCoder01 damn its almost like exactly as mine
Your twitch.tv is amazing
Gulsvi
@gulsvi
Apr 22 2017 00:01
I put a lot of work in that twitch app :) thank you
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:02
@SkyCoder01 anyway I need help adding all of profile pictures same time...
As a list
Burak
@BurakAy
Apr 22 2017 00:02
@citrusapple you don't have to paste the <script> tags
Jonathan Pool
@jrpool
Apr 22 2017 00:02
@SkyCoder01 Multan dankon!
Burak
@BurakAy
Apr 22 2017 00:02
into codepen
Wing Ng
@citrusapple
Apr 22 2017 00:03
@BurakAy why is that?
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:03
@citrusapple they add <script> for you
Wing Ng
@citrusapple
Apr 22 2017 00:03
i also tried removing it but it didn't work
Gulsvi
@gulsvi
Apr 22 2017 00:03
@MathematicsCoding Start with a blank codepen and use an array of images. Try to add them as a list.
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:03
Alright
Gulsvi
@gulsvi
Apr 22 2017 00:03
Esperanto is a cool language!
Burak
@BurakAy
Apr 22 2017 00:05
@citrusapple your on click event is not returning anything when the user clicks
Wing Ng
@citrusapple
Apr 22 2017 00:05
@BurakAy ooooh i see that now
Burak
@BurakAy
Apr 22 2017 00:05
 $("#getMessage").on("click", function(){
      code to do something goes here
});
Wing Ng
@citrusapple
Apr 22 2017 00:06
@BurakAy thank you!
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:06
alright
this is a start
Gulsvi
@gulsvi
Apr 22 2017 00:06
@citrusapple One thing you may also want to check - click "Settings" in your codepen project, click "JavaScript", and then use the "Quick-add" menu to add jQuery. Lots of people forget to do that :)
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:07
will for loop work?
Gulsvi
@gulsvi
Apr 22 2017 00:07
Try it :)
Burak
@BurakAy
Apr 22 2017 00:07
@citrusapple no problem, you're welcome
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:07
I remember you told me before for loop wont work :\
I will try it anyway
Gulsvi
@gulsvi
Apr 22 2017 00:08
For loop will work if you declare 'i' with let, but it's best to use .forEach()
I think I used .filter()
let?
Wtf?
Click all button lol
Different profile picture
Wing Ng
@citrusapple
Apr 22 2017 00:11
@SkyCoder01 oh I was about to come back and say it didn't work out and then saw your reply! Thank you, i didn't forget, I had no idea that's what I have to do. Do you know of any source where the basic of basics are explained? I feel like I keep getting stuck on very silly things like this and when I google it there's so much info out there I can't digest them properly. It would be much appreciated!
CamperBot
@camperbot
Apr 22 2017 00:11
citrusapple sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1134 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 22 2017 00:11
  $("#channel").on("click", function() {
    for (let i = 0; i < users.length; i++) {
      var channelApiZero = 'https://wind-bow.glitch.me/twitch-api/channels/' + users[i] + '?callback=?';
      var Name0 = 'https://wind-bow.glitch.me/twitich-api/channels' + users[i] + '?callback=?';
    }
// what is the URL = to after the for loop is done ?
    $.getJSON(channelApiZero, function(data) {
      $(".channel").html('<img class="profile-pic" src="' + data.logo + '" alt="">');
    });
  });
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:11
oh
That it?
Gulsvi
@gulsvi
Apr 22 2017 00:12
@citrusapple I think these are just basic growing pains, you learn them as you go. It's why this chat can be very active sometimes lol. There are tutorials on youtube, but I learned them through lots of trial and error, so don't have any suggestions unfortunately.
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:12
Only one profile pic show up
Gulsvi
@gulsvi
Apr 22 2017 00:13
Right, @MathematicsCoding because .html() replaces the HTML every time you use it.
so it writes one pic to the HTML, then replaces it with another, until you get to the last user in your array
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:13
Hm
What if I used second getJson method?
different class would that work?
Without for loop I meant
Gulsvi
@gulsvi
Apr 22 2017 00:15
This is where it's helpful to use a blank codepen, no getJSON. just an array of images and try to list them out in the HTML
try to simplify the problem
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:15
alright
Wing Ng
@citrusapple
Apr 22 2017 00:15
@SkyCoder01 ah too bad, I have been watching lots of youtube tutorials too, but you never know which ones are good. Some of them are just painful to sit through... guess i'll tough it out best I can
Caleb Gasser
@calebgasser
Apr 22 2017 00:17
Trying to get scrollspy working, can someone tell me where I'm going wrong? https://codepen.io/zexanima/pen/GmqRNB
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:18
    var Name0 = 'https://wind-bow.glitch.me/twitich-api/channels' + users[i] + '?callback=?';
Why did i have it?
Gulsvi
@gulsvi
Apr 22 2017 00:21
@MathematicsCoding
var imageArray = [
  'https://source.unsplash.com/category/nature?sig=1',
  'https://source.unsplash.com/category/nature?sig=2',
  'https://source.unsplash.com/category/nature?sig=3',
  'https://source.unsplash.com/category/nature?sig=4',
  'https://source.unsplash.com/category/nature?sig=5',
]
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:21
Wtf is that link?
Gulsvi
@gulsvi
Apr 22 2017 00:21
Make a codepen that loops through that array and shows the images listed down the page. Then looping through streamers will make more sense.
They are images lol
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:22
Yeah..
So they are just an example then?
So I have to delete old array?
Gulsvi
@gulsvi
Apr 22 2017 00:22
Yes, just sample images to practice looping through data and displaying it in the HTML
I think the getJSON is going to get confusing real quick, so just a suggestion :)
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:23
I mean add link
'https://link/'+users[0]
Nvm I did that..
'https://link/'+freecodecamp
well freecodecamp will be undefined then..
Gulsvi
@gulsvi
Apr 22 2017 00:24
@calebgasser In your codepen settings, drag jQuery above bootstrap.min.js to get your scroll spy working.
jQuery has to laod first
Not sure I understand the question @MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:33
well
I didnt understand what you said...
but I made my code more shorter
FYI different pen
Some hints in that code to help you find the bug in your code
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:38
.forEach?
Ah I see how it works
Gulsvi
@gulsvi
Apr 22 2017 00:39
Yeah, forEach is good because it has that (function(image) in there - a callback. This helps with your getJSON
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:43
sigh...
Daniel Pak
@WhoIsDP
Apr 22 2017 00:43
@calebgasser also there's no jquery call to your scrollspy... Look up bootstrap documentation for that
Lol @MathematicsCoding what's your proble?
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:44
Well Im trying to use .forEach function
I just want the images show up after button
Daniel Pak
@WhoIsDP
Apr 22 2017 00:46
Well first.. Why did you put the single qupte after the double in src? @MathematicsCoding
You're technically closing that statement...
Quote*
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:47
Well its looks correct but its code is an example of @SkyCoder01
Gulsvi
@gulsvi
Apr 22 2017 00:49
@MathematicsCoding
  // array of users
  var users = ["ESL_SC2", "OgamingSC2", "freecodecamp"];

  // forEach loops through users
  users.forEach(function(user) {

    // for each user in the array, make an API Url for them
    var userApi = 'https://wind-bow.glitch.me/twitch-api/users/' + user + '?callback=?';

    // for each API Url made above, call the API with getJSON
    $.getJSON(userApi, function(data) {

      // for each API call append an image of the user to the page
      $('.channel').append('<img alt="" src="' + data.logo + '">');
    });
  });
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:49
...
Gulsvi
@gulsvi
Apr 22 2017 00:49
Study that logic
It gets much more complicated because you need to make more than one API call for each user
And get much more data than just the picture
If you can get the basic logic down, you can try to write it on your own - don't copy/paste that code, try to understand the steps involved and then adapt your code to work
Daniel Pak
@WhoIsDP
Apr 22 2017 00:52
@MathematicsCoding exactly... The worst way to learn code if copying and pasting
Is*
Sorry I'm typing on my phone
Saboor Malik
@MathematicsCoding
Apr 22 2017 00:58
Sigh I gotta learn more about forEach and append
I gotta go I will use your pen as an example to understand these
Thanks @SkyCoder01
CamperBot
@camperbot
Apr 22 2017 00:59
mathematicscoding sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1135 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Brandon
@rilebra
Apr 22 2017 01:37
Does anyone know how to place an image caption within the border of the img-thumbnail class?
Gulsvi
@gulsvi
Apr 22 2017 01:47
@rilebra Create a div around the image, add some padding, give it a white background color, and add text.
Those two links may help depending on what version of Bootstrap you are using
Brandon
@rilebra
Apr 22 2017 01:49
Thanks @SkyCoder01, I will try this!
CamperBot
@camperbot
Apr 22 2017 01:49
rilebra sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1136 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Brandon
@rilebra
Apr 22 2017 01:58
@SkyCoder01 I freakin did it!
It seems so simple now, but I have seriously been stuck on this for 2 days (working on and off)
Gulsvi
@gulsvi
Apr 22 2017 02:01
@rilebra Great news! :)
Always feel good to get over a hurdle - now on to the next one :)
Kuriakin Zeng
@kuriakinzeng
Apr 22 2017 02:05
Awesome @rilebra
naughtybodywash
@naughtybodywash
Apr 22 2017 02:08
evening all
looking for a little feedback on the "layout" of my drumroll.... TRIBUTE PAGE!
Paradox5
@Paradox5
Apr 22 2017 02:23
Being ill isent fun
Someone explain this. I'm baffled.
why would the period be at the front when i put it where it's supposed to be.
at the end of the sentence
ThanaKoi00
@ThanaKoi00
Apr 22 2017 02:44
Is it the version of Bootstrap I am using?
It was the Bootstrap
Igor Amidzic
@igoramidzic
Apr 22 2017 02:55
Can anyone give me some feedback on my portfolio site, please? www.igoramidzic.com
Thank you!
Paradox5
@Paradox5
Apr 22 2017 03:19
Have you sucessfully simplified
more shorter
Pagnito
@Pagnito
Apr 22 2017 03:23
@MathematicsCoding u online?
Pagnito
@Pagnito
Apr 22 2017 03:29
@SkyCoder01 man, i ended up solving the reduce in such a complex way lol, didnt even use math.max or math.min and im lookin at the github solution now and im like "oh wtfffff
Gulsvi
@gulsvi
Apr 22 2017 03:30
@Pagnito What's your solution?
Gulsvi
@gulsvi
Apr 22 2017 03:33
Yeah, you could simplify that a bit :)
Pagnito
@Pagnito
Apr 22 2017 03:33
yea haha
im lookin at the basic github, solution and i like that one
Gulsvi
@gulsvi
Apr 22 2017 03:34
I don't think your solution works for all numbers, hmmm
Pagnito
@Pagnito
Apr 22 2017 03:35
hold on lemme check
i know it passed tho, but im double check
Vincent Del Vecchio
@DVecc
Apr 22 2017 03:35
@igoramidzic if that's for the project on FCC I believe your navbar needs buttons that take you to each section on your page such as the about, portfolio, and contact section
Other wise it looks pretty nice
Pagnito
@Pagnito
Apr 22 2017 03:37
@SkyCoder01 seems to work, im comparing diffirent values and they all come out the same
Gulsvi
@gulsvi
Apr 22 2017 03:37
@Pagnito Yea, I just tested and it does work.
Pagnito
@Pagnito
Apr 22 2017 03:38
@SkyCoder01 phew
Gulsvi
@gulsvi
Apr 22 2017 03:38
I used ES6 for mine
Pagnito
@Pagnito
Apr 22 2017 03:38
lol
yea i need to start gettin the hang of it too and really lay off jquery
Gulsvi
@gulsvi
Apr 22 2017 03:38
They have Array.from() that lets you make an array with all the missing numbers
Pagnito
@Pagnito
Apr 22 2017 03:38
haha, well that makes it easy
Gulsvi
@gulsvi
Apr 22 2017 03:39
I think if any of those solutions end up being more than 10-15 lines, it's time to think of a new approach :)
Pagnito
@Pagnito
Apr 22 2017 03:40
yea u def right
i didnt see it from the perspective of starting the loop not from O.o kinda feel dumb lol
oh well lol
Gulsvi
@gulsvi
Apr 22 2017 03:41
Hey, you got it though, without much help. That's a good start
I looked through and a couple actually do get a bit longer than 10-15 lines
Pagnito
@Pagnito
Apr 22 2017 03:41
oh shit
hehe
Gulsvi
@gulsvi
Apr 22 2017 03:41
Smallest Common Multiple was a pain
Pagnito
@Pagnito
Apr 22 2017 03:42
not sure what u mean
Pagnito
@Pagnito
Apr 22 2017 03:43
ooh the challenge, i thought u were talkin about reduce still lol
hey i wanted to ask u
you know angular right?
Gulsvi
@gulsvi
Apr 22 2017 03:43
No, don't know any angular
Pagnito
@Pagnito
Apr 22 2017 03:44
oh, must of been someone else
i found this funny vid online about react vs angular
Gulsvi
@gulsvi
Apr 22 2017 03:44
Lots of reasons to like react more, from what I hear
i hope so since thats what FCC is teachin us
or will be teaching i should say in my case
Gulsvi
@gulsvi
Apr 22 2017 03:46
So that video basically says that React is hipster and Angular is hard core? lol
Can you read the russian?
Pagnito
@Pagnito
Apr 22 2017 03:46
yea
i think its sayin react is like jquery, and angular is vanilla
thats what i got from it
Gulsvi
@gulsvi
Apr 22 2017 03:47
lol
Weird that one of the recommended videos after that is how make baguettes
:bread: :bread:
Pagnito
@Pagnito
Apr 22 2017 03:49
lol
i love baguettes
@SkyCoder01 do u know anything about nodejs
Gulsvi
@gulsvi
Apr 22 2017 03:52
I started studying it a couple of weeks ago
Pagnito
@Pagnito
Apr 22 2017 03:53
i was looking into for like a few days strait about 2 weeks ago, aaand im stil not sure how it works, i just now it makes javascript work to make desktop apps?
Gulsvi
@gulsvi
Apr 22 2017 03:54
From what I see, it's for the back-end
talks to a database, generates HTML for the front end
Pagnito
@Pagnito
Apr 22 2017 03:55
oh
so do we use react and nodejs together
Gulsvi
@gulsvi
Apr 22 2017 03:55
All javascript though, so pretty easy to pick up as far as learning a new language goes, it's just figuring out all the components/libraries that's challenging.
Yeah, react and nodejs would work together
Pagnito
@Pagnito
Apr 22 2017 03:56
oh ok
Gulsvi
@gulsvi
Apr 22 2017 03:56
react for the UI, node handles everything on the server side
Pagnito
@Pagnito
Apr 22 2017 03:56
so what is it about react and angular that u cant do without?
Gulsvi
@gulsvi
Apr 22 2017 03:57
I don't know enough to say for sure, tbh
Pagnito
@Pagnito
Apr 22 2017 03:57
i feel u
Gulsvi
@gulsvi
Apr 22 2017 03:57
component reusability is one thing I hear people talk about
Pagnito
@Pagnito
Apr 22 2017 03:58
what does that mean
Gulsvi
@gulsvi
Apr 22 2017 03:59
That accordion you use in Twitch could be written in React and then used in other applications
reused - with little modification to the code
Pagnito
@Pagnito
Apr 22 2017 03:59
ooh
so kinda like creating a shortcut like jquery does?
but for an element
Gulsvi
@gulsvi
Apr 22 2017 03:59
yeah, I guess you could say that
^^ That looks interesting. Good for people with a jQuery background.
Pagnito
@Pagnito
Apr 22 2017 04:00
yea i guess thats pretty cool wont know how awesome it till im there i suppose
i dont get it, why do they pul cows and other animals on these books lol
Gulsvi
@gulsvi
Apr 22 2017 04:01
hahaha I have no idea
That's a fake book though I think lol
I think the Animals are just to make them stand out. A lot of them have the picture of some nerdy guy who wrote the book too.
Pagnito
@Pagnito
Apr 22 2017 04:03
lol the answer
People like pretty pictures.
sudip chhetri
@SudipChhetri
Apr 22 2017 04:30
hey is there any one to help me
Pagnito
@Pagnito
Apr 22 2017 05:09
i can if its something i can help with
Wing Ng
@citrusapple
Apr 22 2017 05:14
Hi all, I'm trying to use Jquery to do an action with a click event. It works, but only once. I'm working on the random quote machine and the quotes have been assigned to var a-u. can anyone tell me what i'm missing?
var happiness= [a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u];
var num= Math.floor(Math.random()*22);



$(document).ready(function(){ 
  $('#getHappy').on("click",function(){$(".message").html(happiness[num])})
});
iso
@iso1048
Apr 22 2017 05:19
@citrusapple try to declare the variable num inside the click function.
Elliot Zeng Yi
@elliotzengyi
Apr 22 2017 05:19
hi
function getMaxOfArray(numArray) {
    return Math.max.apply(null, numArray);
}
excuse me, is there anybody know why it has a null prop in apply?
Pagnito
@Pagnito
Apr 22 2017 05:21
maybe even inside the click function. thatvway it will generate a new num on every click
Elliot Zeng Yi
@elliotzengyi
Apr 22 2017 05:21
but it didn't say why
Wing Ng
@citrusapple
Apr 22 2017 05:22
@gothamknight ah! thank you it worked when I declared it in the click function !
help me
This, edit where, what, I do not understand where the problem
Baha Aiman
@bhshkh
Apr 22 2017 06:18
What am I doing wrong here?
Why don't I get an alert on clicking the span?
https://codepen.io/bhshkh/pen/aWNbGE
Clyde Lobo
@oppiniated
Apr 22 2017 06:58
Learn about javascript function scopes. increaseBreak and decreaseBreak are not available globally and are scoped to the angular module clock, also in you are using angular use ng-click instead of onclick. Check your console for errors. I have fixed it here https://codepen.io/clydelobo/pen/YVWNxe
Tyler Collins
@tjscollins
Apr 22 2017 07:02
@elliotzengyi the call and apply methods have an extra argument of their own before the arguments they pass to the function. That argument sets the value of the this variable inside the function. For Math.max the value isn't important, so null is fine.
Elliot Zeng Yi
@elliotzengyi
Apr 22 2017 07:18
thank you @tjscollins & @Czpl that's great help.
CamperBot
@camperbot
Apr 22 2017 07:18
elliotzengyi sends brownie points to @tjscollins and @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @tjscollins |http://www.freecodecamp.com/tjscollins
:cookie: 130 | @czpl |http://www.freecodecamp.com/czpl
Daniel Romero
@Ranacode
Apr 22 2017 07:26
@Ranacode
Hi guys, any tips on the steamroller challenge? im trying to write an small algorithm that check if the contents of the array is an another array and break the loop when it return false on this and push the element into the new array
I'm using the .isArray function
Tyler Collins
@tjscollins
Apr 22 2017 07:31
@Ranacode It's probably best to use recursion rather than iteration. Something like:
function flatten(array)
    newArray = []
    for each item in array
        if item is an array
            newItem = flatten(item)
        else
            newItem = item
        newArray.push(newItem)
    return newArray
}
`
Daniel Romero
@Ranacode
Apr 22 2017 07:33
holy shit, the recursion, true
Tyler Collins
@tjscollins
Apr 22 2017 07:33
@Ranacode Note that's pseudocode, I'll let you figure out the details on your own
Daniel Romero
@Ranacode
Apr 22 2017 07:33
the newItem = flatten(item) clarify my ideas
I know, thanks @tjscollins
CamperBot
@camperbot
Apr 22 2017 07:33
ranacode sends brownie points to @tjscollins :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @tjscollins |http://www.freecodecamp.com/tjscollins
Tyler Collins
@tjscollins
Apr 22 2017 07:34
@Ranacode You could do it iteratively (any recursive algorithm can be done iteratively), but it will be harder to program (but more memory/time efficient). Just something to remember in the future.
Daniel Romero
@Ranacode
Apr 22 2017 07:36
Thanks for the advice, im trying to do the best whem im writing algorithms
Learning about regexp, recursion, patterns...
Daniel Romero
@Ranacode
Apr 22 2017 08:13

function steamrollArray(arr) {
// I'm a steamroller, baby

function flatten(array) {

    var newArray = [];

 for (var i = 0; i < array.length; i++) {
     if (isArray(array[i])) {
       newItem = flatten(array[i]);

     } else {

       newItem = array[i];
       newArray.push(newItem);
     }

 }

 return newArray;

}

//This function check if the argument is an array
function isArray(array) {
return Array.isArray(array);
}

return flatten(arr);
}

Don't know how to put all the code inside
function steamrollArray(arr) {
  // I'm a steamroller, baby

   function flatten(array) {

        var newArray = [];

     for (var i = 0; i < array.length; i++) {
         if (isArray(array[i])) {
           newItem = flatten(array[i]);

         } else {

           newItem = array[i];
           newArray.push(newItem);
         }

     }

     return newArray;
   }

//This function check if the argument is an array
  function isArray(array) {
    return Array.isArray(array);
  }

  return flatten(arr);
}
OK NOW xD
This recursive function don't works for me
ok nothing jaja
it works, i just changed the scope of var newArray
Pradeep Singh
@mepsrajput
Apr 22 2017 08:32
Hey guys I was implementing a navbar using bootstrap. But the toggle function didnt work using local bootsrap but it worked totally fine using CDN. Anybody knows the reason. Note: All other properties working fine with local BS.
Azulem Ariolu
@Meluza
Apr 22 2017 08:43
Hello Everyone, kindly take a look my FCC Tribute pagehttp://codepen.io/Zachra/full/wdMQXB/... Please, If possible, test on Desktop and in mobile and check the orientation in mobile. I will be grateful for feedback especially on DRY (Don't Repeat Yourself - Redundant CSS declarations).
Daniel Romero
@Ranacode
Apr 22 2017 08:46
Im gonna give you a feedback, in mobile the navbar top fixed makes him annoying to read the post
navbar top fixed no, header top i mean
By the way, is a good design, good work
Azulem Ariolu
@Meluza
Apr 22 2017 08:47
@SkyCoder01 Thanks for the feedback. I thout I commented out Bootstrap 4 and used Bootstrap3 for that reason...
CamperBot
@camperbot
Apr 22 2017 08:47
meluza sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:star2: 1137 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Rionangelfire
@Rionangelfire
Apr 22 2017 09:06
READY to submiT!
Czpl
@Czpl
Apr 22 2017 09:08
wow
ulmasbek
@ulmasbekk
Apr 22 2017 09:14
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-4"><a href="#">ABOUT</a>
</div>
<div class="col-md-2"><a href="#">PORTFOLIO </a></div>
<div class="col-md-2"><a href="#">CONTACT</a>
</div>
</div>
</div>
need a help with this code
I cant understand why my offset is doesn't working
Czpl
@Czpl
Apr 22 2017 09:19
if you use bootstrap 4 use "offset-md-4"
instead of col-md-offset-4
@ulmasbekk
ulmasbek
@ulmasbekk
Apr 22 2017 09:21
@Czpl Thank you soooo much!!!!
CamperBot
@camperbot
Apr 22 2017 09:21
ulmasbekk sends brownie points to @czpl :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @czpl |http://www.freecodecamp.com/czpl
Keon Samuel
@keonsam
Apr 22 2017 10:27
anyone did the AI for tic tac toe?
@Rionangelfire you didn't do the nav.
Rionangelfire
@Rionangelfire
Apr 22 2017 10:29
The nav buttons?
Thank you @keonsam
CamperBot
@camperbot
Apr 22 2017 10:30
rionangelfire sends brownie points to @keonsam :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @keonsam |http://www.freecodecamp.com/keonsam
how do i tie nav buttons to page?
Czpl
@Czpl
Apr 22 2017 11:44
ok I'm done with that weather app
Branden Ng
@BrandenDaniel
Apr 22 2017 11:47
does anyone know free-code-camp icon rgb color
Keon Samuel
@keonsam
Apr 22 2017 11:47
@Czpl nice
Azulem Ariolu
@Meluza
Apr 22 2017 11:56
@BrandenDaniel I don't know the RGB...but use color name deepgreen
Pieter Stokkink
@forkerino
Apr 22 2017 11:56
@BrandenDaniel nope, but there are browser plugins that let you sample a page and give you hex/rgb
I'm using colorzilla
Roxroy
@roxroy
Apr 22 2017 11:56
@Czpl , works well, got correct temp and location.
Azulem Ariolu
@Meluza
Apr 22 2017 11:57
35, 116, 28
Try this 35, 116, 28 @BrandenDaniel
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 11:59
Hello everyone
Ken Haduch
@khaduch
Apr 22 2017 12:00
@BrandenDaniel - #006400 is the hex color for it, would that work?
@Czpl - For some reason, I get nothing when I tried to load your weather site? Other than some text that says "City, Country Summary 0 getWeather"?
Czpl
@Czpl
Apr 22 2017 12:06
@khaduch nothing happens when you click on "get weather"?
Pieter Stokkink
@forkerino
Apr 22 2017 12:08
@Czpl it works for me, but the changing from celsius to fahrenheit and back behaves strange. When I get the weather, it is 9.7 degrees, I switch to fahrenheit 49. So far so good. I switch back: 9.4! Where did my 0.3 degrees go? If I get the weather again, it is 9.7 again.
Ken Haduch
@khaduch
Apr 22 2017 12:08
@Czpl - see, there is something that I didn't know I was supposed to do - it just looks like text on a white background.
@Czpl - I now have a blue background that says "Current Weather", with nothing else?
Pieter Stokkink
@forkerino
Apr 22 2017 12:09
@Czpl yeah, would be nice if it just showed the weather without having to press the button
Czpl
@Czpl
Apr 22 2017 12:09
@forkerino yaa I know I know :smile:
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:09
I am from Brazil, and I had some problem with the the background-image property. It is getting the image from another directory that is not the one I set it no metter what I do. I have created a directory called "image" and it's supposed to get the imagem from it, instead it gets the image from the "style" directory that I have created to put my css files in. Does someone knows what is happening ?
Pieter Stokkink
@forkerino
Apr 22 2017 12:11
@jmsm16 did you set the correct path for the background-image?
Ken Haduch
@khaduch
Apr 22 2017 12:11
@Czpl - I guess that the page really isn't blank, but I have to select the text because it appears to be the same color as the background color?
Czpl
@Czpl
Apr 22 2017 12:12
hmm it shouldnt be that way
what browser?
Roxroy
@roxroy
Apr 22 2017 12:12
@jmsm16 , can you show the code you are using for the image .. Also the path relative to where are starting to where the img is
Ken Haduch
@khaduch
Apr 22 2017 12:15

@Czpl - this CSS setting for your body element:

body{
  background-color: #333;
  font-family: 'Open Sans', sans-serif;
  color: #333;
  transition: background-color 1s, opacity 1s; 
}

Is setting the background-color and text color to be the same. That's why I'm not seeing it.

João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:15
@forkerino yes I did, I've changed the path as well. Put it in the same directory to see if it was the problem but it is not.
Ken Haduch
@khaduch
Apr 22 2017 12:15
@Czpl -I'm using firefox
@Czpl - WOW - it looks totally different on Chrome???!!! That's strange. I'd be curious to see if it looks like that for you, my firefox is up to date and usually is working fine?
Pieter Stokkink
@forkerino
Apr 22 2017 12:18
@jmsm16 do you have a link to your code?
Ken Haduch
@khaduch
Apr 22 2017 12:18
@Czpl - it looks great on Chrome!
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:19
@roxroy let me just figure out how to send pictures first
Czpl
@Czpl
Apr 22 2017 12:20
hmm you were right
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:20
@forkerino i am doing it localy at my conputer.. later I will put it on code pen
Czpl
@Czpl
Apr 22 2017 12:20
theres something wrong on firefox
Ken Haduch
@khaduch
Apr 22 2017 12:21
@Czpl - do you know what it is, at least for starters, your CSS import of the font needed an opening quotation mark. After I put that in, it looks a bit better. It was just erroring out on that. But it still doesn't look as good there as it does on the Chrome browser view.
Czpl
@Czpl
Apr 22 2017 12:22
ok i fixed that, thanks @khaduch
CamperBot
@camperbot
Apr 22 2017 12:22
czpl sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2769 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Apr 22 2017 12:23
@Czpl - oh, wait, it was just the way that the "live loading" loaded the page. Now it looks fine. Nice to try it on different browsers! Good luck and you're welcome...
Pieter Stokkink
@forkerino
Apr 22 2017 12:24
@jmsm16 just copy paste the relevant css here.
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:25
@forkerino ok
Czpl
@Czpl
Apr 22 2017 12:27
fixed the toggle rounding too
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:28
.fundo {
background-image: url('image/cover.jpg');
@forkerino but it gets the imgem from the style directory, not from image as it should as you can see
@forkerino I dont know if it is relevant but I am using bootstrap.
Pieter Stokkink
@forkerino
Apr 22 2017 12:33
@jmsm16 try a relative path: background-image: url('../image/cover.jpg');(assuming your style folder and image folder are in the same folder)
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:37
Actually it works kkkk. Can you explain to me ? Since I didn't do tha for my <img> and had no problem
Pieter Stokkink
@forkerino
Apr 22 2017 12:39
@jmsm16 as your stylesheet is in a certain folder, when you look for a file inside it, it will look inside that folder. You either have to use absolute path (which on localmachine would be file://.... /image/cover.jpg) or a relative path (the .. steps down one folder and then you go into /image/cover.jpg).
Czpl
@Czpl
Apr 22 2017 12:39
@forkerino http://codepen.io/czpl/full/aWNMjL everything should be working fine now!
Pieter Stokkink
@forkerino
Apr 22 2017 12:40
@Czpl yes, good job!
wait, let me try IE6
:joy:
Czpl
@Czpl
Apr 22 2017 12:41
oh god
wheres my cyanide pill
Pieter Stokkink
@forkerino
Apr 22 2017 12:41
hahaha
João Mateus Seguessi Munhoz
@jmsm16
Apr 22 2017 12:43
@forkerino i think I got it... it was looking for an image directory inside the style directory.. not where the htlm was. Thaks a lot..
thanks @forkerino
CamperBot
@camperbot
Apr 22 2017 12:48
jmsm16 sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 1845 | @forkerino |http://www.freecodecamp.com/forkerino
Pieter Stokkink
@forkerino
Apr 22 2017 12:48
@jmsm16 :+1:
Federico Dente
@fez994
Apr 22 2017 12:50
Hi guys, do any of you know where i can find audio files for the pomodoro timer?
Pieter Stokkink
@forkerino
Apr 22 2017 13:07
@fez994 I used google to find a cloudhosted file of a bell. It was quite easy to find.
Keon Samuel
@keonsam
Apr 22 2017 13:09
someone drops some links to learn about the tic tac toe AI.
Pieter Stokkink
@forkerino
Apr 22 2017 13:12
@keonsam google minimax tic tac toe
Yashasvi
@TechMky
Apr 22 2017 14:18
Hey guys, can anyone tell me if <br> is deprecated as per HTML5?
Pieter Stokkink
@forkerino
Apr 22 2017 14:19
@TechMky no
should work
Yashasvi
@TechMky
Apr 22 2017 14:19
@forkerino Thanks.
CamperBot
@camperbot
Apr 22 2017 14:19
techmky sends brownie points to @forkerino :sparkles: :thumbsup: :sparkles:
:star2: 1852 | @forkerino |http://www.freecodecamp.com/forkerino
rohitdesigner
@rohitdesigner
Apr 22 2017 14:23
anybody here can explain me caching and gzip compression
??
or tell a resource to learn
Keon Samuel
@keonsam
Apr 22 2017 14:31
nope
Paradox5
@Paradox5
Apr 22 2017 14:32
Hey
Keon Samuel
@keonsam
Apr 22 2017 14:32
hi what's up?
Paradox5
@Paradox5
Apr 22 2017 14:32
Nothing much Keon you?
Keon Samuel
@keonsam
Apr 22 2017 14:34
cooling.
rohitdesigner
@rohitdesigner
Apr 22 2017 14:40
@Paradox5 do u know how to do cachinh
g
Ken Haduch
@khaduch
Apr 22 2017 14:44
@rohitdesigner - caching is a way that the browser (assuming that you are talking about browser caching) saves a local copy of files that you have accessed over the web to try and avoid having to re-load the files again later to save the time that it takes for that download, also to save bandwidth. I think that the browser attempts to check the timestamp of the file that you have in the cache compared to the remote file, and download again if it needs it. Not always foolproof, sometimes an old copy of a file remains in the cache and does not get downloaded.
Zipping a file (any type of compression) is a way to try and reduce the filesize by various means - trying to compress repetitive data into a form that will be smaller and can be expanded to the full size file later. Again, to save storage and bandwidth at the expense of the compression / decompression when the file is used... At least that's the general idea.
rohitdesigner
@rohitdesigner
Apr 22 2017 14:46
@khaduch thanx but i know this thing i dont know how to enable these
CamperBot
@camperbot
Apr 22 2017 14:46
rohitdesigner sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2770 | @khaduch |http://www.freecodecamp.com/khaduch
Kuriakin Zeng
@kuriakinzeng
Apr 22 2017 14:47
@rohitdesigner is there a challenge that requires this?
Ken Haduch
@khaduch
Apr 22 2017 14:53
@rohitdesigner - I don't know about actually enabling ZIP compression, but caching pretty much happens automatically, you might be able to disable it in the browser, and for things like AJAX transfers, there is a setting to disable it - you have to look at functions that you are using. I think that if you want to have a compressed file, you would probably use a utility to compress it - zip / gzip / whatever, and then just set the appropriate settings in the HTML code. I just googled gzip compression in the browser - here are some links: https://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/, http://webmasters.stackexchange.com/questions/22217/which-browsers-handle-content-encoding-gzip-and-which-of-them-has-any-special, http://stackoverflow.com/questions/13031968/compressing-http-post-data-sent-from-browser - you can peruse those for information, perhaps? For browser caching - https://en.wikipedia.org/wiki/Web_cache - you can find a ton of links out there for various aspects of caching.
rohitdesigner
@rohitdesigner
Apr 22 2017 14:54
@khaduch what tips you use to increase perf. of webpages
Ken Haduch
@khaduch
Apr 22 2017 15:01
@rohitdesigner - to tell you the truth, I haven't really gotten to the point where I've done things to that level. I would say that whatever techniques you're making use of on your page, you can probably find some ways to speed them up - if you're doing DOM traversal to find items, you can save pointers locally, for example. I guess I've used those techniques, but on a small scale. If you google "improving performance of webpages", you'll find a lot of link for best practices, etc. This page http://sixrevisions.com/web-development/10-ways-to-improve-your-web-page-performance/ gives some ideas.
Czpl
@Czpl
Apr 22 2017 15:03
googles page speed insights has a lot of tips
Ashan Mohammed
@AshanMohammed
Apr 22 2017 15:09
Why doesn't my viewport doesn't work
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ken Haduch
@khaduch
Apr 22 2017 15:18
@AshanMohammed - where are you using this setting? Is it in the <head> section of your page? Do you have a URL that you can link here?
Ashan Mohammed
@AshanMohammed
Apr 22 2017 15:19
Yes it is in the head section. And No i am working on this locally @khaduch
Ken Haduch
@khaduch
Apr 22 2017 15:24
@AshanMohammed - it looks like the correct syntax. Hard to guess what could be going wrong without seeing the page. This page https://css-tricks.com/snippets/html/responsive-meta-tag/ has some additional tips, maybe something that will help you?
Ashan Mohammed
@AshanMohammed
Apr 22 2017 15:26
@khaduch Thank you :)
CamperBot
@camperbot
Apr 22 2017 15:26
ashanmohammed sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2771 | @khaduch |http://www.freecodecamp.com/khaduch
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:27
hey guys
Anyone know about twitch tv?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:28
what about it?
Im new to forEach function
I dont know how to add data.logo
Well I guess I figured it out just now
But image doesnt show up
Mohamed Derhalli
@derhallim
Apr 22 2017 15:30
this is the item that comes back in the data
try to put console.log inside the for each
and see what it outputs
it's not an object
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:31
console.log(data)?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:31
yea

what's this line:

 var users = [usersApi+'freecodecamp'+callback, usersApi+'ESL_SC2'+callback];

?

Saboor Malik
@MathematicsCoding
Apr 22 2017 15:32
Look at var usersApi and callback
More shorter :\
Mohamed Derhalli
@derhallim
Apr 22 2017 15:33
yea, but ur not requesting any data
how do u expect to access .logo?
u r just making an array
of text
and looping through it
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:34
Hm...
Mohamed Derhalli
@derhallim
Apr 22 2017 15:34
ur just storing 2 strings in users, and loop
no communication with twitch so far
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:34
$('.channel').append('<img alt="" src="'+data.logo+'">');
Wont that work?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:34
no, ur not contacting the twitch api
where's ur $.JSON or $.ajax ?

ur just storing this : [usersApi+'freecodecamp'+callback, usersApi+'ESL_SC2'+callback];

in an array

that's it
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:35
Ok chill.. Im adding @.JSON
$*
Mohamed Derhalli
@derhallim
Apr 22 2017 15:35
am chilling lol
Thought that would work same thing
An example pen of Skycoder
Mohamed Derhalli
@derhallim
Apr 22 2017 15:36
lol
here he has an array of image links
so if u navigate to this
it will open an image
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:36
Oh I get it...

Ok so
Ingram Jones
@Iggy1906
Apr 22 2017 15:36
OK, I need some help here. I don't understand my boostrap tags aren't working. Am I missing something? http://codepen.io/iggy1906/pen/pPgZaE
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:36
  $('#channel').click(function(){
    users.forEach(function(data){
      $('.channel').append('<img alt="" src="'+data.logo+'">');
Is that correct? then I just add $.JSON method?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:37
u need to contact the server first
then make ur array of images like skycoder
and then loop
Mohamed Derhalli
@derhallim
Apr 22 2017 15:38
@Iggy1906 ur not referencing bootstrap
Ingram Jones
@Iggy1906
Apr 22 2017 15:38
@derhallim ummm, what do you mean?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:38
click on the CSS
settings
and paste this link there
then hit save
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:39
You can just do quick-add then pick bootstrap
Mohamed Derhalli
@derhallim
Apr 22 2017 15:39
u need to "use" the library so u can use the attributes it provides
the quick add , adds bootstrap 4 alpha, which is .. alpha not the one FCC uses
that's why u need to add it manually
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:41
honestly.. I dont know how to use getJSON method with forEach function
Mohamed Derhalli
@derhallim
Apr 22 2017 15:41
@MathematicsCoding u use it once
then u get the response and loop
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:42
So use getJSON with forEach in it?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:42
yes
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:42
ok will try
Ingram Jones
@Iggy1906
Apr 22 2017 15:42
@derhallim sweet in the settings for css where do I add it? "add external CSS"
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:42
$(document).ready(function() {
  var usersApi = 'https://wind-bow.glitch.me/twitch-api/users/';
  var callback = '?callback=?';
  var users = [usersApi + 'freecodecamp' + callback, usersApi + 'ESL_SC2' + callback];
  $('#channel').click(function() {
    $.getJSON.users.forEach(function(data) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
      });
    });
  });
@Iggy1906 paste the link there
In empty box
Use that
Mohamed Derhalli
@derhallim
Apr 22 2017 15:43
@Iggy1906 yes
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:44
@derhallim is that how I use it?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:44
$.getJSON( "ajax/test.json", function( data ) {
  var items = [];
  $.each( data, function( key, val ) {
    items.push( "<li id='" + key + "'>" + val + "</li>" );
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:44
So add usersApi there?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:44
yes
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:45
What happen to old one?
Ingram Jones
@Iggy1906
Apr 22 2017 15:46
alright gents, so I pasted the link at the top of my CSS editor. Like this. http://codepen.io/iggy1906/pen/pPgZaE
Mohamed Derhalli
@derhallim
Apr 22 2017 15:46
i just added the $.each to show u the loop
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:46
$.each works same way as forEach?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:46
@Iggy1906 u see beside the word : CSS, there's a gear icon
u need to paste it there
not in the CSS code itself
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:47
@Iggy1906 Click Setting...
Mohamed Derhalli
@derhallim
Apr 22 2017 15:47
@MathematicsCoding yea, but it's provided by jquery
works same thing
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:47
alright
$(document).ready(function() {
  var usersApi = 'https://wind-bow.glitch.me/twitch-api/users/';
  var callback = '?callback=?';
  var users = [usersApi + 'freecodecamp' + callback, usersApi + 'ESL_SC2' + callback];
  $('#channel').click(function() {
    $.getJSON(usersApi, function(data) {
      $.each(data, function(img) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
      });
    });
  });
});
Ingram Jones
@Iggy1906
Apr 22 2017 15:48
OI! IT WORKS HAHAHAHAHAHAHAHAHAHA! THANKS GENTLEMEN!
Mohamed Derhalli
@derhallim
Apr 22 2017 15:48
nope, inside the function(img), it will be function(element)
ur looping through the result that came back
it's an object
not img
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:49
img to element?
Ingram Jones
@Iggy1906
Apr 22 2017 15:49
Geez, it's always the simple things, right?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:49
yea
then u do element.logo
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:49
Why cant I use data?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:49
u can use data, but not to get confused, u already used the name in the other parameter
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:50
$(document).ready(function() {
  var usersApi = 'https://wind-bow.glitch.me/twitch-api/users/';
  var callback = '?callback=?';
  var users = [usersApi + 'freecodecamp' + callback, usersApi + 'ESL_SC2' + callback];
  $('#channel').click(function() {
    $.getJSON(usersApi, function(data) {
      $.each(data, function(element) {
        $('.channel').append('<img alt="" src="' + element.logo + '">');
      });
    });
  });
});
I see
So I cannot have two same parameters?
In different functions
Mohamed Derhalli
@derhallim
Apr 22 2017 15:50
  $.getJSON(usersApi, function(dataCollection) {
      $.each(dataCollection, function(data) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
      });
u can
but i mean for readability
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:50
Oh
ok thats make sense
Mohamed Derhalli
@derhallim
Apr 22 2017 15:51
@Iggy1906 yes
Shamyi
@Shamyi
Apr 22 2017 15:51
can someone point me to what's not right here? https://codepen.io/Shamyi/pen/ZKWRYm the New Hero button is meant to replace the Hello World text but I cant tell what parts not working
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:51
    $.getJSON(usersApi, function(data1) {
      $.each(data1, function(data) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
Jorge
@OrangeKulture
Apr 22 2017 15:53
what's up guys
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:53
@OrangeKulture hey
Hows twitch tv?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:53
@Shamyi floor not flor
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:53
@derhallim what happen if I change .each to .forEach?
JD Tadlock
@jdtdesigns
Apr 22 2017 15:53
@MathematicsCoding @derhallim Why would you query the entire users table for just a couple streamers?
instead query the users/<name>
Jorge
@OrangeKulture
Apr 22 2017 15:54
haven't done twitch .. maybe i'll start on that today
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:54
I see
Mohamed Derhalli
@derhallim
Apr 22 2017 15:54
@jdtdesigns i haven't done the twitch thingy, I dunno the api
am just telling him how to request an API in the first place
Paradox5
@Paradox5
Apr 22 2017 15:54
Hola que tel
JD Tadlock
@jdtdesigns
Apr 22 2017 15:54
no prob, just was like huh? :D
Mohamed Derhalli
@derhallim
Apr 22 2017 15:55
:joy: yea
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:55
I know how .... I didnt know how to use forEach function with $.JSON
Jorge
@OrangeKulture
Apr 22 2017 15:55
@Paradox5 lol
Shamyi
@Shamyi
Apr 22 2017 15:55
@derhallim wow, thanks man
CamperBot
@camperbot
Apr 22 2017 15:55
shamyi sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 251 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 22 2017 15:55
yea, we're just doing basic stuff
Paradox5
@Paradox5
Apr 22 2017 15:55
I cant take this farther
So whats everyone upto
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:55
This is my first time with forEach function :\
@derhallim can I just change .each to .forEach will it works same way? just wonder
Mohamed Derhalli
@derhallim
Apr 22 2017 15:56
better than doing getJSON 232 times :P
@MathematicsCoding yea try it out
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:57
    $.getJSON(usersApi, function(data1) {
      $.forEach(data1, function(data) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
We didnt add users yet
usersApi+users+callback?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:57
remove the $.
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:57
well just users instead
Mohamed Derhalli
@derhallim
Apr 22 2017 15:57
it's either array.forEach
or $.each(array
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:57
okay
 $.getJSON(usersApi, function(data1) {
      array.forEach(data1, function(data) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
Mohamed Derhalli
@derhallim
Apr 22 2017 15:58
no
i meant array is data1
the array u have
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:58
oo
Mohamed Derhalli
@derhallim
Apr 22 2017 15:58
so in this case data1.forEach
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:58
data1.forEach?
okay
Mohamed Derhalli
@derhallim
Apr 22 2017 15:59
remove the param
it's forEach and function right away
Saboor Malik
@MathematicsCoding
Apr 22 2017 15:59
another data1?
remove that?
Mohamed Derhalli
@derhallim
Apr 22 2017 15:59
array.forEach(function (item) ..
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:00
oh
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:00
That what I was talking abou :\
Mohamed Derhalli
@derhallim
Apr 22 2017 16:00
lol
brb
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:01
@derhallim so can I change
Alright
r2d2
@UsamaHameed
Apr 22 2017 16:01
Which book would you recommend for React?
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:02
@UsamaHameed you have a degree in Mechanical Engineer?
r2d2
@UsamaHameed
Apr 22 2017 16:03
Yeah?!!
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:03
Nice
r2d2
@UsamaHameed
Apr 22 2017 16:03
Uh, do you know me?
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:04
Hm your name seem familiar
Do I know you?
r2d2
@UsamaHameed
Apr 22 2017 16:05
I don't know, you tell me?
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:05
lol hard to tell
You had a profile picture of koala?
r2d2
@UsamaHameed
Apr 22 2017 16:06
Never
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:06
Hm
I dont remember :\
r2d2
@UsamaHameed
Apr 22 2017 16:11
Ah Okay
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:18
@derhallim ??
Welp
Breakfast
Roxroy
@roxroy
Apr 22 2017 16:21
@keonsam , you can use the minimax algorithm for your AI
Take a look I gotta go :\
Leave a message if u can
Mohamed Derhalli
@derhallim
Apr 22 2017 16:22
:v:
Keon Samuel
@keonsam
Apr 22 2017 16:24
@roxroy any good links? I can't understand how to implement it.
Mohamed Derhalli
@derhallim
Apr 22 2017 16:25
@MathematicsCoding the request is wrong, u have the error: "Login 'freecodecamp,ESL_SC2' is invalid",
Roxroy
@roxroy
Apr 22 2017 16:27
@keonsam , this is the one I used, js minimax .
Keon Samuel
@keonsam
Apr 22 2017 16:28
var isTurn = true;
          if (isTurn === true){
          $(".boxDim").on("click", function(){
            $(this).html(player1Val);
             isTurn = false;
          });  
          }
var isTurn = true;
          if (isTurn === true){
          $(".boxDim").on("click", function(){
            $(this).html(player1Val);
            $(".boxDim").off("click");
             isTurn = false;
            console.log(isTurn);
          });  
          }
that worked.
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:32
[['freecodecamp'], ['ESL_SC2']]
@derhallim
codepen is down?
nvm
Oh I see...
usersApi+users.. wont work
I had to do users[0]?
Keon Samuel
@keonsam
Apr 22 2017 16:35
@roxroy thanks.
CamperBot
@camperbot
Apr 22 2017 16:35
keonsam sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 714 | @roxroy |http://www.freecodecamp.com/roxroy
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:37
I dont get it..
data.forEach is not a function?
gotta go will be back soon
Cya
Keon Samuel
@keonsam
Apr 22 2017 16:38
is data an array?
Andrei Dushkou
@burn1ng
Apr 22 2017 16:41
hello people! can someone help me with random machine quote task?
i want to make an ajax request to twitter API. Since v.1.1 it is not possible to send simple request with parameters to API, because now request need to be authorized. I made an app via https://apps.twitter.com/app, get token, private and public keys. And now the problem: all the articles i've read, tell me that i should have a server-side scipt(Java/C/PHP/etc.) which will make server-side a authorized request to Twitter API v.1.1. WHERE I CAN PUT THIS SCRIPT, if i have only pen on codepen.io?
JD Tadlock
@jdtdesigns
Apr 22 2017 16:46
@burn1ng what's your question?
Andrei Dushkou
@burn1ng
Apr 22 2017 16:47
i tried to put PHP script on one of my http hosting. this script: get_tweets.php (you can see it there: https://parall.ax/blog/view/3109/tutorial-retrieving-tweets-from-the-twitter-v1-1-api-using-oauth-php-javascript).
but i get an error 500, because
XMLHttpRequest cannot load http://andreidushkou.tech/get_tweets.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. The response had HTTP status code 500.
what i have to do, if i want to make an authorized ajax request ti Twitter API v.1.1 ???
Simon Cordova
@gbsimon87
Apr 22 2017 16:50
@burn1ng I may be incorrect but it sounds like a proxy cors error
maybe this could help...
https://cors-anywhere.herokuapp.com/
JD Tadlock
@jdtdesigns
Apr 22 2017 16:54
@burn1ng You need to return jsonp on codepen.
So adding &callback=? to the api url will fix the cors issue
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:54
@keonsam yes
JD Tadlock
@jdtdesigns
Apr 22 2017 16:55
You don't need server side code to access the twitch api. You just need to follow this guide to get a key. https://dev.twitch.tv/docs/v5/guides/using-the-twitch-api
@burn1ng
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:55
Its ?callback=??
JD Tadlock
@jdtdesigns
Apr 22 2017 16:56
it depends on if you are starting at the end of the url or after another param @MathematicsCoding
at the end is ?callback=?
Czpl
@Czpl
Apr 22 2017 16:56
how does "?callback=?" really work
JD Tadlock
@jdtdesigns
Apr 22 2017 16:56
after another param is &callback=?
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:57
@jdtdesigns
Can you take a look at my pen?
TomClarke93
@TomClarke93
Apr 22 2017 16:57
Hi Guys, I am struggling with the final part of my tribute project. I am using Bootstrap 4.0 so have used a card instead of a thumbnail to house the image. However the image is getting stretched across the page when viewing in large windows. What is the best way to avoid this?
JD Tadlock
@jdtdesigns
Apr 22 2017 16:57
it's what tells the api to return jsonp @MathematicsCoding
all apis have their way of doing that
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:57
Yeah
JD Tadlock
@jdtdesigns
Apr 22 2017 16:57
if they support jsonp
What is wrong with JS code?
Simon Cordova
@gbsimon87
Apr 22 2017 16:57
@TomClarke93 got a codepen link?
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:58
It said data.forEach is not function
How do I fix that?
TomClarke93
@TomClarke93
Apr 22 2017 16:58
CamperBot
@camperbot
Apr 22 2017 16:58
tomclarke93 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 400 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Simon Cordova
@gbsimon87
Apr 22 2017 16:59
@MathematicsCoding is data an array?
Saboor Malik
@MathematicsCoding
Apr 22 2017 16:59
Yes
Simon Cordova
@gbsimon87
Apr 22 2017 17:00
@TomClarke93 the original image isn't very big
I'd say that's your first issue at hand
JD Tadlock
@jdtdesigns
Apr 22 2017 17:01
@MathematicsCoding You're calling the api url and then running a forEach on the data of that request
Simon Cordova
@gbsimon87
Apr 22 2017 17:01
@MathematicsCoding I'll take a look at it see if I can help
TomClarke93
@TomClarke93
Apr 22 2017 17:01
@gbsimon87 Ok, is there not a way to force it to scale correctly when making it larger
Simon Cordova
@gbsimon87
Apr 22 2017 17:01
oh @jdtdesigns got you, he's a better option anyway haha
JD Tadlock
@jdtdesigns
Apr 22 2017 17:01
and like i mentioned before, you only need to make a request for the streamers in your array
@gbsimon87
Simon Cordova
@gbsimon87
Apr 22 2017 17:02
@TomClarke93 pretty much all programs out there including photoshop have a very tough time enlargening a small image due to the pixel aspect ratio
I'd truly recommend you look for a larger image if you want to stretch it so wide
TomClarke93
@TomClarke93
Apr 22 2017 17:03
@gbsimon87 ok thanks
CamperBot
@camperbot
Apr 22 2017 17:03
tomclarke93 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: tomclarke93 already gave gbsimon87 points
Andrei Dushkou
@burn1ng
Apr 22 2017 17:03
@jdtdesigns tweetch API...? what is this? i need to make an ajax request to TWITTER API v.1.1
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:04
I dont understand.. I dont see whats the problem
$(document).ready(function() {
  var usersApi = 'https://wind-bow.glitch.me/twitch-api/users/';
  var callback = '?callback=?';
  var users = [[usersApi+'freecodecamp'+callback], [usersApi+'ESL_SC2'+callback]];
  $('#channel').on("click",function() {
    $.getJSON(users[0], function(data) {
      data.forEach(function(result) {
        $('.channel').append('<img alt="" src="' + result.logo + '">');
      });
    });
  });
});
Simon Cordova
@gbsimon87
Apr 22 2017 17:05
@TomClarke93 no problem, and by the way, a large image will shrink down much easier than a small image will be able to enlarge
Czpl
@Czpl
Apr 22 2017 17:05
well if you set width to 100% it will at least keep the aspect ratio
and wont look that bad
Simon Cordova
@gbsimon87
Apr 22 2017 17:07
@TomClarke93
@Czpl has a good point...you could try this in your css
.card img {
  width: 100%;
}
But do notice the height will increase as well to maintain ratio
JD Tadlock
@jdtdesigns
Apr 22 2017 17:08
@burn1ng Ah lol, thought you were one of the people with questions about Twitch
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:08
@jdtdesigns What am I doing wrong?
JD Tadlock
@jdtdesigns
Apr 22 2017 17:08
@MathematicsCoding Here's a quick example of how to run a request just for the streamers in your list:
var usersApi = 'https://wind-bow.glitch.me/twitch-api/users/';
var users = ['freecodecamp', 'ESL_SC2'];

function getStreamers() {
  users.forEach(function(user) {
    $.getJSON(usersApi + user + '?callback=?', function(data) {
      console.log(data);
    });
  });
}

getStreamers();
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:09
What bout callback?
oh its there
I dont think callback need /
JD Tadlock
@jdtdesigns
Apr 22 2017 17:09
but you have an array inside another array
i just edited it to how you should do it
just make a list of streamer names separated inside the users array
it doesn't
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:11
[user,user] or [[user],[user]]?
JD Tadlock
@jdtdesigns
Apr 22 2017 17:11
first
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:11
Hm
Simon Cordova
@gbsimon87
Apr 22 2017 17:11
@MathematicsCoding the second one is nested arrays
just create one
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:12
  $('#channel').on("click",function() {
    $.getJSON(usersApi+users+callback, function(data) {
      data.forEach(function(result) {
        $('.channel').append('<img alt="" src="' + result.logo + '">');
JD Tadlock
@jdtdesigns
Apr 22 2017 17:14
@MathematicsCoding Once again i'll reiterate. You shouldn't request all the users. Just request a single user users/<name from your array>
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:14
I dont understand this users/<name from your array>
like users[0]?
oh like this
usersApi+'freecodecamp'+callback
Is that it?
users[0] work same way
Is that what you are talking about?
Keon Samuel
@keonsam
Apr 22 2017 17:21
what are you doing the twitch app?
Try to request an API
JD Tadlock
@jdtdesigns
Apr 22 2017 17:21
https://wind-bow.glitch.me/twitch-api/users/freecodecamp
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:21
yeah
so I can just do usersApi+users[0]
or usersApi+'freecodecamp'
Keon Samuel
@keonsam
Apr 22 2017 17:23
no data from the callback.
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:23
I dont know why..
data.forEach is not a function
this works
So its not the url
/?callback=? works same way
Keon Samuel
@keonsam
Apr 22 2017 17:26
bro you have the .getJSON in a click.
click the all button and see the magic.
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:27
It works for you?
Keon Samuel
@keonsam
Apr 22 2017 17:27
yes
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:28
it doesnt for me
Screenshot?
Keon Samuel
@keonsam
Apr 22 2017 17:28
console.log(dataCollection);
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:28
...
Keon Samuel
@keonsam
Apr 22 2017 17:28
  $('#channel').on("click",function() {  $.getJSON(usersApi+users[1]+callback, function(dataCollection) {   console.log(dataCollection);  dataCollection.forEach(function(data)
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:30
ok console.log works
Why doesnt the image show up?
I used data.logo...
dataCollection.logo or data?
Keon Samuel
@keonsam
Apr 22 2017 17:31
use the callback to get the data.
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:32
?callback=??
Keon Samuel
@keonsam
Apr 22 2017 17:32
other words dataCollection
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:32
dataCollection.logo?
Keon Samuel
@keonsam
Apr 22 2017 17:33
the parameter in the function.
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:33
I used data.logo
$.getJSON(usersApi+users[1]+callback, function(dataCollection) {
      console.log(dataCollection);
      dataCollection.forEach(function(data) {
        $('.channel').append('<img alt="" src="' + data.logo + '">');
Keon Samuel
@keonsam
Apr 22 2017 17:35
did that work?
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:35
Yeah
In console
Keon Samuel
@keonsam
Apr 22 2017 17:36
well whatever works, works.
dataCollection.logo will get it too.
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:36
Yeah I tested both
So that works
Gabriel
@revolvingwinds
Apr 22 2017 17:37
can anybody assist me with inserting thumbnail images?
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:37
How do I make image show up?
Linus
@nusli
Apr 22 2017 17:44
can any1 tell me why i get a cross-origin error although both the pen and api use https? https://codepen.io/nusli/pen/xdOPjr?editors=1111
Gulsvi
@gulsvi
Apr 22 2017 17:45
@nusli You'll have to add &origin=* to your wikipedia API URL to allow cross origin requests. http://stackoverflow.com/a/38921370
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:45
@SkyCoder01 You are here!
Gulsvi
@gulsvi
Apr 22 2017 17:45
@revolvingwinds Sure, what's the question?
Happy Saturday @MathematicsCoding :)
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:46
:wave:
@SkyCoder01 I still have this problem..
Gulsvi
@gulsvi
Apr 22 2017 17:46
I looked at your code above - why are you doing a forEach on your JSON?
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:46
Im not supposed to use JSON method?
Andrei Dushkou
@burn1ng
Apr 22 2017 17:47
@MathematicsCoding do you try to solve Random Quote Machine task, no?
Gulsvi
@gulsvi
Apr 22 2017 17:47
using getJSON is fine, but you get an object back that doesn't need to be looped through.
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:47
@burn1ng I finished it
@burn1ng Im working on twitch tv
So its fine?
Paradox5
@Paradox5
Apr 22 2017 17:48
Im in shock
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:48
Why cant I have the image show up?
@Paradox5 What happened?
Why are you in shock?
Linus
@nusli
Apr 22 2017 17:48
thx @SkyCoder01
CamperBot
@camperbot
Apr 22 2017 17:48
:star2: 1138 | @skycoder01 |http://www.freecodecamp.com/skycoder01
nusli sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Apr 22 2017 17:49
@MathematicsCoding For one, you're doing a forEach on that JSON object. The object you get back needs to be accessed with dot notation: https://www.freecodecamp.com/challenges/accessing-objects-properties-with-the-dot-operator
The only thing you need to loop through is the user array.
Paradox5
@Paradox5
Apr 22 2017 17:49
A massage chair assulted me
Gulsvi
@gulsvi
Apr 22 2017 17:49
Issue 2 is that you're appending a <img> tag to the element with channel as the class name, and that's another <img> tag. So you're trying to put an <img> tag inside another <img> tag
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:50
No I changed it back to h1 element..
So thats fine?
Gulsvi
@gulsvi
Apr 22 2017 17:50
<img> tags don't go inside of <h1> elements either though
It will probably work, just not sure if it's valid HTML
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:50
Add class to div element?
Gulsvi
@gulsvi
Apr 22 2017 17:51
<div> is a safe bet, but you have to sort out data.logo first and make sure you are getting an URL
Sorin Ruse
@sorinr
Apr 22 2017 17:52
@nusli you need it this way: var url = api + searchTerm +'&callback=?';
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:55
@SkyCoder01 I just create a new var for data.logo?
Gulsvi
@gulsvi
Apr 22 2017 17:55
I learned that &origin=* makes it so you don't have to use &callback=? with the Wikimedia API. One or the other (possibly both) can be used though when using getJSON
Linus
@nusli
Apr 22 2017 17:55
@sorinr that worked too. ty
CamperBot
@camperbot
Apr 22 2017 17:55
nusli sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1268 | @sorinr |http://www.freecodecamp.com/sorinr
Gulsvi
@gulsvi
Apr 22 2017 17:56
@MathematicsCoding Look at what console.log(dataCollection); returns and parse that object to get the URL
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:56
<div>
<button id="channel" class="btn btn-primary">All</button>
Wtf?
Sorin Ruse
@sorinr
Apr 22 2017 17:57
@SkyCoder01 think some apis will not recognize the origin parameter. callback is a common parameter among apis
Gulsvi
@gulsvi
Apr 22 2017 17:57
@MathematicsCoding console.log(dataCollection) logs this:
dataCollection = {
  _id: 30220059,
  _links: Object {
    self: "https://api.twitch.tv/kraken/users/esl_sc2"
  },
  bio: "For standings, schedule, and results, visit http://www.intelextrememasters.com/",
  created_at: "2012-05-02T09:59:20Z",
  display_name: "ESL_SC2",
  logo: "https://static-cdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jpeg",
  name: "esl_sc2",
  type: "user",
  updated_at: "2017-04-22T17:35:29Z"
}
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:57
@SkyCoder01 dat
yeah Im trying to post that..
Gulsvi
@gulsvi
Apr 22 2017 17:57
@sorinr True, only works with Wikimedia - it's in the origin instructions on their sandbox page.
Czpl
@Czpl
Apr 22 2017 17:57
wikimedia accepts origin
Saboor Malik
@MathematicsCoding
Apr 22 2017 17:57
self: one?
Gulsvi
@gulsvi
Apr 22 2017 17:58
So, kind of a bonus @sorinr not to have to use JSONP with at least one of these APIs for these challenges :)
Czpl
@Czpl
Apr 22 2017 17:58
as far as I know its basically cors vs jsonp and both are valid in this case
Gulsvi
@gulsvi
Apr 22 2017 18:00
@MathematicsCoding To get the URL, it's the same as we learned here: https://www.freecodecamp.com/challenges/accessing-objects-properties-with-the-dot-operator
(Just a bigger object)
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:01
So If I do that I just need the logo and display_name?
Gulsvi
@gulsvi
Apr 22 2017 18:02
Yep
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:02
So I just do that same way?
Gulsvi
@gulsvi
Apr 22 2017 18:02
yes, same way, just different variable and property names

Like in this:

var testObj = {
  "hat": "ballcap",
  "shirt": "jersey",
  "shoes": "cleats"
};

How do you get the type of shoes?

Saboor Malik
@MathematicsCoding
Apr 22 2017 18:05
testObj.shoes
 var Obj = {
    "logo": "https://staticdn.jtvnw.net/jtv_user_pictures/esl_sc2-profile_image-d6db9488cec97125-300x300.jqpeg",
    "display_name":"ESL_SC2"
  }
Gulsvi
@gulsvi
Apr 22 2017 18:07
Yes, testObj.shoes.
Your twitch JSON object is named dataCollection, so how do you get the logo?
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:07
dataCollection.logo
data.logo same thing
Gulsvi
@gulsvi
Apr 22 2017 18:07
dataCollection.logo - correct
data.logo is not the same thing
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:08
data.logo is incorrect?
Why?
Gulsvi
@gulsvi
Apr 22 2017 18:08
what is data equal to?
try logging it
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:09
It return blank?
Gulsvi
@gulsvi
Apr 22 2017 18:09
Look in your browser's debug console, not codepen
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:10
not a function
Gulsvi
@gulsvi
Apr 22 2017 18:10
right, because .forEach() is for arrays
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:10
I see
So Im supposed to dataCollection.logo instead of data.logo
Gulsvi
@gulsvi
Apr 22 2017 18:11
You don't have to use .forEach() to get the cleats back here:
var testObj = {
  "hat": "ballcap",
  "shirt": "jersey",
  "shoes": "cleats"
};
yeah, because there is no data.logo
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:11
You are right...
Gulsvi
@gulsvi
Apr 22 2017 18:11
there's no data, just an error
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:11
  $('#channel').click(function() {
    $.getJSON(usersApi + users[1] + callback, function(dataCollection) {
      console.log(dataCollection);
      dataCollection.forEach(function(data) {
        $('.channel').append('<img alt="" src="' + dataCollection.logo + '">' + data.display_name);
SO correct
?
oops forgot about display_name
Gulsvi
@gulsvi
Apr 22 2017 18:12
is dataCollection an array?
you are using .forEach() on it
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:13
users[0] instead?
Gulsvi
@gulsvi
Apr 22 2017 18:14
    $.getJSON(usersApi + users[1] + callback, function(dataCollection) {

      // here you get a JSON object called dataCollection. Get the logo URL and write it to the page.

    });
If you want to get the data for freecodecamp, change it to users[0], if you want esl_sc2, keep it as users[1]
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:15
yeah
Sorry went to get a drink
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:20
So if I have logo URL
What do you mean write it to page? like on page?
Czpl
@Czpl
Apr 22 2017 18:23
you did it already
the problem is in using forEach on an object, instead of just grabbing its property value
Gulsvi
@gulsvi
Apr 22 2017 18:30
forgot to say thank you for your help earlier @alpox!
CamperBot
@camperbot
Apr 22 2017 18:30
skycoder01 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 960 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 22 2017 18:31
@SkyCoder01 You're welcome :D
Gulsvi
@gulsvi
Apr 22 2017 18:31
@MathematicsCoding by "write it to the page" I mean use jQuery so it shows up on your web page. Once you have the logo URL, you can add it to an <img> element
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:31
img element on html?
Gulsvi
@gulsvi
Apr 22 2017 18:32
Same way you wrote the temperature to the page in your weather application
use one of jQuery's methods for writing HTML
Keon Samuel
@keonsam
Apr 22 2017 18:32
should I skip the tic tac toe and go on to the Simon game for now?
@MathematicsCoding use a ul
<ul>
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:34
<div class="channel">
 <ul>
  </ul>
</div>
Like that?
Keon Samuel
@keonsam
Apr 22 2017 18:34
yes then append a <li> with the image.
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:41
  $('#channel').click(function() {
    $.getJSON(usersApi + users[1] + callback, function(dataCollection) {
      console.log(dataCollection);
      dataCollection.forEach(function(data) {
        $('.channel').append('<li<img alt="" src="' + dataCollection.logo + '">></li>' + dataCollection.display_name);
alpox
@alpox
Apr 22 2017 18:42
@MathematicsCoding You miss an > after <li
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:42
done
alpox
@alpox
Apr 22 2017 18:42
@MathematicsCoding And one > too much at the end of the <img element :D
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:43
yeah.. removed that too
alpox
@alpox
Apr 22 2017 18:43
:thumbsup:
@MathematicsCoding You were probably going for data.logo and not dataCollection.logo
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:43
data is an error skycoder said
Czpl
@Czpl
Apr 22 2017 18:43
naaaaah we're going full circle here :D
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:43
data have nothing no?
Czpl
@Czpl
Apr 22 2017 18:44
you're still using forEach on an object
alpox
@alpox
Apr 22 2017 18:44
@MathematicsCoding If data is nothing then there would be no use for the forEach
What exactly do you get from the getJSON call?
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:44
try console.log(data)?
alpox
@alpox
Apr 22 2017 18:44
@MathematicsCoding Better try console.log(dataCollection) to see what it is
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:45
yeah.. you try console.log(data) :\
But isnt data same thing as dataCollection?
Gulsvi
@gulsvi
Apr 22 2017 18:45
alpox
@alpox
Apr 22 2017 18:45
@MathematicsCoding IF dataCollection is an array, data would be one entry
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:45
I know...
ok I will use data.logo..
alpox
@alpox
Apr 22 2017 18:46
Ah so .forEach does not work on objects
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:47
@alpox you need a link to it?
alpox
@alpox
Apr 22 2017 18:47
@MathematicsCoding No just remove the forEach and use dataCollection.display_name or whatever property right away
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:48
dataCollection.logo(function(data) {
        $('.channel').append('<li><img alt="" src="' + data.logo + '"></li>' + data.display_name);
alpox
@alpox
Apr 22 2017 18:49
@MathematicsCoding $('.channel ul').append('<li><img alt="" src="' + dataCollection.logo + '">'+ dataCollection.display_name + '</li>');
No need for any call on dataCollection since it is already an object which you can use
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:49
just tell me to add ul..
Oh
remove dataCollection.logo(function(data) {?
alpox
@alpox
Apr 22 2017 18:49
@MathematicsCoding Ah the ul addition doesn't change much about the functionality, its just cleanup so that the li really end up in the ul :D
Yes remove that
dataCollection.logo is a string (url) so you cannot call it
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:50
change html element to li?
ul to li
alpox
@alpox
Apr 22 2017 18:51
@MathematicsCoding No. but your final structure has to look like:
<ul>
    <li><img ... ></li>
    <li><img ... ></li>
 </ul>
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:52
Do I have to add anything to img element?
like class?
Gulsvi
@gulsvi
Apr 22 2017 18:53
if you want to style your image, you need a class
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:53
I will just add alt attirubte
Or not... I will do that later @SkyCoder01
Gulsvi
@gulsvi
Apr 22 2017 18:54
you will *want* a class anyway :) it'll make it easier. There are other ways to style it without a class
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:55
ok :\
Done
Andrei Dushkou
@burn1ng
Apr 22 2017 18:57
people please, tell me how i can make an ajax request to Twitter API 1.1, which will give me json?
i'm stucked :(
Augusto Wang
@GusWng
Apr 22 2017 18:57
hello again :D whats the fuss about the infinite loops on codepen? specifically with the $(document).ready function?
Mohamed Derhalli
@derhallim
Apr 22 2017 18:58
:v:
wassup
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:58
$(document).ready(function(){
 //code
});
@derhallim hey..
You left me here..
Mohamed Derhalli
@derhallim
Apr 22 2017 18:58
i answered u before i leave
Saboor Malik
@MathematicsCoding
Apr 22 2017 18:59
hm..
Ok take a look :\
Gulsvi
@gulsvi
Apr 22 2017 18:59
@GusWng I'm afraid to ask you to show me your pen lol, but no fuss that I'm aware of - you must have an infinite loop inside of your document.ready
Augusto Wang
@GusWng
Apr 22 2017 19:00
http://codepen.io/GusWng/pen/XRKgqN of course @SkyCoder01 ^^ now that you are here i can feel safe again xD
Gulsvi
@gulsvi
Apr 22 2017 19:00
here goes my browser :)
Augusto Wang
@GusWng
Apr 22 2017 19:00
i had to recode it since i accidentally refreshed the site so there may be a few mistakes more
Mohamed Derhalli
@derhallim
Apr 22 2017 19:01
let me see
wait
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:01
@derhallim me?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:01
yea
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:01
Do you need link?
alpox
@alpox
Apr 22 2017 19:02
@SkyCoder01 async: false, in his ajax request... gaaaaaah :D poor browser
@MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:02
huh
alpox
@alpox
Apr 22 2017 19:02
@GusWng Please remove the async: false ;-)
Gulsvi
@gulsvi
Apr 22 2017 19:03
lol @alpox
Yeah, no infinite loops, it's just a warning saying it's not a good idea to use async: false
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:03
what did you do?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:03
datacollection already has ur logo
don't put static li in html
i removed them
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:03
...
Mohamed Derhalli
@derhallim
Apr 22 2017 19:03
what?
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:03
that it?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:03
yep
check the code
Gulsvi
@gulsvi
Apr 22 2017 19:03
async: false basically tells your browser to stop everything and wait for the request. When you run a bunch of those in a for loop, it's very bad for performance @GusWng
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:04
doesnt work for me
Mohamed Derhalli
@derhallim
Apr 22 2017 19:04
how come
alpox
@alpox
Apr 22 2017 19:04
Thats the moment when i say: Thanks computer, gotta take a coffee until you're done
Augusto Wang
@GusWng
Apr 22 2017 19:04
aaaaaaaaah ... i see haha
but it still doesnt add list items :(
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:04
nvm I used wrong data
Mohamed Derhalli
@derhallim
Apr 22 2017 19:04
@alpox :joy:
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:04
data.logo
thanks @derhallim
CamperBot
@camperbot
Apr 22 2017 19:05
mathematicscoding sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 257 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 22 2017 19:05
:v:
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:05
So If I want to post all users same time I just have to create for loop?
alpox
@alpox
Apr 22 2017 19:05
@GusWng You never define innerHTML. You can just remove that function
Mohamed Derhalli
@derhallim
Apr 22 2017 19:05
yep
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:05
then users[i]
Mohamed Derhalli
@derhallim
Apr 22 2017 19:05
exactly
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:05
alright
Gulsvi
@gulsvi
Apr 22 2017 19:05
@GusWng The other issue is that succes: function(data){ needs to be: success: function(data){
(missing s)
alpox
@alpox
Apr 22 2017 19:06
@GusWng Also you have a typo. Its success, not succes -> name of the success property
Oh
Gulsvi
@gulsvi
Apr 22 2017 19:06
:)
alpox
@alpox
Apr 22 2017 19:06
@Sky ninjaed
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:06
@derhallim but I want the name to be after picture
Augusto Wang
@GusWng
Apr 22 2017 19:07
@alpox @SkyCoder01 ugh thanks o.O haha
CamperBot
@camperbot
Apr 22 2017 19:07
guswng sends brownie points to @alpox and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 961 | @alpox |http://www.freecodecamp.com/alpox
:star2: 1139 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Augusto Wang
@GusWng
Apr 22 2017 19:07
now it works xD
Andrei Dushkou
@burn1ng
Apr 22 2017 19:07
is anybody here who solve random quote machine task? and help me in private chat? =)
Augusto Wang
@GusWng
Apr 22 2017 19:07
stupid little typo
Mohamed Derhalli
@derhallim
Apr 22 2017 19:07
@MathematicsCoding u can just change the order in html
ur drawing html in JS
u can do whatever u want there
Gulsvi
@gulsvi
Apr 22 2017 19:08
@burn1ng I saw your question about Twitter API, you don't need to access the Twitter API for the random quote machine unless you're trying to pull random tweets?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:08
@SkyCoder01 :v: wassup
gooden morgen
i guess that's how in german
or gooten morgan
not sure
Gulsvi
@gulsvi
Apr 22 2017 19:08
Hey @derhallim :wave: :)
I only know how to order beer in german :)
Mohamed Derhalli
@derhallim
Apr 22 2017 19:08
that's enough to get drunk in berlin
alpox
@alpox
Apr 22 2017 19:09
@derhallim Guten Morgen :-)
Gulsvi
@gulsvi
Apr 22 2017 19:09
zwei dunkelweizen bitte :beers:
Mohamed Derhalli
@derhallim
Apr 22 2017 19:09
aah that's it
Andrei Dushkou
@burn1ng
Apr 22 2017 19:09
@SkyCoder01 why i don't need API? how i can get tweets from twitter in JSON format without an acess to API?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:09
@alpox thanks :joy:
CamperBot
@camperbot
Apr 22 2017 19:09
derhallim sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 962 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 22 2017 19:09
Jup das ist es :D
Mohamed Derhalli
@derhallim
Apr 22 2017 19:09
ich habe
alpox
@alpox
Apr 22 2017 19:09
Ein Bier?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:09
ich habe $10 dollars , zwei dunkelweien bitte?
:joy:
alpox
@alpox
Apr 22 2017 19:09
Works :D
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:10
@SkyCoder01 how did you get nice title "Twitch"
Gulsvi
@gulsvi
Apr 22 2017 19:10
@burn1ng If you want to access tweets from twitter, yes, you need the API. If you want to post a tweet, you do not need the API.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:10
Is it background image?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:10
angela merkel, your date (me) is on his way
alpox
@alpox
Apr 22 2017 19:10
@derhallim Ugh have fun
Mohamed Derhalli
@derhallim
Apr 22 2017 19:10
:joy: i'll take a dog with me, she's afraid of these
Gulsvi
@gulsvi
Apr 22 2017 19:11
I got it from their logo page @MathematicsCoding here
Mohamed Derhalli
@derhallim
Apr 22 2017 19:11
@alpox ur in germany?
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:11
oh so you added it to div element
?
Gulsvi
@gulsvi
Apr 22 2017 19:11
It's a <img> element
They have all colors, sizes, etc on that page. Then I uploaded to postimage.io
That's how I got the colors to match too
Andrei Dushkou
@burn1ng
Apr 22 2017 19:12
but where i can get a data (quotes) ? i understand that good idea is - to get json from twitter with tweets with hashtag "quote", maybe
alpox
@alpox
Apr 22 2017 19:12
@derhallim I'm swiss
Andrei Dushkou
@burn1ng
Apr 22 2017 19:12
@MathematicsCoding but where i can get a data (quotes) ? i understand that good idea is - to get json from twitter with tweets with hashtag "quote", maybe
Mohamed Derhalli
@derhallim
Apr 22 2017 19:13
@alpox oh i worked with a swiss guy, his last name is blattler
Gulsvi
@gulsvi
Apr 22 2017 19:13
@burn1ng A lot of people use this API: http://quotesondesign.com/
alpox
@alpox
Apr 22 2017 19:13
@derhallim Yeaa i know that name :D
Mohamed Derhalli
@derhallim
Apr 22 2017 19:13
@alpox seems like all swiss are great in tennis, he is a pro in tennis
Gulsvi
@gulsvi
Apr 22 2017 19:13
I used reddit and get dirty jokes for my quote machine lol
alpox
@alpox
Apr 22 2017 19:13
Huh, sure not
Mohamed Derhalli
@derhallim
Apr 22 2017 19:13
:joy:
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:13
lol
alpox
@alpox
Apr 22 2017 19:13
@derhallim I am the worst at tennis :D
Mohamed Derhalli
@derhallim
Apr 22 2017 19:14
aah
alpox
@alpox
Apr 22 2017 19:14
@SkyCoder01 Hahaha :D nice.
i made a random-youtube-vid-machine :D
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:14
@burn1ng I just created an array with random quotes in it
then using for loop
Gulsvi
@gulsvi
Apr 22 2017 19:14
Oh wow, that's a great idea @alpox :)
Mohamed Derhalli
@derhallim
Apr 22 2017 19:14
@alpox he said it's too expensive in swiss
alpox
@alpox
Apr 22 2017 19:15
@derhallim Yea.. i know... thats the usual comment about us :D and i guess its true.
My girlfriend is czech and she always complains ^^
Mohamed Derhalli
@derhallim
Apr 22 2017 19:15
hahaha
ur government makes everything expensive to afford the big army u have :P
alpox
@alpox
Apr 22 2017 19:16
Big army? :worried:
Gulsvi
@gulsvi
Apr 22 2017 19:16
They don't need a big army - everyone owns a gun :)
Mohamed Derhalli
@derhallim
Apr 22 2017 19:16
hahahaha
alpox
@alpox
Apr 22 2017 19:16
I wonder how they are able to tell such tales
Mohamed Derhalli
@derhallim
Apr 22 2017 19:16
@alpox i know u have no army
:joy:
Keon Samuel
@keonsam
Apr 22 2017 19:16
in US?
alpox
@alpox
Apr 22 2017 19:16
@SkyCoder01 Not even close XD
Gulsvi
@gulsvi
Apr 22 2017 19:16
What's the best part about living in Switzerland?
... I don't know, but I hear the flag is a big plus
:laughing:
alpox
@alpox
Apr 22 2017 19:17
Haha good one :D
Mohamed Derhalli
@derhallim
Apr 22 2017 19:17
@SkyCoder01 haha
Gulsvi
@gulsvi
Apr 22 2017 19:17
I forget where I heard that joke
alpox
@alpox
Apr 22 2017 19:17
My girlfriend also always pointed out that we are much too into our country - because she sees swiss flags at every corner when she's here :D
I never even noticed that until she told me xD
Mohamed Derhalli
@derhallim
Apr 22 2017 19:17
just like in Quebec ..
u see quebec flags everywhere
What do you think?
DistinctWolf
@DistinctWolf
Apr 22 2017 19:18
how do I know that i'm ready to learn node.js
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:18
I will add font soon
Mohamed Derhalli
@derhallim
Apr 22 2017 19:18
@MathematicsCoding reset the form when u click again
alpox
@alpox
Apr 22 2017 19:18
@FlashHero When you know you want a kickass server
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:19
@derhallim reset the form?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:19
i mean the html
at the beginning of button click, empty the html
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:19
What are you talking about?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:19
click the All 5 times...
............
u'll list the same result 5 times
Gulsvi
@gulsvi
Apr 22 2017 19:20
@FlashHero Try to get through the intermediate algorithm challenges here on Free Code Camp first. After that, try the beginner node.js tutorials here: https://nodeschool.io/#workshopper-list
alpox
@alpox
Apr 22 2017 19:20
@derhallim Thats a feature, not a bug
^_^
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:20
I know :\
Mohamed Derhalli
@derhallim
Apr 22 2017 19:20
:joy:
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:20
@derhallim test it again
Mohamed Derhalli
@derhallim
Apr 22 2017 19:21
:thumbsup:
DistinctWolf
@DistinctWolf
Apr 22 2017 19:21
@SkyCoder01 @alpox thanks
CamperBot
@camperbot
Apr 22 2017 19:21
flashhero sends brownie points to @skycoder01 and @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1140 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 963 | @alpox |http://www.freecodecamp.com/alpox
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:21
@derhallim but will it work with for loop?
DistinctWolf
@DistinctWolf
Apr 22 2017 19:21
is node.js all about server
Mohamed Derhalli
@derhallim
Apr 22 2017 19:21
but u need the append
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:21
Yeah for loop
Mohamed Derhalli
@derhallim
Apr 22 2017 19:21
as I said, in the for loop, u will need append
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:22
I will change back to append when I use for loop
Mohamed Derhalli
@derhallim
Apr 22 2017 19:22
on the button click, u need to reset the html at the beginning .html('');
alpox
@alpox
Apr 22 2017 19:22
@FlashHero It INTEGRATES a server
Mohamed Derhalli
@derhallim
Apr 22 2017 19:22
just add this line man .......
and keep the append
$('.channel ul').html('');
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:22
..
alpox
@alpox
Apr 22 2017 19:22
@FlashHero You can write some normal scripts with it too, but its usually used as a server
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:23
what about append?
Oh i see
alpox
@alpox
Apr 22 2017 19:23
@derhallim @MathematicsCoding $('.channel ul').empty(); <-- cleaner
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:23
$('.channel ul').html('').append('<li><img alt="" class="profile-pic" src="' + dataCollection.logo + '"></li>' + dataCollection.display_name);
Mohamed Derhalli
@derhallim
Apr 22 2017 19:23
@alpox thanks for that
CamperBot
@camperbot
Apr 22 2017 19:23
:warning: derhallim already gave alpox points
derhallim sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
DistinctWolf
@DistinctWolf
Apr 22 2017 19:23
@alpox oh ok and do i have to learn commands lines too
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:24
thanks @derhallim @alpox
CamperBot
@camperbot
Apr 22 2017 19:24
mathematicscoding sends brownie points to @derhallim and @alpox :sparkles: :thumbsup: :sparkles:
:warning: mathematicscoding already gave derhallim points
:cookie: 964 | @alpox |http://www.freecodecamp.com/alpox
Mohamed Derhalli
@derhallim
Apr 22 2017 19:25
@MathematicsCoding not like that
alpox
@alpox
Apr 22 2017 19:25
@FlashHero Hmm you use command line tools for starting node services and handle the package manager etc. so yes, you will need some command line knowledge
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:25
@derhallim but it does works?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:26
it will be :
//outside for////////////
 $('.channel ul').empty();
////////////////////////
  $('.channel ul').appen('<li><img alt="" class="profile-pic" src="' + dataCollection.logo + '"></li>' + dataCollection.display_name);
      });
DistinctWolf
@DistinctWolf
Apr 22 2017 19:26
@alpox ok thanks man
CamperBot
@camperbot
Apr 22 2017 19:26
flashhero sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: flashhero already gave alpox points
alpox
@alpox
Apr 22 2017 19:26
@MathematicsCoding This works for now. But as soon as you want to add more of them it doesn't work anymore
Mohamed Derhalli
@derhallim
Apr 22 2017 19:26
empty the ul outside the loop
alpox
@alpox
Apr 22 2017 19:26
@derhallim typo --> appen --> append
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:26
yeah
Mohamed Derhalli
@derhallim
Apr 22 2017 19:26
u don't want to empty the list for each item
yea append
:joy:
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:26
I see
alpox
@alpox
Apr 22 2017 19:27
@MathematicsCoding + dataCollection.display_name this should be inside of the li element
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:27
$('.channel ul').empty();
        $('.channel ul').append('<li><img alt="" class="profile-pic" src="' + dataCollection.logo + '"></li>' + dataCollection.display_name);
Mohamed Derhalli
@derhallim
Apr 22 2017 19:27
yep
alpox
@alpox
Apr 22 2017 19:28
@MathematicsCoding Relatively :) if you want to add items in a loop you will have to do the empty() before going through the loop, otherwise you will have only the last element of the looped ones in your page.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:29
blah.empty();
for loop?
Mohamed Derhalli
@derhallim
Apr 22 2017 19:29
yesss
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:29
okay
:joy:
Mohamed Derhalli
@derhallim
Apr 22 2017 19:30
.......................
imagine if we do pair programming @MathematicsCoding
that would be the reason i switch to accounting
:joy:
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:30
xD
Im taking accounting class at school
Mohamed Derhalli
@derhallim
Apr 22 2017 19:31
oh
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:31
Well I chose it for junior year but might take it
Mohamed Derhalli
@derhallim
Apr 22 2017 19:31
pair accounting
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:31
then switch it to programming!
Keon Samuel
@keonsam
Apr 22 2017 19:31
yh man luckly I didn't do this in college.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:31
@keonsam accounting?
Keon Samuel
@keonsam
Apr 22 2017 19:32
I did accounting.
Mohamed Derhalli
@derhallim
Apr 22 2017 19:32
accounting sucks
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:32
:\
Keon Samuel
@keonsam
Apr 22 2017 19:32
college for me is A levels.
Mohamed Derhalli
@derhallim
Apr 22 2017 19:32
it's harder than programming
Keon Samuel
@keonsam
Apr 22 2017 19:32
no way
Mohamed Derhalli
@derhallim
Apr 22 2017 19:32
or let's say less fun
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:32
My school offers Computer programming & Game development
but I chose CS first
I wonder what game development looks like..
Imagine CS and accounting in same semester
chouston3
@chouston3
Apr 22 2017 19:33
ugh
Keon Samuel
@keonsam
Apr 22 2017 19:34
urrrh
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:34
Nope cant imagine it lol
Keon Samuel
@keonsam
Apr 22 2017 19:34
:+1:
throw in physics and mathematics.
Amanda
@axjhuang
Apr 22 2017 19:35
hi everyone, i'm trying to do the tribute page... I was wondering if any of you could give me tips on how to make the text responsive like the example tribute page.
chouston3
@chouston3
Apr 22 2017 19:36
Hey guys, I am working on my tribute page. I have a question about buttons. If i want a button to link to something can i just put the href after my classes like this <button class="btn btn-primary" href="www.twitter.com/chiphorace">Twitter</button>
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:36
  $('#channel').click(function() {
    $.getJSON(usersApi + users[i] + callback, function(dataCollection) {
      console.log(dataCollection);
      for (var i = 0;i<=2;i++) {
      $('.channel ul').empty();
        $('.channel ul').append('<li><img alt="" class="profile-pic" src="' + dataCollection.logo + '"> '+ dataCollection.display_name+'</li>');
@keonsam damn
Well CS, accounting, mathematics, and others in same esmeter
semester*
chouston3
@chouston3
Apr 22 2017 19:36
@axjhuang use bootstrap
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:36
For loop have to be before json method?
Keon Samuel
@keonsam
Apr 22 2017 19:37
yes
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:37
oh <=
alright
alpox
@alpox
Apr 22 2017 19:37
@keonsam I have CS here and start my Physics minor next semester... this is going to be tough
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:37
@alpox college?
Keon Samuel
@keonsam
Apr 22 2017 19:38
why are you using a click function to get data?
@MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:38
Well SO I can click all button?
Keon Samuel
@keonsam
Apr 22 2017 19:38
you know your page will be empty on load right?
Amanda
@axjhuang
Apr 22 2017 19:38
@chouston3 I'm trying, but i'm not quite sure how. am I supposed to nest <h1>text</h1> in <div class= col-lg-6> ?
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:39
alright its working
@keonsam i forgot to put empty before for loop
Gulsvi
@gulsvi
Apr 22 2017 19:39
@chouston3 @axjhuang Unfortunately, bootstrap doesn't offer any built in way to make the text responsive. The best way to do that is to use media queries in your CSS, you can control the font size based on how wide the screen is: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:39
you are talking about this?
$('.channel ul').empty();
alpox
@alpox
Apr 22 2017 19:39
@MathematicsCoding Yup
Well we don't call it college here.. we call it university :D
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:40
I see
Sorry
Keon Samuel
@keonsam
Apr 22 2017 19:40
I mean the website will be empty because you have to click all to load the data.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:40
Im in high school :\
JD Tadlock
@jdtdesigns
Apr 22 2017 19:40
@MathematicsCoding did you figure it out?
Amanda
@axjhuang
Apr 22 2017 19:41
@SkyCoder01 Ahh I see. I did manage to do it with media inquiry, but i am curious as to how the sample tribute page managed to make it resize smoothly like the wells...
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:41
@jdtdesigns yeah take a look these guys helped me
I might need to add more users
brb
Gulsvi
@gulsvi
Apr 22 2017 19:43
@axjhuang They use the bootstrap grid for that. You can define multiple column sizes for every screen size. So, if you want it 8 columns wide on medium sized screens, use col-md-8, 10 columns wide on small screens, add col-sm-10. In the end, your div would be: <div class="col-md-8 col-sm-10">
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:43
Compare with this lol guys
New verus Old
@SkyCoder01 How do I get all users in a row?
Not as a list
Gulsvi
@gulsvi
Apr 22 2017 19:45
Bootstrap is one way - make <div>s with columns.
Keon Samuel
@keonsam
Apr 22 2017 19:45
users in a row?
JD Tadlock
@jdtdesigns
Apr 22 2017 19:46
@MathematicsCoding you shouldn't use for loops with Ajax as it will sometimes cause server errors due to overclocking the api. Especially free apis
Amanda
@axjhuang
Apr 22 2017 19:46
@SkyCoder01 Ohhh! So that's what it was. I was using the bootstrap grid but I have only used large...didn't put a small it it. I'll try it now.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:46
@jdtdesigns I dont have ajax?
Gulsvi
@gulsvi
Apr 22 2017 19:47
getJSON is Ajax :)
it's a shorthand method for Ajax
Keon Samuel
@keonsam
Apr 22 2017 19:47
which is better?
getJSON or Ajax?
Gulsvi
@gulsvi
Apr 22 2017 19:47
They are the same code, one is just quicker to write
Similar with $.get, $.getScript, $.getJSON -- all different shorthand versions of $.ajax
JD Tadlock
@jdtdesigns
Apr 22 2017 19:48
I'm on my phone, so thank y'all for answering lol
Sorin Ruse
@sorinr
Apr 22 2017 19:49
@axjhuang here some info: http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/ DO NOT learn only bootstrap way. learn the basics
@axjhuang u can also google for more similar info
JD Tadlock
@jdtdesigns
Apr 22 2017 19:51
For loops and while loops are very fast @MathematicsCoding. forEach() will be fast but not overclock the api
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:52
@jdtdesigns I dont have forEach
Oh nvm
My pen is fine what is wrong with it :\
JD Tadlock
@jdtdesigns
Apr 22 2017 19:53
Add about 10 names and try requesting each with a for loop. You'll probably get errors.
Keon Samuel
@keonsam
Apr 22 2017 19:54
sky help me with the tic tac toe AI.
JD Tadlock
@jdtdesigns
Apr 22 2017 19:55
I'm saying you SHOULD use a .forEach() @MathematicsCoding
Keon Samuel
@keonsam
Apr 22 2017 19:55
forEach is an array method.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:55
yeah I misunderstood
Gulsvi
@gulsvi
Apr 22 2017 19:56
I don't know how to help you keon lol
aqsa-ayman
@aqsa-ayman
Apr 22 2017 19:56
Hi guys, can I quickly ask about the twitch project? I completed it a while ago but now that I've checked back on it it seems the ajax request is not working
Gulsvi
@gulsvi
Apr 22 2017 19:56
pick a win first, then pick a block, if none, pick a corner, otherwise, pick the center square. If all of those are taken, pick a side square.
That's what wikipedia says to do
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:57
yeah thats how you play against real player
I know few methods to not lose :\
Gulsvi
@gulsvi
Apr 22 2017 19:58
@aqsa-ayman Change https://wind-bow.gomix.me to https://wind-bow.glitch.me
JD Tadlock
@jdtdesigns
Apr 22 2017 19:58
@aqsa-ayman without looking i can assume outs due to twitch switching to token verification to request data
Gulsvi
@gulsvi
Apr 22 2017 19:58
They changed the server name again :/
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:58
@SkyCoder01 do you have twitich account?
twitch*
Gulsvi
@gulsvi
Apr 22 2017 19:58
No, I used the mirror that freecodecamp provides
JD Tadlock
@jdtdesigns
Apr 22 2017 19:58
Oh, or that. Thought she might be using the twitch api.
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:58
Yeha..
Im just asking if you have the account
So I could use your username :\
Gulsvi
@gulsvi
Apr 22 2017 19:59
Oh, no, I don't have a twitch account
Saboor Malik
@MathematicsCoding
Apr 22 2017 19:59
Okay
Gulsvi
@gulsvi
Apr 22 2017 19:59
You could use my name for a non-existent account :p
Saboor Malik
@MathematicsCoding
Apr 22 2017 20:00
Then it would return undefined
:\
JD Tadlock
@jdtdesigns
Apr 22 2017 20:00
@MathematicsCoding you can use my code stream name
Codeclash
Gulsvi
@gulsvi
Apr 22 2017 20:00
That's one of the User Stories, a user account that is undefined
Saboor Malik
@MathematicsCoding
Apr 22 2017 20:00
@jdtdesigns thanks
CamperBot
@camperbot
Apr 22 2017 20:00
mathematicscoding sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 912 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Saboor Malik
@MathematicsCoding
Apr 22 2017 20:01
nice profile picture
Brb gotta charge my laptop..
Amanda
@axjhuang