These are chat archives for FreeCodeCamp/HelpFrontEnd

7th
Feb 2018
MROB0T
@MROB0T
Feb 07 2018 01:55
hey i need help with my code pen anyone willing to help
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 02:12
just put it in here!
Fernando
@lestairon
Feb 07 2018 02:18
Link it
abraham anak agung
@padunk
Feb 07 2018 02:38
@MROB0T paste the link to your codepen here
zhe yan
@yzenith
Feb 07 2018 06:20
Add the animated class to all elements with type button. This the requirement of a jQuery test, but what is the specific class?
Aditya
@ezioda004
Feb 07 2018 06:31
@yzenith I think the class is animated that you need to add to the button alongside another animate effect class given in the challenge like bounce, shake.
zhe yan
@yzenith
Feb 07 2018 06:34

@ezioda004

<script>
$(document).ready(function() {
$("button").addClass("animated");
$(".btn").addClass("animated shake");
$("#target1").addClass("btn-primary");
});
</script>

This the code I added, but it still throw an error: Only add one class with each of your three selectors.
Aditya
@ezioda004
Feb 07 2018 06:36
@yzenith Oh in $(".btn") you only need to add shake class.
zhe yan
@yzenith
Feb 07 2018 06:37
@ezioda004 I see, that's interesting, Thank you!
CamperBot
@camperbot
Feb 07 2018 06:37
yzenith sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Feb 07 2018 06:38
:thumbsup:
zhe yan
@yzenith
Feb 07 2018 06:38
@ezioda004 Thank you
CamperBot
@camperbot
Feb 07 2018 06:38
yzenith sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
api offline
coderNewby
@coderNewby
Feb 07 2018 06:54
@DarrenfJ thanks for the pm
CamperBot
@camperbot
Feb 07 2018 06:54
codernewby sends brownie points to @darrenfj :sparkles: :thumbsup: :sparkles:
:star2: 2380 | @darrenfj |http://www.freecodecamp.org/darrenfj
coderNewby
@coderNewby
Feb 07 2018 06:55
anyone know of any good bootstrap courses or videos?
just curious
AndreaGoodwin
@AndreaGoodwin
Feb 07 2018 07:27
Is there a reason why there is a link in my Footer connected to my GitHub account? I have a UL above in a different section with my twitter/codepen/github that somehow is connected to my footer. Sorry user newbie question but i've tried looking online with no results.
Razvan Jackson
@RazvanJackson
Feb 07 2018 07:30
Hey
Guys
Does someone know why i have a little gap at the bottom of my page?
AndreaGoodwin
@AndreaGoodwin
Feb 07 2018 07:34
WOW I legit had a question. Thanks. Real mature. Sorry I asked.
Eric Gomez
@EricGomez101
Feb 07 2018 07:36
help! i cant understand how to properly set up an closure for the Arguments Optional challenge
Markus Kiili
@Masd925
Feb 07 2018 07:37
@EricGomez101 You can store the first argument on a variable and then construct a returned function that uses that variable.
There are other ways too, for example using .bind()
Eric Gomez
@EricGomez101
Feb 07 2018 07:40
right i got it all to work except when it passes this : addTogether(2)(3) then my ide just throws an error
Markus Kiili
@Masd925
Feb 07 2018 07:46
@EricGomez101 Are you checking the number of passed arguments and their validity?
In the case of one valid argument passed, you need to return a function.
In the case of two valid arguments passed, you need to return a number.
Eric Gomez
@EricGomez101
Feb 07 2018 07:48
makes sense thanks, im gonna read more about closures and rewrite my function thanks again
Heathercoraje
@Heathercoraje
Feb 07 2018 07:51
Hello friends, a regex question
str.replace(/([a-z])([A-Z])/g, '$1 $2') Can anyone help me with this regex?
It finds a capital letter and put space before that letter but.. what does what?
WalkersNight
@WalkersNight
Feb 07 2018 08:00
Submitting a form will send your data to the URL specified. Can the form also be sent to an email address rather than a URL to send this data? or if I wanted to submit the form to a email address, would I do that through a URL anyway?
Markus Kiili
@Masd925
Feb 07 2018 08:03
@WalkersNight You cannot send email from browser JS, but you can open user email client and perhaps fill some message body. Another way is to make an ajax request to a server where you have server side program that sends email.
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:04
Who know CSS here?
WalkersNight
@WalkersNight
Feb 07 2018 08:04
@Masd925 Thank you Markus
CamperBot
@camperbot
Feb 07 2018 08:04
walkersnight sends brownie points to @masd925 :sparkles: :thumbsup: :sparkles:
:star2: 4687 | @masd925 |http://www.freecodecamp.org/masd925
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:05
No-one who knows css?
Heathercoraje
@Heathercoraje
Feb 07 2018 08:05
Then I got it. Thanks folks anyways!
@RazvanJackson Ask away :)
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:06
@Heathercoraje I've already asked 2 times and no-one respond
Markus Kiili
@Masd925
Feb 07 2018 08:06
@Heathercoraje Most people like I hate regexp, so we were silently waiting for the problem to go away.
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:06
I have a gap at the bottom of my page and idk why
Claudio Restifo
@Marmiz
Feb 07 2018 08:07

@Heathercoraje so:

