These are chat archives for FreeCodeCamp/HelpFrontEnd

27th
Feb 2018
Can someone help me out with this lesson?
JoEezy
@JoEeeezy_twitter
Feb 27 2018 01:10
does anyone know how to go back to challenges
I can only view solutions on my dashboard
can't continue from where i left off
Manan Shah
@mananshah51
Feb 27 2018 01:11
@JoEeeezy_twitter Do you See "Map" ?
JoEezy
@JoEeeezy_twitter
Feb 27 2018 01:12
ah,, i see it now thank you
i was looking at at the bottom of the page :smile:
this is my take on it, please tell me if you see any mistake
Manan Shah
@mananshah51
Feb 27 2018 01:23
@JoEeeezy_twitter Have a good one. Happy Learning.
Tom
@moT01
Feb 27 2018 01:59
@aguyinmontreal nice job - looks like it works
Emil
@aguyinmontreal
Feb 27 2018 02:06
:)
Tom
@moT01
Feb 27 2018 02:10
just needed a little push
Emil
@aguyinmontreal
Feb 27 2018 02:23
@moT01 yep, thanks for your help!
Tom
@moT01
Feb 27 2018 02:23
screwed again
Emil
@aguyinmontreal
Feb 27 2018 02:24
@moT01 I found that "object.keys" was good for both arrays and objects, so that helped a lot
Tom
@moT01
Feb 27 2018 02:25
fun fact - yea, thats handy - does that mean an array is an object
Brad
@bradtaniguchi
Feb 27 2018 02:26
ew using Object.keys for arrays
Emil
@aguyinmontreal
Feb 27 2018 02:27
@bradtaniguchi It's a lot better than having a different iteration for objects and a different iteration for arrays
Brad
@bradtaniguchi
Feb 27 2018 02:28
I guess, but I guess it depends on how dynamic the data could/should be
Emil
@aguyinmontreal
Feb 27 2018 02:33
@moT01 and I never found "how to save" as you said; I tried saving like this: this["obj"] = newObj, but this["obj.nestedObj.nestedObj2"] doesn't work, it must be this["obj"]["nestedObj"]["nestedObj2"] which is impossible to render dynamically
@moT01 and yes, an array is just an object with numeral keys and some special data :)
@bradtaniguchi take a look at my code
Brad
@bradtaniguchi
Feb 27 2018 02:44
can't look at it, refreshes automatically on firefox for some reason :/
Emil
@aguyinmontreal
Feb 27 2018 02:46
@bradtaniguchi it's working on my firefox; you tried this link? https://codepen.io/anon/pen/KQrMYq
Brad
@bradtaniguchi
Feb 27 2018 02:46
@aguyinmontreal Yea, it auto reloads, ive seen it before i think its a combo of my firefox/OS/and codepen
works fine in chrome so idk haah
Tom
@moT01
Feb 27 2018 02:47
@aguyinmontreal you sure it's impossible
i dont think it is
Brad
@bradtaniguchi
Feb 27 2018 02:49
No im late to the party, what were you guys doing with this code?
JoEezy
@JoEeeezy_twitter
Feb 27 2018 02:49
Is there a shortcut on keyboard to jump out of quotation marks in code
Brad
@bradtaniguchi
Feb 27 2018 02:49
if you don't mind informing me :)
@JoEeeezy_twitter That should be editor specific
JoEezy
@JoEeeezy_twitter
Feb 27 2018 02:51
ok thanks , i try to find a way to map shift+enter instead of using the end key or mouse each time
Emil
@aguyinmontreal
Feb 27 2018 03:00
@moT01 I'm not sure it's impossible; I didn't find a way for nested objects/arrays, but it's very possible for normal variables
Tom
@moT01
Feb 27 2018 03:03
sounds like another challenge
Emil
@aguyinmontreal
Feb 27 2018 03:03
@bradtaniguchi replacing " " strings by "" strings in deeply nested objects/arrays
@moT01 :D
@moT01 as I said, with the this keyword it's very possible
this["obj"] = {}; is the same thing as obj = {};
but then, how do you this["obj"]["nestedObj"]["nestedObj"] dynamically ?
Tom
@moT01
Feb 27 2018 03:09
i was working on it
i thought i had a way
i pushed the references into an array
ref.push('nest1'); .push('nest2')
so ref = ['nest1', 'nest2']
then i did this var tempRef = JSON.stringify(ref); to make it a string
like this "['nest1', 'nest2']"
did a regex on it to replace the commas
var temp2 = tempRef.replace(/,/g, '][');
something like that
to give me ['nest1']['nest2']
and i think then it works
temp2 = "['nest1']['nest2']";
and obj[temp2];
Tom
@moT01
Feb 27 2018 03:15
maybe need to test it out - i thought i had it working
Emil
@aguyinmontreal
Feb 27 2018 03:18
this won't work: temp2 = "['nest1']['nest2']"; and obj[temp2];
the same way obj["['nest1']['nest2']"]; won't work
Tom
@moT01
Feb 27 2018 03:20
yea, i know - ill take a crack at it later and let you know if i get it working - i swear i gave something like that a test and it worked - maybe im wrong
Emil
@aguyinmontreal
Feb 27 2018 03:20
the only way for it to work is obj["nest1"]["nest2"]
@moT01 please let me know if you find something :D
Claudio Restifo
@Marmiz
Feb 27 2018 05:43
@aguyinmontreal is your goal to flatten an object?
like { a: { b: { c: value } } } and resulting with a single { abc: value }
Darren
@DarrenfJ
Feb 27 2018 05:58
@Marmiz :wave:
@coderNewby, left a PM for you
coderNewby
@coderNewby
Feb 27 2018 05:59
hi @DarrenfJ thanks
CamperBot
@camperbot
Feb 27 2018 05:59
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2406 | @darrenfj |http://www.freecodecamp.org/darrenfj
Claudio Restifo
@Marmiz
Feb 27 2018 07:06
@DarrenfJ :wave:
J3abyLucky
@J3abyLucky
Feb 27 2018 08:28
Something wrong
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 09:01
can someone pls help!!
i want to count the number of decimal points in each operand so as to limit the number of decimals to atmost 1. like 1.1 + 2.2. it should not do 1.1.1 +2.2.2
https://codepen.io/rishabhgupta/full/zPKMLL
Fabien SHAN
@X140hu4
Feb 27 2018 09:08
@RishabhGupta22 What about a conditional checking for a decimal point in the value
Sorin Ruse
@sorinr
Feb 27 2018 09:32
@RishabhGupta22 i would not limit the first input to not be an operator. lets say i want to calculate starting a negative number -25+10-15+5. you can transform the first input thats -25 into 0-25+10-15+5 etc.
mohit singh
@mritunjaygoutam12
Feb 27 2018 09:40
 axios.post('/test',{},{headers: {'Content-Type': 'arraybuffer' }}).then(response=>{
             let blob = new Blob([response.data],{ type:'application/pdf'});
        let link = document.createElement('a');
        link.href = window.URL.createObjectURL(blob);
    link.download = "next1234.pdf";
link.click();

backend for it

res.sendFile(__dirname +'/x.pdf')

it get downloaded but not working file showing damaged

any one help me please?
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 09:45
@X140hu4 how to do that
 var q=input.toString().split(/([+*\/-])/g);
     var count=0;
    for (var i=0;i<=q.length; i++) {

       if (q[i]==".") {
          count++;
          console.log(count);
       if(count>1){
          alert("Wrong input!");
          q.pop();
        }}}

    console.log(q);
this is what i wrote
Fabien SHAN
@X140hu4
Feb 27 2018 09:55
@RishabhGupta22 I think it will be easier to use string.includes
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 10:04
@X140hu4 not working
Fabien SHAN
@X140hu4
Feb 27 2018 10:47
Oh you need to turn the number into a string...
@RishabhGupta22 Or you can have a isDecimal boolean variable you would turn true/false
Stephen James
@sjames1958gm
Feb 27 2018 10:52
@RishabhGupta22 Your values of q[I] are like "1.1" or "1.1.1" which will not ever equal "."
you could do if (q[I].split(".").length > 1) this would be an error if your split create 2 or more values
Quantomistro3178
@Quantomistro3178
Feb 27 2018 11:27
Hey, I'm trying to use GitHub to store my algorithm solutions over there, but I'm using it for the first time so could I get some help? I've created a new repository with a README, but how do I like, make new folders (?) or something to separate my basic, intermediate and advanced solutions?
Markus Kiili
@Masd925
Feb 27 2018 11:28
@Quantomistro3178 I made a Gist of my solutions.
Quantomistro3178
@Quantomistro3178
Feb 27 2018 11:29
@Masd925 What's that?
Markus Kiili
@Masd925
Feb 27 2018 11:30
@Quantomistro3178 I believe it suits showing code to others. https://gist.github.com/Masd925
Quantomistro3178
@Quantomistro3178
Feb 27 2018 11:31
how do i make that?
Markus Kiili
@Masd925
Feb 27 2018 11:32
@Quantomistro3178 When you click your avatar on Github, there should be Your gists option there.
And there you have New gist.
Quantomistro3178
@Quantomistro3178
Feb 27 2018 11:33
@Masd925 yeah, got it. thanks!
CamperBot
@camperbot
Feb 27 2018 11:33
quantomistro3178 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4706 | @masd925 |http://www.freecodecamp.org/masd925
Amit Patel
@AmitP88
Feb 27 2018 11:34

hey guys, I need a little help with my calculator project. I've gotten the 1 button to work, but as soon as the input shows up in the textbox, it disappears. Why does it do this?

https://codepen.io/AmitP88/pen/Zrjbam?editors=1010

Stephen James
@sjames1958gm
Feb 27 2018 11:36
@AmitP88 You have a form tag, and I imagine that it is refreshing on click, not sure, but change the form to div
Amit Patel
@AmitP88
Feb 27 2018 11:38
@sjames1958gm ah ok, thanks! :)
CamperBot
@camperbot
Feb 27 2018 11:38
amitp88 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9033 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Amit Patel
@AmitP88
Feb 27 2018 11:39
it worked
Liam Docherty
@ldocherty1
Feb 27 2018 11:41
Hi, how can I reduce the width of the text? I try to use 'max-width' however this dont seem to work for me as it moves the placement of the text.
creator0323
@Amasian
Feb 27 2018 11:42
how can I check visual results of other people's codes in Github? or is it possible?
Liam Docherty
@ldocherty1
Feb 27 2018 11:43
From my understanding and the way I know is by downloading the file. @Amasian
Stephen James
@sjames1958gm
Feb 27 2018 11:50
@AmitP88 :+1:
creator0323
@Amasian
Feb 27 2018 11:53
@ldocherty1 you mean, I can check the results by putting the codes inside of each files into my development environment?
h1tag
@h1tag
Feb 27 2018 12:08
@Amasian yes
creator0323
@Amasian
Feb 27 2018 12:12
@h1tag @ldocherty1 thank you so much for your help!
CamperBot
@camperbot
Feb 27 2018 12:12
amasian sends brownie points to @h1tag and @ldocherty1 :sparkles: :thumbsup: :sparkles:
:cookie: 923 | @h1tag |http://www.freecodecamp.org/h1tag
:cookie: 161 | @ldocherty1 |http://www.freecodecamp.org/ldocherty1
h1tag
@h1tag
Feb 27 2018 12:13
@Amasian you're welcome
Quantomistro3178
@Quantomistro3178
Feb 27 2018 12:45
Can anyone please tell me what the last parameter in this XMLHttpRequest Object Method is? I don't understand it.
open(method, url, async)
Markus Kiili
@Masd925
Feb 27 2018 12:48
@Quantomistro3178 It determines whether the request is asynchronous (default is true) or not. If you set it to false, the code execution waits for the response. In the default case the callback function is executed asynchronously at some point later when the response comes and the code execution continues immediately.
So in the sync case, the method returns when the response comes, and in the async case the method returns immediately.
Quantomistro3178
@Quantomistro3178
Feb 27 2018 12:51
@Masd925 I think I understand a little...
Markus Kiili
@Masd925
Feb 27 2018 12:52
@Quantomistro3178 Those are two ways to handle ajax request, but nowadays you almost always use async, because sync prevents the script from executing further and that can jam the web page.
Quantomistro3178
@Quantomistro3178
Feb 27 2018 12:56
@Masd925 Ok...wait, let me try to see if I can use XMLHttpRequest
Wait. Do I even need to use it for the random quotes project? It's not being used in this example:
https://www.w3schools.com/js/tryit.asp?filename=tryjs_ajax_callback
wait, it is
oh
I get it
Quantomistro3178
@Quantomistro3178
Feb 27 2018 12:59
@Masd925 thanks!
CamperBot
@camperbot
Feb 27 2018 12:59
quantomistro3178 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4707 | @masd925 |http://www.freecodecamp.org/masd925
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 13:02
can I have question please
image.png
how can I set style for green tow when one check box was checked
h1tag
@h1tag
Feb 27 2018 13:06
@ahmed-issa-mohd didn't the method i showed you yesterday work?
Tai Jones
@taiJones00
Feb 27 2018 14:46
submit() {
    this.setState({
      userAge: this.state.input
    });
    buttonOne = parseInt(this.state.userAge) < 18 ? <button onClick={this.submit}>You Shall Not Pass</button> : <button onClick={this.submit}>You May Enter</button>
  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;

    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        {buttonOne}

      </div>
    );
  }
