These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Apr 2018
Nate Mallison
@NJM8
Apr 18 2018 00:00
@brittanyrutherford What are you trying to do? do you want the social media icons on top of each other?
Gulsvi
@gulsvi
Apr 18 2018 00:00
@brittanyrutherford I think space-between, the way you have it set up, makes the <li> elements start at flex-start and end at flex-end. It doesn't do that to the content inside, so you'd have to use text-align: right
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:00
@NJM8 no, I want the social media icons to be on the right corner, so I can replace them with their logos
Nate Mallison
@NJM8
Apr 18 2018 00:01
oh, so[ twitter], as opposed to [twitter ]
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:01
@gulsvi yeah, I tried the text-align, but didn't seem right to me, am using flex box to align things, then have to use text-align? :S :(
Nate Mallison
@NJM8
Apr 18 2018 00:01
ugh
trimmed my spaces, haha
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:02
@NJM8 yeah, I'll replace the text with real logos, so I want them to be just like 5px away from each other, on the top right area
Gulsvi
@gulsvi
Apr 18 2018 00:02
Unfortunately, it's simpler that way sometimes ¯\_(ツ)_/¯
M18Ali
@M18Ali
Apr 18 2018 00:03
@NJM8 it's worked when i only changed width to max-width
thank you for your help :)
Nate Mallison
@NJM8
Apr 18 2018 00:06
@gulsvi Is correct, flex box only applies to the immediate children I think, so your UL's and LI's are flex boxes inside a flex container, but the A tags are not
you would have to make the li's flex boxes then apply the flex styles from there
text-align: right is much easier
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:10
I just figured, justify content doesn't work with flex-grow
flex grow overrides it
Nate Mallison
@NJM8
Apr 18 2018 00:10
yeah flex box is weird, I generally like it, but the naming conventions aren't very good
M18Ali
@M18Ali
Apr 18 2018 00:11
woow really
Nate Mallison
@NJM8
Apr 18 2018 00:12
like align-content and align-items, really? No one thought to name them alignX and alignY, or align-with-flex-direction and align-opposite-flex-direction, anything memorable
@brittanyrutherford I don't think flex-grow overrides it, I think maybe your elements are just taking up all the space
I rarely use flex-grow and shrink, easier to set the sizes you want manually and let justify-content manage the space in-between
M18Ali
@M18Ali
Apr 18 2018 00:14
i just opened your codepen, no flex-flow for container? @brittanyrutherford
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:15
umm
@M18Ali why flex flow for containers?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:29
i got it now
thanks guys @NJM8 @M18Ali
CamperBot
@camperbot
Apr 18 2018 00:29
brittanyrutherford sends brownie points to @njm8 and @m18ali :sparkles: :thumbsup: :sparkles:
:cookie: 410 | @njm8 |http://www.freecodecamp.org/njm8
api offline
Nate Mallison
@NJM8
Apr 18 2018 00:48
:fire:
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 00:59
if I have 2 ul elements
inside a parent nav element
the parent display = flex
and both uls display is flex
how can I make it, that when resizing the browser or mobile views, to wrap the 2nd ul below the 1st one, instead of wrapping the items inside the 1st one?
nevermind .. it was simple :S
include*engine
@newtothat
Apr 18 2018 01:06
is it fcc project?
mbsyaswanth
@mbsyaswanth
Apr 18 2018 01:21
I built a website, to view my college results. It does it's job but still the design model needs to improved. So please help me improve the design and make it more attractive and usable. https://codepen.io/mbs-yaswanth/full/erOVrr/
zac keilholz
@ZacKeilholz
Apr 18 2018 01:24
@mbsyaswanth does this thing just fill out the form on your Uni website?
not just but I'm curious what it's doing
make the contact box not overlap your header
If you can send me a tutorial on how to make a website that fills out a form on another, I would be super grateful :)
mbsyaswanth
@mbsyaswanth
Apr 18 2018 01:31
Like our official University page as all the results as a list and are not organized. They stay in the list based on when they were published. So, if I am currently in 3rd year and want my 1st year results , I have to search all the way down. Using my site, they only need to fill their register number and select which year marks they want. @ZacKeilholz
When the form is filled and, 'get my mark list' is clicked, then they can view their mark list directly from University website @ZacKeilholz
mbsyaswanth
@mbsyaswanth
Apr 18 2018 01:36
There is no tutorial, it's super easy. My uni website uses php. So, I had to copy form elements from website, which submit the registration number and show the mark list.
@ZacKeilholz yeah on landscape view on mobile, it does overlap. I will see to it. Thank you.
CamperBot
@camperbot
Apr 18 2018 01:41
mbsyaswanth sends brownie points to @zackeilholz :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @zackeilholz |http://www.freecodecamp.org/zackeilholz
Jeff Lung YK
@jefflung
Apr 18 2018 02:34
hi, in React, how can i do a simple unmount after a timeout?
Paul Borawski
@iAmNawa
Apr 18 2018 03:08
@jefflung componentWillUnmount()
Jeff Lung YK
@jefflung
Apr 18 2018 03:09
Thanks both of you
ConstantFun
@ConstantFun
Apr 18 2018 04:04

Hello, I'm in need of some Javascript help. I have a blog with each post wrapped in an article.blog_posts and want to check each post for the existence of a figure/img tag.

const blogPosts = document.querySelectorAll('article.blog_post');
for(i=0; i < blogPosts.length; i++) {
    if (blogPosts.querySelector('figure') == true) {
      //Do this css
    } else {
      //Do this css
    }
}

I have tried the .hasChildNode() but not sure if .hasChildNode(‘selector’) can be used or not. I haven’t had much success.

ConstantFun
@ConstantFun
Apr 18 2018 04:10

I was reading that querySelector() returns node lists so you have to convert them into arrays if you want to iterate over them so maybe in my case I would have to do something like this?

Array.from(blogPosts).forEach(
  for(i=0; i < blogPosts.length; i++) {
      if (blogPosts.querySelector('figure') == true) {
        //Do this css
      } else {
        //Do this css
      }
  };
)

I am also not sure if the if statement is even applicable..?

Abhi Indoria
@AIndoria
Apr 18 2018 04:30
does anyone know of a decent High order function source which is not "funfunfunctions?"
i.e. videos/tutorials/articles etc
Ken Haduch
@khaduch
Apr 18 2018 04:42
@AIndoria - check out these - I'm just picking from a list from a search, but these are probably reliable sources: https://eloquentjavascript.net/05_higher_order.html http://javascriptissexy.com/tag/higher-order-functions/
Abhi Indoria
@AIndoria
Apr 18 2018 04:44
Thanks @khaduch Forgot Eloquent JS had a lesson on it
CamperBot
@camperbot
Apr 18 2018 04:44
aindoria sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3887 | @khaduch |http://www.freecodecamp.org/khaduch
Aditya
@ezioda004
Apr 18 2018 04:53
@ConstantFun (blogPosts.querySelector('figure') == true) this is wrong because you're trying to use .querySelector on a nodeList object.
One way to check would be to do this
Array.from(blogPosts[i].childNodes).some(val=> val.outerHTML?val.outerHTML.includes("figure"):false)
This will check if the child node has any "figure" in it, not the best solution but thats what I came up with.
Aditya
@ezioda004
Apr 18 2018 04:59
Heres a working fiddle
coderNewby
@coderNewby
Apr 18 2018 05:29
hey @DarrenfJ thanks for the help today
CamperBot
@camperbot
Apr 18 2018 05:29
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2466 | @darrenfj |http://www.freecodecamp.org/darrenfj
Göran Kempe
@Gorankempe
Apr 18 2018 07:06
Hey guys, I'm trying to use an API and I don't really understand this whole authorization thing.
How do I send my API key with my call so that I can access it? If I just open the URL I'm calling I get an error, but when I use my API key through their API Explorer it shows me the result I want. In their docs they specify a authorization header, but I dont know where to use it.
ijhar
@ijhar8
Apr 18 2018 07:13
https://jsfiddle.net/ijhar8/kv1zb8b2/35/ how can i append it in each column ?
@Gorankempe get API key than use it during call
Göran Kempe
@Gorankempe
Apr 18 2018 07:18
@ijhar8 Yeah I've got an API key but the URL doesn't have a place for it. It's just a normal URL and if I access it without going through the API Explorer I get an error. I need to send the key through my call somehow, but I'm not sure how
ijhar
@ijhar8
Apr 18 2018 07:19
send link of API
abraham anak agung
@padunk
Apr 18 2018 07:21
@Gorankempe check the manual for the API. Usually you have to type url + username + api key something like that.
Nazar
@IsaakNazar
Apr 18 2018 07:28
the code works as expected, but doesnt pass the test,
beta.fcc link
const stats = {
  max: 56.78,
  standard_deviation: 4.34,
  median: 34.54,
  mode: 23.87,
  min: -0.75,
  average: 35.85
};
const half = (function() {
  "use strict"; // do not change this line

  // change code below this line
  return function half(stats) {
    // use function argument destructuring

   const {max, min} = stats;
    return (max+min)/2;
  };
  // change code above this line

})();
console.log(stats); // should be object
console.log(half(stats)); // should be 28.015
Göran Kempe
@Gorankempe
Apr 18 2018 07:30

It's a CS:GO platforms API, developers.faceit.com, although I dont think you can access it without having an account. These are pictures though ... https://imgur.com/a/MHvT5

On the first picture they talk about the authoorization header.
On the second picture I call the API WITHOUT a key, and get the error.
On the third picture I call the API WITH a key, and I get the correct results.

Same URL, just with a header?

