These are chat archives for FreeCodeCamp/HelpFrontEnd

25th
Jun 2018
Uriel Guzmán
@Burinson
Jun 25 2018 00:01
            for (let color in steps) {
                if (steps[color] == "#red") {
                    $(steps[color]).css("background", "lightcoral");
                    //setTimeout(function(){$(steps[color]).css("background", steps[color].slice(1)); }, 1000);
                } else {
                    $(steps[color]).css(
                        "background",
                        "light" + steps[color].slice(1)
                    );
                    //setTimeout(function(){$(steps[color]).css("background", steps[color].slice(1)); }, 1000);
                }
            }
Trying to make the flashing buttons loop on my Simon Game
Anyone know how to make the loop delay 1 second?
So that it gives the player time to analyze the moves
Tried using setTimeOut function but it doesn't work when inside the loop. Instead of showing me one button every second, it shows all the buttons after 1 second
include*engine
@newtothat
Jun 25 2018 00:04
can we have subpages in codepen ? if yes how?
Bjorn van de Peut
@bjorno43
Jun 25 2018 00:09
@Burinson That's because setTimeout() is an asynchronous callback function. Meaning that after JS executes the timeout, it moves on to execute other code. When the timer is finished, a callback is performed to let JS know to perform the code inside the timeout function. There are a few solutions to this problem. The easiest one is to have all the remaining code inside the timeout function.
Bjorn van de Peut
@bjorno43
Jun 25 2018 04:26
@cmccormack Still here?
Simon Cordova
@gbsimon87
Jun 25 2018 08:49
Morning :)
dinesh
@1532j0004kg
Jun 25 2018 09:51
@newtothat I hope no
Vali
@valimikayilov
Jun 25 2018 10:50
@Geek-Killer
What is up guys ?
Do u know if I can use the same text in documentation page ?
Fernando L. Estuesta
@champolot
Jun 25 2018 10:53
.
Vali
@valimikayilov
Jun 25 2018 10:53
.
I'm doing the Build a Technical Documentation Page, do u know if I can use the same text on sample to complete the task ?
Fernando L. Estuesta
@champolot
Jun 25 2018 10:56
just checking the time. idk why the time here is different on my current time
Jonathan
@skillt3ch
Jun 25 2018 10:57
@Geek-Killer not sure if you can use the same text, but you could always just use lorem ipsum
Vali
@valimikayilov
Jun 25 2018 10:57
@champolot are u using vpn ?
@skillt3ch yes but it is hard to find a meaningful text th
that fits the structure.
Fernando L. Estuesta
@champolot
Jun 25 2018 10:59
i don't think so. there's no vpn running right now
Jonathan
@skillt3ch
Jun 25 2018 11:13
@Geek-Killer I just used W3Schools as a template
Vali
@valimikayilov
Jun 25 2018 11:14
@champolot are u sure that your PCs time is correct?
@skillt3ch Thanks! I will probably use the same source.
Jonathan
@skillt3ch
Jun 25 2018 11:16
@Geek-Killer no problem :thumbsup:
Fernando L. Estuesta
@champolot
Jun 25 2018 11:19
guys. would you consider that jquery is dead?
yeah im pretty sure @Geek-Killer that my pc time is correct
Aditya
@ezioda004
Jun 25 2018 11:26
@champolot Not dead per se (theres always legacy codes) but going forward I dont think most people would use jQuery in their tech stack anymore.
julien Demarque
@JulienDemarque
Jun 25 2018 14:11
Hello, can someone advise me on some routing? I am building an app that send some data async to the server to store it in a database. I want also to request some data async from the database to the webpage, without refreshing the page. So I am wondering, I used a POST request with the same route as the webpage for putting the data to the database. But to get the data from the database, I would just need to invent a new url? Also can I send a json object back with node-express?
Ok second part of the question I guess the answer is res.send(JSON.stringify({key: value}));
Nate Mallison
@NJM8
Jun 25 2018 14:28
@JulienDemarque My understanding is that unless you are building a SPA with a framework that will handle client side routing you will need to treat that route like a rest api. So send data to the route and receive a response but don't change your url
looks like it will have to be client side.
julien Demarque
@JulienDemarque
Jun 25 2018 14:38
@NJM8 Thanks. I am not using a form at all. So I don't get this problem. I think I will create the same url for the POST and the GET to database that will be different from the page I am in. Makes more sense now I think about it.
Kingsley
@Kingwindie
Jun 25 2018 14:45
Hi people i am having trouble figuring out why the gender is undefined can someone look at this code
function Person(name, age, weight, gender, car) {
    this.name = name;
    this.age = age;
    this.weight = weight;
    this.gender = gender;
    this.car = car;
}


Person.prototype.greeting = function () {
    `Hello  this is ${this.name} i am ${this.age} ${this.gender} 
and i weight i crazy ${this.weight} and i drive a ${this.car} that is all i have to say for now!`
}

