These are chat archives for FreeCodeCamp/HelpJavaScript

8th
Feb 2018
Tiago Correia
@tiagocorreiaalmeida
Feb 08 2018 00:24
Indeed
If you hadto store extra usar data/ change you would just have more switch cases
FlashHero
@FlashHero
Feb 08 2018 00:26
@tiagocorreiaalmeida ok thanks
CamperBot
@camperbot
Feb 08 2018 00:26
flashhero sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
任务描述为:在函数 myFunction 内部声明一个局部变量 myVar,并删除外部console.log。
一直报错:未找到全局的 myVar 变量

function myFunction() {
'use strict';
var myVar;

console.log(myVar);
}

myFunction();

有知道哪里有问题吗?
Jianyu Zhang
@Jatstar
Feb 08 2018 06:32
@lyqingme 外面的console.log没删吧
Razvan Jackson
@RazvanJackson
Feb 08 2018 08:42
Good morning!
Blauelf
@Blauelf
Feb 08 2018 09:47
Good morning, too.
Razvan Jackson
@RazvanJackson
Feb 08 2018 10:51
Does someone here freelancing in UpWork?
Aniculaesei
@Aniculaesei
Feb 08 2018 12:56
@RazvanJackson Hi you frelance there...?
apropo ..salut :)
yofri
@yofriadi
Feb 08 2018 13:04
Hi guys, how to trigger input by clicking a button in react?
Stephen James
@sjames1958gm
Feb 08 2018 13:05
@Yofri onClick={function}
@Yofri If you need to get the value from the input, suggest you use onChange on the input and keep
the input value in your component state. The other option is to use the ref attribute to access the DOM element
yofri
@yofriadi
Feb 08 2018 13:10
@sjames1958gm function like what sir, i dont get it
      <input
        style={{display: 'none'}}
        type='file'
        accept='image/*'
        onChange={this.handleFile.bind(this)}
        ref={input => this.inputImage = input}
      />

      <button onClick={this.inputImage.click()}>Add file</button>
heres my code, but doesnt work
Stephen James
@sjames1958gm
Feb 08 2018 13:14
@Yofri Well your input this.handleFile.bind(this) will get the files selected by the user?
If you save those in your component state then your onClick function could do what you want.
this.inputImage.click() this is calling a function when you render the display not when the user clicks.
yofri
@yofriadi
Feb 08 2018 13:17
@sjames1958gm yes, as the name suggest it will get the files and saved it in state. so how do i get the popup input file?
Stephen James
@sjames1958gm
Feb 08 2018 13:21
@Yofri It will passed to handleFile in the event object
yofri
@yofriadi
Feb 08 2018 13:26
@sjames1958gm sorry i think you mistaken my question. what i ask is to how that button (the last line) trigger the input click behavior
Stephen James
@sjames1958gm
Feb 08 2018 13:27
@Yofri You want the button to cause the file dialog to appear?
yofri
@yofriadi
Feb 08 2018 13:27
@sjames1958gm yes
because input element is hard to be styling
but make that thing in the right full pag
e
and go here
Stephen James
@sjames1958gm
Feb 08 2018 13:31
@Yofri Not sure exactly maybe try this - it needs to be in an arrow function to call the function onClick not on render
<button onClick={() => this.inputImage.click()}>Add file</button>
yofri
@yofriadi
Feb 08 2018 13:33
@sjames1958gm thanks man, it works. but can you explain what this code doing ref={input => this.inputImage = input} i found it in stackoverflow
CamperBot
@camperbot
Feb 08 2018 13:33
yofri sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8949 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Feb 08 2018 13:35
@Yofri When React renders an element to the DOM (real element) if there is a ref attribute it calls the function
you assigned passing the actual DOM reference to the <input>
@Yofri this.inputImage = input this is just assigning it to a class variable that you can use later.
yofri
@yofriadi
Feb 08 2018 13:36
oh i see
Chris
@ConnectCodes
Feb 08 2018 14:52
Hi guys, I am stuck in “No repeats please” challenge "Return the number of total permutations of the provided string that don't have repeated consecutive letters. Assume that all characters in the provided string are each unique.” Using pseudo code in hint section Recursive Method but I don’t undrestand the how pseudo code calculates the permutations or how this recursion works. I read tutorials on recussion, permutations and Heap's sort algorithm but they confuse me more complicated or directly give you the answer which defeats the point of challenge . Here is what I have so far https://codepen.io/Codeconnect/pen/mXJRXW
Simon Cordova
@gbsimon87
Feb 08 2018 15:04
Good afternoon :)
Blauelf
@Blauelf
Feb 08 2018 15:54

