These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Apr 2017
Gulsvi
@gulsvi
Apr 09 2017 00:01
@mariogalindov If you add the jQuery + Bootstrap.js files your scrollspy will work. To get the titles displaying correctly, try these solutions: twbs/bootstrap#1768
Destroyer8
@Destroyer8
Apr 09 2017 00:10
Could someone please look at my first challenge page here? I'm about halfway done: https://codepen.io/dev999/pen/RpzOOw
Mario Galindo
@mariogalindov
Apr 09 2017 00:15
@SkyCoder01 I added the jquery and bootstrap in the Javascript settings in the eaxct order but everything remains the same, I will check the link. Thanks @SkyCoder01
CamperBot
@camperbot
Apr 09 2017 00:15
mariogalindov sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 948 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 09 2017 00:16
image.png
@mariogalindov You appear to have jQuery listed after bootstrap.js and you have the wrong version of bootstrap. They need to be :point_up: These links and in this order
Mario Galindo
@mariogalindov
Apr 09 2017 00:18
Great, now it works!! Thank you @SkyCoder01 :D
CamperBot
@camperbot
Apr 09 2017 00:18
mariogalindov sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: mariogalindov already gave skycoder01 points
Mario Galindo
@mariogalindov
Apr 09 2017 00:22
The only thing that’s still not working is the offset, If I click Portfolio or Contact the words don’t look good, I mean complete
Derek B. McIntire
@derekbmcintire
Apr 09 2017 00:24
Hey all, I am having trouble with a submit button. I can't get the .on("click") function to work with this button for some reason. I created a second test button with no styling and when I use that it works fine, but it doesn't work with what I curretly have. If you change the id in the JS onclick function to "#testButton" and click that button it works just fine. Does anyone see what is happening? https://codepen.io/derekbmcintire/pen/RpzGyb?editors=1011
wow nevermind
figured it out, so simple... had submitMe spelled wrong in the html :/
::backs away slowly...::
Roxroy
@roxroy
Apr 09 2017 00:42
@derekbmcintire , glad to see that u figured it out. Well done.
Jack Lyons
@JackEdwardLyons
Apr 09 2017 01:59
hey guys, anyone here working with Angular 4?
Mychal Simka
@msimka
Apr 09 2017 01:59
@JackEdwardLyons Angular 4???
Jack Lyons
@JackEdwardLyons
Apr 09 2017 01:59
yeah
im doing the data viz cert with angular
Moisés Man
@moigithub
Apr 09 2017 01:59
you !! :)
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:00
i've got the data displaying, but a weird but to do with my button click
Mychal Simka
@msimka
Apr 09 2017 02:00
@JackEdwardLyons Angular 3 isn't even out yet
Moisés Man
@moigithub
Apr 09 2017 02:00
3,4 are just small updates on 2
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:00
yeah, its now called angular 4
but anyway, is anyone here using it? well, tbh it's not really an angular question, it's a chart.js question
Mychal Simka
@msimka
Apr 09 2017 02:01
Unless someone here is on the Angular team at Google, they wouldn't have access to it
But I'd love to ask some questions too if there was an Angular team dev here
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:02
sorry?
access?
its open source
everyone has access to angular
Mychal Simka
@msimka
Apr 09 2017 02:02
@JackEdwardLyons Sure to angular 2 and 3
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:02
what questions do youhave @msimka
Mychal Simka
@msimka
Apr 09 2017 02:03
I mean 1 and 2
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:03
what questions do you have?
Mychal Simka
@msimka
Apr 09 2017 02:03
Well I'm predicting a native bridge, but who knows
If theres a native bridge they could push react community out a bit
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:04
well, depends on what you're trying to achieve
react has its purpose, angular is more of a framework with a ton more tools to use right out of the box
react is much lighter and faster than angular
but angular you can do more with less decision making about your tech stack
does it affect you @msimka
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:15
yeah
thats what I'm using
mstellaluna
@mstellaluna
Apr 09 2017 02:20
Gitter Does Have angular specific rooms for versions 1.x and 2.x. try asking your angular questions there.
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:21
is there a data viz room?
mstellaluna
@mstellaluna
Apr 09 2017 02:22
There is one for fcc. If it active, no idea
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:23
hmm, thats weird, when i search for it, nothing come sup
mstellaluna
@mstellaluna
Apr 09 2017 02:23
Room is helpdataviz
Jack Lyons
@JackEdwardLyons
Apr 09 2017 02:23
ok
thanks
mstellaluna
@mstellaluna
Apr 09 2017 02:24
Anytime
Abi H
@westminsterabi
Apr 09 2017 02:33
hi, can i get some help with my scrollspy?
Jorge
@OrangeKulture
Apr 09 2017 02:35
@westminsterabi whats bugging you?
Abi H
@westminsterabi
Apr 09 2017 02:39
so i made style in css for "nav text" and it's properly changing the font but not changing the color?
Jorge
@OrangeKulture
Apr 09 2017 02:41
@westminsterabi are you working on codepen? can you post the link or code?
Abi H
@westminsterabi
Apr 09 2017 02:41
Jorge
@OrangeKulture
Apr 09 2017 02:43
@westminsterabi try this:
.nav-text a{
  // your color
}
Abi H
@westminsterabi
Apr 09 2017 02:44
sweet, that worked
@OrangeKulture thanks!
CamperBot
@camperbot
Apr 09 2017 02:45
westminsterabi sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 09 2017 02:45
@westminsterabi sure thing, welcome!
Tanushree Samanta
@TSamanta
Apr 09 2017 03:16
is there any good api tutorial you guys know of
Jorge
@OrangeKulture
Apr 09 2017 03:17
@TSamanta did the beta didnt work out?
Mohamed Derhalli
@derhallim
Apr 09 2017 03:17
:feet: hallo
Abhijeet Singh
@abhijeetps
Apr 09 2017 03:20
Hey guys, need help.
I am building my portfolio. In that, I want to add a contact me thing. And I want it to actually work. Is there any Google Form Feeds or some API for this?
http://codepen.io/aps120797/full/GWaXdp
Jorge
@OrangeKulture
Apr 09 2017 03:21
@derhallim whats the shortcut for the the footprints?
Mohamed Derhalli
@derhallim
Apr 09 2017 03:21
: feet :
no spaces
Jorge
@OrangeKulture
Apr 09 2017 03:21
@aps120797 form submission has to be dealt with some backend, if you want to actually capture the info
@derhallim ahh nice, thanks!(browniess ohh yiissss) .. were can I find all the shortcuts, do you know?
CamperBot
@camperbot
Apr 09 2017 03:22
orangekulture sends brownie points to @derhallim :sparkles: :thumbsup: :sparkles:
:cookie: 149 | @derhallim |http://www.freecodecamp.com/derhallim
Mohamed Derhalli
@derhallim
Apr 09 2017 03:22
@OrangeKulture type : and letter
Abhijeet Singh
@abhijeetps
Apr 09 2017 03:22
@OrangeKulture Yeah. That I know, but there might be some APIs which can handle it.. probably?
@aps120797 Somethinh like Google form Feeds
Jorge
@OrangeKulture
Apr 09 2017 03:24
@aps120797 it all depends on what you plan to do with the information. I'm not familiar with google forms, so I wouldn't know, I guess theoretically you could do it with an API, not sure tho
Abhijeet Singh
@abhijeetps
Apr 09 2017 03:24
@OrangeKulture Thanks.
CamperBot
@camperbot
Apr 09 2017 03:24
aps120797 sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 09 2017 03:26
@aps120797 no probs
Rikesh89
@Rikesh89
Apr 09 2017 04:22
How do I add an Id to an <img>
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:24
<img id="">
Rikesh89
@Rikesh89
Apr 09 2017 04:26
I tried that but it does not work
but when i put img in css it works
just only problem is if i have multiple images it does won't be able to identify the one i want to change unless there is an ID
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:27
id should always be unique.
you cannot give same ID to different elements
Moisés Man
@moigithub
Apr 09 2017 04:27
if u wanna target multiple elements u can use classes @Rikesh89
Rikesh89
@Rikesh89
Apr 09 2017 04:29
So i put in <img id=img1> that did not work and I tried <img class="image">
Tanushree Samanta
@TSamanta
Apr 09 2017 04:29
is beta more than enough to work with wikipedia api @OrangeKulture
Rikesh89
@Rikesh89
Apr 09 2017 04:29
any reason why these are not working when i try to excute it
Moisés Man
@moigithub
Apr 09 2017 04:29
add quotes on the id value
id="img1"
then u can addd css prperties to style it
#img1 {
   color  : brown;
}
Jorge
@OrangeKulture
Apr 09 2017 04:30
@TSamanta umm i havent done the beta at all .. and to be honest, havent done the wiki challenge yet, but I guess it is, yeah .. what are you having trouble with?
@TSamanta once you kinda know how APIs work, and manipulate the data, they are all pretty much the same
Rikesh89
@Rikesh89
Apr 09 2017 04:30
yes i did that aswell
Tanushree Samanta
@TSamanta
Apr 09 2017 04:30
but no where have I found good api tutorial or explanation
Rikesh89
@Rikesh89
Apr 09 2017 04:31
I added quotes and it still does not work
Tanushree Samanta
@TSamanta
Apr 09 2017 04:31
I have this project were i have to fetch the wikipedia data for any given keyword
in 10 different languages
Moisés Man
@moigithub
Apr 09 2017 04:31
note for id on style block u need to prepend with # @Rikesh89
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:31
did you try the wikipedia sandbox?
Tanushree Samanta
@TSamanta
Apr 09 2017 04:32
so its the wikipedia challenge + extra stuff
Jorge
@OrangeKulture
Apr 09 2017 04:32
@TSamanta right .. im guessing the wikipedia API docs would be good to know what parameters you need to pass in
bitcoinabdi
@bitcoinabdi
Apr 09 2017 04:32
please provide feedback
Tanushree Samanta
@TSamanta
Apr 09 2017 04:32
what is wikipedia sandbox. i am sorry I do not know
Rikesh89
@Rikesh89
Apr 09 2017 04:33
@moigithub I forgot the # thanks
CamperBot
@camperbot
Apr 09 2017 04:33
rikesh89 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 3031 | @moigithub |http://www.freecodecamp.com/moigithub
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:33
it is where you can try the actual wikipedia api and see what queries generate what response.
Tanushree Samanta
@TSamanta
Apr 09 2017 04:33
yeah for api all we need to I guess is a little it of DOM ,javascript jQuery and ajax right?
okay I will try that thank you
Duy khanh
@buiduykhanh
Apr 09 2017 04:34
i need some feedback about my Tribute page:
http://codepen.io/buiduykhanh/full/vxqqzj/
thanks a lot :D
Tanushree Samanta
@TSamanta
Apr 09 2017 04:34
@NitinNair89
Jorge
@OrangeKulture
Apr 09 2017 04:34
@NitinNair89 do u have a link?
Jorge
@OrangeKulture
Apr 09 2017 04:34
@TSamanta yeah APIs usually return JSON , u then parse it
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:35
It's a sample query, but you can customize it
Jorge
@OrangeKulture
Apr 09 2017 04:35
@TSamanta I would suggest you use Postman too .. its a pretty cool little program that allows you to make requests to APIS and then get the response on the fly, without the need for any code
Tanushree Samanta
@TSamanta
Apr 09 2017 04:35
really?
lemme google about it
Jorge
@OrangeKulture
Apr 09 2017 04:36
cool stuff @NitinNair89 , will check that out!
Tanushree Samanta
@TSamanta
Apr 09 2017 04:36
i am so tensed about this project
Jorge
@OrangeKulture
Apr 09 2017 04:36
is it the project from FCC ? intermediate?
Tanushree Samanta
@TSamanta
Apr 09 2017 04:36
thank you @NitinNair89
CamperBot
@camperbot
Apr 09 2017 04:36
tsamanta sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Jorge
@OrangeKulture
Apr 09 2017 04:36
@buiduykhanh checking it out
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:36
Welcome! Check the link i shared @TSamanta
Tanushree Samanta
@TSamanta
Apr 09 2017 04:37
no i am applying for internship and they have asked me to make this project @OrangeKulture
Jorge
@OrangeKulture
Apr 09 2017 04:37
@TSamanta ohh right! awesome .. how long do u have?
Tanushree Samanta
@TSamanta
Apr 09 2017 04:37
i was given 5 business days
so yeah wed is the last day
iwas learning js
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:38
All the best Tanushree :)
Jorge
@OrangeKulture
Apr 09 2017 04:38
@buiduykhanh looks pretty nice! awesome job
Tanushree Samanta
@TSamanta
Apr 09 2017 04:38
thank you! @NitinNair89
CamperBot
@camperbot
Apr 09 2017 04:38
tsamanta sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: tsamanta already gave nitinnair89 points
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:39
Just let us know when u need help for your project, i will also do a quick search at my end for wiki translation.. so user enters 1 keyword, result should be synonym? or translation in 10 languages?
Jorge
@OrangeKulture
Apr 09 2017 04:39
@TSamanta yeah dont sweat it .. all projects are like that, a lot of research for the small bits you don't really understand, but once you find the info, it shouldnt be all that hard
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:39
seems an interesting project to me :D
Tanushree Samanta
@TSamanta
Apr 09 2017 04:39
it should be synonym
Jorge
@OrangeKulture
Apr 09 2017 04:39
yeah definitely fun stuff
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:40
ok
Tanushree Samanta
@TSamanta
Apr 09 2017 04:40
its like there will be a menu from which user gets to select from 10 diffrent languages
and the result should be in that language
the way wikipedia works
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:40
Can i suggest alternative?
Tanushree Samanta
@TSamanta
Apr 09 2017 04:40
yeah sure
Jorge
@OrangeKulture
Apr 09 2017 04:40
for the same word, tho, right? not synonyms
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:40
You can use Google Translate i guess
for translation
Tanushree Samanta
@TSamanta
Apr 09 2017 04:40
i do not anyhing except for basic js
Duy khanh
@buiduykhanh
Apr 09 2017 04:41
@OrangeKulture thanks u :D
CamperBot
@camperbot
Apr 09 2017 04:41
buiduykhanh sends brownie points to @orangekulture :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @orangekulture |http://www.freecodecamp.com/orangekulture
Tanushree Samanta
@TSamanta
Apr 09 2017 04:41
and ofc html and css
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:41
are you a freecodecamp member?
Tanushree Samanta
@TSamanta
Apr 09 2017 04:41
yes I am
Nitin Chandran Nair
@NitinNair89
Apr 09 2017 04:41
oh ok
Jorge
@OrangeKulture
Apr 09 2017 04:41
@buiduykhanh welcome, keep it up ! :+1:
Tanushree Samanta
@TSamanta
Apr 09 2017 04:42
@buiduykhanh good one!
Jorge
@OrangeKulture
Apr 09 2017 04:43
guys, can you do me a favor? check out this pen (not finished) and let me know if the background image loads for you?
Tanushree Samanta
@TSamanta
Apr 09 2017 04:45
background image is loading! :thumbsup:
Rikesh89
@Rikesh89
Apr 09 2017 04:46
Does anyone know how to display codepen work on your website. Below is what i think is correct but not sure:
<a href ="website"><img src="website"></a>
Jorge
@OrangeKulture
Apr 09 2017 04:46
awesome stuff
@TSamanta thanks a lot!
CamperBot
@camperbot
Apr 09 2017 04:46
orangekulture sends brownie points to @tsamanta :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @tsamanta |http://www.freecodecamp.com/tsamanta
Tanushree Samanta
@TSamanta
Apr 09 2017 04:46
anytime!
Jorge
@OrangeKulture
Apr 09 2017 04:47
@Rikesh89 u want to display the actual, running pen?
Rikesh89
@Rikesh89
Apr 09 2017 04:47
yea
Tanushree Samanta
@TSamanta
Apr 09 2017 04:47
@Rikesh89 yeah correct syntax
Jorge
@OrangeKulture
Apr 09 2017 04:47
I mean that code would display a link to it .. and a static image
Tanushree Samanta
@TSamanta
Apr 09 2017 04:47
but link the full page version of the pen
Jorge
@OrangeKulture
Apr 09 2017 04:47
if im not mistaken
Rikesh89
@Rikesh89
Apr 09 2017 04:48
I want like pen collections to show up as boxes
Tanushree Samanta
@TSamanta
Apr 09 2017 04:48
yeah i guess that's what he wants
Rikesh89
@Rikesh89
Apr 09 2017 04:48
on my site so you can click on the black box
Tanushree Samanta
@TSamanta
Apr 09 2017 04:49
nope that's not going to happen until you link it like with a screenshot or maybeyou got to use an API to get the screenshot directly if i am not wrong
Jorge
@OrangeKulture
Apr 09 2017 04:49
umm .. its kinda hard to know exactly what you are looking to achieve. Posting the code here would be helpful
Tanushree Samanta
@TSamanta
Apr 09 2017 04:50
yeah true!
Rikesh89
@Rikesh89
Apr 09 2017 04:50
well i was creating my profile page and trying to create it like what they have in the example
portfolio
Jorge
@OrangeKulture
Apr 09 2017 04:50
in the video?
Rikesh89
@Rikesh89
Apr 09 2017 04:50
on the example they used bootstrap to display it all
watch near .36 of the videw
:36 seconds
Jorge
@OrangeKulture
Apr 09 2017 04:51
ahh i was gonna ask... sweet .. one sec
ahh gotcha! .. ok what you wanna do is have a box with an image of your pen and a link to it .. not really the actual working pen directly embedded
Rikesh89
@Rikesh89
Apr 09 2017 04:53
oh okay so just get an image link and then put the ref to the pen website?
Jorge
@OrangeKulture
Apr 09 2017 04:53
i mean that's what I see from the video, im not sure if thats exactly what you want to achieve, or if its something else
cuz in :36, you can see just that .. sort of blacn boxes with the image, the titles and i would guess if you click one it would take you there ..
Rikesh89
@Rikesh89
Apr 09 2017 04:55
oh okay so it would just take you to the code
and then they would have to run it
Jorge
@OrangeKulture
Apr 09 2017 04:55
i mean, thats my assumption of what's happening, it only lasts for 1 sec
Rikesh89
@Rikesh89
Apr 09 2017 04:55
yea that is what I wanted to do so pretty much I think what i am doing was correct
Jorge
@OrangeKulture
Apr 09 2017 04:55
but regardless of what that does, its more important to figure out what you want to do
ahh ok ok.. cool, yeah exactly
what you said before, was correct ..
just depends on how you wanna do it .. u can have the link on the text, on the image.. on the whole div ..
Rikesh89
@Rikesh89
Apr 09 2017 04:57
@OrangeKulture @TSamanta thanks
CamperBot
@camperbot
Apr 09 2017 04:57
rikesh89 sends brownie points to @orangekulture and @tsamanta :sparkles: :thumbsup: :sparkles:
:cookie: 123 | @tsamanta |http://www.freecodecamp.com/tsamanta
:cookie: 282 | @orangekulture |http://www.freecodecamp.com/orangekulture
Jorge
@OrangeKulture
Apr 09 2017 04:57
@Rikesh89 sure thing!
Mohamed Derhalli
@derhallim
Apr 09 2017 05:01
:feet: :'(
Tanushree Samanta
@TSamanta
Apr 09 2017 05:36
@Rikesh89 anytime!
Mohamed Derhalli
@derhallim
Apr 09 2017 05:41
anyone familiar with html preprocessors?
Leafie Tutoring
@www-leafie-io
Apr 09 2017 05:54
@derhallim i guess why whats the question
Tanushree Samanta
@TSamanta
Apr 09 2017 05:54
Screenshot (225).png
Mohamed Derhalli
@derhallim
Apr 09 2017 05:54
i've been reading about pug, haml, etc..
but when would u really use them?
why over html?
Tanushree Samanta
@TSamanta
Apr 09 2017 05:55
i am just not able to undestand what is the error
preprocessors makes things way simpler and easier for you
it's like why use a washing machine when we can wash clothes with our own hands
not wayyy way but yes a little bit more easier
Mohamed Derhalli
@derhallim
Apr 09 2017 05:57
but wouldn't that make it more confusing when u depend on how u well u indent stuff
Tanushree Samanta
@TSamanta
Apr 09 2017 05:57
this is what I feel with css preprocessors
Mohamed Derhalli
@derhallim
Apr 09 2017 05:57
instead of having markup with start and closing tags
Tanushree Samanta
@TSamanta
Apr 09 2017 05:57
and i assume the same thing with html preprocessors
i might be wrong too
Mohamed Derhalli
@derhallim
Apr 09 2017 05:57
with css preprocessors, yes, it will make things MUCH easier
Tanushree Samanta
@TSamanta
Apr 09 2017 05:58
I will look into tha. Goodyou planted this question in my mind
*that
Mohamed Derhalli
@derhallim
Apr 09 2017 05:58
but html preprocessors, where u need to indent the text in order for it to be embedded inside another element, so u actually care about text arrangement in ur document rather than caring about ur code
haha sorry for that :'(
Tanushree Samanta
@TSamanta
Apr 09 2017 05:59
do not be sorry. It is actually a good question though
Mohamed Derhalli
@derhallim
Apr 09 2017 05:59
it is less code for sure, but is it organized and easier to read? I don't think so.. so why use them
did u paste ur code in the screenshot to codepen or anything to see if it works in the first place?
Tanushree Samanta
@TSamanta
Apr 09 2017 06:15
no I didnt
i will check it out
but beta is really is buggy(ofc it would be )
Mohamed Derhalli
@derhallim
Apr 09 2017 06:20
aha
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:31
Hey all, working on my wikisearch page and I'm having trouble with displaying data from the API. I have read through a few resources but I'm not sure I fully understand the process of calling the API. I've copied and pasted all the pieces together and when I put it into the browser I get the Json data just as expected, but I am unable to access that data and change the html. Not sure what I am doing wrong. I'm trying to get the name of the first wikipedia article to display under results, so if you search "Tiger" it should look in the Json array at json[0][1] and grab the word "Tiger" and then replace the html in the <p> element with the "results" ID. I just can't figure out where I'm going wrong.... my pen- https://codepen.io/derekbmcintire/pen/dvBEgM?editors=1111
Tanushree Samanta
@TSamanta
Apr 09 2017 06:38
i am also stuck on it
on youtube
you could check this channel named coding 360
i am referring that channel to make the project
i am mean that's youtube channel
Mohamed Derhalli
@derhallim
Apr 09 2017 06:39
cheating? :P
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:40
I got it to work with the weather app, and tried using the same logic and syntax with the wiki search but it isn't working.
Tanushree Samanta
@TSamanta
Apr 09 2017 06:41
nope he explains very well
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:41
I haven't looked at any code or youtube yet, trying to figure it out through reading first, but I am just lost at this point haha
Tanushree Samanta
@TSamanta
Apr 09 2017 06:41
my project is partially based on it
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:41
I will have a look
Tanushree Samanta
@TSamanta
Apr 09 2017 06:41
this is one more source which very well explains stuff
you can read this
i am trying to clear my api concepts
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:42
the thing is I really though I understood it until I couldn't get this to work
Mohamed Derhalli
@derhallim
Apr 09 2017 06:42
@TSamanta am still waiting for the html explanation.. 😂
Tanushree Samanta
@TSamanta
Apr 09 2017 06:42
unfortunately FCC does not provide indepth knowledge
Mohamed Derhalli
@derhallim
Apr 09 2017 06:42
that's 100% true
Tanushree Samanta
@TSamanta
Apr 09 2017 06:43
I dont have any :worried: I will defintely answer you question after i am done with my project and dig deeper
Mohamed Derhalli
@derhallim
Apr 09 2017 06:43
i'll know why and tell u
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:45
is it normal for an api call to bring back Json data that is just an array, not an object?
Mohamed Derhalli
@derhallim
Apr 09 2017 06:45
@derekbmcintire yea
okay
I'm fairly certain I am doing the API call correctly
but I don't know why I can't use it to manipulate the html
Mohamed Derhalli
@derhallim
Apr 09 2017 06:48
what's the return value?
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:49
from the API?
I don't know... I guess I can console.log to check it?
Mohamed Derhalli
@derhallim
Apr 09 2017 06:50
yea
Jor
@joreyesl
Apr 09 2017 06:51
@derekbmcintire why would it be harder to manipulate an array vs an object.
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:52
$.getJSON(wikiSearchData, function(json) {
  $("#exactSearch").text(document.getElementById("searchInput").value);  
  $("#result").text(json[0][1]);
});
Mohamed Derhalli
@derhallim
Apr 09 2017 06:52
@joreyesl i guess he's always expecting an object, maybe new to the API thing that's why, but he's gonna get used to it
@derekbmcintire do console.log(json);
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:52
that's my code... so the data should be stored in the value json ?
I'm super new to this
Mohamed Derhalli
@derhallim
Apr 09 2017 06:52
send me what u have logged
Derek B. McIntire
@derekbmcintire
Apr 09 2017 06:53
yeah I did that and I get nothing in the console
@joreyesl not saying it would be harder, just wanted to check that I was getting the right data
Johnny
@jtan3
Apr 09 2017 06:59
@derekbmcintire try adding &callback=? at the end of your wikiSearchData link
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:01
Okay, that fixes part of it... now the input data is displayed, but the info from the api isn't
it logged something though
won't let me copy and paste but it says error: Object
code: nosearch
Johnny
@jtan3
Apr 09 2017 07:03
not sure what that means
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:04
and "the search parameter must be set
Mohamed Derhalli
@derhallim
Apr 09 2017 07:05
ummm
first of all, u need to add the code for getting text value, inside the button click

