These are chat archives for FreeCodeCamp/HelpFrontEnd

2nd
Oct 2018
Alex
@ajanecek
Oct 02 2018 00:27

Hello everyone, I am working on the ES6 portion of the JS curriculum and I am having trouble understanding some the function syntax. I understand arrow functions well but I don't quite understand something like this:

const half = (function() {
  "use strict";
  return function ({max, min}) {
    return (max + min) / 2.0;
  };
})();

It looks like:

const functionName = (function(){anotherFunction(){}})()

Is can someone break this down for me or let me know what this is called so I can research it a little more. Thanks!

Alex
@ajanecek
Oct 02 2018 00:34
I think I found it. Immediately Invoked Function Expressions. Never mind! I'll read up on IIFEs first.
Brad
@bradtaniguchi
Oct 02 2018 00:35
@ajanecek just about to say IIFE haha
Alex
@ajanecek
Oct 02 2018 00:37
thanks anyway. :)
jusgoose
@gusd773
Oct 02 2018 00:57
Can anyone help I want to put the office image I have as the background for my "main content div" to have opacity and to sit behind my text elements which are child elements of my "main-container div" which is a child el of the "main content div"
jusgoose
@gusd773
Oct 02 2018 01:18
anybody?
Dhaval Vira
@dhavalveera
Oct 02 2018 01:18
for what
jusgoose
@gusd773
Oct 02 2018 01:19
I need to put my background image for my main content div behind my text in my main container div
https://codepen.io/gusd773/pen/ZqbYyp
Dhaval Vira
@dhavalveera
Oct 02 2018 01:20
then what is the issue you are facing
jusgoose
@gusd773
Oct 02 2018 01:21
@dhavalveera whenever I apply the background image and opacity to my main content div the opacity affects the child elements as well making my text and button transparent
Dhaval Vira
@dhavalveera
Oct 02 2018 01:22
are you working on CodePen or on Local Envrionment ?
jusgoose
@gusd773
Oct 02 2018 01:22
code pen
Dhaval Vira
@dhavalveera
Oct 02 2018 01:22
have you tried it this on Local Environment ?
jusgoose
@gusd773
Oct 02 2018 01:23
yes but everybody in the HELPJS chat said to make a codepen
Dhaval Vira
@dhavalveera
Oct 02 2018 01:24
because if you are working on code on Local Environment and you need help then you can share the code via Codepen, also you share the relevant Code only
AJ Brommy
@AJ-Brommy
Oct 02 2018 01:30
you need background opacity rather than opacity on the item itself me thinking
@gianpaolodatu yeah i just checked, console.log doesn't like console.log(myObj[name]); but works with console.log(myObj['name');
jusgoose
@gusd773
Oct 02 2018 01:38
@dhavalveera regardless they don't work in either enviorment
Dhaval Vira
@dhavalveera
Oct 02 2018 01:38
share the code
jusgoose
@gusd773
Oct 02 2018 01:38
@AJ-Brommy just tried it no luck
<main>
        <div id='mainContent'>
          <div id='mainContainer'>
            <h2 id='notMainText'>A better way</h2>
            <h1 id='MainText'>TO FAKE IT</h1>
            <button id='learnMore'>Press Me To Learn More</button>
          </div>
        </div>
      </main>

#mainContent{
  padding: 200px 100px;
  height: 100vh;
  background-color: #0E6655;
  background-image: url(https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);


}


#mainContainer h2, h1{
  padding-bottom: 30px;



}
Dhaval Vira
@dhavalveera
Oct 02 2018 01:40
does Background image is loading without Opacity ?
jusgoose
@gusd773
Oct 02 2018 01:41
@dhavalveera yes, but I want there to be transparency on the image only b/c when I add opacity to the #maincontent div it adds opacity to the text and button as well
Dhaval Vira
@dhavalveera
Oct 02 2018 01:48

