These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Sep 2017
Dalton Escoe
@Alenero129
Sep 13 2017 01:47
Hello folks
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 02:00
Any knowledgeable React users here I can bother for a minute?
Peter Steele
@PeterHSteele
Sep 13 2017 02:10
@FredrikOseberg ive worked with it a little bit if your question is pretty basic
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 02:12

Just wondering about best practices for changing style in components. This is what I’ve done in order to change classes on click:

    fullscreenEditor() {
        console.log('clicked');
        this.setState({ markdownEditorFullscreen: !this.state.markdownEditorFullscreen });
        if (this.state.markdownEditorFullscreen) {
            this.setState({ markdownEditorStyle: 'markdown--editor flex fullscreen' });
            this.setState({ markdownPreviewStyle: '' });
        } else {
            this.setState({ markdownEditorStyle: 'markdown--editor flex' });
            this.setState({ markdownPreviewStyle: 'visible' });
        }
    }

I’m basically storing the classnames in state and changing it based on whether or not the fullscreen variable is true. Is there a better way?

Peter Steele
@PeterHSteele
Sep 13 2017 02:20
hey, if it works, it works. One thing you could try is rendering a different component when the fullscreen variable is true than when it is false. Each component could have different styles but only 1 rendered at a time
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 02:34
Yeah I guess! Thanks @PeterHSteele
CamperBot
@camperbot
Sep 13 2017 02:34
fredrikoseberg sends brownie points to @peterhsteele :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @peterhsteele |http://www.freecodecamp.com/peterhsteele
Ismail Hozain
@ismailhozain
Sep 13 2017 02:36
so guys i am working on the twitch streamer and my api is not working and my console says some jibberish about CORS and i dont really know what to do thanks https://codepen.io/ismailhozain/pen/zdgQEb
so guys i am working on the twitch streamer and my api is not working and my console says some jibberish about CORS and i dont really know what to do thanks https://codepen.io/ismailhozain/pen/zdgQEb
korzo
@korzo
Sep 13 2017 02:38
@ismailhozain change url to https://wind-bow.glitch.me/twitch-api
@ismailhozain You have old url which redirects and redirect breaks CORS
Ismail Hozain
@ismailhozain
Sep 13 2017 02:41
it is not working
same console error
Ismail Hozain
@ismailhozain
Sep 13 2017 03:11
hey anyone there
?
oh yeah by the way that was the same url i had before
iso
@iso1048
Sep 13 2017 03:20
you need to use a streams or channels route with the username to get an api. e.g. https://wind-bow.glitch.me/twitch-api/streams/freecodecamp or https://wind-bow.glitch.me/twitch-api/channels/freecodecamp
Ismail Hozain
@ismailhozain
Sep 13 2017 03:21
wait so you are saying that i need to get an api key to get this thing off the ground
?
iso
@iso1048
Sep 13 2017 03:21
no
click on the links above and you can see the api
Tyler Del Rosario
@TylerDelRosario
Sep 13 2017 04:11
iso
@iso1048
Sep 13 2017 04:59
Vincent Chho
@koalavc
Sep 13 2017 09:07
hello is there anyone that could help me?
so i am trying to get this div element to line up with this span element on the same block level but im having a hard time
Jan Shah
@JanShah
Sep 13 2017 09:12
@koalavc you could use two divs and float them left
Vincent Chho
@koalavc
Sep 13 2017 09:12
@JanShah i just realized that
but my latest problem is that i have a span within one of my divs
and when i float it left it goes away
Jan Shah
@JanShah
Sep 13 2017 09:16
no widths have been set @koalavc
Vincent Chho
@koalavc
Sep 13 2017 09:17
@JanShah thank you
CamperBot
@camperbot
Sep 13 2017 09:17
koalavc sends brownie points to @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 513 | @janshah |http://www.freecodecamp.com/janshah
Vincent Chho
@koalavc
Sep 13 2017 09:17
i spent an hour trying to figure this out
but in reality it was something i had learned previously
Jan Shah
@JanShah
Sep 13 2017 09:18
no worries, I've forgotten 90% of what i've learnt in the past :)
Jait Jacob
@jaitjacob
Sep 13 2017 09:32
HI GUYS, I have been working on this website for quite a long time and I can get the gap under the "Home" link on the navbar to be avoided. What can i do to fix it?
gap.png
gap.png
Jan Shah
@JanShah
Sep 13 2017 09:32
@jaitjacob it could be the size of your logo
Jait Jacob
@jaitjacob
Sep 13 2017 09:34
yes, i figured it out. I want the active color to fill the gap but
is there anyway to extend that dark cray color towards the gap?
Jan Shah
@JanShah
Sep 13 2017 09:36
you could add some padding to the bottom of the button, I'm not sure from looking at a gif
@jaitjacob
or png
Jait Jacob
@jaitjacob
Sep 13 2017 09:38
@JanShah alright I will try paddding and see if it works
@JanShah thank you
CamperBot
@camperbot
Sep 13 2017 09:38
jaitjacob sends brownie points to @janshah :sparkles: :thumbsup: :sparkles:
:cookie: 516 | @janshah |http://www.freecodecamp.com/janshah
Ivan Ngundela
@ingundela
Sep 13 2017 11:14
hello everyone.. I need some help with regards font-size to look the same or scale to the device width.. should I always use %?Thanks
LydaTech
@lydatech
Sep 13 2017 11:17
@ingundela rem
@ingundela or em
Ivan Ngundela
@ingundela
Sep 13 2017 11:25
@jaitjacob could be the size of the logo and also give top:0 to the slide image
@lydatech Thanks.. but is there something wrong in using the %.... I have tested doing like 120% as <p> font-size and it look the same if I give 1.2rem
@lydatech shoul I forget using % and always use rem or em?
@lydatech I'm no concerned about this when giving the h1, h2, .... and <p> elements...
Ivan Ngundela
@ingundela
Sep 13 2017 11:45
@lydatech Thanks
CamperBot
@camperbot
Sep 13 2017 11:45
ingundela sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2434 | @lydatech |http://www.freecodecamp.com/lydatech
Ivan Ngundela
@ingundela
Sep 13 2017 11:45
@lydatech very clear
@lydatech still in this subject what should be e default font-size for a <p> element?
@lydatech can I say font-size: 1em;?
LydaTech
@lydatech
Sep 13 2017 11:56
@ingundela each browser has a default size. What all them do is base the size on that default
Jake
@JakeDVirus
Sep 13 2017 12:14
There is some problem in appending or cloning and i dont know what it is exactly. Below is the piece of code and it doesn't throw any error but i cant see my dom element being appended.
    function helperSuccess(JSONData, username){
        var $cloneDOM, $cloneList = [], logo;
        $cloneDOM = $(".wrapper_streams-blocks .prototype-block").clone(true, true);    
        $cloneDOM.find(".wrapper-username .username").text(username);
        console.log($cloneDOM);//for debugging purpose
        if (JSONData.stream == null) {           
            logo = "http://www.vistacollege.edu/images/graphics/page-warning.png";
            $cloneDOM.find(".logo img").attr({
                "class" : "cancel-logo",
                src : logo
            });
            $cloneDOM.children(".status").text("Offline");
        } else {            
            logo = JSONData.stream.channel.logo;
            $cloneDOM.find(".logo .img").attr("src", logo);
            $cloneDOM.children(".status").text("Online");
        }
        return $cloneDOM;
    }

    //---stream-Status of fcc---
    var urlStatus ="https://api.twitch.tv/kraken/streams/freecodecamp?client_id=x1u9u2hml989t8tka511umq622j1l0";
    // getJSON-FUNCTION__FIRST-LEVEL
    $.getJSON(urlStatus,function(returnedData){
        var cloneRetrieved = helperSuccess(returnedData, "freecodecamp");
        $(".wrapper_streamers-blocks").append(cloneRetrieved);
    }); // end of getJSON-FUNCTION
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 13:06

