These are chat archives for FreeCodeCamp/HelpJavaScript

4th
Jan 2018
abraham anak agung
@padunk
Jan 04 2018 03:32 UTC
Hi all, quick question about React, can i do this? Or is it better to make count as a state?
class MyApp extends React.Component{
  constructor(){
    super();
    this.count = 0;
    this.state = {
      text: "Hello World",
    }
  }

  render(){
    var show = this.count === 0 ? this.state.text : "empty";

    return(
      <div>
        <h1>{ show }</h1>
      </div>
    )
  }
}
Sweet Coding :)
@SweetCodingInc
Jan 04 2018 03:43 UTC
@padunk : If you want your view to update when you change value of count, then count needs to be on state object
as react renders the component (and it's children) when state is changed
ehutchllew
@ehutchllew
Jan 04 2018 04:03 UTC
@padunk From what I see, looks fine to me so far.
aRtoo
@artoodeeto
Jan 04 2018 04:30 UTC
hello guys how do you remove the click event in jquery?? like disable a button after it was click??
Sweet Coding :)
@SweetCodingInc
Jan 04 2018 04:49 UTC
@artoodeeto .off
$(selector).off('event name')
$('button').off('click')
is there someone has done this challenge?
help
abraham anak agung
@padunk
Jan 04 2018 05:10 UTC
@SweetCodingInc Yes, you are right. Thanks
CamperBot
@camperbot
Jan 04 2018 05:10 UTC
padunk sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 183 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
eyeseau
@eyea
Jan 04 2018 05:15 UTC
@padunk ok
thanks
aRtoo
@artoodeeto
Jan 04 2018 05:58 UTC
@SweetCodingInc thanks bro
CamperBot
@camperbot
Jan 04 2018 05:58 UTC
artoodeeto sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 184 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
aRtoo
@artoodeeto
Jan 04 2018 05:58 UTC
@SweetCodingInc been youtubing and googling. your mention didnt notify my. thanks again bro
CamperBot
@camperbot
Jan 04 2018 05:58 UTC
artoodeeto sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
api offline
qilinjie
@qilinjie
Jan 04 2018 06:38 UTC
help me
i have a question
Write a function queue, with an array of arr and a numeric item as parameters.The number item is added to the end of the array and then removes the first element of the array, and the final queue function should return the deleted element.
Markus Kiili
@Masd925
Jan 04 2018 06:41 UTC
@qilinjie Find out the two array methods you need and use them on function parameters arr and item.
qilinjie
@qilinjie
Jan 04 2018 06:43 UTC
Can you be more specific
@Masd925 Can you be more specific
Markus Kiili
@Masd925
Jan 04 2018 06:44 UTC
@qilinjie Not really. Those parameters hold the array and number and you need to do to them what was asked. You can do it with two array methods.
qilinjie
@qilinjie
Jan 04 2018 06:47 UTC
thanks but I still won't write
Can you write a case for me?
@Masd925 @qilinjie
thanks but I still won't write
Can you write a case for me?
CamperBot
@camperbot
Jan 04 2018 06:49 UTC
qilinjie sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4636 | @masd925 |http://www.freecodecamp.org/masd925
Markus Kiili
@Masd925
Jan 04 2018 06:49 UTC
@qilinjie Add the number to the end of the array,. Look at the https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array page that has all the array methods. Which method add an element to the end of an array?
qilinjie
@qilinjie
Jan 04 2018 06:53 UTC
@Masd925 thank you very much.
CamperBot
@camperbot
Jan 04 2018 06:53 UTC
qilinjie sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
api offline
aRtoo
@artoodeeto
Jan 04 2018 08:17 UTC

hello guys so i created 2 separate codes on how to disable or turnOff the event on jquery. Wanted to remove the event when the setInterval is still running. so here are the codes separated by forward slash.

$(function(){

  var test = 0;

  $('#btn').on('click', aaalert);

  function aaalert() {
    $('#btn').off('click');

    var counter = setInterval(function(){
      test+=1;
      console.log(test);
      if(test === 3) {
        $('#btn').on('click', aaalert);
        clearInterval(counter);
      }
    },1000)
  }

  //////////////////////////////////

  var isOp = false;
  var isUn = true;
  var btns = isOp;

  if(btns === isUn) {
    $('#btn').off('click');
  } 
  else {
    $('#btn').on('click', function() {
      btns = isUn
      var counter = setInterval(function(){
        test+=1;
        console.log(test);
        if(test === 10) {
          clearInterval(counter);
          btns = isUn;
        }
      },1000)
    })
  }

})