// create new people based on Person class

const okoro = new Person("Okoro", 23, "", "", "Nissan Altima");

//  console.log(okoro.greeting());


//create new class from Person,inherit name,age and gender

function Teacher(name, age, gender, experience, subject) {
    Person.call(this, name, age, gender);
    this.experience = experience;
    this.subject = subject;
}
//create new teachers



Teacher.prototype.info = function () {
    console.log(`
     Name: ${this.name} 
     Subject(s): ${this.subject}
     Gender: ${this.gender}
     Experience: ${this.experience}`);
}


var teacherOne = new Teacher("Ozaba", 34, "Female", "8 years", "Maths,Physics,Chemistry");
console.log(teacherOne.info());
the gender for the teacher is undefined,but i'm not sure why it says that
Markus Kiili
@Masd925
Jun 25 2018 14:58
@Kingwindie When you call new Teacher, gender parameter holds "Female", when the Teacher constructor is executed. It calls Person.call(this, name, age, gender); and passes Female as the third argument when Person is executed. So it is stored on this.weight.
So you need to pass name, age, weight, gender and car into the Person in that order, not name, age, gender.
Kingsley
@Kingwindie
Jun 25 2018 15:01
so i have to pass all the arguments,even the ones i don't want to use when i call Person?
i don't want the Teacher class to have weight
Markus Kiili
@Masd925
Jun 25 2018 15:04
@Kingwindie If you pass less arguments than there are parameters, the extra parameters end up with value undefined. You can do that or pass nullvalues, depending on the logic you need.
Kingsley
@Kingwindie
Jun 25 2018 15:05
@Masd925 ok thanks
Aditya
@ezioda004
Jun 25 2018 15:12
@Kingwindie You havent linked Teacher.prototype with Person.prototype, so the instances of Teacher wont have the prototype methods available to them such as .greeting. Unless its intended you can link it by doing
Teacher.prototype = Object.create(Person.prototype);
Teacher.prototype.constructor = Teacher
Teacher.prototype.info = function () { 
    console.log(`
     Name: ${this.name} 
     Subject(s): ${this.subject}
     Gender: ${this.gender}
     Experience: ${this.experience}`);
}
var teacherOne = new Teacher("Ozaba", 34, "Female", "8 years", "Maths,Physics,Chemistry");
teacherOne.greeting() // would work
Theres also a return statement missing from Person.prototype.greeting
Kingsley
@Kingwindie
Jun 25 2018 15:18
thanks,it looks like the example i looked at few days ago,i think i need to re-read the whole lesson
@ezioda004
Daniel
@dbsimeonov
Jun 25 2018 15:41
guys is there any reason or way I can store json data in variable outside my axios call?
axios.get('link')
    .then( (response) => {
        let res = response.data.exercises;
        console.log(res);
    })
    .catch( ( err) => {
        console.log(err);
    });
Aditya
@ezioda004
Jun 25 2018 15:50
@dbsimeonov Declare a variable outside the scope and simply assign the returned data?
let data;
axios.get('link')
    .then( (response) => {
        data= response.data.exercises;
        console.log(data);
    })
    .catch( ( err) => {
        console.log(err);
    });
console.log(data); //undefined
Daniel
@dbsimeonov
Jun 25 2018 15:51
yes but returns me undefined ?
Aditya
@ezioda004
Jun 25 2018 15:54
You'll get undefined because its a AJAX request, but rest assured the data is stored in the variable.
You can check by doing something like this
let data;
axios.get('link')
    .then( (response) => {
        data= response.data.exercises;
        console.log(data);
    })
    .catch( ( err) => {
        console.log(err);
    });
console.log(data); //undefined

setTimeout(() => console.log(data), 2000); // data
Daniel
@dbsimeonov
Jun 25 2018 15:55
awh right, forgot about that, tnx! @ezioda004
Aditya
@ezioda004
Jun 25 2018 15:56
Async is always tricky business :thumbsup:
Lorrie Pearson
@Lorrie01
Jun 25 2018 16:08
Screen Shot 2018-06-25 at 12.06.25 PM.png
Screen Shot 2018-06-25 at 12.06.25 PM.png
Screen Shot 2018-06-25 at 12.07.00 PM.png
mstellaluna
@mstellaluna
Jun 25 2018 16:10
@Lorrie01 :wave:
Lorrie Pearson
@Lorrie01
Jun 25 2018 16:10
Screen Shot 2018-06-25 at 12.06.39 PM.png
Hi @mstellaluna !!! How are you?
Lorrie Pearson
@Lorrie01
Jun 25 2018 16:19
I looks like my message did not load with my images. I need help with the problem:https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches
Kaz Baig
@kbaig
Jun 25 2018 16:34
@Lorrie01 uppercase T
Lorrie Pearson
@Lorrie01
Jun 25 2018 16:38
thank you @kbaig
Kaz Baig
@kbaig
Jun 25 2018 16:39
@Lorrie01 :smile:
mstellaluna
@mstellaluna
Jun 25 2018 17:23
@Lorrie01 srry I had to step away.. same old thing. how are u?
Daniel
@Feldbot
Jun 25 2018 17:46
I'm trying to understand scheduling functions with timers for the Simon app. I was playing with the code below trying to use a recursive setTimeout to log a range of numbers. I expected it to stop the timerID when it from === to, but for some reason the clearTimeout isn't stopping it. Does anyone know why clearTimeout isn't working in this case?
function printNumbers(from, to) {

  let timerID = setTimeout(function count() {

    console.log(from, to);
    from++;
    if (from === to) { clearTimeout(timerID) }   
    setTimeout(count, 1000);

  }, 0);
}

