These are chat archives for FreeCodeCamp/HelpJavaScript

6th
Aug 2017
Elektra NatchuSs
@ElektraNatchus
Aug 06 2017 00:09 UTC

hi, I am creating an image slider that always displays 6 thumbnail images every time. The slider has also 2 counters which show how many images are left on the right and left side of the current slide. I've managed to write a JS file for the slider. It works like a moving train inside the tunnel - the tunnel is a <DIV> that always displays 6 thumbnails and the train is an <UL> with thumbnails. Every time I click on the right/left arrow, the train moves left/right by the length of the tunnel (i.e. 6 thumbnails) or by the length of the thumbnails left so that always 6 images are displayed.

My slider is working if there is more than 12 thumbnails, but if there is 12 images or less then navigation arrows simply fadeOut() and the slider no longer functional.

I spent several hours searching for an error in my algo but still cant figure out ... help pls

CODEPEN: https://codepen.io/anon/pen/JyEKEe?editors=1010

Diego Mayer
@Chrono79
Aug 06 2017 00:09 UTC
@hypercuber
  this.update = function() {
    this.col = Math.floor(Math.random() * 256);
    this.draw();
  }
window.addEventListener('click', function(event) {
  sqArr.forEach(sq => {
    if (sq.x < event.x && event.x < sq.x + sq.length &&
      sq.y < event.y && event.y < sq.y + sq.length) {
        sq.update();    
    }
  });
});
That changes (hopefully, you should test the random doesn't fall too close to the current color) of the clicked square
Also if random returns 0, you made your box invisible ;)
Guderian Raborg
@hypercuber
Aug 06 2017 00:14 UTC
@ElektraNatchus That is too advance for me.
Diego Mayer
@Chrono79
Aug 06 2017 00:15 UTC
@ElektraNatchus do you want to make the slider for yourself or are you open to use a jquery library that already works?
Guderian Raborg
@hypercuber
Aug 06 2017 00:16 UTC
@Chrono79 I am trying to work with 'click' so I can do puzzles and stuff. I know it would become invisible
Let me check the code @Chrono79 Thanks in advance
CamperBot
@camperbot
Aug 06 2017 00:16 UTC
hypercuber sends brownie points to @chrono79 :sparkles: :thumbsup: :sparkles:
:star2: 4507 | @chrono79 |http://www.freecodecamp.com/chrono79
Elektra NatchuSs
@ElektraNatchus
Aug 06 2017 00:17 UTC
@Chrono79 I would rather to use my own creation :D I downloaded some plugins but they are often too difficult to understand and every time I need to include them in my code etc.
Diego Mayer
@Chrono79
Aug 06 2017 00:19 UTC
@ElektraNatchus Ok, I've used bxslider many times, not so hard to use/understand if it helps
Elektra NatchuSs
@ElektraNatchus
Aug 06 2017 00:21 UTC
Yeah but these plugin files contains a lot more code. I just wanted to create my own slider with a js file under 150-200 lines of code
Diego Mayer
@Chrono79
Aug 06 2017 00:21 UTC
Ok
Diego Mayer
@Chrono79
Aug 06 2017 00:28 UTC
you should test for both u and v values when you do the slide left or right
  slideRight = function() {
    if (v < 6) {
      $(".gal__slider-thumb-ul").animate({left: finalLastPieceR});
      v = v - lastPieceCount;
      u = u + lastPieceCount;
      $("#u").html(u);
    }
    else {
      $(".gal__slider-thumb-ul").animate({left: cLengthR});
      v = v - 6;
      u = u + 6;
      $("#u").html(u);
    }

    console.log(u, v);

    if (v > 0) {
      $("#v").html(v);
      $(".gal__slider-nav-l > i").fadeIn("fast");
    }
    else {
      $("#v").html("");
      $(".gal__slider-nav-r > i").fadeOut("fast");
    }

   if (u > 0) {
      $("#u").html(u);
      $(".gal__slider-nav-l > i").fadeIn("fast");
    }
    else {
      $("#u").html("");
      $(".gal__slider-nav-r > i").fadeOut("fast");
    }    
  }
});
Maybe you can refactor the code to make it shorter, but I think it works now
You're doing $("#u").html(u); in both if and else, so you can do it outside only once
Elektra NatchuSs
@ElektraNatchus
Aug 06 2017 00:34 UTC
Can U explain to me where was the mistake?
Guderian Raborg
@hypercuber
Aug 06 2017 00:36 UTC
Elektra NatchuSs
@ElektraNatchus
Aug 06 2017 00:37 UTC
@Chrono79 Oh now I see. LoL. Thx so much. This was just a small part of my final FCC project. I thought I would have to use some of these plugins, but now You saved me the trouble.
Diego Mayer
@Chrono79
Aug 06 2017 00:37 UTC
:+1:
Diego Mayer
@Chrono79
Aug 06 2017 00:44 UTC
this.col = Math.floor(Math.random() * 256);
not this.blue = Math.floor(Math.random() * 256);
inside this.update method
Guderian Raborg
@hypercuber
Aug 06 2017 00:45 UTC
@Chrono79 Thanks, that work
CamperBot
@camperbot
Aug 06 2017 00:45 UTC
hypercuber sends brownie points to @chrono79 :sparkles: :thumbsup: :sparkles:
:warning: hypercuber already gave chrono79 points
kumquatfelafel
@kumquatfelafel
Aug 06 2017 02:02 UTC

Hey, question regarding this kata. https://www.codewars.com/kata/esolang-interpreters-number-1-introduction-to-esolangs-and-my-first-interpreter-ministringfuck/train/java

I have it working in every case except for randomized test. Anybody see anything that stands out as potentially wrong here?

public class MyFirstInterpreter {
  private String code;
  public MyFirstInterpreter(String code) {
    System.out.println(code);
    this.code = code.replaceAll("[^+.]", "");
  }
  public String interpret() {
    StringBuilder blah = new StringBuilder(code.length());
    int curr = 0, nextInd = 0;
    while (true) {
      int prevInd = nextInd;
      nextInd = this.code.indexOf(".", prevInd + 1); // 
      if(nextInd == -1)
        break;
      curr += nextInd - prevInd - 1;
      curr %= 256;
      blah.append((char)(curr + 1));
    }
    String result = blah.toString();
    System.out.println(result);
    return result;
    //return blah.toString();
  }
}
(yes, it's java, but more or less same idea, and if you understand javascript, should be able to figure this out. :p )
CallMeOrange
@EgnaroDev
Aug 06 2017 02:37 UTC
forgotten
Cody Seibert
@codyseibert
Aug 06 2017 03:29 UTC
@kumquatfelafel what happens if you just input "."
nextInd - prevInd - 1 = 0 - 0 - 1 = -1
something seems strange there
kumquatfelafel
@kumquatfelafel
Aug 06 2017 03:30 UTC
+ 1 = 0
Cody Seibert
@codyseibert
Aug 06 2017 03:30 UTC
actually, it would break because you do indexOf of prevInd + 1
kumquatfelafel
@kumquatfelafel
Aug 06 2017 03:30 UTC
but it is problematic due to searching start from 1 as opposed to 0
Cody Seibert
@codyseibert
Aug 06 2017 03:37 UTC
@kumquatfelafel
public class MyFirstInterpreter {
  private String code;
  public MyFirstInterpreter(String code) {
    System.out.println(code);
    this.code = code.replaceAll("[^+.]", "");
  }
  public String interpret() {
    StringBuilder blah = new StringBuilder(this.code.length());
    int curr = 0, nextInd = 0;
    while (true) {
      int prevInd = nextInd;
      nextInd = this.code.indexOf(".", prevInd); // removed +1
      if(nextInd == -1)
        break;
      curr += nextInd - prevInd; // removed -1
      curr %= 256;
      nextInd++; // added this
      blah.append((char)(curr)); // removed +1
    }
    String result = blah.toString();
    System.out.println(result);
    return result;
    //return blah.toString();
  }
}
kumquatfelafel
@kumquatfelafel
Aug 06 2017 03:38 UTC
@codyseibert I tried that but it doesn't
Cody Seibert
@codyseibert
Aug 06 2017 03:39 UTC
tried what?
what I just pasted?
they all passed for me with that code above ^
kumquatfelafel
@kumquatfelafel
Aug 06 2017 03:39 UTC
oh shoot. I just realized, I added a sample test that was flawed before testing that one.
kumquatfelafel
@kumquatfelafel
Aug 06 2017 03:46 UTC
@codyseibert yeah... I started off (like above) with bunch of +1's and -1's and was like "this is no good" and I tried adding in nextInd++. Realizing I forgot to get rid of the curr + 1 though.
@codyseibert works, thanks :)
CamperBot
@camperbot
Aug 06 2017 03:46 UTC
kumquatfelafel sends brownie points to @codyseibert :sparkles: :thumbsup: :sparkles:
:cookie: 86 | @codyseibert |http://www.freecodecamp.com/codyseibert
Maximino V. Jardin III
@ma5one1
Aug 06 2017 03:59 UTC
HALP!

function repeatStringNumTimes(str, num) {
  // repeat after me
  if (str.repeat(num)){
  return str;
}
}
repeatStringNumTimes("abc", 3);
kumquatfelafel
@kumquatfelafel
Aug 06 2017 03:59 UTC
@ma5one1 why the if statement?
Joseph
@revisualize
Aug 06 2017 04:01 UTC
@ma5one1 What does .repeat() do?
kumquatfelafel
@kumquatfelafel
Aug 06 2017 04:01 UTC
str.repeat(num), by its lonesome, will suffice to repeat the string num times.
Joseph
@revisualize
Aug 06 2017 04:01 UTC
@ma5one1 If conditions do things based on true / false values
Maximino V. Jardin III
@ma5one1
Aug 06 2017 04:03 UTC
give me a moment..
the if statement is wrong.
.repeat <== this repeats the string on numerical amount
==> str.repeat(num) Alone does not work...
HALP!
Maximino V. Jardin III
@ma5one1
Aug 06 2017 04:08 UTC
function repeatStringNumTimes(str, num) {
  // repeat after me
 str.repeat(num);
}
repeatStringNumTimes("abc", 3);
kumquatfelafel
@kumquatfelafel
Aug 06 2017 04:08 UTC
If you don't have a return statement, then by default, it will return undefined.
FCC is testing the returned value from your function against the expected value, and if they're not the same, test will fail.
Maximino V. Jardin III
@ma5one1
Aug 06 2017 04:09 UTC
well..

function repeatStringNumTimes(str, num) {
  // repeat after me
 str.repeat(num);
  return str;
}