Markus Kiili
@Masd925
Apr 18 2018 07:34
@IsaakNazar You need to destructure inside parameter list. So do it here return function half({...}) {
Nazar
@IsaakNazar
Apr 18 2018 07:37
@Masd925 passed, thx
CamperBot
@camperbot
Apr 18 2018 07:37
isaaknazar sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4784 | @masd925 |http://www.freecodecamp.org/masd925
ijhar
@ijhar8
Apr 18 2018 07:39
https://jsfiddle.net/ijhar8/kv1zb8b2/41/ is it possible to add tr inside td.
Nazar
@IsaakNazar
Apr 18 2018 07:40
@Masd925 how often do you use destructuring assignment?
Ali Bulut
@ali27001
Apr 18 2018 07:56
hi guys
Dhaval Vira
@dhavalveera
Apr 18 2018 07:57
hi
Ali Bulut
@ali27001
Apr 18 2018 07:57
{
filteredCustomers() {
if(!this.veriler) return [];
if(!this.search) return this.veriler;
            const nestedResults = this.veriler.map(data =>
                data.datalar.filter(item =>
                        item.soru_icerik.toLowerCase().includes(this.search.toLowerCase()),

                  //   item.sorular.some(titleObject =>
                   // titleObject.title.toLowerCase().includes(this.search.toLowerCase())
                    // )
                )
                    .map(item => ({
                        title: item.soru_alt_baslik,
                        link: item.link,
                        parentLink: data.link,
                        search: true
                    }))
            );


            return nestedResults.reduce((acc, item) => acc.concat(item), []);
        },
    }
I want to add more criteria to search, but it does not work. I have to run it on the question I got on the comment line
Markus Kiili
@Masd925
Apr 18 2018 08:17
@IsaakNazar I don't use ES6 yet at work, but destructuring seems like a pretty useful ES6 feature.
Ali Bulut
@ali27001
Apr 18 2018 08:22
Is there someone that can help
Dhaval Vira
@dhavalveera
Apr 18 2018 08:23
for what
Ali Bulut
@ali27001
Apr 18 2018 08:26
I want to add a new field for search
Dhaval Vira
@dhavalveera
Apr 18 2018 08:26
didn't get you
Ali Bulut
@ali27001
Apr 18 2018 08:27
// item.soru_alt_baslik.toLowerCase().includes(this.search.toLowerCase()),
// item.soru_icerik.toLowerCase().includes(this.search.toLowerCase()), add them to the filter
computed: {
filteredCustomers() {
if(!this.veriler) return [];
if(!this.search) return this.veriler;
            const nestedResults = this.veriler.map(data =>
                data.datalar.filter(item =>
                 //  item.soru_alt_baslik.toLowerCase().includes(this.search.toLowerCase()),
                 //  item.soru_icerik.toLowerCase().includes(this.search.toLowerCase()),

                    item.sorular.some(titleObject =>
                        titleObject.title.toLowerCase().includes(this.search.toLowerCase())
                    )
                )
                    .map(item => ({
                        title: item.soru_alt_baslik,
                        link: item.link,
                        parentLink: data.link,
                        search: true
                    }))
            );


            return nestedResults.reduce((acc, item) => acc.concat(item), []);

        },
    }
not working
ConstantFun
@ConstantFun
Apr 18 2018 08:31
@ezioda004 Thanks for your input!! I will try to see what I can come up using yours as a reference!
CamperBot
@camperbot
Apr 18 2018 08:31
constantfun sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 541 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Ali Bulut
@ali27001
Apr 18 2018 08:35
the comments line does not work
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:49
hi all, I need help with flexbox
am trying to do something like this
image.png
and like this on phones:
image.png
Marianissimus
@Marianissimus
Apr 18 2018 08:54
@brittanyrutherford So the svgs are way too big; let's find a way to solve this
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:54
I udpated them to be like this
@Marianissimus I gave it static size of 40px;
not sure if that's a good practice
Marianissimus
@Marianissimus
Apr 18 2018 08:55
It's not exactly a problem - you need to give them a size anyway, since the original files are way too big
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:55
yeah, but my point is
why the 2 logos are far from each other
how do I fix that with flexbox?
I can't get them close to each other and to the right side
Marianissimus
@Marianissimus
Apr 18 2018 08:56
you actually don't use a lot of bootstrap, but mostly flexbox = this can be a problem
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:56
I don't wanna use bootstrap
Marianissimus
@Marianissimus
Apr 18 2018 08:56
oh, sorry, my bad;
ok, first, is the .social flex too?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:57
no
actually yes
i gave all UL display flex
the 1st ul is the main links on the left
2nd ul is the social links on the right
Marianissimus
@Marianissimus
Apr 18 2018 08:58
you could make it, so that the items inside be flexed - you can center align them
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:58
both of them have this style :
nav ul{
  list-style-type: none; 
  padding: 0;
  background: #555; 
  display: flex; 
  flex-wrap: wrap; 
  flex: 1; 
}
but how do I align them horizontally to the far right side?
Marianissimus
@Marianissimus
Apr 18 2018 08:59
flex: 1? what does it do there
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 08:59
without it, they don't take the space
Marianissimus
@Marianissimus
Apr 18 2018 08:59
no, let's do it from top to bottom.
at the level of nav ul, you want no wrap: display: flex;
flex-wrap: no-wrap;
right?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:00
yeah, so when on mobiles, the social links go down
but..................
at the same time
I want the main links to wrap on top of each other
if i add flex-wrap to ul.main-links ... they will wrap before the social links wrap
Marianissimus
@Marianissimus
Apr 18 2018 09:03
ok, let's first solve the web display, then the mobile
nav ul.main-links{
    background: green;   
  flex: 1 0 auto;
}

nav ul.social{
  background: red;
  flex: 1 0 auto;
}
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:04
ok
now it looks like this
image.png
if i add flex: 1 0 auto; only to .main-links, it will look like this
image.png
which kinda close
Marianissimus
@Marianissimus
Apr 18 2018 09:07
not really; what you need is to use justify-content: space-between; but the flex is not yet properly set
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:07
umm
Marianissimus
@Marianissimus
Apr 18 2018 09:08
do you want the facebook and twitter texts to be displayed at any time?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:08
no
i did text-indent: -10000px;
kept it there for SEO
Marianissimus
@Marianissimus
Apr 18 2018 09:09
ok, so we can delete them and get rid of that;
mhm... is that good for seo, really?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:10
yeah
and for people with visual problems
some tools will read the site
so it's better to keep text for links, but hide them with text-indent
so these tools can read them
and for SEO too
Marianissimus
@Marianissimus
Apr 18 2018 09:11
they won't see it anyway; it's gonna be a link there, and it will link to facebook, so don't worry about it
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:12
I know they won't see it
but it's important for these tools
I just wanna do the best practices
Marianissimus
@Marianissimus
Apr 18 2018 09:12
well, hiding the text is not a best practice
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:12
it is
:S
well
am a noob so I can't tell :joy:
Marianissimus
@Marianissimus
Apr 18 2018 09:14
ok, anyway, you need to make a decision regarding the wrapper: will it be a fixed width (so you can have some distance between the social icons and the links on the left) OR will it depend on the widths of its children - as it is now
so, will you still use max-width or width
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:15
aha
I already have max width set for it
960px
Marianissimus
@Marianissimus
Apr 18 2018 09:15
ok, so it stays as it is
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:15
yeah
Marianissimus
@Marianissimus
Apr 18 2018 09:24
ok; now you can start doing the mobile by using a media query, like this:
@media only screen and (max-width: 900px) {
    nav { 
  flex-direction: column;
  }
    nav ul.main-links{ 
  flex-direction: column
  }
}
you choose the best breaking point, i wrote 900px just for the sake of speed;
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:25
I still dont' have the web view working :(
that's my final result
am not sure where am going wrong with this
shameem fairooz
@sfshameem5
Apr 18 2018 09:26
@brittanyrutherford What's the problem ?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:28
here's the updated one
@sfshameem5 am trying to use flexbox to align navigation
shameem fairooz
@sfshameem5
Apr 18 2018 09:29
@brittanyrutherford You can use the flex direction property.
The mdn docs would be a better place to experiment with flexbox
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:29
yeah
but why do they appear far from each other
the 2 logos
am not sure until now
shameem fairooz
@sfshameem5
Apr 18 2018 09:30
the social icons
?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:30
yeah
shameem fairooz
@sfshameem5
Apr 18 2018 09:30
@brittanyrutherford I could help you out.
Marianissimus
@Marianissimus
Apr 18 2018 09:31
shameem fairooz
@sfshameem5
Apr 18 2018 09:31
@brittanyrutherford Let me check the code.
Claudio Restifo
@Marmiz
Apr 18 2018 09:33

@Masd925

I don't use ES6 yet at work

RIOT! I want to be one of those cool kidz!!1!
tweet

Markus Kiili
@Masd925
Apr 18 2018 09:35
@Marmiz Our software needs to work in IE10, so that is mostly why I don't bother using ES6 (and perhaps transpiling).
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:36
what is IE10?
:joy:
Markus Kiili
@Masd925
Apr 18 2018 09:36
@Marmiz Another secret reason is that I am still just learning ES6. Don't tell anyone.
shameem fairooz
@sfshameem5
Apr 18 2018 09:36
@brittanyrutherford Take a look at this https://codepen.io/anon/pen/MGWJwG?editors=1100
Claudio Restifo
@Marmiz
Apr 18 2018 09:36
@Masd925 sorry I don't believe in vanilla JS.
It's an invention from the media to fore you out of the latest framework
shameem fairooz
@sfshameem5
Apr 18 2018 09:36
@brittanyrutherford Internet Explorer Version 10
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:37
@sfshameem5 but what if I want the space to be less between the 2 logos?
shameem fairooz
@sfshameem5
Apr 18 2018 09:37
@brittanyrutherford Give them padding and margin.
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:37
@sfshameem5 yeah I know about the IE i was just kidding since am struggling to do designs with IE11 :(
shameem fairooz
@sfshameem5
Apr 18 2018 09:38
@brittanyrutherford You mean, they don't work as expected on IE11
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:38
actually flexbox works fine with IE11
but I was learning css grids, and liked it more
but it doesn't work at all on ie 11
shameem fairooz
@sfshameem5
Apr 18 2018 09:38
@brittanyrutherford How did you learn flexbox ?
Brittany Rutherford
@brittanyrutherford
Apr 18 2018 09:39
css-tricks site
Cristian
@GummyGod
Apr 18 2018 09:47
Hello! Anyone has any ideea how can i re-factor the following code if statments into a switch , or atleast if it even works?
if ($('.similar-products')) {                                       
    $('.similarproducts').append(iframe_html);
} 

if ($('.partial--product')){
    $('.partial--product').append(iframe_html);
}

if ($('.product-page')){
    $('div.product-page').append(iframe_html);
}

if($('#section-product-page')){
   $('#section-product-page').append(iframe_html);
}
//needs fix
if($('.swatch-product-id-*')){
   $('.swatch-product-id-*').append(iframe_html);
}

if($('.product__tabs')){
   $('.product__tabs').append(iframe_html);
}
if($('.main-content-wrapper')){
   $('.main-content-wrapper').append(iframe_html);
}

if($('#shopify-section-product-description-bottom-template')){
   $('#shopify-section-product-description-bottom-template').append(iframe_html);
}
if($('.product-details-inline')){
   $('.product-details-inline').append(iframe_html);
}

if($('.social-footer')){
   $('.social-footer').prepend(iframe_html);
}
if($('.section-related-products')){
   $('.section-related-products').append(iframe_html);
}

if($('.product-details')){
   $('.product-details').append(iframe_html);
}
shameem fairooz
@sfshameem5
Apr 18 2018 09:47
use
// ``` for code
use backticks
Cristian
@GummyGod
Apr 18 2018 09:48
done
Marianissimus
@Marianissimus
Apr 18 2018 09:49
in theory, a switch should work, as you are "switching" the class;
ijhar
@ijhar8
Apr 18 2018 09:50
https://jsfiddle.net/ijhar8/a9xczrbx/4/ whats wrong in this ..? help me guys
Markus Kiili
@Masd925
Apr 18 2018 09:52
@Marmiz I was just talking about ES5/ES6 use. Not much to do with using frameworks or not.
Claudio Restifo
@Marmiz
Apr 18 2018 09:54
@Masd925 I was being ironic (without much success I'd add) :smile:
Markus Kiili
@Masd925
Apr 18 2018 09:54
@Marmiz ok. I haven't had my evening coffee yet. Don't use irony at these hours.
Claudio Restifo
@Marmiz
Apr 18 2018 09:55
@Masd925 just finished mine right now :coffee: :sparkles:
Aditya
@ezioda004
Apr 18 2018 09:58
@ijhar8 You havent initialized i and any of the arrays (gmail, hotmail etc) only declared it.
Claudio Restifo
@Marmiz
Apr 18 2018 09:59
also, is there a particular reason for the split?
Why not just an include or a match to know if includes a specific domain.
Seems way less hassle
ijhar
@ijhar8
Apr 18 2018 09:59
@ezioda004 inside 1st for loop i have pushed data
@Marmiz i thought its easy one
Aditya
@ezioda004
Apr 18 2018 10:02
@ijhar8 I can see you're trying to push data, but since you havent initialized empty arrays, you're pushing into undefined, well trying to push and since that method doesnt exist for that primitive, you're getting error.
Claudio Restifo
@Marmiz
Apr 18 2018 10:03
anyway just to be serious for a sec @Masd925, in my experience the feature I ended up using a lot from ES6/7 are
arrow functions.
async/await.
destructuring (only bc of working with lots of class, otherwise not really used much)
ijhar
@ijhar8
Apr 18 2018 10:05
@ezioda004 now after initialization nothing happnd
Aditya
@ezioda004
Apr 18 2018 10:06
@ijhar8 Check console, what error are you getting?
ijhar
@ijhar8
Apr 18 2018 10:08
@ezioda004 no error in console
Stephen James
@sjames1958gm
Apr 18 2018 10:10
@GummyGod You could put all those strings into an array and process the array
Aditya
@ezioda004
Apr 18 2018 10:11
@ijhar8 Here the fiddle without the error, https://jsfiddle.net/a9xczrbx/19/
Seems like your logic is flawed somewhere.
Markus Kiili
@Masd925
Apr 18 2018 10:16
@Marmiz Yeah. Arrow functions sure have their uses, but I dislike the variation on function syntax it brings.
Claudio Restifo
@Marmiz
Apr 18 2018 10:26

@Masd925 I use them either for the implicit return making easy helpers functions more readable:

const const initializeArrayWithValues = (n, val = 0) => Array(n).fill(val);

Or because I'm working with classes and 70% of the time I forget to bind this 100% of the time

krckyboy
@krckyboy
Apr 18 2018 10:46
@coymeetsworld @iAmNawa Thank you very much.
CamperBot
@camperbot
Apr 18 2018 10:46
krckyboy sends brownie points to @coymeetsworld and @iamnawa :sparkles: :thumbsup: :sparkles:
:cookie: 597 | @iamnawa |http://www.freecodecamp.org/iamnawa
:star2: 3020 | @coymeetsworld |http://www.freecodecamp.org/coymeetsworld
buiphuking
@buiphuking
Apr 18 2018 11:14
hi guys,
anyone help me build this menu with pure css plz
http://tuoitre.uit.edu.vn/
Daria Doronina
@Skidle
Apr 18 2018 11:42
hey, bootstrap typography question here. So I have designer's mockup where he wants specific font-sizes in px. I use bootstrap and h1 heading is slightly bigger than it needs to be. Do I tweak it in my custom scss file or do I customize $font-size-base for the whole website?
Like I know how to make it work but I'd rather learn the right way to do it.
or do i use h2 if I want a smaller font?
Nazar
@IsaakNazar
Apr 18 2018 11:45
why git push doesnt pushes my updates? Do I need pull it and push it again?
its boring
Claudio Restifo
@Marmiz
Apr 18 2018 11:46
did you commit your changes
try a git status @IsaakNazar
Nazar
@IsaakNazar
Apr 18 2018 12:07
@Marmiz
! [rejected]        master -> master (fetch first)
error: failed to push some refs to 'https://github.com/IsaakNazar/calculator.git'
hint: Updates were rejected because the remote contains work that you do
hint: not have locally. This is usually caused by another repository pushing
hint: to the same ref. You may want to first integrate the remote changes
hint: (e.g., 'git pull ...') before pushing again.
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
Nazar
@IsaakNazar
Apr 18 2018 12:16
problem has solved thx
Keggatron
@Keggatron
Apr 18 2018 12:41

hi guys, I've got a search input component that I'm using in two places in my app
one in my header and one on the index page
the component in the header won't allow me to type spaces into it but the other one will. Has anyone experienced this before?
code:

import React, { Component } from 'react';
import { Redirect, Link } from 'react-router-dom';
import Forecast from './Forecast';

class Search extends Component {
  constructor(props) {
    super(props);

    this.state = {
      city: '',
      cityData: null,
      fireRedirect: false
    }

    this.handleChange = this.handleChange.bind(this)

  }

  handleChange(event) {
    var value = event.target.value;

    this.setState(() => {
      return {
        city: value
      }
    });
  }


  render() {
    const path = this.props.path;
    const city = this.state.city;


    return (
      <div className='col-xs-6'>
        <form onSubmit = { this.handleSubmit }>
          <input 
            id='city'
            type='text' 
            placeholder='enter city' 
            onChange={this.handleChange}
            value={this.state.city}
            className = 'form-control'
          />
          </form>
          <Link
            className='btn btn-success'
            to = {
              {
                pathname: path + 'forecast',
                search: `?city=` + city
              }
            }
            disable={!this.state.city}
          >
            Get Weather
          </Link>
      </div>

    )
  }
}

export default Search

header component:

import React from 'react';
import { Navbar, Nav, NavItem } from 'react-bootstrap'
import Search from './Search';

function Header() {
  return (
    <Navbar className='navigation'>
      <Navbar.Header>
        <Navbar.Brand>
          <h1>Five Day Weather Forecast</h1>
        </Navbar.Brand>
      </Navbar.Header>
      <Nav pullRight>
        <NavItem className='header-search'>
          <div className='row'>
            <Search path='/'/>
          </div>  
        </NavItem>
      </Nav>      
    </Navbar>
  )
}


export default Header;
Stephen James
@sjames1958gm
Apr 18 2018 12:45
@Keggatron Is your handleChange function getting called when you press space?
Keggatron
@Keggatron
Apr 18 2018 12:50
not for the header one
in the index component it is
@sjames1958gm
Stephen James
@sjames1958gm
Apr 18 2018 12:57
@Keggatron hmm, that is odd.
Keggatron
@Keggatron
Apr 18 2018 13:07
@sjames1958gm would it be some feature in the bootstrap Navbar that limits this for some reason?
Stephen James
@sjames1958gm
Apr 18 2018 13:15
@Keggatron I can't think of how, unless it is changing the input type?
Have you tried the dev tools inspector to see if there are any differences?
Keggatron
@Keggatron
Apr 18 2018 13:20
@sjames1958gm nothing looks different both have this:
Propsread-only
className:
"form-control"
id:
"city"
onChange:
bound handleChange()
placeholder:
"enter city"
type:
"text"
value:
""
Stephen James
@sjames1958gm
Apr 18 2018 13:20
Weird
Keggatron
@Keggatron
Apr 18 2018 13:21
the thing is I can set it to a city with a space in it using chrome autofill
Keggatron
@Keggatron
Apr 18 2018 13:30
@sjames1958gm Stephen I have another issue that would be awesome if you could help me with
Stephen James
@sjames1958gm
Apr 18 2018 13:30
Have you tried another browser to see if it is specific to chrome?
Keggatron
@Keggatron
Apr 18 2018 13:32
if you look in my Search component when the link is clicked the url is update to /forecast?city={city}
now this opens up my Forecast component, so I have in my componentDidMount method to make the API call
so it's causing an issue that I can't reuse the search function because it's only in my componentDidMount method
which lifecycle method could I use that would update everytime a new search is created?
@sjames1958gm it behaves even crazier in Edge
Frosty427
@Frosty427
Apr 18 2018 13:36
image.png i need this while loop to start from 300 and from there print odd numbers
Keggatron
@Keggatron
Apr 18 2018 13:36
in the header component search input, I'm unable to highlight with my mouse the input that I typed into it
if that makes any sense
Stephen James
@sjames1958gm
Apr 18 2018 13:40
@Keggatron Now it really seems like the input is somehow modified by bootstrap.
@Frosty427
while (num2 < 333) {
   if (num2 % 2 == 1) console.log(num2);
   num2++
}
@Keggatron Do you pass the value in props? If so I think there is a life cycle method calls ComponentWillReceiveProps
I haven't used it myself but seems likely
Keggatron
@Keggatron
Apr 18 2018 13:43
no, just the url is update I believe
Frosty427
@Frosty427
Apr 18 2018 13:44
@sjames1958gm i need it to print odd numbers but thanks for the effort
CamperBot
@camperbot
Apr 18 2018 13:44
frosty427 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9210 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Keggatron
@Keggatron
Apr 18 2018 13:44
then in the Forecast the URL is parsed to get the city name from that
but I have that function in my componentDidMount method
Stephen James
@sjames1958gm
Apr 18 2018 13:44
@Frosty427 And that code doesn't
@Keggatron Where does the URL in componentDidMount come from?
Keggatron
@Keggatron
Apr 18 2018 13:47
<Link
            className='btn btn-success'
            to = {
              {
                pathname: path + 'forecast',
                search: `?city=` + city
              }
            }
            >
Frosty427
@Frosty427
Apr 18 2018 13:56
@sjames1958gm no sorry i meant to say i need it to start from 300 ten from there print odd numbers
Stephen James
@sjames1958gm
Apr 18 2018 13:57
@Frosty427 like this? not sure what the upper limit is
num2 = 300
while (num2 < 333) {
   if (num2 % 2 == 1) console.log(num2);
   num2++
}
Keggatron
@Keggatron
Apr 18 2018 13:59
Sorry @sjames1958gm here's the componentDidMount portion of that:
componentDidMount() {
    const city = queryString.parse(this.props.location.search)
    api.fetchWeather([
        city.city
      ])
Stephen James
@sjames1958gm
Apr 18 2018 14:16
@Keggatron So I am thinking that in componentDidReceiveProps
will get called when you change the search box ?
Derhalli
@derhalli
Apr 18 2018 14:17
@sjames1958gm hey man wassup?
anyone knows why the order: [number]; doesn't work?
Jefferson
@jeffersonnnn
Apr 18 2018 14:29
in fetching data from an api, is my URL for getting the json supposed to be inside fetch() or appended to a variable?
Keggatron
@Keggatron
Apr 18 2018 14:29
@sjames1958gm here's the error from th econsole
Warning: Forecast has a method called componentDidReceiveProps(). But there is no such lifecycle method. If you meant to update the state in response to changing props, use componentWillReceiveProps(). If you meant to fetch data or run side-effects or mutations after React has updated the UI, use componentDidUpdate().
I've tried the other methods as well and they don't make the API call when updated
Stephen James
@sjames1958gm
Apr 18 2018 14:30
Did you try componentWillReceiveProps to see if it gets the updated URL?
@jeffersonnnn inside it is the first parameter to fetch
Nate Mallison
@NJM8
Apr 18 2018 14:31
@derhalli order has to specified on all if you want a specific order for each element, I think each item has the same order, till you add order:2 to an item, then that is a different group, so it will always be at the end, so if you want the 8 elements to be 53427186, you would have to specify that order on each element
Keggatron
@Keggatron
Apr 18 2018 14:32
@sjames1958gm Ok so I did it again and after clicking the search link twice it finally updates to the new query
Stephen James
@sjames1958gm
Apr 18 2018 14:32
@Keggatron hmm
Keggatron
@Keggatron
Apr 18 2018 14:32
that's after adding it along side componentDidMount
Stephen James
@sjames1958gm
Apr 18 2018 14:33
@Keggatron Wonder why twice.
Derhalli
@derhalli
Apr 18 2018 14:36
@NJM8 awesome, thanks for the tip!
brownies don't work anymore? :O
@NJM8 thanks, danke, merci!
CamperBot
@camperbot
Apr 18 2018 14:36
derhalli sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @njm8 |http://www.freecodecamp.org/njm8
Nate Mallison
@NJM8
Apr 18 2018 14:39
haha, thanks
Derhalli
@derhalli
Apr 18 2018 15:03
@NJM8 another question regarding the same pen (if you refresh it) .. I added styles to both div.zone4 and div.zone5, to make them take 25% of the width and float left, however it's not affecting them, any idea?
Nate Mallison
@NJM8
Apr 18 2018 15:08
@derhalli What are you expecting it to do? looks like they are 25%width
Derhalli
@derhalli
Apr 18 2018 15:09
I wanna put them beside each other @NJM8
Nate Mallison
@NJM8
Apr 18 2018 15:09
oh, yeah float's not going to work with flex box
Derhalli
@derhalli
Apr 18 2018 15:09
I just realized that, I removed the flex it works fine now
Nate Mallison
@NJM8
Apr 18 2018 15:10
flex containers make all their inner elements boxes that take up even space, so if you wanted that you could put those two in their own box
Derhalli
@derhalli
Apr 18 2018 15:11
that seems like a nice idea!
Keggatron
@Keggatron
Apr 18 2018 15:11
@sjames1958gm so I figured out my first problem with the spaces. I pulled it out of the <Nav> bootstrap component and I'm able to write spaces in there. Weird. Still working on the other problem though
Stephen James
@sjames1958gm
Apr 18 2018 15:12
@Keggatron Weird - once you said it wouldn't let you select with the mouse I suspected it was bootstrap after all
Nate Mallison
@NJM8
Apr 18 2018 15:14
@derhalli just put them in another div like so: https://codepen.io/natemallison/pen/aGbYao
the order gets messed up but you can fix that again with classes and ordering
Derhalli
@derhalli
Apr 18 2018 15:15
@NJM8 I added them in a div and gave it a class, and made it so that div has property display: flex;
is that a good approach?
Nate Mallison
@NJM8
Apr 18 2018 15:18
I have no idea, but it's what I do.
haha
:smile:
Derhalli
@derhalli
Apr 18 2018 15:18
I mean my way is a bit different from yours, but you inspired me haha
Nate Mallison
@NJM8
Apr 18 2018 15:20
check out my pomodoro timer, all the boxes are flex, all the way down to the - + buttons
Derhalli
@derhalli
Apr 18 2018 15:20
that is cool
if I have 3 divs, all position absolute
how can I order them below each other? right now they're overlapping all above each other
is there a way in css that says: they are all position absolute left 0, but make them below each other
Fabien SHAN
@X140hu4
Apr 18 2018 15:23
@derhalli maybe you could have a wrapping div that has the positon absolute attribute
Derhalli
@derhalli
Apr 18 2018 15:24
@X140hu4 in the case am having, am working with a cms system, the html is already generated for me, the divs are scattered all over the DOM, so I want to pick them with css, make the position absolute, and gather them on the right side as a sidebar
Fabien SHAN
@X140hu4
Apr 18 2018 15:25
There is no parent element?
Derhalli
@derhalli
Apr 18 2018 15:25
there is
but it contains other elements as well that don't need to be positioned absolute
for example, i have zones
1 to 10
each one is a div
i want to take zone 3, 6, 8 and put them on the right side as a sidebar
but keep the page flow as it is for other zones
Teo
@todorare
Apr 18 2018 15:29
Can someone shed some light into a Fetch API issue?
I think it's a Fetch API issue at least
Fabien SHAN
@X140hu4
Apr 18 2018 15:31
@derhalli Without some code I can't help you on that.
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 15:34
let someArray = [];
 someArray.push(this._getNumber(someData.Number));
 someArray = this._getLines(someData.Number, NumberToExpand);
undefined value gets pushed in the first iteration, how do i handle this ?
someArray[0] = 'undefined'
Fabien SHAN
@X140hu4
Apr 18 2018 15:35
@todorare Describe your problem, maybe someone may be able to help.
Teo
@todorare
Apr 18 2018 15:36
I am trying to get a number of logos from the Twitch API and I thought of using the Fetch API inside a for loop
Fabien SHAN
@X140hu4
Apr 18 2018 15:36
@Deep2322_twitter whats the context? what have you tried?
Teo
@todorare
Apr 18 2018 15:36
Apparently, Javascript doesn't really like it when I'm using functions inside a for loop
Is there a way to fetch multiple json data without using a for loop?
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 15:37
i am iterating using lodash forEach, how to bypass undefined values in an array ?
Fabien SHAN
@X140hu4
Apr 18 2018 15:38
@Deep2322_twitter I am not familiar with lodash, maybe you could test the value?
@todorare what is your expected result and the actual result?
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 15:39
it ends the loop if i test it
Derhalli
@derhalli
Apr 18 2018 15:39
@X140hu4 here's the code
so basically, I want to take zone6, zone7, zone8 and make a sidebar using them on the right side
Teo
@todorare
Apr 18 2018 15:41
My code is this for now
Trying to map the array of users to their logo in a new dictionary
But I think it's not the best way to do it
I should work with Promises, which I don't really know a lot about, but I guess I'll give it a go
Moisés Man
@moigithub
Apr 18 2018 15:43
probalby u should use LET instead of var,, cuz scope and async
Teo
@todorare
Apr 18 2018 15:43
I tried that too, but it didn't make a difference
I'm not very experienced with async functions
I'm not really experienced with anything to be honest :)
AKASH BANGINWAR
@akashbanginwar
Apr 18 2018 15:45
Hello!
anyone know about media query
?

@media screen and (max-width: 1280px) {
.chart_md{
margin-left: 200px;
}
}

@media screen and (max-width: 1440px) {
.chart_md{
margin-left: 250px;
}
}

Derhalli
@derhalli
Apr 18 2018 15:46
@X140hu4 @NJM8 is there a way with flexbox probably to say: keep the direction as column, except for the last 3 items, target them and put them in another column?
AKASH BANGINWAR
@akashbanginwar
Apr 18 2018 15:46
it will apply only 1440 media query why?
Moisés Man
@moigithub
Apr 18 2018 15:48
@todorare add some console.log's :)
  .then(function (myJson) {
    twitchUserLogos[twitchUsers[i]] = myJson.logo;
    console.log(twitchUsers[i], myJson.logo);
  });
Fabien SHAN
@X140hu4
Apr 18 2018 15:48
I was going in this way. Using flex on the individual items to order them up or down and then ... sthg ?
Derhalli
@derhalli
Apr 18 2018 15:48
and then..?
Moisés Man
@moigithub
Apr 18 2018 15:49
u will see.. twitchUsers[i] is undefined... @todorare
cuz.. async nature... by the time the calls return.. the loop already ended
Teo
@todorare
Apr 18 2018 15:49
That is the problem
AKASH BANGINWAR
@akashbanginwar
Apr 18 2018 15:49
anyone about media query?
Teo
@todorare
Apr 18 2018 15:49
But if you try twitchUsers[0] or any other value, it works
Moisés Man
@moigithub
Apr 18 2018 15:49
.. soo i variable point to undefined elemenet @todorare
Teo
@todorare
Apr 18 2018 15:50
So, I'm guessing it has something to do with looping and Fetch
Fabien SHAN
@X140hu4
Apr 18 2018 15:50
@derhalli idk read the guide and see what you can do.
Teo
@todorare
Apr 18 2018 15:50
I might be wrong though
Derhalli
@derhalli
Apr 18 2018 15:50
@X140hu4 i know that wrap will make the wrapped to the next column, but it's going to depend on the size of the content inside, which I won't know beforehand
AKASH BANGINWAR
@akashbanginwar
Apr 18 2018 15:50

@akashbanginwar
Hello!
anyone know about media query
?
@media screen and (max-width: 1280px) {
.chart_md{
margin-left: 200px;
}
}

@media screen and (max-width: 1440px) {
.chart_md{
margin-left: 250px;
}
}

it will apply only 1440 media query
Derhalli
@derhalli
Apr 18 2018 15:51
@X140hu4 I read that, it doesn't mention anything about picking specific elements and throwing them somewhere else... that's why am asking smh
Fabien SHAN
@X140hu4
Apr 18 2018 15:51
@derhalli What about css grid?
You could define areas and assign them
Nate Mallison
@NJM8
Apr 18 2018 15:52
@derhalli Can you grab them and put them in another div?
otherwise no
Derhalli
@derhalli
Apr 18 2018 15:52
@NJM8 no i can't :(
would have been super nice to grab them and throw the parent div to the right
Nate Mallison
@NJM8
Apr 18 2018 15:54
@todorare You are already doing what you need to below with promise.all ... no?
Teo
@todorare
Apr 18 2018 15:54
No, I'm just experimenting for now
Not being familiar with promises is definitely not helping
I might end up hard coding that and dealing with it again later, when I get a bit more familiar with async
It's not a part of the challenge anyway
I just felt brave enough to do it
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 15:56
for (const x of y ) {
 return y
}
what does this do in javascript ? can somebody explain me
Nate Mallison
@NJM8
Apr 18 2018 15:57
@todorare async and await is what you want
Teo
@todorare
Apr 18 2018 15:58
I kind of know how to work with Fetch if we're talking about one URL
But now, it's an array of URLs and I'm not really sure how to tackle that
Fabien SHAN
@X140hu4
Apr 18 2018 15:59
@Deep2322_twitter I don't think you can have a return here
AKASH BANGINWAR
@akashbanginwar
Apr 18 2018 15:59

@akashbanginwar
@akashbanginwar
Hello!
anyone know about media query
?
@media screen and (max-width: 1280px) {
.chart_md{
margin-left: 200px;
}
}

@media screen and (max-width: 1440px) {
.chart_md{
margin-left: 250px;
}
}
it will apply only 1440 media query

Nate Mallison
@NJM8
Apr 18 2018 16:00
read up on async and await, basically you need to define an async function to take a parameter and make your fetch call, then in each loop do and await function call with the parameter. push results to an array.
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 16:00
@X140hu4 i will check some condition and return it
Fabien SHAN
@X140hu4
Apr 18 2018 16:00
have you tried running it?
Teo
@todorare
Apr 18 2018 16:01
@NJM8 I'll have a read then. Thanks
CamperBot
@camperbot
Apr 18 2018 16:01
todorare sends brownie points to @njm8 :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @njm8 |http://www.freecodecamp.org/njm8
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 16:01
yes, i am finding out why undefined is returned for the first time
Nate Mallison
@NJM8
Apr 18 2018 16:02
@todorare Read though this: https://pastebin.com/Nmgd5yFN
Teo
@todorare
Apr 18 2018 16:02
Thanks
Nate Mallison
@NJM8
Apr 18 2018 16:03
@Deep2322_twitter you don't return y
y is what you are iterating over
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 16:04
yes sorry, i will return x
Nate Mallison
@NJM8
Apr 18 2018 16:05
let nums = [1,2,3,4,5]

for (const num of nums) {
    console.log(num);
}

// 1
// 2
// 3
// 4
// 5

// same as 

for (let i = 0; i < nums.length; i++) {
    console.log(nums[i]);
}
so if the first iteration returns undefined then maybe you put in the wrong array?
also think of it this way, for...of is just a fancy for loop, what happens if you return from a for loop? you cancel the rest of the loop
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 16:08
i will try the second one @NJM8
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 16:20
@NJM8 but in the code i have, num is an object and nums is an array.
Stephen James
@sjames1958gm
Apr 18 2018 16:32
@Deep2322_twitter Can you show the code you have?
for (const num of nums) in this code num will be assigned from the values in nums
Jefferson
@jeffersonnnn
Apr 18 2018 16:44
@sjames1958gm kind internet stranger, thanks for the tip on fetch
CamperBot
@camperbot
Apr 18 2018 16:44
jeffersonnnn sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 9211 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Stephen James
@sjames1958gm
Apr 18 2018 16:45
@jeffersonnnn :+1:
Deepak Gowda
@Deep2322_twitter
Apr 18 2018 16:47
 _getUserByNumber (users, rollNo) {
              if (!rollNo) return;
              for (const num of users) {
                 if(num) {
                    if (num.rollNo == rollNo) return num;
                    if (num.extraUsers) {
                    const extraUsers = this._getUserByNumber(num.Downlines, rollNo);
                    if (extraUsers) return extraUsers;
                    }
                 } 
              }
            }
@sjames1958gm
Stephen James
@sjames1958gm
Apr 18 2018 16:57
@Deep2322_twitter maybe if you did
for (const user of users) {
it would make more sense.
Derhalli
@derhalli
Apr 18 2018 16:58
what's a good software u guys use to create gif images like the ones used for memes
mustimuu
@mustimuu
Apr 18 2018 16:59
Hello guys. I want to learn how wordpress is built up with PHP
any good tutorials ?
How the files are setup etc
Jefferson
@jeffersonnnn
Apr 18 2018 17:02
Can i get anyone to look at this code? I can't seem to get it to run

render() {
    return (
        <div className="container">
            <div className="container1">
                {this.state.simpsonQuotes}    
            </div>
        </div>

    );
}
my webpack config keeps showing an error at the first step
Moisés Man
@moigithub
Apr 18 2018 17:10
that piece of code looks ok.. probably errror comes from another part.. of the component , hard to tell without seeing full code @jeffersonnnn
Jefferson
@jeffersonnnn
Apr 18 2018 17:18

@moigithub coming up sire

Here it is



export default class JsonComponent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            simpsonQuotes: '',
        };
    }

    componentDidMount() {

    fetch('https://thesimpsonsquoteapi.glitch.me/quotes')
    .then(results => {
        return results.json();
    }).then((data) => {
        let simpsonQuotes = data.results.map((quotes) => {
            return (
                <div key={quotes.results}>
                    <p>{quotes.quote}</p>
                    <img src={quotes.image} />
                    <p>{quotes.character}</p>
                    <p>{quotes.characterDirection}</p>
                </div>
            )
        })
        this.setState({simpsonQuotes: simpsonQuotes});
        console.log('state', this.state.simpsonQuotes);
    })
}

}

render() {
    return (
        <div className="container">
            <div className="container1">
                {this.state.simpsonQuotes}    
            </div>
        </div>

    );
}
Moisés Man
@moigithub
Apr 18 2018 17:19
check where u placing ur curly brackets
ur render method is outside ur component
Jefferson
@jeffersonnnn
Apr 18 2018 17:22
@moigithub you have amazing eyes. webpack has run succesfully. Thank youuu
CamperBot
@camperbot
Apr 18 2018 17:22
jeffersonnnn sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
api offline
Mochacaremel
@mochacaremel
Apr 18 2018 17:25
Is the site down?
Jefferson
@jeffersonnnn
Apr 18 2018 17:36
it isn't. It is right up.
JW
@contactjw
Apr 18 2018 17:57
Is it bad that my first tribute page is kinda garbage, better looking than the example, but still not anything worth showing off. Should I move on, or redo a lot of the lessons on html5/css3?
Derhalli
@derhalli
Apr 18 2018 18:10
I started using css grids, but am having an issue, columns are stretched when another column in the same row is stretched as well, is there a property to prevent that? Here's a sample code
https://codepen.io/anon/pen/bMGmod
Nate Mallison
@NJM8
Apr 18 2018 18:50
@contactjw Just move on. You will learn more by doing new projects then you can come back and change things then you will get more ideas
Derhalli
@derhalli
Apr 18 2018 18:55
@NJM8 hey did u check my last pen?
Nate Mallison
@NJM8
Apr 18 2018 18:55
i don't know anything about grid sorry
Derhalli
@derhalli
Apr 18 2018 18:55
i
i'll give u one hour to learn it and answer me
:P
Nate Mallison
@NJM8
Apr 18 2018 18:57
LOL, deal if you tell me why I can't get my .env variables in my router
Derhalli
@derhalli
Apr 18 2018 18:59
.env variables?
because u didn't read enough about it, that's why.. now I told u why .. solve my grid problem :P
Nate Mallison
@NJM8
Apr 18 2018 19:03
maybe justify or align self
Derhalli
@derhalli
Apr 18 2018 19:06
@NJM8 it doesn't work with css grid

from a stackoverflow answer:

CSS Grid with item dimensions undefined
Grid Layout would be a perfect solution to your problem if the various heights of the content items could be pre-determined. All other requirements are well within Grid's capacity.

The width and height of grid items must be known in order to close gaps with surrounding items.

So Grid, which is the best CSS has to offer for building a horizontally-flowing masonry layout, falls short in this case.

In fact, until a CSS technology arrives with the ability to automatically close the gaps, CSS in general has no solution. Something like this would probably require reflowing the document, so I'm not sure how useful or efficient it would be.

You'll need a script.

JavaScript solutions tend to use absolute positioning, which removes content items from the document flow in order to re-arrange them with no gaps. Here are two examples:

interesting reading
markclynch
@markclynch
Apr 18 2018 19:58
Any Node.js guys can help me out with something? The instructions for FCC's Node.js are asking me to sign up for AWS to practice node.js is that an absolute must, seems like there will be some charges even on their free tier and I'm scared that I could screw something up and overuse and have a huge bill lol! Please help!
anthonygallina1
@anthonygallina1
Apr 18 2018 20:00
@derhalli Hi
mstellaluna
@mstellaluna
Apr 18 2018 20:00
@derhalli :wave:
anthonygallina1
@anthonygallina1
Apr 18 2018 20:01
yello @mstellaluna
mstellaluna
@mstellaluna
Apr 18 2018 20:01
@anthonygallina1 :wave:
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:01
@markclynch You can use your computer as a server.
anthonygallina1
@anthonygallina1
Apr 18 2018 20:03
I never did get used to the incorporeal looking hand :)
Rob
@s31181
Apr 18 2018 20:03

@s31181
can anyone tell me what this is doing?

step = $('<ul>', {'class': self.options.stepClass});

from my understanding it is setting the variable step to a <ul> with the class of "whatever stepClass" is

anthonygallina1
@anthonygallina1
Apr 18 2018 20:03
much prefer :coffee:
markclynch
@markclynch
Apr 18 2018 20:04
@megma_jj_twitter In the video it's saying I should sign up for c9.io though which is AWS haha, I mean I'd love to learn it if hopefully one day that makes sense
anthonygallina1
@anthonygallina1
Apr 18 2018 20:06
@markclynch maybe local and github
Gulsvi
@gulsvi
Apr 18 2018 20:08
@markclynch Definitely not needed to use c9.io or AWS. Any computer with a command line / terminal will work, like the one you're using now.
anthonygallina1
@anthonygallina1
Apr 18 2018 20:08
yup local
markclynch
@markclynch
Apr 18 2018 20:09
@gulsvi Why do they advise us to setup the AWS site then??? Does that video tutorial just need to be redone now?
I mean the node.js tutorial on AWS site says I'll incur a .04 cents charge haha, not too worried about that one
Gulsvi
@gulsvi
Apr 18 2018 20:09
@markclynch Maybe to keep the instructions consistent - there might be some different steps depending on if you're using linux/mac/windows
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:10
@markclynch I would take the time and learn AWS and using your computer as a server as well.
Gulsvi
@gulsvi
Apr 18 2018 20:11
Why AWS and not Azure or Google Cloud? @megma_jj_twitter
markclynch
@markclynch
Apr 18 2018 20:12
I've finished my front end coding, now I need to learn how to deploy an actual website, building one for my friends Food Truck site, I want to make it so she can have her own login and update the calendar for when/where she will be weekly and possibly write in so that she can send tweets from her same dashboard as well to let people know where she will "Pop-up" next to followers.
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:12
@gulsvi because that is whats in the curriculum he is working on right now?
markclynch
@markclynch
Apr 18 2018 20:12
Am i overthinking that, can I just do that with a godaddy website or something? I'm trying to avoid PHP cause I don't know squat about that and want to stay in the javascript spectrum
I've gotten to a point where I think my fastest next step will be building real world working sites at this point and stumbling through
Gulsvi
@gulsvi
Apr 18 2018 20:14
Digital Ocean makes it real easy - get a small server for you to play with for $5/month
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:14
@gulsvi AWS is free :)
Connor
@cresharper
Apr 18 2018 20:14
How do I use .append() to insert an element above other existing elements?
markclynch
@markclynch
Apr 18 2018 20:14
@megma_jj_twitter Sort of free
Gulsvi
@gulsvi
Apr 18 2018 20:14
Free for the first year :)
Connor
@cresharper
Apr 18 2018 20:14