Anyone know why this is causing an error in React?

<div className="resume--body--proglang--card--details">
            {props.skills.map(skill => {
                console.log('something');
                return (
                    <ProglangCardDetail
                        name={skill.name}
                        rating={skill.rating}
                        description={skill.description}
                        key={skill.id}
                    />
                );
            })}
        </div>

I have confirmed it’s an array that exists on the props object. ‘something’ is logged to the console 6 times before the error throws, and the error is: “uncaught type error: cannot read property map of undefined”.

Peter Steele
@PeterHSteele
Sep 13 2017 13:09
@FredrikOseberg hm i cant see anything there but can you post your whole code?
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 13:10
@PeterHSteele This is the whole component:
import React from 'react';
import ProglangCardDetail from './ProglangCardDetail/ProglangCardDetail';

const ProglangCard = props => (
    <div className="resume--body--proglang--card">
        <div className="resume--body--proglang--card--wrapper">
            <div className="resume--body--proglang--card--image">
                <img src={props.img} alt={props.name} />
            </div>
            <div className="resume--body--proglang--card--name">
                <p>{props.name}</p>
            </div>
            <i className="fa fa-chevron-down" aria-hidden="true" />
        </div>
        <div className="resume--body--proglang--card--details">
            {props.skills.map(skill => {
                console.log('something');
                return (
                    <ProglangCardDetail
                        name={skill.name}
                        rating={skill.rating}
                        description={skill.description}
                        key={skill.id}
                    />
                );
            })}
        </div>
    </div>
);

