These are chat archives for FreeCodeCamp/HelpFrontEnd

18th
Jun 2018
zhouxiang19910319
@zhouxiang19910319
Jun 18 2018 01:29
if I need to use a node module, where do I install it??
Lallo Vigil
@lalov1
Jun 18 2018 02:16
@zhouxiang19910319 If you install it then it will be in the node_modules directory. You could install it as a development dependency or a project dependency
Lallo Vigil
@lalov1
Jun 18 2018 02:30
@megantaylor Thank you!
zhouxiang19910319
@zhouxiang19910319
Jun 18 2018 03:02
@lalov1 so for example I can install it into my project folder (the same folder that has index.html and style.css) ?
kirbyedy
@kirbyedy
Jun 18 2018 06:02
hello people, have a problem which I can't resolve, I have side buttons which should on load be there and after 4sec slide to right (to become invisible), which I did with css and its working, now these buttons should show up when user hovers above that area I also did this with css, but the combination of this two does not work, I can not combine them to work together, any hints or suggestions how to resolve this kind of problem, I know this can be sorted out with jquery but the guy who I am working with does not want that, btw the whole project is in react, and my knowledge is very limited in this field, If this problem can be solved with react only and not css, I would be happy, some pointers would be appreciated
Vladislav Ivanov
@developer4eto
Jun 18 2018 06:03
@kirbyedy give us the code
kirbyedy
@kirbyedy
Jun 18 2018 06:03
let me put it up somewhere
Giorgi Macharashvili
@scubahero
Jun 18 2018 06:43
Hello, i need some advices, i started learning ui web developement 2 years ago and i have some knowledge but cant find actuall work, this makes me so sad
roxxlen
@roxxlen
Jun 18 2018 08:28
const store = Redux.createStore(
  (state = 5) => state
);