(/([a-z])([A-Z])

Means we have two groups to look for, (called capture groups)
The first group is matching a letter in the range a-z
The second is matching letter from A-Z.

Then you have your 'replacer' function:

'$1 $2'

$1 means "takes the mach from the first group (a-z)
$2 means from the second group (A-Z)

and add a space in between.

so a small letter followed by a capital letter will be replace with a small letter + space + capital letter.

'aB' --> 'a B' // it's a match
'Ab' --> 'Ab' . // not a match

Make sense?

Razvan Jackson
@RazvanJackson
Feb 07 2018 08:07
Like this
@Heathercoraje
How i can remove the white space
the html and body it's going only there
Claudio Restifo
@Marmiz
Feb 07 2018 08:08
@RazvanJackson have you tried giving the body a margin: 0?
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:09
html,body{
    margin: 0px;
    padding: 0px;
}
it's not that
Claudio Restifo
@Marmiz
Feb 07 2018 08:09
or see in the inspector what actually is
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:09
It's the actual content
but idk why html and body it's stopping there...
Heathercoraje
@Heathercoraje
Feb 07 2018 08:10
I am not sure of which element you want to remove 'white space'
from
@Marmiz Awesome, thx
CamperBot
@camperbot
Feb 07 2018 08:11
heathercoraje sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1147 | @marmiz |http://www.freecodecamp.org/marmiz
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:11
@Heathercoraje Do you have teamviewer? so you can see better
Heathercoraje
@Heathercoraje
Feb 07 2018 08:11
I dont. but there is a default value for margin and padding in browswer
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:12
it's not margin or padding.
Heathercoraje
@Heathercoraje
Feb 07 2018 08:12
giving all elements(by *) margin: 0 and padding: 0 usually does the trick
Can you post a screenshot?
@Masd925 no worries haha
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:13
@RazvanJackson You're better off using css reset for this
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:13
*{
    margin: 0px;
    padding: 0px;
}
same
here's the screenshot
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:14
@RazvanJackson can you paste the screenshot here directly?
I can't access imgur
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:15
This message was deleted
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:16
:laughing:
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:16
Omg
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:16
drag drop the image here
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:17
gap.PNG
that little white space down there
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:18
share link to your page please
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:18
any site where i can put my react?
Claudio Restifo
@Marmiz
Feb 07 2018 08:19
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:19
@RazvanJackson stackblitz.com
@Marmiz that sandbox looks sweet
Claudio Restifo
@Marmiz
Feb 07 2018 08:25
Often used when reporting bug with react/vue related projects :)
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:26
I'm deep into Angular so I'm used to stackblitz
it's the actual VS code running in browser...
but for react, I'm gonna try codesandbox now
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:26
@Marmiz Do they have any button to import from GitHub?
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:26
@RazvanJackson Yes...
I see import from github action
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:27
I don't see it on codesandbox
...
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:27
Did you log in?
with github
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:27
yes
Claudio Restifo
@Marmiz
Feb 07 2018 08:28
create sandbox/ import from githbub . right there
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:28
This is what I see
Muhammad Osman A.J.
@moajday
Feb 07 2018 08:29
So, I exported final version of "CatPhoto App" to my drive, I ran into browser and most of things weren't same. Why? I want to have exactly the same page as I see in that "in-browser" mobile phone screen.
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:29
my bad i thought i have to be in a project than import
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:31
Your html has background-color set to white
remove that, it will be fixed
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:32
yea but i want that color...
and not
body{
    height: 100%;
    background: #929292;
    background-size: 100% 100%;
}
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:33
@RazvanJackson background-size - cover
Claudio Restifo
@Marmiz
Feb 07 2018 08:33
@RazvanJackson or read the documentation

The .container class can be used in any context, but mostly as a direct child of either:

.navbar
.hero
.section
.footer

Razvan Jackson
@RazvanJackson
Feb 07 2018 08:33
i solved it
;))
i removed that 100% height
Claudio Restifo
@Marmiz
Feb 07 2018 08:33
try adding section to Movies
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:34
hope you understood why it worked
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:34
i removed 100% height and solved it
Btw is someone here a designer? :laughing:
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 08:38
not me
Claudio Restifo
@Marmiz
Feb 07 2018 08:39
@RazvanJackson also please refactor that Movie component :scream:
create a data set and map through that
to create your markup
Otherwise why bother with react?
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:40
@Marmiz I will :), thanks ;)
CamperBot
@camperbot
Feb 07 2018 08:40
razvanjackson sends brownie points to @marmiz :sparkles: :thumbsup: :sparkles:
:star2: 1148 | @marmiz |http://www.freecodecamp.org/marmiz
Razvan Jackson
@RazvanJackson
Feb 07 2018 08:40
@SweetCodingInc Thanks for help
CamperBot
@camperbot
Feb 07 2018 08:40
razvanjackson sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
Muhammad Osman A.J.
@moajday
Feb 07 2018 08:40
I exported final version of "CatPhoto App" to my drive in notepad file, I ran it into browser and most of things weren't same. Why? I want to have exactly the same page as I see in that "in-browser" mobile phone screen.
Claudio Restifo
@Marmiz
Feb 07 2018 08:43

@ajbozdar FCC has a lot of things under the hood in order to let the camper focus on learning.
You will need a lot of other things to make a proper page.

I think the first challenge where you create a full page is the tribute page

Muhammad Osman A.J.
@moajday
Feb 07 2018 08:45
@Marmiz I have done that. I exported CatPhoto App because I am stuck in second basic project. I am stuck mentally, not technically. Are you getting me?
Claudio Restifo
@Marmiz
Feb 07 2018 08:48

@ajbozdar I doubt you'll have benefit by copying the small chunks of code since they are mostly "incomplete" (again, many things are hidden).

Probably you should just research / read / ask for help here or on the forum about the topic you feel stuck in.

and prototype on your own in a safe environment (like codepen) to grasp the concept
Muhammad Osman A.J.
@moajday
Feb 07 2018 08:51
You almost got me. I am figuring out how to stack multiple pages one upon each other in my second basic project. I have HTML, CSS, Bootstrap, and jQuery, and project descriptions says, I only need these four tools to finish the project.
@Marmiz I am figuring out this, thus I need external resources to add up some interesting code. Probably I have completely different layout than the exampled one.
Claudio Restifo
@Marmiz
Feb 07 2018 08:52

stack multiple pages one upon each other

what do you mean by that?

Muhammad Osman A.J.
@moajday
Feb 07 2018 08:54
Example project has three pages Home, Portfolio, Contact. These three pages are combined in one single page. The are stacked on one another like Home at top, followed by Portfolio, then Contant in the last. :)
Claudio Restifo
@Marmiz
Feb 07 2018 08:56

@ajbozdar that just means that they are 3 different section of the same page:


<div>
   this can be the top section
