These are chat archives for FreeCodeCamp/HelpFrontEnd

19th
Aug 2018
Barbara Pentoney
@flyfishingbarbara
Aug 19 2018 00:09
@naveencoder13 did you ever get an answer to your quest about why the iframe disappears..?? i dont have an answer, im curious how that got fixed...
hi peeps - anyone have exp with vs code and vue.js...?? i don't know why i cant see my project in web browser....
glitz20
@glitz20
Aug 19 2018 00:41

hey guys how can I get state from another component? I have implemented textbox like this one
https://github.com/nossas/slate-editor/blob/develop/packages/slate-editor-example/src/example/pages/Home.js

but the state of the content I type is in diffferent folder/package. So how can access to that state, so that I can post it to the database?

here is the editor package
https://github.com/nossas/slate-editor/blob/develop/packages/slate-editor/src/SlateEditor.js

glitz20
@glitz20
Aug 19 2018 01:41
@willybeans I have imported some component and the imported component contains state. I want to edit value in the state
Corey Lewis
@cursiv3
Aug 19 2018 02:13
@sabin20 you could just post it to the DB from where it is
Is there a reason you need to move it to another component to post?
glitz20
@glitz20
Aug 19 2018 02:14
@cursiv3 I have my <slatecontent /> here like this
but this is build upon other packages so
its state is here
Mandeep
@mandeephub
Aug 19 2018 03:37
hello to all im facing a issue with my product landing page ????
if any 1 can help here is the link
when i run test 1 point is not cleared
https://codepen.io/mandeep9362/full/QBMzod/
not a clue
what should i do
Michael S
@Ohshi60
Aug 19 2018 11:29
@roxxlen add a <hr> rule to the code :)
<h4>Title</h4>
<!-- Add hr rule here -->
<p>Paragraph</p>
Mandeep
@mandeephub
Aug 19 2018 11:58
@roxxlen line needs to be added horizontal rule <hr>
shivendrarox
@shivendrarox
Aug 19 2018 13:54
thanks a lot @moT01 !!! i will improve it more
AJ Brommy
@AJ-Brommy
Aug 19 2018 16:27
Hey Campers! :) I've just reached the tribute page project and it says things like 'should have an element with a corresponding id="main"', as I understand it HTML5 has a tag <main> for that. Should I not use HTML5 for this project? I don't want to fail because I use <main> instead of <div id="main">. Does anybody know if it is ok to use the HTML5 tags instead? Or should I stick to the described rules on the page?
shivendrarox
@shivendrarox
Aug 19 2018 16:28
use both as main is more semantic and div for just passing the test case
add a comment to the div that it was only for the sake passing fcc test cases
AJ Brommy
@AJ-Brommy
Aug 19 2018 16:30
Ah sounds excellent Idea! Though I wasn't sure if someone would be checking it or a computer, or how it would work to if it would fail me or not. But that sounds like a great idea.
Thanks @shivendrarox
shivendrarox
@shivendrarox
Aug 19 2018 16:30
@AJ-Brommy you are welcome!
AJ Brommy
@AJ-Brommy
Aug 19 2018 16:31
There use to be a way here to say thanks that gave you points. Is that still a thing here? If so, I can't remember how to do it lol... I'd like to thank you properly @shivendrarox
shivendrarox
@shivendrarox
Aug 19 2018 16:33
@AJ-Brommy no need for that! we campers are here always to help each other.
AJ Brommy
@AJ-Brommy
Aug 19 2018 16:33
:)
shivendrarox
@shivendrarox
Aug 19 2018 16:34
(。◕‿◕。)
AJ Brommy
@AJ-Brommy
Aug 19 2018 16:41
I'm still a bit bamboozled lol - it seems they have completely ignored the lessons on h1 - h6. The first h tag on their example tribute page is a h3! Surely the <div id="title"> should be <h1>?
Rob
@PGFracing
Aug 19 2018 17:40
Is this front end and full stack?
Christos Kokolios
@KokoChris
Aug 19 2018 17:42
@PGFracing I don't think so. There is a backend channel as well
Rob
@PGFracing
Aug 19 2018 17:42
Different website?
Or community?
Morchid Chellali
@Morched23MJ
Aug 19 2018 17:46
Hi everyone.
When I click on a link on my navbar, it goes to the respective div. The thing is that it scrolls a bit more, so instead of pointing at the exact beginning of the div, it points 50px after. I think it's because the navbar position is set as fixed, thus the exact beginning is hiding behind the navbar. How to overcome this? :D
AJ Brommy
@AJ-Brommy
Aug 19 2018 17:46
Rob button at top right looks like a globe will take you to more rooms :)
You will find back end and such there
Morchid do you have a link ? are you using CodePen?
Morchid Chellali
@Morched23MJ
Aug 19 2018 17:48
Here is my pen: https://codepen.io/Morched23MJ/pen/YjbOgw
Yup. Using list items, inside there is anchor.
Do not mind the overall content. :P
AJ Brommy
@AJ-Brommy
Aug 19 2018 17:51
I'm not sure best way, you could try a margin?
Morchid Chellali
@Morched23MJ
Aug 19 2018 17:54
I could, but it would push the top content. :l
AJ Brommy
@AJ-Brommy
Aug 19 2018 17:56
You mean if you put a margin on the body the fixed navbar goes down?
maybe you need a container? <!-- navbar --><div id="container"><!-- all other content --></div> or in HTML5 you can use <main>for main content</main>
You've got more than one <h1> tag, there is only suppose to be one :)
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:00
One H1 in the entire page? :l
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:00
Yeah
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:01
How come? I have one in every big container (navbar link - About, Services, Pricing, etc)
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:02
Applied Accessibility: Use Headings to Show Hierarchical Relationships of Content : "One final point, each page should always have one (and only one) h1 element"
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:02
But the navbar links are supposed to be pages in my website. But I'm setting them altogether
In my page
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:05
Yes this page needs a title.
and there others would be h2
*the others
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:07
I see. Thank you for reminding me. :P
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:08
No worries. It can be hard I know. I'm not even sure I could recommend a title lol
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:09
:D
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:09
"Who we are, and what we do" ?
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:09
Not bad. :D
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:10
I like your idea and style etc tho, looks nice, doing a good job :)
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:10
Or directly the supposedly company name "Explore"
Thanks. :D
This is supposed to be a Travel Agency website. I'll remove the other content, Inky, etc. Before, I was gonna make a Writing Agency website. :D
A Travel one seems more exciting. :D
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:12
Which project are you on?
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:12
Product Landing page. But I suppose a Service Landing page is the same? :P
I'll respect the Project Stories though.
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:13
Ah right. I don't know the rules for that yet. Haven't got there haha. I've just reached the projects. I did 2 a year ago, but its changed a bit since then and i've come back. So restarting the projects as things are a little different now, with new things, flexbox, and grid, etc.
Technically a service is a product. So can't see a problem with it myself lol
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:15
Yup, we're in the same situation then.
I'm trying to focus more on CSS properties this time. I'm not fully confident with it yet.
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:19
Well I like your use of media queries, looks good
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:19
Thanks. I'm trying my best to keep it purely css. :P
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:19
Ditto - last time I think I used bootstrap this time I want to do without
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:32
@Morched23MJ Much better, I now have a much better idea about the purpose. Great title! Though I might change it a little, for better English, not to pick fault with you or anything, just friendly constructive criticism, here's how I'd word it : "Explored - A travel agency helping natural beauty seekers & adventurers by insuring all aspects of the adventure with safety first."
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:35
Great one, don't you think a shorter one is better? "Explored - A Travel Agency for Nature Beauty Seekers"?
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:38
Maybe, its upto you. Some marketers recommend the long stuff. Depends if you think it well explains the "product". But again, they way you have written "Nature Beauty Seekers" doesn't make sense. It would be "Natural Beauty Seekers"... or you could say "A travel agency for the seekers of the beauty of nature". It's a grammatical thing. But we aren't here to learn English so I don't think it's that important for passing the test :)
*THE way you have written...
messing up my own spellings hahah
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:40
You're totally right. Thanks for the correction. Also, a good point you made, is to explain the product. :)
Thanks, @AJ-Brommy!
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:40
You are welcome :D
I suppose if the safety first part is an important part of the product/buiness, and it is something that customers, or potential customers, would be looking for or want to know, then it should be included :)
Morchid Chellali
@Morched23MJ
Aug 19 2018 18:43
Exactly. :D
AJ Brommy
@AJ-Brommy
Aug 19 2018 18:55
"to name a few, safety, planning, discovery, and last but not least the fun along the way." - sub heading?
@Morched23MJ I think they are looking for <img src="" id="header-img" />
Morchid Chellali
@Morched23MJ
Aug 19 2018 19:16
I will change those yup. What you mean sub heading? h2?
Oh, but I want the Parallax effect, that's why I used the div
AJ Brommy
@AJ-Brommy
Aug 19 2018 19:19
I feel stupid, whats Parallax? lol
Take a look. It's an effect for scrolling
I think I can do the parallax with an img tag. :)
AJ Brommy
@AJ-Brommy
Aug 19 2018 19:20
Oh right, I never knew that had a name haha thanks
Morchid Chellali
@Morched23MJ
Aug 19 2018 19:21
:D
AJ Brommy
@AJ-Brommy
Aug 19 2018 19:24
I'm not sure on the sub heading. Maybe a <span>
It's not really a heading, so much as a bit of detail. I'm not sure what would be correct in this instance :/
Morchid Chellali
@Morched23MJ
Aug 19 2018 20:37
https://codepen.io/Morched23MJ/pen/YjbOgw?editors=1100
Why my paragraph is taking more than it should when the screen is smaller than 700px?
AJ Brommy
@AJ-Brommy
Aug 19 2018 20:46
if you can add a border to everything like *{ border: 1px solid #FF000; } That will show use exactly what is happening, and may show use the problem
Morchid Chellali
@Morched23MJ
Aug 19 2018 20:47
'box-sizing: border-box;' fixed it apparently. :l
AJ Brommy
@AJ-Brommy
Aug 19 2018 20:48

But I am wondering if it is this..

about-content {

padding: 20px;
width: 100%;

}
making it essentially 100% "+" 20px

damn i didnt use that properly sorry lol
Hmm... ok
Morchid Chellali
@Morched23MJ
Aug 19 2018 20:49
How to include the padding in the width then?
By setting box-sizing to border-box?
AJ Brommy
@AJ-Brommy
Aug 19 2018 20:51
Yeah look at this, I just tested it in my tribute page that i just started..
https://codepen.io/pen/
sorry bad link
I think the actual content should have margins instead
AJ Brommy
@AJ-Brommy
Aug 19 2018 21:00
https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing that explains it then, now I know what your box sizing was all about hahah
Well I just learned something new and useful! Thanks
Morchid Chellali
@Morched23MJ
Aug 19 2018 21:03
No problemo. :D
Morchid Chellali
@Morched23MJ
Aug 19 2018 21:50
My fixed navbar is hiding my content. I add a top padding to every element after the first element? Or there is a better solution?
AJ Brommy
@AJ-Brommy
Aug 19 2018 21:56

You could do a multi element line like...
/ Padding for boxes to combat being under the fixed menu when page moves upon being clicked for. /

about #services #contact {

padding-top: 50px;

}

