These are chat archives for FreeCodeCamp/HelpJavaScript

20th
Feb 2018
Conor Murphy
@cmurphy580
Feb 20 02:15
any reason why this line of code is not working:
article_wrap.parentNode.scrollTop = article_wrap.offsetTop;
Brad
@bradtaniguchi
Feb 20 02:16
@cmurphy580 could be anything, prolly need more code
Conor Murphy
@cmurphy580
Feb 20 02:18
@bradtaniguchi @VaseJS here's the function, let me know if you need more:
backToList(event) {
    const { article, i } = this.props;
    const article_wrap = document.querySelector('.article_wrap');
    const description_wrap = document.querySelector('.title_wrap');
    const wraps = document.querySelectorAll('.article_wrap');
    //const news_feed = document.querySelector('.news_feed');
    wraps.forEach((wrap, idx) => {
      if (idx === i) {
        wrap.children[0].lastChild.style.display = 'none';
        wrap.children[0].firstChild.style.fontSize = '12px';
        wrap.style.margin = '';
        wrap.style.backgroundAttachment = '';
        wrap.style.height = '';
        wrap.style.width = '';
        wrap.style.transition = 'all 0.5s linear';
        //wrap.parentNode.scrollTop = wrap.offsetTop;
        console.log(wrap.parentNode.scrollTop);
        console.log(wrap.offsetTop)
      } else {
        wrap.style.display = 'flex';
      }
    });
    article_wrap.parentNode.scrollTop = article_wrap.offsetTop;
    event.stopPropagation();
  }
Nate Mallison
@NJM8
Feb 20 02:25
@cmurphy580 What are you trying to do with that line?
Conor Murphy
@cmurphy580
Feb 20 02:28
@NJM8 return an vertical list of images but when i return i want the scroll to be at the top of image i just returned from, not at the top of the page. Does that make sense
Nate Mallison
@NJM8
Feb 20 02:28
And how is it not working? Like not doing anything or is there an error?
Conor Murphy
@cmurphy580
Feb 20 02:29
@NJM8 it just returns to '0'
or the top of the page
Nate Mallison
@NJM8
Feb 20 02:30
So like you open an image to view it full screen then go back and you want that image at the top
Claudio Restifo
@Marmiz
Feb 20 02:33

@tiagocorreiaalmeida I don't know what this does but you should avoid making subscriptions or state management during willmount hook.

this.props.setMessagesToDefault();

more on the docs

Nate Mallison
@NJM8
Feb 20 02:37
@cmurphy580 Don't you mean to set it to article.offsetTop or something like that? I would guess it's setting it ok, just not grabbing the value you expect.
const article_wrap = document.querySelector('.article_wrap');
const wraps = document.querySelectorAll('.article_wrap');
wrap.parentNode.scrollTop = wrap.offsetTop;
article_wrap.parentNode.scrollTop = article_wrap.offsetTop;
article_wrap is grabbing the first element with class .article_wrap, wraps is the node list of the same elements, so you may be correctly setting your scrollTop on the trouble line, but then wouldn't you be overwriting it with this last line?
article_wrap and wraps will have the same parentNode no?
Nate Mallison
@NJM8
Feb 20 02:42
So you will always be setting it to the offset top of the first .article_wrap
Conor Murphy
@cmurphy580
Feb 20 02:47
@NJM8 i see what youre saying i'll mess around with that for a few minutes and see if I can fix it. Thank you for the help
CamperBot
@camperbot
Feb 20 02:47
cmurphy580 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Feb 20 02:47
@cmurphy580 Sure thing, I hope that helps!
Fabien SHAN
@X140hu4
Feb 20 06:10
@Masd925 Thanks again for yesterday! I have managed to get the computer sequence working on the Simon game :) Now I need to do the playing check hehe
CamperBot
@camperbot
Feb 20 06:10
x140hu4 sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4699 | @masd925 |http://www.freecodecamp.org/masd925
Markus Kiili
@Masd925
Feb 20 08:15
@X140hu4 :+1:
hanhuiqing
@newsuperman2018
Feb 20 09:18
Counting Cards
Counting Cards?
Blauelf
@Blauelf
Feb 20 09:19
Counting Cards.
Tiago Correia
@tiagocorreiaalmeida
Feb 20 12:25
thanks @Marmiz didnt knew about that one
CamperBot
@camperbot
Feb 20 12:25
tiagocorreiaalmeida sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1170 | @marmiz |http://www.freecodecamp.org/marmiz
Daniel Romero
@Ranacode
Feb 20 12:45
I have a gulp question here
I implemented a gulp-nodemon + browser-sync server but when I run the gulp task, it can't read the new es6 syntax. I'm trying to use babel-register to transpile on the fly but it doesn't seems to work.
gulp.task('browser-sync', [ 'nodemon' ], function() {
    browserSync({
        proxy: 'localhost:8001', // local node app address
        port: 8002, // use *different* port than above
        notify: true
    });
});