heres the sample codepen too: https://codepen.io/artoo/pen/opzrob?editors=1111

Tiago Correia
@tiagocorreiaalmeida
Jan 04 2018 08:42 UTC
you can use the disabled attribute here
adding it when you start the count and enable when needed
aRtoo
@artoodeeto
Jan 04 2018 08:58 UTC
@tiagocorreiaalmeida hello sir are you talking about like this.
btn.disable = true;
something like that??
sorry for the late rep didnt notice
Tiago Correia
@tiagocorreiaalmeida
Jan 04 2018 09:02 UTC
this is from w3c
just updated it
<!DOCTYPE html>
<html>
<body>

<button id="myBtn">My Button</button>

<p>Click the button below to disable the button above.</p>

<button onclick="myFunction()">Try it</button>
<button onclick="turnOn()">Enable</button>

<script>
function myFunction() {
    document.getElementById("myBtn").disabled = true;
}
function turnOn(){
    document.getElementById("myBtn").disabled = false;
 }
</script>

</body>
</html>
but basically what you said
aRtoo
@artoodeeto
Jan 04 2018 09:03 UTC
@tiagocorreiaalmeida does this works on jquery though?
Tiago Correia
@tiagocorreiaalmeida
Jan 04 2018 09:04 UTC
@artoodeeto that vanillajs so yeah will work
if you want to update this to jquery there's a few differences but I think you can find them :D
Razvan Jackson
@RazvanJackson
Jan 04 2018 09:07 UTC
Does someone know why socket.io is not emmited
``` 
mounted(){
        socket.on('sendData', function(data){
        app.timer = data.timer;
        app.timerMessage = data.timerMessage;
        console.log(data);
        });
        socket.emit('bet','smth');

    },
```
aRtoo
@artoodeeto
Jan 04 2018 09:07 UTC
@tiagocorreiaalmeida hmm thank you sir. appreciate the help
CamperBot
@camperbot
Jan 04 2018 09:07 UTC
artoodeeto sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Sweet Coding :)
@SweetCodingInc
Jan 04 2018 09:41 UTC
@artoodeeto :+1:
aRtoo
@artoodeeto
Jan 04 2018 09:54 UTC

hey fam got some issues why is it the attr and remove Attr not working here in pen??https://codepen.io/artoo/pen/mpdvxv?editors=0011

but its working here.
https://codepen.io/artoo/pen/opzrob?editors=0011
any idea would be appreciated