so this:

var userSearchInput = document.getElementById("searchInput").value;
      var baseUrl = "https://en.wikipedia.org/w/api.php?";
            var wikiSearchData = baseUrl + "action=opensearch&search=" + userSearchInput + "&limit=3&namespace=0&format=json";

must be inside ur button click , although baseUrl can be outside

Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:05
you mean declaring those variables?
Mohamed Derhalli
@derhallim
Apr 09 2017 07:06
because each time u click search, u want to get the new value of the text
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:06
ok... guess i thought if it was outside I could use it anywhere
Jor
@joreyesl
Apr 09 2017 07:06
@derekbmcintire ok i think i see the propblem, you are not passing in the search. you declared wikiSearchData on document ready so the user search team will be empty when you click search. You should append the user input in the click function before calling the getJSON
Mohamed Derhalli
@derhallim
Apr 09 2017 07:06
u can declare it outside, but u need to assign it inside
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:06
Okay that is working
oh got it
cool... didn't get the result I expected, but it is doing something now!
Johnny
@jtan3
Apr 09 2017 07:07
how come you're hardcoding the indexes ?
Mohamed Derhalli
@derhallim
Apr 09 2017 07:07
then u need to parse that JSON, JSON.parse, to be able to deal with it as an object
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:08
because I literally barely know what I'm doing?
haha
okay... I have seen that but need to understand that more
@jtan3 you mean instead of assigning them to a variable>
Johnny
@jtan3
Apr 09 2017 07:10
@derekbmcintire remember the the quote api? your quotes were in an array and your accessed them through a loop?
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:10
I had it assigned to a variable but was just trying to make it as straight forward as possible to see how it works and debug/problem solve
hmm.... yeah I can go back and look at it
Johnny
@jtan3
Apr 09 2017 07:11
@derekbmcintire or by array[i]. Treat the json data like the arary of quotes.
Mohamed Derhalli
@derhallim
Apr 09 2017 07:12
@jtan3 we can get that array using $.getJSON right?
Johnny
@jtan3
Apr 09 2017 07:12
yeah
Mohamed Derhalli
@derhallim
Apr 09 2017 07:12
cool
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:12
right
and shouldn't json[1][0] give me a result of "Tiger" ?
but I have [0][1] in the code...
ahh it's working now
Mohamed Derhalli
@derhallim
Apr 09 2017 07:14
😂
perfect
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:15
@jtan3 how did you know to add the &callback=? at the end of the API call?
Mohamed Derhalli
@derhallim
Apr 09 2017 07:15
if u got used to being in korea, u will get used to api calls 😂
Johnny
@jtan3
Apr 09 2017 07:15
@derekbmcintire you had an error CORS
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:15
haha true
I actually left Korea about two months ago, I'm in Indonesia now
Johnny
@jtan3
Apr 09 2017 07:16
@derekbmcintire i googled wiki CORS error
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:16
what is CORS?
Mohamed Derhalli
@derhallim
Apr 09 2017 07:16
Indonesia 😂
cross origin resource .. S i donno
Johnny
@jtan3
Apr 09 2017 07:17
@derekbmcintire console.log your json[1][0] and see what you get
Mohamed Derhalli
@derhallim
Apr 09 2017 07:17
it's a security thing that prevents u from doing calls cross domains
manjotkaurghuman
@manjotkaurghuman
Apr 09 2017 07:17
hi can anyone please help me
i stuck on this page so let me know what to do

