These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Jan 2018
Aditya
@ezioda004
Jan 20 2018 00:21
@xuhih Change this.clicks++; to this.clicks = ++this.clicks; and it'll work you need to preincrement not post.
Henry
@GitHub-Henry
Jan 20 2018 00:22
@xuhih works
Aditya
@ezioda004
Jan 20 2018 00:26
@GitHub-Henry Can you open his codepen and check the console and let me know if you see index.html:7 Uncaught ReferenceError: CoinHive is not defined
Henry
@GitHub-Henry
Jan 20 2018 00:27
@ezioda004 would if i didn't have to go
Aditya
@ezioda004
Jan 20 2018 00:27
Alright, apparently theres a coinhive script there
xuhih
@xuhih
Jan 20 2018 00:28
@ezioda004 good catch ;)
Embed.ly providers are vunerable basically, so had to check Gitter as pen's are left running forever.
Aditya
@ezioda004
Jan 20 2018 00:30
So its test purpose, you say?
xuhih
@xuhih
Jan 20 2018 00:30
Yup, check the head section.
Aditya
@ezioda004
Jan 20 2018 00:35
Wow, thats really scummy
Glad I use adblocks
Yan Kozlovskiy
@YanKozlovskiy
Jan 20 2018 00:36
Why is the call to clearInterval(); not working?
function countDown(time) {
  setInterval(function() {
    if (time !== 0) {
      console.log("Timer: " + time);
      time--;
    } else {
      console.log("Ring Ring Ring!!!");
      clearInterval();
    }
  }, 1000);
}
countDown(5);
xuhih
@xuhih
Jan 20 2018 00:36
Adblock won't help against crypto tho, blocking the domain is easy to get around.
@YanKozlovskiy you need to pass in the interval id returned by setInterval
Yan Kozlovskiy
@YanKozlovskiy
Jan 20 2018 00:37
the what?
xuhih
@xuhih
Jan 20 2018 00:37
var id = setInterval(...); clearInterval(id);
Yan Kozlovskiy
@YanKozlovskiy
Jan 20 2018 00:38
what is the id?
where do i get it?
Aditya
@ezioda004
Jan 20 2018 00:38
@YanKozlovskiy Its just a variable
Yan Kozlovskiy
@YanKozlovskiy
Jan 20 2018 00:39
ok...
???
Aditya
@ezioda004
Jan 20 2018 00:41
If you want to use clearInterval you need to store setInterval to a variable and then pass the variable name to clearInterval
Yan Kozlovskiy
@YanKozlovskiy
Jan 20 2018 00:42
thank you
xuhih
@xuhih
Jan 20 2018 00:42
No, thank you!
Aditya
@ezioda004
Jan 20 2018 00:43
@xuhih I dont think thats allowed
You should probably ask a mod here before you're "tricking" people here into "testing" your coinhive script.
xuhih
@xuhih
Jan 20 2018 00:44
Already done
Think that one proves the point tho.
Bjorn van de Peut
@bjorno43
Jan 20 2018 00:54
Wait.. tricking ppl into what?
Aditya
@ezioda004
Jan 20 2018 00:55
Into using codepen link with coinhive
Bjorn van de Peut
@bjorno43
Jan 20 2018 00:56
What's coinhive?
xuhih
@xuhih
Jan 20 2018 00:56
TLDR turning all of gitter into crypto mining zombies
Bjorn van de Peut
@bjorno43
Jan 20 2018 00:56
Who's doing that?
xuhih
@xuhih
Jan 20 2018 00:56
I did a proof of concept above
Aditya
@ezioda004
Jan 20 2018 00:56
@bjorno43 Basically turning your cpu without your consent to mine crypto
Bjorn van de Peut
@bjorno43
Jan 20 2018 00:57
Ye I know what crypto mining is. Did you remove the post @xuhih ?
xuhih
@xuhih
Jan 20 2018 00:57
Yep
Bjorn van de Peut
@bjorno43
Jan 20 2018 00:59
Alright. Please don't do it again. I understand it was to prove a point, but normally posting code that can potentially harm others is a very big no go
xuhih
@xuhih
Jan 20 2018 01:00
Scary thing is; there's a thousand ways to do this and they basically require no skill. If you use Atom then plugins are at high risk, npm packages too, etc.
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:01
Of course there are. As a C# dev I have full control over a users pc most of the time. Most programs require administrative permissions these days that no one even bats an eye when asked for it and just gives it
Rami
@RNwebdk
Jan 20 2018 01:23

Hi guys, i have a class called person and i want to use ES6:

class Person{
    constructor(personId, name, cart){
        this.personId = personId;
        this.name = name;
        this.cart = [];
    }
}

Now if i have a create person button, how would i dynamically create a person object for every click.
note: i want to increament the person object on every click, so that means, first obj would be person1, then person2 ect