repeatStringNumTimes("abc", 3);
kumquatfelafel
@kumquatfelafel
Aug 06 2017 04:10 UTC
@ma5one1 strings are immutable, so string functions can not modify an existing string. However, many string functions do return a new string, repeat included. Problem is, if you don't store that value in a variable or use it immediately, it is lost.
Maximino V. Jardin III
@ma5one1
Aug 06 2017 04:13 UTC
@kumquatfelafel thank you
CamperBot
@camperbot
Aug 06 2017 04:13 UTC
ma5one1 sends brownie points to @kumquatfelafel :sparkles: :thumbsup: :sparkles:
:cookie: 576 | @kumquatfelafel |http://www.freecodecamp.com/kumquatfelafel
Maximino V. Jardin III
@ma5one1
Aug 06 2017 04:14 UTC
@revisualize thank you
CamperBot
@camperbot
Aug 06 2017 04:14 UTC
ma5one1 sends brownie points to @revisualize :sparkles: :thumbsup: :sparkles:
:star2: 4413 | @revisualize |http://www.freecodecamp.com/revisualize
Amit Patel
@AmitP88
Aug 06 2017 04:17 UTC
hey guys, how do I open up a project folder in Sublime Text 3 editor using the windows terminal? the command subl . won't work (says it's not recognized as internal or external command) and I've added the Sublime Text 3 directory (C:\Program Files\Sublime Text 3 at the end of the PATH of the System Variable but it didn't work. (subl . and sublime_text commands don't work - not recognized)
Pagnito
@Pagnito
Aug 06 2017 04:20 UTC
hey im tryin to make a form with node, im tryin to get the users email and im guessing put into a variable to use it so the my contact form uses it to send me the email on my email
Joseph
@revisualize
Aug 06 2017 04:20 UTC
FreeCodeCamp/HelpJavaScript
Get help on our basic JavaScript and Algorithms Challenges.
CallMeOrange
@EgnaroDev
Aug 06 2017 04:21 UTC
Is that here?
Joseph
@revisualize
Aug 06 2017 04:22 UTC
That's the info at the top of this chat.
Manish Giri
@Manish-Giri
Aug 06 2017 04:25 UTC
Pagnito
@Pagnito
Aug 06 2017 04:26 UTC
@Manish-Giri thanks
CamperBot
@camperbot
Aug 06 2017 04:26 UTC
pagnito sends brownie points to @manish-giri :sparkles: :thumbsup: :sparkles:
:star2: 6374 | @manish-giri |http://www.freecodecamp.com/manish-giri
Maximino V. Jardin III
@ma5one1
Aug 06 2017 04:30 UTC
Got it.
Pagnito
@Pagnito
Aug 06 2017 04:36 UTC
nvm lol im stupid, the email is in the contact form
Jianhao Tan
@jaanhio
Aug 06 2017 05:01 UTC

hi all,

<button className="button is-warning is-outlined" onClick={this.deleteRecipe.bind(this, this.props.recipe.id)}>

may i know what does the bind(this, this.props.recipe.id) really mean?

Anand Kumar Parhi
@binarylogician
Aug 06 2017 08:04 UTC
@alpox I understand that, but when is an optimal time to refetch the new data after initial load and render?
Yuling
@Summerflowerling
Aug 06 2017 08:07 UTC
hello~ can anyone tell me how does the numbers of this code work (The Caesars Cipher task)? //rotCharArray.push((str[x].charCodeAt() - 65 + 13) % 26 + 65)
can't really understand it.
Alan Alickovic
@alan2207
Aug 06 2017 08:16 UTC
@Summerflowerling what exactly don't you understand?
Yuling
@Summerflowerling
Aug 06 2017 08:20 UTC
@alan2207 I don't understand the numbers (str[x].charCodeAt() - 65 + 13) % 26 + 65)
Why -65+13?
WAINGOR
@WAINGOR
Aug 06 2017 08:21 UTC
@codyseibert thanks for the help this seems solid
CamperBot
@camperbot
Aug 06 2017 08:21 UTC
waingor sends brownie points to @codyseibert :sparkles: :thumbsup: :sparkles:
:cookie: 87 | @codyseibert |http://www.freecodecamp.com/codyseibert
kumquatfelafel
@kumquatfelafel
Aug 06 2017 08:21 UTC

@Summerflowerling http://www.asciitable.com

Let's suppose str[x] is A, for example.

The charCode of A is 65. So 65 - 65 + 13... gives us 13.

13 %26 = 13

13 + 65 = 78

Which is the char code for N.

On the other hand, let's suppose that str[x] is R. Looking at ascii table, char code for R is 82... so

82 - 65 + 13 = 30

30 % 26 = 4

4 + 65 = 69

Which is char code for E

Yuling
@Summerflowerling
Aug 06 2017 08:30 UTC
@kumquatfelafel Thank you so much. I think I got it now.
CamperBot
@camperbot
Aug 06 2017 08:30 UTC
summerflowerling sends brownie points to @kumquatfelafel :sparkles: :thumbsup: :sparkles:
:cookie: 577 | @kumquatfelafel |http://www.freecodecamp.com/kumquatfelafel
kumquatfelafel
@kumquatfelafel
Aug 06 2017 08:31 UTC

Essentially, the - 65 comes from fact that first letter in alphabet, A, has a char code of 65, so subtracting 65 from any letter will tell you its "distance" from A. The + 13 because we want to offset the letters of the alphabet by 13... A becomes N, B becomes O, etc.

The % 26, in turn, is because we want these values to wrap around

@Summerflowerling np
Kelechi Chinaka
@ke1echi
Aug 06 2017 08:31 UTC
@kumquatfelafel :wave:
alpox
@alpox
Aug 06 2017 08:31 UTC
@state0fmind You mean how can you know that there is new data?
Well you do not know unless your server sends push data to your app or you ask the server for new data all some seconds (Nasty).
All of those options will put lots more load on your server though.
kumquatfelafel
@kumquatfelafel
Aug 06 2017 08:32 UTC

...

Ack! It's obscenely late at night again! :laughing:

Yuling
@Summerflowerling
Aug 06 2017 08:32 UTC
@kumquatfelafel have been bad at logic problem, but what you explain is very clear! Thanks!
CamperBot
@camperbot
Aug 06 2017 08:32 UTC
summerflowerling sends brownie points to @kumquatfelafel :sparkles: :thumbsup: :sparkles:
:warning: summerflowerling already gave kumquatfelafel points
kumquatfelafel
@kumquatfelafel
Aug 06 2017 08:34 UTC
@kelechy (hey)
Anand Kumar Parhi
@binarylogician
Aug 06 2017 08:50 UTC
@alpox I was thinking something like this
render initially from locally stored data, if nothing is there obviously check with server
If something is there, render them and later get updated data once more
like few seconds after initial render
my problem is I can't figure how n where do I put this code to update store data sometime after render
Jianhao Tan
@jaanhio
Aug 06 2017 09:00 UTC
anyone here familiar with the react recipe box project?
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:02 UTC
@jaanhio yeap
Jianhao Tan
@jaanhio
Aug 06 2017 09:03 UTC
@abhinav-thinktank i am having difficulties implementing the edit recipe function
i saw this codepen and was wondering how the edit function is working https://codepen.io/SedatUygur/pen/jWgJdv?editors=1111
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:03 UTC
@jaanhio aah..
Jianhao Tan
@jaanhio
Aug 06 2017 09:03 UTC
it looked so simple
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:03 UTC
@jaanhio how i implemented it was not a good way to do it
but basically my app had state for currently being edited/ made recipe title and ingredients
Jianhao Tan
@jaanhio
Aug 06 2017 09:04 UTC
mine is
class RecipeEdit extends Component{

  constructor(props){
    super(props);
    this.state = {
      revisedRecipe:{
        id: this.props.recipe.id,
        food: this.props.recipe.food,
        ingredients: this.props.recipe.ingredients
      },
      modalIsOpen: false,
      speed: 100
    };
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
  }

  openModal(){
    this.setState({modalIsOpen: true});
  }

  closeModal(){
    this.setState({modalIsOpen: false});
  }

  handleSubmit(e){

    e.preventDefault();
    const revised = this.state.revisedRecipe;

    this.props.editRecipe(revised);

  }


  handleNameChange(e){
    this.setState({revisedRecipe:{
      food: e.target.value
    }
  });
  }

  handleIndChange(e){
    this.setState({revisedRecipe:{
      ingredients: e.target.value.split(",")
    }
  });
  }



  render(){
    const speed = this.state.speed;
    let recipe=this.props.recipe;
    let foodName=this.state.revisedRecipe.food;
    let ingredients=recipe.ingredients;

    return(
      <div>
        <button className="button is-primary" onClick={this.openModal}>Edit Recipe</button>
        <Modal
          isOpen={this.state.modalIsOpen}
          onAfterOpen={this.afterOpenModal}
          onRequestClose={this.closeModal}
          closeTimeoutMS={speed}
          contentLabel="Example Modal"
        >
        <div className="field">
          <h2 className="title is-2">Edit Recipe</h2>
          <form onSubmit={this.handleSubmit.bind(this)}>
            <label className="label">Recipe</label>
            <div className="control">
              <input className="input" type="text" placeholder="Recipe Name" ref="recipeName" value={this.state.revisedRecipe.food} onChange={this.handleNameChange.bind(this)}/>
            </div>
            <div className="field">
            <label className="label">Ingredients</label>
            <div className="control has-icons-left has-icons-right">
              <input className="input" type="text" placeholder="Enter ingredients. (if more than 1 ingredient, separate them with commas)" ref="ingredients" value={this.state.revisedRecipe.ingredients} onChange={this.handleIndChange.bind(this)}/>
              <span className="icon is-small is-left">
                <i className="fa fa-flask"></i>
              </span>
            </div>
            </div>
            <div className="field is-grouped">
              <div className="control">
                <button className="button is-primary" onClick={this.closeModal}>Edit Recipe</button>
              </div>
              <div className="control">
                <button className="button" onClick={this.closeModal}>Cancel</button>
              </div>
            </div>
            </form>
        </div>
        </Modal>
      </div>
    );
  }
}
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:04 UTC
i used it to update and render the editor ui
@jaanhio check this out : https://codepen.io/abhinavthinktank/pen/mMOjJb see if it helps you
@jaanhio you have a codepen?
Jianhao Tan
@jaanhio
Aug 06 2017 09:08 UTC
@abhinav-thinktank i did it via atom
thanks @abhinav-thinktank i will read thru your codepen first
CamperBot
@camperbot
Aug 06 2017 09:09 UTC
jaanhio sends brownie points to @abhinav-thinktank :sparkles: :thumbsup: :sparkles:
:cookie: 480 | @abhinav-thinktank |http://www.freecodecamp.com/abhinav-thinktank
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:10 UTC
@jaanhio note i didnt create an extra component for the editor so stuff would be different
alpox
@alpox
Aug 06 2017 09:16 UTC
@state0fmind Well, if you're working with react, you can do a request to the server in a componentDidMount and then store the response in the localStorage when it arrives through a callback or promise
Jianhao Tan
@jaanhio
Aug 06 2017 09:16 UTC
@abhinav-thinktank how does the togglemaker work? what does it actually do?
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:25 UTC
@jaanhio aah, i just have a boolean to toggle the ui for the recipe maker
@jaanhio i use it to display my recipe editor
when adding a new recipe / saving / editing, toggleMaker renders the recipe editing ui
by toggling it's previous value
Manish Giri
@Manish-Giri
Aug 06 2017 09:35 UTC
@abhinav-thinktank :wave:
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:36 UTC
@Manish-Giri :wave:
Manish Giri
@Manish-Giri
Aug 06 2017 09:37 UTC
What's up
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:43 UTC
@Manish-Giri trying to complete the flexbox tutorial
:P
Manish Giri
@Manish-Giri
Aug 06 2017 09:44 UTC
Sahi hai
I was studying swift
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:45 UTC
iOs?
nice..
Manish Giri
@Manish-Giri
Aug 06 2017 09:45 UTC
Yup
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:45 UTC
built anything cool yet
Manish Giri
@Manish-Giri
Aug 06 2017 09:49 UTC
Made a dictionary app long back
About 1.5 years pehle
Now looking to do swift seriously
And submit an app to App Store
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:50 UTC
@Manish-Giri cool
suna hai it pays well
Manish Giri
@Manish-Giri
Aug 06 2017 09:50 UTC
Maybe make an app about poonam Pandey's pics
lol
__mifflin__
@cdrainxv
Aug 06 2017 09:51 UTC
Abhinav Mishra
@abhinav-m
Aug 06 2017 09:51 UTC
hahaha
:P
Manish Giri
@Manish-Giri
Aug 06 2017 09:53 UTC
@cdrainxv looks good
Jianhao Tan
@jaanhio
Aug 06 2017 10:01 UTC
@abhinav-thinktank can i ask how does the index of your ingredients work? each recipe item will get their own index?
Abhinav Mishra
@abhinav-m
Aug 06 2017 10:02 UTC
@jaanhio i just use the index of my recipe array
@jaanhio which is an array of recipe objects
Jianhao Tan
@jaanhio
Aug 06 2017 10:03 UTC
@abhinav-thinktank so this.props.index will automatically generate the relevant index?
Abhinav Mishra
@abhinav-m
Aug 06 2017 10:04 UTC
@jaanhio im passing index to the component
@jaanhio {this.state.recipes.map((recipeDetails,i)=> <RecipeInfo key={i} recipeDetails = {recipeDetails} deleteFn={this.deleteRecipe} index={i} editRecipe={this.editRecipe}/>)}
i could have used the key too i guess..
Jianhao Tan
@jaanhio
Aug 06 2017 10:06 UTC
ahhhh okok
this.setState({
      recipeIndex:index,
      newRecipeIngredients:ingred,
      newRecipeTitle: title },
@abhinav-thinktank sorry how does the recipeIndex come into play here?
it overrides the exisiting index?
Abhinav Mishra
@abhinav-m
Aug 06 2017 10:11 UTC
@jaanhio no, if there's an index being edited this recipe index is the index recipe being edited
if a new recipe is added , it's -1
i use that in my saveRecipe function to perform a push / splice operation on my recipe array
WAINGOR
@WAINGOR
Aug 06 2017 10:51 UTC

To all the Node programmers, I have a question about this:
https://docs.nodejitsu.com/articles/advanced/buffers/how-to-use-buffers/
This buffer is uninitialized and contains 8 bytes.

var buffer = new Buffer([ 8, 6, 7, 5, 3, 0, 9]);

how does this buffer have 8 bytes if the array containing it has a length of 7?

korzo
@korzo
Aug 06 2017 11:00 UTC
@WAINGOR I think it's for the example above
@WAINGOR var buffer = new Buffer(8);
WAINGOR
@WAINGOR
Aug 06 2017 11:35 UTC
thnx @korzo youre right lol
CamperBot
@camperbot
Aug 06 2017 11:35 UTC
waingor sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 343 | @korzo |http://www.freecodecamp.com/korzo
WAINGOR
@WAINGOR
Aug 06 2017 11:36 UTC
can anybody tell me what the square brackets mean in the Mozilla explanations of methods? For instance this explanation of JSON.stringify and its parameters:
JSON.stringify(value[, replacer[, space]])
teevik
@teevik
Aug 06 2017 11:40 UTC
Pretty sure it means optional, not sure
WAINGOR
@WAINGOR
Aug 06 2017 11:43 UTC
pretty sure or not sure? XD
alpox
@alpox
Aug 06 2017 11:49 UTC
@teevik @WAINGOR It does mean optional, yep.
WAINGOR
@WAINGOR
Aug 06 2017 11:50 UTC
@alpox thanks!
CamperBot
@camperbot
Aug 06 2017 11:50 UTC
waingor sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1298 | @alpox |http://www.freecodecamp.com/alpox
Abhinav Mishra
@abhinav-m
Aug 06 2017 12:01 UTC
anyone good with flexbox here
im trying to make my recipe box responsive
Thayyeb salim
@Thayyebsalim
Aug 06 2017 12:14 UTC
ask away
Someone might be able to help
levis
@imlevis
Aug 06 2017 12:20 UTC
hello
GeorgeII
@GeorgeII
Aug 06 2017 12:31 UTC
Hello! On click play div should switch display to none https://codepen.io/GeorgeIV/pen/GvrmmY
what's wrong?
Darth Skywalker
@AdiSkywalker
Aug 06 2017 12:33 UTC

@GeorgeII

First, you're using $ but you haven't included jQuery

Second, there is typo on line 3 - You mispelled document

If you don't intend to use jQuery, I recommend changing this part of your code

$(function() {
  const playButton = document.querySelector('.menu');
  playButton.addEventListener('click', playPress);
})

to this

function main(){
  const playButton = document.querySelector('.menu');
  playButton.addEventListener('click', playPress);
}

window.onload = main;
GeorgeII
@GeorgeII
Aug 06 2017 12:36 UTC
@AdiSkywalker hello
@AdiSkywalker ty again
CamperBot
@camperbot
Aug 06 2017 12:36 UTC
georgeii sends brownie points to @adiskywalker :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @adiskywalker |http://www.freecodecamp.com/adiskywalker
GeorgeII
@GeorgeII
Aug 06 2017 12:36 UTC
it helped
Darth Skywalker
@AdiSkywalker
Aug 06 2017 12:37 UTC
@GeorgeII :+1:
GeorgeII
@GeorgeII
Aug 06 2017 12:37 UTC
so, my version is used with jquery?
Darth Skywalker
@AdiSkywalker
Aug 06 2017 12:38 UTC
@GeorgeII It's not...
You're using document.querySelector etc.
which is not a jQuery API
it's vanilla javascript
GeorgeII
@GeorgeII
Aug 06 2017 12:38 UTC
nonono
I'm talking about $(function() {
Darth Skywalker
@AdiSkywalker
Aug 06 2017 12:40 UTC
@GeorgeII Yes.. that's jQuery
GeorgeII
@GeorgeII
Aug 06 2017 12:41 UTC
ok, got it
Jianhao Tan
@jaanhio
Aug 06 2017 13:05 UTC
handleSubmit(e){

    e.preventDefault();
    const revised = this.state.revisedRecipe;

    this.props.editRecipe(this.state.revisedRecipe);

  }
how do i pass the above parameters this.state.revisedRecipe to its parent? revisedRecipe is an object
<EditRecipe recipe={this.props.recipe} editRecipe={this.editRecipe.bind(this, revised)}/>

editRecipe(){
      this.props.onEdit(this.props.index);
  }
Anyone?
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:06 UTC
@jaanhio you could add a function which in the parent
pass it to this as a prop
Jianhao Tan
@jaanhio
Aug 06 2017 13:06 UTC
@abhinav-thinktank good to see again!
what do you mean?
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:07 UTC
then pass this recipe back to parent using that function
example in my pen,
i have deleteFn and editFn passed to my child compoent as a prop
both of them use the index passed to them as a prop and call the parent function
{this.state.recipes.map((recipeDetails,i)=> <RecipeInfo key={i} recipeDetails = {recipeDetails} deleteFn={this.deleteRecipe} index={i} editRecipe={this.editRecipe}/>)}
Jianhao Tan
@jaanhio
Aug 06 2017 13:08 UTC
is it possible to pass the other way round? from child to the parent?
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:08 UTC
yes
Jianhao Tan
@jaanhio
Aug 06 2017 13:08 UTC
I tried this with my delete function.
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:08 UTC
make a function in your parent
pass it to your child as a prop
the function should accept a parameter which you want in your parent
call the function in your child
Jianhao Tan
@jaanhio
Aug 06 2017 13:09 UTC
as per my code?
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:09 UTC
im not sure about your code
:o
didnt see it well
Jianhao Tan
@jaanhio
Aug 06 2017 13:09 UTC
the parent <EditRecipe /> has the editRecipe function passed as a prop
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:09 UTC
ok
Jianhao Tan
@jaanhio
Aug 06 2017 13:10 UTC
<EditRecipe recipe={this.props.recipe} editRecipe={this.editRecipe.bind(this, revised)}/>

editRecipe(){
      this.props.onEdit(this.props.index);
  }
child has
handleSubmit(e){

    e.preventDefault();
    const revised = this.state.revisedRecipe;

    this.props.editRecipe(this.state.revisedRecipe);

  }
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:10 UTC
do you have a codepen
for this
Jianhao Tan
@jaanhio
Aug 06 2017 13:10 UTC
no i dun
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:10 UTC
hmm if you pasted it on a codepen i could try to look at what you've got
Jianhao Tan
@jaanhio
Aug 06 2017 13:10 UTC
im using atom and create-react-app to build this
its just this portion of passing it up from child to parent which i am not clear
so the parent has the editRecipe passed as a prop. and the child has this.props.editRecipe(this.state.revisedRecipe). i believe this should work
question is, for the parent <EditRecipe editRecipe={this.editRecipe.bind(this, revised)}/>, how do i pass it further up?
Greg Duncan
@GregatGit
Aug 06 2017 13:13 UTC
@jaanhio functions get passed down parent to child , not the other way
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:13 UTC
yea..
so the parent has the editRecipe passed as a prop. and the child has this.props.editRecipe(this.state.revisedRecipe)
i dont understand this
Jianhao Tan
@jaanhio
Aug 06 2017 13:14 UTC

the structure is

<App />
   <RecipeList />
       <RecipeItem/>
           <EditRecipe />
   <AddRecipe />

the <EditRecipe/> creates a new object for the edited recipe and i was thinking of passing it up. because that is what i did with <AddRecipe /> by for the adding of recipe but its less nested. in the <AddRecipe />, i created a newRecipe object in the state and pass it up to <App />

Greg Duncan
@GregatGit
Aug 06 2017 13:16 UTC
@jaanhio a friend gave this to me to help understand functions as props C is the parent
const A = ({ aImportantMsg, aHandleChange }) => (
  <div>
    <input type='text' onChange={aHandleChange} />
    {aImportantMsg}
  </div>
)

const B = ({ importantMsg, handleChangeValue }) => (
  <A aImportantMsg={importantMsg} aHandleChange={handleChangeValue} />
)

class C extends React.Component {
  constructor () {

    state = {
      AValue: ''
    }
  }

  handleAValueChange (e) {
    this.setState({ AValue: e.target })
  }

  render () {

    return (
      <div>
        <B importantMsg={AValue} handleChangeValue={handleAValueChange}
      </div>
    )
  }
}
Jianhao Tan
@jaanhio
Aug 06 2017 13:19 UTC
thanks @GregatGit . lemme digest it
@GregatGit does my above example on how i implemented the AddRecipe function make sense?
i kinda get what you mean with the example you gave. just finding it difficult to figure out how to include arguments with it
Greg Duncan
@GregatGit
Aug 06 2017 13:22 UTC
@jaanhio no - not really - do yo uhave it on github
Jianhao Tan
@jaanhio
Aug 06 2017 13:22 UTC
yes i do
lemme find it
Greg Duncan
@GregatGit
Aug 06 2017 13:28 UTC

@jaanhio small thing but if you write function like

myFun = () => {
  this.state.test
}

it bind this so you don't have to bind when you pass them

Jianhao Tan
@jaanhio
Aug 06 2017 13:29 UTC
@GregatGit ok. so you are saying i should be doing this at the bottom most child <EditRecipe /> ?
Greg Duncan
@GregatGit
Aug 06 2017 13:31 UTC
@jaanhio that's just a small thing to help - so which function are you trying pass down?\
Jianhao Tan
@jaanhio
Aug 06 2017 13:31 UTC
handleSubmit(e){

    e.preventDefault();
    const revised = this.state.revisedRecipe;

    this.props.editRecipe(this.state.revisedRecipe);

  }
is this correct? when its submitted, it will be bound?
im trying to pass the revisedRecipe from <EditRecipe /> to the parent <RecipeItem />, whcih will then pass it to <RecipeList />, then finally to <App />
Moisés Man
@moigithub
Aug 06 2017 13:34 UTC
editRecipe function is declared on <App> ?
Jianhao Tan
@jaanhio
Aug 06 2017 13:35 UTC
@moigithub yup.
class App extends Component {

  constructor(props){
    super(props);
    this.state = {
      recipes:[],
      newRecipeTitle:"",
      newRecipeInd:""
    };
  }

  getRecipes(){
    this.setState({recipes:[
      {
        id: uuid.v4(),
        food: "pumpkin pie",
        ingredients: ["pumpkin puree", "sweetened condensed milk", "eggs", "pumpkin pie spice", "pie crust"]
      },
      {
        id: uuid.v4(),
        food: "spaghetti",
        ingredients: ["noodles", "tomato sauce", "meatballs"]
      },
      {
        id: uuid.v4(),
        food: "onion pie",
        ingredients: ["onion", "pie crust"]
      },

    ]});
  }

  componentWillMount(){
    this.getRecipes();
  }

  handleAddRecipe(recipe){
    let recipes = this.state.recipes;
    console.log(recipes);
    recipes.push(recipe);
    console.log(recipes);
    this.setState({recipes: recipes});
  }

  handleDeleteRecipe(id){
    let recipes = this.state.recipes;
    let index = recipes.findIndex(x => x.id === id);
    recipes.splice(index,1);
    this.setState({recipes: recipes});
  }

  handleEditRecipe(id, revised){
    let recipes = this.state.recipes;
    console.log(recipes);
    let index = recipes.findIndex(x => x.id === id);
    recipes.splice(index,1,revised);
    console.log(recipes);
    this.setState({recipes: recipes});
  }

  render() {
    return (
      <div className="App">
        <RecipeList  recipes={this.state.recipes} onDelete={this.handleDeleteRecipe.bind(this)} onEdit={this.handleEditRecipe.bind(this)}/>
        <AddRecipe addRecipe={this.handleAddRecipe.bind(this)}/>
      </div>
    );
  }
}
class RecipeList extends Component{

deleteRecipe(id){
  this.props.onDelete(id);
}

editRecipe(index){

}

  render(){

    let recipeItem;

    if(this.props.recipes){
      recipeItem=this.props.recipes.map((recipe) => {
        return(
          <RecipeItem onEdit={this.editRecipe.bind(this)} onDelete={this.deleteRecipe.bind(this)} key={recipe.id} recipe={recipe}/>
        )
      });
    }

    return(
      <div className="recipeList box">
      {recipeItem}
      </div>
    )
class RecipeItem extends Component{

  deleteRecipe(id){
    this.props.onDelete(id);
  }

  // editRecipe(id, revised){
  //   this.props.onEdit(id, revised);
  // }

  editRecipe(){
      this.props.onEdit(this.props.index);
  }

  render(){

    let recipe=this.props.recipe
    let foodName=recipe.food;
    let ingredientItem;

    if(recipe.ingredients){
      ingredientItem=recipe.ingredients.map(ingredient=>{
        return(
          <a className="panel-block">
            {ingredient}
          </a>
        )
      })
    }
    return(
      <ul>
        <li className="Recipe">
        <Collapsible trigger={foodName} transitionTime="200" easing="ease-in-out">
        <nav className="panel">
          <p className="panel-heading">
            Ingredients
          </p>
          {ingredientItem}
          <div className="panel-block">
            <button className="button is-warning is-outlined" onClick={this.deleteRecipe.bind(this, this.props.recipe.id)}>
              Delete
            </button>
            <EditRecipe recipe={this.props.recipe} editRecipe={this.editRecipe.bind(this, this.props.recipe.id)}/>
          </div>
          </nav>
        </Collapsible>
        </li>
      </ul>
    );
  }
}
Greg Duncan
@GregatGit
Aug 06 2017 13:37 UTC
@jaanhio if you are changing the state you should write the function in that component - not in the childs
then pass down the function
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:39 UTC
^
this is what i meant earlier
Greg Duncan
@GregatGit
Aug 06 2017 13:39 UTC
@jaanhio Try sending down a simple function that console.logs the recipe you are clicking on
Jianhao Tan
@jaanhio
Aug 06 2017 13:39 UTC
@GregatGit i added it in my <App />
Greg Duncan
@GregatGit
Aug 06 2017 13:40 UTC
@jaanhio you wouldn't do this
class RecipeList extends Component{

deleteRecipe(id){
  this.props.onDelete(id);
}
Stuhl
@Stuhl
Aug 06 2017 13:41 UTC
do we have to do extends in ES6 to use classes?
Jianhao Tan
@jaanhio
Aug 06 2017 13:41 UTC
@GregatGit sorry, kinda confused. what do you mean i wouldnt do that?
Darth Skywalker
@AdiSkywalker
Aug 06 2017 13:43 UTC
@GregatGit You'd be surprised how many people end up doing something like that :laughing:
Greg Duncan
@GregatGit
Aug 06 2017 13:43 UTC
@jaanhio
Here is an example of a component child I wrote that receives a fucntion as a prop
const Cell = (props) => {
  let cellClass = `cell ${props.class}`
  return (
    <div id={props.id} 
        className={cellClass}
        onClick={props.turnOffOn}
        >
    </div>
  )
}
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:46 UTC
@GregatGit wait.. i have a question
delete() { this.props.deleteFn(this.props.index); }
is this wrong?
i've passed the delete function to my child as a prop
Jianhao Tan
@jaanhio
Aug 06 2017 13:47 UTC
@GregatGit same question as @abhinav-thinktank . is my delete function wrong too?
Greg Duncan
@GregatGit
Aug 06 2017 13:49 UTC
@jaanhio @abhinav-thinktank When you are changing the state of a component - you write the function in that component and then pass as a prop to child components
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:49 UTC
@GregatGit yes, my deleteFn changes it's own state
it's passed to a child prop as deleteFn
i also pass the index to the child prop
Greg Duncan
@GregatGit
Aug 06 2017 13:49 UTC
@abhinav-thinktank its fine to pass any function as a prop
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:50 UTC
@GregatGit oh ok
so calling the
 delete() {
   this.props.deleteFn(this.props.index);
  }
from the child is fine?
deleteFn is written inside my parent
but called from the child
Greg Duncan
@GregatGit
Aug 06 2017 13:51 UTC
@abhinav-thinktank first - don't call a function delete - that is a reserved word
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:51 UTC
oh
ok
Greg Duncan
@GregatGit
Aug 06 2017 13:52 UTC

@abhinav-thinktank when you declare a function

myDeleteFunc = () => ...

so it binds this automatically

Abhinav Mishra
@abhinav-m
Aug 06 2017 13:53 UTC
@GregatGit ok
so what im doing above is wrong?
i mean i can improve upon it using =>
@jaanhio you wouldn't do this
class RecipeList extends Component{

deleteRecipe(id){
  this.props.onDelete(id);
}
Greg Duncan
@GregatGit
Aug 06 2017 13:55 UTC
@abhinav-thinktank you shouldn't be declaring new functions inside the child component just to use the function you have passed down as a prop
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:55 UTC
@GregatGit aah..
Jianhao Tan
@jaanhio
Aug 06 2017 13:55 UTC
@GregatGit ohhhhh
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:55 UTC
it's done on the click of a button
Jianhao Tan
@jaanhio
Aug 06 2017 13:56 UTC
@GregatGit so its is onClick, its fine?
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:56 UTC
so i just write it directly as onClick = {}
Greg Duncan
@GregatGit
Aug 06 2017 13:57 UTC
@abhinav-thinktank
const MyChildComponent = ()=> (
  <div>
  onClick={props.myDelete} // or whatever you called the prop
</div>
)
@jaanhio yes - in the child prop that is going to use the function
Jianhao Tan
@jaanhio
Aug 06 2017 13:59 UTC
@GregatGit ahh thank you so much for clarifying this for us
CamperBot
@camperbot
Aug 06 2017 13:59 UTC
jaanhio sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 875 | @gregatgit |http://www.freecodecamp.com/gregatgit
Abhinav Mishra
@abhinav-m
Aug 06 2017 13:59 UTC
@GregatGit thank you
CamperBot
@camperbot
Aug 06 2017 13:59 UTC
abhinav-thinktank sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 876 | @gregatgit |http://www.freecodecamp.com/gregatgit
Jianhao Tan
@jaanhio
Aug 06 2017 13:59 UTC
sounds like a complete re-write is necessary
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:00 UTC
another question though, my delete function is using an index to delete a specific item in my paren't state
onClick = {props.myDelete(this.props.index)}
is this fine?
Jianhao Tan
@jaanhio
Aug 06 2017 14:00 UTC
@GregatGit one question. declaring a new function inside the child component just to use the function we have passed down as a prop is not recommended. but is it wrong per se? i mean it could still work right?
Marco Galizzi
@Tezenn
Aug 06 2017 14:00 UTC
hello i'm doing the caluclator, the button "+" when clicked should concatenate a + to the string of the operation, but it alwasy attach two plus not one.. i don't understand why
Darth Skywalker
@AdiSkywalker
Aug 06 2017 14:00 UTC
@abhinav-thinktank : Why would you pass this.props.indexagain?
you're calling props.myDelete and index is also on props.
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:01 UTC
@AdiSkywalker yes..
@AdiSkywalker my recipes are an array
Darth Skywalker
@AdiSkywalker
Aug 06 2017 14:01 UTC
So in your myDelete function, you can refere yourindex` directly as this.index
Greg Duncan
@GregatGit
Aug 06 2017 14:01 UTC
@jaanhio I'm not sure - but you should be doing that
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:02 UTC
@AdiSkywalker im not sure if you're correct about this..
since i dont have this.index stored anywhere
Darth Skywalker
@AdiSkywalker
Aug 06 2017 14:02 UTC
never mind
Greg Duncan
@GregatGit
Aug 06 2017 14:03 UTC
@abhinav-thinktank should be ok - in your component console.log things
so console.log(this.props.index) to see if you are passing down the index
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:04 UTC
@GregatGit this is my pen if you want to take a quick look at the code structure and point out any issues with it
it's working but i may not be using the best practices..
@AdiSkywalker {this.state.recipes.map((recipeDetails,i)=> <RecipeInfo key={i} recipeDetails = {recipeDetails} deleteFn={this.deleteRecipe} index={i} editRecipe={this.editRecipe}/>)}
Greg Duncan
@GregatGit
Aug 06 2017 14:06 UTC
@abhinav-thinktank first rule of being a dev is get it to work
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:06 UTC
yeah, my previous work was flawed too
i mean the structure was not super good
:(
@AdiSkywalker this is where i pass the current recipes in my state to my child component
Darth Skywalker
@AdiSkywalker
Aug 06 2017 14:07 UTC
@abhinav-thinktank will take a look in some time.. A bit busy with something else
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:07 UTC
since i want to delete a particular index, i use this.props.index in my child's delete button onClick
Jianhao Tan
@jaanhio
Aug 06 2017 14:07 UTC

@GregatGit

for my add new recipe function i did it this way,

handleSubmit(e){    
if(this.refs.recipeName.value === ""){
      alert("Recipe name is required!");
    }
    else{
      this.setState({newRecipe:{
        id: uuid.v4(),
        food: this.refs.recipeName.value,
        ingredients: this.refs.ingredients.value.split(","),
        modalIsOpen: false
      }}, function(){
        this.props.addRecipe(this.state.newRecipe);
      });
    }
    e.preventDefault();
  }
<AddRecipe addRecipe={this.handleAddRecipe.bind(this)}/>
handleAddRecipe(recipe){
    let recipes = this.state.recipes;
    console.log(recipes);
    recipes.push(recipe);
    console.log(recipes);
    this.setState({recipes: recipes});
  }

is this ok?

Abhinav Mishra
@abhinav-m
Aug 06 2017 14:07 UTC
@AdiSkywalker allright
@GregatGit thanks for the feedback :D
CamperBot
@camperbot
Aug 06 2017 14:07 UTC
abhinav-thinktank sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: abhinav-thinktank already gave gregatgit points
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:07 UTC
hope to improve stuff in the next iteration
Greg Duncan
@GregatGit
Aug 06 2017 14:11 UTC
@abhinav-thinktank great stuff - If its working fine I would leave it and move on to the next challenge - I would encourage you to use create-react-app and move over to gitHub.
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:12 UTC
@GregatGit ah you mean host it on github?
i do use create-react-app
then paste the code here
@GregatGit thank you, i will look into doing that for my next project
CamperBot
@camperbot
Aug 06 2017 14:12 UTC
abhinav-thinktank sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: abhinav-thinktank already gave gregatgit points
Darth Skywalker
@AdiSkywalker
Aug 06 2017 14:14 UTC
@abhinav-thinktank can you send me the link to this recipe box project description/use cases?
Greg Duncan
@GregatGit
Aug 06 2017 14:14 UTC
@abhinav-thinktank ok For you next app try to us simple components to make up your big one
Darth Skywalker
@AdiSkywalker
Aug 06 2017 14:14 UTC
I'm gonna start building it now.. Just to time myself
Sunday adventure
Abhinav Mishra
@abhinav-m
Aug 06 2017 14:14 UTC
^
@GregatGit ok
i'll try to lay out a definitive structure before digging into it
Greg Duncan
@GregatGit
Aug 06 2017 14:16 UTC
@abhinav-thinktank @jaanhio I have just been going through the same problem and trying to get my head around passing down functions as props - have to go - catch you later and thanks
CamperBot
@camperbot
Aug 06 2017 14:16 UTC
gregatgit sends brownie points to @abhinav-thinktank and @jaanhio :sparkles: :thumbsup: :sparkles:
:cookie: 481 | @abhinav-thinktank |http://www.freecodecamp.com/abhinav-thinktank
:cookie: 310 | @jaanhio |http://www.freecodecamp.com/jaanhio
Bryan Reese
@breese8009
Aug 06 2017 15:18 UTC
yooooooooawwwww
GeorgeII
@GeorgeII
Aug 06 2017 15:30 UTC
why does this code alert NaN?
const randomCell = Math.floor(Math.random * 9 + 1);
 alert(randomCell);
ok
Cody Seibert
@codyseibert
Aug 06 2017 15:31 UTC
Math.random()
GeorgeII
@GeorgeII
Aug 06 2017 15:31 UTC
there should be Math.floor()
@codyseibert yeah
I meant it
@codyseibert ty
CamperBot
@camperbot
Aug 06 2017 15:31 UTC
georgeii sends brownie points to @codyseibert :sparkles: :thumbsup: :sparkles:
:cookie: 88 | @codyseibert |http://www.freecodecamp.com/codyseibert
Cody Seibert
@codyseibert
Aug 06 2017 15:31 UTC
np
Thayyeb salim
@Thayyebsalim
Aug 06 2017 15:56 UTC
Can anyone tell me a bit about Git?
Abhinav Mishra
@abhinav-m
Aug 06 2017 16:01 UTC
@Thayyebsalim if you wanna learn, do the fcc section for git
@Thayyebsalim it's towards the end of the map, near the backend section
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:02 UTC
I just wanna know why use Git @abhinav-thinktank
Abhinav Mishra
@abhinav-m
Aug 06 2017 16:03 UTC
@Thayyebsalim it's a version control system
@Thayyebsalim basically, for two things
allows multiple people to work on a codebase at once
it allows you to see what changes were made to a codebase over time
and if needed, you can backtrack to those changes
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:04 UTC
aaah thanks
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:05 UTC
I've seen people upload websites with yourwebsitename.github.io
is it payed?
Abhinav Mishra
@abhinav-m
Aug 06 2017 16:06 UTC
i dont think so
github allows you to host pages
im not sure if there's a limit to the content you can host
it can act as a good place to show your portfolio to people
Thayyeb salim
@Thayyebsalim
Aug 06 2017 16:06 UTC
Oh
Thanks @abhinav-thinktank
CamperBot
@camperbot
Aug 06 2017 16:06 UTC
thayyebsalim sends brownie points to @abhinav-thinktank :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @abhinav-thinktank |http://www.freecodecamp.com/abhinav-thinktank
Abhinav Mishra
@abhinav-m
Aug 06 2017 16:07 UTC
@Thayyebsalim :+1:
Karol
@nef4r1us
Aug 06 2017 16:34 UTC
Can I get some help please?
My problem is that I cannot make new XMLHttpRequest from eventListener. How can i achieve that (I can use same URL because when refreshed it gives different JSON)
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status == 200 && this.readyState==4) {
        console.log(this.responseText)
    }
};
xmlhttp.open("GET", url, true);
xmlhttp.send();


btn.addEventListener("click", function() {
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.status == 200 && this.readyState==4) {
            console.log(JSON.parse(this.responseText))
        }
    };

    xmlhttp.open("GET", url, true);
    xmlhttp.send();
})
Cody Seibert
@codyseibert
Aug 06 2017 16:41 UTC
@nef4r1us where is xmlhttp defined?
Karol
@nef4r1us
Aug 06 2017 16:41 UTC
@codyseibert global variable
Cody Seibert
@codyseibert
Aug 06 2017 16:41 UTC
I would think you'd need to call new XMLHttpRequest in your click callback somewhere; right now you are using the same one
one sec, let me try something
can you paste that line where you define it for me?
Karol
@nef4r1us
Aug 06 2017 16:42 UTC
@codyseibert I tried. I tried declaring new, I tried xmlhttp.abort();
Moisés Man
@moigithub
Aug 06 2017 16:42 UTC
wonder if xml have a close method....
Karol
@nef4r1us
Aug 06 2017 16:42 UTC

@codyseibert ```
var xmlhttp = new XMLHttpRequest();

xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200 && this.readyState==4) {
console.log(this.responseText)
}
};
xmlhttp.open("GET", quoteURL, true);
xmlhttp.send();

newQuoteBtn.addEventListener("click", function() {
xmlhttp.abort();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.status == 200 && this.readyState==4) {
console.log(JSON.parse(this.responseText))

    }
};

xmlhttp.open("GET", quoteURL, true);
xmlhttp.send();

})
```

Cody Seibert
@codyseibert
Aug 06 2017 16:42 UTC
yikes
Karol
@nef4r1us
Aug 06 2017 16:42 UTC
@codyseibert
var xmlhttp = new XMLHttpRequest();



xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status == 200 && this.readyState==4) {
        console.log(this.responseText)
    }
};
xmlhttp.open("GET", quoteURL, true);
xmlhttp.send();


newQuoteBtn.addEventListener("click", function() {
xmlhttp.abort();
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.status == 200 && this.readyState==4) {
            console.log(JSON.parse(this.responseText))

        }
    };

    xmlhttp.open("GET", quoteURL, true);
    xmlhttp.send();
})
Cody Seibert
@codyseibert
Aug 06 2017 16:42 UTC
thanks
what's quoteURL
can you give me an example
@codyseibert when u refresh it gives different results
@codyseibert I did this kind of app on jquiery without deeper understanding, now I want to make it in vanilla JS
Cody Seibert
@codyseibert
Aug 06 2017 16:51 UTC
@nef4r1us
<script>
      function getQuote (cb) {
        var xmlhttp = new XMLHttpRequest();
        var quoteURL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand"

        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.status == 200 && this.readyState==4) {
            cb(this.responseText);
          }
        };
        xmlhttp.open("GET", quoteURL, true);
        xmlhttp.send();
      }

      document.querySelector('button').addEventListener("click", function() {
        getQuote(function(quote) {
          console.log(quote);
        });
      })
</script>
^ that works for me
I think you might need to recreate the XMLHttpRequest each time
Karol
@nef4r1us
Aug 06 2017 16:52 UTC
@codyseibert What should I pass as cb?
Cody Seibert
@codyseibert
Aug 06 2017 16:53 UTC
one sec
Karol
@nef4r1us
Aug 06 2017 16:55 UTC
@codyseibert Still I get the same quote...
Cody Seibert
@codyseibert
Aug 06 2017 16:55 UTC
<script>
  var xmlhttp = new XMLHttpRequest();
  var quoteURL = "http://quotesondesign.com/wp-json/posts?filter[orderby]=rand"
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status == 200 && this.readyState==4) {
      console.log(this.responseText);
    }
  };

  document.querySelector('button').addEventListener("click", function() {
    xmlhttp.open("GET", quoteURL, true);
    xmlhttp.send();
  })
</script>
this works as well ^
Karol
@nef4r1us
Aug 06 2017 16:59 UTC
@codyseibert Ok! This works. Thank you very much! Have a nice sunday! God bless you!
CamperBot
@camperbot
Aug 06 2017 16:59 UTC
nef4r1us sends brownie points to @codyseibert :sparkles: :thumbsup: :sparkles:
:cookie: 89 | @codyseibert |http://www.freecodecamp.com/codyseibert
Cody Seibert
@codyseibert
Aug 06 2017 17:00 UTC
@nef4r1us do you understand why it's working though?
vs why it didn't work before?
Karol
@nef4r1us
Aug 06 2017 17:00 UTC
@codyseibert Yes. Because I request everytime I click on it. Now, if I want to have some quote at start I have to make IFEE
Cody Seibert
@codyseibert
Aug 06 2017 17:03 UTC
@nef4r1us I just tried the original code you sent me and it works fine
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
  if (xmlhttp.status == 200 && this.readyState==4) {
    console.log(this.responseText)
  }
};
xmlhttp.open("GET", quoteURL, true);
xmlhttp.send();

document.querySelector('button').addEventListener("click", function() {
  xmlhttp.abort();
  xmlhttp.onreadystatechange = function() {
    if (xmlhttp.status == 200 && this.readyState==4) {
      console.log(this.responseText)
    }
  };

  xmlhttp.open("GET", quoteURL, true);
  xmlhttp.send();
})
Karol
@nef4r1us
Aug 06 2017 17:04 UTC
@codyseibert but does this change quote afdter clicking on button?
Cody Seibert
@codyseibert
Aug 06 2017 17:04 UTC
yeah, a new quote each time
printed to the consol
Karol
@nef4r1us
Aug 06 2017 17:04 UTC
@codyseibert That's why I was confused. It should've been working.
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 17:05 UTC
hello everyone
Cody Seibert
@codyseibert
Aug 06 2017 17:05 UTC
yeah, there must have been a small bug in it we didn't notice
oh well, you got it working now !
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 17:05 UTC
just a quick question, on the tic tac toe the people who allready did it, did you used a math . random to make the computer move or you used something more complex?
Cody Seibert
@codyseibert
Aug 06 2017 17:06 UTC
I used minimax
which is a little complex
if you want an AI a little smarter than random, you could get all the empty slots, try each one, pick the slot that makes the computer win (or the slot that prevents the player from winning)
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 17:08 UTC
that's a good trick
on the computer turn pick every places that would make the user win if there is one fill it
good one thanks mate
Cody Seibert
@codyseibert
Aug 06 2017 17:08 UTC
np
Karol
@nef4r1us
Aug 06 2017 17:12 UTC
@codyseibert index.html:1 XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Cody Seibert
@codyseibert
Aug 06 2017 17:13 UTC
^ are you trying to run this in codepen or something?
Karol
@nef4r1us
Aug 06 2017 17:13 UTC
@codyseibert Nah. First I tried on Mozilla, now on chrome
Cody Seibert
@codyseibert
Aug 06 2017 17:13 UTC
so you are just opening the file in your browser?
I think you actually need to host it on your machine to prevent this issue
or open your browser in a less secure mode
Moisés Man
@moigithub
Aug 06 2017 17:14 UTC
or use a proxy as temp fix
Cody Seibert
@codyseibert
Aug 06 2017 17:17 UTC
@moigithub do you have an example/
Moisés Man
@moigithub
Aug 06 2017 17:18 UTC
if i recall ppl used that https://cors-anywhere.herokuapp.com/
var quoteURL = "https://cors-anywhere.herokuapp.com/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand"
or https://crossorigin.me/
Abhinav Mishra
@abhinav-m
Aug 06 2017 17:26 UTC
you could also use jsonp
couldn't you?..
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 17:28 UTC
@codyseibert
  function computerTurn (){
   if(turns[0]===userType && turns[1]===userType && turns[2] ===""){
     turns[2] === computerType;
   }
  }
this gonna look messy
and really big
and I can't think of any other way around hum
cause you have to cover every possiblity
plus I have to check first if there isnt anyway of the computer wining before checking if it can stop the user
Guderian Raborg
@hypercuber
Aug 06 2017 17:57 UTC
Thayyeb salim
@Thayyebsalim
Aug 06 2017 18:02 UTC
guys the twitch API url seems confusing
Cody Seibert
@codyseibert
Aug 06 2017 18:05 UTC
@tiagocorreiaalmeida I'm not sure what this code does?
Brad
@bradtaniguchi
Aug 06 2017 18:06 UTC
@Thayyebsalim if your on the twitch api challenge, its actually advised to not even use the twitch api (look near the bottom of the challenge description)
since they require an api key, and codepen is public.
Guderian Raborg
@hypercuber
Aug 06 2017 18:06 UTC
Nvm, I got it to work and my sort too
Thayyeb salim
@Thayyebsalim
Aug 06 2017 18:07 UTC
Yes it says that
Mark Mascarenhas
@Freedom41
Aug 06 2017 18:16 UTC

``` truncateString(str, num) {
// Clear out that junk in your trunk
var a = str.slice(0,(num-3));
var b = str.slice(0, num);

if(str.length === num) {
return str;
}
else if(str.length > num) {
return a+'...';
}
else if(str.length < num) {
return b + '...';
}
}

truncateString("A-tisket a-tasket A green and yellow basket", 11);
```

Please help me out guys, individually I'm getting it right...when using an if statement the last condition is not evaluating to true
Brad
@bradtaniguchi
Aug 06 2017 18:27 UTC
@Freedom41 put your code on a new line after the backticks please :)
@Freedom41 well I assume its because the str.length is never less than the num. You subtrack it for var a, but your not checking that.
Stephen James
@sjames1958gm
Aug 06 2017 18:29 UTC
@Freedom41 Your last check is wrong. You never check num <= 3
@Freedom41 if str.length <= num then no truncation
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:31 UTC
@codyseibert sorry for taking so long
Bradley Sands
@sandsbe
Aug 06 2017 18:32 UTC
class Task {
  constructor(name) {
    this.name = name;
    this.completed = false;
  };
  complete() {
    console.log('completing task: '+ this.name);
    this.completed = true;
  };
  save() {
  console.log('saving Task: ' + this.name);
  };
}

// prototype - Classname.prototype.methodName = function() {}

var task1 = new Task('create a demo for constructors');
var task2 = new Task('create a demo for modules');
var task3 = new Task('create a demo for singletons');
var task4 = new Task('create a demo for prototypes');

task1.complete();
task2.save();
task3.save();
task4.save();
Keep getting a syntax error for some reason
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:32 UTC
it checks if the first position in the tic tac toe game is filled by the user and if the second aswell is fell by the user if so
the computer will place there a 0
so that the user doesnt win
its the idea we talked check every possiblity before doing a math.random
Stephen James
@sjames1958gm
Aug 06 2017 18:33 UTC
@sandsbe Which line?
@tiagocorreiaalmeida Do you have a function that checks for wins?
Bradley Sands
@sandsbe
Aug 06 2017 18:34 UTC
Great question. Not sure. File ran when I had everything in constructors. Trying to try out classes and it won't run. The issue should be in class Task {} syntax.
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:34 UTC
I do
it checks every possiblity
but what im trying to build is the computer playing
Stephen James
@sjames1958gm
Aug 06 2017 18:35 UTC
@tiagocorreiaalmeida Then if your function is generic enough, you could pass it test plays by the computer and pick one that returns a win.
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:35 UTC
and I dont wanna simply use a math.random would make it easier for every player :D
Stephen James
@sjames1958gm
Aug 06 2017 18:36 UTC
@tiagocorreiaalmeida Then if there are none pass it test user plays, and block any that are a win
@sandsbe I copied that into jsbin and it ran fine without errror
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:37 UTC
you mean use .test?
and by the way thanks @sjames1958gm by looking into it
CamperBot
@camperbot
Aug 06 2017 18:37 UTC
tiagocorreiaalmeida sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8254 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Aug 06 2017 18:38 UTC
@tiagocorreiaalmeida No, use your function that detects winning positions to "test" plays by the computer.
Assuming your function takes the board as a parameter
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:39 UTC
it takes a array that works as the board :D
will paste my pen if you can look into it sec
will just comment it I guess so its easier for you to read what's necessary
Stephen James
@sjames1958gm
Aug 06 2017 18:40 UTC
@tiagocorreiaalmeida Then you can copy the array, make a computer play in one of the unused, and test if that is a win, if so make that play.
If not move to another unused one.
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:41 UTC
function winner(storedPlays,lastPlayed){
    if(storedPlays[0] === lastPlayed && storedPlays[1]===lastPlayed && storedPlays[2] ===lastPlayed){
      console.log("Player "+lastPlayed+" won");
    }else if(storedPlays[0] === lastPlayed && storedPlays[3]===lastPlayed && storedPlays[6] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }else if(storedPlays[6] === lastPlayed && storedPlays[7]===lastPlayed && storedPlays[8] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }else if(storedPlays[2] === lastPlayed && storedPlays[5]===lastPlayed && storedPlays[8] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }else if(storedPlays[1] === lastPlayed && storedPlays[4]===lastPlayed && storedPlays[7] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }else if(storedPlays[3] === lastPlayed && storedPlays[4]===lastPlayed && storedPlays[5] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }
    else if(storedPlays[0] === lastPlayed && storedPlays[4]===lastPlayed && storedPlays[8] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }else if(storedPlays[2] === lastPlayed && storedPlays[4]===lastPlayed && storedPlays[6] ===lastPlayed){
       console.log("Player "+lastPlayed+" won");
    }
  }
this is my function
probably not the best tough
Mark Mascarenhas
@Freedom41
Aug 06 2017 18:42 UTC
@brad
@brad thanks
CamperBot
@camperbot
Aug 06 2017 18:43 UTC
freedom41 sends brownie points to @brad :sparkles: :thumbsup: :sparkles:
:warning: @brad's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:43 UTC
I can make it return true in every if?
Mark Mascarenhas
@Freedom41
Aug 06 2017 18:43 UTC
@sjames1958gm thanks :)
CamperBot
@camperbot
Aug 06 2017 18:43 UTC
freedom41 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8255 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Mark Mascarenhas
@Freedom41
Aug 06 2017 18:43 UTC
Ill try it now
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:43 UTC
and return the place so when it returns true and I get the value I need and place the computer play there?
confusing as hell sorry :D
Stephen James
@sjames1958gm
Aug 06 2017 18:45 UTC
@tiagocorreiaalmeida Yes, and false at the end. Then you can use this to "test" potential computer plays for wins
@Freedom41 :+1:
Rafael J. Rodriguez
@Rafase282
Aug 06 2017 18:45 UTC
@Maluchukwu honestly I don't remember if I used that algo or not.
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:46 UTC
it has only 1 little problem will be doing a not necessary console log?
Stephen James
@sjames1958gm
Aug 06 2017 18:47 UTC
@tiagocorreiaalmeida Well I assumed the console.log were for testing only
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:48 UTC
it was nm xd, will give some changes to this thanks @sjames1958gm again
CamperBot
@camperbot
Aug 06 2017 18:48 UTC
tiagocorreiaalmeida sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: tiagocorreiaalmeida already gave sjames1958gm points
Stephen James
@sjames1958gm
Aug 06 2017 18:48 UTC
@camperbot gl
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 18:55 UTC
@sjames1958gm nm can't do this with the function I have grr :D
Bradley Sands
@sandsbe
Aug 06 2017 18:55 UTC
@sjames1958gm ty. Good to know. I'm trying to do some trial/practice work in Firefox scratchpad. Maybe need to switch over to jsbin, or fiddle, or plunker. I don't like having js practice in Codepen, I don't care for its console.
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:09 UTC
Guys,
Is there something wrong in my code?
https://codepen.io/Thayyeb_Itachi/pen/rzxKPg
Every time I reload it changes place
Stephen James
@sjames1958gm
Aug 06 2017 19:13 UTC
@Thayyebsalim Just depending on the order they come back.
korzo
@korzo
Aug 06 2017 19:13 UTC
@Thayyebsalim It's normal. Ajax is asynchronous and you can't predict the order in which responses will return
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:13 UTC
Oh
thanks @korzo
CamperBot
@camperbot
Aug 06 2017 19:15 UTC
thayyebsalim sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 347 | @korzo |http://www.freecodecamp.com/korzo
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:15 UTC
Is there somewhere I can learn more?
Can it be toggled
I've seen the parameter async
Gulsvi
@gulsvi
Aug 06 2017 19:17 UTC
@Thayyebsalim if you want it in the same order, create your HTML before you call your ajax
Tai Jones
@taiJones00
Aug 06 2017 19:17 UTC
//1. sort individual indexes in sub arrays from largest to smallest
//2. push arr[i][0] to largeArr four times
//3. return array with largest numbers
Is this a good algorithm for the return largest numbers algorithm
Stephen James
@sjames1958gm
Aug 06 2017 19:18 UTC
@taiJones00 That works
Tai Jones
@taiJones00
Aug 06 2017 19:18 UTC

function largestOfFour(arr) {
// You can do this!
var largeArr;

//Step 1: Sort

// Step 2: Add onto

for (var i = 0; i <= arr; i++)
{
largeArr.push(arr[i][0]);
}

// Step 3: Return
return largeArr;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);

Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:18 UTC
just turned of async
Tai Jones
@taiJones00
Aug 06 2017 19:18 UTC
Is step two correct
@sjames1958gm
Gulsvi
@gulsvi
Aug 06 2017 19:19 UTC
Like this @Thayyebsalim
  for (let i = 0; i < users.length; i++) {
    // create the HTML for each user first
    $(".channel").append('<div id="' + users[i].name + '"></div>');

    url = "https://wind-bow.glitch.me/twitch-api/streams/" + users[i].name;
    $.ajax({
      url: url,
      type: "GET",
      dataType: "json",
      success: function(data) {
        if (data.stream == null) {
          // use the username to fill in data for each element
          $("#" + users[i].name).append("<div class='offline'>Offline</div>");
        }
        $("#" + users[i].name).append("<div>" + data.stream.game + "</div>");
      }
    });
  }
Tai Jones
@taiJones00
Aug 06 2017 19:19 UTC
becuase it's not working in the console but I feel the logic is the same
Stephen James
@sjames1958gm
Aug 06 2017 19:19 UTC
@taiJones00 step one should be done inside the loop
Tai Jones
@taiJones00
Aug 06 2017 19:19 UTC
okay one second
Stephen James
@sjames1958gm
Aug 06 2017 19:20 UTC
@taiJones00 i <= arr; this is wrong should be i < arr.length
Tai Jones
@taiJones00
Aug 06 2017 19:21 UTC
var largeArr;

  for (var i = 0; i <= arr.length; i++)
    {
      // Step 1: Sort
      arr[i].sort(function(a, b)
      {
        return b - a;
      });
      // Step 2: Add onto
      largeArr.push(arr[i][0]);
    }

  // Step 3: Return
  return largeArr;
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:22 UTC
i think async:false, worked
thanks @SkyC0der
CamperBot
@camperbot
Aug 06 2017 19:22 UTC
thayyebsalim sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2319 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 06 2017 19:23 UTC
@Thayyebsalim That works, but it is usually not a good practice to use async: false.
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:23 UTC
Oh
Tai Jones
@taiJones00
Aug 06 2017 19:23 UTC
@sjames1958gm
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:23 UTC
so what happens when I create the div first? @SkyC0der
what is happening
i'm curious
Gulsvi
@gulsvi
Aug 06 2017 19:24 UTC
@Thayyebsalim When you create the div first, you create a placeholder for that user's data.
In your ajax, the data will come back when we get it from the server, so you just tell it where to put the data $('#user-name')
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:25 UTC
so if it was not there, the data will get appended after getting the whole data? @SkyC0der
Stephen James
@sjames1958gm
Aug 06 2017 19:26 UTC
@taiJones00 not <= just <
But looks correct
Gulsvi
@gulsvi
Aug 06 2017 19:27 UTC
If it wasn't there first, the data would get appended when it comes back from the server - which can be in any order. @Thayyebsalim It's kind of like opening up 10 websites in your browser. You don't know which tab will finish loading first.
Darth Skywalker
@AdiSkywalker
Aug 06 2017 19:28 UTC
Gotta think of some clean way to transfer data upstream
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:29 UTC
Oh thanks again @SkyC0der
CamperBot
@camperbot
Aug 06 2017 19:29 UTC
thayyebsalim sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: thayyebsalim already gave skyc0der points
Tai Jones
@taiJones00
Aug 06 2017 19:29 UTC
@sjames1958gm thank gawd
CamperBot
@camperbot
Aug 06 2017 19:29 UTC
taijones00 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8256 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Gulsvi
@gulsvi
Aug 06 2017 19:29 UTC
Any time!
Tai Jones
@taiJones00
Aug 06 2017 19:29 UTC
got it
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:29 UTC
I've got one more doubt @SkyC0der
Stephen James
@sjames1958gm
Aug 06 2017 19:29 UTC
@taiJones00 :+1:
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:30 UTC
If the user is offline the API doesn't give me much
so I should manually assigning logos would be good right? @SkyC0der
Tai Jones
@taiJones00
Aug 06 2017 19:31 UTC
@sjames1958gm why did <= not allow me to finish the problem but < did. <= gave a bunch of errors
Stephen James
@sjames1958gm
Aug 06 2017 19:31 UTC
@taiJones00 The loop will run when i === arr.length and try to access arr[arr.length] which doesn't exist
Gulsvi
@gulsvi
Aug 06 2017 19:32 UTC
@Thayyebsalim You should be able to get their logo from the /channels/ endpoint instead of /streams/
Tai Jones
@taiJones00
Aug 06 2017 19:32 UTC
oh because it goes 0 1 2 3 but the length is 4 for us and that doesn't exist for the computer?
Darth Skywalker
@AdiSkywalker
Aug 06 2017 19:32 UTC
correct
Tai Jones
@taiJones00
Aug 06 2017 19:33 UTC
danke @AdiSkywalker
CamperBot
@camperbot
Aug 06 2017 19:33 UTC
taijones00 sends brownie points to @adiskywalker :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @adiskywalker |http://www.freecodecamp.com/adiskywalker
Tai Jones
@taiJones00
Aug 06 2017 19:33 UTC
cool that worked
Darth Skywalker
@AdiSkywalker
Aug 06 2017 19:33 UTC
:+1:
Stephen James
@sjames1958gm
Aug 06 2017 19:33 UTC
@taiJones00 arr[4] doesn't exist so arr[4].sort doesnt work gives an error like sort is not defined for undefined
Elizabeth Paul
@Kowalatam
Aug 06 2017 19:35 UTC
so to do the roman numerals in the algorithm challenge makes one go crazy first ?.
cus i'm definitely almost there :(
and i haven't even started lol
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:36 UTC
I've heard rumors @Kowalatam
Elizabeth Paul
@Kowalatam
Aug 06 2017 19:37 UTC
@Thayyebsalim well, there are through.. basically spent 2 days just staring at it and wondering wtf, without writting any code lol
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:38 UTC
XD
I'll be there soon I think @Kowalatam
@SkyC0der Thanks again and again
CamperBot
@camperbot
Aug 06 2017 19:38 UTC
thayyebsalim sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: thayyebsalim already gave skyc0der points
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:39 UTC
I think button toggling is better
are you going to change to checkbox into button? @eunipa
Elizabeth Paul
@Kowalatam
Aug 06 2017 19:40 UTC
yep, .. im still staring though.... i feel like looking at a spoiler :)
Eunice Park
@eunicode
Aug 06 2017 19:40 UTC
@Thayyebsalim I'm using a checkbox so I can style it into a toggle switch~
Thayyeb salim
@Thayyebsalim
Aug 06 2017 19:40 UTC
Oh I see
Gulsvi
@gulsvi
Aug 06 2017 19:41 UTC
Happy to help @Thayyebsalim
@eunipa You'll need to hook up a change event to the checkbox so you can convert the temperature when the checkbox is clicked:
$('#temp-unit-box').on('change', function() {
  alert('I was clicked!');
});
replace the alert with your temperature conversion code
Eunice Park
@eunicode
Aug 06 2017 19:42 UTC
@Kowalatam I'm stuck on Wherefore Art Thou. I looked at the solution and get it, but coming up with my own code is hard /headdesk
Kelechi Chinaka
@ke1echi
Aug 06 2017 19:43 UTC
var calculate = function calculate(a, o, b) {
  var op = ['+','-','/','*'];
  if(op.indexOf(o) === -1) return null;
  if(o === "+") return a + b;
  if(o === "-") return a - b;
  if(o === "/") return a / b;
  if(o === "*") return a * b;
  if((o === '/') && a == 0 || b == 0) return null
}
Elizabeth Paul
@Kowalatam
Aug 06 2017 19:43 UTC
@eunipa oh c'mon, i was about skipping this one and going there .. oh welll
Kelechi Chinaka
@ke1echi
Aug 06 2017 19:43 UTC
@sjames1958gm i have the logic but my code implementation is wrong
Elizabeth Paul
@Kowalatam
Aug 06 2017 19:43 UTC
stuck here i guess
Kelechi Chinaka
@ke1echi
Aug 06 2017 19:44 UTC
for the last line i need to check if the value to be divided by is zero and return null
Stephen James
@sjames1958gm
Aug 06 2017 19:45 UTC
@kelechy You already checked "/" and returned
Darth Skywalker
@AdiSkywalker
Aug 06 2017 19:46 UTC
@kelechy I'd do if(o === "/") return b !==0 ? (a / b) : null ;
you don't need the last line
Stephen James
@sjames1958gm
Aug 06 2017 19:46 UTC
@kelechy You don't care if a is zero only if b is zero
Darth Skywalker
@AdiSkywalker
Aug 06 2017 19:46 UTC
Right.. The exception is only in case of divide by 0.
Kelechi Chinaka
@ke1echi
Aug 06 2017 19:47 UTC
yes @AdiSkywalker
i dont get what u mean @sjames1958gm
Stephen James
@sjames1958gm
Aug 06 2017 19:48 UTC
divide by zero is a problem - return null , but 0 / 10 is valid and is zero
Kelechi Chinaka
@ke1echi
Aug 06 2017 19:49 UTC
ok
Eunice Park
@eunicode
Aug 06 2017 19:53 UTC
@SkyC0der Thank you. Sorry for this late reply, I was mulling over what you said. So I need something to trigger the function. It seems obvious now, but for some reason, I thought the code would just continue to run and the browser would just figure out for itself that the state of the checkbox was checked.
CamperBot
@camperbot
Aug 06 2017 19:53 UTC
eunipa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2320 | @skyc0der |http://www.freecodecamp.com/skyc0der
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 19:53 UTC
@sjames1958gm after frontend what you recommend, backend or data visualization?
Gulsvi
@gulsvi
Aug 06 2017 19:53 UTC
@eunipa Yeah, it's a lot like hooking up a click function to a button, like you probably did for your quote machine.
the code you have to see if it is checked will only run once - when you get the weather data
Eunice Park
@eunicode
Aug 06 2017 19:56 UTC
@SkyC0der Thank you so much, that makes a lot of sense, I have a better understanding of event handlers now. For some reason I thought checking would be different from clicking /facepalm
CamperBot
@camperbot
Aug 06 2017 19:56 UTC
eunipa sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:warning: eunipa already gave skyc0der points
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2017 19:56 UTC
@SkyC0der can you give me your opinion? a bit bored of frontend projects so will stop for a few days im almost over anyway, what you recomend first backend or data visualization?
Gulsvi
@gulsvi
Aug 06 2017 19:57 UTC
@tiagocorreiaalmeida Data Visualization is supposed to come after Front-end, but they all involve some front end work when completing the projects
Stephen James
@sjames1958gm
Aug 06 2017 20:02 UTC
@tiagocorreiaalmeida data visualization -
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:02 UTC
evening yee good ol' coders! :wave:
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:07 UTC
after noon @kjuchtmans
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:07 UTC

"Symmetric Difference" lesson: how can I make a function to compute SD of 2 sets, which I can then later call to handle an 3rd set, 4th, 5th etc?

Do I just wrap the code following arguments.length<=2 in a named function?

My code sofar: Repl.it link

Thanks! chris

Kaeleb Rocha
@Kralleb
Aug 06 2017 20:09 UTC
@kjuchtmans Not quite there yet.
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:10 UTC
@Kralleb yee don't fret.. time flies when ur havin codin fun
Stephen James
@sjames1958gm
Aug 06 2017 20:13 UTC
@kjuchtmans I looped from 1 to arguments.length - 1
combining the argument[i] with the current result, which starts as arguments[0]
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:13 UTC
@kjuchtmans What if it's not fun?
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:14 UTC
@Kralleb its frickn brutal is what it is!
@sjames1958gm yeah that sounds right, but i'm not sure how to code that out (but then again, one has all night long, hasn't one
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:15 UTC
Hahaha
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:16 UTC
can someone please tell me something that can help, just something little that can make my life easier... i know i don't have any code yet, thats how lost i am. .. :(
function convertToRoman(num) {
    var roman;
    for (var i = 0; i < numeralArr.length; i++) {
        if(num === numbers[i]){
            roman = numeralArr[i];
            console.log(roman);
        } else if(num < 4) {
            roman = (numeralArr[i]).repeat(num);
            console.log(roman);
        } else if(num < 9) {

        }
    }
}

var numeralArr = ["I", "IV", "V", "IX", "X", "XL", "L", "XC", "C", "CD", "D", "CM", "M"];
var numbers = [1, 4, 5, 9, 10, 40, 50, 90, 100, 400, 500, 900, 1000];

convertToRoman(2);
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:17 UTC
@sjames1958gm a loop does feel intuitively superior to managing separate cases arguments.length<=2, versus===3, ===4 and so forth
but getting it to run smoothly is a challenge :worried:
@Kowalatam did you check the Tips link provided in the assignment? Go easy on the scrolling though; it has solutions too..
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:20 UTC
@Kowalatam You have no return statement '3'
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:20 UTC
@kjuchtmans yeah i have, first and second tip worked, third not so much
@Kralleb yeah i know, kinda unsure if i wana keep making else if statements, but it=f thats the right way, then i will continue :)
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:22 UTC
yeah, i have to redo this one. I did it in 68 lines as a switch statement haha
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:24 UTC
68 ?. oh Lord help me :)
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:25 UTC
@Kowalatam haha. Well your forloop is going to keep adding num to it because until it's done looping
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:25 UTC
@Kralleb yeah, saw that in the console
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:26 UTC
@Kowalatam @Kralleb have a fresh cup of coffee and a good read through this post
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:26 UTC
@kjuchtmans i don't take coffee, when i'm tired, i just take a nap :).
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:26 UTC
one effective line for me was (123456789).toString(10).split("")
-a nap does wonders
scarejar
@scarejar
Aug 06 2017 20:28 UTC
what is an "entry point" ?
using roll up and don't understand what an entry point is.
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:29 UTC
@kjuchtmans on my search, i saw that, but thought it might not what i wanted, eg 56 might then give VVI, is that correct ?. lol
Stephen James
@sjames1958gm
Aug 06 2017 20:29 UTC
@kjuchtmans each pass through your loop you combine the next array with the previous result
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:30 UTC
@Kowalatam is you run (123456789).toString(10).split("").map(Number) against your test number, you should get an array with tens, hundreds, thousands etc all split by commas
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:31 UTC
@kjuchtmans ohhh, that sounds very helpful,,,,
Gulsvi
@gulsvi
Aug 06 2017 20:31 UTC
@scarejar an "entry point" is what you use to open something. main.js, for example, to load up a js application. index.html to load your web page.
Stephen James
@sjames1958gm
Aug 06 2017 20:31 UTC
@scarejar entry point is the starting point in your application.
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:32 UTC
from there I set out to converting each ten, hundred, thousand etc by its roman colleague. Quite a bit of code lines but systematic and readible
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:33 UTC
@kjuchtmans hmm, i will see.. thanks.. took days ?. cus by the looks of it, might take a week :(
CamperBot
@camperbot
Aug 06 2017 20:33 UTC
kowalatam sends brownie points to @kjuchtmans :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @kjuchtmans |http://www.freecodecamp.com/kjuchtmans
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:33 UTC
mind you, this challenge is not a one-liner
scarejar
@scarejar
Aug 06 2017 20:33 UTC
ohhh, I see. Thanks @sjames1958gm @SkyC0der
CamperBot
@camperbot
Aug 06 2017 20:33 UTC
scarejar sends brownie points to @sjames1958gm and @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2322 | @skyc0der |http://www.freecodecamp.com/skyc0der
:star2: 8257 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:34 UTC
@Kowalatam okay so when you get to you're second if statement it returns numeral[i] which equals 12 because num is less than 2 every time it returns MM because it repeats twice.
Chris Juchtmans
@kjuchtmans
Aug 06 2017 20:34 UTC
@Kowalatam i've been known to spend a forthnight on one challenge. my family calls me nuts
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:35 UTC
@Kowalatam Set i to equal numeral.length after you added it and you should be good to go
@Kowalatam well... just on your way.
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:36 UTC
@Kralleb not sure if i understand
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:36 UTC
if(num === numbers[i]){
roman = numeralArr[i];
} else if(num < 4) {
roman = (numeralArr[i]).repeat(num);
i = numeralArr.length;
} else if(num < 9) {
    }
Stephen James
@sjames1958gm
Aug 06 2017 20:36 UTC
@Kowalatam You could reverse those arrays. Then compare and subtract
if (num > numeral[i]) result += romanNumeral[i]; num -= numeral[i]
Then put this is a loop
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:36 UTC
@kjuchtmans yeah, programmers are nuts :)
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:37 UTC
that way it breaks the loop
i = numeralArr.length;
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:37 UTC
@Kralleb ohhhhh, i see.. thanks
CamperBot
@camperbot
Aug 06 2017 20:37 UTC
kowalatam sends brownie points to @kralleb :sparkles: :thumbsup: :sparkles:
:cookie: 348 | @kralleb |http://www.freecodecamp.com/kralleb
Stephen James
@sjames1958gm
Aug 06 2017 20:37 UTC
@Kralleb Use break; it is more clear what the intent is
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:38 UTC
@sjames1958gm reverse it ?.
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:38 UTC
Can you break an if statement?
Stephen James
@sjames1958gm
Aug 06 2017 20:38 UTC
@Kralleb the loop is what you are breaking from
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:38 UTC
a lot of info.. i need to drink water :).
Stephen James
@sjames1958gm
Aug 06 2017 20:38 UTC
@Kowalatam Put the larger values first in the array
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:40 UTC
@sjames1958gm okay got it.
Stephen James
@sjames1958gm
Aug 06 2017 20:40 UTC
:beer:
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:40 UTC
that looks like beer not water :)
Kaeleb Rocha
@Kralleb
Aug 06 2017 20:41 UTC
It's to forget the horrors of coding...
Elizabeth Paul
@Kowalatam
Aug 06 2017 20:42 UTC
lol, try watching a movie while coding.. :)
JD Flick
@jdflick
Aug 06 2017 22:23 UTC
got a question for experienced java folks
I think I misunderstand one of the algorithm problems but I can't fathom what I'm missing
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:25 UTC
@jdflick what's up?
JD Flick
@jdflick
Aug 06 2017 22:25 UTC
@Kralleb can you take a look at this problem for me? https://www.freecodecamp.org/challenges/where-do-i-belong
specifically I'm confused about the answer examples
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:26 UTC
Sure
JD Flick
@jdflick
Aug 06 2017 22:26 UTC
the problem asks us to return the index of where the number would be inserted into a sorted array
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:26 UTC
yup
JD Flick
@jdflick
Aug 06 2017 22:27 UTC

so how could this make sense with this answer:

getIndexToIns([10, 20, 30, 40, 50], 35) should return 3

doesn't make sense since 30 is less than 35
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:27 UTC
right, so it's ascending order starting from 0. so after 30 is the 4 index
JD Flick
@jdflick
Aug 06 2017 22:27 UTC
oh wait I think I see
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:28 UTC
so 3 = 4
JD Flick
@jdflick
Aug 06 2017 22:28 UTC
ohhhh I see, they don't want the index of the number below, they want the number of where your number would be inserted
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:29 UTC
Yup you got it!
JD Flick
@jdflick
Aug 06 2017 22:29 UTC
ha! I thought they wanted the index of 30 not of 35
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:29 UTC
Haha nope, just where 35 would be placed
JD Flick
@jdflick
Aug 06 2017 22:29 UTC
gotcha, now this makes sense, thanks!
Kaeleb Rocha
@Kralleb
Aug 06 2017 22:29 UTC
Np.
Jim Tryon
@jimtryon
Aug 06 2017 22:40 UTC
Do you see anything wrong with this line of code? I keep getting an error that it’s wrong.
document.getElementsByTagName("img”);
Dan Couper
@DanCouper
Aug 06 2017 22:48 UTC
What's the error exactly? Unless I'm tiredly misreading that, it looks right
Jim Tryon
@jimtryon
Aug 06 2017 22:49 UTC
The error is just: Wrong.
That is what the tool says or try again.
Moisés Man
@moigithub
Aug 06 2017 23:06 UTC
closing quote ?
Kaeleb Rocha
@Kralleb
Aug 06 2017 23:07 UTC
@moigithub Yeah he figured that out in the main freecodecamp chat
kumquatfelafel
@kumquatfelafel
Aug 06 2017 23:25 UTC
@jimtryon " ≠ ”
Elizabeth Paul
@Kowalatam
Aug 06 2017 23:38 UTC
@sjames1958gm i did it hurray.. thank you very much :) :)
CamperBot
@camperbot
Aug 06 2017 23:38 UTC
kowalatam sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8258 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Elizabeth Paul
@Kowalatam
Aug 06 2017 23:39 UTC
@Kralleb did it will 17 lines :)... well, thats cus of @sjames1958gm though :).. i can now sleep :)
thanks @Kralleb
CamperBot
@camperbot
Aug 06 2017 23:40 UTC
kowalatam sends brownie points to @kralleb :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @kralleb |http://www.freecodecamp.com/kralleb
Kaeleb Rocha
@Kralleb
Aug 06 2017 23:41 UTC
@Kowalatam Hell yeah, good job!
aRtoo
@artoodeeto
Aug 06 2017 23:42 UTC
hi guys need help. can you explain why is this returning false?

function whatIsInAName(collection, source) {
  var arr = [];
     //returning false it should be returning true because both console. log at the bottom is the same.
    console.log(collection[0] === source);

    console.log(collection[0]); //return last: 'Capulet'
    console.log(source); //return last: 'Capulet'


  return arr;
}

whatIsInAName([{ last: "Capulet" }], { last: "Capulet" });
Kaeleb Rocha
@Kralleb
Aug 06 2017 23:43 UTC
Collection === source
not collection[0]
or collection[0] === source[0]
oh i see. it's in an array that's weird
Moisés Man
@moigithub
Aug 06 2017 23:45 UTC
{}==={}
false
{}=={}
false
if u wanna compare 2 objects u need to check its key:value pairs individually
something like
collection[0].last === source.last //true
or using bracket notation
collection[0]["last"] === source["last"]
Elizabeth Paul
@Kowalatam
Aug 06 2017 23:49 UTC
this feels like spoiler for mynext challenge so im just ganna talk a walk way from here :)
Stephen James
@sjames1958gm
Aug 06 2017 23:52 UTC
@Kowalatam :sleeping:
Elizabeth Paul
@Kowalatam
Aug 06 2017 23:53 UTC
@sjames1958gm thats what i need now, just one more episode of this animation :)
Stephen James
@sjames1958gm
Aug 06 2017 23:53 UTC
@Kowalatam :)