Build a Tribute Page

Objective: Build a CodePen.io app that is functionally similar to this: https://codepen.io/FreeCodeCamp/full/NNvBQW/.

Fulfill the below user stories. Use whichever libraries you need. Give it your own personal style.

User Story: I can view a tribute page with an image and text.

User Story: I can click on a link that will take me to an external website with further information on the topic.

Remember to use Read-Search-Ask if you get stuck.

When you are finished, click the "I've completed this challenge" button and include a link to your CodePen.

You can get feedback on your project by sharing it with your friends on Facebook.

Mohamed Derhalli
@derhallim
Apr 09 2017 07:18
so if u have a script running in ur browser, it doesn't have access to other things other than that domain
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:18
hmm... I get a whole array
Mohamed Derhalli
@derhallim
Apr 09 2017 07:18
otherwise, people would be able to access ur email by running scripts here and there 😂
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:19
wait no, that's old
cleared it and re-did it and got what I expected, the title of the first article returned
@jtan3 Thanks for your help!
CamperBot
@camperbot
Apr 09 2017 07:21
derekbmcintire sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @jtan3 |http://www.freecodecamp.com/jtan3
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:21
@derhallim Thanks too, feeling like I'm making at least some progress
Mohamed Derhalli
@derhallim
Apr 09 2017 07:22
yes u r
u just knew what the first 3 letters of CORS mean 😂
Johnny
@jtan3
Apr 09 2017 07:23
@derekbmcintire so json[1][0] would only get you the first index of the array. Don't you want all of the array items when you search for "tiger"
Derek B. McIntire
@derekbmcintire
Apr 09 2017 07:25
Yeah, but I know how to do that now!
Johnny
@jtan3
Apr 09 2017 07:26
cool
jetsang
@DevDealer82
Apr 09 2017 07:40
Hey guys, I'm doing the personal portfolio challenge and I was wondering if any of the previous lessons taught us about the scrolling buttons and thumbnail pics or is that something that I need to google through? I don't recall learning the stuff while doing the lessons
Johnny
@jtan3
Apr 09 2017 07:42
@DevDealer82 they didn't really teach that stuff
jetsang
@DevDealer82
Apr 09 2017 07:43
@jtan3 Thanks, I was about to go back and recheck all the lessons.
CamperBot
@camperbot
Apr 09 2017 07:43
devdealer82 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Apr 09 2017 07:45
@DevDealer82 626 area, cool.
abhijith shenoy
@shenoyabhijith
Apr 09 2017 08:05
any android developers here
Tanushree Samanta
@TSamanta
Apr 09 2017 08:06
can we use just jQuery to use wikipedia api?
Siddikur Rahman
@Siddikur
Apr 09 2017 08:07
Tanushree Samanta
@TSamanta
Apr 09 2017 08:25
Its really good
Siddikur Rahman
@Siddikur
Apr 09 2017 08:25
i don't understand how it work?
Tanushree Samanta
@TSamanta
Apr 09 2017 08:26
have you done the jQuery js ,json and ajax courses?
and css preprocessors like scss?
Siddikur Rahman
@Siddikur
Apr 09 2017 08:27
no
Tanushree Samanta
@TSamanta
Apr 09 2017 08:27
its based on that
Siddikur Rahman
@Siddikur
Apr 09 2017 08:27
oh
where can do it?
Tanushree Samanta
@TSamanta
Apr 09 2017 08:28
you're on FCC right?
Siddikur Rahman
@Siddikur
Apr 09 2017 08:28
hmm
yeah
Tanushree Samanta
@TSamanta
Apr 09 2017 08:28
so do that but with that refer other sources too
and you'll get to know how is this done
follow the map as your course reference
Siddikur Rahman
@Siddikur
Apr 09 2017 08:29
okey and thank you so much..I am new here.
Tanushree Samanta
@TSamanta
Apr 09 2017 08:29
yeah you will get that hang
work hard!
cheers!
Siddikur Rahman
@Siddikur
Apr 09 2017 08:30
thanks for you advice...
exali
@exali
Apr 09 2017 09:01
hello, my footer is not staying at the bottom for some reason
and I need help centering it
def
@defregga
Apr 09 2017 09:30
@exali Link to CodePen?
Henry
@GitHub-Henry
Apr 09 2017 10:00
anyone using sass sourcemaps?
@exali where is code
Spyrantis Theodoros
@thodorisanta
Apr 09 2017 10:29

lets say that i have 3 elements in a div like :smile:

<div class="XorO">
        <p>Would you like to be X or O?</p>
        <button class="choose-x">X</button>
        <button class="choose-o">O</button>
        <button class="back-button">Back</button>
    </div>

how can i make the 3rd button <button class="back-button">Back</button> to be in a different row without the use of bootstrap?

Prateek Goel
@prateekgoel
Apr 09 2017 10:30
you can use display:block; on .back-button class @thodorisanta
ashar
@ashar10989
Apr 09 2017 10:45
can anyone help me with the portfolio project ?????
Tanushree Samanta
@TSamanta
Apr 09 2017 10:45
hi for wikipedia viewer after clicking the appropriate search can we pull the content on our page
what do we have to do for that?
Siddikur Rahman
@Siddikur
Apr 09 2017 10:46
can give me a templete link? for prectice..
Ana Toma
@anawebdev
Apr 09 2017 10:47
why is this seen as an infinite loop if 'i' keeps increasing?
function generateSequence() {
  var i=0;
  while(i<21){
    i++;
    computer = computer.concat(random());
  }
}
Prateek Goel
@prateekgoel
Apr 09 2017 10:47
I think your loop will never execute @feuerbird29
Because i=0; so it'll never satisfy the while condition
Jan Shah
@JanShah
Apr 09 2017 10:49
@prateekgoel doesn't the i++ increase the value of i?
heroiczero
@heroiczero
Apr 09 2017 10:49
@CentropyIT yes
Ana Toma
@anawebdev
Apr 09 2017 10:49
@prateekgoel but i set i to 0 so it will enter the while condition...should i do that outside of the generateSequence function?
Jan Shah
@JanShah
Apr 09 2017 10:49
it's not infinite then is it? @heroiczero

i've just ran

var i=0;
  while(i<21){
    i++;
    console.log(i)
  }

and it loops just fine

heroiczero
@heroiczero
Apr 09 2017 10:51
@CentropyIT yeah it should
Prateek Goel
@prateekgoel
Apr 09 2017 10:51
@feuerbird29 no.. your loop is fine
it's not infinite
Jor
@joreyesl
Apr 09 2017 10:53
@feuerbird29 loop should be fine. its just a warning.
Ana Toma
@anawebdev
Apr 09 2017 10:56
my console says: "[CodePen]: An infinite loop (or a loop taking too long) was detected, so we stopped its execution. Sorry!" and then "infinite loop found on line 0" which doesn t even exist... i ll check out the rest of the functions, the problem might be there .
@joreyesl @prateekgoel @heroiczero @CentropyIT thank you
CamperBot
@camperbot
Apr 09 2017 10:56
feuerbird29 sends brownie points to @joreyesl and @prateekgoel and @heroiczero and @centropyit :sparkles: :thumbsup: :sparkles:
:cookie: 366 | @centropyit |http://www.freecodecamp.com/centropyit
:cookie: 763 | @joreyesl |http://www.freecodecamp.com/joreyesl
:cookie: 190 | @prateekgoel |http://www.freecodecamp.com/prateekgoel
:star2: 1112 | @heroiczero |http://www.freecodecamp.com/heroiczero
Jor
@joreyesl
Apr 09 2017 10:58
@feuerbird29 post the rest of your code
Prateek Goel
@prateekgoel
Apr 09 2017 10:58
@feuerbird29 or share the codepen link
Ana Toma
@anawebdev
Apr 09 2017 11:16
it works now :)
Prateek Goel
@prateekgoel
Apr 09 2017 11:19
@feuerbird29 Great :+1:
anfusion
@anfusion
Apr 09 2017 11:26
excuse me peeps
could anyone tell me why sth in mss isnt working?
Jan Shah
@JanShah
Apr 09 2017 11:27
@anfusion aweseome design :)
anfusion
@anfusion
Apr 09 2017 11:27
and the button that says "tweet this quote"
will not move
haha, lol... its a work in progresss
i dont know why but it just refuses to move from the spot its decided to be and im stumped
Jan Shah
@JanShah
Apr 09 2017 11:28
@anfusion you want it to move where?
anfusion
@anfusion
Apr 09 2017 11:29
well, for now i was gonna put it just to the side of the robot
Jan Shah
@JanShah
Apr 09 2017 11:29
you just want to style it you mean? not move it on click or something?
anfusion
@anfusion
Apr 09 2017 11:29
later i wanna make it cool and if like a a button on the robot but thats just a a pipe dream atm
yea just change its position, cos right now its covering up the author of the quote
Jan Shah
@JanShah
Apr 09 2017 11:31
Assign position: absolute on the button and assign a position?
bit hacky I think
anfusion
@anfusion
Apr 09 2017 11:32
yea? i dunno, i was followoing some guide to get the text on top of the image
Jan Shah
@JanShah
Apr 09 2017 11:32
@anfusion it's inside the h3 tag so not moving. if you move it outside that you have full flexibility to position it
anfusion
@anfusion
Apr 09 2017 11:32
and for h2 and h3 etc it worked by adjusting top and left.
but for this button they wont work
is it??
omg
        <h3 class="messageauth">go<h3>
          <button class"tweetbutton" id="btnTweet">Tweet this quote</button>
      </div>
are u sure?
Jan Shah
@JanShah
Apr 09 2017 11:35
go<h3> should be go</h3>
anfusion
@anfusion
Apr 09 2017 11:35
<
ok
i see
was totally missing that, thanks @CentropyIT
CamperBot
@camperbot
Apr 09 2017 11:36
anfusion sends brownie points to @centropyit :sparkles: :thumbsup: :sparkles:
:cookie: 369 | @centropyit |http://www.freecodecamp.com/centropyit
Jan Shah
@JanShah
Apr 09 2017 11:36
no worries, I really like your work :)
anfusion
@anfusion
Apr 09 2017 11:39
chz man
i wanna make it into a steampunk robot
and u operate the controls on it to get the quote
which will appear in a screen on his belly or sth
but im a bit noob its gonna take a while
Jan Shah
@JanShah
Apr 09 2017 11:41
@anfusion I've got a function that scrolls text, it would look great on that robot
Spyrantis Theodoros
@thodorisanta
Apr 09 2017 11:42
how can i move the back button to the left side of the screen? i tried left:50px; but it didnt work
http://codepen.io/oshikurou/pen/dvEOOX?editors=1101
anfusion
@anfusion
Apr 09 2017 11:43
oh yea?
thats exactly what i wanted to do!
Jan Shah
@JanShah
Apr 09 2017 11:43
You'll have to figure it out yourself though :) http://codepen.io/centropy/pen/aJwoYb
anfusion
@anfusion
Apr 09 2017 11:44
ok ; p
Jan Shah
@JanShah
Apr 09 2017 11:45
@anfusion the scroller function starts on line 182. It's commented so should be easy to integrate into your project
anfusion
@anfusion
Apr 09 2017 11:45
awesome
checking it out
Prateek Goel
@prateekgoel
Apr 09 2017 11:48
@CentropyIT The size is too big. I have to scroll the page
Jan Shah
@JanShah
Apr 09 2017 11:49
just view it in code view. I didn't put it inside a container so it just fits the page width
@prateekgoel
you can change the page width to suit how big you want it to be
Prateek Goel
@prateekgoel
Apr 09 2017 11:52
But I think no one would want it that big
Jan Shah
@JanShah
Apr 09 2017 11:52
@prateekgoel unless it's put a 100" projector... :)
Prateek Goel
@prateekgoel
Apr 09 2017 11:53
:smile:
Jan Shah
@JanShah
Apr 09 2017 11:54
just for you
.container {
  max-width: 800px;
}
@prateekgoel
Prateek Goel
@prateekgoel
Apr 09 2017 12:06
Thanks @CentropyIT .
Also add margin:0 auto; so it would be center aligned.
CamperBot
@camperbot
Apr 09 2017 12:06
prateekgoel sends brownie points to @centropyit :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @centropyit |http://www.freecodecamp.com/centropyit
Prateek Goel
@prateekgoel
Apr 09 2017 12:07
Also you can provide a hand cursor on buttons using cursor:pointer;
@CentropyIT
@CentropyIT Looks good center aligned
Thanks for accepting the suggestion
Jan Shah
@JanShah
Apr 09 2017 12:09
@prateekgoel that is a bit of a challenge, the buttons aren't buttons
@prateekgoel no, thank you for making me do it :) I knew it wasn't quite right
CamperBot
@camperbot
Apr 09 2017 12:09
centropyit sends brownie points to @prateekgoel :sparkles: :thumbsup: :sparkles:
:cookie: 191 | @prateekgoel |http://www.freecodecamp.com/prateekgoel
Prateek Goel
@prateekgoel
Apr 09 2017 12:10
#onOff {
    cursor: pointer;
}
you can put hand cursor like this. You already have ids to your buttons
which are not buttons actually
Jan Shah
@JanShah
Apr 09 2017 12:12
I'd have to repeat that across all buttons? how would you do that DRY?
@prateekgoel
Prateek Goel
@prateekgoel
Apr 09 2017 12:15
You can do one thing. Given a class to all elements you want hand cursor on. Then,
.classname{
cursor:pointer;
}
@CentropyIT
Jan Shah
@JanShah
Apr 09 2017 12:20
thanks for that bro :) feels complete now
@prateekgoel
Prateek Goel
@prateekgoel
Apr 09 2017 12:21
Great :) @CentropyIT . Also you can add to new, level and strict buttons
Roxroy
@roxroy
Apr 09 2017 12:28
@CentropyIT , I am playing your simon game, I like that running text feature. You used a lot of advanced JS and SVG, Great job.
Jan Shah
@JanShah
Apr 09 2017 12:29
@roxroy thanks :) I'm beaming with pride :)
CamperBot
@camperbot
Apr 09 2017 12:29
centropyit sends brownie points to @roxroy :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @roxroy |http://www.freecodecamp.com/roxroy
Roge
@RogeMateos
Apr 09 2017 12:29
hello buddies i need some help with some html stuff
it seems easy but i am stack
any help please
Sourabh Rangdal
@sourabhrangdal
Apr 09 2017 12:30
@RogeMateos please ask your question
Roge
@RogeMateos
Apr 09 2017 12:31
basically i am trying to achieve this http://www.rogemateos.com/Serverpicture/htmlProtoype.png
Sourabh Rangdal
@sourabhrangdal
Apr 09 2017 12:31
@RogeMateos i got the messge The requested URL /Serverpicture/htmlProtoype.png was not found on this server.
Jan Shah
@JanShah
Apr 09 2017 12:32
@RogeMateos the url doesn't exist
Roge
@RogeMateos
Apr 09 2017 12:32
sorry
basically is creating it without using any css
Jan Shah
@JanShah
Apr 09 2017 12:33
@RogeMateos which part of the image are you trying to emulate?
Roge
@RogeMateos
Apr 09 2017 12:34
everything
the whole image
this
Jan Shah
@JanShah
Apr 09 2017 12:34
ok, you are getting there. Is there anything specifically you're struggling with ?
yes
spacing the parraghaps
next to the picture
and the height
also the background with typo i odnt know how achieve that without css
Jan Shah
@JanShah
Apr 09 2017 12:36
without css you're going to struggle
with css it's easy.
Roge
@RogeMateos
Apr 09 2017 12:36
yes
i know
tht is the test
no css
Jan Shah
@JanShah
Apr 09 2017 12:37
you could add a css framework so you don't have to add custom css
Roge
@RogeMateos
Apr 09 2017 12:37

