These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Aug 2018
roxxlen
@roxxlen
Aug 20 2018 07:06

@Ohshi60 yes i tried,

<h4><s>Google</s>Alphabet</h4>
      <hr>
      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>

but it says "The hr tag should come between the title and the paragraph."

AJ Brommy
@AJ-Brommy
Aug 20 2018 13:40
<hr /> @roxxlen ?

Ah yes I remember this now, there is a bug in this one. If you click the "get a hint" button it will take you to another page, scroll down to the part "bug in the lesson" and you will find another link, click on that for the explanation and solution. Essentially, you've done nothing wrong. It's the program fault. You need to switch..

<p><em></em></p>

to..

<em><p></p></em>
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 14:17

Im doing the redux exercises and cant seem to pass this problem: https://learn.freecodecamp.org/front-end-libraries/redux/handle-an-action-in-the-store

here is my code snippet that is failing:

const reducer = (state = defaultState, action) => {
  // change code below this line
  if (action.type === 'LOGIN') {
    return {
     state.login = true;
    }
  }
  return state;
  // change code above this line
};
Aditya
@ezioda004
Aug 20 2018 14:20
@willybeans Wrong syntax, objects have key: value pair.
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 14:21
ah

what is the proper syntax?
This fails:

    return {
     state.login:  true;
    }

this fails:

return state {
 login: true
}
Aditya
@ezioda004
Aug 20 2018 14:24
Just return
{
  login: true
}
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 14:24
love you
Aditya
@ezioda004
Aug 20 2018 14:24
:tada:
zootechdrum
@zootechdrum
Aug 20 2018 15:56
I cant seem to change the id when I do a key press. How can I change the I.D it is referencing on key press.
The only way I can get “same” to print to the console is by first clicking any of the 3 buttons first and then pressing that same key on the keyboard. However if I try to print “same” without clicking on that button first it does not work
hello everyone
roxxlen
@roxxlen
Aug 20 2018 16:14
@AJ-Brommy many thanks, thanks for your time
AJ Brommy
@AJ-Brommy
Aug 20 2018 16:18
You're welcome @roxxlen :)
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:27
making a form with bootstrap and just curious if there is a way to make a space between the form box and the text preceding the box:
image.png
Mandeep
@mandeephub
Aug 20 2018 16:28
any 1 online
Christopher McCormack
@cmccormack
Aug 20 2018 16:29
probably someone
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:29
lol
Mandeep
@mandeephub
Aug 20 2018 16:30
@willybeans try using <tr> <td>
Christopher McCormack
@cmccormack
Aug 20 2018 16:30
@willybeans try adding margins, if that doesn't work you may need to nest the text in something with shape, as label is like a span I believe with no shape unless you change its display type
Mandeep
@mandeephub
Aug 20 2018 16:31
@cmccormack pls any 1 cahn check this code https://codepen.io/mandeep9362/full/QBMzod/
AJ Brommy
@AJ-Brommy
Aug 20 2018 16:31
I believe padding works on a span on the sides?
Mandeep
@mandeephub
Aug 20 2018 16:31
im getting an error a single error
when i run test
Christopher McCormack
@cmccormack
Aug 20 2018 16:32
looks like padding and margin work
I would use margin though

@mandeephub

Each .nav-link element should have an href attribute : expected false to equal true