Why won't the value of buttonOne change once the submit button is pressed?
Stephen James
@sjames1958gm
Feb 27 2018 15:10
@taiJones00 you have two different variables called buttonOne
@taiJones00 As a note, you setState changes this.state asynchronously, so using state right after setState won't have the affect you desire.
Tai Jones
@taiJones00
Feb 27 2018 15:12
submit() {
    this.setState({
      userAge: this.state.input
    });

  }
  render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;

    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
        render() {
    const buttonOne = <button onClick={this.submit}>Submit</button>;
    const buttonTwo = <button>You May Enter</button>;
    const buttonThree = <button>You Shall Not Pass</button>;

    return (
      <div>
        <h3>Enter Your Age to Continue</h3>
        <input
          style={inputStyle}
          type="number"
          value={this.state.input}
          onChange={this.handleChange} /><br />
          {
              this.state.userAge == ''?
              buttonOne : 
              this.state.userAge < 18 ? 
              buttonThree :
              buttonTwo
          }
      </div>
    );
  }
Would this work?
@sjames1958gm I took out the second buttonOne and added the expression below the input element
this.state.userAge == ''?
              buttonOne : 
              this.state.userAge < 18 ? 
              buttonThree :
              buttonTwo
Emil
@aguyinmontreal
Feb 27 2018 15:19
@Marmiz no, the goal is to update a deeply nested object/array dynamically but we don't know how many levels deep
Tom
@moT01
Feb 27 2018 15:32
canada eh
@aguyinmontreal wonder if we could do what i had originally proposed
json.stringify the whole thing - and regex the spaces out
doh
Emil
@aguyinmontreal
Feb 27 2018 16:16
@moT01 yes, it is working, but it wouldn't work in all situations (not all objects are JSON.stringifyable)
Tom
@moT01
Feb 27 2018 16:17
why not
Mukesh Kumar Angrish
@MukeshAngrish
Feb 27 2018 16:33
Hello everyone, I need some help in the Recipe Box app. I'm getting no error in the console or dev tools and I have checked the code multiple times. These are the two problems I'm facing :
  1. The add button on the bottom-left has stopped working. It was working just fine before.
  2. While editing the text, it is not setting the state.
    Please help!