// change code below this line
var currentState = sotre.getState();
how to Get State from the Redux Store ?
Simon Cordova
@gbsimon87
Jun 18 2018 08:43
const input = (props) => (
    <input
        type='text'
        className={classes.InputBtn} />
)
I've created this input component but when rendered I want to set different onChange values, can't seem to achieve it, any ideas?
abraham anak agung
@padunk
Jun 18 2018 08:43
@roxxlen you have a typo. store.getState()
Simon Cordova
@gbsimon87
Jun 18 2018 08:44
Never mind actually, solved :)
roxxlen
@roxxlen
Jun 18 2018 08:44
@padunk fixed, still not work
abraham anak agung
@padunk
Jun 18 2018 08:44
@roxxlen what is the challenge link?
abraham anak agung
@padunk
Jun 18 2018 08:46
@roxxlen it worked. try to restart your tab.
Claudio Restifo
@Marmiz
Jun 18 2018 08:46
@roxxlen I made your code works (besides the sotre typo) try refreshing the page?
roxxlen
@roxxlen
Jun 18 2018 08:48
// running test
sotore is not defined
sotore is not defined
// tests completed
abraham anak agung
@padunk
Jun 18 2018 08:48
@roxxlen typo again it have to be store not sotore
roxxlen
@roxxlen
Jun 18 2018 08:49
hahaha .... my typo ......
Helio Goncalves
@srlhyo
Jun 18 2018 10:27
I need some help with my code. Anyone there?
dinesh
@1532j0004kg
Jun 18 2018 10:28
ya ?
Helio Goncalves
@srlhyo
Jun 18 2018 10:29
cool
I want the user to be able to click on portfolio section and then scroll through the images within the viewport
how can I achieve that?
I cannot go around with that, somehow.
dinesh
@1532j0004kg
Jun 18 2018 10:33
So you want, When someone click the portfolio it must scroll to portfolio section right?
Helio Goncalves
@srlhyo
Jun 18 2018 10:34
no, I am not there ye. I think I can do that.
dinesh
@1532j0004kg
Jun 18 2018 10:34
So what you want
Helio Goncalves
@srlhyo
Jun 18 2018 10:35
What I want now is to have the portfolio section still on the viewport while scrolling through the imges.
images
if you notice, the div with the images is bigger than it's parent
I tried to give height 100vh to it's parent but then the footer moves up
do you get me ?
dinesh
@1532j0004kg
Jun 18 2018 10:37
Not really, I am trying .
Viewport means?
Helio Goncalves
@srlhyo
Jun 18 2018 10:38
viewport means the size of your screen device
Dhaval Vira
@dhavalveera
Jun 18 2018 10:38
Yes
dinesh
@1532j0004kg
Jun 18 2018 10:39
Sorry can you explain with other sentence
Helio Goncalves
@srlhyo
Jun 18 2018 10:39
what do you mean?
dinesh
@1532j0004kg
Jun 18 2018 10:39
So you want the portfolio section with 100% view
Helio Goncalves
@srlhyo
Jun 18 2018 10:39
yes
that's right
dinesh
@1532j0004kg
Jun 18 2018 10:40
set the height and width to 100vh and 100%
Helio Goncalves
@srlhyo
Jun 18 2018 10:41
but then the image content is bigger so it means I would need a scrool
scroll bar
can I show you an example?
dinesh
@1532j0004kg
Jun 18 2018 10:43
set the div with image to 100 w&h .. It means that you dont need scroll for images in portfolio in other words portfolio section covered full screen
Helio Goncalves
@srlhyo
Jun 18 2018 10:44
ye dinesh, but this where I trying to get. I want the portfolio section to have the viewport height and stick to it until all the images are scrolled.
let me show an example. I think it's easier
dinesh
@1532j0004kg
Jun 18 2018 10:45
Ok wait
Helio Goncalves
@srlhyo
Jun 18 2018 10:45
open up this website
dinesh
@1532j0004kg
Jun 18 2018 10:45
i did
In this ?
Helio Goncalves
@srlhyo
Jun 18 2018 10:46
notice that the booking section (aside) is set to viewport height and is sticky
dinesh
@1532j0004kg
Jun 18 2018 10:46
thats you need
This message was deleted
Helio Goncalves
@srlhyo
Jun 18 2018 10:47
although you are scrolling the rest of the content , the booking section remains sticky and with the viewport height
dinesh
@1532j0004kg
Jun 18 2018 10:47
Ya
In your's what you want to stick.. like in that website
Helio Goncalves
@srlhyo
Jun 18 2018 10:48
I want to portfolio section to stick while there is still images to scroll
dinesh
@1532j0004kg
Jun 18 2018 10:48
Ohh gotit
wait i will check and say
Helio Goncalves
@srlhyo
Jun 18 2018 10:48
cool
dinesh
@1532j0004kg
Jun 18 2018 10:49
So try to put the fixed to that div
otherwise try to compress that all images inside the 100vh height
Helio Goncalves
@srlhyo
Jun 18 2018 10:50
I tried, it doesn't work
to compress the images, means having smaller images and less images
dinesh
@1532j0004kg
Jun 18 2018 10:52
I hope that your navbar took the part of the 100% screen
Helio Goncalves
@srlhyo
Jun 18 2018 10:52
ye... but that is not really the solution as I will add more images in the fures
dinesh
@1532j0004kg
Jun 18 2018 10:52
then try with subtract the navbars height.
Helio Goncalves
@srlhyo
Jun 18 2018 10:55
doesn't work
dinesh
@1532j0004kg
Jun 18 2018 10:55
you tried
?
Helio Goncalves
@srlhyo
Jun 18 2018 10:55
ye
unless I don't know what you mean
perhaps you could give me an example
dinesh
@1532j0004kg
Jun 18 2018 10:56
can you please tell the height of your navbar
Helio Goncalves
@srlhyo
Jun 18 2018 10:57
it's auto
dinesh
@1532j0004kg
Jun 18 2018 11:00
So I mean that calculate you navbar height ( here i think 632) ... From there, screen total height - navbar height.
abraham anak agung
@padunk
Jun 18 2018 11:02
@srlhyo you need JS to do that. maybe this
btw i got to go, happy coding :smile:
Helio Goncalves
@srlhyo
Jun 18 2018 11:05
thanks both of you .
Great help!
Ali Bulut
@ali27001
Jun 18 2018 11:05
How do I update the sequence in another file with JavaScript
I want to update the array out dynamically
how to dynamically replace any text with js
Claudio Restifo
@Marmiz
Jun 18 2018 11:20
@ali27001 you can use textContent to change the text of a selected element
Vladislav Ivanov
@developer4eto
Jun 18 2018 11:21
@ali27001 document.getElementById("something").innerHTML = "something";
Claudio Restifo
@Marmiz
Jun 18 2018 11:22
innerHTML has security risks tho :smile:
worth mentioning
Simon Cordova
@gbsimon87
Jun 18 2018 11:22
Hey all, was wondering if I could get some help.
Generating a table in React, I have a number of categories as table headers.
Underneath, in the table body, I iterate and get the table rows with the names of the players.
I'd like to fill in the table rows with table cells that to match the amount of categories up top.
I hope that makes sense, here is an image to illustrate.
Screen Shot 2018-06-18 at 12.21.19 PM.png
Vladislav Ivanov
@developer4eto
Jun 18 2018 11:26
@Marmiz you're right
@Marmiz use jQuery instead
Olga
@OStefani
Jun 18 2018 12:01
hi, I follow the FCC Curriculum and have a problem with the "Create a Controlled Input" it is not tested at all. I tried to use it in CodePen, but there is a mistake which I don't see. Please help me to find it. What is wrong with my code?
Ali Bulut
@ali27001
Jun 18 2018 12:03
@Marmiz > https://developer.mozilla.org/en-US/docs/Web/API/Node/textContent Is the external file changed by this?
Tom
@moT01
Jun 18 2018 12:36
@OStefani try removing the () in the element where you call handleChange()
Olga
@OStefani
Jun 18 2018 12:37
@moT01 this works, thanks
Marc
@MWBauer
Jun 18 2018 13:57
Morning folks
:coffee:
niknows
@niknows
Jun 18 2018 14:11
moooooorning
Stephen James
@sjames1958gm
Jun 18 2018 14:27
Hello
abraham anak agung
@padunk
Jun 18 2018 14:32
@sjames1958gm helloo.. long time not seeing you here :smile:
Stephen James
@sjames1958gm
Jun 18 2018 14:40
Work had been busy
Developing some angular and graphql
Marc
@MWBauer
Jun 18 2018 14:43
cool
other than that, how are you
Do you have a moment to help me figure out how to link my css/js to html?
I know the concept...but there's something escaping me.
Stephen James
@sjames1958gm
Jun 18 2018 14:48
Sure
Marc
@MWBauer
Jun 18 2018 14:50
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>8.7 Random Image Generator using Arrays</title>
    <link rel="stylesheet" type="text/css" href="ranimg87.css">
 </head>

    <body>
        <script src="ranimg87.js">

    </script>
         <p>Click Refresh (or Reload) to run the script again</p>
    </body>
    </html>