@ConnectCodes There are multiple ways to do this recursively.

Some people use Heap's algorithm to generate all the permutations, and count the ones that don't have duplicates (you could use a regular expression with a back reference to test that).

My approach was different: I pass a string and a "forbidden letter" (an empty string or undefined on the top level) to my recursive function. Base case: If string is empty, it returns 1 (one way to build an empty string). Otherwise it iterates the string, and if the current character does not match the "forbidden letter" (which would be equivalent to a repeat), it will call itself passing the string with the current character removed, and the current character as the new "forbidden letter". It will then sum up the results of all those recursive calls, and return that.

The "forbidden letter" way prevents my code from generating paths for permutations that do contain repeats.

Jason Luboff
@JLuboff
Feb 08 2018 16:08
@gbsimon87 Good morning
Blauelf
@Blauelf
Feb 08 2018 16:11

@ConnectCodes I just read the recursive solution suggested there, and now that's not that different. Unlike my algorithm, where I keep track of the position within the permutation by shortening the string representing the remaining characters, they keep track of the position within the source string. The character with a position orgPos can be placed at any position from 0 to orgPos, both inclusive.

You probably need to do that regular expression trick or equivalent when doing the recursion that way rather than mine.

(one might get the impression that I like my approach - and I probably do ;))

This message was deleted
Gem
@gemclip
Feb 08 2018 16:22
duh nvm typo
Blauelf
@Blauelf
Feb 08 2018 16:28
@gemclip Case of rubber duck debugging?
Chris
@ConnectCodes
Feb 08 2018 16:46
@Blauelf Thank you, I will try again, your method first :smile:
CamperBot
@camperbot
Feb 08 2018 16:46
connectcodes sends brownie points to @blauelf :sparkles: :thumbsup: :sparkles:
:star2: 4684 | @blauelf |http://www.freecodecamp.org/blauelf
FlashHero
@FlashHero
Feb 08 2018 17:01
So when we develop an app with reactjs there's no need to use JavaScript, use components for everything from event handling to functionality right?
Stephen James
@sjames1958gm
Feb 08 2018 17:28
@FlashHero Well react is mostly javascript + JSX and if you use redux that is all js.
cjlynch12
@cjlynch12
Feb 08 2018 17:53
@FlashHero react is built using JS, usualy in the JSX syntax extension which allows you to (among other things) mixing markup - i.e. html - and regular javascript in the same file.
but you still need Javascript to do the heavy lifting
Christopher McCormack
@cmccormack
Feb 08 2018 17:59
@FlashHero you'll need to use objects for state, expressions for passing values, etc... but a lot of it is in the React component format, if that's what you mean
Stephen James
@sjames1958gm
Feb 08 2018 18:00
@FlashHero There won't be any document.querySelector, document.creatElement, etc.
Christopher McCormack
@cmccormack
Feb 08 2018 18:01
@sjames1958gm isn't it great :)
Stephen James
@sjames1958gm
Feb 08 2018 18:01
@cmccormack I likey :heart:
Christopher McCormack
@cmccormack
Feb 08 2018 18:01
I'm going through a few older FCC projects and making them compatible in IE11 and I can't stand messing with all these jquery selectors and all that
I could probably reduce my code into 1/3 as well with react
cjlynch12
@cjlynch12
Feb 08 2018 18:02
I think jquery is on it's way out tbh
seems to be more work than its worth, and is hard to maintain across different browsers
unless you are avoiding react/angular/etc at all costs, but that seems rare
Christopher McCormack
@cmccormack
Feb 08 2018 18:06
Maybe. small pages can still benefit from jquery, it being quick to create something small
Although you can do most all of the same work with vanilla I guess. Bootstrap having jquery as a requirement will probably keep it around for a while :)
Gem
@gemclip
Feb 08 2018 18:07
var team = ["Oliver Wood", "Angelina Johnson", "Katie Bell", "Alicia Spinnet", "George Weasley", "Fred Weasley", "Harry Potter"];
function hasEnoughPlayers(members){
  var isEnough;
  members.length >= 7 ?  isEnough=true : isEnough=false;
  return isEnough;
}
console.log(hasEnoughPlayers(team));
Stephen James
@sjames1958gm
Feb 08 2018 18:07
That and the installed base of sites with jquery is large.
Gem
@gemclip
Feb 08 2018 18:07
is there a better way?
cjlynch12
@cjlynch12
Feb 08 2018 18:07
True. I guess it depends on how much DOM manipulation you are doing. I prefer to just use vanilla js on small projects, and leave dom manipulations to react but each project is different
Stephen James
@sjames1958gm
Feb 08 2018 18:08
@gemclip just return the condition
@gemclip members.length >= 7 this is a value true/false which can be returned
Gem
@gemclip
Feb 08 2018 18:09
@sjames1958gm i see I was over thinking
Stephen James
@sjames1958gm
Feb 08 2018 18:10
@gemclip
Also, a ternary is an expression which is a value so
return members.length >= 7 ? "yes" : "no"
In the case where the return is not just a boolean.
Jason Luboff
@JLuboff
Feb 08 2018 18:11
@cmccormack How much are you having to do to make things IE11 compatable?
Christopher McCormack
@cmccormack
Feb 08 2018 18:11
@gemclip at least you are asking the right questions
@JLuboff so a few things I've found - I have to set width to 100% on some elements because they get squished in IE
I have to replace all of my arrow functions of course
And I had to use a polyfill for Object.assign in one place
Jason Luboff
@JLuboff
Feb 08 2018 18:12
Ah. Ya the biggest issue I've had is no arrow functions :worried:
Christopher McCormack
@cmccormack
Feb 08 2018 18:12
I was surprised that MDN's polyfill worked 100% first time, I'm not used to that
It's weird how our mindset changes over time. When I wrote these pages last year, I thought it was really important to use arrow functions and other newer features, but going back to fix them I see it doesn't really matter which you use, you should be using a transpiler and other tools that let you use whatever you want
Jason Luboff
@JLuboff
Feb 08 2018 18:16
I just think arrow functions look cleaner.. but ya...you loose out on this by using them which is an issue in some of my code
Christopher McCormack
@cmccormack
Feb 08 2018 18:17
fortunately it's not one OR the other :D
cjlynch12
@cjlynch12
Feb 08 2018 18:19
what about babel? @JLuboff
Onome Sotu
@onomesotu
Feb 08 2018 18:21
can someone please explain this converting characters to HTML entities exercise? in the intermediate section?
cjlynch12
@cjlynch12
Feb 08 2018 18:22
can you link the challenge @onomesotu
Onome Sotu
@onomesotu
Feb 08 2018 18:22
I understand what its asking, but do i have to hard code the characters HTML entities?
Christopher McCormack
@cmccormack
Feb 08 2018 18:22
@onomesotu yes
cjlynch12
@cjlynch12
Feb 08 2018 18:23
yep, use a combo of the character HTML entities and String.prototype.replace
Onome Sotu
@onomesotu
Feb 08 2018 18:23
is there a way to get their get the entities in JS for example, how we get the unicode of a character var a = 'a'; a.charCodeAt();
Christopher McCormack
@cmccormack
Feb 08 2018 18:23
I can't see my own solution right now for some reason but I don't think there is an encoding for the symbols, you can just create a datastructure that contains the encoded and decoded characters
Onome Sotu
@onomesotu
Feb 08 2018 18:24
var HTMLentities = {
    '&': '&amp;',
    '<': '&alt;',
    '>': '&gt;',
    '"': '&quot;',
    '\'': '&apos;'
  };