mainContent::after{

opacity: .5;
}
try this once
@gusd773
AJ Brommy
@AJ-Brommy
Oct 02 2018 01:50
main{
  background-color: #0E6655;
  z-index:-2;
}

#mainContent{
  padding: 200px 100px;
  height: 100vh;
  position: relative;
  z-index:0;
}

#mainContent::before{
  content: "";
  background-image: url(https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  opacity: .5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}
jusgoose
@gusd773
Oct 02 2018 01:57
@dhavalveera negative boss
Dhaval Vira
@dhavalveera
Oct 02 2018 01:57
still not working ?
jusgoose
@gusd773
Oct 02 2018 01:57
nope
I feel like this should be an easy fix using z-index but it won't work either
Dhaval Vira
@dhavalveera
Oct 02 2018 01:59
I am not understanding where is the issue
jusgoose
@gusd773
Oct 02 2018 02:01
when I add opacity it affects my text making it hard to see
even with a black font color
#mainContent{
  padding: 200px 100px;
  height: 100vh;
  background-color: #0E6655;
  background-image: url(https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  opacity:.3;

}
image.png
Dhaval Vira
@dhavalveera
Oct 02 2018 02:01
then do 1 thing
jusgoose
@gusd773
Oct 02 2018 02:02
which is? I have tried several
lol
Dhaval Vira
@dhavalveera
Oct 02 2018 02:02
add Opacity 1 to your Text
jusgoose
@gusd773
Oct 02 2018 02:03
but shouldn't I be able to fix this using z-index? It's literally the perfect time to use it
Dhaval Vira
@dhavalveera
Oct 02 2018 02:04
I am not sure with z-index
jusgoose
@gusd773
Oct 02 2018 02:04
b/c what if I want to add more stuff to the main content? I'm gonna have to add opacity 1 to all those child elements? Doesn't seem very efficient
Dhaval Vira
@dhavalveera
Oct 02 2018 02:04
Yes
leave the main content as it is
just add Opacity 1 to your child element, like h1, p
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:02
got a quick question on the lesson im working on
says: Your h2 tag should have a width of 80vw.
Your p tag should have a width of 75vmin.
Dhaval Vira
@dhavalveera
Oct 02 2018 04:02
post your question
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:03

i put: h2{
vw: 80vw;
}

p{
vmin: 75min;
}

guess i am doin something wrong
Dhaval Vira
@dhavalveera
Oct 02 2018 04:04
but what your question exactly @mkenzie87
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:04
its saying to do this: Set the width of the h2 tag to 80% of the viewport's width and the width of the paragraph as 75% of the viewport's smaller dimension.
says my code wrong i see that i am missing the vmin on 75 but still doesn't work
Dhaval Vira
@dhavalveera
Oct 02 2018 04:04
vw is not a syntax
width: 80vw; something like this work
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:05
duh
of course not
Dhaval Vira
@dhavalveera
Oct 02 2018 04:05
how you can say that
have you tried this ?
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:05
haha completely missed that
Dhaval Vira
@dhavalveera
Oct 02 2018 04:06
what
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:06
width instead of vw
i should have knew better
the way they showed it made it seem like it was. see
vw: 10vw would be 10% of the viewport's width.
vh: 3vh would be 3% of the viewport's height.
vmin: 70vmin would be 70% of the viewport's smaller dimension (height vs. width).
vmax: 100vmax would be 100% of the viewport's bigger dimension (height vs. width).
Dhaval Vira
@dhavalveera
Oct 02 2018 04:06
have you used media-queries
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:06
yeah i use them everyday
i don't use the the vw and vh often just once in a while
I write css everyday i should have caught that
oh well
thanks for helping @dhavalveera
Dhaval Vira
@dhavalveera
Oct 02 2018 04:08
Welcome @mkenzie87
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:08
@dhavalveera do you write in javascript and jquery
AJ Brommy
@AJ-Brommy
Oct 02 2018 04:09
@gusd773 I gave you the code that does what you want!
Dhaval Vira
@dhavalveera
Oct 02 2018 04:09
no, because I am learning C Language after HTML, CSS & Bootstrap
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:09
@dhavalveera what will you be using the C language for?
Dhaval Vira
@dhavalveera
Oct 02 2018 04:10
Software
Desktop Application
Matthew McKenzie
@mkenzie87
Oct 02 2018 04:10
Then you will use the rest to style it
Dhaval Vira
@dhavalveera
Oct 02 2018 04:12
text me personally @mkenzie87
Morchid Chellali
@Morched23MJ
Oct 02 2018 10:16
@newmoon, I still haven't figured a way to solve that challenge. :l
I tried number.toFixed(2) in order to get only two decimals but still..
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 11:09