I have a sample html that I've been trying to use as an example. But in following it it still won't work. So...there's something somewhere that isn't right.
Dhaval Vira
@dhavalveera
Jun 18 2018 14:51
what is not working ?
Marc
@MWBauer
Jun 18 2018 14:52
I try to run the html and it isn't seeing the js
not sure it's seeing the css
Helio Goncalves
@srlhyo
Jun 18 2018 14:53
@MWBauer what is your project folder like?
it might be the issue there.
there might be an issue with the paths
Marc
@MWBauer
Jun 18 2018 14:53
I have a css folder and a js folder. Then I have a ranimg87 folder for the html.
Dhaval Vira
@dhavalveera
Jun 18 2018 14:53
then you have to specify that in which folder your js files is
Helio Goncalves
@srlhyo
Jun 18 2018 14:54
so you got the files inside the folders tight?
that is the issue
Marc
@MWBauer
Jun 18 2018 14:54
C:\Devfun\ServerTests\public\js\ranimg87.js is my path
Helio Goncalves
@srlhyo
Jun 18 2018 14:54
so
the js folder is missing
ok?
Marc
@MWBauer
Jun 18 2018 14:54
just after public
Helio Goncalves
@srlhyo
Jun 18 2018 14:55
src="js/ranimg87.js
and the same for the css
Marc
@MWBauer
Jun 18 2018 14:55
<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>8.7 Random Image Generator using Arrays</title>
    <link rel="stylesheet" type="text/css" href="css/ranimg87.css">
 </head>

    <body>
        <script src="js/ranimg87.js">

    </script>
         <p>Click Refresh (or Reload) to run the script again</p>
    </body>
    </html>