Using your best judgement, add the correct HTML/HTML5 tags for each element. Include the image sunset.jpg in the img folder. You do not need to supply any CSS for these elements they should remain unstyled.

We will be paying close attention to the following aspects:

Valid markup
Semantic markup
Accessibility

Jan Shah
@JanShah
Apr 09 2017 12:37
or inline styles. It has to be styled somehow.
Roge
@RogeMateos
Apr 09 2017 12:37
ok they dont want styles
see the brief
Jan Shah
@JanShah
Apr 09 2017 12:37
where's the brief?
i've not seen it :worried:
Roge
@RogeMateos
Apr 09 2017 12:39

Using your best judgement, add the correct HTML/HTML5 tags for each element. Include the image sunset.jpg in the img folder. You do not need to supply any CSS for these elements they should remain unstyled.

We will be paying close attention to the following aspects:

Valid markup
Semantic markup
Accessibility

Prateek Goel
@prateekgoel
Apr 09 2017 12:40
@RogeMateos can you use js? :smile:
Roge
@RogeMateos
Apr 09 2017 12:40
i dont think i can to be honest
because they jsut give me the folder with html file
Prateek Goel
@prateekgoel
Apr 09 2017 12:41
Then why you have included jquery and other scripts?
Jan Shah
@JanShah
Apr 09 2017 12:41
<img hspace = "20px" >
Roge
@RogeMateos
Apr 09 2017 12:41
because if i had they would have givent
to me
Jan Shah
@JanShah
Apr 09 2017 12:41
that gave me a nice margin to the right of the picture
Roge
@RogeMateos
Apr 09 2017 12:41
like in the other test
oh thanks
perhaps there is something for hight too
hegiht
height to
adding to p
Jan Shah
@JanShah
Apr 09 2017 12:42
vspace = will work for that
Prateek Goel
@prateekgoel
Apr 09 2017 12:43
hspace and vspace
@RogeMateos no need of height
Roge
@RogeMateos
Apr 09 2017 12:45
if i want to set up Witness testomony
at the bottom of the pic
Jan Shah
@JanShah
Apr 09 2017 12:47
@RogeMateos is it a block of text or an image? the witness testimony?
should be like this
it is block
Jan Shah
@JanShah
Apr 09 2017 12:50
<cite> returns stylized text, so there's a possibility some html5 tag exists that will return that format. I'm searching google
rugano
@rugano
Apr 09 2017 12:50
hello campers!
Roge
@RogeMateos
Apr 09 2017 12:50
Spyrantis Theodoros
@thodorisanta
Apr 09 2017 12:51

why i can only use the left: 240px; in my back button (last object in my css) ONLY if i first use position: absolute; on it?

http://codepen.io/oshikurou/pen/dvEOOX?editors=1111

Jan Shah
@JanShah
Apr 09 2017 12:53
@thodorisanta because it's inside the div block, it's leftmost point is the start of the block, not the page
240px is being measured from the left hand side of the box
rugano
@rugano
Apr 09 2017 12:54
How do i fix the top of the page containing the about,contact and portfolio?how can i style the portfolio images to fit in the web page?
Jan Shah
@JanShah
Apr 09 2017 12:54
absolute, fixed and some other tags allow left, right, top, bottom positioning
@thodorisanta
rugano
@rugano
Apr 09 2017 12:55
Jan Shah
@JanShah
Apr 09 2017 12:56
@rugano it says there you've completed html fundamentals
Spyrantis Theodoros
@thodorisanta
Apr 09 2017 12:56
@CentropyIT thanks man :)
CamperBot
@camperbot
Apr 09 2017 12:56
thodorisanta sends brownie points to @centropyit :sparkles: :thumbsup: :sparkles:
:cookie: 371 | @centropyit |http://www.freecodecamp.com/centropyit
johnnyjeries
@johnnyjeries
Apr 09 2017 13:15
hello guys
im stuck in the twitchtv json api challenge
anyone can help?
Jan Shah
@JanShah
Apr 09 2017 13:17
what's the issue ? @johnnyjeries
Roge
@RogeMateos
Apr 09 2017 13:30
hey guys
i think there is a missunderstanding because i am reading and
it says
You DO NOT need to supply any CSS for these elements they should remain unstyled
so it is just about semantic
Ken Haduch
@khaduch
Apr 09 2017 13:34

@rugano - I don't have too much time to spend helping, but a quick look at your portfolio page looks like it does need some work. I would suggest that you get the Bootstrap navbar template from their website, and use that to set up the navbar, if that is what you mean by "fix" the top of the page. And then for your images, it looks like you are trying to use the bootstrap grid, but you don't have it set up properly - you should review that. The general structure is to use something like this:

<div class="container">
    <div class="row">
        <div class="col-md-6">
            <img src="" >
        </div>
        <div class="col-md-6">
            <img src="" >
        </div>
    </div>
</div>

There is plenty of documentation on the use of the grid, as well as some freeCodeCamp basic lessons on it, if I remember correctly. You can also use the img-responsive class for the images to make them resize to fit the page, once you have everything properly set up.
Sorry that I cannot elaborate, I have to run along. Good luck!

Sandbagger
@Sandbagger
Apr 09 2017 13:46
Hello all, I am trying to use the template Navbar example but when I copy and paste the code it does not display properly in Code Pen ( see here http://codepen.io/Sandbagger/pen/OpKVpW). Any ideas?
johnnyjeries
@johnnyjeries
Apr 09 2017 13:49

hello,
Im trying to get all the "display_name" of the channels in from this api url:

https://gist.githubusercontent.com/QuincyLarson/2ff6892f948d0b7118a99264fd9c1ce8/raw/e9e12f154d71cf77fc32e94e990749a7383ca2d6/Twitch%2520sample%2520API%2520responses%2520in%2520array%2520form

I cant access the names because I dont know what to write first? how can I know the name of the whole array?

Tom
@moT01
Apr 09 2017 13:49
@Sandbagger code is from an older version of bootstrap maybe
johnnyjeries
@johnnyjeries
Apr 09 2017 13:51
anybody?
Tom
@moT01
Apr 09 2017 13:52
1 sec ill take a look
johnnyjeries
@johnnyjeries
Apr 09 2017 13:52
@CentropyIT
thanks
Sandbagger
@Sandbagger
Apr 09 2017 13:52
@moT01 cheers, spot on
Tom
@moT01
Apr 09 2017 13:54
@johnnyjeries do you need to know the name of the whole array?
johnnyjeries
@johnnyjeries
Apr 09 2017 13:54
yes
so I can access the channel names
im using for loop
maybe im using the wrong api url?
Tom
@moT01
Apr 09 2017 13:55
you cant access one of the spots in the array without a name? or would that not work
johnnyjeries
@johnnyjeries
Apr 09 2017 13:55
not sure
these are arrays inside of arrays
I will try something
Tom
@moT01
Apr 09 2017 13:56
these are objects inside of array, you should be able to, i think
johnnyjeries
@johnnyjeries
Apr 09 2017 13:56
maybe your right
Tom
@moT01
Apr 09 2017 14:00
any luck @johnnyjeries ?
johnnyjeries
@johnnyjeries
Apr 09 2017 14:00
no
blob
blob
blob
sorry
Tom
@moT01
Apr 09 2017 14:04
you can access a spot in array with the index, ...array[0] should give you the first thing
Abdulah Hamzic
@hamzicabdulah
Apr 09 2017 14:04
@hamzicabdulah
hey guys, I need help with React
This is the repo: https://github.com/hamzicabdulah/markdown-previewer
I've set up webpack, babel and react successfully locally
webpack compiles the /scripts/app.js file to a /dist/bundle.js file successfuly
but, the react component doesn't show up: https://hamzicabdulah.github.io/markdown-previewer/
is there something wrong with the compiled bundle.js file or maybe my index.html file?
Please help
Tom
@moT01
Apr 09 2017 14:06
@hamzicabdulah it shows up locally obviously
Abdulah Hamzic
@hamzicabdulah
Apr 09 2017 14:10
No, it doesn't @moT01 That's my issue
Tom
@moT01
Apr 09 2017 14:12
console shows a few errors
maybe react version
Abdulah Hamzic
@hamzicabdulah
Apr 09 2017 14:16
oh hell, I had forgotten to require React and ReactDOM, forgot to do that since copying the code from CodePen
silly me
@moT01 thanks for your input
CamperBot
@camperbot
Apr 09 2017 14:16
hamzicabdulah sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 624 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Apr 09 2017 14:21
yea, that stuff can get lost when trying to copy and paste to codepen
should just be able to put the github pages link to submit a project
Muhammad Hasham
@MohammadHasham
Apr 09 2017 14:36
how can i change the border colors to black instead of grey
blob
i have tried really eveything can anypne help me
typos*
Tom
@moT01
Apr 09 2017 14:42
@MohammadHasham probly an answer here https://css-tricks.com/complete-guide-table-element/
Muhammad Hasham
@MohammadHasham
Apr 09 2017 14:48
@moT01 actually i want the borders of the table to change from grey to black
Simon Cordova
@gbsimon87
Apr 09 2017 14:53
Hey guys, anybody know how to find out which frameworks a website is using, but by using a console commands?
Tom
@moT01
Apr 09 2017 14:53
should be in there @MohammadHasham, i saw a property that should do it
try border-color:
Muhammad Hasham
@MohammadHasham
Apr 09 2017 14:54
i couldn't find one @moT01 :-(
Craig Morrison
@frogmorton
Apr 09 2017 14:56
Hey folks, question about the openweathermap json responses... it returns a 2-letter country code. What if I want to convert that to a human readable form? Is there some standardized list they are using?
Maude
@maudem
Apr 09 2017 14:58
Alright guys... Anyone willing to look over my code and tell me why the heck I'm not getting a response? Even when I console.log smaller blocks, I 'm not getting anything back when I input values into my form http://codepen.io/maudball/pen/OpKVYO
Tom
@moT01
Apr 09 2017 15:00
@frogmorton im sure there's something out there to copy and paste that you could use to translate it for you, ...i dont know of one
@maudem might want to add jquery for starters
not sure it likes the way youre selecting the tbody
oh, maybe you do have jquery in there
lhoward465
@lhoward465
Apr 09 2017 15:03
Wow, found out something that although makes sense is definitely worth knowing.
Tom
@moT01
Apr 09 2017 15:03
not sure if you can do it like that on codepen or not
Craig Morrison
@frogmorton
Apr 09 2017 15:03
@moT01 I take a look around
lhoward465
@lhoward465
Apr 09 2017 15:03
It seems that when generating dynamic html, it won't allow broken html even if it's temporary.
Tom
@moT01
Apr 09 2017 15:05
@maudem there's a + missing in the append
Maude
@maudem
Apr 09 2017 15:06
@moT01 , thanks. would that stuff keep me from getting a response at all , though?
CamperBot
@camperbot
Apr 09 2017 15:06
maudem sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 625 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Apr 09 2017 15:07
no, i opened the pen and just saw an error down there so that's where i started looking
then realized that wasn't what you were asking
Maude
@maudem
Apr 09 2017 15:10
@moT01 I fixed that , I got something on the page! Now off to fix the rest of it ... thanks again
CamperBot
@camperbot
Apr 09 2017 15:10
maudem sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: maudem already gave mot01 points
Ender
@enderkum
Apr 09 2017 15:18
Codepen.io adds bootstrap 4 alpha. Shall we use bootstrap 4 or change it to bootstrap 3?
alpox
@alpox
Apr 09 2017 15:19
@enderkum Whatever you prefer to learn now.
Bootstrap 3 gets used everywhere still, but Bootstrap 4 will come fast
I myself prefer the structure of bootstrap 4
Roge
@RogeMateos
Apr 09 2017 15:37
Hello i need some help with jQuery exercise
any help please
Gulsvi
@gulsvi
Apr 09 2017 15:40
@RogeMateos What's your question?
i have this code here
which is working
but what i want is when i click also de minus change to plus
i folled this tutorial
and the css it is different because in here i have a pseudoclass after
and in the otehr one span
.RevealCard-header::after {
border: 1px solid #fff;
content: "-";
height: 1.15em;
line-height: 1em;
position: absolute;
right: 0.5em;
text-align: center;
width: 1.15em;
}
so basically is adding this again with contant +
i dont want to add the span like the example
Gulsvi
@gulsvi
Apr 09 2017 15:44
@RogeMateos I'm not sure how to affect the ::after psuedo class with jQuery. I'll see if I can figure that out :)
Roge
@RogeMateos
Apr 09 2017 15:44
i want to keep the .RevealCard-header::after
basically is adding content +
Gulsvi
@gulsvi
Apr 09 2017 15:50