Christopher McCormack
@cmccormack
Feb 08 2018 18:24
your less than is incorrect
Onome Sotu
@onomesotu
Feb 08 2018 18:25
This is what I was thinking.. it just seems strange :worried:
there's some good ideas for getting around having to hardcode, warning: regex
Christopher McCormack
@cmccormack
Feb 08 2018 18:25
@onomesotu the focus is not on encoding it's on using regex/String.prototype.replace()
Onome Sotu
@onomesotu
Feb 08 2018 18:26
I just studied the regex last night.. it seems pretty doable and i actually enjoyed it :smile:
@cmccormack did i do the apostrophe correctly?
@cjlynch12 thanks, I will check it out
CamperBot
@camperbot
Feb 08 2018 18:27
onomesotu sends brownie points to @cjlynch12 :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @cjlynch12 |http://www.freecodecamp.org/cjlynch12
Christopher McCormack
@cmccormack
Feb 08 2018 18:27
@onomesotu looks like it
@onomesotu they linked the character set in the exercise
@cjlynch12 that's pretty cool as well thank you for sharing
CamperBot
@camperbot
Feb 08 2018 18:28
cmccormack sends brownie points to @cjlynch12 :sparkles: :thumbsup: :sparkles:
:cookie: 417 | @cjlynch12 |http://www.freecodecamp.org/cjlynch12
Onome Sotu
@onomesotu
Feb 08 2018 18:30
@cmccormack thanks for the clarification and pointing out that the less than is incorrect. I have fixed it now.. lemme try to tackle this
@cmccormack thanks
CamperBot
@camperbot
Feb 08 2018 18:30
onomesotu sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1309 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 08 2018 18:30
@onomesotu :thumbsup:
Christopher McCormack
@cmccormack
Feb 08 2018 18:36
Just a note @onomesotu the solutions mentioned in @cjlynch12 link will work in real life, but not in the FCC exercises as they explicitly ask for the word (e.g. &amp;), not the unicode value (e.g. &#38;)
Onome Sotu
@onomesotu
Feb 08 2018 18:38
@cmccormack yeah, I noticed that, that was why i was wondering if we can directly return e.g &amp; somehow instead of hard-coding it in a data structure
Jason Luboff
@JLuboff
Feb 08 2018 18:40
@cjlynch12 I know of babel, but haven't looked into it. At this point, my frontend projects are small so I don't really see the need to go that route at this time
Christopher McCormack
@cmccormack
Feb 08 2018 18:41
@JLuboff you may want to check it out, after a brief config it may only take a few minutes to get it all setup and output a transpiled file that's compatable
cjlynch12
@cjlynch12
Feb 08 2018 18:41
gotcha, @JLuboff . If you have the need later on for the bigger projects it's pretty painless to set up (unless you're trying to combine it with webpack -- which is useful but a pita to learn)
Jason Luboff
@JLuboff
Feb 08 2018 18:41
@cmccormack @cjlynch12 Thanks guys
CamperBot
@camperbot
Feb 08 2018 18:41
jluboff sends brownie points to @cmccormack and @cjlynch12 :sparkles: :thumbsup: :sparkles:
:cookie: 418 | @cjlynch12 |http://www.freecodecamp.org/cjlynch12
:star2: 1310 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 08 2018 18:43
hah that's a firm 'nope'
Jason Luboff
@JLuboff
Feb 08 2018 18:45
@cmccormack Thats a "I'm not going to for this particular project, but strongly considering for my next project" ;)
Onome Sotu
@onomesotu
Feb 08 2018 18:45
@cmccormack and @cjlynch12 I normally use gulp as a build process, I am about to start learning react and going through some videos about configuring the environment
Do you have any idea a good resource to learn webpack?
Christopher McCormack
@cmccormack
Feb 08 2018 18:46
@onomesotu good luck, it's a journey that's for sure :)
I spent a ton of time configuring my own webpack file just so I could better understand how it all works
Onome Sotu
@onomesotu
Feb 08 2018 18:46
What it does seems pretty straight forward, but setting up the config file puts the fear of God in me :smile:
Christopher McCormack
@cmccormack
Feb 08 2018 18:47
It's very much unintuitive at first, I would recommend reading through webpacks documentation very closely
once you understand how the loaders and plugins and all work it gets better
create-react-app will do all of the work for you, but it's not good if you want to learn how it works
cjlynch12
@cjlynch12
Feb 08 2018 18:51
Agree with @cmccormack. I stayed away from create-react-app cause it does a little too much work taking all the fun (work) out of figuring it out. I'm still figuring out webpack myself, but got it working with babel and react which is good enough for my current projects.
I would just search for a bunch of different react/webpack boilerplates and look at how they're all configured and try one from scratch.
Onome Sotu
@onomesotu
Feb 08 2018 18:52
Ok got it.. thanks guys..
Onome Sotu
@onomesotu
Feb 08 2018 19:08
regex question
How do you tell it to ignore whitespace?
if i have a range say var re = /[a-d]/;
I can tell it to not match any by adding: var re = /[^a-d]/;
If i so that for white space, it rather returns null
Christopher McCormack
@cmccormack
Feb 08 2018 19:17
@onomesotu how are you attempting to do it?
Onome Sotu
@onomesotu
Feb 08 2018 19:26
@cmccormack this is my regex var regex = /(\W+)/; to match non word character
but white space is also a none word character
but i don't want to add it
how do i express it in the regex?
Christopher McCormack
@cmccormack
Feb 08 2018 19:40
so you don't want to match spaces, jsut non word characters?
maybe something like this? /[^\w\s]+/
jusgoose
@gusd773
Feb 08 2018 20:10

