These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Aug 2017
iso
@iso1048
Aug 12 2017 00:03
@ldocherty1 you can change the button type to 'button' (rather than having type='submit')
Gaurav
@gauravmagan
Aug 12 2017 00:23
@SkyC0der
juni
@junipberry
Aug 12 2017 00:23
hey sky
Gaurav
@gauravmagan
Aug 12 2017 00:23
Screen Shot 2017-08-11 at 8.22.55 PM
Screen Shot 2017-08-11 at 8.22.52 PM.png
whats the effect did they use
like when we click on the element the icons on the right are selected too
Gulsvi
@gulsvi
Aug 12 2017 00:27
@gauravmagan I'm not sure what effect they used, but if you right-click the elements and select "inspect", you will be able to study the code more closely.
Hello @junipberry
glitz20
@glitz20
Aug 12 2017 00:43
hey guys why my media query is not working properly on second image? https://codepen.io/sabin20/pen/EvPgMd
Long Nguyen
@longnt80
Aug 12 2017 01:14
@sabin20 what isn't working?
Gulsvi
@gulsvi
Aug 12 2017 01:18
@longnt80 I think @sabin20 already got help. They posted their question in all the rooms at the same time
Maybe on the forums too
Long Nguyen
@longnt80
Aug 12 2017 01:19
@SkyC0der oh ok
yeah, I noticed
glitz20
@glitz20
Aug 12 2017 01:21
@longnt80 the text caption
Long Nguyen
@longnt80
Aug 12 2017 01:22
@sabin20 the second image is taller than the other two
glitz20
@glitz20
Aug 12 2017 01:23
@longnt80 even I tried different margin, it doesnot seem to work
Long Nguyen
@longnt80
Aug 12 2017 01:23
@sabin20 best way is to resize all images to the same size
or use images as css background with background-size: cover
glitz20
@glitz20
Aug 12 2017 01:24
@longnt80 thanks
CamperBot
@camperbot
Aug 12 2017 01:24
sabin20 sends brownie points to @longnt80 :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @longnt80 |http://www.freecodecamp.com/longnt80
Long Nguyen
@longnt80
Aug 12 2017 01:24
@sabin20 np
aRtoo
@artoodeeto
Aug 12 2017 02:29
hello masters!! need help. i have a problem on algorithm entitled pig latin.
how can i stop the loop when it hit another consonant?? i tried return and i cant make it work.heres my code:
function translatePigLatin(str) {
  var vowelsArr = 'aeiou'; //way
  //var constArr = 'BCDFGHJKLMNPQRSTVWXYZ'.toLowerCase(); //ay
  var uno = [];
  var dos = [];
  str = str.split('');

  if (vowelsArr.indexOf(str[0]) === -1) {
    for (var i = 0; i < str.length; i++) {
      if (vowelsArr.indexOf(str[i]) === -1) {
        dos.push(str[i]);
      } else if (vowelsArr.indexOf(str[i]) > -1) {
        uno.push(str[i]);
        uno = uno.join('');
        dos = dos.join('');
        return uno + dos;
      }
    }
  } else {
    return str.join('') + 'way';
  }
}

//translatePigLatin("consonant");
//translatePigLatin("california"); //should return "aliforniacay".
//translatePigLatin("paragraphs"); //should return "aragraphspay".
translatePigLatin('glove'); //should return "oveglay".
//translatePigLatin("algorithm"); //should return "algorithmway".
//translatePigLatin("eight"); //should return "eightway".
Ken Haduch
@khaduch
Aug 12 2017 02:44
@artoodeeto - you're missing the last part of the word - once you find a vowel you are formulating the return, but you might (and probably do) have the remainder of the word to grab.
you could probably use some additional function like slice or splice or even substring to get the remainder of the word after the index value that you are currently at.
Ken Haduch
@khaduch
Aug 12 2017 02:53
and you aren't appending the 'ay' for that case.
Bryce
@BGarbs
Aug 12 2017 03:01
anyone able to help with a bootstrap 4 issue?
Bill
@kirah1314
Aug 12 2017 03:03
@BGarbs we can try, ask away :thumbsup:
Bryce
@BGarbs
Aug 12 2017 03:07
how am I able to vertically and horizontally center a div on my page with bootstrap 4 classes?
@kirah1314 I'm sure it's been asked 1M times but alas, I'm the +1
Sonya Chan
@cysonya
Aug 12 2017 03:10
@BGarbs Do you have a codepen? Want to see what your html structure looks like
Bryce
@BGarbs
Aug 12 2017 03:10
@cysonya sure thing....
@cysonya would also appreciate the help getting the "author" portion aligned "end" or right
Bill
@kirah1314
Aug 12 2017 03:12
@BGarbs sorry, I don't know that one but I found it on Stackoverflow if you want to see it
Bryce
@BGarbs
Aug 12 2017 03:13
@kirah1314 I saw one answer on there as well. But maybe you found a different one. Feel free to share link. I'm grateful
iso
@iso1048
Aug 12 2017 03:14
@BGarbs did you want to use bootstrap to align the 'author' to the right? Otherwise you could use float: right;
Bryce
@BGarbs
Aug 12 2017 03:15

@gothamknight truthfully, I'd like to know in you guy's opinion what's the best way to accomplish center/center positioning for the "quote generator" div and getting that "-Author" to the right?

I know there are always multiple ways to do something but I'm trying to find the best way

Bill
@kirah1314
Aug 12 2017 03:18
@BGarbs I normally use flexbox to vertically/horizontally center something
which takes about 10 lines of CSS
Bryce
@BGarbs
Aug 12 2017 03:19
@kirah1314 right...that's what I'm trying to accomplish. How ought I do that? set the whole body to display:flex then code everything accordinly. Or use class="d-flex..." in each element as I've been doing?
Bill
@kirah1314
Aug 12 2017 03:20
@BGarbs I have an example if you want to see it https://codepen.io/kirah1314/pen/oBdPpd
Bryce
@BGarbs
Aug 12 2017 03:21
Actually, I might have an idea. one minute
iso
@iso1048
Aug 12 2017 03:21
@BGarbs my opinion isn't really valid - I'm still a beginner. I haven't used bootstrap in a while (still need to learn flexbox) so tend to use margin: auto and float: right.
Bill
@kirah1314
Aug 12 2017 03:22
@gothamknight this was really helpful for me in learning flexbox https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Bryce
@BGarbs
Aug 12 2017 03:22
@gothamknight all good. Here's a great tool to learn the functionality of flexbox
@kirah1314 lol thinking along the same lines! nice
Bill
@kirah1314
Aug 12 2017 03:25
@BGarbs nice! I would avoid making the whole body flex though
Bryce
@BGarbs
Aug 12 2017 03:26
@kirah1314 yeah. ok
I may have to try re-writing from scratch and make sure each element is lining up as I want it to as I code top to bottom
@kirah1314 I feel like i've been tweaking for so long it may be too messy
@gothamknight you leave us to go play flexboxfroggy?
lol
Alright, well thanks for the help anyway guys! I gotta hit the sack for tonight
Bill
@kirah1314
Aug 12 2017 03:27
@BGarbs haha tinkering is a great way to learn :)
Bryce
@BGarbs
Aug 12 2017 03:27
@kirah1314 you bet
iso
@iso1048
Aug 12 2017 03:30
@BGarbs @kirah1314 thanks for the resources guys. Nah bro, I'm going over a lecture haha
CamperBot
@camperbot
Aug 12 2017 03:30
gothamknight sends brownie points to @bgarbs and @kirah1314 :sparkles: :thumbsup: :sparkles:
:cookie: 167 | @bgarbs |http://www.freecodecamp.com/bgarbs
:cookie: 997 | @kirah1314 |http://www.freecodecamp.com/kirah1314
Gulsvi
@gulsvi
Aug 12 2017 03:52
@BGarbs Give your body a height, like 100vh, put your card in a column, then put the column in a row, and put all of that in a container. Give your container the classes:
h-100 d-flex justify-content-center align-items-center
You could also apply those classes to the row (without d-flex) if you give the container a height instead and it will be vertically + horizontally centered based on the container height
lfvpCO
@lfvpCO
Aug 12 2017 03:58
hello guys
one question
a big one
Bill
@kirah1314
Aug 12 2017 04:00
@lfvpCO fire away! :)
lfvpCO
@lfvpCO
Aug 12 2017 04:02
I am new coding.. and I want to know how often coders copy and paste codes like css transitions and js codes..
?
Bill
@kirah1314
Aug 12 2017 04:02
that depends, copy and paste codes from and to where?
lfvpCO
@lfvpCO
Aug 12 2017 04:02
I mean, if I get a job in a company. is the a good practice ?
well, im checking for example a css maker.. this web produce code for animation and things like that
Bill
@kirah1314
Aug 12 2017 04:04
it's always good to reuse and/or modularize codes if that's what you're asking but sometimes we have to copy/paste
lfvpCO
@lfvpCO
Aug 12 2017 04:04
I starting with project and I add these css code and my web looks great..
cool
coz I think in JS is different
Bill
@kirah1314
Aug 12 2017 04:09
right, so it really depends on the context. Even if it's JS, we may still copy/paste stuff like import React from 'react'
Angel J Piscola
@Redmega
Aug 12 2017 04:10
Or even copy pasting variable names to use elsewhere so you can be sure there's no typos
Bill
@kirah1314
Aug 12 2017 04:10
but functionality can be reused by using JS functions
Angel J Piscola
@Redmega
Aug 12 2017 04:11
I think the spirit of the question was to ask if copy-pasting solutions from stack overflow, or generated css from one of the many "style generator" sites out there, is acceptable in a workplace environment
I would say it is but don't try to pass it off as your own @lfvpCO
lfvpCO
@lfvpCO
Aug 12 2017 04:14
i mean.. this is while Im studying these codes properly.. now I mixing html css ans js with some animation and it is cool.. just in 2 week ans think i have got more progress checking these example and testing them
but I wanna understand the codes..
Lallo Vigil
@lalov1
Aug 12 2017 05:04
What the best way to compare two arrays?
I'm pushing to two different arrays for buttons pushed and random buttons. Is there a good way to make sure they are the same? https://codepen.io/lalov1/full/MvgvxY/
Gulsvi
@gulsvi
Aug 12 2017 05:08
@lalov1 One way is to sort the two arrays and then use .toString() on them to compare the strings. You might also want to look back at your solution to the Diff Two Arrays challenge.
Tai Jones
@taiJones00
Aug 12 2017 05:09
Wouldn't it be possible to how two completely different looking sites with just two media queries and completely different styles applied in CSS
iso
@iso1048
Aug 12 2017 05:10
@SkyC0der if a variable - which is never going to be modified - is only ever going to be used by one function, it is better to declare that variable inside the function that uses it right?
Gulsvi
@gulsvi
Aug 12 2017 05:11
@gothamknight Yeah, that's a good practice as far as I know
iso
@iso1048
Aug 12 2017 05:11
@SkyC0der cool
Gulsvi
@gulsvi
Aug 12 2017 05:11
@taiJones00 yeah, you can do a lot with CSS - no HTML needed :)
Tai Jones
@taiJones00
Aug 12 2017 05:12
awesome thanks @SkyC0der
CamperBot
@camperbot
Aug 12 2017 05:12
taijones00 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2373 | @skyc0der |http://www.freecodecamp.com/skyc0der
Gulsvi
@gulsvi
Aug 12 2017 05:14
You're welcome :sparkles:
Tai Jones
@taiJones00
Aug 12 2017 05:14
https://codepen.io/taiJones00/pen/ZyEajO So I could keep this design for desktop and change to a more mobile friendly one of mobile? I like the design and don't want to trash it @SkyC0der
Gulsvi
@gulsvi
Aug 12 2017 05:16
@taiJones00 Yes, you could do that, but that isn't done very often to my knowledge. Bootstrap makes it so you don't need to write two different versions of your CSS with media queries.
That's what all the xs, sm, md, etc... grid sizes are for
Tai Jones
@taiJones00
Aug 12 2017 05:16
I don't know it just looks so scrunched up on mobile
Gulsvi
@gulsvi
Aug 12 2017 05:18
yeah, there shouldn't be padding/margins on the sides on mobile screen size
it would look a little nicer if those sections touched the edge of the screen
You could remove the offsets for xs and just use col-xs-12
Tai Jones
@taiJones00
Aug 12 2017 05:19
whoa what
okay stay online we've got to try this
so should i do col-xs-12 or col-sm-12
Gulsvi
@gulsvi
Aug 12 2017 05:21
Try modifying xs first and see if that's what you like
For example, that first one would be:
<div class = "col-xs-12 col-sm-10 col-md-10 col-sm-offset-1 col-md-offset-1 blue about">
Tai Jones
@taiJones00
Aug 12 2017 05:22
oh
my
god
this doesn't look terrible
Gulsvi
@gulsvi
Aug 12 2017 05:22
I think it looks a little nicer, yeah
Tai Jones
@taiJones00
Aug 12 2017 05:23
okay so do I need both sm and xs
because I just put all three options becase I didn't know
Gulsvi
@gulsvi
Aug 12 2017 05:23
If you want the blue sections touching the edge of the screens on tablet sized devices, do it for sm too
otherwise, just xs
Tai Jones
@taiJones00
Aug 12 2017 05:24
so like a media query? Like col-12 until otherwise which is this case is when I hit medium which is col-10?
Gulsvi
@gulsvi
Aug 12 2017 05:25
That HTML I put above means 100% wide on mobile screens and 83% wide everywhere else
col-sm-10 = 83% wide (10 columns out of 12 maximum), 10/12 = .83
Tai Jones
@taiJones00
Aug 12 2017 05:26
i'll see what looks best
Gulsvi
@gulsvi
Aug 12 2017 05:26
same with col-md-10
Tai Jones
@taiJones00
Aug 12 2017 05:26
sky's the best
Gulsvi
@gulsvi
Aug 12 2017 05:26
Just resize your browser and see what you like
It's a great looking portfolio, nice and clean layout - good work so far
Tai Jones
@taiJones00
Aug 12 2017 05:27
thank you very much BUT THERE IS ONE PROBLEM
the cards are all full width on mobile
BUT
the navbar isn't
you see there's no col-?? with that one so I don't know why it's like that
Gulsvi
@gulsvi
Aug 12 2017 05:28
I'm not sure I understand
Tai Jones
@taiJones00
Aug 12 2017 05:29
the navbar is the only one I can't get to go the full with of the page
Jim Tryon
@jimtryon
Aug 12 2017 05:29
@SkyC0der I’m going to work to get you a badge for all of the help you provide in this channel.
Gulsvi
@gulsvi
Aug 12 2017 05:29
@jimtryon A badge? :)
Jim Tryon
@jimtryon
Aug 12 2017 05:29
Yes, a badge .:)
Gulsvi
@gulsvi
Aug 12 2017 05:30
I do need a better profile picture
<----- this is getting old for me lol
Tai Jones
@taiJones00
Aug 12 2017 05:30
the pencil looks clever
Jim Tryon
@jimtryon
Aug 12 2017 05:31
How long have you had that profile picture?
Gulsvi
@gulsvi
Aug 12 2017 05:31
Lots of people think it's a pencil :) it's actually a frosty mug of lemonade :) [ ]>
Tai Jones
@taiJones00
Aug 12 2017 05:31
ohhhh
Jim Tryon
@jimtryon
Aug 12 2017 05:31
I was thinking it’s a frosty mug of beer but same thing
Gulsvi
@gulsvi
Aug 12 2017 05:31
It is beer too - depends on the time of day
Maybe had it for a month or two now
Jim Tryon
@jimtryon
Aug 12 2017 05:31
Better question, how long have you been helping out on FCC?
Gulsvi
@gulsvi
Aug 12 2017 05:32
Maybe really active for around 4 months?
I wrote my first line of code back in late January when my friends told me about this place.
Jim Tryon
@jimtryon
Aug 12 2017 05:32
It seems like you have been around longer
Of course, I haven’t been around that long, though I started FCC about a year or two ago when I heard it
iso
@iso1048
Aug 12 2017 05:33
@SkyC0der what are you currently learning/going to learn next?
Jim Tryon
@jimtryon
Aug 12 2017 05:33
and are you already employed @SkyC0der?
Gulsvi
@gulsvi
Aug 12 2017 05:33
I'm going to have to take a break for school I think @gothamknight and then reassess
@jimtryon No, two more years of school left.
Jim Tryon
@jimtryon
Aug 12 2017 05:34
You are on the school track.
Is that for a four year degree or just two?
Gulsvi
@gulsvi
Aug 12 2017 05:34
Then we'll see where the code takes me, it has been fun, so maybe I'll try a computer science course
Four year degree
Jim Tryon
@jimtryon
Aug 12 2017 05:34
Nice, have you had the opportunity to intern somewhere?
Gulsvi
@gulsvi
Aug 12 2017 05:35
No, I study linguistics at school. Not many intern opportunities
Probably going to end up as a barrista if I don't get better at coding lol
Jim Tryon
@jimtryon
Aug 12 2017 05:36
End up as a developer at a starbucks :)
Gulsvi
@gulsvi
Aug 12 2017 05:36
haha, that could be cool
I hear they have a big data science department
prakash chandra yadav
@prakashyadav008
Aug 12 2017 05:36
hey a little help here
how do i get thfont to be a little brighter ..?
iso
@iso1048
Aug 12 2017 05:38
@SkyC0der true. How many papers do you take each semester in your 4 year degree? Are you doing a minor?
Gulsvi
@gulsvi
Aug 12 2017 05:38
@prakashyadav008 Instead of opacity - try using rgba for your background color so it doesn't affect the text.
@gothamknight Almost have my minor in physics, but that would take a 5th year.
So, no minor
iso
@iso1048
Aug 12 2017 05:39
@SkyC0der so how many papers each semester? Is linguistics by itself a 4 year degree?
Gulsvi
@gulsvi
Aug 12 2017 05:40
Papers = essays to write? I'll have one large paper to write before I graduate in my last year
prakash chandra yadav
@prakashyadav008
Aug 12 2017 05:40
i need it to be a little transparent @SkyC0der
Gulsvi
@gulsvi
Aug 12 2017 05:40
@prakashyadav008 That's what rgba does, it make the color transparent.
For example:
.section2 {
  line-height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  color: #eee;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 40%;
}
you could use it for the font-color too
different transparencies for background and font
iso
@iso1048
Aug 12 2017 05:42
@SkyC0der I guess the terminology is different. At the uni i go to, it is normal to take 3 (final year) or 4 (other years) papers each semester, for your standard degree. So this semester I am taking 3 papers - 2 biochem papers and a genetics paper.....
Gulsvi
@gulsvi
Aug 12 2017 05:43
@gothamknight What is a paper? Like a research paper?
iso
@iso1048
Aug 12 2017 05:43
@SkyC0der a course..
@SkyC0der I've never had to explain it to anyone haha.
Gulsvi
@gulsvi
Aug 12 2017 05:43
lol
iso
@iso1048
Aug 12 2017 05:44
subjects...
Gulsvi
@gulsvi
Aug 12 2017 05:44
All of our classes are either 3 or 5 credits
courses/classes/subjects
15 credits is full time
iso
@iso1048
Aug 12 2017 05:44
yeah that's it haha
Gulsvi
@gulsvi
Aug 12 2017 05:45
We do 12 - 16 credits / semester. 3-4 "papers" :)
iso
@iso1048
Aug 12 2017 05:46
finally got the answer haha.
@SkyC0der so why does Linguistics take 4 years?
Gulsvi
@gulsvi
Aug 12 2017 05:50
It really only takes 2 years, but to get a degree, we need another 2 years of general education + electives courses.
Philosophy, psychology, math, chemistry, etc..
iso
@iso1048
Aug 12 2017 05:51
@SkyC0der so all those physics, biology and chemistry (?) classes you took make up your electives?
Gulsvi
@gulsvi
Aug 12 2017 05:51
Yes
I have to take a performing arts class my senior year :dancer: :dancers: :)
iso
@iso1048
Aug 12 2017 05:52
that must be hell
Gulsvi
@gulsvi
Aug 12 2017 05:53
It's a little annoying, yes
There are lots of options - one is just a music performance class, so we go to random concerts once a week and write an essay about our experience
iso
@iso1048
Aug 12 2017 05:54
@SkyC0der those must be the easiest credits one could get
Gulsvi
@gulsvi
Aug 12 2017 05:54
@gothamknight Yeah, we'll see :)
dinesh
@1532j0004kg
Aug 12 2017 06:02
guys,how to learn js...
Slavoljub Popovic
@slavo3dev
Aug 12 2017 06:42
Easy start following FreeCodeCamp
dinesh
@1532j0004kg
Aug 12 2017 06:44
with the help of fcc , can able to do projects
Gulsvi
@gulsvi
Aug 12 2017 07:02
Did that rgba background color make sense @prakashyadav008 ?
dinesh
@1532j0004kg
Aug 12 2017 07:03
hi Sky Can u give some suggestions to learning js..
Gulsvi
@gulsvi
Aug 12 2017 07:10
Keep working through the Free Code Camp challenge map like you're doing @1532j0004kg. There's also the forums, medium, and youtube in addition to the links in the challenges
Tai Jones
@taiJones00
Aug 12 2017 07:11
Is this looking presentable https://codepen.io/taiJones00/full/ZyEajO/
dinesh
@1532j0004kg
Aug 12 2017 07:11
ok broieee...Tq
Tai Jones
@taiJones00
Aug 12 2017 07:11
I want to work on the other projects but I want to portfolio to look nice
Gulsvi
@gulsvi
Aug 12 2017 07:11
@1532j0004kg Where did you learn the word broieee?
@taiJones00 Nice work :)
Tai Jones
@taiJones00
Aug 12 2017 07:12
Presentable?
dinesh
@1532j0004kg
Aug 12 2017 07:12
@SkyC0der Y bro,,,
Gulsvi
@gulsvi
Aug 12 2017 07:12
@taiJones00 I think so, good job
Tai Jones
@taiJones00
Aug 12 2017 07:12
thanks bud @SkyC0der
CamperBot
@camperbot
Aug 12 2017 07:12
taijones00 sends brownie points to @skyc0der :sparkles: :thumbsup: :sparkles:
:star2: 2374 | @skyc0der |http://www.freecodecamp.com/skyc0der
dinesh
@1532j0004kg
Aug 12 2017 07:12
I like To use the word "broiee"
Gulsvi
@gulsvi
Aug 12 2017 07:13
I was just curious
dinesh
@1532j0004kg
Aug 12 2017 07:13
haha ok broieee..
Tai Jones
@taiJones00
Aug 12 2017 07:13
what a boi
Gulsvi
@gulsvi
Aug 12 2017 07:14
I don't know, curious where Dinesh learned it
dinesh
@1532j0004kg
Aug 12 2017 07:14
@taiJones00 Nice port folio bro....
glitz20
@glitz20
Aug 12 2017 07:20
hey @SkyC0der is there any reason why one of my locally developed page being slower than the other webpage which is atleast 4 times bigger than the slow webpage?
Gulsvi
@gulsvi
Aug 12 2017 07:22
@sabin20 It could be lots of reasons - external resources, javascript performance, it's hard to tell
Tai Jones
@taiJones00
Aug 12 2017 07:22
thanks brah @1532j0004kg
CamperBot
@camperbot
Aug 12 2017 07:22
taijones00 sends brownie points to @1532j0004kg :sparkles: :thumbsup: :sparkles:
:cookie: 238 | @1532j0004kg |http://www.freecodecamp.com/1532j0004kg
Gulsvi
@gulsvi
Aug 12 2017 07:22
@sabin20 Maybe you could put them on Github and try Google PageSpeed Insights https://developers.google.com/speed/pagespeed/insights/
glitz20
@glitz20
Aug 12 2017 07:23
@SkyC0der no javascript is used, I have used only one image in my slower page, which has been compressed and is from the source as the other one
Gulsvi
@gulsvi
Aug 12 2017 07:23
Are the images loaded locally or from different remote servers?
If any of your resources are from other servers on the internet, it could be those servers slowing down your page, but I'm just guessing without knowing more about the pages
glitz20
@glitz20
Aug 12 2017 07:24
remote server, but I tried locally and even without the image, but the page is slow
the image server for both is same and I had used the same image with same server link, still it is slower than the other one
oh man. Its annoyingly slow even without a image
Long Nguyen
@longnt80
Aug 12 2017 07:37
@sabin20 must be your local web server, if you're using one
lfvpCO
@lfvpCO
Aug 12 2017 07:40
FreeCodeCamp stratford-Upon-Avon
Roxroy
@roxroy
Aug 12 2017 11:44
@prakashyadav008 , works great. Got correct location and temperature. Nice work with the use of html, css classes and javascript. The google api location is spot on.
Abdullah-Al-Zubair
@a2-zubair
Aug 12 2017 14:26