printNumbers(1, 3);
Markus Kiili
@Masd925
Jun 25 2018 17:48
@Feldbot Try timerID = setTimeout(count, 1000);
Daniel
@Feldbot
Jun 25 2018 17:51
@Masd925 I'm not sure what you are suggesting exactly, do you mind editing and pasting that code in?
@Masd925 Never mind, got it. Thanks! I'm still not sure why I couldn't assign the timerID to the whole function...
Markus Kiili
@Masd925
Jun 25 2018 17:54
@Feldbot On that code the variable only holds the first timeout id. You need to update it when new timeouts are made, so you can stop the one currently running.
You also need an else so you don't make a new timeout if from===to, which you most likely figured out.
Daniel
@Feldbot
Jun 25 2018 17:58
@Masd925 Still puzzled. What do you mean by update it? I wound up doing this without an else:
function printNumbers(from, to) {

  setTimeout(function count() {

    console.log(from, to);
    if (from === to) { clearTimeout(timerID) }   
    let timerID = setTimeout(count, 1000);
    from++;

  }, 0);
}

printNumbers(1, 3);
Markus Kiili
@Masd925
Jun 25 2018 17:59
@Feldbot Earlier you didn't assign the timer id to the variable. Then there was no way to stop it.
Lorrie Pearson
@Lorrie01
Jun 25 2018 18:00
@mstellaluna I'm doing well. I'm still working on my coding skills and loving it.
Daniel
@Feldbot
Jun 25 2018 18:06
@Masd925 In the first, I thought the timerID variable would be assigned a number that would allow it to stop with clearTimeout... no? I don't get with the second example why it would work then, it seems like it is doing the same thing.
Markus Kiili
@Masd925
Jun 25 2018 18:07
@Feldbot Your code actually doesn't work. It throws an error when from===to, because timerID is not defined.
That is why it stops at correct point.
Daniel
@Feldbot
Jun 25 2018 18:09
@Masd925 Oh, now I see that. Yikes. Can you paste in the solution you were referencing with timerID = setTimeout(count, 1000);, I'm pretty lost now.
Markus Kiili
@Masd925
Jun 25 2018 18:11
@Feldbot Try this:
function printNumbers(from, to) {

  var timerID = setTimeout(function count() {
    console.log(from,to);
    if (from === to) clearTimeout(timerID);  
    else {
        timerID = setTimeout(count, 1000);
        from++;
    }  
  }, 0);
}

printNumbers(1, 3);
Daniel
@Feldbot
Jun 25 2018 18:23
@Masd925 Thanks Markus. I can see why your example works, but I still don't understand why my first example doesn't. I ran it through the debugger and timerID gets assigned a value of 1 in the closure. Usually the timer IDs seem like larger random numbers, so I'm wondering if my whole variable actually became truthy for some reason instead? I don't mean to drag this through the mud, I just really am not getting it yet.
Markus Kiili
@Masd925
Jun 25 2018 18:26
@Feldbot If you just do setTimeout(count, 1000); without assignment, a new timeout is created but no way to stop it, because you don't store the id.
Actually there is no need to clear the timeout. Just don't make a new one if from===to.
Markus Kiili
@Masd925
Jun 25 2018 18:31
function printNumbers(from, to) {

  var timerID = setTimeout(function count() {
    console.log(from,to);
    if (from !== to) {
        timerID = setTimeout(count, 1000);
        from++;
    }  
  }, 0);
}