Mandeep
@mandeephub
Aug 20 2018 16:34
???? i have given link to every link element
Christopher McCormack
@cmccormack
Aug 20 2018 16:35
Nope
you gave it to the li
move it to the a
it will pass
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:35
@cmccormack is it kosher to add inline styles with bootstrap (in react) or would it be better for me to do this in my sass file...whats your opinion?
Mandeep
@mandeephub
Aug 20 2018 16:35
ohhhh
Christopher McCormack
@cmccormack
Aug 20 2018 16:35
@willybeans up to you
I don't like using inline styles for anything but testing
I also don't use a css/sass file anymore, preferring styled-components or JSS
Mandeep
@mandeephub
Aug 20 2018 16:36
@cmccormack thanks
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:37
havent learned about styled components or JSS yet
whats that?
Christopher McCormack
@cmccormack
Aug 20 2018 16:39
Check it out! basically like a component wrapper that adds classnames to your component with associated CSS that you create within a template literal
it's really nice, although personally I'm not a huge fan of that many wrappers
I used JSS with Material-UI in React and found it felt a little more pure, even though it was still CSS-in-JS
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:40
whoa this is very different
Christopher McCormack
@cmccormack
Aug 20 2018 16:40
kind of awkward to do CSS in an object though
It gives a lot of power, being able to pass state or props to the styled components to change style based on state
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:41
@cmccormack when you use this do you still get to see the classnames associated to the DOM objects in the HTML file?
Christopher McCormack
@cmccormack
Aug 20 2018 16:41
yeah it's all still there, they just put it in the head, in a style tag
with styled components its a random class name
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:42
wow, i may mess with this for my next project
looks fun
Christopher McCormack
@cmccormack
Aug 20 2018 16:42
It's pretty fun and pretty easy to get started with
CSS in template literals is awesome
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:43
So what framework do you use that made you get into this?
Christopher McCormack
@cmccormack
Aug 20 2018 16:44
@willybeans here is an example I made that shows some of the flexibility of styled components
@willybeans moving away from frameworks made me get into this
if you mean CSS frameworks
Well, Material-UI is a framework so I shouldn't say that
but that was later and wanted to play with it :)
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:46
Nah, i meant a frontend framework. I figured this would go easily with react
Mandeep
@mandeephub
Aug 20 2018 16:46
@willybeans it might help u
https://jsbin.com/sonebec/edit?html,output
Christopher McCormack
@cmccormack
Aug 20 2018 16:46
Yeah it is for React
May be usable outside React, not sure
newmoon
@newmoon
Aug 20 2018 16:51

@willybeans Bootstrap has built in classes to adjust spacing between elements: https://getbootstrap.com/docs/4.1/utilities/spacing/
So, for your example above mr-3 works pretty well:

        <div class="input-group mx-auto">
          <label for="myInput" class="mr-3">Insert Your URL:</label>
          <input type="url" class="form-control" id="myInput">
          <div class="input-group-append">
            <button type="submit" class="btn btn-primary">Submit</button>
          </div>
        </div>