Like that?
Dhaval Vira
@dhavalveera
Jun 18 2018 14:56
Yes
Helio Goncalves
@srlhyo
Jun 18 2018 14:56
yes
just like that
well done!
Marc
@MWBauer
Jun 18 2018 14:56
It still isn't displaying.
Dhaval Vira
@dhavalveera
Jun 18 2018 14:56
what is your CSS & JS Code is
Stephen James
@sjames1958gm
Jun 18 2018 14:56
@MWBauer Those paths should be relative to the file they are being loaded from.
So if index.html is in a sub folder then you need ../js or ../css
Helio Goncalves
@srlhyo
Jun 18 2018 14:57
ye
@sjames1958gm is right
Marc
@MWBauer
Jun 18 2018 14:57
when you say ../ do you mean to fill in the dots or just use the /?
Helio Goncalves
@srlhyo
Jun 18 2018 14:57
no no
just to say
../js/ranimg87.js
Marc
@MWBauer
Jun 18 2018 14:57
js/file/js
yeah
ok
Stephen James
@sjames1958gm
Jun 18 2018 14:57
@MWBauer ../js/ranimg87.js means go up one level and then go into js and load ranimg87.js
Marc
@MWBauer
Jun 18 2018 14:58
I understand the concept there, but since that hasn't been working...I'm getting lost on what's wrong.
var pictures = ["CPE", "EPT", "GPP", "GUI", "PERF", "PORT", "SEO"];
//pick a random image from the pictures array and displays by crating an img tag and appending the src attributes to the filename
document.write("<img src = \"87RanImg/fig08_07" + pictures[Math.floor(Math.random() * 7)] + ".gif\" />");