question: is my jquery code calling on my button's "id=getQuote" b/c my understanding is that when it comes

to functions in JS or other OOL's, naming of a function is usually arbitrary.

https://codepen.io/gusd773/pen/PQwxRE

Jason Luboff
@JLuboff
Feb 08 2018 20:12
@gusd773 If you want your button to run a function when it is clicked, you need a click function
jusgoose
@gusd773
Feb 08 2018 20:12
@Jluboff my code does run when it's clicked tho
Jason Luboff
@JLuboff
Feb 08 2018 20:14
I don't see your code running
jusgoose
@gusd773
Feb 08 2018 20:14
:worried:
Christopher McCormack
@cmccormack
Feb 08 2018 20:24
function is misspelled
@gusd773 there are a lot of errors in there, use the tools in codepen to isolate them
jusgoose
@gusd773
Feb 08 2018 20:26
@cmccormack @JLuboff thank you
CamperBot
@camperbot
Feb 08 2018 20:26
gusd773 sends brownie points to @cmccormack and @jluboff :sparkles: :thumbsup: :sparkles:
:star2: 1311 | @cmccormack |http://www.freecodecamp.org/cmccormack
:star2: 2323 | @jluboff |http://www.freecodecamp.org/jluboff
Christopher McCormack
@cmccormack
Feb 08 2018 20:26
after you fix those error, you need to check with the API and see if they allow cross-origin requests, as I don't think that API does
I know of a good api that gets simpsons quotes though https://thesimpsonsquoteapi.glitch.me/
Jason Luboff
@JLuboff
Feb 08 2018 20:27
@cmccormack ;)
jusgoose
@gusd773
Feb 08 2018 20:32
or use jsonp? @cmccormack
Christopher McCormack
@cmccormack
Feb 08 2018 20:33
Only if the API supports it
jusgoose
@gusd773
Feb 08 2018 20:33
@cmccormack that it does gracias
CamperBot
@camperbot
Feb 08 2018 20:33
gusd773 sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
api offline
Christopher McCormack
@cmccormack
Feb 08 2018 20:33
@gusd773 np
jusgoose
@gusd773
Feb 08 2018 20:55
can somebody check if I'm calling this correctly. It's supposed to generate a new quote when I click my button ID'd as
getQuote
 $(function(){  
     $('#getQuote').click(function(){

          $.ajax({
            url: 'http://api.forismatic.com/api/1.0/',
            jsonp: 'jsonp',
            dataType: 'jsonp',
              data: {
                 method: 'getQuote',
                 lan: 'en',
                 format: 'jsonp'

          }
      })
  })
});
Jason Luboff
@JLuboff
Feb 08 2018 20:57
@gusd773 Use $(document).ready(function(){ for your first line
as far as the API call, not sure, haven't used it vefore
jusgoose
@gusd773
Feb 08 2018 20:58
@JLuboff I read that jquery has shortened it down to my top line?
Jason Luboff
@JLuboff
Feb 08 2018 20:58
Oh.. I guess thats possible. I haven't looked into it in quite sometime
Christopher McCormack
@cmccormack
Feb 08 2018 20:58
@gusd773 this is the fork I was working with earlier, maybe you can use it to get along. https://codepen.io/cmccormack/pen/bLgLEg?editors=1010
@gusd773 I don't think you can use an http api at all from codepen
maybe find a better api
Christopher McCormack
@cmccormack
Feb 08 2018 21:05
@gusd773 if you want to use jsonp, you may also want to try using $.getJSON, it allows you to just add the parameter &callback=? to the URL and it will parse it as a JSONP request, you don't really have to set any options.
really handy
Matej Bošnjak
@mbosnjak01
Feb 08 2018 21:51
$ajax({
type:"GET",
url:yourURL,
dataType:"json"
success: function(request) {
      //Do stuff
     //get your API data here - Example: request.quoteText

}
})
@gusd773
this is how I do my ajax calls. also, try with https://talaikis.com/api/quotes/ ... forismatic api is old and as far as I saw, it doesn't work anymore.
Jason Luboff
@JLuboff
Feb 08 2018 21:55
@mbosnjak01 I've started using method over type as type is now just an alias to method with newer versions of jQuery (just throwing it out there)
Matej Bošnjak
@mbosnjak01
Feb 08 2018 21:59
@JLuboff Do you bother using error function after success?
Jason Luboff
@JLuboff
Feb 08 2018 22:03
@mbosnjak01 Personally I don't...but I'd probably say its best practice to do so lol
Christopher McCormack
@cmccormack
Feb 08 2018 22:04
I much prefer to use .done(...) and .fail(...). Seems cleaner than putting everything in options objects
Tiago Correia
@tiagocorreiaalmeida
Feb 08 2018 22:41
hey all
does anyone around here uses mocha/chai?
Jason Luboff
@JLuboff
Feb 08 2018 22:46
Nope
Christopher McCormack
@cmccormack
Feb 08 2018 22:58
just with my coffee/tea on occassion
Jason Luboff
@JLuboff
Feb 08 2018 22:58
I thought I was the one who was supposed to have the dad jokes...
Jason Luboff
@JLuboff
Feb 08 2018 23:12
Time to install Nodejs and mongo on unbuntu...its been a while since I've worked in linux..
Stephen James
@sjames1958gm
Feb 08 2018 23:14
@JLuboff I use nvm for node, haven't install mongo recently
Jason Luboff
@JLuboff
Feb 08 2018 23:15
@sjames1958gm I'll take a look. And since I have you here... anything I should know between switching from development to production? I've always deployed to heroku/glitch and never a local environment
Stephen James
@sjames1958gm
Feb 08 2018 23:51
@JLuboff I don't think there is anything special as heroku/glitch are likely running linux as well
Jason Luboff
@JLuboff
Feb 08 2018 23:51
@sjames1958gm Thanks
CamperBot
@camperbot
Feb 08 2018 23:51
jluboff sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8951 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm