These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Aug 2018
inovramadani
@inovramadani
Aug 04 2018 00:40

hi guys, just wonder from the syntax :

import React from 'react';
import ReactDOM from 'react-dom';

how javascript find the exact library path?
because there is a kind of import syntax that specifies the file path to import to like below.

import Anything from '/folder/anything.js'
Christopher McCormack
@cmccormack
Aug 04 2018 01:06
@inovramadani without a path it defaults to the node_modules directory
inovramadani
@inovramadani
Aug 04 2018 01:14
so if I write sth like below, javascript also will try to find in node_modules folder?
import Name from 'name';
then I can add a folder named "name" and corresponding js file to the node_modules?
Christopher McCormack
@cmccormack
Aug 04 2018 01:30
@inovramadani don't touch node_modules, instead create your own hierarchy. if you create a new file called name in the root of your directory, you can use
import Name from './name'
Ashan Mohammed
@AshanMohammed
Aug 04 2018 06:59
How do i make the navigation in the right to align side by side. Not on a column
https://codepen.io/ashan_zeroxster/pen/mjpYdz?editors=1100
abraham anak agung
@padunk
Aug 04 2018 08:17
@AshanMohammed you have a typo in your html. closing tag should bediv not dive
hensn5250
@hensn5250
Aug 04 2018 08:43
@padunk
fejkens
@fejkens
Aug 04 2018 10:24

https://codepen.io/fejkens/pen/varvdE

Hi, I can't figure out why the <a> element is overflowing a couple of pixels below the project images. I am also trying to get the figcaption tags to fill in all remaining space in the figure tag, but when I set the height to 100% it just stretches them to the bottom of the page

fejkens
@fejkens
Aug 04 2018 10:43
font-size: 0; on the a tag gets rid of it below the image, but my figcaption is still not filling the whole space below the image
Michael Pang
@Phango
Aug 04 2018 10:51
is this what you want?
Screen Shot 2018-08-04 at 12.51.18.png
@fejkens
fejkens
@fejkens
Aug 04 2018 13:07
No, I want them to be vertically centered in the space below the image @Phango
Moisés Man
@moigithub
Aug 04 2018 13:54
set a fixed height to ur figcaption.. ie height: 50px;
fejkens
@fejkens
Aug 04 2018 14:22
@moigithub Doesn't really work because figcaption then overflows outside of the border. So my thinking is: I have a fixed container - figure that has a set height of 360px, the only two elements inside the figure are my img and figcaption. If the img is set to fixed height of 320px, then that leaves me with 40px on the bottom. So surely if I set the height of my figcaption to 100% it should take all of the remaining space (If there is no margin/padding and I can't see any), is this right?
Moisés Man
@moigithub
Aug 04 2018 14:24
ur align-items :center doesnt work.. cuz default height is auto.. so it adapt to its content..
means ther are NO room for ur element to move(center)
fejkens
@fejkens
Aug 04 2018 14:29
I know that, my problem is that the figcaption container starts a couple of pixels below the image and I can't find a way to get it so start just below it so that I would have 320px/40px split in the container between the image and the caption
image.png
Next gigi hadid💁
@1Droka_twitter
Aug 04 2018 14:42
hello i want to make the footer at the end of the page regardless how hight of the content of the page
when i do the footer height is 100 px in a page
when i wnna use it in another page 100 px in the middle
not bottom
Christopher McCormack
@cmccormack
Aug 04 2018 15:15
@1Droka_twitter the element above your footer will need to be tall enough to push the footer to the bottom. You can do it using flex by having the main body have flex-grow set to 1. codepen
Daniel Simeonov
@dbsimeonov
Aug 04 2018 17:27
lol.. I've just checked the google maps api, and it seems that they have changed it and now you need to pay? Or I'm blind?
Christopher McCormack
@cmccormack
Aug 04 2018 17:31
@dbsimeonov you should be able to use it with an api key for free provided you don't exceed a certain quota
last I checked anyhow
Daniel Simeonov
@dbsimeonov
Aug 04 2018 17:33
Can you refer me to a link as I can not find it for the free api.. it just requires me a billing information anywhere I click
Christopher McCormack
@cmccormack
Aug 04 2018 17:35

I see...

As of June 11, 2018, you must enable billing with a credit card and have a valid API key for all of your projects.

Guess it may be time to explore other options
Daniel Simeonov
@dbsimeonov
Aug 04 2018 17:44
Any ideas for alternative?
Christopher McCormack
@cmccormack
Aug 04 2018 17:56
Maybe bing or openstreetmap
Brad
@bradtaniguchi
Aug 04 2018 17:59
seems like most of the google maps api is under the $200 free credits per month
still need to sign up for billing tho, since you can just go over and they charge you, rather than cutting you off
Christopher McCormack
@cmccormack
Aug 04 2018 17:59
right
Michael Pang
@Phango
Aug 04 2018 18:06
@fejkens I would suggest separating out the grid system you have in place from the content that is supposed to be in that grid. At the moment, the css grid is working against the other styles on the elements. If I was to build it, I would separate them
newmoon
@newmoon
Aug 04 2018 18:07
@dbsimeonov Apple Maps JavaScript API is free: https://developer.apple.com/documentation/mapkitjs/mapkit
Michael Pang
@Phango
Aug 04 2018 18:27
I removed the use of css grid, and simply went with flex boxes
Up to you though if you think its an acceptable solution or not
zootechdrum
@zootechdrum
Aug 04 2018 19:44
hey everyone
What can i change in my style sheet
for my radio buttons to lign up with the text.
zootechdrum
@zootechdrum
Aug 04 2018 20:01
nevermind i figured it out
Rob
@PGFracing
Aug 04 2018 20:23
any ideas why I’m not getting a padding-bottom of 22px on my bottom division?
Moisés Man
@moigithub
Aug 04 2018 20:26
i see the padding there.. (inspect element on ur browser devtools )
Rob
@PGFracing
Aug 04 2018 20:26
mmm i don’t see it?
Rob
@PGFracing
Aug 04 2018 20:28
ya it’s there but doesn’t show on browser
no image
Moisés Man
@moigithub
Aug 04 2018 20:31
https://prnt.sc/keq3v8
the green/yellow is the padding bottom
Rob
@PGFracing
Aug 04 2018 20:31
when I change it to 100px nothing happens so I think that is just the basic space
Moisés Man
@moigithub
Aug 04 2018 20:33
probably u want padding-top instead ? (or margin-top)
or apply padding-bottom to the (previous)element on top of that footer
Rob
@PGFracing
Aug 04 2018 20:34
that division want more white space under the share buttons
Moisés Man
@moigithub
Aug 04 2018 20:38
u also have a media query for less than 1200px
tundeiness
@tundeiness
Aug 04 2018 20:40
guys I need help with some of the user stories in the "Build a Technical Documentation Page " project. I'm not clear with the following statements:
User Story #8: I can see a nav element with a corresponding id="navbar".
User Story #9: The navbar element should contain one header element which contains text that describes the topic of the technical documentation.
User Story #10: Additionally, the navbar should contain link (a) elements with the class of nav-link. There should be one for every element with the class main-section.
User Story #11: The header element in the navbar must come before any link (a) elements in the navbar.
Now my understanding is that the nav element should be within a header element and not vice versa as the above statement is making me to understand. Naturally I should have a header element which has a nav element in it. Can anyone help with making it clearer? Thanks.
Johnny
@JohnnyBizzel
Aug 04 2018 21:10
@tundeiness Link to project so far?