can any body help to solve the 'Chunky Monkey' algorithm problem?
here is my code:


function chunkArrayInGroups(arr, size) {
  // Break it up.
  var myArr = [];
  var a = arr.length / size;

  for(var i = 0; i < a; i++){
    myArr = arr.slice(arr[a], size);
    console.log(myArr);
  }
}

chunkArrayInGroups(["a", "b", "c", "d"], 2);

I'm sure i do something idiotic logic. can you tell me where am i doing wrong , plz? and how can i get those outputs

Ken Haduch
@khaduch
Aug 12 2017 15:08
@a2-zubair - check the documentation for Array.slice. It takes one or two index values in the array where it takes the "slice" - so you need to be accessing with two index values, in order to take chunks of the array. Just think about how to get the pairs of index values that you want to use for each slice - that's the trick once you have the proper use of Array.slice()
@a2-zubair - I see that you also posted in the HelpJavaScript room - you should get help from the people over there... you also have other issues with this code, but the first thing is to get the proper slicing. Then figure out how to generate the output array and use a return because console.log is basically a diagnostic tool, it will not return any useful values to the caller of the function.
Pagnito
@Pagnito
Aug 12 2017 15:35
does anyone know when componentwillunmount kicks off exactly?
alpox
@alpox
Aug 12 2017 15:41
@Pagnito right before the component gets removed from the pagd
Page*
Pagnito
@Pagnito
Aug 12 2017 15:41
so it gets called before willmount?
alpox
@alpox
Aug 12 2017 16:17
@Pagnito willmount gets called before the component is mounted - so before it appears on the page, but after it was cpnstructed
Constructed*
So that would before willunmount
And willmount is also before didmount
Pagnito
@Pagnito
Aug 12 2017 16:18
but isnt unmount happens before the new mount happens?
alpox
@alpox
Aug 12 2017 16:21
@Pagnito yes, if the component gets unmounted and then mounted again - but that doesnt happen very often. If it just renders with different state or props, there will be no mounting happeninv
If as example the props change and the component has to redraw, componentWillReceiveProps would be called
Also, whenever the component is going to redraw from either state or props, componentWillUpdate would be called
Jack Lyons
@JackEdwardLyons
Aug 12 2017 16:35
Hi guys I have a weird question about using the jQuery each and nesting that function within another function and calling the data in the argument
i'll explain
I have two functions like this:

 /* -----------------
  * Return ajax data
  * ----------------- */
  function appendYouTubeData(data, query) {
    // append results & HTML wrapper
    $(innerWrapper).append(
      '<h2 class="text-center">Results for: ' + query + '</h2>' +
      '<div id="results" class="row flex-wrap video-row w-95 m-auto"></div>'
    );
    // Iterate over each video & append HTML
    appendEachVideo(data);
  } /* ------ end appendYouTubeData() ------ */


  /* ----------------
   * Helper Functions
   * ---------------- */
  function appendEachVideo(videos) {
    $.each(videos.items, function(i, item) {
      var output = getOutput(item, item.id.videoId);
      $('#results').append(output);
    });
  }