MaciejReimann
@MaciejReimann
Jan 04 2018 11:12 UTC
Hi there! It's my first post ever in here, so be forgiving if I use the tools badly, but.... https://codepen.io/MaciejReimann/pen/xpLvRz/?editors=0010
And the question is as follows:
I'd like to fill up the page with 7 (maxAllowed) equations, then clear the page and start filling it again in such a way that maxAllowed property dictates when counter().reset();
I have been stucked with this for weeks now. I suspect that the problem lies somewhere inside events() function, but I can,t figure out for myself how to refactor it in such a way that:
MaciejReimann
@MaciejReimann
Jan 04 2018 11:20 UTC
a) it stores the input data in the proper place, that is: controller.number().checkAnswer(inputFields[ i ].value) and then in model.userData.currentSession.correctAnswers"
b) handles the enter key event updating the view;
Thank you so much for your time and effort!
Pieter Stokkink
@forkerino
Jan 04 2018 11:32 UTC
@artoodeeto div's can't be disabled. You can obviously toggle a class and remove the onclick eventlistener for example, but I think it is easier to use a <button>
Stephen James
@sjames1958gm
Jan 04 2018 11:47 UTC
@MaciejReimann Not sure the exact question, but what I think I am seeing is that you are adding events for the same input multiple times, so when you hit return it runs the code multiple times
If you put a console.log inside the keycode === 13 and hit enter in the first box again then it will trigger multiple times.
Daniel Romero
@Ranacode
Jan 04 2018 12:20 UTC
Webpack question here
I need to convert my scss file into a css but I want to resolve in a specific directory
const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "clientFiles/js/index.js"),
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "public")
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["env"]
          }
        }
      },
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: "style-loader",
          use: ["css-loader", "sass-loader"]
        })
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      title: "Chat application",
      template: path.join(__dirname, "clientFiles/index.html")
    }),
    new ExtractTextPlugin("index.css")
  ]
};
My doubt is, how can I check for the .scss files inside the 'clientFiles' directory? because I only have the entry point for my js file
alpox
@alpox
Jan 04 2018 13:26 UTC
@Ranacode With a loader you would usually import or require the scss file in your index.js (The entrypoint file)
import "../clientFiles/someFile.scss";
Daniel Romero
@Ranacode
Jan 04 2018 13:34 UTC
Thanks @alpox
CamperBot
@camperbot
Jan 04 2018 13:34 UTC
ranacode sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star2: 1519 | @alpox |http://www.freecodecamp.org/alpox
Daniel Romero
@Ranacode
Jan 04 2018 13:34 UTC
I have another doubt
What about importing libraries from node_modules ?
I'm trying to import the tinywebsockets library but It gives me an error when I try to build it
I'm bundling the static files from webpack inside my express server and output them on the 'public' file directory
All is good until I try to import in my index.js file, some dependencie from my package.json
alpox
@alpox
Jan 04 2018 13:47 UTC
Hmm the import from node_modules should not be a problem
What error do you get then?
Also, are the node_modules in the same folder as the webpack config?
Daniel Romero
@Ranacode
Jan 04 2018 14:11 UTC
Yes, same folder
When I try to import the 'uws' library I get:
WARNING in ./node_modules/uws/uws_win32_57.node
Module parse failed: Unexpected character '�' (1:2)
You may need an appropriate loader to handle this file type.
(Source code omitted for this binary file)
I've been importing other libraries for a while and it just gives me errors in this
I like too much this library and I don't want to use the socket.ioo
By the way I can't find a CDN for this library to avoid bundling it via webpack
Kelechi Chinaka
@ke1echi
Jan 04 2018 16:46 UTC
last test case is wrong
Jason Luboff
@JLuboff
Jan 04 2018 16:54 UTC
@kelechy How so?
80-1 = 79
Kelechi Chinaka
@ke1echi
Jan 04 2018 16:54 UTC
have you taken a look?
should return 19 @JLuboff
Jason Luboff
@JLuboff
Jan 04 2018 16:55 UTC
No, it should return 79. the end time is a minute 20 seconds, which is 80 seconds
Kelechi Chinaka
@ke1echi
Jan 04 2018 16:56 UTC
oh my bad, didnt see that
thanks @JLuboff
CamperBot
@camperbot
Jan 04 2018 16:56 UTC
kelechy sends brownie points to @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 2287 | @jluboff |http://www.freecodecamp.org/jluboff
Thomas Faller
@thomasfaller
Jan 04 2018 18:33 UTC
Hey guys!
I'm playing around with object classes in JS, building a Cat class using that constructor to create new cats. I would like - every time anew cat is created - to push it into an array.
Is that possible? Perhaps a self-invoking function inside the constructor? You guys have any ideas?
here's the script?
https://codepen.io/thomasfaller/pen/dJVXVZ?editors=0012
Dan Couper
@DanCouper
Jan 04 2018 18:40 UTC
The collection of cats is not connected conceptually to the individual cats; it should be a separate class and/or factory that builds the array then calls the cat class to generate new cats, like class Clowder or whatever, initialising it creates the array, passing it cats fills it up
Try to give things a single job, keep em simple, and compose those simple things rather than having single super complicated god classes that do everything
Thomas Faller
@thomasfaller
Jan 04 2018 18:45 UTC
Right, good point.
I guess what I was wondering was:
Is it possible to nest a self-invoking function inside a constructor so that every time a new object is created, that function is called/invoked?
Thanks anyway @DanCouper :)
CamperBot
@camperbot
Jan 04 2018 18:45 UTC
thomasfaller sends brownie points to @dancouper :sparkles: :thumbsup: :sparkles:
:cookie: 861 | @dancouper |http://www.freecodecamp.org/dancouper
Stephen James
@sjames1958gm
Jan 04 2018 18:56 UTC
@thomasfaller If you had a cat factory then it could maintain the cat array as well as pump out new cats.
Dan Couper
@DanCouper
Jan 04 2018 19:45 UTC
@thomasfaller sure, in this case its not the right thing to do but yes you can do that, it will just fire the function every time the class is initialised with new Cat. It doesn't need to be self invoking you can have a separate function that is just executed in the constructor. The reason it's problematic here is what I said, but more specifically that the cat class refers to a single cat, but this means that each cat needs to have a reference to a single specific array that exists outside the cat class
Christopher
@bradley1492
Jan 04 2018 19:52 UTC
@RecodeExistence Heyyyy, thankks! I completed but I absolutely would like to know it :)
@khaduch Thanks for your help, it worked now! :)
CamperBot
@camperbot
Jan 04 2018 19:53 UTC
bradley1492 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3648 | @khaduch |http://www.freecodecamp.org/khaduch
Andrea Beducci
@microcluster
Jan 04 2018 21:07 UTC
hello everyone
Yaroslav
@YariPL
Jan 04 2018 21:11 UTC
hello everyone. I have a question with jquery. How can I add class to an element which was created with the help of the same jquery code a second earlier? so called dynamically created elements
Andrea Beducci
@microcluster
Jan 04 2018 21:14 UTC
i need help on an exercise please
Stephen James
@sjames1958gm
Jan 04 2018 21:17 UTC
@microcluster post your code or question.
@YariPL The element creation functions should return the object that you can call later functions on.
$('<div/>').addClass('class');
Andrea Beducci
@microcluster
Jan 04 2018 21:20 UTC