var button = $("button")
var insertHere = $(".banner-message__append")

button.on("click", function(){
insertHere.append("<h1>HI</h1>")
})

<div id="banner-message">
<p>Hello World</p>
<button>Change color</button>
</div>

<div id="banner-message" class="banner-message__append">
<p>Insert Header Above Me</p>
</div>

markclynch
@markclynch
Apr 18 2018 20:14
I'll only need a year to practice, but there are some small charges
Gulsvi
@gulsvi
Apr 18 2018 20:15
I did some Alexa Skill Development on AWS and that has been 100% free so far - depends on the number of requests
markclynch
@markclynch
Apr 18 2018 20:15
And I could see myself stumbling onto a non monetized site design for fun that goes viral or something and I get a bill for 20k lol
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:15
@cresharper You have 2 ids with the same name
Connor
@cresharper
Apr 18 2018 20:16
@megma_jj_twitter that was from the JSfiddle template, but that's not the issue
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:17
@cresharper Whats the problem then? seems to be working fine
Gulsvi
@gulsvi
Apr 18 2018 20:17
@cresharper use .prepend() instead of .append()
markclynch
@markclynch
Apr 18 2018 20:17
What would you guys use for the site I was talking about? Simple updatable calendar page and basic HTML/CSS but with login for the client to easily change the schedule?
anthonygallina1
@anthonygallina1
Apr 18 2018 20:18
js loop and fire base
markclynch
@markclynch
Apr 18 2018 20:18
And as to my other question, am I just going to have to learn PHP at some point so I should just do it, since Wordpress has a ton of this type stuff available already with pluggins?
Gulsvi
@gulsvi
Apr 18 2018 20:18
I'd let your friend do all her tweeting and calendar updates from her phone - the website can read from Twitter and a Shared calendar
markclynch
@markclynch
Apr 18 2018 20:19
So i'd just use vanilla js and some API calls
Gulsvi
@gulsvi
Apr 18 2018 20:19
Yes
markclynch
@markclynch
Apr 18 2018 20:19
and have a static site?
Connor
@cresharper
Apr 18 2018 20:19
@gulsvi thank you! 👍
CamperBot
@camperbot
Apr 18 2018 20:19
cresharper sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2702 | @gulsvi |http://www.freecodecamp.org/gulsvi
anthonygallina1
@anthonygallina1
Apr 18 2018 20:19
Could
markclynch
@markclynch
Apr 18 2018 20:19
@gulsvi So just something like a Godaddy website hosted would do fine?
anthonygallina1
@anthonygallina1
Apr 18 2018 20:19
I would go with geo tracking
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:19
Oh you wanted it above that text
@cresharper
Sorry I misunderstood what you were trying to do :)
Gulsvi
@gulsvi
Apr 18 2018 20:20
yeah, that should work fine @markclynch - the challenge will be hiding any API keys or credentials if those are needed.
markclynch
@markclynch
Apr 18 2018 20:21
@gulsvi ah that's why people use PHP cause it hides that stuff right?
anthonygallina1
@anthonygallina1
Apr 18 2018 20:21
GoDaddy has good connections and some larger sites there
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:21
Usually they use PHP because they are confused individuals :P
Gulsvi
@gulsvi
Apr 18 2018 20:21
No, people use PHP because they are forced to usually :)
markclynch
@markclynch
Apr 18 2018 20:21
I just never want to use PHP
anthonygallina1
@anthonygallina1
Apr 18 2018 20:21
No that I would recommend it
markclynch
@markclynch
Apr 18 2018 20:22
Even though it's like 70% plus of the web
Trying to do things the right way
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:22
If you want to do freelance work id learn php and wordpress ;)
Gulsvi
@gulsvi
Apr 18 2018 20:22
I think Wordpress has a lot do with that 70% figure
markclynch
@markclynch
Apr 18 2018 20:23
@megma_jj_twitter I saw I could have my own godaddy server for php and wordpress stuff with a SQL database for around 279 for 3 years with one free domain name and unlimited hosting for unlimited websites
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:23
Yep
markclynch
@markclynch
Apr 18 2018 20:23
So I guess that's the low cost option
And could charge my own hosting fee.
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:24
that expensive
markclynch
@markclynch
Apr 18 2018 20:24
Really?
Gulsvi
@gulsvi
Apr 18 2018 20:24
That's very expensive
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:24
Yes
markclynch
@markclynch
Apr 18 2018 20:24
What do you pay?
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:24
Nothing, I use AWS
:)
markclynch
@markclynch
Apr 18 2018 20:25
haha
for 1 year ;)
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:25
Its not just 1 year
markclynch
@markclynch
Apr 18 2018 20:25
oh some stuff is always free?
I think I read that somewhere
I feel like I can design a site, but I don't know the actual way to publish it now haha. I mean I can and have done simple HTML/CSS sites on godaddy before, like ages ago
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:26
Regardless AWS will be cheaper then Godaddy ;)
markclynch
@markclynch
Apr 18 2018 20:27
Okay Okay :)
So I'll pay the 4 cents for their Node.js tutorial
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:27
If you do not have a database
then you can just use GH pages
and not pay anything at all
markclynch
@markclynch
Apr 18 2018 20:27
yeah, heiroki also correct?
or heroku
anthonygallina1
@anthonygallina1
Apr 18 2018 20:27
or firebase ;)
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:28
if you just have css and html page, then GH pages is easiest
markclynch
@markclynch
Apr 18 2018 20:28
Yeah, but I'm trying to learn backend stuff now.
JJ Megma
@megma_jj_twitter
Apr 18 2018 20:28
You just said it was simple html/css I thought?
markclynch
@markclynch
Apr 18 2018 20:29
for hers it will be I guess, since I'll just figure out how to hide the API credentials for her calendar.
But I want to be more than that (pats self on back)
I'm sorta lost I guess really.
Have enough knowledge to be dangerous, but no idea of where to go next to start making some money
And I'm gonna need some money soon, Uber is barely paying the bills at this point :(
anthonygallina1
@anthonygallina1
Apr 18 2018 20:31
Is your hot water still on?
markclynch
@markclynch
Apr 18 2018 20:32
Anyone done Treehouse? Was wondering if it is worth the 25 per month
Maybe that would be more organized path for my full stack development, just skip over the javascript/css portions.
krckyboy
@krckyboy
Apr 18 2018 20:35
@markclynch I'd rather spend $10 for The Web Developer Bootcamp by Colt Steele.
@markclynch But it depends on what you want to learn. Is it back-end that you want to learn?
Then figure out what language, tools, etc. and then search for a course.
markclynch
@markclynch
Apr 18 2018 20:37
@krckyboy You like Colt Steele's program? Have you heard of Traversy Media (has a udemy course and his own fullstack dev camp).
anthonygallina1
@anthonygallina1
Apr 18 2018 20:38
@krckyboy Colt covers color and much
krckyboy
@krckyboy
Apr 18 2018 20:38
@markclynch I have heard and I bought Traversy's course on JS and Bootstrap4 and I haven't finished it. It put me off because he seem to throw everything at you at first without explaining why he types this and that, while with Colt it's much different and much better, for me.
markclynch
@markclynch
Apr 18 2018 20:39
@krckyboy Gotcha.
krckyboy
@krckyboy
Apr 18 2018 20:40
@markclynch I was surprised, cause I thought Traversy would be much better, but maybe it's just not for me, or maybe the guy will take a turn deeper in the courses, but I guess I just like taking it step by step with explanation.
anthonygallina1
@anthonygallina1
Apr 18 2018 20:40
@krckyboy I had a dev in Arizona teach me in the 90's and colt covers it like my friend did
good foundation
markclynch
@markclynch
Apr 18 2018 20:41
How deep does Colt go? What languages is he covering?
@krckyboy @anthonygallina1
krckyboy
@krckyboy
Apr 18 2018 20:41
It is so easy to learn with Colt. @anthonygallina1 I've done a bit more courses, but Colt is my favorite, hands down. I have yet to check others that I bought and never touched, though.
He teaches HTML, CSS, JavaScript, MEN stack (without Angular).
And without other front-end frameworks, clearly.
@markclynch
So Node.js, MongoDB, Express.
anthonygallina1
@anthonygallina1
Apr 18 2018 20:42
i just finished the google challenge Looking into Colts node now
markclynch
@markclynch
Apr 18 2018 20:43
Seems like all you might need :)
anthonygallina1
@anthonygallina1
Apr 18 2018 20:43
Cant believe they gave me a chance out of all the people that applied Google :thumbsup:
krckyboy
@krckyboy
Apr 18 2018 20:43
What Colt teaches you is good. I would skip Bootstrap part, though, since it's version 3 and version 4 is new.
markclynch
@markclynch
Apr 18 2018 20:44
I like google's Materialize lately.
@anthonygallina1 What's The Google Challenge?
anthonygallina1
@anthonygallina1
Apr 18 2018 20:44
lots of impotants in the CSS on it though last I looked
Quilty Kim
@zebralight
Apr 18 2018 20:45
hello. I was wondering if someone can help with figuring out how to have the margin of an element not spill over into creating a margin for its parent element
anthonygallina1
@anthonygallina1
Apr 18 2018 20:45
Materialize
krckyboy
@krckyboy
Apr 18 2018 20:45
Meh. It's all the same to me. I just use Bootstrap for responsiveness and img-fluid and text center, but you can speed things up a lot if you learn the core.
Gulsvi
@gulsvi
Apr 18 2018 20:46
@zebralight I think we can help - can you share the code?
markclynch
@markclynch
Apr 18 2018 20:47
@krckyboy So you took his Web Developer Bootcamp not the Advanced Web Developer Bootcamp?
krckyboy
@krckyboy
Apr 18 2018 20:49
@markclynch Correct. I've heard mixed opinions of the advanced one, but I also heard that they added a lot of content (and the initial complaints were about other two or three instructors not being as clear as Colt with explanations and transferring knowledge, and also the lack of content in React section, but I am not 100% sure).
anthonygallina1
@anthonygallina1
Apr 18 2018 20:49
@krckyboy tab pagination is fun 2
krckyboy
@krckyboy
Apr 18 2018 20:50
@anthonygallina1 In Bootstrap?
anthonygallina1
@anthonygallina1
Apr 18 2018 20:51
@krckyboy this is actually one page https://fullstackwebdesign.net/estimate.html
I wrote it nedds spiffing up a lot though
Like the bar on phone size etc
Was a son of a gun writing it at the time
krckyboy
@krckyboy
Apr 18 2018 20:52
@anthonygallina1 Ha. That looks cool.
anthonygallina1
@anthonygallina1
Apr 18 2018 20:53
@krckyboy thanks need work But I didnt know a kinda spa could be done bootstrap b4
CamperBot
@camperbot
Apr 18 2018 20:53
anthonygallina1 sends brownie points to @krckyboy :sparkles: :thumbsup: :sparkles:
:cookie: 104 | @krckyboy |http://www.freecodecamp.org/krckyboy
Quilty Kim
@zebralight
Apr 18 2018 20:53
@gulsvi ?
markclynch
@markclynch
Apr 18 2018 20:55
@krckyboy So for a production page you actually load in the libraries for bootstrap and other framework/libraries on the server?
not use the cdn's etc.
these are the small little things that I'm missing out on. I guess that helps with load speeds
krckyboy
@krckyboy
Apr 18 2018 20:56
Well, I'm only a junior developer, so I am not even sure myself of many things, but the way you should do it is to have as less HTTP requests as possible, so you would optimize your website the best way you can. My boss appreciates it if I download and store all third party tools on the server.
Pay attention to image responsiveness, that is the biggest issue with optimization.
You should look into it deeply. Even I need to go back to a course to check it.
markclynch
@markclynch
Apr 18 2018 20:58
Yeah, I just need to start building stuff, I'm just learning stuff and not actually practicing enough with my own pages that are launched
krckyboy
@krckyboy
Apr 18 2018 20:58
Lol. I sound like an expert, and I'm a newbie actually, as well.
Just trying to help you out, that's all.
markclynch
@markclynch
Apr 18 2018 20:58
I'm uber newbie
feel retarded at times, hell I've got a CS degree that I never used and am now 39 in mid life crisis trying to fix my mistakes of not following through with my love of tech and going for the easy money of finance/insurance
krckyboy
@krckyboy
Apr 18 2018 20:59
Yeah, that's what I need to do, as well. Build, but currently I need to finish some course, do a bit of code along and then I will start working on a project that I find interesting. Would be cool to also include a bit of back-end and refactor my first "full" app that I made for the exam.
markclynch
@markclynch
Apr 18 2018 20:59
There's an exam in colt steele's course?
Gulsvi
@gulsvi
Apr 18 2018 21:00
@zebralight I'm checking it out now - not sure why it's doing that, but I see you're using flexbox which isn't really needed here. Define a min/max width for your board, and let the squares wrap inside with a % width to make it scale
All the squares would be display: inline-block
anthonygallina1
@anthonygallina1
Apr 18 2018 21:00
Me 2 kinda
krckyboy
@krckyboy
Apr 18 2018 21:00

