These are chat archives for FreeCodeCamp/HelpJavaScript

10th
Mar 2018
Dardan Demiri
@dardandemiri
Mar 10 2018 00:24
Hi everybody
Jason Luboff
@JLuboff
Mar 10 2018 00:25
Hi
Dardan Demiri
@dardandemiri
Mar 10 2018 00:25
can someone tell me what's the bug here

function truthCheck(collection, pre) {
  // Is everyone being true?
  var result;

  collection.forEach(function(element){
       if(!element[pre] && element[pre] != ""){
         result = false;
     }else if(result != false){
       result = true;
     }

  });

  return result;
}


truthCheck([{"single": ""}, {"single": "double"}], "single");
FlashHero
@FlashHero
Mar 10 2018 00:25
@dardandemiri :wave:
Dardan Demiri
@dardandemiri
Mar 10 2018 00:25
it passes all just this test not, because the first is false but it rewrites with the second to true
Stephen James
@sjames1958gm
Mar 10 2018 00:27
@dardandemiri You probably want to set result to true to start and only set to false in the loop
Dardan Demiri
@dardandemiri
Mar 10 2018 00:28
it's the same again
Stephen James
@sjames1958gm
Mar 10 2018 00:28
@dardandemiri And check your if for setting result to false -
if element[pre] is false AND element[pre] !== "" result is false?
@dardandemiri What is the condition for falseness?
Dardan Demiri
@dardandemiri
Mar 10 2018 00:31

that if is like this

if it doesn't exists or it's empty

but with AND
Stephen James
@sjames1958gm
Mar 10 2018 00:32
@dardandemiri OR?
Dardan Demiri
@dardandemiri
Mar 10 2018 00:32
I tried with both
nether one works
Stephen James
@sjames1958gm
Mar 10 2018 00:32
@dardandemiri Did you try with OR after removing the else if
Dardan Demiri
@dardandemiri
Mar 10 2018 00:32
yes
Greg Duncan
@GregatGit
Mar 10 2018 00:33
@dardandemiri which challenge is this called?
Stephen James
@sjames1958gm
Mar 10 2018 00:33
@dardandemiri Show your code again
Dardan Demiri
@dardandemiri
Mar 10 2018 00:33

function truthCheck(collection, pre) {
  // Is everyone being true?
  var result = true;

  collection.forEach(function(element){
       if(!element[pre] || element[pre] != ""){
         result = false;
     }

  });

  return result;
}


truthCheck([{"single": "yes"}], "single"); // This returns: false
it should return true
it's
Everything Be True
challange
challenge
Stephen James
@sjames1958gm
Mar 10 2018 00:34
@dardandemiri Your code says false if not there OR not empty? is that correct?
Dardan Demiri
@dardandemiri
Mar 10 2018 00:35
yes
little complex
:P
Adel
@AdelMahjoub
Mar 10 2018 00:35
@Ryanwfile check this https://codepen.io/SultanCodeCamper/pen/BrydwQ?editors=0010, you can add a transition delay so it won't suddenly jump to the next paragraph
window.addEventListener('DOMContentLoaded', function() {

    /** @type {Array<{text: string, length: number}>}*/
    const paragraphs = [
        { text: 'I create websites from scratch with HTML5, CSS3, JavaScript(ECMAscript6)', length: 0 },
        { text: 'I also use templates as well as content creation platforms such as Wix or Wordpress', length: 0 },
    ];

    /** Update paragraphs length */
    paragraphs.forEach( obj => { obj.length = obj.text.length } );

    /**@type {{delay: number, delta: number, time: number}} */
    const typing = {
        delay: 5,
        delta: 1,
        time: 0
    }

    /**@type {{paragraph: number, character: number}} */
    const indexes = {
        paragraph: 0,
        character: 0
    }

    /**@type {HTMLParagraphElement} */
    const content = document.querySelector('#content');

    function typeWrite() {
        typing.time += typing.delta;
        if(typing.time >= typing.delay) {
            content.textContent += paragraphs[indexes.paragraph].text[indexes.character];
            indexes.character++;
            typing.time = 0;
            if(indexes.character >= paragraphs[indexes.paragraph].length) {
                indexes.character = 0;
                indexes.paragraph++;
                indexes.paragraph = indexes.paragraph >= paragraphs.length ? 0 : indexes.paragraph;
                content.textContent = '';
            }
        }
        requestAnimationFrame(typeWrite);
    }

    requestAnimationFrame(typeWrite);
});
Stephen James
@sjames1958gm
Mar 10 2018 00:36
@dardandemiri Are you sure? To quote you from above:
if it doesn't exists or it's empty
Greg Duncan
@GregatGit
Mar 10 2018 00:36
@dardandemiri instead of returning a result you just need to loop through and return false the moment something doesn't fly - then if it gets through the loop return true
Stephen James
@sjames1958gm
Mar 10 2018 00:36
You code is if it doesn't exists or it's not empty
Dardan Demiri
@dardandemiri
Mar 10 2018 00:37