but in the appendEachVideo I want to do this
function appendEachVideo(videos, id) {
    $.each(videos.items, function(i, item) {
      var output = getOutput(item, id);
      $('#results').append(output);
    });
  }
but then when I goto call the function with id in another section of my code, it returns undefined
Jack Lyons
@JackEdwardLyons
Aug 12 2017 16:40
it's hard to explain but if someone is interested, i can show you in a codepen example ?
korzo
@korzo
Aug 12 2017 16:41
@JackEdwardLyons Yes, codepen is better
Jack Lyons
@JackEdwardLyons
Aug 12 2017 16:41
heres the pen
but i need to change teh code to show you
its when you click a category -- im trying to refactor
line 76 @korzo
what i want is to re use the each function with the getOutput function taking an argument instead of the dot notation that exists already
all the code at line 186 should be refactored
@korzo
korzo
@korzo
Aug 12 2017 16:45
@JackEdwardLyons as far as I understand, id in getOutput is id of youtube video. Then you will append the same video everytime
Jack Lyons
@JackEdwardLyons
Aug 12 2017 16:45
no
i know that
what i mean is...
this function needs to take in a parameter instead of the dot notation
function appendEachVideo(videos) {
    $.each(videos.items, function(i, item) {
      var output = getOutput(item, item.id.videoId); //
      $('#results').append(output);
    });
  }