I've really got to learn how to use this feature properly lol
Morchid Chellali
@Morched23MJ
Aug 19 2018 21:57
That is what I have done, you're saying add padding-top?
AJ Brommy
@AJ-Brommy
Aug 19 2018 21:57
You only need it at the top?
Morchid Chellali
@Morched23MJ
Aug 19 2018 21:57
It adds extra space that I don't want. For instance, I want the image to fill the height of container, when I add that padding, an extra white space prevents that. :l
AJ Brommy
@AJ-Brommy
Aug 19 2018 21:57

or do ..

padding: 50px 0px 0px 0px;

as needed

ahhh
maybe its the container that needs the padding/margin
Add a padding-top: 50px to the #about div, and see that extra space. (I don't want that extra white space, although it fixes the problem, which is navbar hiding my content)
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:00
I think you have not set a specific height for the navbar, so therefore we are guessing a padding size?
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:00
That's not the problem though.
I don't want that extra white space (which is padding) to fix the issue
Cannot find any other way to fix it
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:01
I'm not seeing the problem. I don't see this white space you talk of
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:01
You added padding-top to #about?
Of course, you don't see it when you click on the About link, but when you scroll a bit up you see it. :D
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:03
ahh same issue as before with padding and margin
or box sizing
yes I think you need the box sizing thing again
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:05
I think I made you misunderstand me, lol.
My navbar hides my content when I click on a link, thus adding a padding-top: 50px to every link after the first link, fixes this issue. But, I don't want this solution, it adds extra space that I don't want. :D
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:09
I think I understand the problem, just haven't quite understood the solution
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:10
Ehm. Adding the padding-top makes the navbar to scroll directly to the content, it hides the padding-top, but we don't need to see the padding-top. That's why it fixes our problem
The fixed navbar is programmed to scroll to the div, but it doesn't push it under, instead it covers the content with its height
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:27
I'm stumped. The problem with a fixed header is that it takes it out of the flow of the document so other elements don't know where it is.
thats why it goes under
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:28
Yup.
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:44
closest I can achieve is...

about-content {

background: white;
padding: 60px;
padding-top:100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 50%;
}

about-content {

background: white;
padding: 60px;
padding-top:100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 50%;
}
I don't understand why I can't get compose mode to work either lol
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:49
:l
AJ Brommy
@AJ-Brommy
Aug 19 2018 22:53
#about-content {
background: white;
padding: 60px;
padding-top:100px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width:50%;
}
Even https://css-tricks.com/almanac/properties/p/position/ used a big top margin/padding to achieve it
Morchid Chellali
@Morched23MJ
Aug 19 2018 22:56
:l
I guess I'm gonna have to scroll 50px up everytime an anchor in the navbar is clicked, using JS, which I didn't want in the first place. But I got no choice :P
Morchid Chellali
@Morched23MJ
Aug 19 2018 23:03
Thank you, @AJ-Brommy. I'll check it out
AJ Brommy
@AJ-Brommy
Aug 19 2018 23:17
I'm stumped again lol -- seems that works for a lot of people. But I can't get it working :(
Morchid Chellali
@Morched23MJ
Aug 19 2018 23:18
:D