export default ProglangCard;
And here is the component that passes props:
import React from 'react';
import ProglangCard from './ProglangCard/ProglangCard';

const Body = props => (
    <div className="resume--body">
        <h1 className="resume--body--h1">Programming Languages</h1>
        <div className="resume--body--proglang--list">
            {props.bodyData[0].map(programmingLanguage => {
                return (
                    <ProglangCard
                        name={programmingLanguage.name}
                        key={programmingLanguage.id}
                        img={programmingLanguage.img}
                        skills={programmingLanguage.skills}
                    />
                );
            })}
        </div>
    </div>
);

export default Body;
Silly mistake. I mocked up some dummy data for the first item in the array but not the other ones. Setting up a property with an empty array on the other items solves it.
appsk
@appsk
Sep 13 2017 13:16
Hi, my random quote machine was working fine previously. It won't work anymore. The url that I am using in my script seems to be not working. Can someone let me know if this url works for you?
Thanks.
Peter Steele
@PeterHSteele
Sep 13 2017 13:17
@FredrikOseberg cool glad you fixed it!
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 13:18
@appsk
I see a JSON object in that URL with quotetext, quoteAuthor, senderName, senderLink and quoteLink
Thanks Peter
appsk
@appsk
Sep 13 2017 13:21
@FredrikOseberg hmmm.. I am getting this page can't be displayed message
Turn on TLS 1.0, TLS 1.1, and TLS 1.2 in Advanced settings and try connecting to https://api.forismatic.com again. If this error persists, it is possible that this site uses an unsupported protocol or cipher suite such as RC4 (link for the details), which is not considered secure. Please contact your site administrator.
Fredrik Strand Oseberg
@FredrikOseberg
Sep 13 2017 13:22
Not sure whats wrong then, my browser says it’s secure. Perhaps something is wrong with your internet connection? Restart the router maybe?
appsk
@appsk
Sep 13 2017 13:23
@FredrikOseberg ok, thanks.
CamperBot
@camperbot
Sep 13 2017 13:23
appsk sends brownie points to @fredrikoseberg :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @fredrikoseberg |http://www.freecodecamp.com/fredrikoseberg
Lone programmer?
@MateoCzyzewski
Sep 13 2017 14:38
Hello to everyone
Ken Haduch
@khaduch
Sep 13 2017 14:42
@MateoCzyzewski - hello how are you?
Yvonne
@yvonne6344
Sep 13 2017 16:00
螢幕快照 2017-09-13 下午11.53.07.png
Anyone can help me? about CSS!
init to load css can't success! but copying and pasting in the browser can run!
螢幕快照 2017-09-13 下午11.53.32.png
piteto
@piteto
Sep 13 2017 16:08
@yvonne6344
.todayWeather .weather .report .weather-image-other {
  background-position: -127 -505px;
}
Yvonne
@yvonne6344
Sep 13 2017 16:19
@piteto no...can't run
piteto
@piteto
Sep 13 2017 16:25
@yvonne6344 Show more code please to help us debug
Eric Voigt
@ericvoigt
Sep 13 2017 16:26
can someone explain what count += 5 means or count -+ is it count = +/- 1 + 5?
piteto
@piteto
Sep 13 2017 16:27
count += 5 is the same as count = count + 5
LydaTech
@lydatech
Sep 13 2017 16:28
@ericvoigt didnt you just get an answer to that exact question in the main chat?
Eric Voigt
@ericvoigt
Sep 13 2017 16:29
i guess i did but I don't understand it and there was to much going on in that chat @lydatech
piteto
@piteto
Sep 13 2017 16:30
@lydatech Please be nice to other campers, there's no need to criticize people here for seeking out alternate answers. We're all trying to learn.
LydaTech
@lydatech
Sep 13 2017 16:30
@piteto I wasnt being mean
Eric Voigt
@ericvoigt
Sep 13 2017 16:30
@lydatech you also said to not ask questions in the main chat
@lydatech could care less if you intended to be mean or not.. that's besides the point.. just trying to understand this..
LydaTech
@lydatech
Sep 13 2017 16:31
@ericvoigt what? No I dint! I said we have specific chat rooms. You asked why no one was helping I directed you to a place you could get help. At no time did i say dont ask questions in the main chat
Eric Voigt
@ericvoigt
Sep 13 2017 16:33
@lydatech i think i miss read it.. my apologies .. the chat was moving pretty fast
LydaTech
@lydatech
Sep 13 2017 16:34
@ericvoigt np
piteto
@piteto
Sep 13 2017 16:34
@ericvoigt it's called compound assignment. We can do it with add, subtract, multiply, and divide.
var count = 2;
count += 5;
console.log(count); // 7
Yvonne
@yvonne6344
Sep 13 2017 16:35
Eric Voigt
@ericvoigt
Sep 13 2017 16:35
now i get it
you have to define count to use = count + 5.. if count = 0 then count = count + 5.. = 5
@lydatech @piteto thanks
CamperBot
@camperbot
Sep 13 2017 16:36
ericvoigt sends brownie points to @lydatech and @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 101 | @piteto |http://www.freecodecamp.com/piteto
Jorge Castaño Delgado
@jhcastanod
Sep 13 2017 16:36
hey guys, how do I add the same effect to a div that the input[type="file"] does using jQuery?
CamperBot
@camperbot
Sep 13 2017 16:36
:star2: 2435 | @lydatech |http://www.freecodecamp.com/lydatech
LydaTech
@lydatech
Sep 13 2017 16:38
@jhcastanod $('[type="file"]')
piteto
@piteto
Sep 13 2017 16:39
@yvonne6344 I'm not seeing the problem in that codepen, but I guess it is an issue with CSS specificity. Try adding more parent element classes to ensure your CSS styles take effect. For example: .weather-status-left .weather-img .weather-image-other
The link I provided above talks about CSS Specificity in more detail
Yvonne
@yvonne6344
Sep 13 2017 16:43
@piteto I will try it. thank u.
CamperBot
@camperbot
Sep 13 2017 16:43
yvonne6344 sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 102 | @piteto |http://www.freecodecamp.com/piteto
Yvonne
@yvonne6344
Sep 13 2017 16:52
@piteto I solve :smile: use background! don't use background-position.
 background: #7eabdb url(./img/icons.png) -56px -360px no-repeat;
piteto
@piteto
Sep 13 2017 17:07
:) :clap: :sparkles: A different CSS property can also be used instead of higher specificity. Glad you got it @yvonne6344
ADIL KARMOUZI
@mradil16
Sep 13 2017 17:24
what are the minimum skills a front-end developer should have before applying to his first job ?
I have a portfolio including projects built using html, css and basic javascript . would that be enough to apply for a junior developer position ?
Vijay Bhatt
@vijay23bhatt
Sep 13 2017 17:46
https://codepen.io/vijay23bhatt/full/gMrmEx/ Hi guys unable to figure out whats causing vertical margin problem in the left second last portfolio section.
Ken Haduch
@khaduch
Sep 13 2017 17:56
@vijay23bhatt - I think that each row (of 12 columns) should have a separate <div class="row"> at the start, then the columns, then the </div> to close the row div. That is the correct usage of the grid.
Christopher McCormack
@cmccormack
Sep 13 2017 17:58
That's not necessarily correct when you're adding items like that. After 12, the columns will wrap, which makes it very easy to keep adding new items to the row knowing the layout will handle it
Ken Haduch
@khaduch
Sep 13 2017 17:59
well, there are container divs inside the row div, which could be causing other problems - since the container has margins or padding on the left and right sides... it just looks like poorly formed bootstrap grid code? I'm not sure if that's causing the problems, but it doesn't seem like the "standard" way to do that.
Christopher McCormack
@cmccormack
Sep 13 2017 18:01
@khaduch yeah that's not great
I occasionally add containers in a row or col if it's breaking up my page sections; there can be some weird margins/padding if you try to create subsections without doing it in a new container
piteto
@piteto
Sep 13 2017 18:37
@vijay23bhatt To fix this, resize your images in a photo editor so they are all the same dimensions. This is necessary when using more than 12 columns per row. You could also use this CSS, but it may not give the look you want:
.portfolio-item img {
  max-height: 200px;
  margin: 0 auto;
}
max#237
@maximilientoumi
Sep 13 2017 18:44
please how to make my iframe to be scrolled by the main page
Jorge Castaño Delgado
@jhcastanod
Sep 13 2017 19:43
how do I make invisible the text within a ´div´tag? I'm using a CMS, so I can't just edit the .html file. any help would be cool
Moisés Man
@moigithub
Sep 13 2017 19:52
if u have access to the css u could use any of this
display:none;
visibility: hidden;
opacity:0;
note: display will collapse the container
John Hui
@mjhui1990
Sep 13 2017 19:53
Hi fellas I have a similar question.. its css/javascript related... when i use document.getElementById('quote').innerHTML = randomQuote ; to change the quote... it doesn't inherit the bootstrap font.. how do I make it inherit the bootstrap font?
simple*
Moisés Man
@moigithub
Sep 13 2017 19:55
HOW u setting ur styles ?
John Hui
@mjhui1990
Sep 13 2017 19:57
let me link the codepen https://codepen.io/mjhui90/pen/GMgZwp
thank you for your help :)
Moisés Man
@moigithub
Sep 13 2017 20:01
on ur html u using id's for quote and author
but on ur css u setting class (see dot) attributes for quote and author
soo instead of .author should be #author <-- id's with # @mjhui1990
Gaurav
@gauravmagan
Sep 13 2017 20:12
Screen Shot 2017-09-13 at 4.09.16 PM.png
@moigithub
trying to print a datastructure
John Hui
@mjhui1990
Sep 13 2017 20:13
wow silly me i didnt catch that.. thank you so much :)
Gaurav
@gauravmagan
Sep 13 2017 20:15
@piteto @moigithub
anyone in the room
can let me know the solution
Moisés Man
@moigithub
Sep 13 2017 20:19
try that code on ur browser console.. it should work @gauravmagan
F12 on most browsers to open devtools.. then switch to console tab
Gaurav
@gauravmagan
Sep 13 2017 20:22
i have couple of datastructures to do with need a online editor
@moigithub
Moisés Man
@moigithub
Sep 13 2017 20:22
thats just to test that code...
to show.. the code is correct and working
in other words... probably some configuratin on ur ide is wrong
Engjell Bislimi
@Engjell00
Sep 13 2017 21:09
anyone can tell me how to generate the lipsum dummy text in sumblime text
piteto
@piteto
Sep 13 2017 21:10
@Engjell00 lorem + Tab
at least with the plugin I have
Daniel Feldman
@Feldbot
Sep 13 2017 21:36
Hi, I'm working on the Wikipedia Viewer and stuck on how to append elements from multidimensional arrays. I've got one array for the search term, and then three nested arrays with corresponding items that I'm trying to append back to an <ul>. I can append each subarray by itself, but am not sure how to put each into a list. Is there a way to do this without creating nested for loops or operating on the arrays? https://codepen.io/Feldbot/pen/JyQzVL
piteto
@piteto
Sep 13 2017 21:41
@Feldbot Yes, you can get all the data from that array without a nested for loop
data[1][i], data[2][i], and data[3][i]
Daniel Feldman
@Feldbot
Sep 13 2017 21:45
@piteto Does that method work with $.each ?
piteto
@piteto
Sep 13 2017 21:46
I'm not familiar with $.each, but I'm guessing that's like a forEach in jQuery? If so, it will work with .forEach() so should also work with $.each
var myArray = ['2D Array', ['a', 'b', 'c'], ['1', '2', '3'], ['a1', 'b1', 'c1']];