How can i align the radio buttons to be smoothly in the same line with the label near it? please help. why something so simple is so hard for me to do:(

https://codepen.io/oshikurou/pen/ePNQmo?editors=1100

Morchid Chellali
@Morched23MJ
Oct 02 2018 11:53

@thodorisanta, there is a line in your css causing that:

.ratings, .comments{
  vertical-align: -5px;
  margin-top: 10px;
}

remove the vertical-align: -5px; and everything goes as expected.

Spyrantis Theodoros
@thodorisanta
Oct 02 2018 11:58
@Morched23MJ not exactly, cause i want the maybe radio button to be exatcly in the middle of the label
cause i do the extra steps in the project i will have the same problem with them as well
TCzechowski
@TCzechowski
Oct 02 2018 12:19
I already checked how it should be done, but could you please tell me why my previous version of code wasn't working?
for (var x = 0; x < contacts.length; x++) {
  if  (contacts[x].firstName === name)  {
    if  (contacts[x].hasOwnProperty(prop))  {
        return contacts[x][prop];
    } else {
        return "No such property";
    }
  } else {
    return "No such contact";
  }
}
anyone?
Aditya
@ezioda004
Oct 02 2018 12:25

@TCzechowski

else {
    return "No such contact";
  }

would return if the name property doesnt exist on that element, but it could very exist on the next element.
If you move that return outside the loop, it'll work.

Nicolas Ramirez
@kamatheuska
Oct 02 2018 13:09

@thodorisanta if you use

.radios {
    display: flex;
    justify-content: space-evenly;
}

and remove or fix the wierd margin-tops on .comments than they will be aligned.

also, your html structure could be like this
        <div class="radios">
          <input type="radio" class="ratings" name="radio-definitely" value="male">
          <label for="radio-definitely">Definitely</label>
          <input type="radio" class="ratings" name="radio-buttons" value="female">
          <label for="radio-maybe">Maybe</label>
          <input type="radio" class="ratings" name="radio-not_sure" value="other">
          <label for="radio-not_sure">Not sure</label>
        </div>
no need for a ul there
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 13:34
@kamatheuska i didnt actually work as i thought
i wanna make it similar to this
https://codepen.io/freeCodeCamp/full/VPaoNP/
Nicolas Ramirez
@kamatheuska
Oct 02 2018 13:40
you have an extra <ul> and <li> on line 60
just remove those
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 13:43
@kamatheuska i did.sorry forgot to save. but still its not like the example project
Krona Emmanuel
@LightMode
Oct 02 2018 13:43
Hello everyone, Idk if you guys do this here but I have a project that is not related to freecodecamp. Can I get a little help on that?
Nicolas Ramirez
@kamatheuska
Oct 02 2018 13:43
@thodorisanta other thing is that you have the .labels as inline-block
no idea how to vertical align that
@LightMode sure!
if it is coding related at least :smile:
Krona Emmanuel
@LightMode
Oct 02 2018 13:49

Thanks @kamatheuska . Idk if this is the right chatroom to post this in, I tried to search for a php chatroom but couldnt find one, if you think this question will be better answered somewhere else, please let me know.

The problem is: I want to use a jquery plugin called Feedback Master. You can find it here: https://www.jqueryscript.net/form/Google-Style-Feedback-Tool-with-jQuery-HTML2Canvas-Feedback.html

It sends the data collected to a php page. Now I know a little bit about PHP but only in regards to its use in Wordpress custom theme designing. I dont know how to make a script that listens for data to come in and then mails it to me or adds it to a database or whatever. How can I do that? I dont want you to write the whole script for me of course but if you could point me to somewhere I could learn how to get this done. That would be great! :D

Nicolas Ramirez
@kamatheuska
Oct 02 2018 13:53
mmm it looks kind of out of date, that plugin... @LightMode
maybe here you can find other rooms...https://gitter.im/home/explore/tags/php
Krona Emmanuel
@LightMode
Oct 02 2018 13:55

I can't find any other plugin that offers the same functionality so I'm using this. :(

Thanks for pointing me to other chatrooms :D I'll check then out :D

Morchid Chellali
@Morched23MJ
Oct 02 2018 14:05
@kamatheuska, I got to say. Your portfolio is really outside the box. What a stunning idea. :)
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:06
@Morched23MJ I am still working on it :) thanks
which one do you mean? lol
the one in codepen, or in my website?
Morchid Chellali
@Morched23MJ
Oct 02 2018 14:07
The one on your profile, in here, https://www.nikameush.com
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:10
yep, a lot of SVG on it
Morchid Chellali
@Morched23MJ
Oct 02 2018 14:10
:thumbsup:
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:14
@Morched23MJ I am thinking on doing one more on your style
It says more to clients, that kind of layout
and mine its a bit buggy in the moment
Morchid Chellali
@Morched23MJ
Oct 02 2018 14:16
Yeah. But yours is still unique. They would be interested in someone who thinks that way too. :D
I see. Good luck.
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:16
:)
Eric Weiss
@eweiss17
Oct 02 2018 14:34
@kamatheuska Cool portfolio! It is slightly confusing though.... the UX/UI will not be easy for people who are not good with computers. I'd probably recommend a more traditional portfolio to go along side it.
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:34
@eweiss17 yep, I though so to
but I had that idea, and wanted to do it
Eric Weiss
@eweiss17
Oct 02 2018 14:35
you could have a button or text in a corner that could link to a simpler design
yeah no problem, it is real cool
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:35
and the traditional seems that doesnt really represents me
Eric Weiss
@eweiss17
Oct 02 2018 14:36
well.... the 'cookie cutter' are the go to designs for a reason....
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:36
cookie cutter?
haha first time I hear that
Eric Weiss
@eweiss17
Oct 02 2018 14:36
it's another word for common templates
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:37
haha ok
I am looking for a gig right now, so better I listen to you
Eric Weiss
@eweiss17
Oct 02 2018 14:37
I do not know if you are applying for jobs and plan to use that portfolio. Most of the time, an HR person will be the first person to evaluate
Well I live in the U.S. but it may be the same for Europe
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:38
I am sure it is really similar
oh man
now I feel overwhelm
need a coffe before starting
haha
Eric Weiss
@eweiss17
Oct 02 2018 14:39
Probably you'd want to direct HR/Non-dev people to a simpler portfolio
and a person who is a front end dev / designer to that fancy one
would probably have the best results that way
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:42
like