Example: https://codepen.io/anon/pen/zJYNgr?editors=1000

Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:52
@newmoon aha! just what i needed.
newmoon
@newmoon
Aug 20 2018 16:52
Glad that helped :sunglasses:
Love bootstrap's utilities - makes it real easy
Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 16:53
@newmoon im always hesitant to rewrite the styles. thanks for the solution!
newmoon
@newmoon
Aug 20 2018 16:54
You may also want to consider simply using placeholder text instead of a label. Seems bootstrap encourages that approach instead, and helps simplify the look:
<input type="text" class="form-control" id="myInput" placeholder="Insert Your URL">
newmoon
@newmoon
Aug 20 2018 17:34
@zootechdrum Looks like you are expecting capital letters in your soundLib object. It seems to work fine if I do shift+keypress. You could also normalize keypresses and make everything lower case:
  handleKeyPress(event) {
    if (event.key.toLowerCase() === this.props.keyP.toLowerCase()) {
    ...
Barbara Pentoney
@flyfishingbarbara
Aug 20 2018 17:35
hi @newmoon - do you have experience with vs code and using library vue.js...??
newmoon
@newmoon
Aug 20 2018 17:35
@flyfishingbarbara Hello - yes, and no :) I use VS Code, but haven't played around with vue.js yet
There's a large Vue community here on Gitter: https://gitter.im/vuejs/vue
Barbara Pentoney
@flyfishingbarbara
Aug 20 2018 17:37
so it's my penguin project....i wanted to work in text editor now and im not able to "see' it when i open in browser...
oh good. i looked for a room but didn't see this vuejs/vue...thnx!
newmoon
@newmoon
Aug 20 2018 17:38
Sounds like you may need a HTML Preview extension for VS Code - or set up a web server on your local computer.
Barbara Pentoney
@flyfishingbarbara
Aug 20 2018 17:39
sounds good. i have done some reading and have looked into the 'marketplace' of ext....will look into. thnx again...
subhambapna
@subhambapna
Aug 20 2018 17:41

Hello everyone, I'm new to coding.

I have a query, I was writing code for the navbar. I found whitespace after on the right-hand side. Adding a div and associating it with class="container-fluid" solved the problem,

I did find this on many navbar related tutorials, but on the bootstrap examples none of the navbars had this division. Can someone please help me understand why do they work fine on those sites?

Ghost
@ghost~59209a78d73408ce4f6102e8
Aug 20 2018 17:54
@subhambapna
image.png
subhambapna
@subhambapna
Aug 20 2018 18:00

Okay, I got it.

The newer version has navbar-expand class which automatically solves the problem. On 3.3 or older versions using the container-fluid is important.

Bootstrap has ml-auto and previously it was just navbar-right to move navbar items to right. Why is the upgrade not making things easier? :O
newmoon
@newmoon
Aug 20 2018 18:08
@subhambapna I usually don't use containers, rows, or columns in a bootstrap navbar to ensure it's the full width of the screen. An example based on different containers or no container: https://codepen.io/anon/pen/yxLbjp?editors=1000
Bootstrap 4 is easier :) but definitely a learning curve moving from 3 -> 4. Good luck ;)
subhambapna
@subhambapna
Aug 20 2018 18:14
@newmoon Okay, can you also explain me, what does "navbar-expand-{sm|-md|-lg|-xl} does?"
Jill Lee
@jill-lee
Aug 20 2018 18:26
Anyone here can help me make the form work? Knows PHP?
Tiago Correia
@tiagocorreiaalmeida
Aug 20 2018 18:48
you sure you need php for it @jill-lee ? what's the final purpose?
but if you really need it, there's phpmailer not hard to configure even tough I Haven't used
newmoon
@newmoon
Aug 20 2018 18:54
@subhambapna That class determines the screen size for displaying the mobile collapse menu. https://getbootstrap.com/docs/4.1/components/navbar/#responsive-behaviors
.navbar-expand-sm, for example, will make it so all navbar links show up under the mobile menu on small-sized screens
Jill Lee
@jill-lee
Aug 20 2018 18:54
@tiagocorreiaalmeida I just need to make the form work. I'll check it out. Thanks! :)
Christopher
@bradley1492
Aug 20 2018 19:19

Good evening everyone,

in the Technical Documentation Page challenge how can I fit the menu so that the last entry doesn't get cut off when in mobile view like in my example below?

https://codepen.io/bradley1492/pen/pZrXQz?editors=1100

With the fcc example below it works so that the menu entries in mobile-view fit exactly into the provided container...

https://codepen.io/freeCodeCamp/full/NdrKKL

newmoon
@newmoon
Aug 20 2018 19:36

@bradley1492 If I understand correctly, I think you want this:

#navbar {  
  background-color: cadetblue;
  border-right: 2px solid black;  
  height: 25.8em;
  overflow-x: hidden;
}

#navbar > ul {
  list-style-type: none;
}

Instead of:

#navbar {  
  background-color: cadetblue;
  border-right: 2px solid black;  
}

#navbar > ul {
  list-style-type: none;
  height: 25em;
  overflow: scroll; 
  overflow-x: hidden;
}
You could use calc() to get an exact height for the number of items you want to show.
One suggestion - you'll want your <li> tags to wrap around your <a> tags in a list. Not the other way around.
Christopher
@bradley1492
Aug 20 2018 19:43
@newmoon thanks for your in depth tip I'll check this out :)
Christopher
@bradley1492
Aug 20 2018 19:51
@newmoon How did you know 25.8 em?
Is this how you meant the li and a <li><a href="#Introduction" class="nav-link">Introduction</a></li>?
AJ Brommy
@AJ-Brommy
Aug 20 2018 19:53