@markclynch Man, it's all good. Age is nothing. As long as you're alive, you're alive. People die at 15 and 105, so what? Be happy that you're alive and do what you love.

And no, I was talking about my exam in college that I am going to.

Business informatics, but they had some practical exam and I chose to make an app since that seemed less painful than other alternatives.
anthonygallina1
@anthonygallina1
Apr 18 2018 21:01
I got to put on my networking hat and get the command central talking to each other LOL
krckyboy
@krckyboy
Apr 18 2018 21:02
creative
:D
Gulsvi
@gulsvi
Apr 18 2018 21:03
@zebralight If you add top: 0 to your .modal class it fixes the margin - but I'm not sure why it was doing that in the first place...
Use padding-top to adjust the height of the modal after applying that change if you want it positioned lower
anthonygallina1
@anthonygallina1
Apr 18 2018 21:05
@markclynch Free Code Camp is way more than AWESOME! But you may find your self needing to suplement the foundation.
And maybe not 2
Colt teaches file structure and lots
Michael
@g4m3rm1k3
Apr 18 2018 21:05
how do you suplement?
krckyboy
@krckyboy
Apr 18 2018 21:06
@anthonygallina1 How does FCC cover JS and back-end? Haven't been there for a long time.. One of my first steps was with FCC.
anthonygallina1
@anthonygallina1
Apr 18 2018 21:06
Reasearch FCC videos and out side courses here
krckyboy
@krckyboy
Apr 18 2018 21:07
@anthonygallina1 Oh I might do that, just wanted to get your personal opinion - short. I'll check it out, no probs.
Quilty Kim
@zebralight
Apr 18 2018 21:07
@gulsvi thank you
CamperBot
@camperbot
Apr 18 2018 21:07
zebralight sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2703 | @gulsvi |http://www.freecodecamp.org/gulsvi
anthonygallina1
@anthonygallina1
Apr 18 2018 21:07
Free Code Camp is the best I have ever seen though
But if I get stuck and dont understand I dig. Or try another source
Or put it down and go back to it
krckyboy
@krckyboy
Apr 18 2018 21:09
Time for me to sleep
I'll try to get up at 06:00
11PM now at my place
anthonygallina1
@anthonygallina1
Apr 18 2018 21:09
~rest well pleasure meeting you.
krckyboy
@krckyboy
Apr 18 2018 21:09
Likewise, buddy. See you later, beautiful people
anthonygallina1
@anthonygallina1
Apr 18 2018 21:10
:thumbsup:
anthonygallina1
@anthonygallina1
Apr 18 2018 21:19
@krckyboy check out any of the beau carnes videos on the free code camp you tube channel they are great https://www.youtube.com/watch?v=OcnTQ0qCuCk
Daniel
@Feldbot
Apr 18 2018 21:30