IF

NOOB

CLICK HERE

else
>
Eric Weiss
@eweiss17
Oct 02 2018 14:44
lol yes exactly
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:45
will do
thanks for the tip! @eweiss17
Morchid Chellali
@Morched23MJ
Oct 02 2018 14:45
@kamatheuska, I am also looking for gigs, but I think, the first thing I'd do is to do some projects on my own. For instance, imagine there is a company named X, then I'd do the design and website for it.
That's what's needed mostly, right?
In other means, I do not think the apps I completed would lead me to a real gig.
What you think? :P
Nicolas Ramirez
@kamatheuska
Oct 02 2018 14:46
lol youtube algorithm is reading your minds through mine: just got this as next https://www.youtube.com/watch?v=NzVtECVTmRU
Get a mistake-free resume...
Morchid Chellali
@Morched23MJ
Oct 02 2018 14:53
D:
Eric Weiss
@eweiss17
Oct 02 2018 15:01
depends. I was looking for a front end job but ended up getting a full stack dev job
just knowing how to read and write code could really land you a position to a smaller company
a lot of coding is just maintaining and refactoring old code
Morchid Chellali
@Morched23MJ
Oct 02 2018 15:04
I see. But in my case, I would want to work on some one time gigs, whilst studying in college. :l
Eric Weiss
@eweiss17
Oct 02 2018 15:04
try free lancing
i'm not sure how one would start. I would assume connections to somebody who is already doing it.
jusgoose
@gusd773
Oct 02 2018 15:05
can anybody help I am trying to find an answer using core css & html to add a transparent background image.
My #mainContent div has the background image property set but it is the parent element of the divs holding my text. Thus whenever I add opacity to my background image it affects the text as well.
<main>
        <div id='mainContent'>
          <div id='mainContainer'>
            <h2 id='notMainText'>A better way</h2>
            <h1 id='MainText'>TO FAKE IT</h1>
            <button id='learnMore'>Press Me To Learn More</button>
          </div>
        </div>
      </main>