@RogeMateos You can do it this way. Add a custom data-attribute with your content in your HTML:

<h3 class="RevealCard-header" data-content="-">

And, in your CSS, get that content with attr(data-content):

.RevealCard-header::after {
  border: 1px solid #fff;
  content: attr(data-content);
  height: 1.15em;
  line-height: 1em;
  position: absolute;
  right: 0.5em;
  text-align: center;
  width: 1.15em;
}
Then your jQuery just manipulates the data-content value on click:
$(".RevealCard-header").attr('data-content', '+');
or
$(".RevealCard-header").attr('data-content', '-');
The issue is that the ::after selector isn't part of the DOM, so it can't be manipulated with jQuery. By adding a custom data-content attribute, you can make it part of the DOM and manipulate it.
Roge
@RogeMateos
Apr 09 2017 15:53
trying to find now
adding cutstom data
exactly what it is
alpox
@alpox
Apr 09 2017 16:01
@SkyCoder01 there is also $(".RevealCard-header").data('content', '-');
Gulsvi
@gulsvi
Apr 09 2017 16:02
@RogeMateos Sorry, didn't see your response. This is a basic example: http://s.codepen.io/skycoder/pen/WpVQmV?editors=1011
@alpox I believe .data is for getting the data, not setting it
I don't know, I always have more luck with .attr() for some reason
alpox
@alpox
Apr 09 2017 16:03
@SkyCoder01 It works exactly the same as .attr only that you don't have to use data-
@SkyCoder01 $(".RevealCard-header").data('content', '-'); <-- setting
$(".RevealCard-header").data('content'); <--- getting
Gulsvi
@gulsvi
Apr 09 2017 16:05
@alpox Try it in that pen I just posted
Fork if you get it working, I can't seem to figure it out :/
lhoward465
@lhoward465
Apr 09 2017 16:08
@SkyCoder01 Hey sky, sup?
Gulsvi
@gulsvi
Apr 09 2017 16:09
@lhoward465 Hey!
lhoward465
@lhoward465
Apr 09 2017 16:09
@SkyCoder01 I found out something annoying yet good to know :P
Gulsvi
@gulsvi
Apr 09 2017 16:09
What's that?
lhoward465
@lhoward465
Apr 09 2017 16:10
@SkyCoder01 I don't know what isn't allowing it but something isn't allowing ill structured dynamically html to be generated.
Gulsvi
@gulsvi
Apr 09 2017 16:10
I've heard that JavaScript syntax errors can cause that :) lol
I've never tried that though - why would you want to do that?
lhoward465
@lhoward465
Apr 09 2017 16:11
No no, the thing is, the way my code works is that it sequentially generates the code, so before it's finished generating there will be ill-structured html
Because of how my code executes, there will be ill structured html at some point before it finishes and whatever is not allowing this to happen isn't validating lazily.
So as soon as I create a <div class="row"> element, it automatically adds the closing </div> before anything else is done.
and there's nothing I can do to prevent that from happening
alpox
@alpox
Apr 09 2017 16:15
@SkyCoder01 Hm yes you're right in this case it cannot work because the css refers to the specific attribute. The data- attributes are usually then stored in the dataset of a DOM element - jquery gets and sets the dataset properties properly but doesn't update any attributes on the DOM
lhoward465
@lhoward465
Apr 09 2017 16:15
However, now that I know that happens I can track and monitor the html as it's generating and compensate for it
Gulsvi
@gulsvi
Apr 09 2017 16:16
@alpox I think if maybe you use .data() to set it first, before it's in the DOM, then you can manipulate with .data() but .attr() was the path of least resistance for me lol when I got hung up on it. I used custom data attributes for storing celsius/fahrenheit in my weather app.
alpox
@alpox
Apr 09 2017 16:17
@SkyCoder01 Probably yes
Gulsvi
@gulsvi
Apr 09 2017 16:18
@lhoward465 maybe it depends on the HTML. This codepen has some invalid dynamically generated HTML. http://s.codepen.io/skycoder/pen/LWwGPe
It might depend on how the browser interprets it in the end
lhoward465
@lhoward465
Apr 09 2017 16:19
Maybe, either case it's definitely worth knowing
Something to always watch out for.
Roge
@RogeMateos
Apr 09 2017 16:20
@SkyCoder01 many thanks
CamperBot
@camperbot
Apr 09 2017 16:20
rogemateos sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 949 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Roge
@RogeMateos
Apr 09 2017 16:21
$(document).ready(function () {
//toggle the component with class RevealCard-list
$(".RevealCard-header").click(function () {
if ($('.RevealCard-list').is(':visible')) {
$(".RevealCard-list").slideUp(300);
$(this).addClass(".RevealCard-header_plus::after");
$(this).removeClass(".RevealCard-header");
}
if ($(this).next(".RevealCard-list").is(':visible')) {
$(this).next(".RevealCard-list").slideUp(300);
$(this).addClass(".RevealCard-header_plus::after");
$(this).removeClass(".RevealCard-header");
} else {
$(this).next(".RevealCard-list").slideDown(300);
$(this).addClass(".RevealCard-header::after");
$(this).removeClass(".RevealCard-header_plus");
}
});
});
tried this but didnt work
so back to yours
thank you

var code = "formatted”; // Add your custom js here

$(document).ready(function () {
//toggle the component with class RevealCard-list
$(".RevealCard-header").click(function () {
if ($('.RevealCard-list').is(':visible')) {
$(".RevealCard-list").slideUp(300);
$(".plusminus").text('+');
}
if ($(this).next(".RevealCard-list").is(':visible')) {
$(this).next(".RevealCard-list").slideUp(300);
$(this).children(".plusminus").text('+');
} else {
$(this).next(".RevealCard-list").slideDown(300);
$(this).children(".plusminus").text('-');
}
});
});