Hi, I'm having some issues trying to understand my code for the tic tac toe project. I haven't used jQuery before, and I'm trying to figure out why my button event handlers aren't registering if I choose the 1 player option. If I choose 2 players, I've got the same set of buttons listening as a callback and that works. I didn't want to set it up this way since I'm repeating my code. Does anyone know why the buttons don't fire in the 1 player scenario?

Also, if you have any suggestions of a better way to set up the sequencing for the game configuration screen options (one/two players, X or O selection), I'd love to know a better way to go about this. What I have so far feels kind of haphazard. Incidentally, I am trying to follow the project demo by way of functionality, just to understand it.

Here is my pen

Gulsvi
@gulsvi
Apr 18 2018 21:41

@Feldbot This is an event delegation issue - when you attach a click event handler to the x and o buttons, they haven't been created yet, so nothing gets attached. Wrap that code in a function and call it from inside your fadeOut callback:

  $("button#onePlayer").on("click", function() {
    config.players = 1;
    $("div.gameOptions").fadeOut(500, function() {
      $("div.gameOptions").html("<h3>Would you like to be X or O?<br><em> X goes first.</em></h3><br><button class='x'>X</button><button class='o'>O</button>").fadeIn(500);
      registerXOClick(); // function that adds a click event listener to the x and o buttons now that they have been created
    });
  });

  function registerXOClick() {
    $("button.x").on("click", function() {
      config.playerOneSymbol = 'X';
      console.log(config.playerOneSymbol);
    });
    $("button.o").on("click", function() {
      config.playerOneSymbol = 'O';
      console.log(config.playerOneSymbol);
    });
  }