function truthCheck(collection, pre) {
  // Is everyone being true?
  var result = true;

  for (var i = 0; i < collection.length; i++ ) {
    if (!collection[i][pre]) {
      return false;
    }
  }

  return true;
}


truthCheck([{"single": "yes"}], "single"); // Now it works
Greg Duncan
@GregatGit
Mar 10 2018 00:37
@dardandemiri so a for loop would probalby work better here
Dardan Demiri
@dardandemiri
Mar 10 2018 00:37
just done that :P
now it works perfect
Stephen James
@sjames1958gm
Mar 10 2018 00:37
if(!element[pre] || element[pre] != ""){ this should have been === ""
Dardan Demiri
@dardandemiri
Mar 10 2018 00:38
oh
!
That's interesting
@sjames1958gm thank you bro
CamperBot
@camperbot
Mar 10 2018 00:39
dardandemiri sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9077 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Dardan Demiri
@dardandemiri
Mar 10 2018 00:39
@GregatGit Thank you too ;)
Stephen James
@sjames1958gm
Mar 10 2018 00:39
@camperbot :+1:
Jason Luboff
@JLuboff
Mar 10 2018 00:39
@sjames1958gm Are you stuck at 9077? I swear thats what you were the other day
@sjames1958gm Thanks
CamperBot
@camperbot
Mar 10 2018 00:39
jluboff sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9078 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Jason Luboff
@JLuboff
Mar 10 2018 00:39
Nope.. guess not lol
Greg Duncan
@GregatGit
Mar 10 2018 00:40
@dardandemiri :+1: you can shorten simple for loops to for (var i in collection){ in one like these
Dardan Demiri
@dardandemiri
Mar 10 2018 00:41
yes that's better
thank you @GregatGit
CamperBot
@camperbot
Mar 10 2018 00:41
dardandemiri sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 898 | @gregatgit |http://www.freecodecamp.org/gregatgit
Dardan Demiri
@dardandemiri
Mar 10 2018 00:42
@sjames1958gm
have you earned the Full Stack Cert ?
Jason Luboff
@JLuboff
Mar 10 2018 00:43
@sjames1958gm is the all being around here
Stephen James
@sjames1958gm
Mar 10 2018 00:43
@dardandemiri No just front end - haven't forced myself to do all the projects
@JLuboff My new job doesn't give me time during the day anymore
Dardan Demiri
@dardandemiri
Mar 10 2018 00:44
what do you work right now ?
Jason Luboff
@JLuboff
Mar 10 2018 00:44
@sjames1958gm You should probably have a talk with them about that ;)
Dardan Demiri
@dardandemiri
Mar 10 2018 00:47
@sjames1958gm ?
I am curios about your new job
Stephen James
@sjames1958gm
Mar 10 2018 00:50
Its a company called Examsoft that does a exam platform for universities, our biggest customer is law school bar exams.
the client app is C++ app built with (CEF which is a chromium library, like electron) and angular
Mainly C++, but some support of the angular (1.4) front end
I did get a new Mac pro laptop that I can take home and do web dev on
Ryan Williams
@Ryanwfile
Mar 10 2018 01:32
@AdelMahjoub Wow that's amazing and exactly what I'm looking for, thank you so much
CamperBot
@camperbot
Mar 10 2018 01:32
ryanwfile sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 668 | @adelmahjoub |http://www.freecodecamp.org/adelmahjoub
Adel
@AdelMahjoub
Mar 10 2018 01:33
@Ryanwfile no problem :+1:
Ken Haduch
@khaduch
Mar 10 2018 02:21
@sjames1958gm - good news! Congratulations and best of luck on the new job!
Leigh Hobson
@leighhobson89
Mar 10 2018 10:43