Gulsvi
@gulsvi
Apr 09 2017 16:22
@RogeMateos Still some bugs to iron out, but the +/- changes at least
Roge
@RogeMateos
Apr 09 2017 16:23
what kind of bugs there?
in this example they were using after
Gulsvi
@gulsvi
Apr 09 2017 16:23
Both the accordions open instead of the one that is clicked
Roge
@RogeMateos
Apr 09 2017 16:26
yes there is a bug there
i dont think i pass the test like that
mmmmm
this is a tricky one
lhoward465
@lhoward465
Apr 09 2017 16:36
@SkyCoder01 There you go sky :) https://codepen.io/lhoward465/pen/mWxwWY
bitcoinabdi
@bitcoinabdi
Apr 09 2017 16:37
i have troble making my portfolio responsive
lhoward465
@lhoward465
Apr 09 2017 16:37
Don't get me wrong, it's ugly as hell, many styling issues to resolve BUT, that's the dynamic html working :)
Gulsvi
@gulsvi
Apr 09 2017 16:38
@lhoward465 You're getting there :)
lhoward465
@lhoward465
Apr 09 2017 16:38
@SkyCoder01 As soon as I found out that it was adding that closing div without my knowledge it was easy to compensate for lol.
Gulsvi
@gulsvi
Apr 09 2017 16:38
FWIW, I find that template literals make it so much easier to do this. Instead of a really long string with + and quotes, just write HTML as you would normally. Variables go in ${variableName}
lhoward465
@lhoward465
Apr 09 2017 16:39
FWIW?
Gulsvi
@gulsvi
Apr 09 2017 16:39
For what it's worth
lhoward465
@lhoward465
Apr 09 2017 16:39
Ah! I see
Gulsvi
@gulsvi
Apr 09 2017 16:39
IC
:)
alpox
@alpox
Apr 09 2017 16:39
@SkyCoder01 React comes in very handy there xD
lhoward465
@lhoward465
Apr 09 2017 16:39
:P
feeeeeeelin' my age atm lol
Gulsvi
@gulsvi
Apr 09 2017 16:39
Some day @alpox ! :p or Vue it seems is also built around that
lhoward465
@lhoward465
Apr 09 2017 16:40
I haven't heard good things regarding Vue
It sounds kinda hated
alpox
@alpox
Apr 09 2017 16:40
Around? No. Its just another thing like react
lhoward465
@lhoward465
Apr 09 2017 16:40
React is everywhere though, many many people are screaming for React.
Gulsvi
@gulsvi
Apr 09 2017 16:40
component reusability, jsx
alpox
@alpox
Apr 09 2017 16:40
I heard lots of good things about vue, bzt react is still preferred out there
lhoward465
@lhoward465
Apr 09 2017 16:40
React and Redux seem to be the winner atm.
alpox
@alpox
Apr 09 2017 16:41
I dont wonder ^^ redux is a blast
Its a good thing that they took a close look at elm to make redux happen
Just this concept makes my day anyway: type Reducer<S, A> = (state: S, action: A) => S
:D
Moisés Man
@moigithub
Apr 09 2017 16:48
redux-saga seems hard to understand... probably i need easier examples
still not sure whats the benefit of it.. vs a simpler thunk function for async calls
alpox
@alpox
Apr 09 2017 16:49
@moigithub Didn't look at saga yet
@moigithub Ah well it looks just like its an async model built around generators
I probably prefer the async/await model though
Sandbagger
@Sandbagger
Apr 09 2017 16:53
Hi all, is it acceptable practice to have multiple containers on a web page when using Bootstrap?
Gulsvi
@gulsvi
Apr 09 2017 16:53
@Sandbagger Yes, it's fine. They just can't be nested.
Sandbagger
@Sandbagger
Apr 09 2017 16:54
@SkyCoder01 cheers, I had it in mind that it was good practice only to use one. That makes my life easier.
lhoward465
@lhoward465
Apr 09 2017 16:59
Honestly I think the point I'm at I need to completely forget everything that I know about js and instead treat react, angular, jquery and such as completely separate languages and stop using plain vanilla js.
Because I can often get the work done with plain js but it's often kinda ugly looking and it takes far longer than it should.
alpox
@alpox
Apr 09 2017 17:01
@lhoward465 Its good to know it by heart though :-)
@lhoward465 vanilla js skills are still needed when working with frameworks. They are based on vanilla js in the end ;-)
lhoward465
@lhoward465
Apr 09 2017 17:03
Well, that's what I thought
but in the industry time is one of the most important factors
alpox
@alpox
Apr 09 2017 17:04
@lhoward465 Of course. In industry you will use mostly only frameworks
lhoward465
@lhoward465
Apr 09 2017 17:04
and frankily if you need a couple of hours to churn out something that you can do in an accepted js library in 30 seconds then you've failed the interview :P
alpox
@alpox
Apr 09 2017 17:04
But knowing vanilla js very good helps a lot to handle any framework out there
lhoward465
@lhoward465
Apr 09 2017 17:05
In the industry time is the most important factor, even over quality unless it leads to "show-stopping" errors, security issues or data integrity issues.
alpox
@alpox
Apr 09 2017 17:05
@lhoward465 Fair point :D Weirdly job interviews are the last thing i care about :D
lhoward465
@lhoward465
Apr 09 2017 17:06
@alpox but that's the mistake, job interviews should be the most important thing to think about, if you can't pass a job interview you can't get a job.
@alpox if you pass the job interview you have 3 months to adapt to the companies environment.
alpox
@alpox
Apr 09 2017 17:06
@lhoward465 The point is that i never didn't get the job after an interview :D
So thats probably why i don't care ^^
lhoward465
@lhoward465
Apr 09 2017 17:07
@alpox ah, well there are words for people like you ;)
alpox
@alpox
Apr 09 2017 17:07
@lhoward465 Nothing rude please! :D
lhoward465
@lhoward465
Apr 09 2017 17:07
I've never failed a job interview for the UK but the US uses a different test criteria
and I'm planning to move to the US
so I really really need to up my skills.
alpox
@alpox
Apr 09 2017 17:08
Ah well its possible that they wouldn't like me either, they seem to have weird systems and requirements :D
lhoward465
@lhoward465
Apr 09 2017 17:08
@alpox they do, you have a test you must pass, if you don't pass then you're not considered.
alpox
@alpox
Apr 09 2017 17:09
:-/ here they just look at your CV and then you have an interview
lhoward465
@lhoward465
Apr 09 2017 17:09
@alpox It seems that every interview is more like they're trying to hire a contractor than a full time dev
alpox
@alpox
Apr 09 2017 17:09
I once had to do test-work for one day where they mostly just looked at my character
lhoward465
@lhoward465
Apr 09 2017 17:09
@alpox where is "here"?
alpox
@alpox
Apr 09 2017 17:09
Switzerland
lhoward465
@lhoward465
Apr 09 2017 17:10
@alpox ah see, the test-work day seems pretty fantastic, I really do love that idea and they do that in the UK for some companies.
alpox
@alpox
Apr 09 2017 17:10
Yea its nice
And they said then that they didn't look so much on what i could do but more on if i ask for help if i'm stuck and don't just stick my head in the ground
Communication skills etc :D
lhoward465
@lhoward465
Apr 09 2017 17:11
@alpox but I'm moving the states because I can ear $80min if I can pass the interview and quite frankly that's a house in 3 years or less.
earn*
alpox
@alpox
Apr 09 2017 17:11
Yes thats a fantastic salary :D does every good dev earn so much there? XD
lhoward465
@lhoward465
Apr 09 2017 17:11
@alpox I had some family/friends issues that set where I should be in life back by 5 years so it's very important that I can shortcut where I can do get in-line for where I feel I should be.
@alpox that's a normal salary for a mid-level dev
alpox
@alpox
Apr 09 2017 17:12
Hmm gotta move there too xD
lhoward465
@lhoward465
Apr 09 2017 17:12
@alpox max salary income for a dev seems to be $130k
alpox
@alpox
Apr 09 2017 17:12
Hmm i guess though i can get that here too
Maybe
Are you full-stack or all-round dev?
lhoward465
@lhoward465
Apr 09 2017 17:13
@alpox I would definitely say, don't be afraid to move for a job, BUT, play it smart, do the research, look at the culture, the environment you're moving to and make sure you'll be a success there.
@alpox I'm a full-stack dev, I get a problem, project or "idea" they want me to implement and the languages I'm to use and I resolve it. Pretty much it.
alpox
@alpox
Apr 09 2017 17:14
@lhoward465 Okay nice
Well, it sure is good to do lots of research before moving ^^ i'm not planning that so far yet - maybe i'll take a look after college.
I'm not much of a career person though - much less than what i often see when looking at people on linkedin or so :D
Right now i plan to probably create an own company together with 1 or 2 friends - we already got a great project idea. The only parameter missing is time ^^
lhoward465
@lhoward465
Apr 09 2017 17:16
@alpox I wasn't really either, to be honest. I just wanted to earn enough to have a happy life, but I now want to earn the maximum I can and I'm happy to sacrifice 3-5 years for it if it means a real easy and happy life for the next 20 years.
alpox
@alpox
Apr 09 2017 17:17
@lhoward465 Thats about my thinking ^^ i'm in the middle of the 3-5 years of sacrifice now ;-)
Working my ass off
lhoward465
@lhoward465
Apr 09 2017 17:18
@alpox I know a number of friends that own their own company, the advice they told me was always put money and time first in decision making. In business there are no friends, if you're going to start a company with friends then you're going to have a rough time of it unless everyones responsibility is made clear and there are contracts set in stone.
alpox
@alpox
Apr 09 2017 17:18
@lhoward465 I really hope you will do well there in the US then :-) good luck!
lhoward465
@lhoward465
Apr 09 2017 17:18
Thanks, I'm moving over there this year.
So I really have to work my ass off to get to the point where I can get a good job there and pass the interview.
alpox
@alpox
Apr 09 2017 17:19
I'm aware that owning an own business can be really rough with people
But one tries the best ;-)
Sure, you can make it :D hard work pays out in the end
lhoward465
@lhoward465
Apr 09 2017 17:21
and opportunity :)
I wish you luck in your venture :)
alpox
@alpox
Apr 09 2017 17:22
Sure that too ^^
Thanks, wish you luck too :-)
jetsang
@DevDealer82
Apr 09 2017 17:24
Hi, I need help making a scrolling navigation bar for the personal portfolio page challenge. Can anyone point me in the right direction? google is showing me JS but I'm barely learning html adn css
badalsaibo
@heyDante
Apr 09 2017 17:25
@DevDealer82 use bootsrap
jetsang
@DevDealer82
Apr 09 2017 17:27
@heyDante Do I just copy/paste that into the HTML on codepen?
alpox
@alpox
Apr 09 2017 17:28
@DevDealer82 Only if you use bootstrap v3
@DevDealer82 Bootstrap v4 is to find here: https://v4-alpha.getbootstrap.com/components/navbar/
jetsang
@DevDealer82
Apr 09 2017 17:30
Thanks @heyDante @alpox I'll look at those websites and see if I can make sense of it
CamperBot
@camperbot
Apr 09 2017 17:30
devdealer82 sends brownie points to @heydante and @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 613 | @heydante |http://www.freecodecamp.com/heydante
:cookie: 933 | @alpox |http://www.freecodecamp.com/alpox
badalsaibo
@heyDante
Apr 09 2017 17:31
@DevDealer82 don't just copy/paste, see how they work, learn and play with it, and make mistakes :smile:
jetsang
@DevDealer82
Apr 09 2017 17:33
@heyDante I copy/paste to see if the code works on codepen. often I cant get other people's code to work because Im missing something
badalsaibo
@heyDante
Apr 09 2017 17:34
@DevDealer82 make sure you add the bootstrap to your pen?
jetsang
@DevDealer82
Apr 09 2017 17:34
I copy/paste the code @heyDante and @alpox gave me and its not coming out right
yea I went to the settings to add bootstrap to it
badalsaibo
@heyDante
Apr 09 2017 17:35
@DevDealer82 add ver 3 https://www.bootstrapcdn.com/
ver 4 is yet not fully stable
jetsang
@DevDealer82
Apr 09 2017 17:38
@heyDante You're right, I put the code you showed me first and it came out funny (only one button), after I added the v3 it looks proper now
badalsaibo
@heyDante
Apr 09 2017 17:38
@DevDealer82 yeah make sure you add jQuery too
alpox
@alpox
Apr 09 2017 17:38
@DevDealer82 Thats why i gave you the link to v4 ;-)
jetsang
@DevDealer82
Apr 09 2017 17:40
@alpox still new at this :) too many things to read
@heyDante Whats the jQuery link?
@heyDante I had assumed that codepen had that on already, didnt know I was suppose to add it myself
badalsaibo
@heyDante
Apr 09 2017 17:41
@DevDealer82 its time you google now :smile:
@DevDealer82 Yes just quick add from codepen
badalsaibo
@heyDante
Apr 09 2017 17:44
@DevDealer82 Yup
jetsang
@DevDealer82
Apr 09 2017 17:44
great
Hernan Mendez
@hernanmendez
Apr 09 2017 17:46
hey i need help, why the clock stops at the first value and doesn´t work from then on http://codepen.io/hernanmendez/pen/zZgvQN i´m on pomodoro clock
shadowray2121
@shadowray2121
Apr 09 2017 18:34

I need to make the kitty picture smaller....and insert into the style....what am I missing here?

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>.red-text {color: red;} h2 {font-family: Lobster, Monospace;} p {font-size: 16px;font-family: Monospace;} img .smaller-image {width: 100px;} </style>

<h2 class="red-text">CatPhotoApp</h2>

<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

<p class="red-text">Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
<p class="red-text">Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>

Tanushree Samanta
@TSamanta
Apr 09 2017 18:36
Hi could you see why this jQuery not showing anything in the console
V
Gulsvi
@gulsvi
Apr 09 2017 18:36
@shadowray2121 Your <img> element needs the class "smaller-image"
AlexMartsen
@AlexMartsen
Apr 09 2017 18:36
@AlexMartsen
Hi guys some help me ??? Timer Create a timer animation. 1, The timer in format "00h 00m 00s" with zero opacity translate from the bottom of the page to the center (horizontal & vertical) and as it comes to the center, the opacity animates to 1. 2, The timer counts up with number animation to 05h 00m 00s and starts count down. 3, If a user clicks on the timer, change the timer to a masked input in format "XXh XXm XXs". Submit on enter and update the time if entered correctly.
I need help with last step where i don't have idea. Please help me
Gulsvi
@gulsvi
Apr 09 2017 18:36

@TSamanta Your browser has a console that gives more information. Usually Ctrl+Shift+J will bring it up:

Mixed Content: The page at 'https://s.codepen.io/T_Samanta/pen/oZrrLB?editors=1111' was loaded over HTTPS, but requested an insecure script 'http://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&sectio…_Hendrix&callback=jQuery31108377327351055068_1491762977788&_=1491762977789'. This request has been blocked; the content must be served over HTTPS.

It means your URL for Wikipedia must start with HTTPS://
url: "https://en.wikipedia.org/w/api.php?action=parse&format=json&prop=text&section=0&page=Jimi_Hendrix&callback=?",
Mike
@ikklecat
Apr 09 2017 18:37
Hi Folks, hope you can help. I'm doing the 'Build a Tribute Page' in Bootstrap and can't seem to center an imported image, no matter what I try the image always stays locked to the left side of the page. Any help....most appreciated.
Tanushree Samanta
@TSamanta
Apr 09 2017 18:37
oh okay
thank you! @SkyCoder01
CamperBot
@camperbot
Apr 09 2017 18:37
tsamanta sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 950 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 09 2017 18:38
No Problem!
Tanushree Samanta
@TSamanta
Apr 09 2017 18:38
Yayy got it!
Gulsvi
@gulsvi
Apr 09 2017 18:39
@ikklecat This question comes up a lot, so I made a codepen to show how. Hope it helps: http://codepen.io/skycoder/pen/xqbGor
If it doesn't work, send a link to your codepen and I can take a closer look
Mike
@ikklecat
Apr 09 2017 18:39
Thanks Sky....you're a life saver!
Gulsvi
@gulsvi
Apr 09 2017 18:40
:)
Trommelochse
@Trommelochse
Apr 09 2017 18:43
@SkyCoder01 images are weird in HTML/CSS - are they treated like paragraphs in bootstrap?
or even in general? Always thought of them like inline block elements
Gulsvi
@gulsvi
Apr 09 2017 18:44
@Trommelochse In bootstrap, if you use img-responsive it treats it like a paragraph, yes
Trommelochse
@Trommelochse
Apr 09 2017 18:44
but text-center doesn't wor on ilb
*work
ok ok
Gulsvi
@gulsvi
Apr 09 2017 18:45
.img-responsive {
  display: block;
  max-width: 100%;
  height: auto;
}
That's the CSS for img-responsive ^^
Jose Diaz
@jsd540
Apr 09 2017 18:46
good morning I'm finally at the contact part of the personal portfolio and wanted to know if there is a way i can review the button portion of the first course
Trommelochse
@Trommelochse
Apr 09 2017 18:46
simple + effective
definitely should learn more about those classes
Gulsvi
@gulsvi
Apr 09 2017 18:46
Yeah, very true :)
Trommelochse
@Trommelochse
Apr 09 2017 18:46
mainly used it for the grid and forms so far
Gulsvi
@gulsvi
Apr 09 2017 18:47
@jsd540 The course map is: https://freecodecamp.com/map
It lets you search through past challenges
Jose Diaz
@jsd540
Apr 09 2017 18:49
@SkyCoder01 awesome thanks
CamperBot
@camperbot
Apr 09 2017 18:49
jsd540 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 951 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Trommelochse
@Trommelochse
Apr 09 2017 18:50
@SkyCoder01 do you have any advice on how to customize bootstrap styles efficiently for real projects? Editing bootstrap itself (sass), overriding, a mixture?
Gulsvi
@gulsvi
Apr 09 2017 18:51
No, I've never tried that @Trommelochse
I know you can customize it though: http://getbootstrap.com/customize/
But that's about it :p
shadowray2121
@shadowray2121
Apr 09 2017 18:53

@skycoder01 thank you so much - however im still getting an error family: Monospace;} img .smaller-image {width: 100px;} </style>

<h2 class="red-text">CatPhotoApp</h2>

<img class="smaller-image" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. "> says it is now correct...however says resolution needs to be at 100%

CamperBot
@camperbot
Apr 09 2017 18:53
shadowray2121 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 952 | @skycoder01 |http://www.freecodecamp.com/skycoder01
shadowray2121
@shadowray2121
Apr 09 2017 18:53
Your image should be 100 pixels wide. Browser zoom should be at 100%. is the error
and zoom is at 100%....??
Gulsvi
@gulsvi
Apr 09 2017 18:55
@shadowray2121 Can you show your code formatted - it's hard to tell what else might be wrong
``` (shift+enter for a new line)
your code here (shift + enter for a new line)
```
Trommelochse
@Trommelochse
Apr 09 2017 18:56
on a German keyboard here... we don't have backticks on our layout
awful
Gulsvi
@gulsvi
Apr 09 2017 18:57
Wow, I didn't know that!
german backticks
Trommelochse
@Trommelochse
Apr 09 2017 18:58
(a) => a > 43
installed some custom layout program
still not used to using them
Gulsvi
@gulsvi
Apr 09 2017 18:59
image.png
Is it not this key?
Trommelochse
@Trommelochse
Apr 09 2017 18:59
nope
that's an apostroph
Gulsvi
@gulsvi
Apr 09 2017 18:59
I just used it and it worked though
Shift and that key
Trommelochse
@Trommelochse
Apr 09 2017 19:00
sec
Gulsvi
@gulsvi
Apr 09 2017 19:00
You have to hit it four times and then backspace
Trommelochse
@Trommelochse
Apr 09 2017 19:00
ffs
you are right
:D :D
Gulsvi
@gulsvi
Apr 09 2017 19:00
Awesome :)
Trommelochse
@Trommelochse
Apr 09 2017 19:01
still awkward to use
grrr
Gulsvi
@gulsvi
Apr 09 2017 19:01
I agree
Tanushree Samanta
@TSamanta
Apr 09 2017 19:17
how can we remove these link which come with the searches .What url to use to only get the searchitem's data exactly how is it shown in the wikipedia page minus all the links which comes at the end of any search
because if I put any other action's value as query in the url instad of
*instead
opensearch
it does not return me anything
Gulsvi
@gulsvi
Apr 09 2017 19:20
@TSamanta When you query, you get an array back with 10 items and 3 subarrays in each. The title, the extract, and the URL. You have to parse that array to get the data you want (and filter out the URL).
lhoward465
@lhoward465
Apr 09 2017 19:22
@SkyCoder01 I had to take a break for a little bit but it's definitely coming together now :)
Tanushree Samanta
@TSamanta
Apr 09 2017 19:22
okay so i will get the arrays and everything in the console if I log it in it or I have to use postman
Gulsvi
@gulsvi
Apr 09 2017 19:24
@TSamanta You will get it in the console. I've never used postman before
["Free Code Camp", ["FreeCodeCamp"], ["freeCodeCamp (also referred to as “Free Code Camp”) is a nonprofit organization that consists of an interactive learning web platform, an online community forum, chat rooms, Medium publications, and local organizations that intend to make learning web development accessible to anyone."], ["https://en.wikipedia.org/wiki/FreeCodeCamp"]]
That's an example of a search for "Free Code Camp"
Tanushree Samanta
@TSamanta
Apr 09 2017 19:26
all I am getting is this
Gulsvi
@gulsvi
Apr 09 2017 19:26
@lhoward465 Wow! Nice work - definitely looks better
Tanushree Samanta
@TSamanta
Apr 09 2017 19:26
for the keyword okay
i was execting what you had typed
Gulsvi
@gulsvi
Apr 09 2017 19:27
@TSamanta Add this to the first line of your ajax success function:
          console.log(data)