You can also use an optional event delegation parameter in your .click call, as described here: https://learn.jquery.com/events/event-delegation/

Gulsvi
@gulsvi
Apr 18 2018 21:47

Just in case that isn't clear, you would do it like this:

  $("div.gameOptions").on("click", "button.x", function() {
    config.playerOneSymbol = 'X';
    console.log(config.playerOneSymbol);
  });
  $("div.gameOptions").on("click", "button.o", function() {
    config.playerOneSymbol = 'O';
    console.log(config.playerOneSymbol);
  });

(A personal preference, but I prefer wrapping it in a function)

Daniel
@Feldbot
Apr 18 2018 21:48
@gulsvi Thanks Gulsvi. I wondered if it was that the buttons hadn't been created, but they show up in the DOM. The first set of options was structured the same way (Player 1 or 2), so I couldn't figure out why the next set of options didn't work. Your code makes sense, I'm checking out the doc link too.
CamperBot
@camperbot
Apr 18 2018 21:48
feldbot sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
:star2: 2704 | @gulsvi |http://www.freecodecamp.org/gulsvi
Gulsvi
@gulsvi
Apr 18 2018 21:48
The buttons do get created, but after that initial .on("click" runs, so that click code just gets ignored
Daniel
@Feldbot
Apr 18 2018 21:52
@gulsvi I still don't get that. Why would the first set (1 or 2 players) work? The buttons are created, then the listener. I don't see what is different if I put another listener for X or O, why that has to be a callback. The first one wasn't a callback?
Gulsvi
@gulsvi
Apr 18 2018 21:54
@Feldbot The code doesn't always run from top to bottom - you have a 500ms fade out before creating the x and o buttons. Your "button.x").on("click", code runs before that fadeout is complete
(and before the X and O buttons are created)
This works because you attach the click handler after the buttons are created:
$("div.gameOptions").fadeOut(500, function() {
      $("div.gameOptions").html("<h3>Player 1—<br>Would you like to be X or O?<br><em> X goes first.</em></h3><br><button class='x'>X</button><button class='o'>O</button>").fadeIn(500);

      // BUTTONS HERE WORK AS CALLBACK
      $("button.x").on("click", function() {
        config.playerOneSymbol = 'X';
        console.log(config.playerOneSymbol);
      });
      $("button.o").on("click", function() {
        config.playerOneSymbol = 'O';
        console.log(config.playerOneSymbol);
      });
    });
Daniel
@Feldbot
Apr 18 2018 22:03
@gulsvi OH! The fade function timing is deceptively sneaky! Aren't the button.x and button.o event listeners just waiting for a button to appear though and then they would work (in the 1 player scenario)? That is, after the user selects "player 1" the buttons for X and O appear after the fadeOut, but the listeners have already been created, no?
Gulsvi
@gulsvi
Apr 18 2018 22:06
@Feldbot Maybe this simplifies it:
$("li").on('click', function() {
  console.log(`You clicked a list item!`)
});

$("body").append(
  `<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ul>`
);
Since the click handler code runs before those list items / elements are created, nothing happens.
However, this works just fine:
$("body").append(
  `<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ul>`
);

$("li").on('click', function() {
  console.log(`You clicked a list item!`)
});
So, the click code doesn't wait for a matching element to appear in the DOM
You can make it seem that way using the event delegation parameter in that link I gave above:
$("body").on('click', "li", function() {
  console.log(`You clicked a list item!`)
});

$("body").append(
  `<ul>
    <li>List Item 1</li>
    <li>List Item 2</li>
  </ul>`
);
That makes it work fine even though the list items are created after - it basically attaches a click handler to the body element and fires on any li element clicked, so the contents of <body> are re-evaluated on every click
Gulsvi
@gulsvi
Apr 18 2018 22:11
Or, you can separate the code into logical functions to explicitly show what you're trying to do:
function registerEventHandlers() {
  $("li").on("click", function() {
    console.log(`You clicked a list item!`);
  });
}

function createListItems() {
  $("body").append(
    `<ul>
      <li>List Item 1</li>
      <li>List Item 2</li>
    </ul>`
  );

  registerEventHandlers();
}

createListItems();
Daniel
@Feldbot
Apr 18 2018 22:26
@gulsvi This all makes sense, in reading your code and the jQ doc about event delegation, but will take a bit to set in for my use case, that is still fuzzy. I'm working on that now. Thank you so much for all those examples and link, that is SUPER helpful!
CamperBot
@camperbot
Apr 18 2018 22:26
feldbot sends brownie points to @gulsvi :sparkles: :thumbsup: :sparkles:
api offline
Gulsvi
@gulsvi
Apr 18 2018 22:28
Happy to help!
Daniel
@Feldbot
Apr 18 2018 22:29
@gulsvi By the way I noticed in your code where you append html you use the backtick instead of quotes. Is this ES6 only? I wondered if there was a better way to write the dynamic html, my code is very hard to read if isn't broken into indented lines, and I couldn't see how to do that any other way.
Gulsvi
@gulsvi
Apr 18 2018 22:31
@Feldbot Yes, those are template literal strings - ES6, but widely supported in any browser after IE11 now.
It's a little harder to manage, but if you don't want to use ES6, you could concatenate:
var html = 
  "<ul>" +
    "<li>List Item 1</li>" +
    "<li>List Item 2</li>" +
  "</ul>";
Christopher McCormack
@cmccormack
Apr 18 2018 23:02
I personally like to create all of my html in the body but hide it (display: none;), then select it in JS and clone it or whatever. Then you don't have ugly html in your JS
include*engine
@newtothat
Apr 18 2018 23:53
im strugling with css layout is it hard for everyone
i mean do i have to master this and then move to other languages? they say it is simlpe but there is too much only in html and css old ways and new ways
it is just one way
here is another