gulp.task('nodemon', function(done) {
    let called = false;
    return nodemon({
        script: 'lib/server/server.js',
        env: { NODE_ENV: 'development' },
        ignore: [ 'Gulpfile.js', 'node_modules/' ]
    })
        .on('start', function() {
            if (!called) {
                called = true;
                done();
            }
        })
        .on('restart', function() {
            setTimeout(function() {
                browserSync.reload({ stream: false });
            }, 1000);
        });
});
//PACKAGE.JSON SCRIPTS
"scripts": {
        "start": "NODE_ENV=production node server.js",
        "babel": "NODE_ENV=development babel-node lib/server/server.js",
        "dev": "concurrently \"yarn babel\" \"gulp\"  "
    },
The thing I want its to avoid the babel-node usage just running only the gulp default task to make a efficient reload server
import app from './config/express.js';
^^^^^^

SyntaxError: Unexpected token import
    at createScript (vm.js:80:10)
    at Object.runInThisContext (vm.js:139:10)
    at Module._compile (module.js:607:28)
    at Object.Module._extensions..js (module.js:654:10)
    at Module.load (module.js:556:32)
    at tryModuleLoad (module.js:499:12)
    at Function.Module._load (module.js:491:3)
    at Function.Module.runMain (module.js:684:10)
    at startup (bootstrap_node.js:187:16)
    at bootstrap_node.js:608:3
Zunaid Aslam
@Zunaid-Aslam
Feb 20 15:33
I am working on the weather app. Why doesn't this code console log the temp, it works with url, long and lat
 var Geo={};
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(success,error);
}
else {
alert('Geolocation is not supported');
}

function error() {
alert("That's weird! We couldn't find you!");
}

function success(position) {
      Geo.lat = position.coords.latitude;
      Geo.lng = position.coords.longitude;
       console.log(Geo.lat);
       console.log(Geo.lng);

var Weather = "https://fcc-weather-api.glitch.me/api/current?lat=" + Geo.lat + "&lon=" + Geo.lng;

  console.log(Weather);

$.ajax({
url : Weather,

success : function(data) {
var temp = data.main.temp;
console.log(temp);

}
});



}
Stephen James
@sjames1958gm
Feb 20 15:42
@Zunaid-Aslam I don't see anything wrong I put this is jsbin and it worked fine
Zunaid Aslam
@Zunaid-Aslam
Feb 20 15:50
Does it log out temp?
@sjames1958gm Does it show your temperature? It's not showing for me. I used replt.it
Got this error in jsbin : "success@null.js:37:1
"
Stephen James
@sjames1958gm
Feb 20 15:53
@Zunaid-Aslam yes it did.
Zunaid Aslam
@Zunaid-Aslam
Feb 20 15:54
That's weird
Stephen James
@sjames1958gm
Feb 20 15:54
@Zunaid-Aslam
32.971865699999995
-96.7104676
"https://fcc-weather-api.glitch.me/api/current?lat=32.971865699999995&lon=-96.7104676"
19.99
Zunaid Aslam
@Zunaid-Aslam
Feb 20 15:54
:S
Then why isn't it working for me lol
Stephen James
@sjames1958gm
Feb 20 15:55
@Zunaid-Aslam Dont know if you can see this
never mind that won't work
@Zunaid-Aslam Do you have it codepen
Zunaid Aslam
@Zunaid-Aslam
Feb 20 15:55
Yeah
Not working there as well in the console
Ok i think it worked there
It wasn't working
I tried in firefox browser at first in jsbin and repl.it and both gave only 3 values. Ajax part wasn't working there.
Does browser has something to do with this?
Stephen James
@sjames1958gm
Feb 20 15:59
@Zunaid-Aslam It could, but your code was pretty straightforward.
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:01
I am actually new. I was going through different tutorial and this is what I could come up with so far by combining other's knowledge. It made sense to me. It's working in codepen now... So that's good. Let see if I can some how show it