alpox
@alpox
Apr 09 2017 19:27
@SkyCoder01 +1 for postman ^_^
Gulsvi
@gulsvi
Apr 09 2017 19:27
Then you will see the data logged to the console in codepen (and your browser's developer tools)
alpox
@alpox
Apr 09 2017 19:27
@SkyCoder01 I spent the last hour with looking deep into my postman :D
Gulsvi
@gulsvi
Apr 09 2017 19:27
I hate plugins :p
Tanushree Samanta
@TSamanta
Apr 09 2017 19:27
okay I will do that
alpox
@alpox
Apr 09 2017 19:28
@SkyCoder01 I don't use it as plugin, i have it standalone on my laptop
Tanushree Samanta
@TSamanta
Apr 09 2017 19:28
thank you @SkyCoder01
CamperBot
@camperbot
Apr 09 2017 19:28
tsamanta sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: tsamanta already gave skycoder01 points
Tanushree Samanta
@TSamanta
Apr 09 2017 19:28
@alpox same here I heard about it a lot
alpox
@alpox
Apr 09 2017 19:28
@SkyCoder01 Mostly for API tests on my own REST service i'm creating
Tanushree Samanta
@TSamanta
Apr 09 2017 19:28
works like wikipedia's sandbox
Gulsvi
@gulsvi
Apr 09 2017 19:28
@alpox I'm too paranoid about security. Would rather keep everything in my browser sandbox
alpox
@alpox
Apr 09 2017 19:28
@SkyCoder01 Its still in your browsers sandbox
Gulsvi
@gulsvi
Apr 09 2017 19:28
Okay, maybe I'll look at it lol
alpox
@alpox
Apr 09 2017 19:29
@SkyCoder01 Its a chrome plugin locked into your browser but still standalone in a window - weirdly :D
@SkyCoder01 when i click on my chrome icon, usually postman is the first thing popping up if its open xD
@SkyCoder01 You will see the need for some tool like postman as soon as you're developing some api's :-)
Gulsvi
@gulsvi
Apr 09 2017 19:31
I just spent a day trying to figure out the Google JavaScript Maps API. That was a pain....they don't let you just use a standard getJSON :/
Or even fetch(). You have to create a map object, a service object, and then query the service... took me forever
alpox
@alpox
Apr 09 2017 19:31
@SkyCoder01 Well, there are other possibilities than getJSON :D
Tanushree Samanta
@TSamanta
Apr 09 2017 19:32
@SkyCoder01 no matter what I search
I get this
sorry
alpox
@alpox
Apr 09 2017 19:32
@SkyCoder01 Oh rly they don't let you do requests without a map? :D weirdos
Gulsvi
@gulsvi
Apr 09 2017 19:33
Yeah, you have to have an element to store a map on your page even if you don't want a map. At least from what I can tell @alpox lol
Trommelochse
@Trommelochse
Apr 09 2017 19:33
@alpox haha :D
Tanushree Samanta
@TSamanta
Apr 09 2017 19:33
Screenshot (226).png
Gulsvi
@gulsvi
Apr 09 2017 19:33
@TSamanta I don't see you logging data in your code
James Barrett
@jamesbarrett95
Apr 09 2017 19:33
Hi guys, I am doing the 'Pig Latin' challenge, having a little problem. Here is my code:
/* jshint esversion: 6 */
function translatePigLatin(str) {
  const stringSplit = str.split("");
  const vowels =  ["a", "e", "i", "o", "u"];

  let ayString = "";

  if (vowels.includes(stringSplit[0])) {
    const wayString = stringSplit.join("") + "way";
    return wayString;
  }

  for (var i = 0; i < stringSplit.length; i++) {
    if(vowels.includes(stringSplit[i])) {
      let newString = stringSplit.slice(i);
      newString.join(" ");
      newString += ayString;
      newString += "ay";
      return newString;
    } else {
      ayString += stringSplit[i];
    }
  }
}

console.log(translatePigLatin("consonant"));
alpox
@alpox
Apr 09 2017 19:33
@SkyCoder01 For what kind of data?
Gulsvi
@gulsvi
Apr 09 2017 19:34
image.png
@TSamanta
Tanushree Samanta
@TSamanta
Apr 09 2017 19:34
I did put it as my first line outside the function
Gulsvi
@gulsvi
Apr 09 2017 19:34
@alpox I was getting local images based on geolocation
alpox
@alpox
Apr 09 2017 19:34
@TSamanta Whats wrong with it? :-)
Gulsvi
@gulsvi
Apr 09 2017 19:34
@TSamanta Look at line 17 in that screen shot
alpox
@alpox
Apr 09 2017 19:34
@TSamanta probably "Unrecognized parameter: search."? :D
James Barrett
@jamesbarrett95
Apr 09 2017 19:35
Problem I am having is that when the result is logged to the console, it displays "o,n,s,o,n,a,n,tcay
Tanushree Samanta
@TSamanta
Apr 09 2017 19:35
nope I was typing einstein
I will check it again
James Barrett
@jamesbarrett95
Apr 09 2017 19:35
How do I ensure that the commas aren't displayed in the string? The code seems okay...
Tanushree Samanta
@TSamanta
Apr 09 2017 19:35
thank you once again! @SkyCoder01
CamperBot
@camperbot
Apr 09 2017 19:35
:warning: tsamanta already gave skycoder01 points
tsamanta sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
Gulsvi
@gulsvi
Apr 09 2017 19:36

Getting the photos was as simple as:

  new google.maps.places.PlacesService(
    new google.maps.Map(document.getElementById('map'))
  ).getDetails({placeId: id}, (place, status) => {
  // code here to process the array of photos
});

Just had to use their reverse geocode to get the place ID first, but even though I don't want a map, I still have to give them an element...

alpox
@alpox
Apr 09 2017 19:37
@jamesbarrett95 newString.join(" "); this does nothing. You have to assign it to something because a string is immutable.
newString = newString.join(" ");
@SkyCoder01 Yea they expect you to show the place on the map :D
Tanushree Samanta
@TSamanta
Apr 09 2017 19:38
I did the exact same thing as what you said and even now but it just gives the same answer
James Barrett
@jamesbarrett95
Apr 09 2017 19:38
@alpox perfect! thanks
CamperBot
@camperbot
Apr 09 2017 19:38
jamesbarrett95 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 934 | @alpox |http://www.freecodecamp.com/alpox
Tanushree Samanta
@TSamanta
Apr 09 2017 19:38
i mean logs the same data
Trommelochse
@Trommelochse
Apr 09 2017 19:38
thank you @alpox 'You have to assign it to something because a string is immutable.'
CamperBot
@camperbot
Apr 09 2017 19:38
trommelochse sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 935 | @alpox |http://www.freecodecamp.com/alpox
Trommelochse
@Trommelochse
Apr 09 2017 19:38
so nice to remember
James Barrett
@jamesbarrett95
Apr 09 2017 19:39
Also, another quick question
I find myself using ES6/ES7 syntax during these challenges, is this bad practice?
alpox
@alpox
Apr 09 2017 19:41
@jamesbarrett95 No its not. Use it as much as you want - just some features won't be supported in all browsers. Thats all you have to be aware of. Almost all ES6 ones are integrated in all major browsers though. ES7 not really.
Jor
@joreyesl
Apr 09 2017 19:41
@jamesbarrett95 naw but be careful with ES7
Trommelochse
@Trommelochse
Apr 09 2017 19:41
@alpox arrow functions as well?
alpox
@alpox
Apr 09 2017 19:42
@Trommelochse These are supported about everywhere
Trommelochse
@Trommelochse
Apr 09 2017 19:42
:o:
didn't know that
James Barrett
@jamesbarrett95
Apr 09 2017 19:42
Cool, I'll carry on using that syntax if need be!
To be honest, the only ES7 syntax I've used is the array.includes... Was very useful in the Pig Latin challenge
Tanushree Samanta
@TSamanta
Apr 09 2017 19:43
hi
Jor
@joreyesl
Apr 09 2017 19:46
@jamesbarrett95 that is ES6 as well i believe.
alpox
@alpox
Apr 09 2017 19:50
includes on strings is ES6.
includes on arrays is ES7.
Anatoliy
@uzrptav
Apr 09 2017 19:52
Hi all! Is it real to fetch qoutes (for task with Qoute Machine) from MsSql table?
alpox
@alpox
Apr 09 2017 19:54
@uzrptav You can do that if you have an api in front of your mssql instance ;-)
Radio-Junkie
@Radio-Junkie
Apr 09 2017 19:54
Hi everyone. I am using Brackets to make my portfolio page, and I'm trying to make a dropdown in my menu bar to display more pages after clicking "About Me". However, in the live-preview, I am unable to get the dropdown toggle to work. Here's my code:
<ul class="nav navbar-nav">
    <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#"> About Me <span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a href="#">Mission Statement</a></li>
        <li><a href="#">Current Projects</a></li>
        </ul>
    </li>
Any suggestions?
Anatoliy
@uzrptav
Apr 09 2017 19:56
@alpox So, i need webservice which can retrive data?
alpox
@alpox
Apr 09 2017 19:56
@uzrptav You need a webservice which provides your MSSQL data. Probably a REST service
@uzrptav You'd be better off to use an already existing api for now
Backend programming will come later in the course ;-)
Anatoliy
@uzrptav
Apr 09 2017 19:58
@alpox thnx
CamperBot
@camperbot
Apr 09 2017 19:58
uzrptav sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 936 | @alpox |http://www.freecodecamp.com/alpox
Jorge
@OrangeKulture
Apr 09 2017 19:59
hey whats happening guys?
all good in da hood ?
@Radio-Junkie you mean Bootstrap?
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:02
@OrangeKulture I'm using a compiler called Brackets. I am writing it using the Bootstrap framework though
Jorge
@OrangeKulture
Apr 09 2017 20:03
@Radio-Junkie ohh ok ! yeah i know brackets, just thought u meant bootstrap
Jor
@joreyesl
Apr 09 2017 20:03
@Radio-Junkie did you include the bootstrap js library? you will need jquery as well
Gulsvi
@gulsvi
Apr 09 2017 20:04
@Radio-Junkie Bootstrap dropdowns require jQuery + Bootstrap.js in your project ^^
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:04
@OrangeKulture I'm trying to make the "About me" in my navbar a dropdown menu that will show two additional pages, A mission statement and a current projects page. I'm also following the w3schools Bootstrap tutorial to do so. However, in brackets the live preview won't show this dropdown toggle. Is it inherent to Brackets or an issue with me code?

Yes, I've included the bootstrap js and jQuery library, albeit manually.

<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/bootstrap-3.3.7/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>
<script src="bootstrap-3.3.7/dist/js/tests/vendor/jquery.min.js"></script>
<link href="normalize.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Bungee+Inline|Baloo+Bhaina|Rubik" />
<link href="/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<title>About Me</title>
</head>

Anatoliy
@uzrptav
Apr 09 2017 20:06
@Radio-Junkie what Bootsrap version do you use in codepen?
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:06
@uzrptav Sorry, I'm not using codepen.io for this project
Jorge
@OrangeKulture
Apr 09 2017 20:06
I believe his not using codepen, just brackets ..
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:07
Does my code seem okay though? I wonder if it's just the live-preview in Brackets that's unable to display my dropdown?
Jorge
@OrangeKulture
Apr 09 2017 20:07
brackets should have no impact on how the page is displayed, as far as I know .. so it might something in your code
Jorge
@OrangeKulture
Apr 09 2017 20:07
did you try opening the file on the browser directly, no live preview?
Jor
@joreyesl
Apr 09 2017 20:08
@Radio-Junkie are you sure you are not missing a / in your src attributes for js files?
Gulsvi
@gulsvi
Apr 09 2017 20:09

@Radio-Junkie The order matters - jQuery has to load first.

<script src="bootstrap-3.3.7/dist/js/tests/vendor/jquery.min.js"></script>
<script src="bootstrap-3.3.7/dist/js/bootstrap.min.js"></script>

And scripts should go at the end of your HTML, before your closing </body> tag