Max
@maxiwer
Feb 27 2018 17:18
Hi coders.
How can I fit these three pictures in prime div?
https://codepen.io/maxiwer/full/Moavoa/
Donnie
@Donnie-D
Feb 27 2018 17:22
Hi lol sorry to sound desperate. Its been a few days now, I am stuck on random quote machine. All I want is to be able to get data from some sort of external source and be able to use it in my code. I have been given many advices by others (as in read about CORS, quote api urls like quotedesign etc. and jQuery references as well). ( I have been reading them all but in the end I am still lost :worried: ). (it may sound rather silly but) I would like to know what to do from the point I am on in my code in order to carry on. I have been shooting in the dark for a while. Could anyone help :-) ?
h1tag
@h1tag
Feb 27 2018 17:22
@maxiwer overflow: hidden
on the parent div
Donnie
@Donnie-D
Feb 27 2018 17:23
i havent done any css bit yet. All I want to be able to do is be able to create the algo at this stage
h1tag
@h1tag
Feb 27 2018 17:26
@Donnie-D did you find an api?
Donnie
@Donnie-D
Feb 27 2018 17:27
hi yes one of them is https://quotesondesign.com/api-v4-0/
I found a couple
but Haven't got a clue as to where to go from the point I am in my pen
h1tag
@h1tag
Feb 27 2018 17:30
@Donnie-D let's say you have an api you want some data from, how would you do that?
andrewmedhurst
@andrewmedhurst
Feb 27 2018 17:31
@Donnie-D have you looked into $.getJSON() that's available in jQuery? http://api.jquery.com/jquery.getjson/
good place to start if you are trying to pull data.
Donnie
@Donnie-D
Feb 27 2018 17:32
I have @andrewmedhurst but I am not sure how to include it in my code and at which point
h1tag
@h1tag
Feb 27 2018 17:33
@Donnie-D when do you want it to get triggered (the request to the api)?
Donnie
@Donnie-D
Feb 27 2018 17:34
on my click i would like to pull a quote from the external source
h1tag
@h1tag
Feb 27 2018 17:35
@Donnie-D so it's exactly like this challenge
Donnie
@Donnie-D
Feb 27 2018 17:35
Now if you look down in my pen in JS part i have commented out some code, which randomly chooses from an array of code I made. I wanted to use a bigger source and be able to learn more through this exercise
h1tag
@h1tag
Feb 27 2018 17:36
you'll have to use a click listener on the button, so that when it's clicked the request to the api gets sent (in the callback function to listener)
what do you by a bigger source?
mean
Donnie
@Donnie-D
Feb 27 2018 17:38
somewhere a place that holds lots of quotes in xml or JSON format may be?
h1tag
@h1tag
Feb 27 2018 17:38
yea, so an api
Stephen James
@sjames1958gm
Feb 27 2018 17:39
Doris attic is a site that has a quote api
Forismatic that is
andrewmedhurst
@andrewmedhurst
Feb 27 2018 17:40
@Donnie-D I used the quotes on design API as well. What I did is saved the API request to a var array at the start of the page loading, and pulled from it at random when the user clicks on a new quote button.
Does that help steer you in the right direction?
Donnie
@Donnie-D
Feb 27 2018 17:42
API request?
andrewmedhurst
@andrewmedhurst
Feb 27 2018 17:42
via .getJSON
Donnie
@Donnie-D
Feb 27 2018 17:43
righto. i shall revise about .getJSON and bring myself upto speed and see if I am missing something. Please allow me 1 few minutes. (thanks all)
andrewmedhurst
@andrewmedhurst
Feb 27 2018 17:43
I used $.getJSON to pull and store the quote data to a variable at the time of the page loading, and then used that data to update the quote each time a "new quote" button was clicked
Max
@maxiwer
Feb 27 2018 17:44
@h1tag thanks
CamperBot
@camperbot
Feb 27 2018 17:44
maxiwer sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 924 | @h1tag |http://www.freecodecamp.org/h1tag
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 17:51
can I have question please ?
Markus Kiili
@Masd925
Feb 27 2018 17:52
@ahmed-issa-mohd If you have a question, just post it here.
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 17:56
how I can change color for span (tow)
when the first checkbox is checked by css
Ian Lee
@asparism
Feb 27 2018 17:59
@ahmed-issa-mohd do you want to change the color of the text that says tow?
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 17:59
yes
Ian Lee
@asparism
Feb 27 2018 18:03
in order to change the appearance of something after it's already been loaded, you'll need to use javascript. you can google "how to add event handler to javascript checkbox" and "how to change text color in javascript".
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 18:04
no
I want change it in this way
but I need to change ' tow ' span
Christopher McCormack
@cmccormack
Feb 27 2018 18:06
@ahmed-issa-mohd You can do it using pure CSS:
input:checked+span{
  color: red;
}
@ahmed-issa-mohd are you only trying to target tow? If so you can target your change class
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 18:09
okay I know but I need to do it on the second span when the first checkbox is checked
ahmed-issa-mohd
@ahmed-issa-mohd
Feb 27 2018 18:27
what ?
Ian Lee
@asparism
Feb 27 2018 18:37
that css trick is great, i didn't even know that, but you will need to use javascript in this case
Stefaan Walleghem
@lawfets
Feb 27 2018 18:39
okay, I've been working on this for about 5 hours now and I can't find the solution. Can someone please check the code and tell me if they see anything wrong
how do I get my code on here?