Casper Beyer
@caspervonb
Jan 20 2018 01:31
Do you want the answer in a.. CodePen? :smile:
Just keep track of a counter outside
var personId = 0;
btn.addEventListener('click', function() {
  var person = new Person(++personId, ...);
});
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:39
@caspervonb That's not gonna work. You'll be overwriting the person instance every single time
Chi
@chiyc
Jan 20 2018 01:39
@RNwebdk In addition to @caspervonb 's button click event, you also need a way to keep track of each Person that's being created. A couple things you can do are dynamically define variable names or push each Person object onto an array.
+1 to what @bjorno43 just said
Casper Beyer
@caspervonb
Jan 20 2018 01:40
@bjorno43 Well obviously do something with person, add it to an array or something
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:41
Ye writing to an array is the way to go. It's possible to dynamicly create variables, but it's considdered very bad practise
Chi
@chiyc
Jan 20 2018 01:42
Oh, that's good to know. What's the reasoning for that?
Casper Beyer
@caspervonb
Jan 20 2018 01:43
Saying things are bad practice without an example is considered bad practice :P
Rami
@RNwebdk
Jan 20 2018 01:44
Thanks for your time guys, i'm trying to learn OOP, but i don't know how to make properties in JS, i'm a little confused about that.... i've tried something like this, but it's not possible, maybe there's a another syntax that i don't know of ?
class Person{
    let id = 0; // this line
    constructor( name){
        this.personId = id++;
        this.name = name;
        this.cart = [];
    }
}
i have a little xp from PHP, but both are bad practice in general when it comes to object oriented programming
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:45
@chiyc Because it only works in a browser window (not server side, because there's no window scope available)
Casper Beyer
@caspervonb
Jan 20 2018 01:45
@bjorno43 ah you mean dynamic global variable names?
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:46
@caspervonb yes
Casper Beyer
@caspervonb
Jan 20 2018 01:47
@RNwebdk I think ES6 has static, but better to let it be in the closure.
static foo = 0 basically being equivalent to Person.foo = 0
Chi
@chiyc
Jan 20 2018 01:48
@bjorno43 I see! Yeah, I'm not sure how you could do it server side without using eval, which I definitely know is bad practice for performance and security
Casper Beyer
@caspervonb
Jan 20 2018 01:49
@chiyc (typeof window == 'undefined' ? global : window)[key] = value; works everywhere but why the heck would you :P
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:50
@chiyc You can solve it by creating a scope of your own. Then register the dynamic var to that scope instead of the window
Chi
@chiyc
Jan 20 2018 01:52
@bjorno43 Thanks! I agree with both you and @caspervonb about the practice. There's probably no good reason to do this. If a collection of objects are being dynamically generated, they likely belong in a data structure together
CamperBot
@camperbot
Jan 20 2018 01:52
chiyc sends brownie points to @bjorno43 and @caspervonb :sparkles: :thumbsup: :sparkles:
api offline
:cookie: 204 | @bjorno43 |http://www.freecodecamp.org/bjorno43
Rami
@RNwebdk
Jan 20 2018 01:53
@caspervonb still a little confused about this syntax, any suggestions for a tutorial to learn this exact thing ?
Casper Beyer
@caspervonb
Jan 20 2018 01:54
@RNwebdk the spec..? probably not.
Maybe Martin's book.. whatchamacall it
Chi
@chiyc
Jan 20 2018 01:56
@RNwebdk MDN is also usually a great resource for getting just what you're looking for: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:57
Made something interesting yesterday btw
A pair programming app on my website :)
Casper Beyer
@caspervonb
Jan 20 2018 01:58
Show or it did not happen
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:58
Sure, give me a min :)
Casper Beyer
@caspervonb
Jan 20 2018 01:59
Can i break it?
:D
Bjorn van de Peut
@bjorno43
Jan 20 2018 01:59
Go here: http://home.icecub.nl/PairProgramming/ Choose Javascript as the language. Pick a username and use this ID: L3FxYiNEmnTymUgR7g1
Rami
@RNwebdk
Jan 20 2018 01:59
thanks @caspervonb @chiyc @bjorno43
CamperBot
@camperbot
Jan 20 2018 01:59
rnwebdk sends brownie points to @caspervonb and @chiyc and @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 205 | @bjorno43 |http://www.freecodecamp.org/bjorno43
:cookie: 351 | @chiyc |http://www.freecodecamp.org/chiyc
api offline
Casper Beyer
@caspervonb
Jan 20 2018 02:00
The text is white, on a white background :S
Chi
@chiyc
Jan 20 2018 02:00
That's awesome!
Works for me :D
Casper Beyer
@caspervonb
Jan 20 2018 02:01
The inital dropdown
Here's mine :P https://caspervonb.github.io/toneofsorting/ except its been months and I haven't done a sunday project in.. forever :o
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:05
Ghehe I'm not finished with it yet. I'll implement different designs so ppl can switch. I also plan to implement changing the language on the fly and changing the font size
Casper Beyer
@caspervonb
Jan 20 2018 02:06
Going to do backend languages?
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:06
It already supporst backend languages. If you look at the front page where you login, you can pick quite a few of them
Casper Beyer
@caspervonb
Jan 20 2018 02:07
Screenshot from 2018-01-20 10-07-01.png
Oh right, but it won't run ;)
Did one with docker, but with the startup time of the container it feels super slow so scrapped it
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:09
Nah. I'll implement running for HTML, CSS, JS later on. Might do some server side langs as well, provided I can sandbox them for security of course
Casper Beyer
@caspervonb
Jan 20 2018 02:10
Easy enough to do with docker; but startup time can be ~5-10s
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:10
Ye I prefer not to do that. It should be fast for everyone
I've checked out that project of yours btw. What I noticed most is that the audio comes in on the left side mostly. Almost mono
Casper Beyer
@caspervonb
Jan 20 2018 02:15
Oh, you're right! :D
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:16
Ye thought it was my headset at first, but that wasn't the issue, lol
Casper Beyer
@caspervonb
Jan 20 2018 02:17
Never actually noticed, usually have one ear bud plugged in heh
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:17
lol
Casper Beyer
@caspervonb
Jan 20 2018 02:19
This message was deleted
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:21
The randomize works, but just pressing buttons bugs out very fast :P
As long as you press just 1, it'll play. But when you press 2 or more before it plays, it won't anymore. Even after refreshing the page
Casper Beyer
@caspervonb
Jan 20 2018 02:22
@bjorno43 basically game of life rules
Except it does not wrap IIRC (really old)
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:23
Ah ok
Casper Beyer
@caspervonb
Jan 20 2018 02:23
Code sundays! :P
Take a random idea; implement it in around 5-6 hours.
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:24
Haha cool
Casper Beyer
@caspervonb
Jan 20 2018 02:24
Daytime coding is becoming a chore so gotta do something to keep it fun
Getting stickied on /r/internetisbeautiful is also a bonus :D
Bjorn van de Peut
@bjorno43
Jan 20 2018 02:26
Haha I see. I usually code in the middle of the night. Less ppl bothering me with questions, lol
Ismail Hozain
@ismailhozain
Jan 20 2018 04:31
hey guys i made this little slide show , I think you guys might enjoy it! :smile: https://codepen.io/ismailhozain/full/WdPvNQ/
Tom
@moT01
Jan 20 2018 04:38
:thumbsup: @ismailhozain
Hemakshi Sachdev
@hemakshis
Jan 20 2018 05:03
Hola Guyss!! :smile:
I'm almost done with my Recipe Box Project. (little bit of unresponsive still... but I've tried that a lot will try more)..
Actually I wanted your feedback on the working of my Recipe Box. (I feel I've made my code way too complicated but still I'm getting what I had wanted.) So just need you feedbacks/opinions/suggestions etc..
Here's the link.. https://codepen.io/hemakshis/pen/jYdPLy?editors=0010
Tom
@moT01
Jan 20 2018 05:09
@hemakshis hey, looks real good at first glance
but i will point out all the complaints i can find
if my window isnt tall enough the text goes onto the plates/background - i cant read the text
adding cursor: pointer; to the little navigation area will help the user see that those are clickable
im not saying its bad... but im not a fan of having multiple ways to do things - (the left/right arrows in the little navigation area - and the left/right arrows in the main page)
i feel one would way would do
not sure what the arrow on the top left is about
Muhammed Hafiz
@zifahm
Jan 20 2018 05:13
finished recipe box challenge for react , everything is set even local storage too,so after you refresh the browser same items will be there, take a look ,any bugs? https://codepen.io/m_zifah/full/ZvwGKX/
Tom
@moT01
Jan 20 2018 05:18
@hemakshis 600 lines of code seems like a lot for what you have - i know you're probly still learning - and i didnt look through it - but maybe try to optimize a little more on the next project
and my last suggestion - i dont like the edit/delete buttons on each recipe - feels repetitive - maybe try icons - or icons that show on hover - i dont have a solution for that - but maybe something to think about
@hemakshis im being as picky as i can be - it looks real good
Tom
@moT01
Jan 20 2018 05:24
@zifahm i edited one of the recipes - deleted the other two - and refreshed - it saved, but the one that remained is a little above the page and cant see it
i would change the text for saving an edit - to something like save - or finished
yea, there's some strange issue with the recipe title not showing up there
not sure
it wasn't above the page - the title just isnt showing
could use a little loving - maybe a background and some margins or something to make it a little pretty
VaseJS
@VaseJS
Jan 20 2018 05:35

@all seeing how many of us help people, just got this heads up from another room

some guy put a virus on his codepen and then asked for help asking
why his button didn't work, be careful about activating js on your machine.
check all parts of a pen before running it

Tom
@moT01
Jan 20 2018 05:37
@VaseJS do you know who?
or what? - you can add this - ?turn_off_js=true to the end of any codepen link to disable js onload
Ken Haduch
@khaduch
Jan 20 2018 05:53
@moT01 @VaseJS - wow, I guess it's a matter of time before someone tries to abuse freeCodeCamp's open environment. Thanks for the tip about turning off automatic JS execution!
CamperBot
@camperbot
Jan 20 2018 05:53
khaduch sends brownie points to @mot01 and @vasejs :sparkles: :thumbsup: :sparkles:
:cookie: 468 | @vasejs |http://www.freecodecamp.org/vasejs
:cookie: 962 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Jan 20 2018 05:58
@khaduch hey, any thoughts on that? - im trying to think what someone could do with some malicious front end javascript code on codepen - and not a lot is coming to mind
Ken Haduch
@khaduch
Jan 20 2018 06:01
@moT01 - it's a good question. I don't know what could be done, either. I imagine that if you could access files you could do something to corrupt files. You could put infinite loops in the code, or maybe run code that would open another malicious site? It would be nice to know more details.
Toni Shortsleeve
@KoniKodes
Jan 20 2018 06:02
@moT01 We're all here just to try to help each other or learn from each other. Waste of resources and energy to try to mess out someone else through malicious pens.
aRtoo
@artoodeeto
Jan 20 2018 06:03

hey fam! i have a question. how can you change the background when you toggle a button. ihave this css which toggle between toggle another class.

.isSwitchActive{
    margin: 0px 30px;
    transition-duration: 0.2s;
    background: green;
}

heres the pen.
https://codepen.io/artoo/pen/opQZWy