myArray[1].forEach(function(value, i) {
  console.log(myArray[1][i], myArray[2][i], myArray[3][i])                
});
But a for loop is all you need:
for(var i = 0; i < myArray[1].length; i++) {
  console.log(myArray[1][i], myArray[2][i], myArray[3][i])                
}
korzo
@korzo
Sep 13 2017 21:51
@piteto Slight difference is in this inside function. In $.each this refers to current element
piteto
@piteto
Sep 13 2017 21:53
@korzo I'm trying to wrap my head around it now lol, but is that $(selector).each? Seems it's different than $.each()
And they swap the index/value order (sigh...)
korzo
@korzo
Sep 13 2017 21:54
@piteto Yes, I meant $('selector').each
Daniel Feldman
@Feldbot
Sep 13 2017 21:58
@piteto I'm confused why myArray[1].... would iterate through index 1, 2, 3
piteto
@piteto
Sep 13 2017 21:59
@Feldbot myArray[1] is the same length as myArray[2] and myArray[3], so it's just used for length purposes
it gives us 0, 1, and 2 for indices as we loop through it - which is what we need for each of the sub arrays
Daniel Feldman
@Feldbot
Sep 13 2017 22:10
@piteto I still don't understand how myArray[1] returns the right length. Isn't that a reference to just target ['a', 'b', 'c'] and iterate through that?
Daniel Feldman
@Feldbot
Sep 13 2017 22:20
@piteto At any rate that works really well. Thanks again for the help, I'm grateful! Let me know if you ever need any graphics for anything :-)
CamperBot
@camperbot
Sep 13 2017 22:20
feldbot sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
:cookie: 103 | @piteto |http://www.freecodecamp.com/piteto
Daniel Feldman
@Feldbot
Sep 13 2017 22:29