Got this error in chrome console :

Uncaught TypeError: $.ajax is not a function
at success (<anonymous>:23:3)
success @ VM58:23

Did wrote the ajax section in a wrong way?
Jason Luboff
@JLuboff
Feb 20 16:13
@Zunaid-Aslam Did you include jQuery in the javascript settings of codepen?
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:22
@JLuboff It's working in code pen
now
But not in google chrome console or firefox or jsbin ....
This was the error : Uncaught TypeError: $.ajax is not a function
at success (<anonymous>:23:3)
in console
Jason Luboff
@JLuboff
Feb 20 16:24
Are you accessing your page in FF/Chrome in codepen though or another method?
Markus Kiili
@Masd925
Feb 20 16:25
@JLuboff Yo. I had the big interview today. I did ok I think.
Jason Luboff
@JLuboff
Feb 20 16:25
@Masd925 Nice! Felt confident?
Markus Kiili
@Masd925
Feb 20 16:29
@JLuboff JS coding part was quite easy. Simple map and filter questions and writing some tests for a simple function. Then they showed some SCSS+Vue code that produced a bad layout, and asked to fix that. I said how I would do it with techniques I know and that I didn't wan't to mess it up more.
Jason Luboff
@JLuboff
Feb 20 16:30
Hehe
There's still so much for me to learn...like SCSS...
Markus Kiili
@Masd925
Feb 20 16:31
@JLuboff They also asked me about functional programming.
Jason Luboff
@JLuboff
Feb 20 16:32
I can program to an extent.. but when it comes to explaining concepts.. I'm not the best at it
Kaz Baig
@kbaig
Feb 20 16:33
@JLuboff SASS makes me a happier camper than SCSS... I think I'm in the minority there
Jason Luboff
@JLuboff
Feb 20 16:33
Well.. I'm not up on either
Hell.. I don't typically write my own CSS anyways.. usually just use bootstrap or bulma and throw in my own css when I absolutely have to :(
Markus Kiili
@Masd925
Feb 20 16:35
@JLuboff I think that they mostly use Java-Spring, React stack, so maybe I am starting React too it seems.
Kaz Baig
@kbaig
Feb 20 16:36
I much prefer writing my own css
It takes a lot more time ofc but it feels good when it works
Jason Luboff
@JLuboff
Feb 20 16:38
The problem with CSS for me, is I know the basics.. but when it comes to actually implementing complex or even intermediately complex css, its not going to happen lol
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:41
I didn't actually understand your question @JLuboff , I copied the javascript code and pasted it in different places.
Jason Luboff
@JLuboff
Feb 20 16:43
@Zunaid-Aslam Copied it where?? You need to make sure the jQuery is included whether thats within codepen's Javascript settings or within your HTML file in a <script .. tag
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:47

It's working in my codepen. I chose jquery in codepen settings.

I was talking about trying it in jsbin, repl.it and my google chrome developer's tool console

In those places it doesn't work for some weird reason.
Jason Luboff
@JLuboff
Feb 20 16:48
....are you including jQuery in those? If you aren't thats why..
Blauelf
@Blauelf
Feb 20 16:48
"Weird reason" is you don't load jQuery there.
Jason Luboff
@JLuboff
Feb 20 16:48
ajax is a jQuery method
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:49
Do I have to load jquery in those browser console as well? I am a beginner in coding. So I thought maybe the browser probably has it loaded. And also probably those compilers too.
I will try to see if there is a way to load it.
Jason Luboff
@JLuboff
Feb 20 16:49
You can't run it through the console as far as I'm aware
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:49
Oh
I understand
Thank you for clearing it for me @JLuboff
CamperBot
@camperbot
Feb 20 16:49
zunaid-aslam sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2337 | @jluboff |http://www.freecodecamp.org/jluboff
Blauelf
@Blauelf
Feb 20 16:52
You have to load it when you want to use it. There are browser extensions loading it into the console, but usually you'd load it into the page, using a <script src="https://code.jquery.com/jquery-3.3.1.min.js"/> or similar. The settings in codepen essentially do that for you.
Zunaid Aslam
@Zunaid-Aslam
Feb 20 16:56