Jorge
@OrangeKulture
Apr 09 2017 20:09
i was gonna say that .. the order definitely makes a difference, u need to load jquery
Vamp
@the-vampiire
Apr 09 2017 20:09
why do you have slashes at the end of each link?
<link href="/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet” /this slash here>
Jorge
@OrangeKulture
Apr 09 2017 20:10
awesome yopu are here Sky, cuz i need to ask about the post you made on codepen ..
Gulsvi
@gulsvi
Apr 09 2017 20:10
Hope I can answer :)
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:10
@OrangeKulture Good suggestion, I just opened the html file directly with my browser and it seems that the dropdown should be working (but the style of the entire page is all messed up now...presumably because it's not pulling the local js files?)
Jorge
@OrangeKulture
Apr 09 2017 20:10
need to steal your logic for the geolocation, as Im a lil lazy to type it all out myself :alien:
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:11
@SkyCoder01 Oh shoot! jQuery has to load first? Let me try rearranging that.
Gulsvi
@gulsvi
Apr 09 2017 20:11
Not my logic :) it's from the navigator.geolocation docs
Jorge
@OrangeKulture
Apr 09 2017 20:11
@Radio-Junkie it should definitely work .. you need to make sure the order is correct and that the links are correct too
Gulsvi
@gulsvi
Apr 09 2017 20:12
My function names though lol
Jorge
@OrangeKulture
Apr 09 2017 20:12
haha yeah i figured .. but on the post, it was readily available. I was able to google it the other day, but now I dont seem to remember the exact keywords
Trommelochse
@Trommelochse
Apr 09 2017 20:14
@the-vampiire the <element /> notation is shorthand for <element> </element>
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:14
@the-vampiire The slashes at the end of each link are closed automatically by Brackets. Removing the slashes breaks the links.
Jorge
@OrangeKulture
Apr 09 2017 20:16
yeah but yours would fall back to ip geo location, didnt it?
@SkyCoder01
Gulsvi
@gulsvi
Apr 09 2017 20:16
@OrangeKulture Yes
They just give an error, I call another API
Jorge
@OrangeKulture
Apr 09 2017 20:17
on the error function .. ahh ok, awesome stuff! thanks (browneeeehs!) @SkyCoder01
CamperBot
@camperbot
Apr 09 2017 20:17
orangekulture sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 953 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Apr 09 2017 20:17
nom nom nom :)
Jorge
@OrangeKulture
Apr 09 2017 20:19
i can almost taste the shrimp at the buffet in Vegas ... almost there! :airplane:
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:25
Guys. I just wanted to say (again, as it's proven each time I come to this chat) that you guys are awesome. The issue was indeed with my src attribute. I improperly loaded the location where jQuery was located. Fixed the src destination and it worked like a charm!
Thanks! @OrangeKulture @SkyCoder01 @joreyesl
CamperBot
@camperbot
Apr 09 2017 20:26
radio-junkie sends brownie points to @orangekulture and @skycoder01 and @joreyesl :sparkles: :thumbsup: :sparkles:
:cookie: 283 | @orangekulture |http://www.freecodecamp.com/orangekulture
:cookie: 954 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:cookie: 764 | @joreyesl |http://www.freecodecamp.com/joreyesl
Gulsvi
@gulsvi
Apr 09 2017 20:26
:clap: :+1: :)
Destroyer8
@Destroyer8
Apr 09 2017 20:29
Could someone help me make my tribute page mobile responsive?
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:30
@Destroyer8 What is your question regarding specifically? What issue are you working to resolve?
Destroyer8
@Destroyer8
Apr 09 2017 20:31
@Radio-Junkie https://codepen.io/dev999/pen/RpzOOw basically my text doesn't flow well on mobile there are only a couple words per line which doesn't look very good i've been tolld
@Radio-Junkie maybe the justify attribute isn't helping but if I don't use it my text looks ugly
Jorge
@OrangeKulture
Apr 09 2017 20:37
@Radio-Junkie awesome, good to hear !
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:38
@Destroyer8 Try nesting in a column. I tried adding <div class="row">
<div class="col-xs-12"> after your container (make sure you close it) and the text responded better on my browser when I adjusted the size (did not try on a phone or tablet)
Gulsvi
@gulsvi
Apr 09 2017 20:38
They're using Bootstrap 4 and col-xs- doesn't exist in that version
Neither does img-responsive
Destroyer8
@Destroyer8
Apr 09 2017 20:38
So I can't use either?
Gulsvi
@gulsvi
Apr 09 2017 20:39
Not unless you change to Bootstrap 3 or use the Bootstrap 4 equivalents (col-12 and img-fluid)
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:39
Oh I see, didn't catch that. You can link to Bootstrap 3 or change to col-12
Destroyer8
@Destroyer8
Apr 09 2017 20:40
@SkyCoder01 how do you know it uses bootstrap 4 because I only know HYML and CSS
Gulsvi
@gulsvi
Apr 09 2017 20:41
image.png
@Destroyer8 The link in your codepen settings shows what version it is ^^
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:41
@Destroyer8 You didn't link specifcally to Bootstrap 3, and Codepen.io automatically pulls Bootstrap 4 in the settings.
Destroyer8
@Destroyer8
Apr 09 2017 20:43
@SkyCoder01 because they teach us bootstrap 3 in this camp right?
@SkyCoder01 @Radio-Junkie thanks a lot!
CamperBot
@camperbot
Apr 09 2017 20:43
destroyer8 sends brownie points to @skycoder01 and @radio-junkie :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @radio-junkie |http://www.freecodecamp.com/radio-junkie
:cookie: 955 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Destroyer8
@Destroyer8
Apr 09 2017 20:44
going to turn on the samsung to check
Gulsvi
@gulsvi
Apr 09 2017 20:44
Yep! Bootstrap 3 in Free Code Camp. Bootstrap 4 is not quite in Beta yet, but for some reason, it's the default in Codepen
Destroyer8
@Destroyer8
Apr 09 2017 20:44
and my phone
Gulsvi
@gulsvi
Apr 09 2017 20:45
In your browser, you should have a device emulation mode that lets you see what your website looks like on a phone, tablet, laptop, etc
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:45
@SkyCoder01 Whats new?
Gulsvi
@gulsvi
Apr 09 2017 20:45
Hey @MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:45
Yo
Destroyer8
@Destroyer8
Apr 09 2017 20:45
hm I have firefox google chrome and opera somewhere but I don't know about those modes
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:47
@SkyCoder01 How do I make this black box shorter?
@MathematicsCoding That's a blank pen
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:48
...
Gulsvi
@gulsvi
Apr 09 2017 20:48
Not even three dots in it :)
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:48
Exactly
blank pen
How
Gang Zhao
@crumpx
Apr 09 2017 20:48
hi, css question. I have a few div with different height and float them to lay them out. how do I avoid the large space when resize to smaller screen?
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:48
Its a joke... I forgot to save
Gulsvi
@gulsvi
Apr 09 2017 20:48
You don't want to show a preview? @MathematicsCoding
Destroyer8
@Destroyer8
Apr 09 2017 20:49
@SkyCoder01 thanks!
CamperBot
@camperbot
Apr 09 2017 20:49
destroyer8 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: destroyer8 already gave skycoder01 points
Gulsvi
@gulsvi
Apr 09 2017 20:49
@MathematicsCoding narrower?
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:49
uh...
Destroyer8
@Destroyer8
Apr 09 2017 20:49
@MathematicsCoding use padding in CSS pad around the edges of the page
Gang Zhao
@crumpx
Apr 09 2017 20:50
12321321321.png
how do i avoid this?
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:50
Never mind I figured it out
auto thingy I thought it would make it box..
Gulsvi
@gulsvi
Apr 09 2017 20:51
Don't use margin-left: 300px - that's wider than a lot of mobile devices.
and <body backgound is not valid
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:51
..
what
Gulsvi
@gulsvi
Apr 09 2017 20:52
image.png
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:52
..
Gulsvi
@gulsvi
Apr 09 2017 20:52
It's old HTML4, may work in your browser, but probably broken in some others
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:52
oh..
Then?
:(
Gulsvi
@gulsvi
Apr 09 2017 20:52
Use the CSS code I showed you yesterday
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:52
What was it?
background-image thingy?
lhoward465
@lhoward465
Apr 09 2017 20:53
@SkyCoder01 How goes your portfoliuo stuff btw?
Destroyer8
@Destroyer8
Apr 09 2017 20:53
@SkyCoder01 I used padding for my design and on my phone it only shows one word at a time on the design. What is a good replacement for padding? I like that part of my design but is there a way to make it more mobile responsive on small screens?
Gulsvi
@gulsvi
Apr 09 2017 20:53
:point_up: This Code @MathematicsCoding
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:54
I see thanks
So I have to do it same thing to my random quote machine..
Gulsvi
@gulsvi
Apr 09 2017 20:54
@Destroyer8 Padding is fine, but % may work better than pixels
@lhoward465 I put it on hold until Free Code Camp beta is done :p
lhoward465
@lhoward465
Apr 09 2017 20:55
What's happening then?
I've noticed they're adding a LOT of potential stuff into codecamp
how long till beta?
Gulsvi
@gulsvi
Apr 09 2017 20:55
Would just need to fill in the sections I guess
I don't know how long until the Beta is done. I keep hearing "soon" :)
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:57
What is this Beta...
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:57
@SkyCoder01 What does data-offset: 50 accomplish for your scroll-spy?
Gulsvi
@gulsvi
Apr 09 2017 20:57
The current Free Code Camp lessons are over 2 years old. This is the new one @MathematicsCoding http://beta.freecodecamp.com/map
lhoward465
@lhoward465
Apr 09 2017 20:57
@SkyCoder01 tbh, it could be a year till beta is done.
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:57
@SkyCoder01 W3schools also included this offset in their scroll-spy tutorial, but I'm not sure I understand the goal it accomplishes
Gulsvi
@gulsvi
Apr 09 2017 20:58
@Radio-Junkie It's the number of pixels above the section ID where the navbar updates the "active" class and highlights the new section you've scrolled to
(if that makes sense lol)
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:58
@SkyCoder01 What will happen to certificates?
lhoward465
@lhoward465
Apr 09 2017 20:58
lol, I was thinking the exact same thing @MathematicsCoding
Gulsvi
@gulsvi
Apr 09 2017 20:59
@lhoward465 Do you have updated information about the timeline?
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:59
lol @lhoward465
lamarcusknight
@lamarcusknight
Apr 09 2017 20:59
hello...from dallas
Gulsvi
@gulsvi
Apr 09 2017 20:59
@MathematicsCoding You'll be able to keep your certficates, nothing will happen to them
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:59
No I mean...
Radio-Junkie
@Radio-Junkie
Apr 09 2017 20:59
@SkyCoder01 Yeah I think that makes sense! Thanks!
CamperBot
@camperbot
Apr 09 2017 20:59
radio-junkie sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: radio-junkie already gave skycoder01 points
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:59
To get? you know?
lhoward465
@lhoward465
Apr 09 2017 20:59
@SkyCoder01 I have no idea about timelines, it's more a being in the industry thing, the jump from alpha to beta usually means when they declare beta is coming it could be a year longer than they thought :P
Saboor Malik
@MathematicsCoding
Apr 09 2017 20:59
To complete the challenge then..
Destroyer8
@Destroyer8
Apr 09 2017 20:59
@SkyCoder01 oh cool, I'm going to try it out! Also, another question (sorry I'm bombarding you!). On this page https://codepen.io/freeCodeCamp/full/YqLyXB is the menu done in CSS or something else? Because the last time I did CSS 16 years ago (cough cough) those menus didn't exist
Gulsvi
@gulsvi
Apr 09 2017 21:00
@Destroyer8 That's a Bootstrap Navbar. HTML and CSS. The smooth scrolling and section highlighting as you scroll is done with JavaScript.
I think they had those 16 years ago :p
lhoward465
@lhoward465
Apr 09 2017 21:01
@SkyCoder01 If I get really close to completing the certifications and they change to beta so I'll near enough have to start again I'll cry :P
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:01
@lhoward465 oooh old certs will be gone but there will be new one
certificate each challenge
Gulsvi
@gulsvi
Apr 09 2017 21:01
@lhoward465 I was checking out some freecodecamp issues and Quincy keeps going in saying - "leave it, "we're almost done with the beta"
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:02
Like cert for html and cert for JS
Destroyer8
@Destroyer8
Apr 09 2017 21:02
@SkyCoder01 I only used one course so that's probably why :(
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:03
Yay... Cant wait for beta..
Front end cert is too long
Gulsvi
@gulsvi
Apr 09 2017 21:03
@Destroyer8 Lol, it's basically like the one that was on the OJ Simpson Trial Page :p http://www.cnn.com/US/OJ/
Only wider and fixed to the top
lhoward465
@lhoward465
Apr 09 2017 21:03
That would really annoy a lot of people if they swap things out like that.
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:03
@SkyCoder01 So once beta is completed what will happen to old challenges?
Will they be removed?
Gulsvi
@gulsvi
Apr 09 2017 21:04
@MathematicsCoding I don't know, but I'm just going to wait it out and keep learning until the Beta is done.
Don't want to have to redo a bunch of challenges
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:04
@SkyCoder01 Yeah..
But there will be new certs
If we redo it then we could get it easier..
lhoward465
@lhoward465
Apr 09 2017 21:05
@SkyCoder01 surely they'd keep the old data, that's a huge loss otherwise and that would potentially stop existing customers from using their site.
That kinda thing can loose a client base.
Gulsvi
@gulsvi
Apr 09 2017 21:05
I'm sure they'll figure out a good transition
Schools use this, so maybe they'll just wait for the summer?
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:06
lol @SkyCoder01
lhoward465
@lhoward465
Apr 09 2017 21:06
Well, I think I'm going to carry on going through it, otherwise I'll loose all motivation.
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:06
If old challenges stays so is the cookies
lhoward465
@lhoward465
Apr 09 2017 21:06
I'm aiming to move mid-summer so shrugs
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:06
If redo beta then I will have like 500+ cookies
Gulsvi
@gulsvi
Apr 09 2017 21:07
I know if you do beta challenges now, your progress will be lost
Saboor Malik
@MathematicsCoding
Apr 09 2017 21:07
Can we do beta now?
Gulsvi
@gulsvi
Apr 09 2017 21:07
Yeah, you can work on the challenges now, but your progress will be erased when they finish the beta.
Saboor Malik