These are chat archives for FreeCodeCamp/HelpFrontEnd

26th
Jan 2018
Stephen James
@sjames1958gm
Jan 26 2018 00:01
@Feldbot This is a new concept where a function returns another function thus the (2)(3) syntax.
can I ask you a question? what is arguments.length in addTogether in this case addTogether(2)(3)?
Dylan Mayers
@DylanMayers
Jan 26 2018 00:03
wondering if anyone can help me here, i'm trying to implement a navbar for a page i'm making and it isn't able to be viewed as a normal navbar, it's collapsed by default and i can't figure out how to correct it
Bjorn van de Peut
@bjorno43
Jan 26 2018 00:04
@DylanMayers I would suggest that you make a Codepen out of it so others can review your code and see what's going on
Dylan Mayers
@DylanMayers
Jan 26 2018 00:04
sure thing
Bjorn van de Peut
@bjorno43
Jan 26 2018 00:07
@DylanMayers I think that pen is incomplete. The menu doesn't work at all there
Oh wait.. it does
It's just a very small button, lol
Dylan Mayers
@DylanMayers
Jan 26 2018 00:08
it's a code along exercise but in the video the navbar was implemented as normal, so i'm confused as to why my bar is collapsed
i've tried copying the solution html and the result is the same
Daniel Feldman
@Feldbot
Jan 26 2018 00:09
@sjames1958gm In the case you are mentioning, with that syntax, I'd say the argument's length is 1. There are two arguments, but each has it's own length of 1.
Stephen James
@sjames1958gm
Jan 26 2018 00:10
@Feldbot length 1 is correct, there is only one argument being passed to addTogether the (2)
Bjorn van de Peut
@bjorno43
Jan 26 2018 00:12
@DylanMayers This is the part that causes it: <div class="collapse navbar-collapse" You can change that to <div class="nav navbar-nav" and it will show by default. Though it will be out of place, undoubtly because of the design used.
@DylanMayers You might want to check this website: https://www.w3schools.com/bootstrap/bootstrap_navbar.asp It explains a couple of things about bootstrap navbars
Daniel Feldman
@Feldbot
Jan 26 2018 00:15
@sjames1958gm My code is working, apparently, but it won't pass these tests:
addTogether(2)(3) should return 5. // If I call addTogether(2), it returns 5 but won't pass the test.
addTogether(2)([3]) should return undefined. // If I change the hard-coded value var add3 = makeAdder([3]); it returns undefined, but won't pass the test.
Dylan Mayers
@DylanMayers
Jan 26 2018 00:15
@bjorno43 thanks for the help, i'll look into that link :)
CamperBot
@camperbot
Jan 26 2018 00:15
dylanmayers sends brownie points to @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 218 | @bjorno43 |http://www.freecodecamp.org/bjorno43
Stephen James
@sjames1958gm
Jan 26 2018 00:17
@Feldbot
addTogether(2)
This call to addTogether should return makeAdder(num1)
And your makeAdder should test y not x
the function returned by addTogether will get the values (3) and ([3]) in the parameter y which need to be checked
Bjorn van de Peut
@bjorno43
Jan 26 2018 00:18
@Feldbot That's the wrong way to pass parameters to JS functions. For example
function example(parameter1, parameter2){
    var result = parameter1 + parameter2;
    return result;
}

var add = example(2, 3);

// Add = 5
Stephen James
@sjames1958gm
Jan 26 2018 00:19
@bjorno43 This is a specific challenge that returns a function so addTogether(2)(3) is from the challenge.
Bjorn van de Peut
@bjorno43
Jan 26 2018 00:19
@sjames1958gm Ah, missed that part. My bad!
Stephen James
@sjames1958gm
Jan 26 2018 00:20
@Feldbot Your makeAdder function is close, but it should be testing the value passed to the returned function
  function makeAdder(x) {
    return function(y) {
      numTest(y);
      if (number === false) {
        return undefined;
      }

      return x + y;
    };
  }
@Feldbot in the case of (2)(3)
x is 2 and y is 3 which results in 5
in the case of (2)([3])
x is 2 and y is [3] which is how you get undefined
Daniel Feldman
@Feldbot
Jan 26 2018 00:25
@sjames1958gm Pardon me while I dine. I'll be back to try to make sense of this in just a bit. I appreciate your help!
Stephen James
@sjames1958gm
Jan 26 2018 00:26
@Feldbot Sure.
christopher clarke
@chrisdclarke
Jan 26 2018 00:36
hey guys.... im having trouble making this work... trying to do an api call for the random quote project... any ideas why its not working?
$("#GetQuote").click(function(){
$.ajax({url:"https://labs.bible.org/api/?passage=random"
, success: function(result){
$("#quotebox").html(result);
}});
});
Stephen James
@sjames1958gm
Jan 26 2018 00:39
@chrisdclarke Open your devtools (F12) on chrome and there is an error Jquery is not defined
@chrisdclarke I think your two includes need to be swapped jquery before jquery ui
@chrisdclarke In the codepen you are missing the # in the $("#GetQuote")
Then you run into CORS issues
christopher clarke
@chrisdclarke
Jan 26 2018 00:43
oh... our saying load jquery before ui??? ill try that ... thanks @sjames1958gm
CamperBot
@camperbot
Jan 26 2018 00:43
chrisdclarke sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8900 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 26 2018 00:45
@chrisdclarke On this page it mentions jsonp which you will need to use to get around Cross Origin problems (CORS)
https://labs.bible.org/api_web_service
Kent Saeteurn
@sansae
Jan 26 2018 00:49

Hello everyone.
I was wondering if someone could explain to me the concept of "this". When do we use "this"? Why do we use "this"? Could anyone give me specific examples using "this".

I need someone to explain it to me like I'm 5 years old.

Thank you in advance :)

Chi
@chiyc
Jan 26 2018 00:51
@sansae this refers to the object or context of something
christopher clarke
@chrisdclarke
Jan 26 2018 00:52
Stephen... so the Cors problem in a nutshell is that a site has to be an approved site to be able to download from it?
Chi
@chiyc
Jan 26 2018 00:53
@sansae If you have an object like so:
const obj = {
    A: 1,
    getA: function() {
        return this.A;
    }
};

and then you call to the console something like

console.log(obj.getA());

It's going to spit out

1
Stephen James
@sjames1958gm
Jan 26 2018 00:54
@chrisdclarke Basically, yes. But, with JSONP you can get around that if the site supports it and that site says it does.
I would switch to $.getJSON from $.ajax, and then in your URL include &type=jsonp&callback=?
Chi
@chiyc
Jan 26 2018 00:55
@sansae The tricky part is that the value of this can actually be different depending on how a function was defined or how something was called
like this?
Stephen James
@sjames1958gm
Jan 26 2018 00:58
@chrisdclarke The first one, but inside the ""
@chrisdclarke getJSON doesn't take an object like that and you pass a callback to it.
$getJSON(url, function(json) {});
Kent Saeteurn
@sansae
Jan 26 2018 00:59

@chiyc thank you so much for taking the time to explain it to me, Chi.

i'm so sorry, but I should have given you some context. I'm currently learning react and I'm seeing the word "this" being used in so many places, and I'm getting lost. for very basic examples like the one you just gave, I understand it, but anything beyond that and I get lost. i think you may have alluded to that when you mentioned this:

The tricky part is that the value of this can actually be different depending on how a function was defined or how something was called

i read this article: https://dmitripavlutin.com/gentle-explanation-of-this-in-javascript/
and i came away with nothing. it was like how i read spanish words. i can read it perfectly fine, but i have no idea what it's talking about

thanks again, Chi

CamperBot
@camperbot
Jan 26 2018 00:59
sansae sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @chiyc |http://www.freecodecamp.org/chiyc
Stephen James
@sjames1958gm
Jan 26 2018 01:00
@sansae In React generally this is referring to the Component that the functions are defined within.
Chi
@chiyc
Jan 26 2018 01:01
@sansae Perfect! Here's an example to kind of show why you need it in React. Let's say we define a second object with a variable A and we pass it the function obj.getA that we defined earlier,
const obj2 = {
    A: 50,
    getA2: obj.getA
};
Recall from above that obj.getA = function() { return this.A };
When we called obj.getA, we got A = 1
But if we call obj2.getA2, we get A = 50 even though we called the same exact function
And that's because we called this function from inside obj2 this time. So this refers to obj2, and this.A will also give you obj2.A
And like @sjames1958gm said, this in React usually refers to the Component where the function is defined

The reason you see things like

this.onChange = this.onChange.bind(this);`

is that when you pass your this.onChange function to another component to use, you still want this to refer to the original component you defined it in. That's usually because you're calling things like this.setState in your handler functions, so you want this to be the actual component you defined the function in

Kent Saeteurn
@sansae
Jan 26 2018 01:15

The reason you see things like

this.onChange = this.onChange.bind(this);`

is that when you pass your this.onChange function to another component to use, you still want this to refer to the original component you defined it in

head blown...

this! no pun intended, is exactly the reason why I'm getting confused. the word "this" is being used multiple times, and I'm not sure what each "this" is referring to

@chiyc can you walk me through the following code example?
export class Input extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      userInput: ''
    }

    this.handleUserInput = this.handleUserInput.bind(this);
  }

  handleUserInput(e) {
    this.setState({userInput: e.target.value});
  }

  render() {
    return (
      <div>
        <input type="text" onChange={this.handleUserInput} />
        <h1>I am an h1.</h1>
      </div>
    );
  }
}
christopher clarke
@chrisdclarke
Jan 26 2018 01:15
so stephen, i have this now but i still cant get it working.?
Chi
@chiyc
Jan 26 2018 01:16
Sure!
christopher clarke
@chrisdclarke
Jan 26 2018 01:16
$("GetQuote").click(function(){
$.getJSON("https://labs.bible.org/api/?passage=random&type=jsonp&callback=?")
,function(result){
$("#quotebox").html(result);
}});
;
Stephen James
@sjames1958gm
Jan 26 2018 01:17
@chrisdclarke you have an extra ) at the end of the getJSON line
Chi
@chiyc
Jan 26 2018 01:18
Let's start with the handleUserInput(e) function. You have this.setState() inside that function. this is intended to refer to the Input component so you can update this.state.userInput
(let's pretend you don't have the .bind line yet)
At the bottom, you're passing onChange={this.handleUserInput} to the <input> component. this in this.handleUserInput still refers to the handlerUserInput function we defined in the Input component because we're inside the Input component right now
christopher clarke
@chrisdclarke
Jan 26 2018 01:20
lol... thanks so much @sjames1958gm
CamperBot
@camperbot
Jan 26 2018 01:20
chrisdclarke sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Chi
@chiyc
Jan 26 2018 01:22
So now, if you don't have the .bind line, and then the input component tries to call handlerUserInput, this.setState will fail because input doesn't have a setState method
All functions in JavaScript have the .bind() method
This lets you permanently bind the meaning of this inside that function to what you pass to .bind()
In that code example, this.handleUserInput.bind(this) is like calling and passing this.handleUserInput.bind(Input)
This gives you a function where this always refers to Input
Chi
@chiyc
Jan 26 2018 01:30
Let me know if I'm still unclear :smile:
Chi
@chiyc
Jan 26 2018 01:36
You're also free to hit me up directly about React questions whenever you'd like!
Kent Saeteurn
@sansae
Jan 26 2018 01:38

@chiyc thank you Chi. and yes, i think i'll definitely take you up on that in the future.

i'm still unclear about it, but i've copied and pasted everything you typed into my atom editor. i just got done studying it, but am still confused. i'll keep going back to it.

CamperBot
@camperbot
Jan 26 2018 01:38
sansae sends brownie points to @chiyc :sparkles: :thumbsup: :sparkles:
api offline
Kent Saeteurn
@sansae
Jan 26 2018 01:39
@chiyc i felt like i was getting so close though. aaaaaahhh!
Chi
@chiyc
Jan 26 2018 01:39
@sansae It also really helps you understand things if you step through and debug live React code in your dev tools
Kent Saeteurn
@sansae
Jan 26 2018 01:41
fudge yeah!!! thanks for the heads up. debugging has been extremely helpful to me in understanding rails. i'm currently studying react on codecademy. there doesn't seem to be an option to walk through the code, but when i start creating my own react projects, i'll for sure use it
@chi i would love diagrams that have arrows pointing all over the place. like this "this" is pointing to this thing here, and this "this" is pointing to this thing here
Skylar
@skyboy1997
Jan 26 2018 01:51
Can anybody tell me whats wrong with my code? When I go to the chrome console it tells me that its not fetching and im not understanding what Im doing wrong . Thanks
Brad
@bradtaniguchi
Jan 26 2018 02:00
@skyboy1997 What happened with the indentation of this code?
Skylar
@skyboy1997
Jan 26 2018 02:02
@bradtaniguchi I just copy and pasted in pastepin
was kind of in a hurry
Brad
@bradtaniguchi
Jan 26 2018 02:06
@skyboy1997 also whats the exact error you get in the console? Do you have any screenshots?
Skylar
@skyboy1997
Jan 26 2018 02:06
yeah ill send some
Brad
@bradtaniguchi
Jan 26 2018 02:07
a quick thing I noticed your script tag is After the body tag, idk how browsers recover from that but I don't think thats correct (should be at the end of the body tag)
Skylar
@skyboy1997
Jan 26 2018 02:14
@bradtaniguchi https://imgur.com/aFEJWD4 thats my table and https://imgur.com/eUpJLDD thats the webpage that won't display the number of clicks
also heres the error
Brad
@bradtaniguchi
Jan 26 2018 02:18
app.get('/clicks', (req, res) => {

    db.one('SELECT * from clicks WHERE myId = $1', id)

        .then(function(data) {

            res.send(data.click);

        })

        .catch(function(error) {

            return error;

        })
});
I think it might be this area of code
if you get an error from your db.one call, you return nothing (the return error goes to nothing)
also idk what data is, but does it have a click attribute (seems funky)
cuse the error you get in the console mainly says your getting nothing back
@skyboy1997
Skylar
@skyboy1997
Jan 26 2018 02:23
data is on the client side code
document.getElementById('counter').innerHTML = `Button was clicked ${data.length} times`;
Brad
@bradtaniguchi
Jan 26 2018 02:25
hmm interesting
wait if you take out the timeout (so it doesn't call the db every second) does it still throw the error?
Skylar
@skyboy1997
Jan 26 2018 02:28
what if i take out the .length
then it should just try to retrieve the data
Brad
@bradtaniguchi
Jan 26 2018 02:28
On the clientside?
It seems like your getting the error from the backend, the clientside is fine once it gets the data, so removing length shouldn't matter (cuse you have the data correctly already)
Skylar
@skyboy1997
Jan 26 2018 02:30
well recently I switched from mongo to postgres and this is when this happened. my mongo code didn't have that in it.
Brad
@bradtaniguchi
Jan 26 2018 02:31
I stick with my earlier mention that if you get an error in your db call, you return nothing in your response (which is what fetch complains about on your clientside) now I'm not sure why youd get an error, but its always possible
it could be how you have your db setup in node, maybe it gets overwhelmed with a request per second or something (just guesses)
Dan Lafferty
@DanLaff
Jan 26 2018 03:23
@nicolaimagnussen Great work! Sorry I got busy and just saw this now. That's a great way to do it.
bv
@binduverma1
Jan 26 2018 04:07
I am using the following code to tweet quote from my website but it sends a link of my codepen with a picture. I am not sure how to write a code just for sending the text of quote to twitter. code is as follows:
$('a[data-text]').each(function(){
$(this).attr('data-text', "This works!");
});
$.getScript('https://platform.twitter.com/widgets.js'); Can some one tell me how to tweek it to send just the quote text?
Heathercoraje
@Heathercoraje
Jan 26 2018 04:40
@Binduverma1 I have used anothier url..
I am not using ajax but or jquery but maybe have a look at the code. here
Can anyone give a hand access json with a key value in number?
This message was deleted
{47515: {…}}
47515
:
langlinks
:
(158) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
ns
:
0
pageid
:
47515
title
:
"Cloud"
I am trying json.47515.langlinks. then it throw an error.
Heathercoraje
@Heathercoraje
Jan 26 2018 04:46
Opps, nevermind. json["47515"].langlinks works.
Ken Haduch
@khaduch
Jan 26 2018 04:47
@Heathercoraje - you cannot use a number with dot notation, according to my recollection. I think that you need to use bracket notation.
Do you have to quote the number to use it in the bracket notation, @Heathercoraje ?
Heathercoraje
@Heathercoraje
Jan 26 2018 04:55
@khaduch I have a access by using square bracket, I thought I have tried it and didn't work. I must have had a different error. but now It works. Thank you @khaduch
CamperBot
@camperbot
Jan 26 2018 04:55
heathercoraje sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3697 | @khaduch |http://www.freecodecamp.org/khaduch
Aditya
@ezioda004
Jan 26 2018 05:01
@khaduch I think so, since JSON keys are always string. However in objects both of them works
var obj = {123 : "Hello"};
obj["123"];      //Hello
obj[123];          //Hello
Markus Kiili
@Masd925
Jan 26 2018 06:12
@khaduch Bracket notation evaluates the expression and coerces in to type String. That is why using a number works even though keys are strings.
Sweet Coding :)
@SweetCodingInc
Jan 26 2018 06:30
Just a note, js object and json are two entirely different things
Markus Kiili
@Masd925
Jan 26 2018 06:34
@SweetCodingInc Yeah, bad thing that FCC exercises use bad terminology.
Sweet Coding :)
@SweetCodingInc
Jan 26 2018 06:34
@Masd925 :+1:
Wolfion
@DEEPANSHU-BHASKER
Jan 26 2018 08:27
@DEEPANSHU-BHASKER
hello guys
i need help
in css
i have 3 images i want to align them in to the right side
in jizjag manner but i couldnt able to do so
Rami
@RNwebdk
Jan 26 2018 09:03
Guys, i feel so stupid, why the hell is this not executing ?
class App{

    static start(){

        console.log("test");
    }
}