#mainContent{
  padding: 200px 100px;
  height: 100vh;
  background-color: #0E6655;
  background-image: url(https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940);
  opacity:.3;

}

#mainContainer h2, h1{
  padding-bottom: 30px;



}
Eric Weiss
@eweiss17
Oct 02 2018 15:10
well you could just fade the image itself
put it into a photo editor and fade it that way
jusgoose
@gusd773
Oct 02 2018 15:11
Is there no way I can just single out that div to put opacity on it?
that's an extremely valid suggestion don't get me wrong but I wanna do it with only html & css
Eric Weiss
@eweiss17
Oct 02 2018 15:16
Note: When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read. If you do not want to apply opacity to child elements, use RGBA color values instead (See "More Examples" below).
check out the example with rgba
jusgoose
@gusd773
Oct 02 2018 15:17
@eweiss17 thank you so much man this was the answer I was looking for
I knew there had to be a way without any fancy css or third party software lol
@eweiss17 what would I use for the first three numbers then to not affect the color of the image?
seeing as how the last input is the opacity
Eric Weiss
@eweiss17
Oct 02 2018 15:20
uhh all 0's is my guess
0, 0, 0, .3? i guess
jusgoose
@gusd773
Oct 02 2018 15:21
na it just makes the whole thing grey lol
tarter sauce
look at answer #2?
jusgoose
@gusd773
Oct 02 2018 15:26
@eweiss17 just tried it to no avail
alpox
@alpox
Oct 02 2018 15:30
@gusd773 maybe with a bit of a hack?:

Ah damn this is hard on phone :D
div::after { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background-image: url('yourimage.jpg'); background-size: cover; opacity: 0.7; top: 0; left: 0; bottom: 0; right: 0; }
Yea well that sucks.. Sry for the format xD
jusgoose
@gusd773
Oct 02 2018 15:35
nope :(
Christopher McCormack
@cmccormack
Oct 02 2018 15:54
@alpox neat solution, @gusd773 why didn't that work for you? Works in this simple example
jusgoose
@gusd773
Oct 02 2018 15:55
@cmccormack I tried accessing it using the div ID but it didn't work
Christopher McCormack
@cmccormack
Oct 02 2018 15:56
updated my example, works fine
do you have a sample of code?
jusgoose
@gusd773
Oct 02 2018 15:58
      <main>
        <div id='mainContent'>
          <div id='mainContainer'>
            <h2 id='notMainText'>A better way</h2>
            <h1 id='MainText'>TO FAKE IT</h1>
            <button id='learnMore'>Press Me To Learn More</button>
          </div>
        </div>
      </main>


#mainContent{
  padding: 200px 100px;
  height: 100vh;
  background-color: #0E6655;


}