```// Setup
var myObj = {
gift: "pony",
pet: "kitten",
bed: "sleigh"
};

function checkObj(checkProp) {
// Your Code Here

if (myObj.hasOwnProperty("gift")) {

return "pony";

} else if (myObj.haOwnProperty("pet")) {

return "kitten";     

} else {

return "Not Found";

}

}

// Test your code by modifying these values
checkObj("house");```

// Setup
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};


function checkObj(checkProp) {
  // Your Code Here

  if (myObj.hasOwnProperty("gift")) {

    return "pony";

  } else if (myObj.haOwnProperty("pet")) {

    return "kitten";     

  } else  {

    return "Not Found";

  }    


}

// Test your code by modifying these values
checkObj("house");
now is better
Gersho
@Gersho
Jan 04 2018 21:21 UTC
what are you trying to accomplish ?
Andrea Beducci
@microcluster
Jan 04 2018 21:22 UTC
the if statement give me the right answer, the other not
Stephen James
@sjames1958gm
Jan 04 2018 21:22 UTC
@microcluster You should use the parameter/variable checkProp - not any specific value
Andrea Beducci
@microcluster
Jan 04 2018 21:22 UTC
this is the instruction
Modify the function checkObj to test myObj for checkProp. If the property is found, return that property's value. If not, return "Not Found".
Stephen James
@sjames1958gm
Jan 04 2018 21:22 UTC
@microcluster Your code should not have any quoted strings, well other than "Not Found"
@microcluster You do have a typo in the else if
Gersho
@Gersho
Jan 04 2018 21:25 UTC
if (myObj.hasOwnProperty(checkProp)){
return myObj[checkProp];
}
or something like that ?
MaciejReimann
@MaciejReimann
Jan 04 2018 21:33 UTC
@sjames1958gm Thanks! I've dived into removeEventListener() method...
CamperBot
@camperbot
Jan 04 2018 21:33 UTC
maciejreimann sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8818 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 04 2018 21:34 UTC
@MaciejReimann :+1:
Andrea Beducci
@microcluster
Jan 04 2018 22:28 UTC
@Gersho can you explain to me please i'm confused
This code is ok
// Setup
var myObj = {
  gift: "pony",
  pet: "kitten",
  bed: "sleigh"
};


function checkObj(checkProp) {
  // Your Code Here

  if (myObj.hasOwnProperty(checkProp)) {

    return myObj[checkProp]; 

  } else {

    return "Not Found";
  }

 }
Gersho
@Gersho
Jan 04 2018 22:34 UTC

checkProp (the argument of the checkObj function) contains the text of the property you're supposed to look for, so we use that when looking inside myObj with myObj.hasOwnProperty()

if (myObj.hasOwnProperty(checkProp)){
return myObj[checkProp];
}

then, if find something the check will return true so the second part will trigger, myObj[checkProp] will looking into myObj and show the data that goes with the property stored in the checkProp argument

so when you call the function checkObj("house") for exemple, the function is checkObj(checkProp) it's argument, everytime you see (checkProp) in the function you replace with "house"
hope i made sense
Andrea Beducci
@microcluster
Jan 04 2018 22:44 UTC
@Gersho thanks a lot
CamperBot
@camperbot
Jan 04 2018 22:44 UTC
microcluster sends brownie points to @gersho :sparkles: :thumbsup: :sparkles:
:cookie: 558 | @gersho |http://www.freecodecamp.org/gersho