VaseJS
@VaseJS
Jan 20 2018 06:14
@moT01 there are a lot of things that can be done with malicious code. it all depends on their intent. codepen is a sandbox so there is only so much they can do, but any attack is an issue
its funny because i was thinking of codepen being an issue after explaining to a new dev that we won’t open zip files to view their website. while i was saying use codepen, in the back of my mind, i thought, it could be an issue too. but to limited degree, because i don’t believe codepen allows you to upload files, so the attack could not deliver a payload to you
but it makes one think…for those of us that are more security minded
VaseJS
@VaseJS
Jan 20 2018 06:21
however, now that i think about it, codepen does allow links so they can easily link to a malicous site and cause damage. lots of possibilities when one starts to think about it. how could we defined ourselves vs a codepen attack outside of using a vm to sandbox our browsing…. got to step your security game up. could just be a scare but better safe than sorry
Muhammed Hafiz
@zifahm
Jan 20 2018 06:24
@moT01 ahh you might have deleted the title and saved
thats the bug im trying to fix
Ken Haduch
@khaduch
Jan 20 2018 06:37
@artoodeeto - it looks like your CSS properties that you have declared in the #innerSwitch selector are overriding the class .isSwitchActive - try to make a separate class for the inactive state and just move the same properties out into that class so they will be on equal playing ground. If I remember correctly, ID selector properties override class selector properties. https://css-tricks.com/specifics-on-css-specificity/ that article has details on CSS specificity and how CSS styles are applied.
aRtoo
@artoodeeto
Jan 20 2018 06:44
@khaduch thank man i just change the ID to CLASS. thanks :0
CamperBot
@camperbot
Jan 20 2018 06:44
artoodeeto sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3686 | @khaduch |http://www.freecodecamp.org/khaduch
Kent Saeteurn
@sansae
Jan 20 2018 07:18

hello, can someone help me with a javascript regex problem?

i'm trying to check a string for digits and a decimal, however the following regex I wrote does not check properly:
var regex = /\d\./g;

when I do each separately, it works. Like this:
var regex = /\d/g;
and
var regex = /\./g;

can anyone help me with combining both? thanks in advance

Fabien SHAN
@X140hu4
Jan 20 2018 07:49
@sansae Would this work: \d+\.\d+?
A_A
@Otto-AA
Jan 20 2018 07:50
@sansae /[\d\.]+/g works for me (https://regexr.com/3jgfo)
the + in regex means one or more of the preceeding character (in our case \d)
the brackets [...] means one of those characters in the set (in our case either a number or a dot)
(edit: added a + to the end of the regex)
Antonious Stewart
@Antonious-Stewart
Jan 20 2018 08:03
need some advice about how to fix my code i get 2/3 test right with this i see whats wrong the 3rd index has an arg that doesn't fit my logic but can anyone give me a hint on a better condition or is there also another problem i should be lookining for

function largestOfFour(arr) {
  // You can do this!
  let nums =[];
  let value = 0;
  //iterate over arr and get largest num and push to nums
  for(i = 0; i < arr.length; i++){
    for(j =0; j < arr[i].length;j++){

      if(arr[i][j] > arr[i][j + 1] && value < arr[i][j]){
        value = arr[i][j];
        nums.push(value);
     } 

      } 

    }


  return nums;
}

largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
correction the 2nd index
Fabien SHAN
@X140hu4
Jan 20 2018 08:26
Put some console.log and monitor the values of your variables
hensn5250
@hensn5250
Jan 20 2018 08:29
@X140hu4
are you currently working on FCC ciriculum? If yes, what are you currently working on?
Fabien SHAN
@X140hu4
Jan 20 2018 08:32
@hensn5250 I am refreshing my portfolio at the moment :) I am missing the last four projects for the front end certificate. What about you?
hensn5250
@hensn5250
Jan 20 2018 08:36
@X140hu4 doing the twitch application in the frontend certificate
is your portfolio on codepen?
Fabien SHAN
@X140hu4
Jan 20 2018 08:39
I did only a reverse engineered version
Nothing exciting :)
Twitch was a mess to work with :/
hensn5250
@hensn5250
Jan 20 2018 08:40
yea, took me a while to understand the api
it isn't complex, its just that its hard to find what you need in the docs
Fabien SHAN
@X140hu4
Jan 20 2018 08:43
This and doing the requests asynchronously... I did it in vanilla JS
Dimitris Nik.
@dimitrissnk
Jan 20 2018 11:49
Hey guys, I am trying creating my first tribute page project and I have a small problem. I have added a picture of the person as a background image and I am adjusting it using the percentage sizing scale
Aman Kumayu
@aman-kumayu
Jan 20 2018 11:49
hello everyone
Naris R
@KittenHero
Jan 20 2018 11:50
@Dimitrios51 you need any help?
@aman-kumayu hello :)
Aman Kumayu
@aman-kumayu
Jan 20 2018 11:54
anyone need any help ?
Dimitris Nik.
@dimitrissnk
Jan 20 2018 11:55
@KittenHero Yeap, I am trying adjusting the background image like so: http://prntscr.com/i321ss
Aman Kumayu
@aman-kumayu
Jan 20 2018 11:55
so what do you want exactly
Naris R
@KittenHero
Jan 20 2018 11:56
is that will smith?
Aman Kumayu
@aman-kumayu
Jan 20 2018 11:56
yups
Naris R
@KittenHero
Jan 20 2018 11:56
try: background-size: cover;
Dimitris Nik.
@dimitrissnk
Jan 20 2018 11:57
as you can see on the css tab, the width is equal to 1000%, but I want to to be around in the middle of the screen, which would normally be 50%, isnt that right?
Aman Kumayu
@aman-kumayu
Jan 20 2018 11:57
.home {
width:100% !important;
height:100% !important;
}
try this
Naris R
@KittenHero
Jan 20 2018 11:58
you want it in the middle of the screen?
why don't you use an <img/> tag?
Dimitris Nik.
@dimitrissnk
Jan 20 2018 12:00
@aman-kumayu on width and height of 100% it is half of the screen :|
how is that possigble? :P
@KittenHero No,I want it as a background with full width and about 50-60% of height, but as you can see in the screenshot above the % isn't working correctly
Aman Kumayu
@aman-kumayu
Jan 20 2018 12:01
@Dimitrios51 what i didn't understand what you are saying
@Dimitrios51 give me that image link i will try
Naris R
@KittenHero
Jan 20 2018 12:03
try this:
width: 100vw;
height: 50vh;
Dimitris Nik.
@dimitrissnk
Jan 20 2018 12:04
@aman-kumayu this is how it looks like with the code you sent me above http://prntscr.com/i324nz
Aman Kumayu
@aman-kumayu
Jan 20 2018 12:12
@Dimitrios51 use this
.home
{
background-image:url('https://i.imgur.com/x2UFTdt.jpg');
background-repeat:no-repeat;
background-size:cover;
}
css style
Naris R
@KittenHero
Jan 20 2018 12:12
dude
please stop spamming will smith
CamperBot
@camperbot
Jan 20 2018 12:14
:bulb: to format code use backticks! ``` more info
Aman Kumayu
@aman-kumayu
Jan 20 2018 12:14
'''
CamperBot
@camperbot
Jan 20 2018 12:14
:bulb: to format code use backticks! ``` more info
Lee
@LeeConnelly12
Jan 20 2018 12:15
You're using single quotes, not backticks `
Aman Kumayu
@aman-kumayu
Jan 20 2018 12:15
oh sorry
Aditya
@ezioda004
Jan 20 2018 12:15
There goes my whole year quota of Will Smith
Aman Kumayu
@aman-kumayu
Jan 20 2018 12:15
.home
{
  background-image:url('https://i.imgur.com/x2UFTdt.jpg');
  background-repeat:no-repeat;
background-size:cover;
}
yeah i got it
thanx
Naris R
@KittenHero
Jan 20 2018 12:15
nice
Matej Bošnjak
@mbosnjak01
Jan 20 2018 12:42
kek
Bjorn van de Peut
@bjorno43
Jan 20 2018 12:51
@aman-kumayu Please delete all those spam messages before a Mod mistakes them for actual spamming ;)
Matej Bošnjak
@mbosnjak01
Jan 20 2018 12:53
The legend says that if you spam one's name and picture enough time on gitter withing short period od time, that person will become a web dev :(
Naris R
@KittenHero
Jan 20 2018 12:54
if only I can make money by spamming people
Bjorn van de Peut
@bjorno43
Jan 20 2018 12:55
@aman-kumayu Never mind, done it for you (since you're not online apperently)
@KittenHero I wouldn't risk it. In the US they actually tracked down one of those guys that was sending spam mails around. Was given a fine of 200 or 300 bucks for each mail. Total fine was more than there was money in the world if I remember correctly xD
Naris R
@KittenHero
Jan 20 2018 12:58
I'm behind 7 proxies :)
Bjorn van de Peut
@bjorno43
Jan 20 2018 12:59
And you're still able to use the internet? xD
Dimitris Nik.
@dimitrissnk
Jan 20 2018 12:59
@mbosnjak01 REALLY? So I will become a web dev? :smile:
Naris R
@KittenHero
Jan 20 2018 13:00
It's the same proxy 7 times :)
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:00
@Dimitrios51 Can you write <html></html>?
Dimitris Nik.
@dimitrissnk
Jan 20 2018 13:00
@bjorno43 <html></html>
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:00
@Dimitrios51 I was refering to will smith but I don't see why wouldn't you become one :P
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:01
@Dimitrios51 Congratulations. You're a web dev (not a very good one, but hey, it's something!)
mbosnjak01 @mbosnjak01
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:01
XD
Dimitris Nik.
@dimitrissnk
Jan 20 2018 13:01
:P I started learning again yesterday, after I left it for quite a lot of months :P
Naris R
@KittenHero
Jan 20 2018 13:02
better than I was a couple of years back, I knew html and css but i wouldn't touch it to save my life
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:02
gitter isn't open source, rigth?
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:03
I don't think so. Why?
Naris R
@KittenHero
Jan 20 2018 13:04
https://gitlab.com/gitlab-org/gitter It has MIT license, so i'd sat that's open source
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:04
I just found how nice this icon list feature is when you type : in the chat
wanted to see how it works
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:05
It's not that hard to make something like that
Dimitris Nik.
@dimitrissnk
Jan 20 2018 13:05
Do you usually use something like that while creating a page? :P http://quirktools.com/screenfly/
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:06
You basicly detect : in the input field and show a hidden div. Then filter the contents based on the characters that come after it untill a space or newline char is detected
Naris R
@KittenHero
Jan 20 2018 13:07
yea that does sound pretty easy
Yogender
@yb1997
Jan 20 2018 13:07