App.start();
abraham anak agung
@padunk
Jan 26 2018 09:06
@RNwebdk it work for me.
Rami
@RNwebdk
Jan 26 2018 09:09
@padunk i hope you're not trolling me LOOL!
hmm...
abraham anak agung
@padunk
Jan 26 2018 09:12
You got an error? @RNwebdk
Rami
@RNwebdk
Jan 26 2018 09:13
no, thats my problem
damn it, i was my cache... LOOL!
I hate browsers sometimes
Henry
@GitHub-Henry
Jan 26 2018 09:15
There is a disable cache button in chrome, but your it works fine
image.png
in chrome, under the network tab click disable cache, i don't seem to have cache issues since using it.
image.png
Rami
@RNwebdk
Jan 26 2018 09:23
@GitHub-Henry thanks
CamperBot
@camperbot
Jan 26 2018 09:23
rnwebdk sends brownie points to @github-henry :sparkles: :thumbsup: :sparkles:
:cookie: 534 | @github-henry |http://www.freecodecamp.org/github-henry
Vikas Rathee
@vikas-rathee
Jan 26 2018 10:43
In Chrome the navigator.geoLocation does not work on http server. Any suggestions on how to get user location using JS on http server.
SAURABH SHEORAIN
@SSheorain
Jan 26 2018 11:34
hey @all
i want to use sematic ui for emails.. but unable to load them
alpox
@alpox
Jan 26 2018 11:40
@SSheorain I'm not sure if thats a good idea as if you want to visit your mail when being offline it would break the layout - and if it would be possible (I don't know if it is) to attach Semantic UI directly to the mail, the mail would get much too big from it.
I suggest you to better style your mails natively
To get an overview what should/should not be done
Keep in mind that email clients are no fully fledged browsers
SAURABH SHEORAIN
@SSheorain
Jan 26 2018 11:46
@alpox thanks
CamperBot
@camperbot
Jan 26 2018 11:46
ssheorain sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1527 | @alpox |http://www.freecodecamp.org/alpox
maayoko
@maayoko
Jan 26 2018 13:20
@VaseJS that's what I meant, thanks for clarifying a little further( I was in a hurry of explaning the problem). @AryanJ-NYC I'm using react and with him semantic-ui-react (they have really diverse components out of the box). But for now I'm having a problem because my app doesn't have any styles in the first request (only after browser parser starts parsing html, so he bumps on link tag and grabs css from the server) so by the time browser downloads css files user gets stuck with ugly html text, and if user has slower connection experience gets even worser. Hope you agree. One solution to that is to use something like styled-components but then I would have to rewrite whole css files from sematnic-ui (this approach allows to download only needed css for requested page in first go - first request). But as I said there are a lot of css files in semantic ui package so am wondering is there any way to extract only needed styles?
CamperBot
@camperbot
Jan 26 2018 13:20
maayoko sends brownie points to @vasejs and @aryanj-nyc :sparkles: :thumbsup: :sparkles:
:cookie: 478 | @vasejs |http://www.freecodecamp.org/vasejs
:cookie: 469 | @aryanj-nyc |http://www.freecodecamp.org/aryanj-nyc
alpox
@alpox
Jan 26 2018 13:36
@maayoko As far as i know there is no such way for css. If you want to prevent the ugly html, you may show a loading screen to the user until the css is loaded
maayoko
@maayoko
Jan 26 2018 13:54
@alpox hm, I know webpack is using a concept of CSS Modules (with Extract Text Plugin) which transforms css into js, but it transforms css selectors without appropriate name: value pairs. It would be nice if there is a way to completely transform css into css modules and then when doing bundling (e.g with webpack) extract only used css in those css modules. Hope that make sense. For now I could read css file on the server and stick it in style tag as a string and voila I'm having a css in first request. But then I'm sending way to much css then what it's needed.
alpox
@alpox
Jan 26 2018 14:06
@maayoko There is no way until now for webpack to figure out which css is actually needed and which one is not
Seth
@sethdcd
Jan 26 2018 15:02
hi all! working on the pomodoro clock and stuck on the fact that i can't seem to get my break countdown function to work after my timer function. they keep running at the same time :(. how would i set it up so the timer loop runs first and then the break loop runs second?
Tom
@moT01
Jan 26 2018 15:04
if (session == 0) {
start break timer
}
Seth
@sethdcd
Jan 26 2018 15:07
hmm, so just wrap it in an if statement?
Tom
@moT01
Jan 26 2018 15:08
i would do something like that probly
and same thing in the break function
if break = 0 => clear interval/start session
Ken Haduch
@khaduch
Jan 26 2018 15:10
@sethdcd - you need to stop one timer before you start the other, so you have to keep your session value returned from the setInterval so that you can clear it. Or just keep one timer and switch "contexts" so to speak to use the break value and run with the new values, then toggle back to the "session" after that finishes, etc. I think that it's easier to do with one timer, personally.
definitely don't get more than one timer running at a time, ever!
Seth
@sethdcd
Jan 26 2018 15:12
@khaduch i'm currently using setTimeout, should i be using setInterval instead?
thanks tom, i will try to implement that
Ken Haduch
@khaduch
Jan 26 2018 15:13
@sethdcd - I prefer setInterval because once you start it, it keeps on ticking! Just think about how to control it. The callback function for setInterval does all of the work just to keep the count of seconds, switch to "break" time when the "session" finishes.
Heathercoraje
@Heathercoraje
Jan 26 2018 15:16
@sethdcd SetTimeout and SetInterval have similar syntax
Seth
@sethdcd
Jan 26 2018 15:16
@khaduch gotcha ok! i ended up creating an IIFE with setTimeout for it to pause, but then it ends up just running both of the timers at the same time
Heathercoraje
@Heathercoraje
Jan 26 2018 15:18
@sethdcd Does it work now?
Seth
@sethdcd
Jan 26 2018 15:22
@Heathercoraje not really, the timer will run it's course, and then there is nothing when the break part comes on. it just stays at zero. so i made another id tag to have the timer go to my timer ID and the break to my break ID, and then i noticed they just both run at the same time :/
FedericoMartinWeb
@FedericoMartinWeb
Jan 26 2018 15:23
Hi, I have a question, if I already have a portfolio page I need to do it again on codepen or just copy the link of my website? thank you!
Heathercoraje
@Heathercoraje
Jan 26 2018 15:25
@sethdcd I had a similiar problem
Seth
@sethdcd
Jan 26 2018 15:25
yeah it sounds like i need to create some kind of switch, to have it switch over only once the other one is complete
Heathercoraje
@Heathercoraje
Jan 26 2018 15:26
Or you could remove setInterval or setTimeout
then re-execute once the condition is met.
@FedericoMartinWeb I guess it really depends on your aim?
Surely be fairly proficient in css takes very long time. It wouldn't hurt to practice more.
@sethdcd Let me know if you need more help maybe we can read along
Seth
@sethdcd
Jan 26 2018 15:30
@Heathercoraje cool thanks heather! i'll keep you posted :D
CamperBot
@camperbot
Jan 26 2018 15:30
sethdcd sends brownie points to @heathercoraje :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @heathercoraje |http://www.freecodecamp.org/heathercoraje
Heathercoraje
@Heathercoraje
Jan 26 2018 15:31
:) ! I used to get tons of help from here. I still do :)
welcome!
Seth
@sethdcd
Jan 26 2018 15:34
:) yeah it's a great community for sure
Heathercoraje
@Heathercoraje
Jan 26 2018 15:35
I recently came back to fcc but it is helpful for sure.
Kaz Baig
@kbaig
Jan 26 2018 15:52
@Heathercoraje wb!
christopher clarke
@chrisdclarke
Jan 26 2018 16:22
hey guys... does anyone understand sandboxing enough to explain it to me... i always get error messages about it, and when i google it i dont quite get it?
An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. LewQZV
nsonhouse
@nsonhouse
Jan 26 2018 16:35
Hello all. I need some help with content showing up outside of it's intended <div>. Can amy one help? https://codepen.io/nSco/pen/VbLejK?editors=1100
christopher clarke
@chrisdclarke
Jan 26 2018 16:41
by content you mean TEST?
Vikash Saini
@Enigma10
Jan 26 2018 16:53
anyone active here ?
Dan Lafferty
@DanLaff
Jan 26 2018 16:54
Did you have a question @Enigma10 ?
Vikash Saini
@Enigma10
Jan 26 2018 16:54
@DanLaff yes
@DanLaff it's related to my interview task which i hard to understand. Can you help me
nsonhouse
@nsonhouse
Jan 26 2018 16:54
@chrisdclarke Yes Chris
@chrisdclarke TEST
Dan Lafferty
@DanLaff
Jan 26 2018 16:55
@Enigma10 I can try to help - please ask the question. No need to ask if you can ask :)
@nsonhouse Make your image a background image with CSS: https://www.w3schools.com/cssref/pr_background-image.asp
Vikash Saini
@Enigma10
Jan 26 2018 16:56