/*const arr = [
  "C:\Devfun\ServerTests\public\fig08_07\CPE.gif",
  "C:\Devfun\ServerTests\public\fig08_07\EPT.gif",
  "C:\Devfun\ServerTests\public\fig08_07\GPP.gif",
  "C:\Devfun\ServerTests\public\fig08_07\GUI.gif",
  "C:\Devfun\ServerTests\public\fig08_07\PERF.gif",
  "C:\Devfun\ServerTests\public\fig08_07\PORT.gif",
  "C:\Devfun\ServerTests\public\fig08_07\SEO.gif"
];

let oImg = document.createElement("img");
oImg.setAttribute('src', arr[Math.floor(Math.random()*7)])0.;
document.body.appendChild(oImg);*/
That's my js
I commented someone else's code out for now.
thanks @sjames1958gm
Helio Goncalves
@srlhyo
Jun 18 2018 14:58
well done!
Marc
@MWBauer
Jun 18 2018 14:58
Do you see something wrong with the js?
in the js I'm trying to access the fig08_07 folder for the images
Helio Goncalves
@srlhyo
Jun 18 2018 15:00
there is nothing wrong apart from the path
you need to be careful with it
guys... a need a massive favor
Marc
@MWBauer
Jun 18 2018 15:00
what is it?
Helio Goncalves
@srlhyo
Jun 18 2018 15:01
can you help me understand why my page looks fine in big screens but soon as it resized, it looks a mess?
Stephen James
@sjames1958gm
Jun 18 2018 15:01
@MWBauer
\""87RanImg/fig08_07" I think you need two "" at the start one for the HTML and one for the js
I would use console.log to output the computed path
Helio Goncalves
@srlhyo
Jun 18 2018 15:02
I know the issue is in the portfolio section but I cant figure out what need doing to work fine in any device
Dhaval Vira
@dhavalveera
Jun 18 2018 15:02
@srlhyo coding please
Marc
@MWBauer
Jun 18 2018 15:02
I put the " in and it highlights the 87ranimg
Helio Goncalves
@srlhyo
Jun 18 2018 15:04
@dhavalveera you be able to see the code on the codepen, right?
Dhaval Vira
@dhavalveera
Jun 18 2018 15:04
No
Helio Goncalves
@srlhyo
Jun 18 2018 15:04
ok
Stephen James
@sjames1958gm
Jun 18 2018 15:04
"<img src = \"" + "87RanImg/fig08_07/" + pictures[Math.floor(Math.random() * 7)] + ".gif" + "\" />"
Helio Goncalves
@srlhyo
Jun 18 2018 15:05
@dhavalveera and now?
Dhaval Vira
@dhavalveera
Jun 18 2018 15:05
Yes @srlhyo
Helio Goncalves
@srlhyo
Jun 18 2018 15:05
ahha
thanks.
Marc
@MWBauer
Jun 18 2018 15:07
thanks @sjames1958gm
I made the change and it still isn't displaying anything.
brb
Marc
@MWBauer
Jun 18 2018 15:15
back
were there anymore thoughts on how to make this work?
I'm trying to read through stackoverflow
Stephen James
@sjames1958gm
Jun 18 2018 15:49
Assign the path to a variable and console.log the variable to see what the value is
Or use the devtools inspector to examine the <a> tag src value
TonyRednil
@TonyRednil
Jun 18 2018 16:12
Has anyone on here finished the "Make a survey page" challenge on free code camp?
mpmaan
@mpmaan
Jun 18 2018 16:13
@TonyRednil I had completed it
TonyRednil
@TonyRednil
Jun 18 2018 16:13
@mpmaan I guess you haven't completed it after the update?
mpmaan
@mpmaan
Jun 18 2018 16:14
I completed it last week.
TonyRednil
@TonyRednil
Jun 18 2018 16:15
How did you do the part about the html5 validation error? I know I can do it in javascript but not sure about html or css
I used a pattern attribute on my input element but apparently that isn't good enough
mpmaan
@mpmaan
Jun 18 2018 16:18
try to use required attribute
TonyRednil
@TonyRednil
Jun 18 2018 16:19
Won't that just make it so that they are required to fill in that part of the form before submitting it?
I also already have that in there.
mpmaan
@mpmaan
Jun 18 2018 16:20
sorry ,this should work : for email => type = email and for age => type=number
use these in the input fields
TonyRednil
@TonyRednil
Jun 18 2018 16:21
maybe that's what's causing it. I'm currently using pattern="[0-90]"
mpmaan
@mpmaan
Jun 18 2018 16:21
did you fail only the test for age?
TonyRednil
@TonyRednil
Jun 18 2018 16:21
it was also a fail for the age being outside the age range.
mpmaan
@mpmaan
Jun 18 2018 16:22
for age I used min=1 max=90
TonyRednil
@TonyRednil
Jun 18 2018 16:22
Here is what I did: <input type="number" name="age" id="number" pattern="[0-90]" placeholder="Age" required><br>
Christopher McCormack
@cmccormack
Jun 18 2018 16:23
@mpmaan when testing min and max I found you have to wrap in quotes or it didn't work properly
mpmaan
@mpmaan
Jun 18 2018 16:24
yeah, of course..i typed that in a hurry
TonyRednil
@TonyRednil
Jun 18 2018 16:24
adding that min and max though fixed that issue. I guess the javascript is only used if you actually want to change the error message.
mpmaan
@mpmaan
Jun 18 2018 16:25
javascript is not required for this challenge...i don't know about regex yet
does pattern attribute work only when JS is used?
TonyRednil
@TonyRednil
Jun 18 2018 16:25
That's why I'm trying not to use it. I don't understand why my labels of the different objects are failing though... pattern isn't the js I was referring to so no?
https://codepen.io/TonyRednil/pen/WyjxGy?editors=1000
ah, it's because I used p elements instead of label elements.
mpmaan
@mpmaan
Jun 18 2018 16:28
also you need to use something like this <label for="anything_here"><input id="anything_here">
TonyRednil
@TonyRednil
Jun 18 2018 16:28
I'm confused what that is exactly for.
mpmaan
@mpmaan
Jun 18 2018 16:30
the value of id attribute for input or any other valid element should be same as the value of the for attribute of the label tag
TonyRednil
@TonyRednil
Jun 18 2018 16:30
why is that necessary?
mpmaan
@mpmaan
Jun 18 2018 16:31
This kind of links the label to the element with the corresponding element with same id
When you click on the label the corresponding input field will be activated
For example
TonyRednil
@TonyRednil
Jun 18 2018 16:31
Why would someone click on the label?
mpmaan
@mpmaan
Jun 18 2018 16:32
<label for="radio1>Cat</label>
<input id="radio1" type="radio">
if you use checkbox or radio buttons then it is really helpful
You can click on the label to check the checkbox rather than pointing your mouse pointer over the small checkbox
TonyRednil
@TonyRednil
Jun 18 2018 16:33
I still don't understand why I would use that when I can just use the name attribute for check box and radio forms.
oh ok. That makes more sense.
mpmaan
@mpmaan
Jun 18 2018 16:34
The name attribute is not what gets displayed on the web-page
It is the text between the opening and closing tags of the label element .
for example
<input type="text" name="first-name" value="Tony">
When the form will be submitted(that is sent to the server) the data is submitted in the form of key : value pairs
TonyRednil
@TonyRednil
Jun 18 2018 16:38
ok, did I do it right?
mpmaan
@mpmaan
Jun 18 2018 16:38
For the above example, key="first-name" and value="Tony"
TonyRednil
@TonyRednil
Jun 18 2018 16:38
I just changed it
mpmaan
@mpmaan
Jun 18 2018 16:39
i'm checking on codepen
You corrected the radio buttons and changed the p tags to label tags
You also need to add for attribute in the labels
whose value should be same as the value of id attribute of corresponding input field
Clicking on forum, wiki, gitter etc doesn't check the corresponding checkbox because you haven't provided id to each option
mpmaan
@mpmaan
Jun 18 2018 16:45
After providing them id use a label tag for each option, for example
<input type="checkbox" name="improve" value="Videos">Videos<br>
should be <input type="checkbox" name="improve" value"Videos" id="some-id"><label for="some-id"></label>
TonyRednil
@TonyRednil
Jun 18 2018 16:46
Are you talking about using the for attribute for the name, age, and email parts? I don't understand why it's necessary there when I clearly give them a text input box.
mpmaan
@mpmaan
Jun 18 2018 16:46
No for the checkboxes
TonyRednil
@TonyRednil
Jun 18 2018 16:47
Oh, I thought I did that. I guess I missed those ones. Did I at least get the ones I did correct?
mpmaan
@mpmaan
Jun 18 2018 16:48
yeah you corrected the radio buttons
check my last example above
TonyRednil
@TonyRednil
Jun 18 2018 16:48
Alright awesome, thanks.
mpmaan
@mpmaan
Jun 18 2018 16:50
I'm unable to see the button for running tests on codepen. I wanted to see which tests you are failing
For comments you have to use textarea instead of input field
mpmaan
@mpmaan
Jun 18 2018 17:00
Any hint or solution about how to solve this challenge?
Brad
@bradtaniguchi
Jun 18 2018 17:02
@mpmaan Well, without giving the answer away, you could just do len = str.lengthwhich is the old-school straight forward way
BUT, thats doesn't work for this challenge haha
mpmaan
@mpmaan
Jun 18 2018 17:03
lol i tried that
Brad
@bradtaniguchi
Jun 18 2018 17:03
Assigning values with the destructuring method in ES6 is pretty "backwards"
const { KEY_I_WANT_TO_GET_VALUE_FROM: VAR_I_AM_CREATING } = OBJECT_IM_GETTING_KEY_FROM;
thats the "syntax" kinda
mpmaan
@mpmaan
Jun 18 2018 17:04
thanks that might help me
Brad
@bradtaniguchi
Jun 18 2018 17:05
so the "object" is on the left, which is used to "deconstruct" whats on the right, and the KEY on the left, is what you WANT TO GET, and the value of the key, is what your assigning to
mpmaan
@mpmaan
Jun 18 2018 17:12
Hooray I did it
lol Thank you
Now I can sleep peacefully :smile:
Brad
@bradtaniguchi
Jun 18 2018 17:17
@mpmaan np :D, I dont like that challenge or the capability of JS its really confusing and I don't see how it helps that much, other than makes people confused haha'
DarkxPunk
@DarkxPunk
Jun 18 2018 17:33
I have a curious question about CSS grid...
Animating grid item positions...
Marouane R
@mrassili
Jun 18 2018 20:27
Hello people!
Anyone know of an official walk-through on how to use Material-UI with CRA?
Christopher McCormack
@cmccormack
Jun 18 2018 21:51
@mrassili I know of know walk-through, but I recently used it in my own app so can probably help a little