$(document).ready(function(){
// I kept this code apart because it's for freecodecamp, so just the top part. I could have integrated it in the function. As it stands on it's own I didn't want to because maintaining stays the same. For the next gamer names I used functions for maintainability and expandibility.
var apiTwitchURL = "https://api.twitch.tv/kraken/streams/freecodecamp?client_id=ix4n62t60azcnv4y48jvtu29ub4mk3";
$.getJSON(apiTwitchURL,function(json){
for (var key in json) {
if (json.hasOwnProperty(key) && json["stream"] === null) {
//console.log(key + " -> " + json[key]);
$(".streaming").html(" which is momentarily offline"); //no need to link now, because it's offline

    } else (".streaming").html("<a href='http://www.twitch.tv/freecodecamp' target='blank'>: CHECK IT OUT, it's alive</a>"); // link included because now you can watch it.
 }

});
function startApi (apiTwitchName) {
var ApiUrl = "https://api.twitch.tv/kraken/streams/" + apiTwitchName + "?client_id=ix4n62t60azcnv4y48jvtu29ub4mk3";
$.getJSON(ApiUrl,function(json){
for (var key in json) {
if (json.hasOwnProperty(key) && json["stream"] === null) {
//console.log(key + " -> " + json[key]);
$(".input").append("<div class= \"row\"><div class = \"col-lg-3 \">" + apiTwitchName + "</div><div class = \"col-lg-3\"></div><div class = \"col-lg-3\"></div> <div class = \"col-lg-3\">The channel is momentarily offline</div><br>"); //no need to link now, because it's offline
// I checked and the api doesn't throw an error when the name is fake or false so no need to make an error handling.
} else {
$(".input").append("<div class= \"row\"><div class = \"col-lg-3 \">" + apiTwitchName + "</div><div class = \"col-lg-3\">"+ json["stream"]["game"] + "</div><div class = \"col-lg-3\"><img src=\" " + json["stream"]["preview"]["small"] + "\"></div> <div class = \"col-lg-3\"><span><a href='https://www.twitch.tv/" + apiTwitchName+ "' target='blank'>CHECK IT OUT, it's alive</a></span></div><br>");
}

    }
  }
  );

}
var arr1 = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for (var i = 0 ; i < arr1.length ; i++){
startApi(arr1[i]);
}
});