</div>
<div>
   this will be in the middle
</div>
<div>
   this will be at the bottom
<div>

as simple as that :)

Muhammad Osman A.J.
@moajday
Feb 07 2018 09:00
You are absolutely right.
I haven't seen the code of that example project. I do not want to see it. :)
I'm trying to use some jQuery to call the each div, and an HTML5/Bootstrap menu nav to navigate.
Razvan Jackson
@RazvanJackson
Feb 07 2018 10:08
Is here any good designers?
danchann
@danchann
Feb 07 2018 10:32
Hi, can someone help me with a strange problem with my weather project
I have three url of images for different temperatures, and one of them very strangely refuse to be set into the url of an img id
CamperBot
@camperbot
Feb 07 2018 10:40
:bulb: to format code use backticks! ``` more info
danchann
@danchann
Feb 07 2018 10:43
if (cTemp<15){ //cold var imgsrc='url('+'https://get.pxhere.com/photo/sea-ocean-horizon-mountain-snow-cold-winter-sky-white-morning-lake-frost-dawn-travel-dusk-ice-reflection-vehicle-weather-castle-freeze-arctic-snowfall-wonderland-snowdrift-february-lithuania-january-freezing-atmospheric-phenomenon-winterly-1178462.jpg'+')'; 
} else if (cTemp>=15 && cTemp<=30) { //warm
var imgsrc='url('+'https://upload.wikimedia.org/wikipedia/commons/a/ad/Cold_Creek_Conservation_Area_(14520679601).jpg'+')';
} else if (cTemp>30) { //hot
var imgsrc='url('+'http://www.publicdomainpictures.net/pictures/160000/velka/caribbean-beach-and-sky-14574356071o3.jpg'+')';
}
$("#photo").css("background-image", imgsrc)
only the second one refuse to work
Markus Kiili
@Masd925
Feb 07 2018 10:46
@danchann Are there any errors on browser developer tools console?
danchann
@danchann
Feb 07 2018 10:46
can someone shed some light
no errors
Stephen James
@sjames1958gm
Feb 07 2018 10:47
@danchann Is it the http:// one?
Sujeet Buddiga
@sujeetbuddiga
Feb 07 2018 10:48

How to set html like syntax highlight for .tag (Riot.js) file and add icon for .tag file extension in vscode ??

https://stackoverflow.com/questions/48660828/how-to-set-html-like-syntax-highlight-for-tag-riot-js-file-and-add-icon-for

danchann
@danchann
Feb 07 2018 10:48
the middle one
Stephen James
@sjames1958gm
Feb 07 2018 10:50
@danchann You might need to escape the parens? \\(
Markus Kiili
@Masd925
Feb 07 2018 10:51
@danchann The first url doesn't seem to work when i pasted them to browser address bar.
Second and third work.
danchann
@danchann
Feb 07 2018 10:52
@Masd925 title it works
Stephen James
@sjames1958gm
Feb 07 2018 10:53

@danchann I thought the syntax should be more like this

imgsrc = `usr{"https://somesite")`

with the " inside the actual string.

Markus Kiili
@Masd925
Feb 07 2018 10:53
@danchann Gives an error for me but can be because of different browser settings.
danchann
@danchann
Feb 07 2018 10:55
<img id="photo" alt="" style="background-image: url("https://get.pxhere.com/photo/sea-ocean-horizon-mountain-snow-cold-winter-sky-white-morning-lake-frost-dawn-travel-dusk-ice-reflection-vehicle-weather-castle-freeze-arctic-snowfall-wonderland-snowdrift-february-lithuania-january-freezing-atmospheric-phenomenon-winterly-1178462.jpg"); background-size: cover; background-repeat: no-repeat; background-position: center bottom;">
this is the html output of the first image
no url for the second image : <img id="photo" alt="" style="background-size: cover; background-repeat: no-repeat; background-position: center bottom;">
Markus Kiili
@Masd925
Feb 07 2018 10:57
@sjames1958gm If you mean quoting the address inside background-image: url(...), they are actually optional.
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 10:57

Folks.. I could use some help... I've applied for a job interview and I have been given this task as an assignement. Based on which the recruitment process would proceed.
This is similar to wikiviewer project on fcc. Just run it and try to fuck it up.
Note: styling is not considered in assessment (including responsiveness)
Help me find out cases where it would break

https://sweetcodinginc.github.io/FCCWikiViewer/#

Stephen James
@sjames1958gm
Feb 07 2018 10:57
@Masd925 ah, didn't know

@danchann I have to believe that those parens in the image URL are messing you up

"url(https://upload.wikimedia.org/wikipedia/commons/a/ad/Cold_Creek_Conservation_Area_(14520679601).jpg)"

This is your string - it will get confused with the first )

@danchann in this case the "" around the URL are probably required because the URL has ()
Markus Kiili
@Masd925
Feb 07 2018 11:02
@SweetCodingInc Results were interesting when I tried female and male.
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 11:02
@Masd925 lmao... :laughing:
I swear, that's wikipedia...
Markus Kiili
@Masd925
Feb 07 2018 11:03
@SweetCodingInc Just change the page title to something more in line with the results.
;)
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 11:03
Oh! I see
it says React App?
danchann
@danchann
Feb 07 2018 11:04
imgsrc: "url(https://upload.wikimedia.org/wikipedia/commons/a/ad/Cold_Creek_Conservation_Area_(14520679601).jpg)" <<< this is what I got from the browser dev tool watch, it looked fine
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 11:04
is that the one you're referring to?
Stephen James
@sjames1958gm
Feb 07 2018 11:06
@danchann Maybe just try:
imgsrc = `usr{"https://upload.wikimedia.org/wikipedia/commons/a/ad/Cold_Creek_Conservation_Area_(14520679601).jpg")`
@sujeetbuddiga Have your tried the existing riot.js extensions?
Markus Kiili
@Masd925
Feb 07 2018 11:08
@SweetCodingInc Just joking. I don't like that when I type male or female I get all kinds of interesting result, but when I type golden, I only get like Golden ratio and Golden retriever. Results should be in line.
@SweetCodingInc Do you really need the No results selected text?
Just seems to be disturbing me when I use it.
danchann
@danchann
Feb 07 2018 11:16
I finally know why, it's the brackets in the image filename that mess the url up.
Aditya
@ezioda004
Feb 07 2018 11:17
@SweetCodingInc It works well, but after you backspace all the way (after typing query) and theres no query it still shows the old results.
Thanks everyone
Stephen James
@sjames1958gm
Feb 07 2018 11:19
@danchann Yes, that is why I suggested using a template string above
Sujeet Buddiga
@sujeetbuddiga
Feb 07 2018 11:38
@sjames1958gm yes, but they dont provide syntax highlight and icon for the files
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 11:39
@Masd925 Usability wise, that annoys me as well. However, what I want to demonstrate with that is the way observable updates the view.
So that's why I kept it that way
@ezioda004 Thanks, that is expected behavior. And a well established search standard. Checkout google search. It works that way as well
CamperBot
@camperbot
Feb 07 2018 11:41
sweetcodinginc sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 440 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Aditya
@ezioda004
Feb 07 2018 11:50
@SweetCodingInc I checked google search and it hides the old query result after you've fully backspaced, same with wikipedia search too.
Screenshot (11).png
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 11:54
@ezioda004 I believe you're talking about auto complete part
Aditya
@ezioda004
Feb 07 2018 11:56
@SweetCodingInc Yes autocomplete, shouldnt it reset?
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 11:56
If it's auto complete, it should...
but this not autocomplete
If you go to google, search something, then it will take you to another search results page
try emptying the search text there
you will see the original results being retained
Aditya
@ezioda004
Feb 07 2018 12:04
Ah I see, my bad :D
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 12:08
Do you know any good css lib for web technology icons?
like angular, react etc?
Razvan Jackson
@RazvanJackson
Feb 07 2018 12:11
Is someone here a good designer?
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 12:11
@moT01 oh! Sweet! Thanks
CamperBot
@camperbot
Feb 07 2018 12:11
sweetcodinginc sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 976 | @mot01 |http://www.freecodecamp.org/mot01
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 12:11
@RazvanJackson Not me
Tom
@moT01
Feb 07 2018 12:12
@RazvanJackson what do you need designed
Razvan Jackson
@RazvanJackson
Feb 07 2018 12:12
@moT01 Just to give me a tips for web page design...
Tom
@moT01
Feb 07 2018 12:13
im not very good with design either - but im getting better
Razvan Jackson
@RazvanJackson
Feb 07 2018 12:14
Do you have some examples/
Tom
@moT01
Feb 07 2018 12:14
i made some sites - where i was trying to replicate other sites
that helped
i didnt make the designs - but its helping give me ideas for what looks good
thats the first one from a little challenge i was doing
Aditya
@ezioda004
Feb 07 2018 12:27
@SweetCodingInc I recently found devicon for programming tools/languages icon and its pretty consistent and better than FA imo.
For SVGs you dont have to import anything, just copy paste the code.
Puyan Wei
@puyanwei
Feb 07 2018 12:42
Hi guys, do you have a suggestion for testing the logic of a page? Say I use jQuery to create a calculator that outputs numbers to the page. Would a headless browser work for something like that?
can someone help me with the css, why does not inline work for the "mouse over me" element?
been stuck for an hour on such a simple problem ..
Markus Kiili
@Masd925
Feb 07 2018 12:44
@puyanwei Testing software is a very complex matter, but for testing calculator functionality, there are test lists you can google.
Tom
@moT01
Feb 07 2018 12:45
what are you trying to do
ian
Ian Gracia
@iangracia
Feb 07 2018 12:46
@moT01 im trying to make it lign up verticaly
so the "mouse over me" is to the right of the lorem ipsum not under
i have display:inline but its not working
tried different solutions i found online but im stuck
Tom
@moT01
Feb 07 2018 12:52
its the head-logo
header-logo
that is block - and pushing the mouse over me down
you can open the dev tools and see whats there taking the space
krckyboy
@krckyboy
Feb 07 2018 12:53
Has anyone had any experience with google api? I need to list and store contacts in a web app, and also use that web app which I would create to import new contacts into google account.
Ian Gracia
@iangracia
Feb 07 2018 12:54
header -logo-text or header-logo-img ? @moT01
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 12:54
@ezioda004 Thanks, will look into it
CamperBot
@camperbot
Feb 07 2018 12:54
sweetcodinginc sends brownie points to @ezioda004 :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @ezioda004 |http://www.freecodecamp.org/ezioda004
Ian Gracia
@iangracia
Feb 07 2018 12:55
what is your recommended soluution ? @moT01
Stephen James
@sjames1958gm
Feb 07 2018 12:55
@iangracia Using the inspector (right click inspect element) you can look at the element and it's parents and see that
Its parent is display:block changing that to inline or inline-block will move the mouse over me element up
CamperBot
@camperbot
Feb 07 2018 12:55
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @iangracia |http://www.freecodecamp.org/iangracia
Stephen James
@sjames1958gm
Feb 07 2018 12:56
@iangracia The inspector is your friend, because you can see what styles exist and where they come from and even test changes there.
Ian Gracia
@iangracia
Feb 07 2018 12:57
@sjames1958gm the parent to mouse over me i changed to inline-block, it didnt fix it, could you post the explanation in code? Maybe im not understanding you fully
Tom
@moT01
Feb 07 2018 12:58
one thing you can do is put this in the css...
* { border: 1px solid black }
and you will see a border around everything
Stephen James
@sjames1958gm
Feb 07 2018 12:58
@iangracia I am sorry it appears that it is the sibling before that element the one with the class header-logo
Argh
CamperBot
@camperbot
Feb 07 2018 12:58
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ian Gracia
@iangracia
Feb 07 2018 12:59
i dont seem to understand the solution, i think it would be easier if you showed me and i could study the solution
Stephen James
@sjames1958gm
Feb 07 2018 13:00
@iangracia
#header-logo {
  display: inline-block;
}
CamperBot
@camperbot
Feb 07 2018 13:00
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Feb 07 2018 13:01
@moT01 I like your border idea, thx
CamperBot
@camperbot
Feb 07 2018 13:01
sjames1958gm sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 977 | @mot01 |http://www.freecodecamp.org/mot01
Tom
@moT01
Feb 07 2018 13:01
that line of code i said to add - will put a border around everything - and you will see the border for the header logo across the whole width - you could also find this in the dev tools by opening them - and putting your mouse over the element in the code or on the page
977
Ian Gracia
@iangracia
Feb 07 2018 13:02
ok i see, when wrapped the two logo elements in a div it's automaticly set to block, whithout i could see it. I understand the problem now. Thanks guys for showing me @moT01 @sjames1958gm
CamperBot
@camperbot
Feb 07 2018 13:02
iangracia sends brownie points to @mot01 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:cookie: 978 | @mot01 |http://www.freecodecamp.org/mot01
:star2: 8945 | @sjames1958gm |http://www.freecodecamp.org/sjames1958gm
Tom
@moT01
Feb 07 2018 13:03
most things are block by default
978
Stephen James
@sjames1958gm
Feb 07 2018 13:03
@iangracia You'll see a reference to "user agent stylesheet" in the in the inspector, that means that is the browser (user agent) default value
CamperBot
@camperbot
Feb 07 2018 13:03
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Feb 07 2018 13:04
@iangracia Your id has thank you built in :)
CamperBot
@camperbot
Feb 07 2018 13:04
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ian Gracia
@iangracia
Feb 07 2018 13:05
@sjames1958gm i dont understand what you mean? How can i use right click inspect to see whats taking up space?
Stephen James
@sjames1958gm
Feb 07 2018 13:06
@iangracia In the context menu (on windows chrome it is right click) there is an option "inspect"
With this you can see the browsers view of the elements on the page and all of the styling for that element
including all the sources for that styling.
As you highlight and element in the inspector, the browser (well chrome does), will show the size of the element in the page (highlight the box around it)
CamperBot
@camperbot
Feb 07 2018 13:06
sjames1958gm sends brownie points to @iangracia :sparkles: :thumbsup: :sparkles:
api offline
Ian Gracia
@iangracia
Feb 07 2018 13:08
thats very helpful, thank you @sjames1958gm
CamperBot
@camperbot
Feb 07 2018 13:08
iangracia sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
api offline
Stephen James
@sjames1958gm
Feb 07 2018 13:08
Learning the devtools, even just a bit, will be a boon to your web development
https://developer.chrome.com/devtools
Also, in the FCC Map of projects there are several videos on chrome devtools
https://www.freecodecamp.org/videos/chrome-dev-tools-elements
Why they are not presented more prominently I don't know.
Nate Mallison
@NJM8
Feb 07 2018 13:37
@sjames1958gm do you have a minute to check out my question on HelpBackEnd? I'm sure it's an easy one just not sure what to do
Tiago Correia
@tiagocorreiaalmeida
Feb 07 2018 15:42
@NJM8 just ask :D
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 15:49
image.png
how can i put the 'nd' at the top of the line again?
Ken Haduch
@khaduch
Feb 07 2018 16:15
@MuhammedKarim - you can google for "ordinal dates in javascript" - here is one link that shows a way to do it: https://www.w3resource.com/javascript-exercises/javascript-date-exercise-23.php and another: http://cwestblog.com/2012/09/28/javascript-number-getordinalfor/
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 16:19
got it with the <sup> tag :) thanks! @khaduch
CamperBot
@camperbot
Feb 07 2018 16:19
muhammedkarim sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 3717 | @khaduch |http://www.freecodecamp.org/khaduch
pragya1248
@pragya1248
Feb 07 2018 16:25
hey! i m creating a landing page and i m struck with the position of topics under "About us" .I want them to be align in the same row(not below each other) with "Dedicated educators".Help me out.
Tiago Correia
@tiagocorreiaalmeida
Feb 07 2018 16:26
hey @pragya1248
I would make a wrapper div for all the 3 part's
then ad div for each part of it, title image and description
on the otuside wrapper I would use flexbox
Aditya
@ezioda004
Feb 07 2018 16:28
^ It can be achieved with floats too, but I'd also recommend using flex.
Tiago Correia
@tiagocorreiaalmeida
Feb 07 2018 16:30
RobertGlick
@RobertGlick
Feb 07 2018 16:35
hello
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 16:36
Hi! @RobertGlick
pragya1248
@pragya1248
Feb 07 2018 16:46
@tiagocorreiaalmeida
Tiago Correia
@tiagocorreiaalmeida
Feb 07 2018 16:48
well they are aligned what you wanna do now ?
pragya1248
@pragya1248
Feb 07 2018 16:49
Any suggestion to make it more attractive?
Tiago Correia
@tiagocorreiaalmeida
Feb 07 2018 16:50
@pragya1248 sure, start by addign a padding for 15px the items
plus you dotn need to name the 3 class's differently the all gonna have the same use
so the "aa" would work on them all
LydaTech
@lydatech
Feb 07 2018 16:54
seriously marquee?!
Teo
@Teo03
Feb 07 2018 16:59
Can someone help I've made a component for showing recipe info, but when I click on one of the recipes it opens all of them.
import React from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

export class ShowRecipes extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: false
        }
        this.toggle2 = this.toggle2.bind(this);
        this.cancel = this.cancel.bind(this);
      }

    toggle2(e) {
        var id = e.currentTarget.id;
        id = id.substr(id.length - 1);
        var recipe = $('#recipe-' + id);
        $('.recipe-list').not(recipe).hide();

        this.setState({
                collapse: !this.state.collapse
            });
      }

      cancel(){
        this.setState({
            collapse: false
        });
        $(".recipes").show();
      }

    render(){  
        var recipeList = this.props.recipes.map(function(recipeInfo, index){
            return (
        <div className="recipe-list">
        <div className="recipes" id={'recipe-' + index} onClick={this.toggle2}>
        <h1>{recipeInfo.title}</h1>
        <Collapse isOpen={this.state.collapse}>
          <Card>
            <CardBody>
            {recipeInfo.instructions}
            </CardBody>
            <Button color="secondary" id='cancel' onClick={this.cancel}>Cancel</Button>
          </Card>
        </Collapse>
        </div>
        </div>
            );
        }, this);
        return recipeList;
    }
//Here is the full project: https://github.com/Teo03/recipe_box
pragya1248
@pragya1248
Feb 07 2018 17:03
thank you so much @tiagocorreiaalmeida
CamperBot
@camperbot
Feb 07 2018 17:03
pragya1248 sends brownie points to @tiagocorreiaalmeida :sparkles: :thumbsup: :sparkles:
:cookie: 494 | @tiagocorreiaalmeida |http://www.freecodecamp.org/tiagocorreiaalmeida
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:03
@Teo03 that's because you're not maintaining open/close state for individual collapses
Teo
@Teo03
Feb 07 2018 17:03
@SweetCodingInc How should I do that?
pragya1248
@pragya1248
Feb 07 2018 17:04
what's wrong with marquee?@lydatech
Any more suggestion?
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:04
@Teo03 You already have index on your map. You can use that index to control open/close state of individual collapse elements
@Teo03 I'm forking your repo
pragya1248
@pragya1248
Feb 07 2018 17:07
Teo
@Teo03
Feb 07 2018 17:07
@SweetCodingInc Thanks a lot for the help I'm really confused
CamperBot
@camperbot
Feb 07 2018 17:07
teo03 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
:cookie: 254 | @sweetcodinginc |http://www.freecodecamp.org/sweetcodinginc
LydaTech
@lydatech
Feb 07 2018 17:11
@pragya1248 This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.
pragya1248
@pragya1248
Feb 07 2018 17:13
ok thanks :) any more suggestion? @lydatech
CamperBot
@camperbot
Feb 07 2018 17:13
pragya1248 sends brownie points to @lydatech :sparkles: :thumbsup: :sparkles:
:star2: 2643 | @lydatech |http://www.freecodecamp.org/lydatech
LydaTech
@lydatech
Feb 07 2018 17:15
your alignments are all mess up. Your images are stretching, your class names are too generic for what they do... There is a bunch. Im sure youll be able to tweak it as you learn more
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 17:19
What's a good font to use for headings/titles?
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:20
@Teo03 Check PR
I just raised one
Aditya
@ezioda004
Feb 07 2018 17:22
@MuhammedKarim Checkout google fonts they have a huge free selection.
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:22
I added .gitignore deleted build folder as it can be regenerated by running npm run build
added source maps for easier debugging in the browser
@Teo03
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 17:22
@ezioda004 Im going through them but idk which one to use lool
Teo
@Teo03
Feb 07 2018 17:23
@SweetCodingInc Thanks a looooooot for the help!!! :smile:
CamperBot
@camperbot
Feb 07 2018 17:23
teo03 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
api offline
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:23
@Teo03 Here's how the component looks now
import React from 'react';
import { Collapse, Button, CardBody, Card } from 'reactstrap';

export class ShowRecipes extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapse: 0
        }
    }
    render() {
        var recipeList = this.props.recipes.map(function (recipeInfo, index) {
            return (
                <div className="recipe-list" key={index}>
                    <div className="recipes" id={'recipe-' + index} onClick={() => this.setState({ collapse: index })}>
                        <h1>{recipeInfo.title}</h1>
                        <Collapse isOpen={this.state.collapse === index}>
                            <Card>
                                <CardBody>
                                    {recipeInfo.instructions}
                                </CardBody>
                                <Button color="secondary" id='cancel' onClick={() => this.setState({ collapse: -1 })}>Cancel</Button>
                            </Card>
                        </Collapse>
                    </div>
                </div>
            );
        }, this);
        return recipeList;
    }
}
Check this part, specifically <Collapse isOpen={this.state.collapse === index}>
Aditya
@ezioda004
Feb 07 2018 17:23
@MuhammedKarim Thats your creative decision :P
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 17:24
lool true! @ezioda004
Teo
@Teo03
Feb 07 2018 17:24
@SweetCodingInc Looks great thanks for the help again :smile: :+1:
CamperBot
@camperbot
Feb 07 2018 17:24
teo03 sends brownie points to @sweetcodinginc :sparkles: :thumbsup: :sparkles:
api offline
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:25
@Teo03 :+1:
Christopher McCormack
@cmccormack
Feb 07 2018 17:25
key should not be your index
Sweet Coding :)
@SweetCodingInc
Feb 07 2018 17:26
@cmccormack Yes... That's a quick fix
Christopher McCormack
@cmccormack
Feb 07 2018 17:26
:D
zootechdrum
@zootechdrum
Feb 07 2018 17:50

Hello everyone,
I am currently facing this issue. I made a ball using a few different properties to give it a nice 3-dimensional affect.

What I am trying to do now is move the ball. I went on to w3school and found the following JS code online. I tweaked to following code from W3school to get multiple class names.
How can I make this ball move?

function ballMove() {
  var elem = document.getElementsByClassName('circle stage ball');
  var pos = 0;
  var id = setInterval(frame, 5);
  function frame() {
    if (pos == 350) {
      clearInterval(id); 
    } else {
      pos++;
      elem.top = pos +'px';
      elem.left = pos + 'px';
    }
  }
}

ballMove();

Here is the link to my codepen. https://codepen.io/zootechdrum/pen/XZNjNV

Stephen James
@sjames1958gm
Feb 07 2018 18:07
@zootechdrum First off, getElementsByClassName will return a collection so you would need to do elem[0]
second your selection is not selecting anything. if you console.log elem
I would use document.querySelector('.circle > .stage > .ball'); which will get only one thing use CSS style selectors
Stephen James
@sjames1958gm
Feb 07 2018 18:18
@zootechdrum 3rd you need to give the element you are moving correct position property - I selected the .circle and gave it relative position
4th the property is style.top and style.left
      elem.style.top = pos + "px";
      elem.style.left = pos + "px";
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 18:20
Marco Galizzi
@Tezenn
Feb 07 2018 18:23
hello guys, i have a counter that says for example 5 and i need to calla function 5 times in a row.. and if others steps are done the counter goes to 6 and i need the function to be called 6 times in a row.. is that possible? thanks
Christopher McCormack
@cmccormack
Feb 07 2018 18:25
@Tezenn are you familiar with setInterval?
Marco Galizzi
@Tezenn
Feb 07 2018 18:25
yes
but set interval calla function after some time passes. i need to call a function a number of time equal of the counter, im not sure is possible
Christopher McCormack
@cmccormack
Feb 07 2018 18:27
@Tezenn ah I understand
you can just use a for loop with a max integer
if the functions are async you will have to add logic to wait for them to all complete
not sure how many times you want that max to increment, but you can use a recursive call to your function that contains the for loop and set a condition after the for loop runs to continue the recursion or end the function
Marco Galizzi
@Tezenn
Feb 07 2018 18:31
@cmccormack ok i will have to think a bit about it.. thank you
CamperBot
@camperbot
Feb 07 2018 18:31
tezenn sends brownie points to @cmccormack :sparkles: :thumbsup: :sparkles:
:star2: 1307 | @cmccormack |http://www.freecodecamp.org/cmccormack
Christopher McCormack
@cmccormack
Feb 07 2018 18:31
@Tezenn np
pragya1248
@pragya1248
Feb 07 2018 19:09
hey! I m not able to play video in my code.what's wrong in this? https://codepen.io/pragyapriya/pen/EQNvLp?editors=1100
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 19:16
instead of <video src="https://www.youtube.com/watch?v=bCc16uozHVE" width="700" height="200" controls></video>
put <iframe width="854" height="480" src="https://www.youtube.com/embed/bCc16uozHVE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe> @pragya1248
Giovanni Panasiti
@giovapanasiti
Feb 07 2018 19:17
I have a question for admins: in the Intermediate Front End Development Projects I'm using handlebars for templating html instead of stringinterpolating html. Is it legit?
pragya1248
@pragya1248
Feb 07 2018 19:20
thank you so much @MuhammedKarim But what was wrong with <video src="https://www.youtube.com/watch?v=bCc16uozHVE" width="700" height="200" controls></video> ?
CamperBot
@camperbot
Feb 07 2018 19:20
pragya1248 sends brownie points to @muhammedkarim :sparkles: :thumbsup: :sparkles:
:cookie: 117 | @muhammedkarim |http://www.freecodecamp.org/muhammedkarim
Dany Din
@danydin
Feb 07 2018 19:29
hey guys, how to change color for the placeholder text?
Brad
@bradtaniguchi
Feb 07 2018 19:29
@giovapanasiti I don't see why it wouldn't be, you could be using React at this stage and I would consider it being ahead of the game, rather than cheating.
Dany Din
@danydin
Feb 07 2018 19:30
thanks and if i want for specific placeholder? @bradtaniguchi
CamperBot
@camperbot
Feb 07 2018 19:30
danydin sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 359 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Giovanni Panasiti
@giovapanasiti
Feb 07 2018 19:31
@bradtaniguchi personally I didn't choose React just because it looked like overkilling for such easy tasks. I firmly think developer should know which is tool is better for what
Brad
@bradtaniguchi
Feb 07 2018 19:32
@giovapanasiti I agree, I only mention React as the larger projects are all about learning React
@danydin I would use a more specific selector, using a class or even id if you want to be really specific
Dany Din
@danydin
Feb 07 2018 19:33
can you give an example how to mention it in the css with a random id/class selcetor for the placeholder? thanks!
@bradtaniguchi
Larizza Tueros
@skayablars
Feb 07 2018 19:33
Hi Guys, this is not a code question .. is more about ui/ux. I'm creating a webapp where in almost all sections I need to toogle data between users, but not profile, so the main user that have dependent users can see his dependent data and change them. I post a question on ux.exchange what are your thoughs about that? https://ux.stackexchange.com/questions/115628/allow-sections-or-pages-to-change-the-current-display-data-for-dependent-users
Brad
@bradtaniguchi
Feb 07 2018 19:35
@danydin Do you know how to style normal tags using css class and ids? Its the same, just in this case you need the ::placeholder at the end
Dany Din
@danydin
Feb 07 2018 19:35
@skayablars where is the site and what exactly are you trying to achieve its hard to imagine it without see it..
so if my class is brad simply .brad ::placeholder {......} ?? :D @bradtaniguchi
Brad
@bradtaniguchi
Feb 07 2018 19:37
@danydin Pretty much, except I think you can't have a space between the classname and the placeholder
Dany Din
@danydin
Feb 07 2018 19:37
ok let me check it out :D
Dany Din
@danydin
Feb 07 2018 19:46
@bradtaniguchi working without space ur genius
why there's no space, because :: doesn't take space? what's the ponit of the :: at all ? :p
Brad
@bradtaniguchi
Feb 07 2018 19:58
@danydin the ::i guess is for special elements, like the placeholder, which isn't a special state (like hover) or an element (like div)
MDN says they are "psudo-elements"
Eric Gomez
@EricGomez101
Feb 07 2018 19:58
hello, can anyone give me a hand with the challenge Steamroller on the intermediate algorithm section
Larizza Tueros
@skayablars
Feb 07 2018 19:59
@danydin I don't have the site up, I'm in the stage of creating the code, in the link I created some mock up images.
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:29
hello, is anybody here?
cjlynch12
@cjlynch12
Feb 07 2018 20:30
yup
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:30
@cjlynch12 i am stuck in japan
im doing the weather app and it says i am in shuzenji!
cjlynch12
@cjlynch12
Feb 07 2018 20:31
are you using a vpn?
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:31
but i am not there!
no
cjlynch12
@cjlynch12
Feb 07 2018 20:32
can you post codepen?
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:32
i checked and hola is off
cjlynch12
@cjlynch12
Feb 07 2018 20:33
it's giving me my correct location
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:34
thats good, you dont live in shuzenji do you?
cjlynch12
@cjlynch12
Feb 07 2018 20:34
if the location on there matches your codepen then it's working correctly, but your ISP is routing through somewhere else
nope, USA - gave me correct lat/long and city
and weather status is accurate
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:35
did it give you weather status?
cjlynch12
@cjlynch12
Feb 07 2018 20:35
yes, in the console
Boris-the-Llama
@Boris-the-Llama
Feb 07 2018 20:36
oh ok, that makes sense
my ip seems to be ok on that site, has several ones that are in the same country
thanks @cjlynch12 , have a cookie
CamperBot
@camperbot
Feb 07 2018 20:37
boris-the-llama sends brownie points to @cjlynch12 :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @cjlynch12 |http://www.freecodecamp.org/cjlynch12
cjlynch12
@cjlynch12
Feb 07 2018 20:37
gotcha, should just be a one off case then
np
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 20:48
@pragya1248 I believe that <video>would be for local files, not for online videos. I may be wrong
Gulsvi
@gulsvi
Feb 07 2018 21:00
@pragya1248 With Bootstrap, embed a responsive YouTube video with:
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/cdxak5GE4jE" allowfullscreen></iframe>
</div>
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 21:03
@gulsvi Would be better to just put in the <embed> code of the YouTube video?
Gulsvi
@gulsvi
Feb 07 2018 21:05
@MuhammedKarim The <iframe> portion, second line, is the embed code of the YouTube Video provided at youtube.com.
Click Share -> Embed on a video to get the <iframe> code, but remove the static width and height, put it in that div and add the class as indicated to make it responsive
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 21:07
ohh that's cool :) the wonders of bootstrap....which i haven't learnt yet lool @gulsvi
Gulsvi
@gulsvi
Feb 07 2018 21:07
It's magic :) lol
(not really, but seems like it sometimes)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 21:07
lool true! @gulsvi
Matej Bošnjak
@mbosnjak01
Feb 07 2018 21:37
@gulsvi didn't think anyone uses iframe anymore :P
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 21:53
@mbosnjak01 What would you use instead?
Matej Bošnjak
@mbosnjak01
Feb 07 2018 21:55
@gulsvi @MuhammedKarim My bad. Iframe for youtube it is :)
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 21:57
lool i thought there might have been another way when you said that :) @mbosnjak01
Matej Bošnjak
@mbosnjak01
Feb 07 2018 21:58
I didn't check out iframe for a long time now, didn't think anyone is really using it since many stuff gets blocked by iframe (xss) nowdays anyway
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 21:59
what do you mean by blocked?? and by what?? sorry for my lack of knowledge! @mbosnjak01
Matej Bošnjak
@mbosnjak01
Feb 07 2018 22:01
cross site scripting
and such stuff
Gulsvi
@gulsvi
Feb 07 2018 22:09
@mbosnjak01 Yeah, lol, lots of reasons not to use iframe. Required for youtube though if you don't want to use their API
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:00
image.png
How can i keep a gap from the top of the browser/screen?
Brad
@bradtaniguchi
Feb 07 2018 23:05
@MuhammedKarim I bet your top bar uses absolute positioning hu?
Or is it codepen?
Yea nvm looks like codepen haha, just add margin-top: Xpx to your container you want to offset from the top
where Xpx is the number of pixels
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:09
it has a margin already, but isn't working coz it works only at the top of the page, not whilst scrolling
krckyboy
@krckyboy
Feb 07 2018 23:10
Hey, guys. I'd appreciate some suggestions for material regarding front end (CSS3, Javascript, etc.) - paid and free.
Brad
@bradtaniguchi
Feb 07 2018 23:10
@MuhammedKarim wait im confused it looks fine to me, whats the issue again?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:11
When i scroll through the page, i want a gap between the text and the top of the page!
Brad
@bradtaniguchi
Feb 07 2018 23:11
@krckyboy Mdn, not going to lie is really great as a reference, jumping off point, and information on all webdev stuff
@MuhammedKarim So like when you scroll down you want there to be a white space BELOW the top bar always?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:12
which bar? i mean on top of the text, and yup always!
Brad
@bradtaniguchi
Feb 07 2018 23:14
@MuhammedKarim I would put a div above the area to act as an invisible "spacer", and allow the content below it to be scrollable. So the div spacer wouldn't scroll with the content, but always provide some gap at the top of the page
Stephen James
@sjames1958gm
Feb 07 2018 23:14
@krckyboy Udemy is a good resource, and they have discounts all of the time.
bv
@binduverma1
Feb 07 2018 23:15
I published a project thru gh-pages on github . The link github gave me when i click on it , it gives error 404, can anyone help me please with it?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:18
@bradtaniguchi not working :(
Brad
@bradtaniguchi
Feb 07 2018 23:18
@MuhammedKarim Whats wrong with it?
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:19
@bradtaniguchi take a look please
https://codepen.io/MuhammedK/pen/VQKXJq
Brad
@bradtaniguchi
Feb 07 2018 23:23
@MuhammedKarim Yea the div scrolls with the page, you need to prevent scrolling on id="page" tag, and allow scrolling in one of its child tags. Id go into more detail but I'm too busy to say much more than that. Main thing is youll need to handle scrolling different, and wrap the content you want to scroll (everything but the spacer) in a child container
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:26
ohh ok ill try to do what i can, thanks! @bradtaniguchi
CamperBot
@camperbot
Feb 07 2018 23:26
muhammedkarim sends brownie points to @bradtaniguchi :sparkles: :thumbsup: :sparkles:
:cookie: 360 | @bradtaniguchi |http://www.freecodecamp.org/bradtaniguchi
Brad
@bradtaniguchi
Feb 07 2018 23:29
@MuhammedKarim Np, goodluck :D
Ghost
@ghost~5a4a80acd73408ce4f859755
Feb 07 2018 23:29
:) @bradtaniguchi