Morning campers! Here is some HTML:
´´´

<div class="row justify-content-md-center">
<div id="userheader" class="col-xs-6 middlerows text-center">
</div>
</div>

and here is some JS:

$(document).ready(function() {
displayAllUsers();
function displayAllUsers() {
var users = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
for (i = 0; i < users.length; i++) {
$("#userheader").append(
"<div class='row justify-content-md-center'>" + users[i] + "</div>"
);
}
}
});
```
obviously I´ve cut other chunks of the page out but, can anyone explain why the function call doesn't put the array values in to the relevant DIV? If I hardcode the same instruction in to the HTML (variables adjusted etc) it works a treat.

Morning campers! Here is some HTML:
´´´

<div class="row justify-content-md-center">

<div id="userheader" class="col-xs-6 middlerows text-center">
</div>
</div>

and here is some JS:

$(document).ready(function() {
displayAllUsers();
function displayAllUsers() {
var users = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
for (i = 0; i < users.length; i++) {
$("#userheader").append(
"<div class='row justify-content-md-center'>" + users[i] + "</div>"
);
}
}
});
```
obviously I´ve cut other chunks of the page out but, can anyone explain why the function call doesn't put the array values in to the relevant DIV? If I hardcode the same instruction in to the HTML (variables adjusted etc) it works a treat.

damn it wont render!

Morning campers! Here is some HTML:
´´´

<div class="row justify-content-md-center">