@DanLaff ```
We would like you to create a basic photo managing web-app that allows users to upload and delete photos and select one to be their profile picture. There should be a backend for image persistence.

Required features:

User can upload an image
User can delete an uploaded image
User can select an uploaded image to be their profile picture
User can view their uploaded images and their avatar, even after refreshing the page

You can use any technology or framework for this project, though we strongly prefer a React.js frontend and a Node.js backend, as these are technologies that we use. Your frontend should use at least some Javascript, i.e. you should not just rely on server rendered static HTML and elements. Assume the code you are writing would be going into production - make it clean, modular, and add comments where appropriate.
```

I am confused related to backend thing. I am confused how to set this app. i mean what backend thing i need to do for image. i know nodejs and reactjs

Dan Lafferty
@DanLaff
Jan 26 2018 16:57
@nsonhouse For example:
#bgImage-container{
  background-image: url("http://cdn.wall-pix.net/albums/landscapes-city/00029088.new-york.jpg");
  height: 400px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}
Ben Hart
@Benjmhart
Jan 26 2018 16:57
anyone here good with css grid? i have a grid that has a variable size , and occasionally I get a gap at the bottom, trying to figure out a way to get equal padding on top and bottom (i'm applying the style from JS so I can use a formula)
nsonhouse
@nsonhouse
Jan 26 2018 16:58
Originall I did it that. I put the background image in the <body>, and it prevented me from being able to use a filter on the image. Because the filter: blur can only be used on an <img> tag.
If I understood it correctly.
Ben Hart
@Benjmhart
Jan 26 2018 16:58
is there a property to center the whole grid vertically?
Dan Lafferty
@DanLaff
Jan 26 2018 16:58
@Enigma10 It sounds like you'll need a database for storing the images and saving a profile picture - unless you're allowed to use localstorage
Vikash Saini
@Enigma10
Jan 26 2018 16:59
@DanLaff okay mate thanks
CamperBot
@camperbot
Jan 26 2018 16:59
enigma10 sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Riseley
@Riseley
Jan 26 2018 16:59
Gods of FCC, I almost die doing the intermediate front end projects
Nate Mallison
@NJM8
Jan 26 2018 16:59
@Enigma10 Check out MongoDB and Mongoose. Some good tutorials out there for what you need
Dan Lafferty
@DanLaff
Jan 26 2018 16:59
@Enigma10 Good luck - I'd imagine you'll impress them more with a simple database backend
Riseley
@Riseley
Jan 26 2018 17:00
Can anyone be my mentor for the quote machine project?
Nate Mallison
@NJM8
Jan 26 2018 17:01
@Riseley By quote machine do you mean random quote generator?
Vikash Saini
@Enigma10
Jan 26 2018 17:01
@NJM8 I thought of multer which store image in specific and access them from there
Riseley
@Riseley
Jan 26 2018 17:01
@NJM8 yes that one
nsonhouse
@nsonhouse
Jan 26 2018 17:01
@DanLaff @nsonhouse
Originall I did it that. I put the background image in the <body>, and it prevented me from being able to use a filter on the image. Because the filter: blur can only be used on an <img> tag.
If I understood it correctly.
Dan Lafferty
@DanLaff
Jan 26 2018 17:02
@nsonhouse Have you tried the CSS I just gave you?
You can add a filter to your #bgImage-container
nsonhouse
@nsonhouse
Jan 26 2018 17:03
@DanLaff When I did that, the filter blurred the text I had on top of the background image. I tried to use a z-index, but it was ineffective.
Dan Lafferty
@DanLaff
Jan 26 2018 17:03
@nsonhouse You'll need to take the text out of the document flow with position: absolute
Nate Mallison
@NJM8
Jan 26 2018 17:04
@Enigma10 That looks like it should work, but think about this also: Multer looks like it is for storing images to your computer, but a photo-managing web app with upload ability implies a database on a server somewhere
nsonhouse
@nsonhouse
Jan 26 2018 17:04
@DanLaff I wanted contrast between the text and the image. So I was told to apply the filter to the image and not the <div> using the <img> tag.
Dan Lafferty
@DanLaff
Jan 26 2018 17:04
There are lots of ways to do it
Riseley
@Riseley
Jan 26 2018 17:05
hey guys, my pen is codepen.io$/Riseley/pen/PEMJyR (remove the $), I am figuring out how to change the quote, I tried $(XXX).html().text("new quote")
Nate Mallison
@NJM8
Jan 26 2018 17:05
I take that back, @Enigma10 . I think multer will work.
Vikash Saini
@Enigma10
Jan 26 2018 17:06
@NJM8 true , it is given that i need to upload them to server. I mean mongoDB is only used to store path of image , right?. we store image in folder
@NJM8 okay thanks mate
CamperBot
@camperbot
Jan 26 2018 17:06
enigma10 sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 286 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Jan 26 2018 17:06
@Riseley we can help you out.
Vikash Saini
@Enigma10
Jan 26 2018 17:06
now i am ready to work on this task :D
Dan Lafferty
@DanLaff
Jan 26 2018 17:07
Riseley
@Riseley
Jan 26 2018 17:08
@NJM8 I am crying
I have never met a programming assignment that made me want to kill myself
HTML, CSS, Javascript is HARD!
Nate Mallison
@NJM8
Jan 26 2018 17:09
@Riseley you can copy and paste the url of your pen to share easily. also when posting code type three ticks (```) hit shift+return, type your code between the ticks and then shift+enter again to send
Riseley
@Riseley
Jan 26 2018 17:09
let me try
nsonhouse
@nsonhouse
Jan 26 2018 17:09
@NJM8 Wait until you get to OOP using C++. THATS HARD!!!
Nate Mallison
@NJM8
Jan 26 2018 17:09
@Riseley it's all hard, but also fun and rewarding. Don't sweat it, brick by brick. :smile:
Riseley
@Riseley
Jan 26 2018 17:09
but it just appeared big
I have coded in Python, C, C++, Ruby (and Ruby on Rails) and many other languages
But CSS
CSS kills me
Nate Mallison
@NJM8
Jan 26 2018 17:11
css isn't easy. I find ctrl-c ctrl-v works great for that. ;)
adding s in front of codepen seems to not let gitter have an embedded thing
So... how to change the quote text...
$('.quote-box__new-quote-button').on('click', function() { $('#quote-text').html().text("YOYOY MAMA"); });
wait...
$('.quote-box__new-quote-button').on('click', function() {
    $('#quote-text').html().text("YOYOY MAMA");
  });
I see
suppose #quote-text is <p>, how do I change the element?
Dan Lafferty
@DanLaff
Jan 26 2018 17:15
@nsonhouse This might help you with other options aside from the example codepen I posted above: https://css-tricks.com/design-considerations-text-images/
Nate Mallison
@NJM8
Jan 26 2018 17:15
@Riseley The code is fine. Although I would recommend using id's instead of classes when changing just one element
@Riseley It looks like you didn't include jQuery into your pen, so your jQuery functions won't work
Riseley
@Riseley
Jan 26 2018 17:16
I see!
Nate Mallison
@NJM8
Jan 26 2018 17:16
click the gear icon on the JS tab in the editor and you should see a quick add drop down to add jquery. then I think it will all work
Riseley
@Riseley
Jan 26 2018 17:17
image.png
jquery is already added
nsonhouse
@nsonhouse
Jan 26 2018 17:17
@DanLaff Thank you for your help!!! This works perfectly.
CamperBot
@camperbot
Jan 26 2018 17:17
nsonhouse sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Riseley
@Riseley
Jan 26 2018 17:18
jQuery is already added since a few projects ago I think
oh shet it is not
Dan Lafferty
@DanLaff
Jan 26 2018 17:18
No problem - the blur effect behind clear text can be a little tricky the first time
Nate Mallison
@NJM8
Jan 26 2018 17:18
2.1.3 is pretty old, the quick add uses 3.2.1
Riseley
@Riseley
Jan 26 2018 17:19
@NJM8 FINALLY! IT WORKS!
@NJM8 thank you very very very much
CamperBot
@camperbot
Jan 26 2018 17:19
riseley sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @njm8 |http://www.freecodecamp.org/njm8
nsonhouse
@nsonhouse
Jan 26 2018 17:19
@DanLaff For Sure!! Thanks again!!!
CamperBot
@camperbot
Jan 26 2018 17:19
nsonhouse sends brownie points to @danlaff :sparkles: :thumbsup: :sparkles:
api offline
Riseley
@Riseley
Jan 26 2018 17:19
dang, I have been scratching my head on why it doesn't work, dang I didn't add jquery
Fernando
@lestairon
Jan 26 2018 17:20
@Riseley It has happened to me a lot haha
Riseley
@Riseley
Jan 26 2018 17:21
@lestairon I have been changing the same line for over an hour before I finally fire up gitter and ask the gods for help
Fernando
@lestairon
Jan 26 2018 17:22
2 days ago i was thinking about why my code wasn't working
I forgot a #
Riseley
@Riseley
Jan 26 2018 17:23
CSS is difficult
Nate Mallison
@NJM8
Jan 26 2018 17:24
that tutortial helped me a lot with CSS
Riseley
@Riseley
Jan 26 2018 17:26
wow that is one beautiful website
omg it is really beautiful
Nate Mallison
@NJM8
Jan 26 2018 17:28
Also check out Javascript 30 by Wes Bos. Create for vanilla JS
Riseley
@Riseley
Jan 26 2018 17:30
@NJM8 my experience with FCC is like: everything is easy -> soooo easy -> wow what the hell is this? -> repeat
FCC's learn by doing has a steep curve at various points
Kaz Baig
@kbaig
Jan 26 2018 17:31

@Riseley you're missing a step right before

wow what the hell is this?

It's to go out and learn from external resources
Seth
@sethdcd
Jan 26 2018 17:32
i think that is how any coding program goes to be honest
ive done a lot of them, and learning variables is super easy
Kaz Baig
@kbaig
Jan 26 2018 17:32
That's the goal with fCC - equipping you with the skills to learn
Seth
@sethdcd
Jan 26 2018 17:32
but then having to use them in way that are never explained is like wtf m8!
Riseley
@Riseley
Jan 26 2018 17:32
@kbaig I know! I actually expected FCC to give me everything in the beginning, then I found out that I need to learn a lot by myself
Nate Mallison
@NJM8
Jan 26 2018 17:33
@Riseley Yes FCC can be hard, I use Rithm Schools free tutorials to fill in the blanks. Lots of great material there
Kaz Baig
@kbaig
Jan 26 2018 17:33
Learning to learn is arguably more important :)
Riseley
@Riseley
Jan 26 2018 17:33
hey man I need a CS career advice, maybe we should discuss about this in other channel
I feel like I am going to die doing fcc
Kaz Baig
@kbaig
Jan 26 2018 17:34
Good. You're learning then!
Nate Mallison
@NJM8
Jan 26 2018 17:34
I stopped FCC because I got stuck on the weather app, now I'm burning through the RithmSchool stuff and making some mongoose apps. : )
Riseley
@Riseley
Jan 26 2018 17:34
why are you here?
Nate Mallison
@NJM8
Jan 26 2018 17:35
I agree, learning to learn is very important! The hard part for me was i wish they would tell me what I don't know, then I can go learn about it. But when you don't know what you don't know it's very hard to find direction
FCC has a great community and is super helpful. I also will be going back to FCC to do the beta (maybe) so i can get my certificates. There are great practice app ideas on FCC
Riseley
@Riseley
Jan 26 2018 17:36
I feel like my html and css is still too weak
i will burn through interneting is hard
thanks man, I gotta go learning
aRtoo
@artoodeeto
Jan 26 2018 18:25
hey fam how to toggle button without toggle class?
Brad
@bradtaniguchi
Jan 26 2018 18:48
@artoodeeto what do you mean toggle button, a button just accepts click events, there is no "toggle" its all css (so a class), unless your talking about something else (like the button is selected or something)
Dan Lafferty
@DanLaff
Jan 26 2018 18:55
@artoodeeto Code sample in the other room where you asked this question. Working in your project here: https://s.codepen.io/anon/pen/QaexoY?editors=0011
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:00

hello I am using react-redux and in my reducer I have

import { FETCH_USER, FETCH_USER_ERROR, NO_USER } from '../constants/fetchUser';
import axios from 'axios';

const fetchUser = (state = null, action) => {
let user = null;

switch (action.type) {
    case FETCH_USER:
      user = action.user;
      console.log(action.user);
      return user;

    case FETCH_USER_ERROR:
        return user;

    case NO_USER:
        return null;

    default:
    return state
}

}

export default fetchUser;

for some reason default keeps executing. This is a problem because in my header component I call the the api that fetches the user data but its return null then the user obj. This causing my header to display logged out user buttons then switches to logged in display. it happens in a second but is anoying

sorry for my wording it's hard to explain without actually showing someone

action creators

import { FETCH_USER, FETCH_USER_ERROR, NO_USER } from '../constants/fetchUser';
import axios from 'axios';

export const fetchUser = () => {
return(dispatch) => {
return axios.get('/user').then(response => {
if(response.data){
dispatch(fetchUserData(response.data));
}
else {
dispatch(noUser())
}
})
.catch(err => {
dispatch(fetchUserError(err));
});
}
}

export const fetchUserData = (user) => {
return {
type: FETCH_USER,
user
}
}

export const fetchUserError = (err) => {
return {
type: FETCH_USER_ERROR,
err
}
}

export const noUser = () => {
return {
type: NO_USER
}
}

Kaz Baig
@kbaig
Jan 26 2018 20:02
@Radlerz1 could you please format the code and/or put it in a pen for testing? Would really help us help you!
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:03
How do I format code again I forgot?
Kaz Baig
@kbaig
Jan 26 2018 20:03
three backticks on the lines above and below your code
Still needs to be spaced appropriately by you though
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:04
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchUser } from '../../actions/fetchUser';
import { Link, NavLink } from 'react-router-dom';

class Header extends Component {
      render() {
          console.log(this.props.user)
        return (
            <nav className='navbar navbar-default'>
             <div className='container-fluid'>
             <div className='navbar-header'>
             <NavLink className='navbar-brand' exact to='/'>Game discussions</NavLink>
           </div>
                 {

              this.props.user ? 
              <ul className='nav navbar-nav'>
              <li><NavLink exact to='/'>Home</NavLink></li>
              <li><NavLink to='/profile'>Profile</NavLink></li>
              </ul>
             :
             <ul className='nav navbar-nav'>
             <li><NavLink exact to='/'>Home</NavLink></li>
             <li><NavLink to='/signup'>Sign up</NavLink></li>
             <li><NavLink to='/login'>Sign in</NavLink></li>
             </ul>
             }
        </div>
     </nav>
        )
    }
}
export default Header;
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { fetchUser } from '../../actions/fetchUser';
import Header from './header';

class HeaderData extends Component {
    componentDidMount() {
        this.props.fetchUser();
    }

    render() {
        return <Header user={this.props.user} />
    }
}

const mapStateToProps = (state) => {
    return {
        user: state
    }
}

const mapDispatchToProps = (dispatch) => {
    return bindActionCreators({ fetchUser }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(HeaderData)
import { FETCH_USER, FETCH_USER_ERROR, NO_USER } from '../constants/fetchUser';
import axios from 'axios';

const fetchUser = (state = null, action) => {
    let user = null;

    switch (action.type) {
        case FETCH_USER:
          user = action.user;
          console.log(action.user);
          return user;

        case FETCH_USER_ERROR:
            return user;

        case NO_USER:
            return user;

        default:
        return state
    }
}

export default fetchUser;
import { FETCH_USER, FETCH_USER_ERROR, NO_USER } from '../constants/fetchUser';
import axios from 'axios';

export const fetchUser = () => {
      return(dispatch) => {
          return axios.get('/user').then(response => {
              if(response.data){
              dispatch(fetchUserData(response.data));
              }
              else {
               dispatch(noUser())
              }
          })
          .catch(err => {
             dispatch(fetchUserError(err)); 
          });
      }
}

export const fetchUserData = (user) => {
     return {
         type: FETCH_USER,
         user
     }
}

export const fetchUserError = (err) => {
     return {
         type: FETCH_USER_ERROR,
         err
     }
}

export const noUser = () => {
    return {
        type: NO_USER
    }
}
Okay there ya go. So the problem is again when I refresh the page the condition in my header component if user show these buttons if not show other buttons. So for example when I refresh the page that condition executes true and false. really quickly
Bjorn van de Peut
@bjorno43
Jan 26 2018 20:08
@Radlerz1 Please use services like Pastebin or Github when posting large walls of code. They're disruptive to the chat and are therefor considered spamming and against our Code of Conduct
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:09
oh okay sorry. I didn't have this github. well if someone know what i'm asking can you pm me please?
this on github*
Tom
@moT01
Jan 26 2018 20:12
wondering if you fetch user on componentWillmount()
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:12
nope comonentDidMount
both return the same problem
Tom
@moT01
Jan 26 2018 20:13
so it just takes too long to fetch that data i suppose?
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:14
No the fact that redux returns default state on startup is what's causing the problem I think
Tom
@moT01
Jan 26 2018 20:15
isnt that kinda whats supposed to happen
default state till it gets changed
yes, i see the code - you put it up there already
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:17
yeah so
on that condition if shows a flash of the buttons that's not suppose to show
I don't know I'll fiigure er out. Sorry for the lengthy code everyone
Tom
@moT01
Jan 26 2018 20:20
default state on load >
fetchuserdata() >
get data from server >
dispatch on response >
update state > and change whats displayed
i think that's what's happening
maybe you knew that
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:28
yes just when I log in or keep refreshing it returns null(default) then user
ehutchllew
@ehutchllew
Jan 26 2018 20:31
@Radlerz1 is the header depending on the HeaderData for the user props?
Brandon Blackwell
@Radlerz1
Jan 26 2018 20:31
yes
ehutchllew
@ehutchllew
Jan 26 2018 20:32
hav eyou tried a componentWillReceiveProps (I think that was it)
You could also lazy load info you need, then when the API resolves, re-render the component.
aRtoo
@artoodeeto
Jan 26 2018 22:17
hey fam can you help me find bugs? i need to add one more animation if the user doesnt turn on strict if he gets wrong theres should be effect but i couldnt get a mp3 error to embed. but heres my pen. https://codepen.io/artoo/pen/opQZWy?editors=0010
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:36
Question: For tic-tac-toe did people generally if/then it or use more complex AI approaches? Javascript isn't exactly the language of choice for AI anything.
@artoodeeto Can't turn him on. :(
aRtoo
@artoodeeto
Jan 26 2018 22:40
@ryan-christopher yow bro did you turn it on?
the ON OFF not working bro/
?
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:41
On/Off no work for me.
I tried sliding it, click on the word On, clicking on the black space next to the button, refreshing the page and repeating all of the above.
aRtoo
@artoodeeto
Jan 26 2018 22:43
@ryan-christopher try clicking the red box bro
@ryan-christopher bro? all good?
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:46
Ok, it's a single click that looks like a slider. It's very attractive, just a bit misleading. It's on now.
@artoodeeto When I screw up, is it supposed to retain the score and immediately go into another complex pattern or simply restart with one? I haven't played Simon since I was six.
@artoodeeto I turned in off and then back on, expecting a fresh start. It went back to my old score and picked up where it left off.
aRtoo
@artoodeeto
Jan 26 2018 22:49
when you enable strict mode if you got mistake it should return to 1. if strict is not enabled and if you got it wrong it should just play the last sequence
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:49
@artoodeeto I think it's playing with itself.
aRtoo
@artoodeeto
Jan 26 2018 22:49
hmm let me try bro
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:50
I'm not even touching it and it's just going to town.
Dan Lafferty
@DanLaff
Jan 26 2018 22:53
@artoodeeto It gives a new sequence for every turn instead of building up from the previous sequence
If I turn it off and then back on again, it just starts going crazy
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:54
Ok. Though the sound is inconsistent, the behaviour on error is, keep giving the sequence the player got wrong until the player gets it right.
@DanLaff yeah, that's what happened to me. You have to refresh the page.
Stephen James
@sjames1958gm
Jan 26 2018 22:55
@ryan-christopher I just used a simple set of rules for tic-tac-toe
@ryan-christopher 1) take center 2) win if possible 3) block if needed 4) random move
aRtoo
@artoodeeto
Jan 26 2018 22:57
@ryan-christopher @DanLaff thanks bro. let me fix this
CamperBot
@camperbot
Jan 26 2018 22:57
artoodeeto sends brownie points to @ryan-christopher and @danlaff :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 296 | @ryan-christopher |http://www.freecodecamp.org/ryan-christopher
Ryan Christopher
@ryan-christopher
Jan 26 2018 22:59
@sjames1958gm Thanks. I was exploring a few options in pseudo code. Picking random optimal square (any corner or center), then based on number of square picked and user response (all kept track of in an object), make next move based on this diagram https://www.quora.com/Is-there-a-way-to-never-lose-at-Tic-Tac-Toe.
CamperBot
@camperbot
Jan 26 2018 22:59
ryan-christopher sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8902 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 26 2018 22:59
@ryan-christopher Yeah, my goal was to be tough but not unbeatable
Ryan Christopher
@ryan-christopher
Jan 26 2018 23:01
I saw an AI video that uses dictionaries and shortest path, but I'm like, you must be joking, not for this. It was the same approach (GOAP) used for complex games like FEAR. Definitely not well-suited for JS.
The example in the video was not for tic-tac-toe, btw.
aRtoo
@artoodeeto
Jan 26 2018 23:04
@ryan-christopher @DanLaff i get it now bro. forgot to re initialize everyting after it turned off
Ryan Christopher
@ryan-christopher
Jan 26 2018 23:05
@artoodeeto Almost got it. When I turned it off and back on, it gave me a new pattern starting with one, but my old score came back on screen. :(
aRtoo
@artoodeeto
Jan 26 2018 23:06
@ryan-christopher how bout this bro
Ryan Christopher
@ryan-christopher
Jan 26 2018 23:06
Also, when does the sound keep cutting out. Btw, you can bust my balls when I finish tic-tac-toe, which looks like it will be a headache. :D
aRtoo
@artoodeeto
Jan 26 2018 23:07
@ryan-christopher ohh. sorry bro. but thanks. appreciate the help. sure you can do it. if you get the bot to play it will be ez. its just the checking that is hard
CamperBot
@camperbot
Jan 26 2018 23:07
artoodeeto sends brownie points to @ryan-christopher :sparkles: :thumbsup: :sparkles:
api offline
Ryan Christopher
@ryan-christopher
Jan 26 2018 23:08
@artoodeeto Looks like the behaviour on restart is working perfectly now. Good job!
Im out for now.
aRtoo
@artoodeeto
Jan 26 2018 23:09
@ryan-christopher aight bro thanks mwah. care fam!
CamperBot
@camperbot
Jan 26 2018 23:09
artoodeeto sends brownie points to @ryan-christopher :sparkles: :thumbsup: :sparkles:
api offline
Lee
@LeeConnelly12
Jan 26 2018 23:13
@artoodeeto That's the coolest version of Simon Say's i've seen so far, congrats!
ronald
@ronstarcool
Jan 26 2018 23:24
anyone here with Vue knowledge?
i have a uppercase problem
Vue or nuxt, idk, keeps on making my text uppercase
aRtoo
@artoodeeto
Jan 26 2018 23:25
@LeeConnelly12 lol. how bro? im flattered. see the code. its funny so freakin noobs!
@LeeConnelly12 or your just being sarcastic? hahaha. if so its ok.
Lee
@LeeConnelly12
Jan 26 2018 23:25
@artoodeeto I wasn't being sarcastic
@artoodeeto It looks much better than the other Simon Say's projects I've seen so far
aRtoo
@artoodeeto
Jan 26 2018 23:26
@LeeConnelly12 really bro? damn! really? thanks man! appreciate the compliment! but i need to redo the JS so much global variables
CamperBot
@camperbot
Jan 26 2018 23:26
artoodeeto sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
:cookie: 179 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
aRtoo
@artoodeeto
Jan 26 2018 23:27
@LeeConnelly12 ohh. before making that game i studied css again. look at my other projects all crap.
Lee
@LeeConnelly12
Jan 26 2018 23:28
@artoodeeto For small projects global variables shouldn't be an issue, if it works who cares lol
@artoodeeto Yeah you're quote generator looks really original as well, gg
@artoodeeto 90% of the project i've seen were just mostly badly tweaked versions of the source code fcc gives lol
Kaz Baig
@kbaig
Jan 26 2018 23:29
oh man I've just got this generic one https://codepen.io/kbaig/pen/weoZrz?editors=0010
I gotta up my design game...
Not the most creative person in the world lol
Lee
@LeeConnelly12
Jan 26 2018 23:30
@kbaig Function over form, my friend
Kaz Baig
@kbaig
Jan 26 2018 23:30
Well it sucks that my code for the FE projects was bad too then haha
Def gonna refactor (redo) at some point
Stephen James
@sjames1958gm
Jan 26 2018 23:31
@kbaig Yeah, I keep planning on redoing some of them in React . . .
aRtoo
@artoodeeto
Jan 26 2018 23:31
@LeeConnelly12 i just dont like it bro some pro told me that i shouldnt do that. global will create error.
Kaz Baig
@kbaig
Jan 26 2018 23:31
@sjames1958gm React Redux would be so helpful for some of them
aRtoo
@artoodeeto
Jan 26 2018 23:31
@LeeConnelly12 sometimes i googled design bro and mix the design
Kaz Baig
@kbaig
Jan 26 2018 23:32
I think I did well at the Game of Life project
Def think using React helped with that
Lee
@LeeConnelly12
Jan 26 2018 23:32
@artoodeeto Global variables are bad practice yeah, but for small projects like these it really doesn't matter.
aRtoo
@artoodeeto
Jan 26 2018 23:35
@LeeConnelly12 im planning to redo the code by putting all the global variables to different functions. but i dont know how to do it yet
Lee
@LeeConnelly12
Jan 26 2018 23:36
@artoodeeto One style of writing that helped me better structure my code was the revealing module pattern
@artoodeeto Look up the javascript revealing module pattern
@artoodeeto Will give you an idea of different things you can do to improve your code
aRtoo
@artoodeeto
Jan 26 2018 23:38
@LeeConnelly12 theres another module that ive been learning forgot it though read it once
@LeeConnelly12 grr let me check its in the book
aRtoo
@artoodeeto
Jan 26 2018 23:43
@LeeConnelly12 its the module pattern where both contains public and private pattern
@LeeConnelly12 but im gonna learn yours too
Lee
@LeeConnelly12
Jan 26 2018 23:44
@artoodeeto Functions you want to be public are returned at the end of the function
@artoodeeto You can have private functions in the revealing module pattern as well
aRtoo
@artoodeeto
Jan 26 2018 23:46
@LeeConnelly12 hmm never really tried i just read it the book. but im gonna try it sometime soon. any resource for that?
i can never to the markup stuff properly.
aRtoo
@artoodeeto
Jan 26 2018 23:54
@LeeConnelly12 thanks bro. appreciate the help
CamperBot
@camperbot
Jan 26 2018 23:54
artoodeeto sends brownie points to @leeconnelly12 :sparkles: :thumbsup: :sparkles:
api offline
Lee
@LeeConnelly12
Jan 26 2018 23:55
@artoodeeto no problem