for some weird reason, my output is doubled
anyone around?
h1tag
@h1tag
Feb 27 2018 18:43
@lawfets when the code is big like this, it's better to host it somewhere
codepen, jsfiddle, jsbin ...
Stefaan Walleghem
@lawfets
Feb 27 2018 18:45
okay I put it on my server, just a sec I'll check the url
Brad
@bradtaniguchi
Feb 27 2018 18:46
+1 for github gists
let me explain a bit what the problem is.
I made a function called startApi and I use the getJson inside the function.
I then made a for loop to iterate through the array of names to use the function on the members of the array
but for some weird reason, I now get everything twice
https://www.pc-freak.be/twitchTvApi.html this is the weird result
h1tag
@h1tag
Feb 27 2018 18:54
@lawfets because you're sending the request twice and editing the html in both requests too
Stefaan Walleghem
@lawfets
Feb 27 2018 18:54
where am I sending twice?
h1tag
@h1tag
Feb 27 2018 18:55
@lawfets line 4, and line 31
Stefaan Walleghem
@lawfets
Feb 27 2018 18:55
the first get json is just for the freecodecamp line on top, it has
h1tag
@h1tag
Feb 27 2018 18:55
oh, ok, sorry
Stefaan Walleghem
@lawfets
Feb 27 2018 18:55
line 4 is a different call
could it have something to do with the append function
Stefaan Walleghem
@lawfets
Feb 27 2018 19:06
I found the problem
seems like with the append function I have to break the if and the else of the json
h1tag
@h1tag
Feb 27 2018 19:08
@lawfets what do you mean break?
Stefaan Walleghem
@lawfets
Feb 27 2018 19:08
break;
just like you break a switch
h1tag
@h1tag
Feb 27 2018 19:09
but why they are getting triggered twice in the first place?
Stefaan Walleghem
@lawfets
Feb 27 2018 19:10
I wouldn't really know but I found that there are more problems with append
could it be that there are more then one key
I'll check out the api object
h1tag
@h1tag
Feb 27 2018 19:13
Screenshot.png
Stefaan Walleghem
@lawfets
Feb 27 2018 19:14
yep, the object has two main objects inside, that's why he goes twice
h1tag
@h1tag
Feb 27 2018 19:14
I don't think they're getting triggered twice, cause this the result from logging the twitch names from inside the ifelse statement
Stefaan Walleghem
@lawfets
Feb 27 2018 19:14
by using the break, the function get json resets to
Christopher McCormack
@cmccormack
Feb 27 2018 19:14
@lawfets not really related to your issue, but this code is difficult to read, which makes it difficult to troubleshoot. One way to clean it up would be to create a templated version of your different containers within your html, and make them hidden. Then when you need to use one, you can use a jquery selector on that hidden element, and clone it for use, modifying attributes as necessary before appending to the dom where needed.
Stefaan Walleghem
@lawfets
Feb 27 2018 19:15
@cmccormack thx, I'll look into that
CamperBot
@camperbot
Feb 27 2018 19:15
lawfets sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1346 | @cmccormack |http://www.freecodecamp.org/cmccormack
h1tag
@h1tag
Feb 27 2018 19:15
or store the html code in append in a variable
Stefaan Walleghem
@lawfets
Feb 27 2018 19:15
@h1tag , it's not about the array, it's about the api object
Christopher McCormack
@cmccormack
Feb 27 2018 19:15
unless using JSX storing it in your code just looks bad, imo
Stefaan Walleghem
@lawfets
Feb 27 2018 19:16
the api object has two objects in the first line so it'll the json get function will go over the 2 objects with a similar result
the for var key in json is the so called culprit, it uses any key, in this case there are two keys
Stefaan Walleghem
@lawfets
Feb 27 2018 19:24
@h1tag thanks for the help though
CamperBot
@camperbot
Feb 27 2018 19:24
lawfets sends brownie points to @h1tag :sparkles: :thumbsup: :sparkles:
:cookie: 925 | @h1tag |http://www.freecodecamp.org/h1tag
Aiden
@AidenMead
Feb 27 2018 19:38
Hey everyone. Has anyone ever built a parallax website to tell a story?
JoEezy
@JoEeeezy_twitter
Feb 27 2018 19:39
how do I add multple classes to a div in jquery if the classes have a space in them ... like this $("#title").addClass("animated bounce animated shake")
Aiden
@AidenMead
Feb 27 2018 19:39
I was thinking about building one to add to my currently empty portfolio. A re-telling of a classic story, with the main character as a fixed element in the center of the screen. Then the background changes and characters come and go based on the scrolling?
JoEezy
@JoEeeezy_twitter
Feb 27 2018 19:39
i tried ("animted bounce", "animated shake") .. but that doesnt work
Aiden
@AidenMead
Feb 27 2018 19:40
are you referencing a library for the animations?
Gulsvi
@gulsvi
Feb 27 2018 19:40
@JoEeeezy_twitter animatedand bounce are two different class names. Are you trying to make the element bounce and then shake?
A class name cannot, by definition, have a space in it
JoEezy
@JoEeeezy_twitter
Feb 27 2018 19:42
yeah i'm trying to make them do both
Gulsvi
@gulsvi
Feb 27 2018 19:43
@JoEeeezy_twitter They can't do both at the same time with the animate library as far as I know, but you can add the bounce class to make it bounce, and then add the shake class to make it shake:
$("#title").addClass("animated bounce")
  .delay(1000)
  .promise()
  .done(function() {
  $(this).addClass("shake");
})
Or with a queue:
$("#title").addClass("animated bounce")
  .delay(1000)
  .queue(function() {
  $(this).addClass("shake");
});
JoEezy
@JoEeeezy_twitter
Feb 27 2018 19:45
ah ok i didn't know it was a library problem.. saved ! ty :)
Gulsvi
@gulsvi
Feb 27 2018 19:52
@AidenMead I've used parallax in websites before, but more for making the background scroll at a different speed compared to the text. What specifically did you need help with?
Aiden
@AidenMead
Feb 27 2018 19:53
@gulsvi More just looking to discuss the theory, lol. Like the logistics of applying different effects to the "main character" depending on the part of the site that it's on.
Gulsvi
@gulsvi
Feb 27 2018 19:53
@AidenMead I think you'll want to look at onscroll events https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onscroll
You can use the offsetY property to determine where in the page you have scrolled to
jQuery makes this a little easier, to be honest - with offset() and scrollTop() methods
holoh
@hollloh
Feb 27 2018 20:22
was messing with an ajax exercise on mdn
cant get the 'verses' to display
is there just a typo in there ?
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width">

    <title>Ajax starting point</title>

    <style>
      html, pre {
        font-family: sans-serif;
      }
      body {
        width: 500px;
        margin: 0 auto;
        background-color: #ccc;
      }
      pre {
        line-height: 1.5;
        letter-spacing: 0.05rem;
        padding: 1rem;
        background-color: white;
      }
      label {
        width: 200px;
        margin-right: 33px;
      }
      select {
        width: 350px;
        padding: 5px;
      }
    </style>
    <!--[if lt IE 9]>
      <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>
    <h1>Ajax starting point</h1>

    <form>
      <label for="verse-choose">Choose a verse</label>
      <select id="verse-choose" name="verse-choose">
        <option>Verse 1</option>
        <option>Verse 2</option>
        <option>Verse 3</option>
        <option>Verse 4</option>
      </select>
    </form>

    <h2>The Conqueror Worm, <em>Edgar Allen Poe, 1843</em></h2>

    <pre>

    </pre>

    <script>
      var verseChoose = document.querySelector('select');
      var poemDisplay = document.querySelector('pre');

      verseChoose.onchange = function() {
        var verse = verseChoose.value;
        updateDisplay(verse);
      };

      function updateDisplay(verse) {
        verse = verse.replace(' ', '');
        verse = verse.toLowerCase();
        var url = verse + '.txt';
      };

      var request = new XMLHttpRequest();
      request.open('GET', url);
      request.responseType = 'text';
      request.onload = function() {
        poemDisplay.textContent = request.response;
      };
      request.send();

      updateDisplay('Verse 1');
      verseChoose.value = 'Verse 1';
    </script>

  </body>
