These are chat archives for FreeCodeCamp/HelpFrontEnd

1st
Feb 2018
James Hwang
@Kiwilicious
Feb 01 2018 00:01
Haha anyways, thanks @HeinousTugboat .
CamperBot
@camperbot
Feb 01 2018 00:01
kiwilicious sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
Gulsvi
@gulsvi
Feb 01 2018 00:18
@MuhammedKarim You have a space after the ul in your CSS. It should be: ul.todoul li
Or just use: .todoul li since it seems that class name will only apply to ul anyway.
Gulsvi
@gulsvi
Feb 01 2018 00:23
@sethdcd Could you do something like this?
submitBtn.onclick = function() {
  // call the function needed based on the current button value
  if (this.value == 0) play();
  if (this.value == 1) pause();

  // toggle the value
  this.value == 0 ? this.value = 1 : this.value = 0;
}
I guess you could also do:
submitBtn.onclick = function() {
  if (this.value == 0) {
    play();
    this.value = 1;
    return;
  }

  pause();
  this.value = 0;
}
aRtoo
@artoodeeto
Feb 01 2018 00:43
hey fam how can i stick the modal when i adjust the screen size? https://codepen.io/artoo/pen/eVNXZL?editors=0010
im using transform: translate fam
Russ Wilkie
@RussWilkie
Feb 01 2018 00:49
Anyone know why I can't seem to my ajax requests working at all? I trimmed it down to the simplest type of request but still not getting any success:
$(document).ready(function() {
$.ajax({
url: "http://www.google.com",
success: function() {
console.log("success");
},
error: function() {
console.log("error");
}
});
});
Brad
@bradtaniguchi
Feb 01 2018 00:50
@RussWilkie What is the error you getting? It might be CORS
Russ Wilkie
@RussWilkie
Feb 01 2018 00:53
The XHR status seems to return 0
@bradtaniguchi
Gulsvi
@gulsvi
Feb 01 2018 00:54
@RussWilkie Try it with a different URL:
$.ajax({
  url: "https://fcc-weather-api.glitch.me/api/current?lat=35&lon=139",
  success: function() {
    console.log("success");
  },
  error: function() {
    console.log("error");
  }
});
http://www.google.com has a couple of potential issues - Cross Origin restrictions, and HTTP when you might be trying to access it via HTTPS (like in codepen)
Russ Wilkie
@RussWilkie
Feb 01 2018 00:57
@gulsvi Thanks, That seem to work. Do you know how I would be able to handle this for a local file (e.g. folder/file.ext)?
CamperBot
@camperbot
Feb 01 2018 00:57
russwilkie sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2578 | @gulsvi |http://www.freecodecamp.org/gulsvi
Brad
@bradtaniguchi
Feb 01 2018 00:57
@RussWilkie Reading the docs it says the first arg of the error callback should be an object, are you talking about something else?
@RussWilkie You should be able to make a call relative to where the index is for say a JSON file
Gulsvi
@gulsvi
Feb 01 2018 00:58
@RussWilkie You would need to set up a web server on your local computer and access it via http://localhost/folder/file.ext
Russ Wilkie
@RussWilkie
Feb 01 2018 00:59
Gotcha, guess I need to investigate this more on the local side. Thank you @gulsvi
CamperBot
@camperbot
Feb 01 2018 00:59
api offline
russwilkie sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 01:11
Ello peoples
Gulsvi
@gulsvi
Feb 01 2018 01:14
Hello @germangamboa95
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 01:16
What is everyone working on tonight?
Gulsvi
@gulsvi
Feb 01 2018 01:17
Homework :)
With 16,000+ people here, you'd think more would talk
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 01:18
lol 16,000+ lurkers
Gulsvi
@gulsvi
Feb 01 2018 01:18
probably 15,900 inactive accounts ;)
Got their certificate and now they're done with gitter
br3ntor
@br3ntor
Feb 01 2018 01:30
I was just thinking I wanna make an app to monitor the activity (msg per minute) of the fcc chatrooms.
Alexander Jarman
@HeinousTugboat
Feb 01 2018 01:34
I just tend to get sucked into conversations and helping here. I sometimes stay up way too late talking to people in here. <_<
It's about as technical of conversation as I get.
Brad
@bradtaniguchi
Feb 01 2018 02:09
Are 16k online on gitter tho? ( I personally am working and am not in the chat 80% of the time)
Gulsvi
@gulsvi
Feb 01 2018 02:14
I don't know how many gitter users there are, but this room as 16,642 people in it according to the sidebar
Brad
@bradtaniguchi
Feb 01 2018 02:15
@gulsvi Hmm I cant find that number anywhere, but then Im on the desktop version. Do you know if it includes those offline too? Like 16k are in the room, but only a few are online ya know?
Gulsvi
@gulsvi
Feb 01 2018 02:16
@bradtaniguchi I'm in a browser. It includes everyone who has joined - doesn't distinguish between online/offline
Brad
@bradtaniguchi
Feb 01 2018 02:17
@gulsvi That would be my guess tho, Id assume most people are offline, but could be mentioned at least. Still a lot of people tho
CodePro3
@CodePro3
Feb 01 2018 03:16
Hi, Everyone!
christopher clarke
@chrisdclarke
Feb 01 2018 03:31
how do you get around the CORS bullshit in codepen. anyone?
use a proxy?
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 03:36
use their hack thingy?
Anyways can I get some feedback on my project? https://codepen.io/germangamboa95/full/GQgLBP/
It is a tool to convert inventory from its base units to a case amount since our system tracks it by base unit but we need to place purchases ect in case amounts.
* Just realized that the fact you have to click on the suggestion to select it is not UX friendly at all ;/
Heathercoraje
@Heathercoraje
Feb 01 2018 03:46
Good afternoon everyone, came back to channel with a question as usual : p
(function goGetThem() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var base = 'https://wind-bow.gomix.me/twitch-api/';
  var jsonp ='?callback=?';

  function makeUrl(type, user) { //type is either channels or streams
    return base + type + '/' + user + jsonp;
  }
  users.forEach(function (user) {
    let status;
    $.getJSON(makeUrl('streams', user), function (data) {
      if (Boolean(data.stream === null)) {
        status = 'offline';
      } else {
        status = 'online';
      }
    });
    $.getJSON(makeUrl('channels', user), function (data) {
      if (status === 'online') {
        console.log('online', user); // !!here I have 2 online users
        addData('#online');
        $('#icon').wrap(`<a href="${data.url}"></a>`).addClass('online');
        // !! this line only applied to first user and not the second
        // !! there there are 2 users with status = 'online'
      } else {
        addData('#offline');
      }
      addData('#all');

      // function declaration
      function addData (selector) {
        let info = (status === 'online')? data.display_name + ' <br> ' + data.status : data.display_name;
        $(selector).append(`<div class="item" id="item">
        <img class='logoImage rounded-circle' src=${data.logo}>
        <div><p class="detail">${info}</p>
        <i id="icon" class="fa fa-circle"></i></div>`);
      }
    });
  });
})();
As I left comments in code, I have 2 users with status value online, but this line below $('#icon').wrap().addClass('online');, is only applied to the first user but not the second user. Any help would be much appreciated!
Tom
@moT01
Feb 01 2018 03:53
there's timing/async issues there i think
your first json call will start executing (not finish) - and the second one will start
i think if you put the second one inside the first one it might work
Ken Haduch
@khaduch
Feb 01 2018 03:57
@Heathercoraje - I agree with Tom - the $.getJSON calls execute as quickly as possible, posting the request out to the site, but there is no guarantee what order the results of the request will be returned. You have to have some other method to synchronize those - waiting for the return from the first request to be handled before making the second request, for example.
Ken Haduch
@khaduch
Feb 01 2018 04:04
@moT01 - are you doing the javascript30? I started that some time ago, and I guess I let it drop.... I should go back to that, it was a nice set of lessons. The drums are cool!
Tom
@moT01
Feb 01 2018 04:05
yes i am
well, i started anyway
i want to add a way to loop a beat
Heathercoraje
@Heathercoraje
Feb 01 2018 04:11
@khaduch @moT01 Thank you I will try that out.
CamperBot
@camperbot
Feb 01 2018 04:11
heathercoraje sends brownie points to @khaduch and @mot01 :sparkles: :thumbsup: :sparkles:
:star2: 3706 | @khaduch |http://www.freecodecamp.org/khaduch
:cookie: 971 | @mot01 |http://www.freecodecamp.org/mot01
Heathercoraje
@Heathercoraje
Feb 01 2018 04:12
Now I came back to another question struggling from last night.
I put the second JSON inside the first
then I have 2 online user item that I want to append another tag
if (status === 'online') {
          console.log('online:' , user);
          addData('#online');
          $('.item').append('<p>hello world</p>');
        }