<div id="userheader" class="col-xs-6 middlerows text-center">
</div>
</div>
```

Leigh Hobson
@leighhobson89
Mar 10 2018 10:48

Morning campers! Here is some HTML:

<div class="row justify-content-md-center">
<div id="userheader" class="col-xs-6 middlerows text-center">
</div>
</div>

and here is some JS:

$(document).ready(function() {
displayAllUsers();
function displayAllUsers() {
var users = [
"ESL_SC2",
"OgamingSC2",
"cretetion",
"freecodecamp",
"storbeck",
"habathcx",
"RobotCaleb",
"noobs2ninjas"
];
for (i = 0; i < users.length; i++) {
$("#userheader").append(
"<div class='row justify-content-md-center'>" + users[i] + "</div>"
);
}
}
});

obviously I´ve cut other chunks of the page out but, can anyone explain why the function call doesn't put the array values in to the relevant DIV? If I hardcode the same instruction in to the HTML (variables adjusted etc) it works a treat -phew! sorry for the spam!

Sweet Coding :)
@SweetCodingInc
Mar 10 2018 11:23
@leighhobson89 do you have codepen?
I'm assuming you missed including jquery.. The code looks fine. So probably that's the only problem here
Nazar
@IsaakNazar
Mar 10 2018 11:32
hey everybody, cant pass the React task, help
https://beta.freecodecamp.org/en/challenges/react/create-a-controlled-form
class MyForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        input: '',
        submit: ''
      };
      this.handleChange = this.handleChange.bind(this);
      this.handleSubmit = this.handleSubmit.bind(this);
    }
    handleChange(event) {
      this.setState({
        input: event.target.value
      });
    }
    handleSubmit(event) {
      // change code below this line
      event.preventDefault();
      this.setState({
        submit: event.target.value
      });
    }

    render() {
      return (
        <div>
          <form onSubmit={this.handleSubmit}>
            { /* change code below this line */ }
            <input type='text' value={this.state.value} onChange={this.handleChange}></input>
            { /* change code above this line */ }
            <button type='submit'>Submit!</button>
          </form>
          { /* change code below this line */ }
            <h1>{this.state.submit}</h1>
          { /* change code above this line */ }
        </div>
      );
    }
};
Manish Giri
@Manish-Giri
Mar 10 2018 11:35
@IsaakNazar does your state have a value?
<input type='text' value={this.state.value}
Nazar
@IsaakNazar
Mar 10 2018 11:37
@Manish-Giri ok , that will be this.state.input maybe,
Sweet Coding :)
@SweetCodingInc
Mar 10 2018 11:37
right
Nazar
@IsaakNazar
Mar 10 2018 11:38
doesnt work
Sweet Coding :)
@SweetCodingInc
Mar 10 2018 11:38
<input type='text' value={this.state.value} onChange={this.handleChange}></input>
has to work
Nazar
@IsaakNazar
Mar 10 2018 11:42
@SweetCodingInc doesnt pass the test
Manish Giri
@Manish-Giri
Mar 10 2018 11:43
@IsaakNazar here
Leigh Hobson
@leighhobson89
Mar 10 2018 11:43
@SweetCodingInc darn it, yes that was it!! thanks
Manish Giri
@Manish-Giri
Mar 10 2018 11:43
  handleSubmit(event) {
    // change code below this line
 event.preventDefault();
      this.setState({
        submit: this.state.input
      });
  }
CamperBot
@camperbot
Mar 10 2018 11:43
leighhobson89 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Manish Giri
@Manish-Giri
Mar 10 2018 11:44

@IsaakNazar you missed this instruction

You should then complete the handleSubmit method so that it sets the component state property submit to the current input value in the local state

Nazar
@IsaakNazar
Mar 10 2018 11:46
@Manish-Giri oh that's what I missed :smile: , thank you
CamperBot
@camperbot
Mar 10 2018 11:46
isaaknazar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6816 | @manish-giri |http://www.freecodecamp.org/manish-giri
Manish Giri
@Manish-Giri
Mar 10 2018 11:46
@IsaakNazar :+1:
Nazar
@IsaakNazar
Mar 10 2018 11:47
sometimes the problem on me, cant understand simple instructions :worried:
Manish Giri
@Manish-Giri
Mar 10 2018 11:48
make sure to read those quite a few times! that often helps
Nazar
@IsaakNazar
Mar 10 2018 11:59
@Manish-Giri one question, to install react locally I need React, Express, Babel ? maybe something else?
Manish Giri
@Manish-Giri
Mar 10 2018 12:00
mainly you need React and Babel
Sweet Coding :)
@SweetCodingInc
Mar 10 2018 12:01
@IsaakNazar check this out
Nazar
@IsaakNazar
Mar 10 2018 12:01
@Manish-Giri ok, thanx again
CamperBot
@camperbot
Mar 10 2018 12:01
isaaknazar sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
api offline
Manish Giri
@Manish-Giri
Mar 10 2018 12:01
when starting out, use create-react-app to create your project, that will setup your dependencies nicely
later when you get more advanced, you can create your own config
Stephen James
@sjames1958gm
Mar 10 2018 12:01
@khaduch Thank you sir.
CamperBot
@camperbot
Mar 10 2018 12:01
sjames1958gm sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3784 | @khaduch |http://www.freecodecamp.org/khaduch
Nazar
@IsaakNazar
Mar 10 2018 12:02
@SweetCodingInc useful link, thx
CamperBot
@camperbot
Mar 10 2018 12:02
isaaknazar sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Leigh Hobson
@leighhobson89
Mar 10 2018 12:50
just wondered guys, could someone quickly loook at this very rough screenshot and tell me if this is the right approach for a menu clicking filter system - the users will all be shown on all, the online ones only on online etc, i dont need help (yet) with the implementation, simply thoughts on the architecture
image.png
Leigh Hobson
@leighhobson89
Mar 10 2018 12:56
fyi it would return a variable jsString which would be the one that goes in the onClick event function on the page to parse out the divs and choose the users from the array
Stephen James
@sjames1958gm
Mar 10 2018 13:00
@leighhobson89 Seems redundant to set the variable to something - then have a switch statement.
isn't the action already known at the setting of the variable
Leigh Hobson
@leighhobson89
Mar 10 2018 13:02
so you mean to pass the id of the element clicked instead when its clicked and use that?
ehutchllew
@ehutchllew
Mar 10 2018 13:03
@leighhobson89 You could just have an onClick that passes an "action" that the switch checks.
Leigh Hobson
@leighhobson89
Mar 10 2018 13:04
thanks ill have a think - that seems better @ehutchllew
CamperBot
@camperbot
Mar 10 2018 13:04
leighhobson89 sends brownie points to @ehutchllew :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @ehutchllew |http://www.freecodecamp.org/ehutchllew
Stephen James
@sjames1958gm
Mar 10 2018 13:04
@leighhobson89 You said the result was a js string - if each click handler resulted in that string - do you need the switch?
Leigh Hobson
@leighhobson89
Mar 10 2018 13:06
@sjames1958gm the switch would output a different string depending on the click so the parse would be different. for example, to show all, i use this (its hardcoded at the min, i havent delved into the api yet) but for online i would put something in the cases to filter it out for online and offline
"<div class='row justify-content-md-center userrecords'><div class='col-xs-3 text-center'>userimage.png</div><div class='col-xs-7'><div class='row justify-content-md-center'>" + users[i][1] + "</div><div class='row justify-content-md-center'>Channel Info</div></div><div class='col-xs-2'>" + status + "</div>"
which results in:
image.png
Stephen James
@sjames1958gm
Mar 10 2018 13:08
@leighhobson89 If you have a single click handler for all three buttons then a switch might be needed, but if you have three click handlers
I am not sure what the switch is doing that the click handler would do?
Leigh Hobson
@leighhobson89
Mar 10 2018 13:09
yeah i was trying to reduce my code by just doing an onclick handler for each and passing a number to a single function to decide which one was clicked and act accordingly - as i say i was asking for tips on architecture approach
its probbaly not the best approach
Stephen James
@sjames1958gm
Mar 10 2018 13:11
@leighhobson89 To me it sounds like you split the code with 3 handler, then join the code with a switch which splits the code out to three options.
It might be overall less code, but seems like it combines the code unecessarily.
Leigh Hobson
@leighhobson89
Mar 10 2018 13:11
haha it does to me too the more i look at it :D - ok ill rethink, 3 click handlers each displaying their respective string after cleaning up isa probably all i need to do, no seperate function
does that sound better?
Stephen James
@sjames1958gm
Mar 10 2018 13:12
To me it does. Absolute code line count is not the only metric for good code.
Leigh Hobson
@leighhobson89
Mar 10 2018 13:12
i can always refactor it after anyway, ok ill give this a shot - thanks mate @sjames1958gm
CamperBot
@camperbot
Mar 10 2018 13:12
leighhobson89 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9080 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Mar 10 2018 13:13
:+1:
Leigh Hobson
@leighhobson89
Mar 10 2018 13:34

please could you tell me the correct place in this code to put the following line:

$(document).ready(function() {

  var status = "";
  var users = [
    // [image,user,status]
    ["<imagelink>", "ESL_SC2", 0],
    ["<imagelink>", "OgamingSC2", 0],
    ["<imagelink>", "cretetion", 1],
    ["<imagelink>", "freecodecamp", 0],
    ["<imagelink>", "storbeck", 1],
    ["<imagelink>", "habathcx", 1],
    ["<imagelink>", "RobotCaleb", 0],
    ["<imagelink>", "noobs2ninjas", 0]
  ];

  for (i = 0; i < users.length; i++) {
    status = userStatus(users); //call status function

    $("#userheader").append(
      "<div class='row justify-content-md-center userrecords'><div class='col-xs-3 text-center'>userimage.png</div><div class='col-xs-7'><div class='row justify-content-md-center'>" +
        users[i][1] +
        "</div><div class='row justify-content-md-center'>Channel Info</div></div><div class='col-xs-2'>" +
        status +
        "</div>"
    );
  }

  //end of document.ready()
});



function userStatus(users) {
  var statusUser = 0;

  if (users[i][2] == 0) {
    statusUser = "offline";
  } else {
    statusUser = "online";
  }
  return statusUser;
}

function tidyUp() {
  $("#userheader").html("");
}

the problem is if its too early, the button doesnt work, and in some places it stops the array populating at all - its just for debug at this stage - the line is:

$("#all").on("click", tidyUp());
Stephen James
@sjames1958gm
Mar 10 2018 13:37
@leighhobson89 That needs to go inside the document.ready callback so that you know that $("#all") is loaded when it runs
Leigh Hobson
@leighhobson89
Mar 10 2018 13:38
can it just be plonked anywhere inside that region then?
Stephen James
@sjames1958gm
Mar 10 2018 13:39
@leighhobson89 Yes, probably not inside the for loop though :)
Leigh Hobson
@leighhobson89
Mar 10 2018 13:40
ok cheers, maybe its a syntax error why its not working then, ill check it properly
Stephen James
@sjames1958gm
Mar 10 2018 13:41
@leighhobson89 Ah, I see - you want to pass a function reference to the .on function - but you are calling tidyUp() right then
so the return value of undefined is passed as the callback function which means nothing happens
Leigh Hobson
@leighhobson89
Mar 10 2018 13:43
so i need?
$("#all").on("click", function() {
tidyUp()
});
and the ; on the end of the call :/
yep that did it. cheers again @sjames1958gm
Stephen James
@sjames1958gm
Mar 10 2018 13:45
@leighhobson89 Or $("#all").on("click", tidyUp);
Leigh Hobson
@leighhobson89
Mar 10 2018 13:47
ahh ok, jeeze Im so crap at this! By the way can you specify div´s with that id to be clickable in that way or just buttons?
Stephen James
@sjames1958gm
Mar 10 2018 13:50
@leighhobson89 I am not sure that divs are clickable, but not sure.
A little research I may be wrong
document.querySelector('.test').onclick = function() {
  document.querySelector('.output').textContent = "click";
}
So you can click a div
 <div class="test"><p>test</p></div>
  <p class="output"></p>
Matej Bošnjak
@mbosnjak01
Mar 10 2018 14:12
for clickable divs, and other clickable elements, rather use ID than a class
so you don't find yourself in a situation where several divs share same class and do the same click stuff several times at once, which you probably will not want to have
Fabien SHAN
@X140hu4
Mar 10 2018 14:37
@mbosnjak01 Wouldn't the querySelector select just the first anyway?
Matej Bošnjak
@mbosnjak01
Mar 10 2018 14:39
No clue, I don't use document.querySelector. So, inform me if it does :) Furthermore it less likely to get bugs if you go with ID's.
Fabien SHAN
@X140hu4
Mar 10 2018 14:40
From my knowledge it would select only the first one. If you use querySelectorAll it would select all ocurrences and organize them in a nodelist.
Markus Kiili
@Masd925
Mar 10 2018 15:12
@X140hu4 Quite easy to just check it from MDN. querySelector returns an Element.
Leigh Hobson
@leighhobson89
Mar 10 2018 16:25
Thanks guys @mbosnjak01 @sjames1958gm i just picked these messages up - much appreciated!
CamperBot
@camperbot
Mar 10 2018 16:25
leighhobson89 sends brownie points to @mbosnjak01 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 248 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
:star2: 9082 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Leigh Hobson
@leighhobson89
Mar 10 2018 20:20
hi guys, any idea why my on click events for "#online" and "#offline" are only doing the tidyUp() function but not parsing out the data?
//rkvcqj2oldu482ylrgk3fip7n38ois API key

//ruvao3661ry0knpoxreqhgh4tvhm1v secret

$(document).ready(function() {
  outputUsers();
  $("#all").on("click", function() {
    tidyUp();
    outputUsers();
  });

  $("#online").on("click", function() {
    tidyUp();
    outputUsers(0);
  });

  $("#offline").on("click", function() {
    tidyUp();
    outputUsers(1);
  });
  //end of document.ready()
});

function outputUsers(selection) {
  var status = "";
  var users = [
    // [image,user,status]
    ["<imagelink>", "ESL_SC2", 0],
    ["<imagelink>", "OgamingSC2", 0],
    ["<imagelink>", "cretetion", 1],
    ["<imagelink>", "freecodecamp", 0],
    ["<imagelink>", "storbeck", 1],
    ["<imagelink>", "habathcx", 1],
    ["<imagelink>", "RobotCaleb", 0],
    ["<imagelink>", "noobs2ninjas", 0]
  ];

  for (i = 0; i < users.length; i++) {
    status = userStatus(users); //call status function
    switch (selection) {
      case 0:
        if (users[i][1] > 0) {
          stringParser(users, status);
          break;
        } else {
          break;
        }
      case 1:
        if (users[i][1] == 0) {
          stringParser(users, status);
          break;
        } else {
          break;
        }
      default:
        stringParser(users, status);
        break;
    }
  }
}

function stringParser(users, status) {
  $("#userheader").append(
    "<div class='row justify-content-md-center userrecords'><div class='col-xs-3 text-center'>userimage.png</div><div class='col-xs-7'><div class='row justify-content-md-center'>" +
      users[i][1] +
      "</div><div class='row justify-content-md-center'>Channel Info</div></div><div class='col-xs-2'>" +
      status +
      "</div>"
  );
}

function userStatus(users) {
  var statusUser = 0;

  if (users[i][2] == 0) {
    statusUser = "offline";
  } else {
    statusUser = "online";
  }
  return statusUser;
}

function tidyUp() {
  $("#userheader").html("");
}
Leigh Hobson
@leighhobson89
Mar 10 2018 20:29
The default path parses out correctly either on load or by clicking all:
image.png
Leigh Hobson
@leighhobson89
Mar 10 2018 21:34
bugger, i was referring to [i][1] when it should be [i][2] - i hate errors like those! sorted
Stephen James
@sjames1958gm
Mar 10 2018 21:35
@leighhobson89 Isn't users[i][1] the name? not the online/offline status?
Leigh Hobson
@leighhobson89
Mar 10 2018 21:36
no, because <imagelink>" placeholder is [i][0] !!
something i forgot i had added
Stephen James
@sjames1958gm
Mar 10 2018 21:37
@leighhobson89 function userStatus(users) this function should be written as
function userStatus(user) and called with
userStatus(users[i]);
it makes it much more self contained. You have a function using a global i from the for loop in another function
not good practice
Leigh Hobson
@leighhobson89
Mar 10 2018 21:38
right i will do that, thankyou
Stephen James
@sjames1958gm
Mar 10 2018 21:38
@leighhobson89 same with stringParser
@leighhobson89 :+1:
Leigh Hobson
@leighhobson89
Mar 10 2018 21:38
@thanks
@sjames1958gm thanks
CamperBot
@camperbot
Mar 10 2018 21:38
leighhobson89 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9083 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Leigh Hobson
@leighhobson89
Mar 10 2018 21:43
//rkvcqj2oldu482ylrgk3fip7n38ois API key

//ruvao3661ry0knpoxreqhgh4tvhm1v secret

$(document).ready(function() {
  outputUsers();
  $("#all").on("click", function() {
    tidyUp();
    outputUsers();
  });

  $("#online").on("click", function() {
    tidyUp();
    outputUsers(0);
  });

  $("#offline").on("click", function() {
    tidyUp();
    outputUsers(1);
  });
  //end of document.ready()
});

function outputUsers(selection) {
  var status = "";
  var users = [
    // [image,user,status]
    ["<imagelink>", "ESL_SC2", 0],
    ["<imagelink>", "OgamingSC2", 0],
    ["<imagelink>", "cretetion", 1],
    ["<imagelink>", "freecodecamp", 0],
    ["<imagelink>", "storbeck", 1],
    ["<imagelink>", "habathcx", 1],
    ["<imagelink>", "RobotCaleb", 0],
    ["<imagelink>", "noobs2ninjas", 0]
  ];

  for (i = 0; i < users.length; i++) {
    status = userStatus(users[i][2]); //call status function
    switch (selection) {
      case 0:
        if (users[i][2] > 0) {
          stringParser(users[i][1], status);
        }
        break;
      case 1:
        if (users[i][2] == 0) {
          stringParser(users[i][1], status);
        }
        break;
      default:
        stringParser(users[i][1], status);
        break;
    }
  }
}

function stringParser(users, status) {
  $("#userheader").append(
    "<div class='row justify-content-md-center userrecords'><div class='col-xs-3 text-center'>userimage.png</div><div class='col-xs-7'><div class='row justify-content-md-center'>" +
      users +
      "</div><div class='row justify-content-md-center'>Channel Info</div></div><div class='col-xs-2'>" +
      status +
      "</div>"
  );
}

function userStatus(users) {
  var statusUser = 0;

  if (users == 0) {
    statusUser = "offline";
  } else {
    statusUser = "online";
  }
  return statusUser;
}

function tidyUp() {
  $("#userheader").html("");
}
this is working as i like now @sjames1958gm , so i think now its time to fork it and start tearing it up for the API shizzle! wish me luck!
Stephen James
@sjames1958gm
Mar 10 2018 22:35
@leighhobson89 Good luck!
Long Nguyen
@longnt80
Mar 10 2018 23:47

I saw someone create object like this var o = Object();. Is this bad?

I thought you need the keywword new .