#mainContent::after { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background-image: url(https://images.pexels.com/photos/931887/pexels-photo-931887.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940); background-size: cover; opacity: 0.7; top: 0; left: 0; bottom: 0; right: 0; }

#mainContainer h2, h1{
  padding-bottom: 30px;

}
it's not letting me put in all the code for my css for some reason
Christopher McCormack
@cmccormack
Oct 02 2018 16:07

@gusd773 it works, but your CSS specificity is off:

#mainContent{
  /* ... */
  background-color: #0E6655;
}

This is overriding your image

alpox
@alpox
Oct 02 2018 16:08
I guess he does want the color though
Shining through... But im not sure
If so, adding this to #mainContent helps:
position: relative; z-index:0;
@gusd773
jusgoose
@gusd773
Oct 02 2018 16:15
@cmccormack thank you! I could live without the background color shining through though @alpox lol
Christopher McCormack
@cmccormack
Oct 02 2018 16:15
@alpox another nice solution, although from there more needs to change to get it lined up again
jusgoose
@gusd773
Oct 02 2018 16:16
@cmccormack yea I just took out the color in the background, now the image is cutting off vertically
Christopher McCormack
@cmccormack
Oct 02 2018 16:17
@gusd773 yes you have padding and vh and other css that you'll need to adjust to get everything to fit correctly
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 17:04

