These are chat archives for FreeCodeCamp/HelpFrontEnd

6th
Aug 2018
abraham anak agung
@padunk
Aug 06 2018 00:22
@sabin20 show you app.js
Moisés Man
@moigithub
Aug 06 2018 00:23

similar to render method.. it should have only 1 parent child @sabin20
soo u cant do

<Router>
   <Route>
   <Route>
 </Router>

:point_up: 2 route child (wrong) it must hve only 1 tag elemnt.. and inside u can put as many as u want

A <Router> may have only one child element

<Router>
 <div>   <!-- wrapper -->
     <Route>
      <Route>
 </div>
 </Router>
@padunk
abraham anak agung
@padunk
Aug 06 2018 00:29
@sabin20 try to wrap it with Switch from react-router-dom. Jus like @moigithub said. Router may have only one child element.
glitz20
@glitz20
Aug 06 2018 00:32
@padunk in app.js?
abraham anak agung
@padunk
Aug 06 2018 00:33
@sabin20 yes, like
<Switch>
  <Route.... />
  <Route.... />
</Switch>
glitz20
@glitz20
Aug 06 2018 00:34
 render() {
        <Router>

            <div>
            <Switch>
                <Route path='/' component={App} />
            <Route path='/add-item' component={AddItem} />
            <Route path='/edit/:id' component={EditItem} />
            <Route path="/signup" component={Signup} />
            <Route path="/login" component={LoginForm} />
            <Route path="/home" component={Home} />

                    <Route path='/description/:id' component={Description} />
            </Switch>
        </div>

        </Router>
smth like this in app.js?
abraham anak agung
@padunk
Aug 06 2018 00:38

@sabin20 you can have like this in app.js

            <Switch>
                <Route exact path='/' component={App} />
                <Route path='/add-item' component={AddItem} />
                <Route path='/edit/:id' component={EditItem} />
                <Route path="/signup" component={Signup} />
                <Route path="/login" component={LoginForm} />
                <Route path="/home" component={Home} />
                <Route path='/description/:id' component={Description} />
            </Switch>

and in index.js

<Router>
  <App />
</Router>
But it just a matter of preference, you can have like the one you post too
glitz20
@glitz20
Aug 06 2018 00:39
@padunk should it be under render() or under return ()?
abraham anak agung
@padunk
Aug 06 2018 00:40
Don't forget to put exact on path='/' and <Route path='*' component={Not Found} for other routes that not define
under return
glitz20
@glitz20
Aug 06 2018 05:53
@alpox @padunk when I add the routes in app.js, they show up in app.js itself, but I want to route to a new page, for instance /login is supposed to render in a new page
abraham anak agung
@padunk
Aug 06 2018 07:09

@sabin20 it is. In app.js you just define the route, if you make a button like

<Link to='/login'>
  <button>Login</button>
</Link>

it will route to a new page

Have you read the docs example?
Jack Lyons
@JackEdwardLyons
Aug 06 2018 09:13
anyone need any help with anything?
mauser91
@mauser91
Aug 06 2018 11:30

Made this application for adding books.

LIVE:
https://book-grid.herokuapp.com/

Interested in feedback on UI, additional features, performance etc, anything really

tundeiness
@tundeiness
Aug 06 2018 12:21
@JackEdwardLyons oh yes I do!!! live saver

So guys i'm on the technical documentation page project and unlike other projects the use stories are quite awkward. So i need help deconstructing the sematic setup. Now the idea I have is this:

<main>
</main>

tundeiness
@tundeiness
Aug 06 2018 12:27

So guys i'm on the technical documentation page project and unlike other projects the use stories are quite awkward. So i need help deconstructing the sematic setup. Now the idea I have is shown below after reading through the use stories:

<main>
<div>
<nav></nav>
<nav></nav>
<nav></nav>
</div>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</main
can anyone confirm this is accurate or it is not?

Ashan Mohammed
@AshanMohammed
Aug 06 2018 12:32
Help!
Why is the first features div is aligning with a left margin?
https://codepen.io/ashan_zeroxster/pen/mjpYdz?editors=1100
Tiago Correia
@tiagocorreiaalmeida
Aug 06 2018 12:35
justify-content: flex-end; maybe
its the issue
also the icons dont have the same width so they wont look nicely align on the left
Mohammed Boudad
@matrixersp
Aug 06 2018 14:07
Hey guys, I need help on this
How to get rid of the spaces around the page when I reduce the size of the window
newmoon
@newmoon
Aug 06 2018 16:51
@AshanMohammed Use the fa-fw class so your font awesome icons have the same width. Replace <form> with </form> on line 26 of your HTML. Remove the 30% width for the images + 80% width for text, and give the parent element a max-width and auto left/right margin instead.
@matrixersp Looks like you got it sorted out. Nice job. I noticed display: fixed in your CSS, which isn't valid. You may want to revisit that when you get a chance.
glitz20
@glitz20
Aug 06 2018 16:56
@padunk I do have smth like this
<Link to="/login" className="btn btn-link text-secondary">
                                    <span className="text-secondary">login</span>
                </Link>
in navbar.js
but the login loads in the same page i.e app.js
Emil
@aguyinmontreal
Aug 06 2018 17:04

Hi guys! I need some CSS selector help.

I have [id^=txtStreetAddress]:visible

But instead, I need to select all elements which have an id that starts with txtStreetAddress but that their parent is visible

how can I do that?
newmoon
@newmoon
Aug 06 2018 17:10
@aguyinmontreal There is no way to select a parent element in CSS. You would need to use JavaScript.
Moisés Man
@moigithub
Aug 06 2018 17:13
what tag the parent have ?? div ?
maybe
div:has(> [id^=txtStreetAddress])
will select any div which contains a child with that id
not sure about visible... maybe IF a class... mdn dont show any of that
https://developer.mozilla.org/es/docs/Web/CSS/:has
Emil
@aguyinmontreal
Aug 06 2018 17:15
@newmoon ooopsss... I wanted to say Jquery selector. Not sure it changes something.
@moigithub yes, parent is div
in fact my jquery code is this let $street = $container.find('[id^=txtStreetAddress]:visible');
Moisés Man
@moigithub
Aug 06 2018 17:17
jquery do have a parent() selector (if i recall)
newmoon
@newmoon
Aug 06 2018 17:17
@aguyinmontreal Ahh, in that case check out .parent() https://api.jquery.com/parent/. It might be something like:
$([id^=txtStreetAddress]).parent().filter(":visible")
@moigithub When recommending :has to people learning front end, you may want to talk about browser support as well. Not really supported in any browsers as far as I know: https://developer.mozilla.org/en-US/docs/Web/CSS/:has
Really going to be useful though when browsers do support it
Emil
@aguyinmontreal
Aug 06 2018 17:19
@newmoon but that code will select the txtStreetAddress element, or parent?
newmoon
@newmoon
Aug 06 2018 17:20
@aguyinmontreal It selects the visible parents of all elements with an id starting with txtStreetAddress.
Should select it anyway :) send us some code and we can verify
Emil
@aguyinmontreal
Aug 06 2018 17:20
@newmoon yeah, but I want to select the txtStreetAddress elements :D not their parents. You get me?
Moisés Man
@moigithub
Aug 06 2018 17:20
Ooops ! :) didnt saw that @newmoon
u can append children() selector after @aguyinmontreal
or find()
Emil
@aguyinmontreal
Aug 06 2018 17:21
u can append child() selector after ===> no, because there are other children, that I don't want to select :D
newmoon
@newmoon
Aug 06 2018 17:23
@aguyinmontreal The code I gave above will give you the parents. You can then drill back down to select the exact children you want. Send us a codepen if you're having trouble getting it working.
Emil
@aguyinmontreal
Aug 06 2018 17:23
I guess $([id^=txtStreetAddress]).parent().filter(":visible").children([id^=txtStreetAddress]); would do
not sure if there's something better?
newmoon
@newmoon
Aug 06 2018 17:24
Might be, but it's hard to tell without seeing any code
Emil
@aguyinmontreal
Aug 06 2018 17:30
oopss... missing quotes and maybe we can merge parent and filter?
$('[id^=txtStreetAddress]').parent(':visible').children('[id^=txtStreetAddress]');
what do you think?
newmoon
@newmoon
Aug 06 2018 17:37
@aguyinmontreal The docs say to use .filter() for performance reasons. All of these selectors can get expensive.
Emil
@aguyinmontreal
Aug 06 2018 17:43
so $('[id^=txtStreetAddress]').parent().filter(':visible').children().filter('[id^=txtStreetAddress]'); would be better?
newmoon
@newmoon
Aug 06 2018 17:46
@aguyinmontreal Can you share the HTML + jQuery you have so far? I'm sure there's a cleaner way.
Put it in a codepen or jsfiddle if possible
Alvin
@AlvinW89
Aug 06 2018 18:26
For the new tribute page test, how do I get the test to accept image resize
newmoon
@newmoon
Aug 06 2018 18:29
@AlvinW89
AssertionError: Use the "display" style property with a value of "block" forresponsive images.: expected 'inline' to equal 'block'
Alvin
@AlvinW89
Aug 06 2018 18:29
Oh
newmoon
@newmoon
Aug 06 2018 18:30
I think you also want to use max-width instead of width:
#image {
  display: block;
  max-width: 100%;
  margin: auto;
  border: 2px solid;
  border-bottom: 1px solid ;
  border-radius: 5px;
  box-shadow: 0 -5px 20px #FFC0CB;
}
Alvin
@AlvinW89
Aug 06 2018 18:30
I know where your referring too, it look like jibberish to me at first
newmoon
@newmoon
Aug 06 2018 18:31
And, of course, display block means you need to center the image :laughing: so many changes to get a test case to pass lol
Alvin
@AlvinW89
Aug 06 2018 18:31
XD, I’m just coming back to FCC after some time. Man things have changed
100% now
Little surprised it didn’t really show bootstrap, is it kind of phasing out?
newmoon
@newmoon
Aug 06 2018 18:34
I haven't started FCC, but someone the other day said it's in a different section of the course now
Bootstrap is in the Front-end Libraries Certification
Alvin
@AlvinW89
Aug 06 2018 18:36
AH, ok. It nice to keep your skills up. I just always ran into an issue where I couldn’t compelete. I’m now a homemaker because we had a newborn. I couldn’t keep up with school, so I do this on my spare time.
Well, I hope to catch you guys around… Baby just woke up.
Emil
@aguyinmontreal
Aug 06 2018 18:44
@newmoon thanks!
Mithu Kurian
@mithukurian
Aug 06 2018 20:50
Can some help me to crack this challenge
What's wrong with this code

const JSX =<div>

<h1></h1>

<p></p>

<ul>

<li></li>

<li></li>

<li><li>
</ul>
</div>

Its the Reactjs challenge
Moisés Man
@moigithub
Aug 06 2018 21:07
ur last li not closed ? @mithukurian
Mithu Kurian
@mithukurian
Aug 06 2018 21:09
@moigithub Perfect!!!
Thank you so much!!!
You saved my time
Emil
@aguyinmontreal
Aug 06 2018 21:17
@moigithub I was going to say it, but I thought it was too obvious :D