instead, i want to pass in something like this
function appendEachVideo(videos, videoId) {
    $.each(videos.items, function(i, item) {
      var output = getOutput(item, videoId);
      $('#results').append(output);
    });
  }
but then when i try to call that function in another place, it returns underfined
for example, this breaks because its undefined
function search() {
    // Clear Results
    $(innerWrapper, resultsWrapper, buttonsWrapper).html('');
    // Get Form Input
    q = $('#query').val();
    // Run Get request on API
    $.get(
      "https://www.googleapis.com/youtube/v3/search", {
        part: 'snippet, id',
        q: q,
        channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ',
        maxResults: 6,
        type: 'video',
        key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg' },
        function(data) {
          appendYouTubeData(data, q, item.id.videoId);
          speedUpYouTubeLoad(); // add thumbnail instead of full iframe load.
        }
    );
  } /* ------ end search() ------ */


 /* -----------------
  * Return ajax data
  * ----------------- */
  function appendYouTubeData(data, query, videoId) {
    // append results & HTML wrapper
    $(innerWrapper).append(
      '<h2 class="text-center">Results for: ' + query + '</h2>' +
      '<div id="results" class="row flex-wrap video-row w-95 m-auto"></div>'
    );
    // Iterate over each video & append HTML
    appendEachVideo(data, videoId);

  } /* ------ end appendYouTubeData() ------ */


  /* ----------------
   * Helper Functions
   * ---------------- */
  function appendEachVideo(videos, videoId) {
    $.each(videos.items, function(i, item) {
      var output = getOutput(item, videoId);
      $('#results').append(output);
    });
  }
@korzo
korzo
@korzo
Aug 12 2017 16:53
@JackEdwardLyons what is item at this line? appendYouTubeData(data, q, item.id.videoId);
Jack Lyons
@JackEdwardLyons
Aug 12 2017 16:54
thats what i am trying to resolve -- what i want to do is have item.id.videoId as a variable or something to pass it in
but currently it refers to the each loop
it is a reference in place for the each loop
refers to videoId in the appendEachVideo function
man its so hard to explain...
korzo
@korzo
Aug 12 2017 16:57
@JackEdwardLyons Oh, ok, so you want to pass the reference to the property, where videoId is stored?
Jack Lyons
@JackEdwardLyons
Aug 12 2017 16:57
yeah so i can make different api calls
one for the category on line 197
and
line 68
two different API calls
but most of the code is the same
except the endpoint
korzo
@korzo
Aug 12 2017 17:00
@JackEdwardLyons What about passing function instead of reference to return data in proper format?
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:00
like a callback function? i tried that but failed, but maybe i wasnt doing it right?
@korzo
korzo
@korzo
Aug 12 2017 17:01
@JackEdwardLyons something like appendYouTubeData(data, q, function(item) {return item.id.videoId});
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:02
like this maybe?
function search() {
    // Clear Results
    $(innerWrapper, resultsWrapper, buttonsWrapper).html('');
    // Get Form Input
    q = $('#query').val();
    // Run Get request on API
    $.get(
      "https://www.googleapis.com/youtube/v3/search", {
        part: 'snippet, id',
        q: q,
        channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ',
        maxResults: 6,
        type: 'video',
        key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg' },
        function(data) {
          appendYouTubeData(data, q, 
            $.each(data.items, function(i, item) {
            var output = getOutput(item, item.id.videoId);
            $('#results').append(output);
          })
        );
          speedUpYouTubeLoad(); // add thumbnail instead of full iframe load.
        }
    );
it says callback is not a function @korzo
korzo
@korzo
Aug 12 2017 17:04
@JackEdwardLyons something like appendYouTubeData(data, q, function(item) {return item.id.videoId});
var output = getOutput(item, videoId(item));
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:04
but dont i still need to reference callbacklike this >>
function appendYouTubeData(data, query, callback) {
which breaks
?
@korzo
korzo
@korzo
Aug 12 2017 17:06
@JackEdwardLyons why callback? you pass function as argument. take a look at previous message.
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:06
doesn't that argumentneed a reference in the initial creation of the function?
ah, i can do this @korzo
function search() {
    // Clear Results
    $(innerWrapper, resultsWrapper, buttonsWrapper).html('');
    // Get Form Input
    q = $('#query').val();
    // Run Get request on API
    $.get(
      "https://www.googleapis.com/youtube/v3/search", {
        part: 'snippet, id',
        q: q,
        channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ',
        maxResults: 6,
        type: 'video',
        key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg' },
        function(data) {
          appendYouTubeData(data, q, function() { 
            $.each(data.items, function(i, item) {
              var output = getOutput(item, item.id.videoId);
              $('#results').append(output);
            });
          });
          speedUpYouTubeLoad(); // add thumbnail instead of full iframe load.
        }
    );
  } /* ------ end search() ------ */


 /* -----------------
  * Return ajax data
  * ----------------- */
  function appendYouTubeData(data, query, callback) {
    // append results & HTML wrapper
    $(innerWrapper).append(
      '<h2 class="text-center">Results for: ' + query + '</h2>' +
      '<div id="results" class="row flex-wrap video-row w-95 m-auto"></div>'
    );
    callback();
    // Iterate over each video & append HTML
    // appendEachVideo(data);
    appendNextButton(data);
  } /* ------ end fTubeData() ------ */
korzo
@korzo
Aug 12 2017 17:09
@JackEdwardLyons
function search() {
    // Clear Results
    $(innerWrapper, resultsWrapper, buttonsWrapper).html('');
    // Get Form Input
    q = $('#query').val();
    // Run Get request on API
    $.get(
      "https://www.googleapis.com/youtube/v3/search", {
        part: 'snippet, id',
        q: q,
        channelId: 'UCLhwHoIKtoWBccOFPDmEFpQ',
        maxResults: 6,
        type: 'video',
        key: 'AIzaSyDKJYxyWUDZhykA8DUVOorUbmC7J7QAAUg' },
        function(data) {
          appendYouTubeData(data, q, function(item) {return item.id.videoId});
          speedUpYouTubeLoad(); // add thumbnail instead of full iframe load.
        }
    );
  } /* ------ end search() ------ */


 /* -----------------
  * Return ajax data
  * ----------------- */
  function appendYouTubeData(data, query, videoId) {
    // append results & HTML wrapper
    $(innerWrapper).append(
      '<h2 class="text-center">Results for: ' + query + '</h2>' +
      '<div id="results" class="row flex-wrap video-row w-95 m-auto"></div>'
    );
    // Iterate over each video & append HTML
    appendEachVideo(data, videoId);

  } /* ------ end appendYouTubeData() ------ */


  /* ----------------
   * Helper Functions
   * ---------------- */
  function appendEachVideo(videos, videoId) {
    $.each(videos.items, function(i, item) {
      var output = getOutput(item, videoId(item));
      $('#results').append(output);
    });
  }
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:10
ah isee
korzo
@korzo
Aug 12 2017 17:12
@JackEdwardLyons This way you minimize code duplication, because videoId will be oneliner
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:14
ok, im not sure if this is working... it is and isnt
thank you @korzo its working
CamperBot
@camperbot
Aug 12 2017 17:19
jackedwardlyons sends brownie points to @korzo :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @korzo |http://www.freecodecamp.com/korzo
Jack Lyons
@JackEdwardLyons
Aug 12 2017 17:19
man that was hard to explain :) thank you so much !
korzo
@korzo
Aug 12 2017 17:19
@JackEdwardLyons Glad to help
aRtoo
@artoodeeto
Aug 12 2017 17:41

hello masters!! need help. i have a problem on algorithm entitled pig latin.
how can i stop the loop when it hit another consonant?? i tried return and i cant make it work.heres my code:

function translatePigLatin(str) {
  var vowelsArr = 'aeiou'; //way
  //var constArr = 'BCDFGHJKLMNPQRSTVWXYZ'.toLowerCase(); //ay
  var uno = [];
  var dos = [];
  str = str.split('');

  if (vowelsArr.indexOf(str[0]) === -1) {
    for (var i = 0; i < str.length; i++) {
      if (vowelsArr.indexOf(str[i]) === -1) {
        dos.push(str[i]);
      } else if (vowelsArr.indexOf(str[i]) !== -1) {
        uno.push(str[i]);
        uno = uno.join('');
        dos = dos.join('');
        return uno + dos + 'ay';
      }
    }
  } else {
    return str.join('') + 'way';
  }
}

//translatePigLatin("consonant");
//translatePigLatin("california"); //should return "aliforniacay".
//translatePigLatin("paragraphs"); //should return "aragraphspay".
translatePigLatin('glove'); //should return "oveglay".

do i need to put a counter so i can count how many characters to remove? im not gonna use substr im just going to use splice.

Abdullah-Al-Zubair
@a2-zubair
Aug 12 2017 18:18
@khaduch thanks
CamperBot
@camperbot
Aug 12 2017 18:18
a2-zubair sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3198 | @khaduch |http://www.freecodecamp.com/khaduch
Ryan Williams
@Ryanwfile
Aug 12 2017 19:58
Anyone familiar with google searches that can help me create a search that searches the same category in 2 different locations at once, for instance if I typed sports teams in the search is there a way to search California and New York locations using promises or something similar? Trying to figure out if it's possible to search a few things all at once.
Gulsvi
@gulsvi
Aug 12 2017 20:29
@Ryanwfile if it's a standard JSON request, you could do something like:
var apiUrl = "your google search API url";
var searches = ["sports in California", "sports in New York"];

var requests = searches.map(function(search) {
  return fetch(apiUrl + search).then(function(response) {
    return response.json();
  });
});

Promise.all(requests)
  .then(function(data) {
    console.log(data); // this has JSON responses for each item in the searches array
  })
  .catch(function(err) {
    console.error(err);
  });
But sadly, haven't used google search to help out beyond a standard promise.all template. The same code would work with $.ajax or $.getJSON instead of fetch() if preferred
Tai Jones
@taiJones00
Aug 12 2017 20:57
Does anyone know how I could just scroll within a div and not the entire page
iso
@iso1048
Aug 12 2017 20:59
@taiJones00 not 100% sure but you could try setting a width for the div, and in css add overflow: scroll to that div...
Tai Jones
@taiJones00
Aug 12 2017 21:00
oh cool thanks @gothamknight
CamperBot
@camperbot
Aug 12 2017 21:00
taijones00 sends brownie points to @gothamknight :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @gothamknight |http://www.freecodecamp.com/gothamknight
Trommelochse
@Trommelochse
Aug 12 2017 21:29
@taiJones00 overflow: scroll causes the scrollbar to appear all the time. overflow: auto; would be more elegant
Znadams
@Znadams
Aug 12 2017 22:26
How often do you guys use CSS positioning?
Christopher McCormack
@cmccormack
Aug 12 2017 22:27
@Znadams whenever necessary :) need it for headers and footers if you want them to stay in view, for positioning items relatively that aren't normally, etc..
Znadams
@Znadams
Aug 12 2017 22:28
having a tough time wrapping my head around this concept
Eric Weiss
@eweiss17
Aug 12 2017 22:28
I used to use them more when i was a noob, I set up pages better now so they are not needed as often
Roxroy
@roxroy
Aug 12 2017 22:29
@Znadams , very rarely, but I use relative position, when working with a parent container and see the need to have some aspects at a specific location within the container.
Znadams
@Znadams
Aug 12 2017 22:32
thanks guys
Eric Weiss
@eweiss17
Aug 12 2017 22:32
I would recommend trying to avoid position absolute, unless it is 100% necessary
zacharey
@zacharey
Aug 12 2017 23:02
does anyone know what the plugin for emmett is in vscode, or is it default?
Paige T
@pmtaylor832
Aug 12 2017 23:24
Can someone explain to me what a recursive case is ?
Eric Weiss
@eweiss17
Aug 12 2017 23:35
recursive case?
Tai Jones
@taiJones00
Aug 12 2017 23:40
https://codepen.io/taiJones00/pen/xLqemx Why is my random quote machine only returning one quote
Eric Weiss
@eweiss17
Aug 12 2017 23:41
cache: false
need to set it up with ajax, and set the cache to false
Tai Jones
@taiJones00
Aug 12 2017 23:42
set it up with ajax? I only learned json from the tutorials
Eric Weiss
@eweiss17
Aug 12 2017 23:42
i believe they have an example on the site
Tai Jones
@taiJones00
Aug 12 2017 23:42
which site
Eric Weiss
@eweiss17
Aug 12 2017 23:42
quotes o ndesign
Tai Jones
@taiJones00
Aug 12 2017 23:43
do you also know why the text is flowing out of the container and everything isn't being displayed
simple example at bottom
iso
@iso1048
Aug 12 2017 23:46
@taiJones00 maybe because you are using json[0]. You would want to generate a random number each time the button is clicked, then use that random number as the index to access the data in json. (json[randomNumber])
Eric Weiss
@eweiss17
Aug 12 2017 23:47
ya that would also work, didn't realize you were calling 40 quotes at once
try to understand that example on that page
Tip: getJSON is just shorthand ajax
Tai Jones
@taiJones00
Aug 12 2017 23:51
:O
works
thanks guyz @eweiss17 @gothamknight
¯_(ツ)_/¯
iso
@iso1048
Aug 12 2017 23:55
@taiJones00 no problem bro
Tai Jones
@taiJones00
Aug 12 2017 23:56
why isn't all of the quote being displayed on mobile
Eric Weiss
@eweiss17
Aug 12 2017 23:56
That is a different can of worms....
it is on mine though
Tai Jones
@taiJones00
Aug 12 2017 23:57
but for the really long quotes
fdemaa
@fdemaa
Aug 12 2017 23:59
just put a bigger number on the background