someone please help me with this. im stack on it for almost a day :P
how can i align those radio buttons vertically and place the top object at the start of the label that is on the left of them. plase help :(

https://codepen.io/oshikurou/pen/QZjPey

Tiago Correia
@tiagocorreiaalmeida
Oct 02 2018 17:08
Display flex in the container div, and display inline-block on each inner element
Also on thecobtainer use align items center, didntbtested cause im on a mobile
Aditya
@ezioda004
Oct 02 2018 17:10
@thodorisanta Easy fix would be to put the <input> inside each <label> and use display: flex with flex-direction: columnon .radios class.
Nicolas Ramirez
@kamatheuska
Oct 02 2018 17:11
@tiagocorreiaalmeida @ezioda004 I already told him exactly the same like 3 times xD
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 17:44
@ezioda004 @kamatheuska haha thanks a ton!! :D
now correct me if im wrong but
isnt the purpose of radio buttons to only be able to select one of them?
why i can select all of them at the same time?
Nicolas Ramirez
@kamatheuska
Oct 02 2018 17:49
the name and for attributes
there you have
@thodorisanta
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 17:49
fixed it
thanks though
Nicolas Ramirez
@kamatheuska
Oct 02 2018 17:50
sure
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 17:51
hey by the way, is there any book,site,youtube series that can help me to master positioning?
i mean to move object exactly the way i want within the page.
cause i feel like i lack in this area. And i searched it but i cant find something that covers this area completly
Nicolas Ramirez
@kamatheuska
Oct 02 2018 17:58
try FreeCodeCamps curriculum! @thodorisanta
:D
I think there courses on grid and flexbox are prety useful
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 17:58
haha, i just didnt feel like it covered completely that part
is it "professional" to build a webpage just with grid and flexbox?
the Net Ninja lol
is easy and not so tight as other tut's, so was my favorite when I was starting :)
there you have all the old school css
Emil
@aguyinmontreal
Oct 02 2018 18:05

Hi guys! I'm working on React now and I'm not sure to understand how to pass the state in nested components

For example if I have multiple levels of components:

stateful component > stateless component > stateless component > stateless component > JSX component

how to I pass the state from the stateful component to the JSX component?

Nicolas Ramirez
@kamatheuska
Oct 02 2018 18:16
you could just pass it around I think...from one to the other
or you could think on something like Redux
@aguyinmontreal
Aditya
@ezioda004
Oct 02 2018 18:20
@aguyinmontreal You'd have to pass it down as props to parent components. Otherwise as @kamatheuska said you could use Redux or Context API, that way you can directly pass the state to the component which needs it.
Emil
@aguyinmontreal
Oct 02 2018 18:36
@kamatheuska @ezioda004 Alright, thanks guys!
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 18:50

now why is the comment input starting from so high above?

https://codepen.io/oshikurou/pen/Xxmvrm?editors=1100

and I can't wrap my head around how it should be done
I did something like this:
const AVG_TEMPERATURES = {
  today: 77.5,
  tomorrow: 79
};

function getTempOfTmrw(avgTemperatures) {
  "use strict";
  // change code below this line
  const tempOfTomorrow = AVG_TEMPERATURES.tomorrow; // change this line
  // change code above this line
  return tempOfTomorrow;
}

console.log(getTempOfTmrw(AVG_TEMPERATURES)); // should be 79
But it doesn't seem to work correctly
Brad
@bradtaniguchi
Oct 02 2018 19:27
@TCzechowski your not using the deconstruction operator (where you put the {} on the left of the equal)

They way I think of this is using an object assignment backwards IE:

const myObj = {
  myData: true
};

so backwards Id have:

const { myData } =  myObj;
TCzechowski
@TCzechowski
Oct 02 2018 19:34
so something like this?
  const {tomorrow : tempOfTomorrow} = AVG_TEMPERATURES;
I don't get it..
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 19:37

can anyone help me with the comment input i placed? why is it not parallel to its label?

https://codepen.io/oshikurou/pen/Xxmvrm?editors=1100

Aditya
@ezioda004
Oct 02 2018 19:38
@TCzechowski Almost, since the functions parameter is avgTemperatures, you should be using that object instead of AVG_TEMPERATURES.
Brad
@bradtaniguchi
Oct 02 2018 19:38
nope the left side of your assignment is incorrect, your basically doing 2 things, 1 asking for specific attributes to be "pulled out" of the object (on the right) and making a variable with the same name as a const
TCzechowski
@TCzechowski
Oct 02 2018 19:43
@ezioda004 it worked, thanks!
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 19:44
:(
Brad
@bradtaniguchi
Oct 02 2018 19:47
@thodorisanta sorry, I dont have time to help out with css issues
Alex
@ajanecek
Oct 02 2018 19:59

@thodorisanta I'm still pretty new at this so there is probably a better way but I need the practice anyway...

Add this to your css:

#comments {
  vertical-align: text-top;
}
Spyrantis Theodoros
@thodorisanta
Oct 02 2018 20:24
@ajanecek woah, thanks! how you knew that this would work?\
aRtoo
@artoodeeto
Oct 02 2018 20:33
hey guys have you encountered this problem? maybe you could help me?
my right sidebar is not opening fully.
jusgoose
@gusd773
Oct 02 2018 21:05
do you guys know how to add a little color around a button when you hover over it?
more like a highlight around the border
Brad Collins
@BradleyCollins
Oct 02 2018 21:07
@gusd773 you use button:hover and set up a border in CSS
*you can use
jusgoose
@gusd773
Oct 02 2018 21:08
I'm aware but I want there to like a glow surrounding the button
not sure how to explain it
is it box-shadow?
Brad Collins
@BradleyCollins
Oct 02 2018 21:09
that should do it
Brad Collins
@BradleyCollins
Oct 02 2018 21:15
did a quick and dirty one, it's not the best but I think illustrates what you're going for
jusgoose
@gusd773
Oct 02 2018 21:21
@BradleyCollins that works for me, never seen that -1px tho, very interesting
@BradleyCollins thank you
Brad Collins
@BradleyCollins
Oct 02 2018 21:21
I cheated and used https://www.cssmatic.com/box-shadow for the box shadow code :D
jusgoose
@gusd773
Oct 02 2018 21:22
lmao I was using that rn too you were just quicker
Brad Collins
@BradleyCollins
Oct 02 2018 21:23
haha nice