</html>
Christopher McCormack
@cmccormack
Feb 27 2018 20:25
@hollloh you're declaring url within a function, as soon as the function returns it's gone
@hollloh also you should be calling your ajax call as a function, not just inline, otherwise it will run once with an empty url and never again
holoh
@hollloh
Feb 27 2018 20:31
hm , mkay
Greg Gordon
@greggordoncode_twitter
Feb 27 2018 20:35
https://codepen.io/papageg/pen/yvGYQM how do i get the image of myself to the side of the text either right side or left doesnt matter
holoh
@hollloh
Feb 27 2018 20:51
<p class='aussieLad'>Web Developer / Management / Problem Solver</p>
<img class='aussieLad' src="https://scontent-lax3-2.xx.fbcdn.net/v/t31.0-8/28424512_192427658188457_4412142858351674673_o.jpg?oh=58da12eaf96bca5b22af69f9fc344591&oe=5AFFE325"></img>
the html
.aussieLad {
  display: inline;
}
the css
Greg Gordon
@greggordoncode_twitter
Feb 27 2018 20:54
thank you i see npow
now
holoh
@hollloh
Feb 27 2018 20:55
np
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 21:10
@sjames1958gm i just want every operand to contain not more than one decimal point. so can u pls help
Stephen James
@sjames1958gm
Feb 27 2018 22:00
gupta
@RishabhGupta22 I mispoke, if you split on '.' and there are greater than two results then you have greater than two '.'
if (q[I].split(".").length > 2) // error
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 22:07
@sjames1958gm can u visit the link and tell me where i am going wrong.
https://codepen.io/rishabhgupta/full/zPKMLL
thanks in advance
Liam Docherty
@ldocherty1
Feb 27 2018 22:10
Can anyone help me extract this navbar from this code and put it on a jsfiddle and send it to me please? I have tried for so long and I'm not sure what I'm doing wrong. https://blackrockdigital.github.io/startbootstrap-agency/
Stephen James
@sjames1958gm
Feb 27 2018 22:11

@RishabhGupta22 First off use join not toString - to String will insert a bunch of commas and confuse things.
var q=input.join('').split(/([+*\/-])/g);

then for each q[i] split on '.' and if there are more than 2 values in the split you have too many'.'
if (q[i].split(".").length > 2) // error

Rishabh Gupta
@RishabhGupta22
Feb 27 2018 22:21
@sjames1958gm thank you
CamperBot
@camperbot
Feb 27 2018 22:21
rishabhgupta22 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9036 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 22:21
@sjames1958gm it worked
Emil
@aguyinmontreal
Feb 27 2018 22:25
@moT01 found something today?
Stephen James
@sjames1958gm
Feb 27 2018 22:31
@RishabhGupta22 :+1: :)
Rishabh Gupta
@RishabhGupta22
Feb 27 2018 22:35
@sjames1958gm can u just explain why .length>2 and not .length>1 .
Stephen James
@sjames1958gm
Feb 27 2018 22:36
@RishabhGupta22 for a single '.' you would get two parts so the length would be two
8.8 -> splits to 8, 8 which is length 2 which is ok, 8.8.8 -> splits two 8, 8, 8 which is length > 2 and not ok