Then it puts 2 hello world to the first element.
I was trying another way to due to this problem, then I came back :smile:
I expect this would append p tag to each item not 2 to first item.
Tom
@moT01
Feb 01 2018 04:16
is there a question there or did you figure it out
Heathercoraje
@Heathercoraje
Feb 01 2018 04:16
Oh, no it actually does append to 2 items but the first element has 2 tags
Ken Haduch
@khaduch
Feb 01 2018 04:16
@Heathercoraje - I'm guessing that #online is an ID value? ID values have to be unique.. But I'm only guessing that because it looks like the syntax for an ID selector...
Heathercoraje
@Heathercoraje
Feb 01 2018 04:17
onLine is ID
uhm I think it is only one id value
I mean I have a value of variable, online..
Ken Haduch
@khaduch
Feb 01 2018 04:18
I guess I'd like to see more code. If you happen to use the ID of "online" in more than one place, I think that you'll have trouble doing various operations using that iD value?
Heathercoraje
@Heathercoraje
Feb 01 2018 04:18
(function goGetThem() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var base = 'https://wind-bow.gomix.me/twitch-api/';
  var jsonp ='?callback=?';

  function makeUrl(type, user) { //type is either channels or streams
    return base + type + '/' + user + jsonp;
  }
  users.forEach(function (user) {
    let status;
    $.getJSON(makeUrl('streams', user), function (data) {
      console.log(data);
      if (Boolean(data.stream === null)) {
        status = 'offline';
      } else {
        status = 'online';
      }
      $.getJSON(makeUrl('channels', user), function (data) {
        // console.log(status, user);
        if (status === 'online') {
          console.log('online:' , user);
          addData('#online');
          $('.item').append('<p>hello world</p>');
        } else {
          console.log('offine:' , user);
          addData('#offline');
        }

        addData('#all');
        // function declaration
        function addData (selector) {
          let info = (status === 'online')? data.display_name + ' <br> ' + data.status : data.display_name;
          $(selector).append(`<div class="item" id="item">
          <img class='logoImage rounded-circle' src=${data.logo}>
          <div><p class="detail">${info}</p>
          <i id="icon" class="fa fa-circle"></i></div>`);
        }

      });
    });
  });
})();
I believe there is only one ID value called online though there is a variable with value, online/offline
#online is from html div..
troubleshooting.png
first user has 2 p tags.
Ken Haduch
@khaduch
Feb 01 2018 04:24
oh - each element with the class item (you are referencing .item in your selector) :point_up: January 31, 2018 11:12 PM up there - every time you run that code, it will match each element that has the class .item, so if the item is there for the first append, it will get the data appended. Then after you append the second .item, when you run that selector, it will now be working on a list of two elements with the class item, so it will append to both of them. The result is that the first will now have two things appended to it, and the second (which didn't exist when the first was created) will only have one. That is what I think is going on there.
Also, in this line $(selector).append(\\<div class="item" id="item">\`` you are creating multiple elements with the ID value of "item", which is illegal. ID values have to be unique. (I said that above, too, not to be repetitive...)
Heathercoraje
@Heathercoraje
Feb 01 2018 04:26
Oh I get it.
I Just found something very weird.
Ken Haduch
@khaduch
Feb 01 2018 04:27
I cannot paste that code snippet with the backticks in it the right way, but you get the idea.
Heathercoraje
@Heathercoraje
Feb 01 2018 04:27
Can you have a look at this one?
Ken Haduch
@khaduch
Feb 01 2018 04:28
I"ll try
Heathercoraje
@Heathercoraje
Feb 01 2018 04:28
  if (status === 'online') {
          console.log('online:' , user);
          addData('#online');
          $('.item').wrap(`<a href='${data.url}'></a>`);
          } else {
          console.log('offine:' , user);
          addData('#offline');
        }
So I expect only online users will have a tag
But all/online/offline user all have a tags.
This is what I meant by it seems like this lf/else statment does not do anything.
Ken Haduch
@khaduch
Feb 01 2018 04:30
any element that has the class item will get the tag (I assume that you mean the anchor elements) when you run that line with $('.item').wrap( - that is a place where you would probably want to use an ID value, if you had unique ID values because that is the only way to reference a single element (again, assuming that classes are used in multiple places, and ID values should be unique.)
Heathercoraje
@Heathercoraje
Feb 01 2018 04:31
but then if (status === 'online')
is not being applied?
Ken Haduch
@khaduch
Feb 01 2018 04:33
status might be set in reference to the current user that you are processing, but $('.item') is going to reference any element that has that class, so if each user in the HTML DOM has the same class item, you cannot uniquely reference them just by the classname value. that selector will match any element with that classname and apply the same operation to all of them.
Heathercoraje
@Heathercoraje
Feb 01 2018 04:34
So if statment is not filtering any users for its status value..
it just seems a bit unnatural..
probably only to me haha
Ken Haduch
@khaduch
Feb 01 2018 04:36
@Heathercoraje - the if statement is checking the status that is currently set for the current user, but you have a common class value item that is set in multiple places. jQuery selectors will work with a list of elements that match the selector value, so any element with the same class value will have the operation performed as you specify. You have to find a way to single out the specific data for a user, the ID value is what you would want to use, you have to generate unique ID values for each user. Then you have a unique handle to refer to the current user.
Heathercoraje
@Heathercoraje
Feb 01 2018 04:38
I understand..
I am like begging my head for a day now about this..
How can I generate unique ID for each user?
Heathercoraje
@Heathercoraje
Feb 01 2018 04:44
@khaduch
(function goGetThem() {
  var users = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
  var base = 'https://wind-bow.gomix.me/twitch-api/';
  var jsonp ='?callback=?';

  function makeUrl(type, user) { //type is either channels or streams
    return base + type + '/' + user + jsonp;
  }
  users.forEach(function (user) {
    let status;
    $.getJSON(makeUrl('streams', user), function (data) {
      console.log(data);
      if (Boolean(data.stream === null)) {
        status = 'offline';
      } else {
        status = 'online';
      }
      $.getJSON(makeUrl('channels', user), function (data) {
        if (status === 'online') {
          addData('#online');
        } else {
          addData('#offline');
        }
        addData('#all');

        // function declaration
        function addData (selector) {
          let info = (status === 'online')? data.display_name + ' <br> ' + data.status : data.display_name;
          if (status === 'online' ) {
            $(selector).append(`<div class="item">
            <img class='logoImage rounded-circle' src=${data.logo}>
            <div><p class="detail">${info}</p>
            <a href=${data.url} target="_blank"><i class="fa fa-circle"></i></a></div>`);
          }
          else {
            $(selector).append(`<div class="item">
            <img class='logoImage rounded-circle' src=${data.logo}>
            <div><p class="detail">${info}</p>`);
          }
          return
        };
      });
    });
  });
})();
Claudio Restifo
@Marmiz
Feb 01 2018 04:44

@Heathercoraje you can simply pass it as a second argument to your addData function:
addData(selector, id)

addData('#online', itemID)

itemId can be user for instance
Ken Haduch
@khaduch
Feb 01 2018 04:45
@Heathercoraje - https://api.jquery.com/class-selector/ to read about the class selector
how to generate unique ID values - I have used a technique like having a base name and keeping a count variable, and as you process each user, you generate values like user1, user2, etc. The value would be stored in a variable that you use to reference that ID as you are processing the individual user. You could use another technique like using the user's username as the ID, you would have to make sure that it didn't have any invalid syntax for the ID. It depends on how you are going to use the elements in the DOM that represent the user. If you are doing a one-time setup when you get the status, just creating a unique name that you use on the fly as you're receiving the data will work. If you want to go back and access the individual user information later on, then you have to have some way to either regenerate the ID value (which is where the username would be a handy method) or remember the association between a username and their unique ID.
Heathercoraje
@Heathercoraje
Feb 01 2018 04:45
I changed the function itself..
Oh so use variable as id.
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 04:48
@Heathercoraje are you losing value of status? I'd assume that is what you're having issues with?
If so, move that let status declaration inside your first $.getJSON
Heathercoraje
@Heathercoraje
Feb 01 2018 04:49
I think value of status is intact.
I am appending tags to items with same class name..
Matthew Wilson
@matthew3wilson
Feb 01 2018 04:50

I'm experimenting to try and understand how CSS pseudo-elements function. I expected the following code to add a vertical line to the left of my blockquote, but it does not. The code is below, or you can view it on CodePen. My question is, why doesn't it add a vertical line?

HTML:

<body>
    <h1>Playing with CSS Pseudo-Elements</h1>
    <p>Lorem ipsum dolor sit amet...</p>
    <section id="vs-blockquote">
        <blockquote cite="#">Lorem ipsum dolor sit amet...</blockquote>
    </section>
</body>

CSS:

#vs-blockquote {
    position: relative;
    padding: 2em 0;
    margin-top: 2em;
    margin-bottom: 2em;
    border-color: black;
    border-width: 4px;
}

#vs-blockquote::before {
    content: '';
    position: absolute;
    top: 0;
    left; 18px;
    height: 100%;
    width: 4x;
    color: black;
}

I originally worked through this example
of a vertical timeline and was experimenting with other ways to apply the ::before pseudo-element.

Any help on this is much appreciated.

Sweet Coding :)
@SweetCodingInc
Feb 01 2018 04:52
@Heathercoraje Okay... now I have better understanding of the code.. what issue are you facing again?
Heathercoraje
@Heathercoraje
Feb 01 2018 04:54
I am trying to generate unique id for each user so I can specify which item to give attribute to.
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 04:54
You should not.
Id's are unreliable and hard to maintain over time
alright. so what attribute you want to give to what elements? and under what condition?
Ken Haduch
@khaduch
Feb 01 2018 04:59
@matthew3wilson - I added this border-left:10px solid #ccc; to your CSS rule with ::before as part of it, and it puts a bar there. I did that after a quick peek at https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
@matthew3wilson - are you missing some JS code in your CodePen? You are trying to load a main.js, but of course that won't work - if that has any code in it that you need you should paste it into the JS panel. Only saying that because that link you referenced mentions some jquery code...
Matthew Wilson
@matthew3wilson
Feb 01 2018 05:07
@khaduch No, that was just part of VSCode's autocomplete for <!DOCTYPE html>. Thank you for the help. I'm still perplexed as why my version doesn't create a line, when the code from the Visual Timeline example did. I've worked through all the HTML and CSS from the example to try and understand it. I thought I did. It's for the FCC Tribute Page.
CamperBot
@camperbot
Feb 01 2018 05:07
matthew3wilson sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3707 | @khaduch |http://www.freecodecamp.org/khaduch
Ken Haduch
@khaduch
Feb 01 2018 05:23
@matthew3wilson - you did have a couple typos in your CSS - run that "Analyze CSS" from the CSS tab dropdown. It didn't fix anything but it wouldn't be helping...
@matthew3wilson - ah - here it is. Fix those typoes that I mentioned, and then add background: red; to your CSS with the ::before and that makes a bar appear. You are trying to use color: black to make the bar, and I think your example used background.
@SweetCodingInc - re: :point_up: January 31, 2018 11:54 PM - I'm curious about what you are saying here?
Matthew Wilson
@matthew3wilson
Feb 01 2018 05:29
@khaduch Thank you! I really appreciate the help.
CamperBot
@camperbot
Feb 01 2018 05:29
matthew3wilson sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
api offline
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 05:29
@khaduch I'll add some code example...
in general, Ids are not required...
it becomes pain in the ass over time to manage them
you create a list of elements with Ids, and then lets say you delete some of those elements...
how do you track which elements are left?
and what if you wanna add new elements, in that case how do you make sure you're not repeating any id?
anish000kumar
@anish000kumar
Feb 01 2018 06:18
@anish000kumar
sharing redux-box, for expressive and clean state management with redux and redux-saga: redux-box redux-box Repo: https://github.com/anish000kumar/redux-box
Do star :star2: the repo if it helps :smile:
Claudio Restifo
@Marmiz
Feb 01 2018 06:54
@anish000kumar how well it plays with async importing and chunk splitting?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 07:40
@gulsvi I'll try that, thank you very much :)
CamperBot
@camperbot
Feb 01 2018 07:40
muhammedkarim sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2579 | @gulsvi |http://www.freecodecamp.org/gulsvi
anish000kumar
@anish000kumar
Feb 01 2018 07:53
@Marmiz it uses redux-saga under the hood, so you can use everything saga has to offer, but with much lesser noise.
the snippet above shows such a saga
@MuhammedKarim awesome!
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 07:54
@anish000kumar It worked! But there's another issue now :(
I'll try to work it out myself though
anish000kumar
@anish000kumar
Feb 01 2018 07:54
let me know , would be glad to help :)
@MuhammedKarim
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 07:55
@anish000kumar I'll try to work it out myself, if not, then I'll let you know :)
anish000kumar
@anish000kumar
Feb 01 2018 07:55
cool!
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 08:16
Anyone got a few minutes to spare?
Markus Kiili
@Masd925
Feb 01 2018 08:16
@MuhammedKarim If you have a question, just post it here. Usually someone helps.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 08:22
Great :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 08:38
Guys I have my interview in an hour can anyone give me any advice please!
anish000kumar
@anish000kumar
Feb 01 2018 09:05
keep your projects (live) and open source contributions handy! they help more than you can expect!
Marianissimus
@Marianissimus
Feb 01 2018 09:28
hey. does anybody here use Emmet LiveStyle for Sublime 2?
SzymonKwasek
@SzymonKwasek
Feb 01 2018 09:28
hey guys, can you help me ? I need this list to stick in the center of the page when I resize the window, can anyone help me ? https://codepen.io/Ejsit/pen/OQyymW
LydaTech
@lydatech
Feb 01 2018 09:39
@SzymonKwasek too many divs lol
SzymonKwasek
@SzymonKwasek
Feb 01 2018 09:40
What do you mean ?
LydaTech
@lydatech
Feb 01 2018 09:40
you dont need all those divs
and youre using floats with flex
SzymonKwasek
@SzymonKwasek
Feb 01 2018 09:45
Well I coudnt figure it out how to make this w/o all those divs
and make the ellipsis works fine
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 01 2018 09:46
could you help me , please ?
LydaTech
@lydatech
Feb 01 2018 09:47
<ul class="myList">
  <li>Short Text<span>Is short</span></li>
  <li>A little bit longer text<span>Is longer</span></li>
  <li>Also a little bit longer<span>Yes it is</span></li>
  <li>A long text is here, totally for no reason<span>Is long</span></li>
  <li>A long text is here also, for the same reason<span>Is long too!</span></li>
  <li>OK<span>OK</span></li>