@jill-lee PHP won't work unless you have a server to run it. PHP is a "server side" scripting language. So in order for your form to work, if you use PHP, you will need a server running PHP on it, and you will need to access the your page through a URL such as http://localhost/form.php.

Apache is a free web server, often used along with PHP. You may wish to check out Wamp Server.

newmoon
@newmoon
Aug 20 2018 19:54
@bradley1492 Each text line is 1em. You have 0.5em of padding above and below + 1px border. The header is a different size than everything else, but it added up to 25.8
Jill Lee
@jill-lee
Aug 20 2018 19:58
@AJ-Brommy Thank you. I'm looking for someone who could help me make the form work. If you know anyone who is willing to help let me know. Fork on the project im currently working on. I'm using W3S templates
https://codepen.io/phoenix-burn/project/full/AmybmQ/
Christopher
@bradley1492
Aug 20 2018 20:00
@newmoon oh ok thanks
AJ Brommy
@AJ-Brommy
Aug 20 2018 20:08
@jill-lee As far as my knowledge goes, I don't think that is possible. I don't believe CodePen allows for Server Side scripting. I don't think there is a way to do it without server side scripting but I could be wrong. You can use javascript to test that input is correct. for example check that name is less than 50 characters. but to input it to a database, or send an email, etc. I believe you need server side scripting.
Jill Lee
@jill-lee
Aug 20 2018 20:11
@AJ-Brommy Yes we do I'm only using codepen to show it but I can host it on github.
AJ Brommy
@AJ-Brommy
Aug 20 2018 20:13
Well how exactly do you want to form to perform? Is it to go into a database or is it to be sent to an email address? or other?
Aditya
@ezioda004
Aug 20 2018 20:17
@jill-lee Perhaps use formspree? You wont need a backend server that way.
newmoon
@newmoon
Aug 20 2018 20:19
I'd recommend formspree if you don't want to set up a backend server. Hosting it on github will be no better than codepen as far as getting an email form working.
Jill Lee
@jill-lee
Aug 20 2018 20:20
@jill-lee I need the details to be sent to an email address. Thank you. @ezioda004 Thank you I'll look into that. Also can you help me check why the name on mobile view isn't responsive?
@newmoon Thank you
AJ Brommy
@AJ-Brommy
Aug 20 2018 20:22
@ezioda004 good find :)
Aditya
@ezioda004
Aug 20 2018 20:23
@jill-lee You have font-size: 500%;, use media queries to make it responsive.
Jill Lee
@jill-lee
Aug 20 2018 20:26

@ezioda004 I did its not working

@media (max-width: 300px) {
.intro {
font-size: 30px;
}
}

AJ Brommy
@AJ-Brommy
Aug 20 2018 20:27
font size 30px is an issue. because pixels is a set size. you need em or % or something.
newmoon
@newmoon
Aug 20 2018 20:27
Inline styles always override your CSS. Do this instead:
.intro {
  font-size: 500%;
}