can anyone please run this script in chrome(please tell me whether this code freezes your tab),
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
(function() {
var a = 1,b = 1, x = -200, r = 50;
var y;

for (var i = 400; i >= 0; i--,x++) {
y = Math.sqrt(Math.pow(b,2)*(Math.pow(r,2) - Math.pow(x,2)/Math.pow(a,2)));
if(i = 400)
ctx.moveTo(250+x, 250+y);
ctx.lineTo(250+x, 250+y);
ctx.stroke();
}
}());

Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:08
I tried making that, but I didn't know how to make that real time detection .. so I ended up deleting whole thing cause i though my approach is completely wrong
Naris R
@KittenHero
Jan 20 2018 13:08
using input events?
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:09
which event would that be?
on change?
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:09
@mbosnjak01 Easy: document.getElementById('inputfield').addEventListener('change', function(e){ ... });
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:10
@KittenHero @bjorno43 Thanks. I'm going to try it.
CamperBot
@camperbot
Jan 20 2018 13:10
mbosnjak01 sends brownie points to @kittenhero and @bjorno43 :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @bjorno43 |http://www.freecodecamp.org/bjorno43
:cookie: 128 | @kittenhero |http://www.freecodecamp.org/kittenhero
Naris R
@KittenHero
Jan 20 2018 13:11
yeah, you can use change input or even keyup https://developer.mozilla.org/en-US/docs/Web/Events/input
@yb1997 I ran it but i didn't have a canvas so it didn't work :smile:
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:12
Ye. Seems Gitter uses keyup for it
Yogender
@yb1997
Jan 20 2018 13:13
:smile: well just create an html file and use canvas tag with id canvas and insert this code in that file
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:14
@yb1997 Why not create a codepen and let ppl visit instead of making them work for you? :P
Yogender
@yb1997
Jan 20 2018 13:15
hahahaa that's better
Naris R
@KittenHero
Jan 20 2018 13:15
yea, i ran it in a codepen and it says infinite loop was detected
oh I see
in the if statement you have if (i = 400)
which is an assignment
@yb1997
Yogender
@yb1997
Jan 20 2018 13:18
wow that was a stupid mistake
thx
Naris R
@KittenHero
Jan 20 2018 13:19
to be fair, I don't think higher level languages like js should allow those kind of statements
Yogender
@yb1997
Jan 20 2018 13:20
why ?
do you mean suareroots and power and all that ?
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:23
@KittenHero No! There are legitime reasons to create infinite loops. Like while(true). Think about scripts that are never supposed to end, like websockets
Naris R
@KittenHero
Jan 20 2018 13:23
because the cases where you assign values in an if statement is so unusual that it should deliberately be difficult to do
@bjorno43 I don't think that's what I meant
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:25
Ye sorry, I see now. My bad
John Roble
@JNZY
Jan 20 2018 13:36
Hello guys
anyone good at chartjs & laravel here i need a little help :worried:
Naris R
@KittenHero
Jan 20 2018 13:38
dejavu
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:39
function keyCode(event) { var x = event.keyCode; if (x == 190) { list.classList.remove('hidden'); } else { list.classList.add('hidden'); } }
well this works ... yay
Naris R
@KittenHero
Jan 20 2018 13:39
congratz dude
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:40
:beers:
Naris R
@KittenHero
Jan 20 2018 13:40
function/variable names could be better :P
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:40
yeh I always put some dumb names when i test stuff
XD
how should I set up my list so I could filter it?
should i put the list inside array, object?
Naris R
@KittenHero
Jan 20 2018 13:44
mm, if it was me, I'd make put a class each on item and put the value in a data attribute, then you can query the values from the dom node
I'm terrible at explaining clearly
yozhikvtumane
@yozhikvtumane
Jan 20 2018 13:46
Hello! Can you please test my Twitch app a little bit https://yozhikvtumane.github.io/twitch-app/
John Roble
@JNZY
Jan 20 2018 13:47
[code]test[/code]
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:47
i was thinking of doing something like that ... put my list inside an object ... whenever a icon is chosen it should put a counter+1 inside that icon object (inside an array which is inside an object), and then make default icon filter by that counter ... top 10 gets to display first ... and then others I get by a code
John Roble
@JNZY
Jan 20 2018 13:47
how do u write code here?
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:47
'''
CamperBot
@camperbot
Jan 20 2018 13:47
:bulb: to format code use backticks! ``` more info
John Roble
@JNZY
Jan 20 2018 13:47
test
thanks!
Lee
@LeeConnelly12
Jan 20 2018 13:47
@mbosnjak01 Make it even shorter :trollface:
const keyCode = event => {list.classList.remove(event.keyCode == 190 ? 'hidden':'')}
Naris R
@KittenHero
Jan 20 2018 13:48
@yozhikvtumane plz don't use blocking IO
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:48
@LeeConnelly12 Yes, that looks nice as well but I am not such a great fan of short if/else :)
yozhikvtumane
@yozhikvtumane
Jan 20 2018 13:48
@KittenHero What is it?
Naris R
@KittenHero
Jan 20 2018 13:49
@LeeConnelly12
const keyCode = e => e.keyCode == 190 && list.classList.remove('hidden') || list.classList.add('hidden');
Lee
@LeeConnelly12
Jan 20 2018 13:50
@KittenHero Well played...
Naris R
@KittenHero
Jan 20 2018 13:50
@yozhikvtumane I can tell you're using synchronous request and it feels bad :(
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:50
@LeeConnelly12 @KittenHero Those don't work in my case :D
yozhikvtumane
@yozhikvtumane
Jan 20 2018 13:51
@KittenHero I do , because I need it
@KittenHero How do I add some loading gif while it's loading?
Lee
@LeeConnelly12
Jan 20 2018 13:53
@KittenHero Why not use the ternary operator though?
const keyCode = e => e.keyCode == 190 ? list.classList.remove('hidden') : list.classList.add('hidden');
Naris R
@KittenHero
Jan 20 2018 13:53
@yozhikvtumane I think you already have a gif in the background but it doesn't actually plays while loading
also you can't type input while it's loading
Matej Bošnjak
@mbosnjak01
Jan 20 2018 13:54
@LeeConnelly12 this is a bingo
Naris R
@KittenHero
Jan 20 2018 13:54
which is why I recommend not using synchronous IO
yozhikvtumane
@yozhikvtumane
Jan 20 2018 13:55
@KittenHero Why do you need to type something in while it's loading? :D
Naris R
@KittenHero
Jan 20 2018 13:55
@LeeConnelly12 touche, ternary operator makes sense when there's 2 branches, but I started with one so I just extended it without thinking
@yozhikvtumane because I really wanted to know if someone was online?
I mean it's just good design man
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:56
For readability, ternary operators hardly ever make sense to me, lol
Especially nested ones..
yozhikvtumane
@yozhikvtumane
Jan 20 2018 13:57
@KittenHero I see, I need to add this loading gif somehow, but I don't know how
Naris R
@KittenHero
Jan 20 2018 13:57
I love nested ternary :)
@yozhikvtumane even if you add a gif, it won't play while the script is executing
the only way is asynchronous requests
Bjorn van de Peut
@bjorno43
Jan 20 2018 13:58
That depends on how it works actually. If it uses Ajax, then yes, you can show a loading gif while it's busy
yozhikvtumane
@yozhikvtumane
Jan 20 2018 13:58
@KittenHero I will add it instead of that input, and when it's ready that input appears back
Naris R
@KittenHero
Jan 20 2018 14:00
clever
yozhikvtumane
@yozhikvtumane
Jan 20 2018 14:02
@bjorno43 something like .onprogress() ?
Naris R
@KittenHero
Jan 20 2018 14:02
@bjorno43 ajax is asynchronous by default though
Bjorn van de Peut
@bjorno43
Jan 20 2018 14:04
@yozhikvtumane If you're using jQuery, then yes
@KittenHero True
Naris R
@KittenHero
Jan 20 2018 14:05
In fact I think they're deprecating synchronous request
yozhikvtumane
@yozhikvtumane
Jan 20 2018 14:05
@bjorno43 no, I don't use jquery
Naris R
@KittenHero
Jan 20 2018 14:05
use the fetch API then
it's real nice
and native
Bjorn van de Peut
@bjorno43
Jan 20 2018 14:05
@yozhikvtumane Ah never mind, .onprogress is native js. My bad
Onome Sotu
@onomesotu
Jan 20 2018 14:45
Hi all, i need help with gulp task
const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const autoprefixer = require('gulp-autoprefixer');

gulp.task('browerSync', function(){
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
});

gulp.task('start', ['browerSync'], function(){
    gulp.watch('./css/*.css', browerSync.reload);
    gulp.watch('index.html', browserSync.reload);
    gulp.watch('./scripts/*.js', browserSync.reload);
});
I just want to set up local server and then watch for changes in those files
but i get this error when ever gulp starts
Selection_001.png
I don't know why it throws the reference error.. browserSync is clearly defined
In addition, it doesn't watch the for changes to the files
dinesh
@1532j0004kg
Jan 20 2018 14:49
Hi guys , can any one help to whole the value of 2.2 to 2 ?
Onome Sotu
@onomesotu
Jan 20 2018 14:49
@1532j0004kg Math.round(2.2);
dinesh
@1532j0004kg
Jan 20 2018 14:50
in c++?
ok thanks @onomesotu
CamperBot
@camperbot
Jan 20 2018 14:50
1532j0004kg sends brownie points to @onomesotu :sparkles: :thumbsup: :sparkles:
:cookie: 299 | @onomesotu |http://www.freecodecamp.org/onomesotu
dinesh
@1532j0004kg
Jan 20 2018 14:51
@onomesotu i dont know about gulp , sry !
Onome Sotu
@onomesotu
Jan 20 2018 14:51
In c++ you can use ceilor floor to round up or down accordingly
@1532j0004kg
Naris R
@KittenHero
Jan 20 2018 14:52
@1532j0004kg
#include <math.h>
round(2.2)
dinesh
@1532j0004kg
Jan 20 2018 14:52
but when i floor or round 2.7 it takes as 3 , but i need the output as 2.
Naris R
@KittenHero
Jan 20 2018 14:52
roundf for float and roundl for long double
dinesh
@1532j0004kg
Jan 20 2018 14:53
is it has the solution to find that one ? @onomesotu @KittenHero
Naris R
@KittenHero
Jan 20 2018 14:54
que?
dinesh
@1532j0004kg
Jan 20 2018 14:55
que is a function ?
Naris R
@KittenHero
Jan 20 2018 14:55
que is spanish for what?
Onome Sotu
@onomesotu
Jan 20 2018 14:55
@1532j0004kg in javascript Math.floor(2.7) returns 2
dinesh
@1532j0004kg
Jan 20 2018 14:55
:smile:
ok
i need in c++
when i round of 2.7 the answer i need is 2 not 3 .
@onomesotu @KittenHero
Naris R
@KittenHero
Jan 20 2018 14:56
use floor then
Stephen James
@sjames1958gm
Jan 20 2018 14:56
@1532j0004kg
float x = 2.2
int y = (int)x;
dinesh
@1532j0004kg
Jan 20 2018 14:57
Actually i am dividing two values .
#include <bits/stdc++.h>

using namespace std;


int main() {

    int n ,result = 0, j = 0 , number;
    cin>>n;

   //var minus1 = number - 3 ;
   while(j < n)
    {
        cin >> number;
        int divide = floor((number/5));
       if(number > 38)
        {
          if(number % 5 == 0)
          { 
            cout<<number;
          }
           else 
            {
              for(int i = 1 ; i <= divide+1 ; i++)
              {
               result = i * 5;
              }    
                if((result-number) < 3)   
                {
                    cout<<result<<endl;
                }
                  else 
                  {
                      cout<<number<<endl; 
                  }
              }
         j++;
        }
        else
        {
            cout<<number<<endl;
        j++;
        }

    }


    return 0;
}
Stephen James
@sjames1958gm
Jan 20 2018 14:59
@1532j0004kg Since all your values are int they are automatically trucated (floored)
dinesh
@1532j0004kg
Jan 20 2018 14:59
ok i will try.
Naris R
@KittenHero
Jan 20 2018 15:00
truncation is rounded towards 0
dinesh
@1532j0004kg
Jan 20 2018 15:01

int main() {

    int n ,result = 0, j = 0 , number;
    cin>>n;

   //var minus1 = number - 3 ;
   while(j < n)
    {
        cin >> number;
        float divid = (number/5);
       int divide = int(divid);
       if(number > 38)
        {
          if(number % 5 == 0)
          { 
            cout<<number;
          }
           else 
            {
              for(int i = 1 ; i <= divide+1 ; i++)
              {
               result = i * 5;
              }    
                if((result-number) < 3)   
                {
                    cout<<result<<endl;
                }
                  else 
                  {
                      cout<<number<<endl; 
                  }
              }
         j++;
        }
        else
        {
            cout<<number<<endl;
        j++;
        }

    }


    return 0;
}
Onome Sotu
@onomesotu
Jan 20 2018 15:01
@sjames1958gm can you help with my gulp problem above? :worried:
dinesh
@1532j0004kg
Jan 20 2018 15:01
its not worked ?
Stephen James
@sjames1958gm
Jan 20 2018 15:02
@1532j0004kg What is meant by not worked? What are the inputs and the outputs (both expected outputs and actual outputs).
@onomesotu Sorry, never used gulp
Onome Sotu
@onomesotu
Jan 20 2018 15:03
@sjames1958gm ok thanks
CamperBot
@camperbot
Jan 20 2018 15:03
onomesotu sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8872 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
dinesh
@1532j0004kg
Jan 20 2018 15:03
when i floored the 12.7 it takes as 13 but i need 12 as answer .
Stephen James
@sjames1958gm
Jan 20 2018 15:04
@1532j0004kg should be (int)divid (a cast) not int(divid)
dinesh
@1532j0004kg
Jan 20 2018 15:06
can u please write as code
Stephen James
@sjames1958gm
Jan 20 2018 15:07
int divide = (int)divid;
dinesh
@1532j0004kg
Jan 20 2018 15:07
 float divid = (number/5);
       int divide = (int)divid;
still not shown right o/p.
Nazar
@IsaakNazar
Jan 20 2018 15:09
plz help, count doesnt work
reverse the digits, and add to the original number.
If the resulting number is not a palindrome,
repeat the procedure with the sum until the resulting number is a palindrome.
function palindrome(n) {
  let count = 0;
  var str = n.toString();
  var letters = [];
  var rword = '';
//push str into letters
  for (var i = 0; i < str.length; i++) {
    letters.push(str[i]);
  }
  // reverse  str
  for (var i = 0; i < str.length; i++) {
    rword += letters.pop();
  }
  var n2 = parseInt(rword);
  console.log(n, n2);
//
  if (n !== n2) {
    palindrome(n+n2);
    count++;
  }
  console.log(count);

}
palindrome(87);
dinesh
@1532j0004kg
Jan 20 2018 15:10
working good james
@sjames1958gm thanks
CamperBot
@camperbot
Jan 20 2018 15:11
1532j0004kg sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8873 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 20 2018 15:11
@1532j0004kg :+1:
Onome Sotu
@onomesotu
Jan 20 2018 15:13
Hey guys, I found the cause of my gulp problem.
Stephen James
@sjames1958gm
Jan 20 2018 15:13
@IsaakNazar count will never be anything but 0 or 1 (each call to palindrome has its own count)
@onomesotu :+1:
Nazar
@IsaakNazar
Jan 20 2018 15:16
@sjames1958gm hi stephen, so how to count? there should be count = 4
Stephen James
@sjames1958gm
Jan 20 2018 15:16
@IsaakNazar You are supposed to count the iterations?
Nazar
@IsaakNazar
Jan 20 2018 15:18
I want to count until n === n2
if (n !== n2) {
    palindrome(n+n2);
    count++;
  }
I mean it should stop to count when n === n2
@sjames1958gm
dinesh
@1532j0004kg
Jan 20 2018 15:20
@onomesotu happie!!!
Ion Varsescu
@Nei-V
Jan 20 2018 15:20
@Nei-V
hello, i have 2 questions regarding my site (weather challenge): 1. how to make "canvas" tag responsive. 2. the main sidebar overrides the footer when zooming in, doesn't push it down. The site si weather challenge for freecodecamp. The site works only on WIFI or mobile with GPS for now.
https://codepen.io/Nei_V/pen/YGdJPE
Stephen James
@sjames1958gm
Jan 20 2018 15:21
Is count supposed to be the number of iterations through the function?
Matej Bošnjak
@mbosnjak01
Jan 20 2018 15:22
@Nei-V To make elements responsive via css, try using css media queries ...
Some info is here https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Nazar
@IsaakNazar
Jan 20 2018 15:23

@sjames1958gm
If the input number is already a palindrome, the number of steps is 0.
example, start with 87:

87 + 78 = 165; 165 + 561 = 726; 726 + 627 = 1353; 1353 + 3531 = 4884

4884 is a palindrome and we needed 4 steps to obtain it, so palindrome(87) == 4

Naris R
@KittenHero
Jan 20 2018 15:23
mm if you're using bootstrap, probably don't need to write media queries
Stephen James
@sjames1958gm
Jan 20 2018 15:23
@IsaakNazar So you need the number of steps?
Nazar
@IsaakNazar
Jan 20 2018 15:23
@sjames1958gm yessss
Lee
@LeeConnelly12
Jan 20 2018 15:24
@Nei-V The footer is not being pushed down because it has position absolute
Matej Bošnjak
@mbosnjak01
Jan 20 2018 15:24
yeh bootstrap can do that work as well
Naris R
@KittenHero
Jan 20 2018 15:24
he's already using bootstrap
Stephen James
@sjames1958gm
Jan 20 2018 15:25

@IsaakNazar I would count going back through all the returns

  if (n !== n2) {
    count += palindrome(n+n2);
  }
  console.log(count);
  return count;

As the functions return they count the number of returns

Naris R
@KittenHero
Jan 20 2018 15:25
just put it in a div and add w-100 class to it
i guess
Ion Varsescu
@Nei-V
Jan 20 2018 15:25
thanks @mbosnjak01 , @LeeConnelly12 , @KittenHero . might it be that canvas tag acts differently?
CamperBot
@camperbot
Jan 20 2018 15:25
:cookie: 130 | @kittenhero |http://www.freecodecamp.org/kittenhero
:cookie: 170 | @leeconnelly12 |http://www.freecodecamp.org/leeconnelly12
:cookie: 219 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
nei-v sends brownie points to @mbosnjak01 and @leeconnelly12 and @kittenhero :sparkles: :thumbsup: :sparkles:
Naris R
@KittenHero
Jan 20 2018 15:26
most tags (except maybe tables) shouldn't be different
dinesh
@1532j0004kg
Jan 20 2018 15:26
@Nei-V it shows the wrong statename for coimbatore .
coimbatore is actually inside tamilnadu . :+1:
Nazar
@IsaakNazar
Jan 20 2018 15:28
@sjames1958gm doesnt count, every step equal to 0
Ion Varsescu
@Nei-V
Jan 20 2018 15:29
thanks @1532j0004kg . if you're conneted through wifi or with GPS, the location is from the google location api. maybe in some cases it doesn't work well
CamperBot
@camperbot
Jan 20 2018 15:29
nei-v sends brownie points to @1532j0004kg :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @1532j0004kg |http://www.freecodecamp.org/1532j0004kg
Stephen James
@sjames1958gm
Jan 20 2018 15:30
@IsaakNazar maybe
count = 1 + palindrome(n+n2);
so it adds one when it calls itself,
Nazar
@IsaakNazar
Jan 20 2018 15:32
@sjames1958gm oh yeah, you rock Stephen, thanx, God bless you :)
CamperBot
@camperbot
Jan 20 2018 15:32
isaaknazar sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 8874 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Jan 20 2018 15:32
@IsaakNazar Do you understand how it is working?
Nazar
@IsaakNazar
Jan 20 2018 15:34
@sjames1958gm yes, count will add 1 until the condition true?
Matej Bošnjak
@mbosnjak01
Jan 20 2018 15:54
Could anyone give me advice on this code?
https://codepen.io/fcccder/pen/MrLpeg
I need to change my current code to call functions like this: Lib.verticalAlign("#txt").middle();
and i'm stuck on that part xD
christopher clarke
@chrisdclarke
Jan 20 2018 16:03
does anyone know if you have to use a proxy for API calls if your using CODEPEN?
Naris R
@KittenHero
Jan 20 2018 16:04
not necessary, but your api should be in https
christopher clarke
@chrisdclarke
Jan 20 2018 16:11
ok thanks @KittenHero
CamperBot
@camperbot
Jan 20 2018 16:11
chrisdclarke sends brownie points to @kittenhero :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @kittenhero |http://www.freecodecamp.org/kittenhero
christopher clarke
@chrisdclarke
Jan 20 2018 16:14
i cant seem to be able to get this to work....
$.get("https://labs.bible.org/api/?passage=random", function.data(){
console.log("test");
console.log(data);
})
do i have to put it inside a function?
Naris R
@KittenHero
Jan 20 2018 16:16
I think it should be
function (data) { ... }
Aditya
@ezioda004
Jan 20 2018 16:17
@chrisdclarke data is parameter and is being returned as an object from the API so it should be inside function like this function(data)
Ian
@toianw
Jan 20 2018 16:21
@mbosnjak01 Like this?
Lib =  {
    verticalAlign: function(selector) {
    return {
      middle: function() {
        $(selector).doSomething();
      }  
    }
    }
};
Lee
@LeeConnelly12
Jan 20 2018 16:23
I've never seen a java script function that vertically aligns text before.
christopher clarke
@chrisdclarke
Jan 20 2018 16:24
@ezioda004 thanks.. so function(data){$.get("https://labs.bible.org/api/?passage=random")
CamperBot
@camperbot
Jan 20 2018 16:24
chrisdclarke sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 402 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Jan 20 2018 16:29

@chrisdclarke No like this

$.get("https://labs.bible.org/api/?passage=random", function(data){
      console.log("test");
      console.log(data);
      });

function(data) is a callback function for this async request

This might help you, see examples.
Zak
@Kastiivanos
Jan 20 2018 17:12
Hey guys, can somebody please take a look at this and explain to me why I’m getting ‘undefined’ as a result? https://codepen.io/Kastii/pen/YYaGXN?editors=0002 I know this is because getJSON is asynchronous but how can I work around this? Thanks in advance.
1rjun
@1rjun
Jan 20 2018 17:16
because you cant use them globelly
you have to use these variables inside the callback
function
Naris R
@KittenHero
Jan 20 2018 17:18
yea, you're printing the variables before the fetch request actually finishes
1rjun
@1rjun
Jan 20 2018 17:18
bro its working
just try to use these variables inside getjson jquery functin
Naris R
@KittenHero
Jan 20 2018 17:19
:+1:
review my weather app friends
and tell me something ,so that i can improve my code
Naris R
@KittenHero
Jan 20 2018 17:25
the code is fine, the design is not great
1rjun
@1rjun
Jan 20 2018 17:26
so i need to improve the designing
Naris R
@KittenHero
Jan 20 2018 17:26
Think so
hensn5250
@hensn5250
Jan 20 2018 17:27
@Kastiivanos its due to the AJAX call
put the console.log statement in the $.getJSON() and the data appears
Brandon M.
@brandon6190
Jan 20 2018 17:45
hello world! so I just got my first order on fiverr(my very first client ever) and he wants me to take out the whitespaces in between the images. But I am having trouble editing his site. What does he need to send me so i can make the changes?
Andrew Knox
@ndrwknx
Jan 20 2018 18:19
quoteButton.addEventListener('click',function getQuote() {
  fetch(url, {cache: "no-store"})
    .then((response) => {
      return response.json();
    })
    .then((response) => {
      console.log(response);
    });
});
I tried to format that
Can anyone tell me why this is still caching?
Danish Gujjar
@Dani-0-7
Jan 20 2018 18:26
link to javascript chat?
Danish Gujjar
@Dani-0-7
Jan 20 2018 18:27
@SweetCodingInc thanks
CamperBot
@camperbot
Jan 20 2018 18:27
dani-0-7 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 201 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Ion Varsescu
@Nei-V
Jan 20 2018 19:42
Hello, what do you think about my weather challange site?
pen
Aryan J
@AryanJ-NYC
Jan 20 2018 19:57
Hey @Nei-V. Nicely done. You met all the specs. It'd be nice if the user can avoid giving you his location AND typing in a big city near him/her. Perhaps you can use the API to find that city and search for an appropriate image?
Also, challenge yourself and try to make this website look good on mobile phones or tablets.
Joy
@Yorokobi05
Jan 20 2018 20:03

hi there. I'm here again. I just cannot understand .filter() in JS. I tried pasting this code, and it still didn't work even if it is the given example in the site. I'm using Microsoft Edge.

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

Aryan J
@AryanJ-NYC
Jan 20 2018 20:05
What part don't you understand, @Yorokobi05? I get the expected output when I put into my Chrome console.
Joy
@Yorokobi05
Jan 20 2018 20:06
nothing appears in the output (freecodecamp site). Do I really have to use other browser for this?
Aryan J
@AryanJ-NYC
Jan 20 2018 20:06
Can you link the exercise?
Joy
@Yorokobi05
Jan 20 2018 20:06
it says that it is only for ES6
Aryan J
@AryanJ-NYC
Jan 20 2018 20:07
Ah, here we're writing a function that should return the filtered array, not print it. From the looks of your code, you are printing it. Try returning result instead of console.log
Joy
@Yorokobi05
Jan 20 2018 20:09

Like this?

var words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

return result;

Aryan J
@AryanJ-NYC
Jan 20 2018 20:10
That's how we return the result, yes. However, that specific code still does not answer the question.
Joy
@Yorokobi05
Jan 20 2018 20:10
By the way, I'm copying the whole example first in the exercise. (trying to understand it first because when I tried .filter() it isn't working)
It's outside the function. (the "return result")
Aryan J
@AryanJ-NYC
Jan 20 2018 20:12

Where are you copying the example from? OK, so if you'd like to understand filter, let me try and explain:

Basically, we have an array (in this case, words). Now, we run the filter function. This function, as you see, returns true or false. If the predicate (function that returns a boolean) is true, we keep the element. If it's false, we throw it away. We save all the elements that returned true to result.

Aryan J
@AryanJ-NYC
Jan 20 2018 20:15

Keep in mind the filter function (word => word.length > 6). Now, let's go through words and see what the filter function would return for each word:

  1. spray: Is its length more than 6? false
  2. limit: Is its length more than 6? false
    ...
  3. destruction: Is its length more than 6? true
  4. present: Is its length more than 6? false

Now, ALL the elements that returned true will be saved to result.

Joy
@Yorokobi05
Jan 20 2018 20:15
where did "word" came from? shouldn't it be "words"? and why does it have "const" (constant?)
Aryan J
@AryanJ-NYC
Jan 20 2018 20:17

const is just the ES6 way of declaring a var that never changes.

Good question about word. OK, so the array is called words, right? Inside the .filter() function, we need to iterate (go through each) element of the array. We need to SAVE each element to a variable. This variable is called word. We can call it whatever we want though. But it's common practice to make it a singular version of whatever the array was named.

So in:
  1. spray ... spray is saved to the temp variable word.
  2. Then in limit... limit is saved to the temp variable word
Joy
@Yorokobi05
Jan 20 2018 20:21
Thanks. One more question. Why does it have "=>"? and do I really have to use Mozilla for this exercise?
Aryan J
@AryanJ-NYC
Jan 20 2018 20:23

The => is the fat arrow in a fat arrow function. Basically, it's a new ES6 standard for writing functions. You can write it in the old way like:

function(word) {
    return word.length > 6;
}

You don't have to use Mozilla.

Henry
@GitHub-Henry
Jan 20 2018 20:24
=> is an arrow function
Aryan J
@AryanJ-NYC
Jan 20 2018 20:24
I would create a list of things to learn later. Add ES6 arrow functions to that list.
Joy
@Yorokobi05
Jan 20 2018 20:33
thanks @GitHub-Henry and thanks @AryanJ-NYC . I understand (I think? lol) the example but I just still cannot get any output (using the example) in the exercise. I'll try again.
CamperBot
@camperbot
Jan 20 2018 20:33
yorokobi05 sends brownie points to @github-henry and @aryanj-nyc :sparkles: :thumbsup: :sparkles:
:cookie: 532 | @github-henry |http://www.freecodecamp.org/github-henry
:cookie: 465 | @aryanj-nyc |http://www.freecodecamp.org/aryanj-nyc
Kevin Galang
@kgalang
Jan 20 2018 20:37
I'm working on the React section of the beta site. Can someone who is familiar with react double check my code, please? I'm thinking it is a bug because I believe my code should be working. But I just want to double check with someone before I report a bug that is really my mistake haha

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visibility: false 
    };
    // change code below this line
    this.toggleVisibility = this.toggleVisibility.bind(this);
    // change code above this line
  }
  // change code below this line
  toggleVisibility() {
    if (this.state.visibility) {
      this.setState({
        visibility: false;
      });
    } else if (!this.state.visibility) { 
      this.setState({
        visibility: true;
      });
    }
  }
  // change code above this line
  render() {
    if (this.state.visibility) {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
          <h1>Now you see me!</h1>
        </div>
      );
    } else {
      return (
        <div>
          <button onClick={this.toggleVisibility}>Click Me</button>
        </div>
      );
    }
  }
};
Aryan J
@AryanJ-NYC
Jan 20 2018 20:39
What's the error?
Kevin Galang
@kgalang
Jan 20 2018 20:41
On the bottom right of my window it just has a popup that says "Something went wrong, please try again later"
Aryan J
@AryanJ-NYC
Jan 20 2018 20:41
Ah. Copy the code. Refresh. Try again?
By the way, toggleVisibility can be shortened:
toggleVisibility() {
  this.setState({ visibility: !this.state.visibility });
}
Kevin Galang
@kgalang
Jan 20 2018 20:43
@AryanJ-NYC Thank you!
CamperBot
@camperbot
Jan 20 2018 20:43
kgalang sends brownie points to @aryanj-nyc :sparkles: :thumbsup: :sparkles:
:cookie: 466 | @aryanj-nyc |http://www.freecodecamp.org/aryanj-nyc
Kevin Galang
@kgalang
Jan 20 2018 20:43
Your solution ended up working
but is there something logically incorrect with my longer solution?
Jan Shah
@JanShah
Jan 20 2018 20:44
you've added code where you shouldn't have @kgalang - mistake your code is just long, but should work
Aryan J
@AryanJ-NYC
Jan 20 2018 20:44

Also, your render() function can be:

  return (
    <div>
      <button ...> ... </button>
      {this.state.visibility && <h1>Now you see me!</h1>}
    </div>
);

Check https://reactjs.org/docs/conditional-rendering.html for more info.

@kgalang There was nothing wrong with your code in a technical sense.
Also, sorry about the render explanation. Just noticed that wasn't even your code.
Actually!
@kgalang The semi-colon you have in your setState object is no good.
{
  a: 'a string',
  b: 1,
}
Notice we don't use semi-colons. Common mistake. I still do it all the time.
Kevin Galang
@kgalang
Jan 20 2018 20:48
@AryanJ-NYC Good eye! haha thanks again
CamperBot
@camperbot
Jan 20 2018 20:48
kgalang sends brownie points to @aryanj-nyc :sparkles: :thumbsup: :sparkles:
api offline
Kevin Galang
@kgalang
Jan 20 2018 20:48
I'm glad I asked before reporting. I knew I was off!
Aryan J
@AryanJ-NYC
Jan 20 2018 20:50
No problem. I didn't spot it at first.
LKian
@LKian
Jan 20 2018 21:00
does an event listener have to be added to an element if that element is added in later?
for example https://codepen.io/kahwasaurus/pen/qpQRYr The first book that's already in the html deletes when I click on the trash can icon, but books added w/the input box don't delete with the same trash icon
Brandon M.
@brandon6190
Jan 20 2018 21:04
I need Help!!!
anybody here uses fiverr?
Aryan J
@AryanJ-NYC
Jan 20 2018 21:07
@kahwasaurus A good way to achieve what you want to achieve is to add an event listener in your createNewBook function.
something like newBook.addEventListener.
@brandon6190 I have. What's up?
Stephen James
@sjames1958gm
Jan 20 2018 21:13
@kahwasaurus event listeners have to be added after the element is added into the DOM
Emil
@aguyinmontreal
Jan 20 2018 21:15
I have a form with a single field which is multi-line. If I try to submit that form with multiple new lines in a row \r\n\r\n\r\n\r\n\r\n\r\n my webpage becomes unresponsive. What can it be?
Kent Saeteurn
@sansae
Jan 20 2018 21:26

@X140hu4 >/\d+.\d+/

@Otto-AA >/[\d.]+/g

yup, both your regexes work; however, for my specific problem, i'm trying to filter out the numbers and decimals from a string like this:

var str = "1.2+3.4-5.6"

the result, using either of your regexes, looks like this:

[ '', '+', '-', '' ]

it filters out the numbers and decimals, leaving me with the symbols that I want, but notice how there are also two empty strings. I can work with the result, however, ideally i'd like to leave out the empty strings; i'm not sure where that came from

thanks @X140hu4
thanks @Otto-AA

CamperBot
@camperbot
Jan 20 2018 21:26
sansae sends brownie points to @x140hu4 and @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @otto-aa |http://www.freecodecamp.org/otto-aa
:cookie: 317 | @x140hu4 |http://www.freecodecamp.org/x140hu4
Alexander Jarman
@HeinousTugboat
Jan 20 2018 21:39
@sansae What symbols are you looking to extract?
It'd probably be easier to write a regex to pull the symbols out.
@sansae str.match(/[^\d.]+/g) works to get just the symbols out of the string you gave, by the way.
LKian
@LKian
Jan 20 2018 21:46
@AryanJ-NYC thanks
CamperBot
@camperbot
Jan 20 2018 21:46
kahwasaurus sends brownie points to @aryanj-nyc :sparkles: :thumbsup: :sparkles:
:cookie: 467 | @aryanj-nyc |http://www.freecodecamp.org/aryanj-nyc
LKian
@LKian
Jan 20 2018 21:47
yep @sjames1958gm i'm learning so much every time i try to add a new feature or change something from the tutorial
Alexander Jarman
@HeinousTugboat
Jan 20 2018 21:50
@sjames1958gm I'm actually kind of curious what you mean by that. You can add an event listener to an HTMLElement before it's been attached anywhere.
At least, this code works perfectly fine:
{
  let thing = document.createElement('div');
  thing.addEventListener('click', () => console.log('thing clicked!'));
  thing.style.width = '200px';
  thing.style.height = '200px';
  thing.style.position = 'fixed';
  thing.style.border = '1px solid #F0F';
  thing.style.background = 'white';

  document.querySelector('body').appendChild(thing);
}
Kevin Galang
@kgalang
Jan 20 2018 21:54
class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }
  // change code below this line

  reset() {
    this.setState({ count: 0 });
  }

  increment() {
    this.setState({ count: (this.state.count + 1) })
  }

  decrement() {
    this.setState({ count: this.state.count - 1 })
  }
  // change code above this line
  render() {
    return (
      <div>
        <button className='inc' onClick={this.increment}>Increment!</button>
        <button className='dec' onClick={this.decrement}>Decrement!</button>
        <button className='reset' onClick={this.reset}>Reset</button>
        <h1>Current Count: {this.state.count}</h1>
      </div>
    );
  }
};

For those of you familiar with react: Is the above code able to work without adding the following code into the constructor?

this.reset = this.reset.bind(this);
this.increment = this.increment.bind(this);
this.decrement = this.decrement.bind(this);

I'm looking to verify this error so I can help contribute to freecodecamp on github

I think we need to bind this to the methods in the constructor statement but I'm not 100% sure if it's necessary
Chi
@chiyc
Jan 20 2018 22:09
Yep, you need to
When your handler methods increment() and decrement() are invoked by your <button> elements, this will no longer refer to your Counter class
@kgalang ^
Chi
@chiyc
Jan 20 2018 22:17
As a rule of thumb, you generally need to bind a method if it's being passed to be called somewhere other than where it was defined
Dimitris Nik.
@dimitrissnk
Jan 20 2018 22:27
Hello there, how the heck could I place the last paragraph in the white space, under the background image? https://codepen.io/dimitris51/full/zpeKBq/
Kent Saeteurn
@sansae
Jan 20 2018 22:36

@HeinousTugboat

@sansae str.match(/[^\d.]+/g) works to get just the symbols out of the string you gave, by the way.

thanks for that, alexander. that was exactly the regex i was looking for. i forgot about the caret symbol

last night, i couldn't figure out the correct regex to give me a clean filtered result, so i just ended writing a long function with what i had:

var getSymbols = function(string, regex) {
  var strArr = string.split("");
  var returnArray = [];
  for (var i = 0; i < strArr.length; i++) {
    if (strArr[i].match(regex)) {
      returnArray.push(strArr[i]);
    }
  }
  return returnArray;
};

the above worked perfectly, but... yeah. thank you!

CamperBot
@camperbot
Jan 20 2018 22:36
:cookie: 325 | @heinoustugboat |http://www.freecodecamp.org/heinoustugboat
sansae sends brownie points to @heinoustugboat :sparkles: :thumbsup: :sparkles:
Kent Saeteurn
@sansae
Jan 20 2018 22:42

I just finished the calculator app. Any feedback would be great. I'd especially love some feedback about how to refactor my code, especially the javascript part. I have a tendency to do things the long way, which usually results in tons of unnecessary code. I'm always looking for ways to improve! Thanks.

https://codepen.io/kesa/full/PExbGz/

Matej Bošnjak
@mbosnjak01
Jan 20 2018 23:15
@sansae Try to put everything in functions, so you don't have any code outside a function.
except maybe some variables
Kent Saeteurn
@sansae
Jan 20 2018 23:29
@mbosnjak01 I'll look into it. Thank you for taking the time. Some variables are being used in multiple functions, so I definitely need those to be global. I admit that I get lazy sometimes with using global vs local. I think cleaning that up would make my code cleaner some
CamperBot
@camperbot
Jan 20 2018 23:29
sansae sends brownie points to @mbosnjak01 :sparkles: :thumbsup: :sparkles:
:cookie: 220 | @mbosnjak01 |http://www.freecodecamp.org/mbosnjak01
Matej Bošnjak
@mbosnjak01
Jan 20 2018 23:38
@sansae I can't tell you more, unfortunately, cause I didn't work with JQuery in the way of making calculator ... I used it for other stuff. While working with plain JS I mostly have few "main" functions and several functions that I callback inside main funcs. where I pass arguments from main func to minor one, or let's say a test which does certain stuff ... for example
function ABCD(arg1, arg2, callback) { //do something with arg1 and arg2 var result = do something with arg1 and arg2; callback(result); } ABCD(arg1, arg2, function(result){ method1(result); method2(result); })
I hope I gave you some idea :)