@piteto Interestingly, this logs an array of ['a', 'b', 'c'] three times

var myArray = ['2D Array', ['a', 'b', 'c'], ['1', '2', '3'], ['a1', 'b1', 'c1']];

$.each(myArray[1], function(index, value) {
  console.log(myArray[1])
})

while this logs an array of a, b, c

var myArray = ['2D Array', ['a', 'b', 'c'], ['1', '2', '3'], ['a1', 'b1', 'c1']];

$.each(myArray[1], function(index, value) {
  console.log(myArray[1][index])
})

Something seems pretty strange about that.

Jan Shah
@JanShah
Sep 13 2017 22:39
my bad,
it's (value, index) not index, value
@Feldbot
var myArray = ['2D Array', ['a', 'b', 'c'], ['1', '2', '3'], ['a1', 'b1', 'c1']];

myArray[1].forEach(function(value, index) {
  console.log(myArray[1][index])
})
Engjell Bislimi
@Engjell00
Sep 13 2017 22:42
As you can see everything is in their box if you can also see the Read me at the left why is it at the bottom and not in the left side of the middle container
image.png
Daniel Feldman
@Feldbot
Sep 13 2017 22:47
@JanShah Same thing with that code, I don't really understand why console.log(myArray[1] would log ['a', 'b', 'c'] three times. Something about the forEach method must do that but I don't know why.
Jan Shah
@JanShah
Sep 13 2017 22:49
@Feldbot if you use loops it's usually the value that comes first, index later, the code above works
piteto
@piteto
Sep 13 2017 22:52
@Feldbot To spell out what's going on, $.each looks at the array at myArray[1] which is ['a', 'b', 'c']. The value refers to each value in the array - a, b, and c. The index refers to each index in the array which is 0, 1, and 2.
$.each(myArray[1], function(index, value) {
  console.log(myArray[1])
})
So, in the code above, your are telling it to log myArray[1] for every element in the array. You will get ['a', 'b', 'c'] repeated 3 times because there are three elements in that array.
happy to help up there earlier, by the way :)
Daniel Feldman
@Feldbot
Sep 13 2017 22:59
@piteto Thanks for explaining that, I can see it now. Also earlier then when you mentioned myArray[1] just got the length, that is also a part of the each/forEach method, that it just needs any "full" index to set the length? That was confusing me, because the same function worked with myArray[2] and myArray[3]. Any of those has the same length so it just needs that part to assess the count of each?
CamperBot
@camperbot
Sep 13 2017 22:59
feldbot sends brownie points to @piteto :sparkles: :thumbsup: :sparkles:
api offline
Ryan C Brennan
@ryancbrennan
Sep 13 2017 23:47
What's up droods?
piteto
@piteto
Sep 13 2017 23:50
@Feldbot Yes, you got it right!
Engjell Bislimi
@Engjell00
Sep 13 2017 23:51
how can I put space between a container and a div ?
piteto
@piteto
Sep 13 2017 23:51
@Engjell00 add a margin
Engjell Bislimi
@Engjell00
Sep 13 2017 23:52
I put *{ margin padding 0}
piteto
@piteto
Sep 13 2017 23:52
that is invalid CSS
You could do this though:
* {
  margin: 0;
  padding: 0;
}

.container {
  margin-bottom: 20px;
}
or use the margin on the div if it is inside the container
.container div {
  margin-top: 20px;
}
Kent Saeteurn
@sansae
Sep 13 2017 23:54

Hi everyone. I'm currently working on the twitch app and am having some trouble with making an ajax call inside a forEach loop.

The issue is that a variable I would like to increment, called "num", is being incremented several times before the json data is even displayed onto my div. I have an array of 3 names, so in the first iteration, I want the "num" to equal 1, then inside "success" function, I want to use num. Unfortunately, the variable equals 3 at the beginning and the end. Does this make sense?
I've console.logged the values num, along with the json results.

Something tells me this has to do with asynchronous vs synchronous calls (I still can't wrap my head around that by the way.) I read about using promises, and also "complete" instead of "success", but I ran into a road block.

Can anyone help?
Here is my pen: https://codepen.io/anon/pen/oGgZPE
Thank you in advance.

piteto
@piteto
Sep 13 2017 23:56
@sansae Yes, it's because your forEach finishes before the data comes back from the glitch.me server. Javascript runs faster than the internet :) put num++ inside your success: function instead.
You can also use the index feature of forEach: twitchUsers.forEach(function(username, i) {
i will start at 0 and increment by 1 for each element in the array