</ul>
@SzymonKwasek thats the structure
SzymonKwasek
@SzymonKwasek
Feb 01 2018 09:47
ok.
I will try
brb
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 01 2018 09:48
I don't understand why web worker doesn't by google chrome ?!
SzymonKwasek
@SzymonKwasek
Feb 01 2018 09:48
btw this float right there can be removed, I just forgot to do it, mb
Ali Bulut
@ali27001
Feb 01 2018 10:01
how to access variables in another function #javascirpt
@ali27001 I don't think you can, unless the function has access to the other function's scope
LydaTech
@lydatech
Feb 01 2018 10:09
@ali27001 access variables in one fuction from another?
Markus Kiili
@Masd925
Feb 01 2018 10:11
@ali27001 You can pass values using a function call, or functions can use variables declared on outer scope.
JS has function scope, so a function cannot access a variable declared inside another function.
Ali Bulut
@ali27001
Feb 01 2018 10:21
https://codepen.io/alibulut/pen/OQPmdp?editors=1010 I want to share tweet.but I do not have a variable
h1tag
@h1tag
Feb 01 2018 10:27
@ali27001 a variable for what?
Ali Bulut
@ali27001
Feb 01 2018 10:33
@h1tag var text = "deneme"; I will change text=RandomQuote.Quote; need to be
I want to share tweet briefly
h1tag
@h1tag
Feb 01 2018 10:34
@ali27001 you are already storing that value in a global variable quoteDisplay, you can use that variable instead
Ali Bulut
@ali27001
Feb 01 2018 10:38
I understand. I can not use the RandomQuote.Quote variable because I'm assigning
I can not use it because I give it new value . is it true?
h1tag
@h1tag
Feb 01 2018 10:39
you can, why not?
h1tag
@h1tag
Feb 01 2018 11:00
var text = quoteDisplay; @ali27001
Ali Bulut
@ali27001
Feb 01 2018 11:13
@h1tag it is becoming undefined. var text = quoteDisplay.textContent; it works
abyshukla
@abyshukla
Feb 01 2018 11:24
Hello everyone. If you can, please review my pen on quote generator
https://codepen.io/aby_shukla/full/aqOepN
Stephen James
@sjames1958gm
Feb 01 2018 11:38
@abyshukla I like the look, however the twitter button does not work.
abyshukla
@abyshukla
Feb 01 2018 12:07
ohhh. Sorry. I haven't coded it yet. Thanks for pointing out @sjames1958gm
CamperBot
@camperbot
Feb 01 2018 12:07
abyshukla sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8924 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 01 2018 12:34
;+1:
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 13:30
@abyshukla usability wise, if you could move those pink buttons from bottom to top, it would be better
because the position those buttons keeps changing depending on content size
abyshukla
@abyshukla
Feb 01 2018 13:33
hmmm. not a bad idea. The buttons would remain static. But won't the pointer/touch obstruct the viewing?
Keegan
@Keggatron
Feb 01 2018 14:15
Hi guys, I'm having an issue with my React app. I'm relatively new to React/Redux so I'm not entirely sure of what I'm doing. Anyway I have a component that is getting props from a reducer, however I'm unable to call those props from outside of the render function. Does this make any sense? Does anyone know what may be the cause of that?
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:16
@Keggatron can I see the code?
Keegan
@Keggatron
Feb 01 2018 14:18
class ProductNew extends Component {
  renderProductField(field) {
    const { meta: { touched, error} } = field
    const className = `form-group ${touched && error ? 'has-danger' : ''}`

    return (
      <div className={className}>
        <label>{field.label}</label>
        <input 
          className="form-control"
          type="text"
          {...field.input}
        />
        <div className="text-help">
          {touched ? error : ''} 
        </div>
      </div>  
    );
  }