@media (max-width: 300px) {
  .intro {
    font-size: 30px;
  }
}
(and remove the inline styling)
500% is kind of arbitrary though. You might want to read this: https://css-tricks.com/snippets/css/fluid-typography/
Jill Lee
@jill-lee
Aug 20 2018 20:30
@newmoon Thank you for all you help :)
@newmoon @AJ-Brommy ok ill try that
newmoon
@newmoon
Aug 20 2018 20:33
:thumbsup: No problem
aenkirch
@aenkirch
Aug 20 2018 22:06
Guys ! I'm working on the "Drum Machine" project in React and I encounter a problem : the JS play() method for an HTML5 audio file does not seem to work... Can someone help me ? https://codepen.io/aenkirch/pen/bjyvwP?editors=0010
Daniel
@Feldbot
Aug 20 2018 22:23
Hi, Can anyone help me figure out why my submit button takes two clicks? Here's my pen.
newmoon
@newmoon
Aug 20 2018 22:30
@aenkirch The quick fix is to change s.play(); to s[0].play() because s refers to an HTML collection. Even though there is only one element with that class name, it's a collection, so we have to refer to the first one with [0]
A better fix might be to refer to that element by ID, but there are some duplicate IDs on your page. Both the <a> and the <audio> links are sharing the same ID.
@Feldbot Only takes one click for me!
Daniel
@Feldbot
Aug 20 2018 22:34
@newmoon Hmm... I'm having it take two clicks for me on codepen, and one click in the browser locally. Nice fix on the audio bit above, I was trying to figure that out too!
AJ Brommy
@AJ-Brommy
Aug 20 2018 22:36
It worked fine for me @Feldbot - 1 click. I used Opera.
worked for me in chrome too
Daniel
@Feldbot
Aug 20 2018 22:36
Okay, thanks y'all. I'll move on. I appreciate the help!
subhambapna
@subhambapna
Aug 20 2018 23:06

Is this the correct way to make forms in two-columns?

https://bootsnipp.com/snippets/3XrGb

AJ Brommy
@AJ-Brommy
Aug 20 2018 23:08
There are many ways. Personally I think CSS Flexbox or CSS Grid would accomplish the task quite quickly and simply
newmoon
@newmoon
Aug 20 2018 23:22
@subhambapna For bootstrap 3.0, that approach works fine. Odd that they aren't using all 12 columns of the grid system though. For bootstrap 4, check out the code here: https://getbootstrap.com/docs/4.1/components/forms/#form-grid
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:22
Why my inputs move when an HTML warning appears (For example: Fill out this field please), when I click on submit, on my Contact Us section?
Here is the pen: https://codepen.io/Morched23MJ/pen/YjbOgw?editors=1100
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:24
Hey @Morched23MJ looking good :) they are moving for me when I hover over the submit button.
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:25
Thank you. :)
That's weird, lol
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:26
And they move depending on what has had focus! very weird! lol
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:27
:l
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:28
Have you included some JS Framework? Because I don't see anything in connection
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:29
I have not. :D
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:33
cluesless.com lol
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:33
:DD
That's the last issue, and I'm done with this project. :D
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:36
Guess what...
I copied the the code for the form, and the related css, into a new pen. and it works fine.
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:37
What? :D
Wut..
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:37
So I'm thinking there is a conflict somewhere
oh no, my bad. I forget to put focus on an element first. it is still happening lol
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:39
Yup. :D
newmoon
@newmoon
Aug 20 2018 23:40
@Morched23MJ It has something to do with using float and transform: scale(), but can't find an exact reason why it does this. To fix it, replace float: right with margin-left: auto; and display: block for your #submit button.
(or remove the hover effect for the button)
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:42
Yeah was just gunna say I stopped the scale thing and it works fine. I think it's do with the button changing size throwing things out
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:43
@newmoon, didn't know margin-left: auto was equivalent to float: right. :O
I think it's fixed, thank you guys. :D
newmoon
@newmoon
Aug 20 2018 23:43
Not quite the same - but close enough in this case :)
Morchid Chellali
@Morched23MJ
Aug 20 2018 23:44
For some reason I can't pass the test where they tell you to send the user when the form is submitted..
I used action="THAT FCC LINK" and I can't pass the test..?
My bad. I passed it. I didn't give the email input a name attribute with the value email. :D
Alright, gonna submit this. I'm done for today. 12:45AM
Goodnight. :)
AJ Brommy
@AJ-Brommy
Aug 20 2018 23:47
@newmoon good find on the float right. Maybe you know also how to solve the issue he was having yesterday. I think he has done a work around which looks ok, but if i am right, I don't think a true solution was found?