Thank you @Blauelf . As a beginner it can be a bit overwhelming to understand the basic code and top of that these things can really confuse more.

Nevertheless, thank for explaining. I will try to pay more attention on whether everything is set properly and supported.

CamperBot
@camperbot
Feb 20 16:56
zunaid-aslam sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star2: 4685 | @blauelf |http://www.freecodecamp.org/blauelf
Chris
@ConnectCodes
Feb 20 18:08
Good afternoon @Blauelf
Stephen James
@sjames1958gm
Feb 20 18:28
@Zunaid-Aslam If your page loads jquery it should be available in the console
mohib98
@mohib98
Feb 20 20:37
i have a javacript task and i need somebody to do it for me. email me at moheebsuliman64@gmail.com so we can disscuss the task and the payment
Brad
@bradtaniguchi
Feb 20 20:41
@mohib98 You should not advertise jobs here. Its against the CoC
Jason Luboff
@JLuboff
Feb 20 21:27
@RoniqueRicketts Whats up
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:27
@JLuboff wha dem want"?
alpox
@alpox
Feb 20 21:29
@RoniqueRicketts out of the array of strings you get into the function, you should make a new array of strings where each string holds a li element where the previous string of the array is the content of the li element
And you should do that with using es6 string interpolation
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:30
@alpox I am more lost
li elements wont print on the screen sice this is not html or react.
alpox
@alpox
Feb 20 21:31
@RoniqueRicketts They want them as strings
Not as DOM element
A string which represents a li element like you would write it yourself into the html file
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:32
const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";
  const resultDisplayArray = 
   `<li class='text-warning'>${result.failure[0]}</li>
    <li class='text-warning'>${result.failure[1]}</li>
    <li class='text-warning'>${result.failure[2]}</li>
    `;
  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/
const resultDisplayArray = makeList(result.failure);
alpox
@alpox
Feb 20 21:32
They don't want you to print something to the screen, they just want you to return a new array
@RoniqueRicketts 1. you should use the argument to the function - arr - and not result.xyz
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:32
@alpox return an array or a string using backtick?
alpox
@alpox
Feb 20 21:33
Also, you now made resultDisplayArray be ONE string. but the function should return an array with multiple strings - as many strings as arr has`
Jason Luboff
@JLuboff
Feb 20 21:33
To be fair...the description on this challenge is not very readable.
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:40
still lost
const result = {
  success: ["max-length", "no-amd", "prefer-arrow-functions"],
  failure: ["no-var", "var-on-top", "linebreak"],
  skipped: ["id-blacklist", "no-dup-keys"]
};
function makeList(arr) {
  "use strict";

  // change code below this line
  const resultDisplayArray =  
   `<li class='text-warning'>${arr[1][0]}</li>
    <li class='text-warning'>${arr[1][1]}</li>
    <li class='text-warning'>${arr[1][2]}</li>
    `;
  // change code above this line

  return resultDisplayArray;
}
/**
 * makeList(result.failure) should return:
 * [ <li class="text-warning">no-var</li>,
 *   <li class="text-warning">var-on-top</li>, 
 *   <li class="text-warning">linebreak</li> ]
 **/
const resultDisplayArray = makeList(result.failure);
alpox
@alpox
Feb 20 21:42
@RoniqueRicketts arr does not have two dimensions. Its a flat array. (In this case, its ["no-var", "var-on-top", "linebreak"])
You still return only one string instead of an array
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:52
sigh this one is not making any sense to me
alpox
@alpox
Feb 20 21:53
@RoniqueRicketts Tip: You need some kind of loop
Ronique Ricketts
@RoniqueRicketts
Feb 20 21:53
I realize that I was passing additional information which is an err.