  onSubmit(values) {
    console.log(values);
  }

  render() {
    const { handleSubmit } = this.props;


    return (
       <div>{console.log(this.props.product)}</div>
)
}
function mapStateToProps({ newProduct }, ownProps) {
  return { product: newProduct[0][0] };
}

export default reduxForm({
  validate,
  form: 'ProductNewForm'
})(
  connect(mapStateToProps, { barcodeSearch })(ProductNew)
);
I cut out some stuff that isn't quite relevant
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 14:19
@Keggatron You're missing constructor.. add
constructor(props){
  super(props);
}
Keegan
@Keggatron
Feb 01 2018 14:19
like the fields and validate
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 14:19
@Keggatron you got codepen or something?
Keegan
@Keggatron
Feb 01 2018 14:19
I've tried that, then tried loggin this.props from there
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:19
there's no need for constructor if he is using what I think he does
create-react-app?
Keegan
@Keggatron
Feb 01 2018 14:20
this is on C9 if you wanted to visit my workspace
yeah it's create-react-app
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 14:20
@Keggatron share the link
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:20
then there's no need for the constructor since there's a plugin that does a thing that I can't remember the naem at the moment but well :D
Keegan
@Keggatron
Feb 01 2018 14:20
it's in the store/client directory
sorry this specific file is store/client/src/components/product-new.js
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:21
what's barcodeSearch ?
Keegan
@Keggatron
Feb 01 2018 14:22
so the app is taking a barcode number then searching my database, if it's not in there it's then searching the UPCitemdb.com api for the product
my intent is that when it's found it should populate the fields with the found info
and hopefully one day expand on this by creating a mobile app where one can pull the barcode info from a scan on your phone
I took Stephen Grider's course on react-redux and I've been trying to somewhat simulate that, I'm not sure if it's a mess or what?
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:27
so you are saying that you can access this.props.value inside of the render but on the class outside of the render you can't?
Keegan
@Keggatron
Feb 01 2018 14:27
that's right
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:28
oh wait you are trying to call actions that you created?
or just accessign the redux state?
Keegan
@Keggatron
Feb 01 2018 14:28
like when I uncomment that div withthe console log for the props.product the product details then show up in the browser console when I run it
however when I try to put that in the renderProductField function I get an error saying cannot read property of undefined
or something along those lines
basically what I want to do is populate my form fields with the info that comes back from either my db or the API call to the url
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:30
where you call renderProductField with the values?
Keegan
@Keggatron
Feb 01 2018 14:30
yes
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:30
I can't see the call I mean :D
Keegan
@Keggatron
Feb 01 2018 14:30
oh
<Field
            label="Name of Product"
            name="name"
            component={this.renderProductField}
          />
these were in the render function, I just shortened it because there's about 8 of them
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:34
well the function is expecting a value as parameter no?
 renderProductField(field) {
Keegan
@Keggatron
Feb 01 2018 14:34
well I basically just ripped that right out of one of Grider's projects
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:35
can I see his project somewhere?github or something?the one you are mentioning
to get an idea of what might be the difference
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 14:35
@Keggatron try component={this.renderProductField.bind(null, this.props)}
iziz040501
@iziz040501
Feb 01 2018 14:37
angular/angular#17572

ExpressionChangedAfterItHasBeenCheckedError I googled and found the setTimeout solution

Hi,

  • I am facing the below two errors after I upgrade from angular 2.4 to 5.
  • to fix the error ExpressionChangedAfterItHasBeenCheckedError I googled and found the setTimeout solution in this link angular/angular#17572
  • but still I am facing the below errors and an extra error is coming while compiling.
  • I did following code change
  • can you tell me how to fix it
  • whole code I am providing in this link https://hastebin.com/josafayada.http

code changes

this.SPORTSService.getResponse(vals, 'get', window.sessionStorage.getItem("Runningid"))
                .subscribe(data => 
                                setTimeout(
                                            () =>            {
                                                                window.sessionStorage.setItem("nailPrivilege", "");
                                                                window.sessionStorage.setItem("nailPrivilege", JSON.stringify(data));
                                                                this.progress.requestEnd();
                                                                that.router.navigate(['/BallPlayer/BallMain', 'BallCreate']);
                                                            },
                                                            err => {
                                                                this.progress.requestEnd();
                                                            },
                                            0);
                        );
            //},2500);

error


ERROR in [at-loader] ./app/components/Ball/Ball-search.ts:454:7
    TS1128: Declaration or statement expected.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: null'.
    at viewDebugError (core.js:9977)
    at expressionChangedAfterItHasBeenCheckedError (core.js:9955)
    at checkBindingNoChanges (core.js:10122)
    at checkNoChangesNodeInline (core.js:14170)
    at checkNoChangesNode (core.js:14144)
    at debugCheckNoChangesNode (core.js:14973)
    at debugCheckDirectivesFn (core.js:14875)
    at Object.View_BallsHeader_0._co [as updateDirectives] (BallsHeader.ngfactory.js:291)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:14857)
    at checkNoChangesView (core.js:13982


ERROR TypeError: Converting circular structure to JSON
    at JSON.stringify (<anonymous>)
    at console.window.console.error (<anonymous>:36:101)
    at Object.View_BallsHeader_0 (BallsHeader.ngfactory.js:270)
    at Object.proxyClass [as factory] (compiler.js:14873)
    at DebugContext_.logError (core.js:15198)
    at ErrorHandler.handleError (core.js:1720)
    at eval (core.js:6117)
    at ZoneDelegate.invoke (zone.js:192)
    at Zone.run (zone.js:85)
    at NgZone.runOutsideAngular (core.js:4900)
Sweet Coding :)
@SweetCodingInc
Feb 01 2018 14:39
@iziz040501 : This is what's causing problem JSON.stringify(data)
try doing JSON.stringify(data.data) instead
I'm assuming you're using Http from from @angular/http
If you're using HttpClient from @angular/common/http then that data.data redirection is not required
Keegan
@Keggatron
Feb 01 2018 14:41
@SweetCodingInc I'm still getting a Uncaught TypeError: Cannot read property 'props' of null error
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:52
sorry im finding it quite confusing tbh
Keegan
@Keggatron
Feb 01 2018 14:52
so am I
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:52
explai nme quick what's the main idea and I will point a away of doing or trying to
Keegan
@Keggatron
Feb 01 2018 14:52
his main idea or mine?
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:52
your's
Keegan
@Keggatron
Feb 01 2018 14:52
Ok
so basically it starts with a barcode search
that search first searches in my database, if there's nothing there matching the UPC it will search the UPCitemdb.com for the UPC and bring back that information
that information is then in my render function as props.product
I want to be able to load my redux form up with the info that comes back into props.product
so like the name of the product should populate my product-new form with the name of the product coming back from the UPC call
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:55
oh ok got it!
Keegan
@Keggatron
Feb 01 2018 14:55
I thought of it as basically an easy way for small online busy owners to have an inventory system
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:55
yes and the idea is simple, you have a input that make a search right?
Keegan
@Keggatron
Feb 01 2018 14:56
however I still would have to implement a barcode scanner via mobile app somehow. But that's down the road
yes
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:56
after making that search you have a call into your db if the db doesnt return anything you acess the api you mnetnioned right?
Keegan
@Keggatron
Feb 01 2018 14:56
yes
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:56
this part is working so far?
Keegan
@Keggatron
Feb 01 2018 14:56
yes
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:57
after the search do you list the item or you send the user to the form with the data?
Keegan
@Keggatron
Feb 01 2018 14:57
I just need to figure out how to populate the new product form fields witht he info coming back
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:57
yes we will get there just need to understand what you have allreadyt
Keegan
@Keggatron
Feb 01 2018 14:57
one second
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:57
once you get the item from the db/api do you store it on the reduxState?
Keegan
@Keggatron
Feb 01 2018 14:58
yes
I'll show you what I have just give me a second
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 14:58
well then when you click the item you have to pass some url query params or something similiar
then on the form you check if it exists
Keegan
@Keggatron
Feb 01 2018 14:59
and search 883974958450
with your console open
that's the info I get back as props.product in my product-new render function
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:00
this is looking quite confusing tbh :D, first things first, update the code so I can see the data that comes from the api back as a console log if possible
Keegan
@Keggatron
Feb 01 2018 15:00
that's what I showed you
I've console.logged the props.product
that object that comes back is the data
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:02
image.png
Keegan
@Keggatron
Feb 01 2018 15:04
this is what I get back
{images: Array(1), _id: "5a725a4033c7b60bbb6de4d7", name: "Toshiba Portege Z830-s8301 13.3" 128gb Ssd Intel Core I5-2557m 1.7ghz 4gb Win7", description: "For those seeking supreme portability and styling,…inking they're light on power too. Unlike othe...", quantity: 20, …}brand: "Toshiba"category: "electronics"description: "For those seeking supreme portability and styling, plus the benefits of the latest technologies and performance, there's our Portege family. These models feature ultra-thin, super-light, durable and reliable laptops with amazingly long battery life - ideal for mobile professionals and executives - which help them go through their entire day effortlessly and worry-free. No-compromise performanceDon't let the sleek and light design of Portege laptops leave you thinking they're light on power too. Unlike othe..."images: ["http://img1.r10.io/PIC/52275560/0/1/250/52275560.jpg"]name: "Toshiba Portege Z830-s8301 13.3" 128gb Ssd Intel Core I5-2557m 1.7ghz 4gb Win7"price: "249.99"quantity: 20upc: "883974958450"__v: 0_id: "5a725a4033c7b60bbb6de4d7"__proto__: Object
sorry that's a mess
I'm not sure how to attach an image
I can't seem to copy/paste one in here
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:04
keeps returning undefined
ok will try to make it easier
so the form will be possible to update right?
Keegan
@Keggatron
Feb 01 2018 15:05
yes
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:06
my idea would be pass as a prop to the component the response that comes back from the data then on the component define the state on the state check for the props values and set them based on what you sended
then fill the input values and others using the values that were stored on the state
later on dispatch the action with this values to add them to the list
if you could send me the code that runs on that search that you sent me a few minutes ago maybe I can help a bit more
Keegan
@Keggatron
Feb 01 2018 15:07
OK you should be able to view it at: https://ide.c9.io/keggatron1/projects
then it is in store/client/src/components/product-new.js
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:08
this forces me to have a c9 acc and to have it a I need a credit card :\
join the javascript room there's more people around maybe will be easier to have someone else help aswell
Keegan
@Keggatron
Feb 01 2018 15:10
Sorry I thoguht you were able to view it without an account
iziz040501
@iziz040501
Feb 01 2018 15:13
@SweetCodingInc hey still same error...any idea how to fix it :(
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:14
@Keggatron maybe upload it to github :D
Keegan
@Keggatron
Feb 01 2018 15:14
k give me a minute
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:20
hum I dont see any big mistake at all, if you dont mind join https://gitter.im/FreeCodeCamp/HelpJavaScript and ask there Im at work once I get a bit more of free time or once I get home I will clone the project
Keegan
@Keggatron
Feb 01 2018 15:21
thanks a lot @tiagocorreiaalmeida I've got to get to work as well but I will ask again in the JS room when I get some free time
CamperBot
@camperbot
Feb 01 2018 15:21
keggatron sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Feb 01 2018 15:31
and sorry for not being a big help
Jorge
@OrangeKulture
Feb 01 2018 17:22
hey whats up guys
Aaron
@Ilovetaccos
Feb 01 2018 17:23
not much how are you
Jorge
@OrangeKulture
Feb 01 2018 17:23
all good here thanks
jenseo
@jenseo
Feb 01 2018 17:23
Hi guys, I just started the "Build a tribute page" challenge, but I don't understand the instructions about "User story", e.g: "User Story: I can view a tribute page with an image and text."
Probably really simple, but can someone explain to me what that means?
Aaron
@Ilovetaccos
Feb 01 2018 17:23
the user story is basically just the persons story
whos your tribute page to?
jenseo
@jenseo
Feb 01 2018 17:24
Haven't started yet, so haven't decided :)
Aaron
@Ilovetaccos
Feb 01 2018 17:24
heh so whoever you do thats where you put their short/long story
jenseo
@jenseo
Feb 01 2018 17:24
Ah, so you could say that the person visiting the codepen should be able to do the story?
Since it says, "User Story: I can click on a link that will take me to an external website with further information on the topic."
Ah, now I get it! The end user!
Aaron
@Ilovetaccos
Feb 01 2018 17:25
yeah, i just did that yesterday
jenseo
@jenseo
Feb 01 2018 17:25
Thanks @Ilovetaccos
CamperBot
@camperbot
Feb 01 2018 17:25
jenseo sends brownie points to @ilovetaccos :sparkles: :thumbsup: :sparkles:
:cookie: 174 | @ilovetaccos |http://www.freecodecamp.org/ilovetaccos
Aaron
@Ilovetaccos
Feb 01 2018 17:25
it was interesting
jenseo
@jenseo
Feb 01 2018 17:26
Cool
Yeah, looks nice
Aaron
@Ilovetaccos
Feb 01 2018 17:26
brownie points....
Aaron
@Ilovetaccos
Feb 01 2018 17:36
"Use Bracket Notation to Find the NthtoLast Character in a String"
i need some help
how do i.. just like... how
glandon22
@glandon22
Feb 01 2018 17:38
u familiar with bracket notation?
Aaron
@Ilovetaccos
Feb 01 2018 17:38
yeah
but its like.. ugh
glandon22
@glandon22
Feb 01 2018 17:38
just think about the string's length property and how u can use that with bracket notation
Aaron
@Ilovetaccos
Feb 01 2018 17:39

...
glandon22
@glandon22
Feb 01 2018 17:39
can u send me a link to the challenge?
thanks @glandon22 btw
CamperBot
@camperbot
Feb 01 2018 17:40
ilovetaccos sends brownie points to @glandon22 :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @glandon22 |http://www.freecodecamp.org/glandon22
Aaron
@Ilovetaccos
Feb 01 2018 17:40
:poop:

// Example
var firstName = "Ada";
var thirdToLastLetterOfFirstName = firstName[firstName.length - 3];

// Setup
var lastName = "Lovelace";

// Only change code below this line
var secondToLastLetterOfLastName = [lastName.length];

glandon22
@glandon22
Feb 01 2018 17:41
what letter did your piece of code return?
Aaron
@Ilovetaccos
Feb 01 2018 17:41
[8]..
glandon22
@glandon22
Feb 01 2018 17:42
aight
so you want the letter in the 5th place of the string
bc you start counting at 0
Aaron
@Ilovetaccos
Feb 01 2018 17:43
mmhhmmmmmm
glandon22
@glandon22
Feb 01 2018 17:43
so u gotta manipulate the lastName.length to give u the value u want
make more sense?
Aaron
@Ilovetaccos
Feb 01 2018 17:44
yeah so i did
glandon22
@glandon22
Feb 01 2018 17:44
and wahtd u get?
Aaron
@Ilovetaccos
Feb 01 2018 17:45
gotcha thanks i dids it
it worked cya!!!!!
i appreciate it!!!
glandon22
@glandon22
Feb 01 2018 17:45
cool
Jorge
@OrangeKulture
Feb 01 2018 18:06
.....
now i want some tacos
this is not cool at all
Aaron
@Ilovetaccos
Feb 01 2018 18:50
lol sorry about that
i was making a user name for something at one point and i was really hungry for tacos and basically named myself Ilovetaccos
alpox
@alpox
Feb 01 2018 18:58
@Ilovetaccos That must have a big hunger
Meenakshi Salwan
@salwanmeenakshi
Feb 01 2018 20:18
can someone tell me process of creating a web app
1) create UI ux designs
2)create user stories
3)create front end
4)think about mongodb models and what models you need
5)create backend
5)complete all the user stories
does this sound ok?
Mark Kubik
@KUBIX90
Feb 01 2018 20:24
Hi, I'm having trouble with moving the API data out of the success block and making a global variable with the data, so it can then be used in the web app without making unnecessary API calls. Trying to use it when I click on the online/offline buttons, but can't seem to move the data tot the global scope, can someone help me out?
Nate Mallison
@NJM8
Feb 01 2018 20:25
Also don't forget a few days to decide what editor to use, what framework to use, what chair to buy, what the best headphones are. :smile:
Mark Kubik
@KUBIX90
Feb 01 2018 20:25
Lines 8 - 21 and 52 - 64 are the bits in question I think
Meenakshi Salwan
@salwanmeenakshi
Feb 01 2018 20:26
lol
@NJM8 recommend me a good chair
that one isn't recommended for productivity though :)
Meenakshi Salwan
@salwanmeenakshi
Feb 01 2018 20:28
lol
thats out of my budget as well
@NJM8
Nate Mallison
@NJM8
Feb 01 2018 20:33
@KUBIX90 you need to use a callback to do the work after the api makes a successfull call
Mark Kubik
@KUBIX90
Feb 01 2018 20:34
@NJM8 Yeah that's what I'm trying to do, but not sure what I'm doing wrong
Nate Mallison
@NJM8
Feb 01 2018 20:34
So wrap the work you want to do in a function, then call that function passing your api data in after the ajax call is successful
Mark Kubik
@KUBIX90
Feb 01 2018 20:34
var twitchData;