printNumbers(1, 3);
Daniel
@Feldbot
Jun 25 2018 18:39
@Masd925 So in my original example, I'd need to overwrite the timerID variable since I'm creating another setTimeout recursively, and when I try to stop the whole function by calling clearTimeout, it may stop the first function, but not the unassigned inner recursive call to the function that just keeps marching on?
Markus Kiili
@Masd925
Jun 25 2018 18:40
@Feldbot You only need to worry about clearing if you use setInterval. SetTimeout is cleared before the callback function is executed.
I didn't spot that earlier, sorry.
Daniel
@Feldbot
Jun 25 2018 18:42
@Masd925 Interesting... Why is there a clearTimeout method then?
Markus Kiili
@Masd925
Jun 25 2018 18:43
@Feldbot In the case you would wan't to stop the timer before the time is up. Here you don't.
Here you check inside the callback if there is a need to make another timeout.
Daniel
@Feldbot
Jun 25 2018 19:17
@Masd925 That makes sense. Still trying to understand the big picture of how to structure the timeouts. Work in progress. Thanks very much for taking the time to explain.
German Gamboa Gonzalez
@germangamboa95
Jun 25 2018 19:51
can I get some feedback on my portfolio? https://germangamboa95.github.io/vue-portfolio.io/#/
Payton Jewell
@paytonjewell
Jun 25 2018 20:04
@germangamboa95 it looks really good! The layout is well done, it appears to be completely mobile responsive, and everything is clearly labeled. However, the Projects page seems to be a bit broken up toward the bottom -- Eventler and LetsDoLunch are displayed perfectly well, but Woofe and Pokemon Battles are at an odd corner-angle rather than being displayed in the same line and completing the grid with the two above them.
It also appears that in your links for the "Projects" and "Contact Me" sections, at the top of the page, affixed to the header, have some wonky text stuff going on. If I hover off to the side of the labels, the drop-down effect allows me to click on the surrounding blue/gray area to follow the link. However, if I hover over the actual text, my cursor can no longer click on it and the link no longer works. Just make sure that the text element is included with the rest of the link/dropdown :)
Daniel
@Feldbot
Jun 25 2018 20:04
@germangamboa95 Your secondary nav on the home page, "projects" and "contact me", got a little lost on me, I was clicking through the main nav Resume to view your projects. When you click on blog or resume, the secondary nav disappears, which is a problem. You don't have a ton of content, so I'd move everything to a main nav so it is easy to find everything. Coming along well though!
holoh
@hollloh
Jun 25 2018 20:08

@germangamboa95
the <span> for 'projects' and 'contact me' doesn't expand if i hover right over the text
bet you could just shift some html elements around to make those spans children of the buttons

the 'eventler' project brings back a 404 error (in the résumé area (the other one's fine))
looks cool otherwise

Bjorn van de Peut
@bjorno43
Jun 25 2018 20:14
@paytonjewell He's using Materialize CSS for this. As for the Projects page, those are Cards. The bottom ones are a bit of because of the content for Woofer being too big to fit the same heights. As for the menu: I agree the cursor changes back to normal, but the click events are still working for me when it happens
anthonygallina1
@anthonygallina1
Jun 25 2018 20:17
@germangamboa95 very nice profesional look The menu wont close on fire fox here for me. Keep up the good work I really like the GUI.
And transitions
Bjorn van de Peut
@bjorno43
Jun 25 2018 20:19
It kinda scares me that I recognise a CSS framework before even looking at the code.. ghehe
German Gamboa Gonzalez
@germangamboa95
Jun 25 2018 20:29
@paytonjewell @Feldbot @hollloh @bjorno43 @anthonygallina1 Thanks for the feedback guys! I shall fix the cards with a fixed height and the little drops downs act weird since I kinda hacked it together with the text content being position absolute above the the actual drop down.
anthonygallina1
@anthonygallina1
Jun 25 2018 20:36
@germangamboa95 good work :smile:
Mark Kubik
@KUBIX90
Jun 25 2018 21:20
Hi
I am using VS code with git bash in the editor
can someone explain how to navigate to different repositories?
I keep getting an error saying no such file/folder exists even though I know it does
I can change directory using git bash application itself, but once i try using it within VS code it won't let me change directory
Hope this makes sense, thanks!
Nevermind think I've solved it lol
Daniel
@Feldbot
Jun 25 2018 23:01
I'm trying to time my Simon app lights to flash on and off with timer functions. I have a couple functions that control timing so far. In line 79 my playSequence function has a setInterval function set up to iterate through my simon.sequence (array of numbers between 1 and 4), and every 500ms call a renderFeedback function in line 94. The renderFeedback function takes sound and light arguments that are mapped to the simon.sequence array. I'm getting some strange behavior here though in that the lights won't turn on to full opacity as expected when I have the scheduled setTimeout(dimLight(light), 250); line in place. Oddly, if I code out line 97, the lights do turn on (but then won't turn back off). I have the dimLight function scheduled at 250ms, so I'd expect the lights to initially turn on to full brightness, then 250ms later turn back off before going to the next light 250ms later. Not sure what I am doing wrong here.
Daniel
@Feldbot
Jun 25 2018 23:12
Incidentally, to test you have to turn it on and hit start.
Never mind, just figured out I have to pass in parameters differently with timers!