function showData(dataAPI){
    for (var i; user.length < i; i++){
        $.get(twitchStream + user[i], function(data){
            dataAPI(data);
        });
    }
}

showData(function(data){
    console.log(data);
    twitchData=data;
})
Mark Kubik
@KUBIX90
Feb 01 2018 20:42
I've got this but it's not working
Nate Mallison
@NJM8
Feb 01 2018 20:42
ok I see what you are doing, sorry i got confused for a second there. You want to make an api call for each user, then display their data correct?
so looping through the names to make each api call with that name
Mark Kubik
@KUBIX90
Feb 01 2018 20:46
Yeah I want to make an API call for all the users, save that as a global variable, so it can then be used elsewhere in other functions without having to make any extra API calls. The console.log () is just for me to see if it's working. My var twitchData is coming back as undefined when i use it in the other functions, which are on lines 52 - 64 on the codepen
Nate Mallison
@NJM8
Feb 01 2018 20:47
whats the end goal? only show who is online and offline?
Mark Kubik
@KUBIX90
Feb 01 2018 20:47
Yeah
I've done it by making separate calls to the API on click, but it creates a really annoying refresh of all the channels before filtering
Nate Mallison
@NJM8
Feb 01 2018 20:48
won't each api call overwrite the previous twitchData?
So you'll need an individual place to store the data from each call. like:
```
let onOffStatus = {};
oops
Mark Kubik
@KUBIX90
Feb 01 2018 20:50
Maybe, I'm not sure, I'm a bit confused about it all tbh
Nate Mallison
@NJM8
Feb 01 2018 20:51
let onOffStatus = {};

showData(user, data){
onOffStatus[user] = data;
}
Mark Kubik
@KUBIX90
Feb 01 2018 20:52
Would I need to store each call in an array
Nate Mallison
@NJM8
Feb 01 2018 20:52
use an object to store the status of each call as {user: status}
also just found another thing, in your callback you are calling dataApi but that isn't a defined function.
mak
@iamaamir
Feb 01 2018 20:55
image.png
hey guys can anybody help to create this kind of tabs
Nate Mallison
@NJM8
Feb 01 2018 20:56
@KUBIX90 try this

function showData(dataAPI){
  for (var i; user.length < i; i++){
    $.get(twitchChannel + user[i], function(data){
      storeData(user[i], data);
    });
  }
}

function storeData(user, status){
  twitchData[user] = status;
  console.log(twitchData);
}
and make var twitchData = {};
Gulsvi
@gulsvi
Feb 01 2018 20:57
@KUBIX90 Once you have all the data written to the page after your API calls, can't you use CSS to show/hide individual users?
Storing everything in a variable can be problematic because the API calls are async, and you'll have to make sure they have all finished before trying to access the data in your variable
Nate Mallison
@NJM8
Feb 01 2018 20:59
@KUBIX90 Here is the whole thing
var twitchData = {};

function showData(){
  for (var i; user.length < i; i++){
    $.get(twitchChannel + user[i], function(data){
      storeData(user[i], data);
    });
  }
}

function storeData(user, status){
  twitchData[user] = status;
  console.log(twitchData);
}

showData();
I think before the design you had was passing in a function to use as a callback, instead of just calling an outside function. I'm not sure if both methods are viable but I've read the calling an outside function should work.
You can also use async/await, although I haven't used it with jQuery. check out the function Promise.all.
In terms of making sure the calls are done you could do a check with the outer function and if you have as many results as calls enable the buttons, of course disable them at first.
Gulsvi
@gulsvi
Feb 01 2018 21:03
I think it's a better approach to assign a class name to each user's <div> that says whether or not they are offline/online/. Then you just show/hide based on which button you click:
$('#offline-filter-button').click(function() {
  $('.online').hide();
  $('.offline').show();
});

$('#online-filter-button').click(function() {
  $('.online').show();
  $('.offline').hide();
});

$('#showAll-filter-button').click(function() {
  $('.online, .offline').show();
});
Mark Kubik
@KUBIX90
Feb 01 2018 21:04
@gulsvi I would use CSS to show and remove the elements, but I need access to the data first to do it
Nate Mallison
@NJM8
Feb 01 2018 21:04
Good idea!
Gulsvi
@gulsvi
Feb 01 2018 21:04
Otherwise, you're writing data to the page over and over every time you click the filter button
@KUBIX90 You write the data to the page when you first call the API. Then the filter buttons just show/hide that data after it is already there (if that makes sense)
Nate Mallison
@NJM8
Feb 01 2018 21:07
@gulsvi clever
Gulsvi
@gulsvi
Feb 01 2018 21:07
Thanks :) @NJM8
CamperBot
@camperbot
Feb 01 2018 21:07
gulsvi sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @njm8 |http://www.freecodecamp.org/njm8
Mark Kubik
@KUBIX90
Feb 01 2018 21:09
@gulsvi Hmmm i think I see what you mean,
So just add a specific CSS class to the online & offline channels off the back of the original API calls, and then just filter them out on click, no need for any calls?
Mark Kubik
@KUBIX90
Feb 01 2018 21:18
Think I've got it, going to give it a go now
Mark Kubik
@KUBIX90
Feb 01 2018 21:27
It works on the first click, but I'm getting nothing after
Mark Kubik
@KUBIX90
Feb 01 2018 21:48
@gulsvi @NJM8 Got it working, thanks for your help both!!
CamperBot
@camperbot
Feb 01 2018 21:48
kubix90 sends brownie points to @gulsvi and @njm8 :sparkles: :thumbsup: :sparkles:
:star2: 2580 | @gulsvi |http://www.freecodecamp.org/gulsvi
:cookie: 291 | @njm8 |http://www.freecodecamp.org/njm8
Gulsvi
@gulsvi
Feb 01 2018 21:48
Congrats @KUBIX90 :)
Mark Kubik
@KUBIX90
Feb 01 2018 21:49
Finally done all the intermediate projects, taken me ages!
Gulsvi
@gulsvi
Feb 01 2018 21:49
Filtering by class name was the way I did mine: https://s.codepen.io/gulsvi/pen/prrOvy?editors=0010
Mark Kubik
@KUBIX90
Feb 01 2018 21:53
Nice
Got too preoccupied with API calls etc, when it's actually simpler than I thought
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 22:03
German is back! Hey guys!
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 22:18
Could anyone advise me on any small project i could make with HTML, CSS and JS?
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 22:19
@MuhammedKarim currency converter or one that aggregates prices of current crypto coins into one site.
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 22:20
Currency convertor sounds good. Does it require a lot of JS? It's not exactly my strong point... @germangamboa95
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 22:21
depends on how complex you make it. But the best thing is to go for it. It will be a good learning experience.
If you need help you can always ask
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 22:25
Ok sure I'll give it a shot
I learnt the three languages on w3schools but relearning them on FCC now
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 22:26
@MuhammedKarim modern javascript by brad taversty is a pretty good course
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 22:30
Do you have a link for it by any chance?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 22:32
Oh... Udemy :(
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 22:34
He has a youtube. He is an awesome teacher. Here is the link for his youtube javascript crash course https://www.youtube.com/watch?v=vEROU2XtPR8&t=1818s
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 01 2018 22:43
Love it :) Bookmarked. Thank you soo much bro
Helin
@Hkuuskla
Feb 01 2018 23:00
Can anyone help me with Angular and typescript? I'm making my first program ever with Angular and typescript. I need to filter out unique objects from array and display alphabetical order
export class ContactListService {
  selected: any;
  companyList = [];


  constructor() { }

  getContacts(): Contact[] {
    return CONTACTS;
  }

  getCompanies(): Contact[] {
    return this.companyList
    .filter((company: Contact) => {
      return company.company === this.selected.company;
    });
  }
}
export class Contact {
    id: number;
    company: string;
    country: string;
    city: string;
    address: string;
}
import { Contact } from './contact';

export const CONTACTS: Contact[] = [
    {
        id: 1,
        company: 'Partner Logistics',
        country: 'Holland',
        city: 'Bergen Op ZOOM',
        address: 'Blankeweg 2 NL-4612'
    },
    {
        id: 2,
        company: 'RAINBOW',
        country: 'Holland',
        city: 'De Lier',
        address: 'Poortcamp 9 NL-2678'
    },
    {
        id: 3,
        company: 'Corenso',
        country: 'Saksamaa',
        city: 'KREFELD',
        address: 'Niedieckstrasse 45 '
    },
    {
        id: 4,
        company: 'Nissin Transport',
        country: 'Saksamaa',
        city: 'NEUSS',
        address: 'Habichtweg 1 41468 '
    }
];
Helin
@Hkuuskla
Feb 01 2018 23:06
 getCompanies(): Contact[] {
    return this.companyList
    .filter((company: Contact) => {
      return company.company === this.selected.company;
    });
Here is something wrong and I have to continue with map but I don't know how
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 23:07
Alright I need a hand..

//Test arrays below
let y = [1,2,3];
let x = [1,3,3];

let hasCorrectMoves = ( user, game ) => {
user.forEach((arrOne, index) => {
if(arrOne === game[index]){
console.log(${arrOne} ${game[index]});

  }
  else{
    console.log(`${arrOne} ${game[index]} do not match`);
    return false;
  }

});
return true;

}

let test = hasCorrectMoves(y, x);
console.log(test);

why is the return on the else not working? My code returns true no matter what
Stephen James
@sjames1958gm
Feb 01 2018 23:09
@germangamboa95 It is inside another function so it is not returning out of the function you think it is.
You should use the .every function instead of .forEach
German Gamboa Gonzalez
@germangamboa95
Feb 01 2018 23:10
thanks! I felt like it had to do something with what scope I was in:D
Stephen James
@sjames1958gm
Feb 01 2018 23:10
@germangamboa95 :+1:
@Hkuuskla Where do you set companyList to anything?
Helin
@Hkuuskla
Feb 01 2018 23:16
Ok, it should be companyList = CONTACTS;
Stephen James
@sjames1958gm
Feb 01 2018 23:20
@Hkuuskla That should be a start - maybe not all that is wrong. I am noobish on angular/typescript
Yogender
@yb1997
Feb 01 2018 23:31
anyone there ?
Helin
@Hkuuskla
Feb 01 2018 23:35
@sjames1958gm Thanks I found also one mistake. I should probably do the same thing with javascript and then try to do it with typescript
CamperBot
@camperbot
Feb 01 2018 23:35
hkuuskla sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8925 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 01 2018 23:35
@Hkuuskla :+1:
Yogender
@yb1997
Feb 01 2018 23:39
I just want some advice on my performance, a few hours ago I was reading documentation of express and I saw they have this tracker kind of thing on right side, I became curious to how to implement it and started coding, Here is what I am able to achieve so far
https://codepen.io/ybisht1997/pen/jZbYmd?editors=0010
it took me around 4 and a half hours to make it work, is it bad and if it is then where do I need to improve ?
Gaurav
@gauravmagan
Feb 01 2018 23:42
hello !! is there any way to find out how many css classess are active on an element in google developers tools
alpox
@alpox
Feb 01 2018 23:44
@gauravmagan element.className.split("").length
Christopher McCormack
@cmccormack
Feb 01 2018 23:45

@gauravmagan you can select an element and click the properties tab and look at the classList
or in the console you can do something like this if you know the name:

[...document.querySelector('.classname').classList]

and it will return an array of the classes explicitly defined on the element's class attribute

Yogender
@yb1997
Feb 01 2018 23:47
select element and click on .cls
nah that's for adding new class my bad
Gaurav
@gauravmagan
Feb 01 2018 23:49
thank you !! i cannot identify the class its taking
heres is the codepen
Screen Shot 2018-02-01 at 6.48.50 PM.png
Christopher McCormack
@cmccormack
Feb 01 2018 23:50
@gauravmagan what do you want to happen? What is its and taking
Gaurav
@gauravmagan
Feb 01 2018 23:50
i wanted to hide the ul class below the second tab in the nav bar
in the screen shot you can see the developer tools view in my local
and code pen is having the code
Yogender
@yb1997
Feb 01 2018 23:51
set it to display: none; as default and on click, set display to block
Gaurav
@gauravmagan
Feb 01 2018 23:51
yes i did its taking in the console tool but not in my css sheet
cause i cannot see my css working
i used
ul > li {
display : none
list-style:none
}
Screen Shot 2018-02-01 at 6.53.53 PM.png
Christopher McCormack
@cmccormack
Feb 01 2018 23:54
@gauravmagan this looks like bootstrap code in your codepen but I don't think you imported bootstrap
Gaurav
@gauravmagan
Feb 01 2018 23:54
after activating the above styles the submenu is inside
solution is need to access the element and avoid the overiding
Christopher McCormack
@cmccormack
Feb 01 2018 23:55
@gauravmagan it's working for me in the codepen after adding bootstrap 4
Gaurav
@gauravmagan
Feb 01 2018 23:55
oh
have you got the link
can you paste the cdn
Christopher McCormack
@cmccormack
Feb 01 2018 23:56
It's probably not 100% what you want but it is collapsing
alpox
@alpox
Feb 01 2018 23:56
@gauravmagan There is a quick-add button for it
Yogender
@yb1997
Feb 01 2018 23:56
@cmccormack yea that solved it
Christopher McCormack
@cmccormack
Feb 01 2018 23:56
you can google bootstrap cdn if you need the embed code for your page, or just use the codepen tools inside codepen to test there
Gaurav
@gauravmagan
Feb 01 2018 23:57
Screen Shot 2018-02-01 at 6.56.48 PM.png
Yogender
@yb1997
Feb 01 2018 23:57
that button isn't rendering properly though
Gaurav
@gauravmagan
Feb 01 2018 23:57
cannot view the whole navbar
Christopher McCormack
@cmccormack
Feb 01 2018 23:57
one step at a time :)
Gaurav
@gauravmagan
Feb 01 2018 23:57
@cmccormack
Christopher McCormack
@cmccormack
Feb 01 2018 23:58
hmm this may be bootstrap 3 the more I look at the code
sorry about that
Yogender
@yb1997
Feb 01 2018 23:59
it is bootstrap 3 lol
Christopher McCormack
@cmccormack
Feb 01 2018 23:59
updated my pen
Yogender
@yb1997
Feb 01 2018 23:59
add jquery and bootstrap js cdn to make the button work