These are chat archives for FreeCodeCamp/HelpFrontEnd

14th
Feb 2016
Tyler Haas
@tylerthehaas
Feb 14 2016 00:03
@Zera99 what are you stuck on?
Gabriel
@Zera99
Feb 14 2016 00:03
I have this: http://codepen.io/Zera99/pen/MKLqOX My first website ever, so.. yeah. I'm confused about a few things.
1- Can I make my page not stretch out horizontally, so you don't have to scroll left and right? (The text is visible, but I don't understand why it's stretching a bit, even if I added padding to make the text shift a little to the center)
2- Can I make the two columns same height? Should I? (I feel like it doesn't look good right now)
3- To make the image expand when clicked, I have to use JS, right?
Tyler Haas
@tylerthehaas
Feb 14 2016 00:11
1- have your .container-fluid div wrap all of your html
Gabriel
@Zera99
Feb 14 2016 00:12
It isn't? o.o
Oh god, I'm so silly... Thanks. I didn't even realize that
Tyler Haas
@tylerthehaas
Feb 14 2016 00:16
2- if you’re looking to justify the content vertically. Currently that is a little hard to do anything vertically with css. There may be something that will do it with flex box so you may want to check that out here https://css-tricks.com/snippets/css/a-guide-to-flexbox/ and here https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
3- you may be able to use the :active suedo class to achieve this
Gabriel
@Zera99
Feb 14 2016 00:21
thanks @haasDev :)
CamperBot
@camperbot
Feb 14 2016 00:21
zera99 sends brownie points to @haasdev :sparkles: :thumbsup: :sparkles:
:star: 440 | @haasdev | http://www.freecodecamp.com/haasdev
John Roman
@jrroman
Feb 14 2016 00:38
@LennixM hahah i hear ya my man i on the same challenge currently I dont even know where to start
sean9
@sean9
Feb 14 2016 00:54
quick question, how do i make the display on my calculator update on every button pressed?
@LennixM i feel you
@LennixM i feel like these challenges just came out of the blue
Adam Camacho
@Adancode
Feb 14 2016 01:24
Hey guys, for anyone who solved the Wikipedia Viewer, if you knew nothing about coding, what would you read to solve it? I've been stuck on it for one or two weeks, not getting anywhere, and online resources I've found so far have been useless for me, I've watched Udemy videos, YouTube videos, they all assume I know more than I do. I've solved the weather app and the camper news, but those were relatively easy. This one, I'm totally lost. I want to start from scratch, is there anything you guys recommend?
I've already done the calculator and the pomodoro clock, and those were way easier, I'm not sure why the Wikipedia Viewer is in intermediate, and those two are in advanced.
Adam Camacho
@Adancode
Feb 14 2016 01:34
Yeah, I've been all over, but the tutorials go over things like callbacks and other things, and I'm like, "when did we cover that in FCC?"
And then I could look up callbacks, but then I can go down an endless rabbit hole and waste a month, then look up something else and waste another month, and it's endless...when you don't know what you don't know, this method of learning becomes something only someone that's immortal could be cool with, lol
Anyhow, a little frustrated, I'm going to call it a night and get a fresh start to bang my head against more walls tomorrow, lol
Before I go, I love FCC. I just also value my time... :)
Pandarati
@Pandarati
Feb 14 2016 01:57
Does anyone know why my "Modal" isn't working? :/
http://codepen.io/Pandarati/pen/adPVgP?editors=0010
Greg Duncan
@GregatGit
Feb 14 2016 02:00

@Adancode I think you need to ask less open ended questions and try and pinpoint where you are stuck. I also struggled and found the documentation very cryptic. Here is the api url I ended up using

var myUrl = 'http://en.wikipedia.org/w/api.php?format=json';
  myUrl += '&action=query&generator=search&gsrnamespace=0&gsrlimit=20';
  myUrl += '&prop=pageimages|extracts&pilimit=max&exintro&explaintext';
  myUrl += '&exsentences=1&exlimit=max&gsrsearch=' + myItem + '&callback=?';

good luck

Pandarati
@Pandarati
Feb 14 2016 02:01
@Adancode FCC does leave some open gaps here and there, but I think it's alright. It helps prepare you to become a "Rockstar Developer" :clap:
The FCC team is also working their hardest to close these gaps. They fixed a few in the Waypoints not to long ago.
Bruce Young
@mutantspore
Feb 14 2016 02:03
@Pandarati in the JS cog of the codePen setup, remove that alpha jquery link you have and add in the one the quick link has… then add in bootstrap.js
sean9
@sean9
Feb 14 2016 02:08
Can yall see why my clear all button doesnt work as intended and why the button 1 also prints undefined?
Pandarati
@Pandarati
Feb 14 2016 02:16
@mutantspore That's didn't work for me. It just made the project look really weird.
Bruce Young
@mutantspore
Feb 14 2016 02:18
@Pandarati this is a fork of yours at the time you first asked the question with the change to the JS cog I suggested.
http://codepen.io/MutantSpore/pen/JGxeaZ
Scott
@macengr
Feb 14 2016 02:36
@mutantspore Any idea on how I can fix this - http://codepen.io/macengr/full/eJrBvb/ When my tic-tac-toe game resets, it cleans the board....then for some reason it adds back the most recent move by the player and the most recent move by the computer.
rushi
@rush86999
Feb 14 2016 02:49
hi guyz stuck on the calculator challenge can anyone help i am not sure why the code doesn’t work?
i have 250 lines of code written for this!!!
i have heavily commented everything and really need advice
David Weedmark
@DavidWeedmark
Feb 14 2016 02:53
@rush86999 wow lots of work
rushi
@rush86999
Feb 14 2016 02:54
@DavidWeedmark i know it’s probably simpler then how i did but would love to hear from somee expert coders
Alexei Bazhenov
@Abazhenov
Feb 14 2016 02:57
Can someone help me with a quick bootstrap question? I have no idea why my top row is not as wide as my second row: http://codepen.io/Abazhenov/pen/xZMmKa
David Weedmark
@DavidWeedmark
Feb 14 2016 02:57
I'm hardly an expert but it looks like your flex-container is making your positions on the display irrelevant when I resize the window
Pandarati
@Pandarati
Feb 14 2016 02:58
@mutantspore Oh, I'm sorry I interpreted what you said wrongly. I didn't realize I needed to add the libraries in JS as external links. Thanks for the help.
CamperBot
@camperbot
Feb 14 2016 02:58
pandarati sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1117 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Feb 14 2016 02:59
@macengr my best guess is that huge if else statement. I suspect that you are meeting a requirement… putting up the alert… clearing the board… and then it keeps processing the if statement and you are hitting some other condition.
Scott
@macengr
Feb 14 2016 02:59
@mutantspore Hmmm. I'll check it out. Thanks!
CamperBot
@camperbot
Feb 14 2016 02:59
macengr sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1118 | @mutantspore | http://www.freecodecamp.com/mutantspore
rushi
@rush86999
Feb 14 2016 02:59
@DavidWeedmark done
i really need someone to look at the JS code
http://codepen.io/rush86999/pen/QyJMPo here again i think it is getting lost in the chat
rushi
@rush86999
Feb 14 2016 03:07
bulk of the code is in the press function and everything goes from there
rushi
@rush86999
Feb 14 2016 03:13
is anybody looking? just wondering?
David Weedmark
@DavidWeedmark
Feb 14 2016 03:13
@Abazhenov not sure why either. I can give you a patch though
put the h1 in a separate div with a new class, then add this css to the class:
.test {
      background: #022835;
     margin: 0 -24px;
}
use the background color there instead of in the h1 class and it will solve the issue
the negative margin expands the row.
I also noticed that if you add a new row, it is automatically resized to be more narrow than the rows above it. I wonder if you're using a class or id name that boostrap uses for this type of styling?
Alexei Bazhenov
@Abazhenov
Feb 14 2016 03:18
@DavidWeedmark interesting, ill look into it, thank you!!
CamperBot
@camperbot
Feb 14 2016 03:18
abazhenov sends brownie points to @davidweedmark :sparkles: :thumbsup: :sparkles:
:star: 323 | @davidweedmark | http://www.freecodecamp.com/davidweedmark
rushi
@rush86999
Feb 14 2016 03:19
http://codepen.io/rush86999/pen/QyJMPo just posting again until someone takes a look at it
David Weedmark
@DavidWeedmark
Feb 14 2016 03:20
@rush86999 was looking but your code is a bit much for me sorry. hopefully someone with much more experience can help you decipher it
rushi
@rush86999
Feb 14 2016 03:21
@DavidWeedmark i can explain the process maybe that might help
ask me the line you are confused and i’ll explain the model and structure
everything starts at the click in jquery and press function gets called from there depending on what is pressed gets sent to the approriate function and the store which is the model gets changed
Bruce Young
@mutantspore
Feb 14 2016 03:25
@rush86999 console says…
TypeError: Calculator.press is not a function. (In 'Calculator.press('clear')', 'Calculator.press' is undefined)
rushi
@rush86999
Feb 14 2016 03:27
@mutantspore how are you doing this? i am not getting anything? is this in a console or something i don’t know how to use that?
i defined funtion press() {} an all the code starts from there
is there a tool that i can use to follow the code somehow to see where the problem is?
Bruce Young
@mutantspore
Feb 14 2016 03:30
@rush86999 the browser development console. right click the calculator and select something like “inspect element” and then you’ll get a bunch o ftabs .. “console” wil be one of them . depends on your browser
@rush86999 FCC keeps adding stuff.. I noticed in the last few days they have added a section in the Map about Chrome dev tools. it’s near the end.
http://www.freecodecamp.com/map
rushi
@rush86999
Feb 14 2016 03:33
@mutantspore okay i looked at it and says undefined but i did define it. it’s in the scope? doesn’t make sense?
the spelling of the object is wrong in the console as well such as “Uncaught ReferenceError: Calul is not defined
pen.js:385 Uncaught ReferenceError: Caluculator is not defined"
Bruce Young
@mutantspore
Feb 14 2016 03:36
@rush86999 yes you defind a funtion called press inside a function called caluclator but then I think you are “talking to it as though it was a prototype of Calculator.
rushi
@rush86999
Feb 14 2016 03:37
prototype i thought was for the parent class
this is within the class itself
rushi
@rush86999
Feb 14 2016 03:45
@mutantspore any good articles you might know on this topic?
Bruce Young
@mutantspore
Feb 14 2016 03:46
@rush86999 ok a more general comment… you have a ton of code . When did this break? I can’t understand how you can have so much and the thing breaks on teh very first line in the assigning of click events. you need to go back and just do a small bit at a time and see how that works. Use console.log() to send stuff to the console so you can see what is happening. Make a new pen and just do the min to see progress and build from there.
rushi
@rush86999
Feb 14 2016 03:47
@mutantspore okay thanks i’ll try that
CamperBot
@camperbot
Feb 14 2016 03:47
rush86999 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1119 | @mutantspore | http://www.freecodecamp.com/mutantspore
Hugo
@monkora
Feb 14 2016 04:02
Hi all, I'm having trouble with a bit of CSS
Adam Camacho
@Adancode
Feb 14 2016 04:22
Thanks @GregatGit and @Pandarati, I just got back from seeing Deadpool at the theater, it was really cool! As far as FCC, I did really like the new material they added, especially on objects, I was a bit weak on that, and with the new material, I feel more comfortable with them.
CamperBot
@camperbot
Feb 14 2016 04:22
adancode sends brownie points to @gregatgit and @pandarati :sparkles: :thumbsup: :sparkles:
:star: 348 | @gregatgit | http://www.freecodecamp.com/gregatgit
:star: 370 | @pandarati | http://www.freecodecamp.com/pandarati
hey guys in full page view, the background image is cutting off
like the bottom half of that image doesn't show in full page view
can someone help me with this?
Hugo
@monkora
Feb 14 2016 04:24
@max77p I'll have a look
@max77p Could you explain the problem a little clearer sorry, I'm not sure what you mean
max77p
@max77p
Feb 14 2016 04:27
@monkora actually think i am on to something, but still cant figure it out why.. basically, the background image for the first page "home" is not showing the entire image if i put fixed...but shows full image if i put cover...if i put contain the entire image dissappears
wondering why that is so
Hugo
@monkora
Feb 14 2016 04:30
I'm having trouble replicating.
I see you have cover now, that seems to be working.
max77p
@max77p
Feb 14 2016 04:31
@monkora yea i played around with it, think i kind of get it...but ok while i have your attention...if you scroll the window to the right there is a little white space
do you see that?
how do i get rid of that
vertically when i scroll there is no white space...but horizontally on far right there is
@monkora seems like the width of pages don't align with the navbar
Hugo
@monkora
Feb 14 2016 04:33
@max77p I don't think there is a "fixed" setting for background-size. Contain will shrink the background until it fits inside the div, cover will stretch it until it covers the whole div while keeping the proporitions.
@max77p If you set background-size: auto (which I think is the default) the background image will not be scaled at all
max77p
@max77p
Feb 14 2016 04:36
@monkora i am not sure i understand how to fix this
Hugo
@monkora
Feb 14 2016 04:36
@max77p The white border?
max77p
@max77p
Feb 14 2016 04:36
i.e everything inside div class="firstpage" is not aligned with the top navbar
left side seems ok, but on the far right side its cutting off i think
Hugo
@monkora
Feb 14 2016 04:39
@max77p Ah I see what the issue is.
@max77p Do you know how to inspect elements?
max77p
@max77p
Feb 14 2016 04:40
right click and inspect?
Hugo
@monkora
Feb 14 2016 04:41
@max77p hang on I'm just figuring out a solution
@max77p Yep, in chrome, go view - > developer - > developer tools
then in top left is an icon, might be magnifying glass or a cursor above a square.
If you click that you can then hover over divs and see what the divs are doing, what padding/margins they have etc...
max77p
@max77p
Feb 14 2016 04:43
where is the view option?
Hugo
@monkora
Feb 14 2016 04:43
right up the top
file edit view history etc...
max77p
@max77p
Feb 14 2016 04:44
weird i don't even have an option like that lol
i am using chrome
Hugo
@monkora
Feb 14 2016 04:45
@max77p Windows or OSX?
max77p
@max77p
Feb 14 2016 04:45
oh nvm its under more tools
windows
Hugo
@monkora
Feb 14 2016 04:45
@max77p Ahh, I'm on mac so must be different
max77p
@max77p
Feb 14 2016 04:45
ok so yea i went here before, but i can't figure out why my image is little offset
Loren Baca
@vbroskas
Feb 14 2016 04:45
Sup guys, if I have an un-ordered list, with multiple items inside, how do I get the text for an item to extend further out across the page?
right now the text only goes out a short distance and then starts a new line, creating a condensed little paragraph
Hugo
@monkora
Feb 14 2016 04:48
@max77p Ok got it.
@max77p You've got a problem with your bootstrap rows.
max77p
@max77p
Feb 14 2016 04:49
ohhh where exactly?
Hugo
@monkora
Feb 14 2016 04:49
@max77p so you know you have a Container div, then your rows nested inside the container?
max77p
@max77p
Feb 14 2016 04:49
yea
Hugo
@monkora
Feb 14 2016 04:50
@max77p In bootstrap, the containers have a padding of 15px.
max77p
@max77p
Feb 14 2016 04:50
oh
Hugo
@monkora
Feb 14 2016 04:50
@max77p The row margins are offset by -15px on the left and right (so they touch the edges of the container).
@max77p This blog post explains WHY that is quite well. http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
@max77p What's gone wrong on your page is you have a row sitting there without a container.
@max77p So it's applied a -15px margin to each side, spilling outside of your "firstpage" div.
max77p
@max77p
Feb 14 2016 04:52
how would i fix this?
just put a container on the row?
@monkora i applied the image outside of the bootstrap grids though
Hugo
@monkora
Feb 14 2016 04:54
@max77p Which image?
max77p
@max77p
Feb 14 2016 04:54
the image under firstpage
@monkora oh wait, all the pages have the white space on right...
ahh this is hurting my brain, maybe i need a break lol..been learning since 10am...
Hugo
@monkora
Feb 14 2016 04:56
@max77p Walk it off :P, I'll back up for you.
@max77p The bootstrap grid system must be used with Containers -> Rows -> Columns
@max77p Containers have a padding of 15px;
Rows have left and right margin of -15px, this effectively stretches the row to offset that padding.
max77p
@max77p
Feb 14 2016 04:58
@monkora i understand that part, but not sure what exactly i should be doing here
i have all the rows in a container no?
Hugo
@monkora
Feb 14 2016 04:59
@max77p Now you have to remember your page is rendered top to bottom. So your firstpage div is going "Ok! The window is this wide so I'm going to be this wide too"
@max77p Then your containerless row comes along and goes "Ok! My margins are -15px!"
So it spills out of the firstpage and constantly stretches your page to give you that white space.
@max77p Yes all rows need to be in a container.
@max77p Why are you using a row in this case though?
max77p
@max77p
Feb 14 2016 05:02
to keep the "max web design studio and everything below it in the center
Hugo
@monkora
Feb 14 2016 05:02
@max77p Vertically or horizontally?
max77p
@max77p
Feb 14 2016 05:03
horizontally
Hugo
@monkora
Feb 14 2016 05:04
@max77p Well those are actually centered because you've applied text-align: center; to your firstpage CSS.
max77p
@max77p
Feb 14 2016 05:06
@monkora ok i am absolutely lost, i have no idea what to fix lol
@monkora i know container-fluid does the trick, but in this case i have the actual row inside the firstpage
and i am applying the image to the entire firstpage (so not to be limited by the rows)
@monkora so beyond this, i have no idea what to fix
Hugo
@monkora
Feb 14 2016 05:08
@max77p I'm not telling you outright because I'm trying to lead you to the answer, is that unhelpful?
max77p
@max77p
Feb 14 2016 05:09
@monkora yea lol i get what you trying to do, but i am hitting my head right now, i really can't seem to figure this one out...i know its a easy solution, but its really escaping me right now
i fully expect to have a "ohhh" moment
Hugo
@monkora
Feb 14 2016 05:09
@max77p Explain to me why you think you're getting the white space.
max77p
@max77p
Feb 14 2016 05:14
@monkora i get its spilling out, but why can't i fix it with simple offsetting the margin?
Hugo
@monkora
Feb 14 2016 05:16
@max77p You need to use a div that has a margin of 0;
@max77p If you went into the CSS and said .row {margin: 0;}
you'd be changing the margin for all the bootstrap row.
rows*
@max77p I would just delete the class="row" on the div.
max77p
@max77p
Feb 14 2016 05:18
@monkora just for the firstpage or all?
Hugo
@monkora
Feb 14 2016 05:18
@max77p for all of them
max77p
@max77p
Feb 14 2016 05:19
but then wouldn't the grid system in about page not work?
isn't the way of writing bootstrap grid....first you do the container...then row then col-md whatever
?
or do i have the row thing totally misunderstood?

```

<div class="container-fluid">
<div class="row">
...
</div>
</div>

Hugo
@monkora
Feb 14 2016 05:20
@max77p That's correct, but in your about section you have the row then the container then the column
if you put the row inside the container it should work
max77p
@max77p
Feb 14 2016 05:21
@monkora ohhhhh
there is my ohhh moment
lol
Hugo
@monkora
Feb 14 2016 05:21
@max77p hahaha
max77p
@max77p
Feb 14 2016 05:21
@monkora perfect, thank you for leading me to the final spot sir!
CamperBot
@camperbot
Feb 14 2016 05:21
max77p sends brownie points to @monkora :sparkles: :thumbsup: :sparkles:
:star: 256 | @monkora | http://www.freecodecamp.com/monkora
max77p
@max77p
Feb 14 2016 05:22
much appreciated
Hugo
@monkora
Feb 14 2016 05:22
@max77p No problem, I could've just told you but I wanted you to understand a bit better. Not sure if that worked lol.
urge*
max77p
@max77p
Feb 14 2016 05:23
@monkora haha it def helped me understand this a lot better now, especially after scratching my head on this
will do thanks
Hugo
@monkora
Feb 14 2016 05:25
@max77p At some point I suggest making a fresh codepen and experiment making your own grid. It'll help you understand how the grid works.
Sidharth Kriplani
@sidkrip
Feb 14 2016 06:03
Can someone help me with the first zipline?
I want to make my about section look the same as this one:
http://codepen.io/alexdevero/full/YPyreM/
how do i do it?
????
Hugo
@monkora
Feb 14 2016 06:05
@sidkrip It looks like it's just a heading with a paragraph underneath.
@sidkrip He's using Open Sans as his font
Sidharth Kriplani
@sidkrip
Feb 14 2016 06:08
actually, I am talking about the grouping. Or I think it is wrapping around of the text, is it?
Hugo
@monkora
Feb 14 2016 06:10
@sidkrip Ah, you mean the way he has it centered?
Sidharth Kriplani
@sidkrip
Feb 14 2016 06:10
yes :D
Hugo
@monkora
Feb 14 2016 06:12
@sidkrip In this case, he's used bootstrap
Sidharth Kriplani
@sidkrip
Feb 14 2016 06:13
what part of it?
Hugo
@monkora
Feb 14 2016 06:14
The grid system
He's got a container > row > column
the text for the paragraph is inside that column.
@sidkrip It has the classes col-xs-6 col-sm-offset-3.
@sidkrip The grid is divided into 12 segments, the column is 6 segments wide, and offset from the left by 3 segments, effectively centering it.
Sidharth Kriplani
@sidkrip
Feb 14 2016 06:18
that will be a some interwined code I guess. I will try and get back to you with my code
Hugo
@monkora
Feb 14 2016 06:18
@sidkrip How do you mean?
@sidkrip You don't need to use bootstrap to that by the way.
@sidkrip You could do something like #AboutMeSection .p {display: block; width: 50%; margin: auto;}
Brett
@BLayman
Feb 14 2016 07:02
Anyone ever have the issue of .split() dropping the last item of the array it should make?
nevermind
Pradeep CE
@cepradeep
Feb 14 2016 07:05
@BLayman What do you have in your code?
Zerka1982
@Zerka1982
Feb 14 2016 07:39
HI guys !
please I need your help
I tried to solve on problem since yesterday but I cound't make it
Hugo
@monkora
Feb 14 2016 07:51
@Zerka1982 What's the problem
Preston Moore
@FrOyxx
Feb 14 2016 08:03

Current final project for "Tribute Page" exercise. Any Feedback is appreciated!

http://codepen.io/FrOyxx/full/pgGQPy/

greg
@wearenotgroot
Feb 14 2016 08:06
@FrOyxx looks good but a bit too red? dont you think?
Zerka1982
@Zerka1982
Feb 14 2016 08:06
@monkora I have a form whcih contains some labels
Hugo
@monkora
Feb 14 2016 08:06
@Zerka1982 What's gone wrong?
greg
@wearenotgroot
Feb 14 2016 08:07
@FrOyxx here color scheme----->http://www.color-hex.com/color-palettes/
Preston Moore
@FrOyxx
Feb 14 2016 08:07
@wearenotgroot yeah quite a bit lol.
Zerka1982
@Zerka1982
Feb 14 2016 08:08
@monkora for the mobile friendly , I want to see the input text area and Asterisk * in same line when I switch to Mobile version
Hugo
@monkora
Feb 14 2016 08:08
@Zerka1982 Can you show me your code?
greg
@wearenotgroot
Feb 14 2016 08:09
@Zerka1982 post the link to your pen
Zerka1982
@Zerka1982
Feb 14 2016 08:09
I am not using pen sorry
greg
@wearenotgroot
Feb 14 2016 08:09
ok
then link to where it is then
@Zerka1982 you can also make temporay fiddle or pen btw
Zerka1982
@Zerka1982
Feb 14 2016 08:10
I l show you a part of my code
<div class="form-group">
<div class="has-feedback">
<label class="lead control-label lead-smallest"><?php echo ('Phone Number') ?> </label>
</div>
<div class="parent_input">
<?php
echo $this->Form->input('telephone', array(
'type' => 'text',
'default' => $profile['telephone'],
'pattern' => '\d{3,16}$',
'data-toggle' => 'tooltip', 'data-container' => 'body',
'title' =>
('Enter your mobile phone number in international format beginning with the country code'),
'maxlength' => '15',
'class' => 'form-control tooltip-hide tooltip-profile',
'placeholder' => ('Phone +358 40 1234567'),
'required' => 'false',
'label' => false))
?>
<span class="requiredFields">&#42;</span>
</div>
</div>
Preston Moore
@FrOyxx
Feb 14 2016 08:11
@wearenotgroot thanks for the link! def going for a color change.
CamperBot
@camperbot
Feb 14 2016 08:11
froyxx sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 841 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Feb 14 2016 08:11
@FrOyxx YW
Zerka1982
@Zerka1982
Feb 14 2016 08:13
@wearenotgroot Did you check the part of my code?
@monkora did you check it ?
Hugo
@monkora
Feb 14 2016 08:13
@Zerka1982 Could you create a codepen so we can see what's going wrong a bit better?
I want to make it clear that I want input text and Asterisk in the same line for mobile version.
When I minimize the page to mobile version, Asterisk * goes to 2nd line.
greg
@wearenotgroot
Feb 14 2016 08:23

@Zerka1982 something like html

<div class="form-group">
<div class="has-feedback">
<label class="lead control-label lead-smallest"><?php echo ('Phone Number') ?> </label>
</div>
<div class="parent_input">
  <input id="textfield" type="text"/>
  <label class="requiredFields">&#42;</label>
</div>
</div>

css

.parent_input
{
  min-width:202px!important;
  display:inline-block;
}

.textfield
{
  display:inline!important;
  float:right;
}

.requiredFileds
{
  display:inline!important;
}
@Zerka1982 set a min-width for the parent div of the input and label
@Zerka1982 are you going to use bootstrap?
Zerka1982
@Zerka1982
Feb 14 2016 08:25
yes
bootsrap
greg
@wearenotgroot
Feb 14 2016 08:25
@Zerka1982 you can also try their grid system with the col-xs-12 for the entire parent div of input and label
Zerka1982
@Zerka1982
Feb 14 2016 08:25
I want to use bootstrap @wearenotgroot
Preston Moore
@FrOyxx
Feb 14 2016 08:29
Is there a trick to changing hyperlink text color?
http://codepen.io/FrOyxx/full/adXXYN/
greg
@wearenotgroot
Feb 14 2016 08:32
@FrOyxx you mean when you hover?
@FrOyxx
a:hover{  color:value;  text-decoration:none|underline|etc;    }
Preston Moore
@FrOyxx
Feb 14 2016 08:33
@wearenotgroot more so just the link text color as is
i dont want that light blue link color
greg
@wearenotgroot
Feb 14 2016 08:34
@FrOyxx yes target the a and the state you want
Zerka1982
@Zerka1982
Feb 14 2016 08:34
@wearenotgroot It did not work ... anyway possible I show you the output of my page
greg
@wearenotgroot
Feb 14 2016 08:35
@Zerka1982 you sure, if you set a min width for the parent div then you cannot make it smaller than it is
@Zerka1982 try pasting this on that pen you create
.parent_input
{
  min-width:270px;
  max-width:270px;
}
Preston Moore
@FrOyxx
Feb 14 2016 08:38
thanks @wearenotgroot that does look familiar. what specifically am looking for if I wanted to read some documentation on what you posted?
CamperBot
@camperbot
Feb 14 2016 08:38
froyxx sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: froyxx already gave wearenotgroot points
greg
@wearenotgroot
Feb 14 2016 08:40
@FrOyxx for simple stuff just go to w3 school
Zerka1982
@Zerka1982
Feb 14 2016 08:41
@wearenotgroot pm please so I can show you my output !
Casey Heath
@ExhibitArts
Feb 14 2016 09:41
Can someone help me? I'm trying to get the "#1: Black Mob at Detriot Gas Station" link on the right to stay within the Top 10 div container when I resize the window. Everytime I try to resize my browsers window the link does some wierd overlap thing. You see what I mean in the Codepen. http://codepen.io/ExhibitArts/pen/LGqapO
Jonatan Bernal
@Jonatan-B
Feb 14 2016 09:51

@ExhibitArts

    <ul class="top10" style="list-style-type: none;">
        <a href="https://www.youtube.com/watch?v=kSpSn14Dwrw"><li id="li-blkmob1"><em>#1:</em> Black Mob at Detroit Gas Station</li></a>
    </ul>

should the <a> tag be inside the <li> ?

peeted
@peeted
Feb 14 2016 09:53
I have just finished the basic front end, basic algorithms, and very short JSON, APIs and AJAX thing, the next thing it is giving me is 'build a random quote machine with the option to tweet quotes', I feel I do not have the tools/knowledge to do that and i have no idea where to start, does anyone have any suggestions for things I could read or try to get started/bridge the gap?
Jonatan Bernal
@Jonatan-B
Feb 14 2016 09:54
@peeted if you finish those you do have that knowledg.e
You might just not know how to apply it
and I believe that is the reason for that 'zipline' as they were called before
peeted
@peeted
Feb 14 2016 09:55
well, the JSON/API thing took about 2 minutes, are there any more accessible in depth resources which are worth looking at?
Jonatan Bernal
@Jonatan-B
Feb 14 2016 09:56
I'm sure there is, but I tell you I was in your place about a month ago. I felt like there was no way that I could do the page, i just didn't feel ready either.
Then I went to one of the FCC local meetings and everyone was sitting down working on their FCC course, and i was too, so i started working on the page, and was actually able to get a hang of things
and get it done.
Of course i had to go back and review a lot of the stuff we learned about but over all i just had to put the lessons together
peeted
@peeted
Feb 14 2016 09:58
Fair enough, well I guess I'll have a look at the twitter API and see if I can figure it out from what has been given
Jonatan Bernal
@Jonatan-B
Feb 14 2016 09:58
@peeted if you are looking for resources though w3schools is very good. Also the bootstrap and JQuery documentation are very user friendly
don't worry about the twitter API
that comes at the end
get your page setup first, and everything done, then doing the twitter part is actually the easiest :)
peeted
@peeted
Feb 14 2016 09:59
Yea I used that for the basic front end for bootstrap, it was pretty useful.
Jonatan Bernal
@Jonatan-B
Feb 14 2016 10:00
Well I'm not sure where you are but its 4 am for me so i'm going to go get some sleep. Good luck @peeted !
peeted
@peeted
Feb 14 2016 10:01
thanks for the help
Casey Heath
@ExhibitArts
Feb 14 2016 10:01
@Jonatan-B Is there another way to make the li a link because that's why there is an a link around the li tag.
I'm new so forgive me. lol
Jonatan Bernal
@Jonatan-B
Feb 14 2016 10:02
You should consider the li more for formatting
So you should do something like: <li><a></a></li>
@ExhibitArts
well good night now.
Salman Shahid
@salman-shahid
Feb 14 2016 10:05
For the weather app how do I find the weather at a location? I looked at the docs but it doesn't explain how to do it with an api key. Here's the link that I want to use api.openweathermap.org/data/2.5/weather?lat=35&lon=139
Luke Murray
@vremerz
Feb 14 2016 11:06

Hey guys, trying to create a navbar that collapses when the page is smaller into a dropdown menu. when i click the button nothing happens, where am i going wrong?

this is my code:

<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"> Luke Murray </a>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> Home </a></li>
<li><a href="#"> About </a></li>
<li><a href="#"> Portfolio </a></li>
<li><a href="#"> Contact </a></li>
</ul>
</div>
</div>
</nav>

any help appreciated. Cheers

h4r1m4u
@h4r1m4u
Feb 14 2016 11:08
@vremerz did you import the bootstrap.js library into your project?
Luke Murray
@vremerz
Feb 14 2016 11:17
@h4r1m4u yeah
h4r1m4u
@h4r1m4u
Feb 14 2016 11:17
@vremerz got a link to your codepen?
h4r1m4u
@h4r1m4u
Feb 14 2016 11:18
@vremerz as i suspected. you imported the bootstrap CSS library, but not the JS one. they're two different files
add this in the JS resources: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js and you'll be golden
Luke Murray
@vremerz
Feb 14 2016 11:20
@h4r1m4u ahh thanks. so simple haha
CamperBot
@camperbot
Feb 14 2016 11:20
vremerz sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1395 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 14 2016 11:20
no problem. it's a common issue
omadoyeabraham
@omadoyeabraham
Feb 14 2016 11:25
Hi everyone, please i am a little lost on what to do in order to solve the random quote generator zipline. All the ajax and jquery stuff seems unclear to me. Could someone please help me or refer a material that you found useful in solving it. Thanks
Tomáš Kalný
@Sleepy-guy
Feb 14 2016 11:38
is it normal to be stuck on calculator zipline for 3 weeks ?
Jan Pribošek
@GreatDanton
Feb 14 2016 11:38
@Sleepy-guy I finished it in 1 week working every now and then, but it's quite normal to be stuck with certain problem for some time
I was writing tic tac toe for 4weeks :)
Tomáš Kalný
@Sleepy-guy
Feb 14 2016 11:40
@GreatDanton well its not like im writing it every day cuz I just like gave up already but everytime i look at it i get so frustrated because i cant find mistake and then I just close it :D
Jan Pribošek
@GreatDanton
Feb 14 2016 11:40
lol
h4r1m4u
@h4r1m4u
Feb 14 2016 11:52
@omadoyeabraham start step by step:
1) create your array that will hold quote objects. each quote should have text and author
2) write a function that will randomly choose one of the quotes in the array
3) create a click handler for the 'New quote' button and integrate it with your function generating the quotes
4) write a function that will display the generated quote in your page, integrate it with your function generating the quotes
5) add the tweet button. the simplest way to implement the tweet button is to use twitter intents (look it up). basically it's a just an <a> with a twitter link that includes the text you want to tweet (in this case your quote). each time you generate the quote, update the href attribute of the tweet button (<a>)
omadoyeabraham
@omadoyeabraham
Feb 14 2016 11:54
@h4r1m4u Thank you for your clear answer. I was thinking though of pulling the quotes from an API, so that's what has me a little bit stumped. Any advice?
CamperBot
@camperbot
Feb 14 2016 11:54
omadoyeabraham sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1396 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 14 2016 11:56
@omadoyeabraham did you go through the JSON APIs and Ajax FCC section?
omadoyeabraham
@omadoyeabraham
Feb 14 2016 11:58
@h4r1m4u Yes i did, it was too short and i was not able to understand how to access external api's.
h4r1m4u
@h4r1m4u
Feb 14 2016 12:02
@omadoyeabraham hmm. in a nutshell, API is an external service that you can call with your code and get a response from it. most commonly the response you receive is a JSON. the API has a URL that you need to use and often you need to add some parameters to it (these tell the API what specifically you're requesting - for example, you could choose quote from a specific category only or a certain language). once you receive the response from the API, you can do something with the returned object (e.g. display it in your page). if you're using jquery, you'll probably want to use the getJSON() method (which is a just a shorthand for a specific use of the ajax() method). unfortunately i don't have any good tutorials to direct you to, but i'm sure that if you google around, you should be able to find a ton of them.
@omadoyeabraham this looks pretty comprehensive: https://www.smashingmagazine.com/2012/02/beginners-guide-jquery-based-json-api-clients/. give it a read
omadoyeabraham
@omadoyeabraham
Feb 14 2016 12:04
@h4r1m4u Thanks i really appreciate your help.
CamperBot
@camperbot
Feb 14 2016 12:04
omadoyeabraham sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: omadoyeabraham already gave h4r1m4u points
h4r1m4u
@h4r1m4u
Feb 14 2016 12:04
you're most welcome
Chris Webster
@cmwebby
Feb 14 2016 12:07
Hey can someone help with the twitch.tv API challenge. I can't figure out how to do the last user story which uses a place holder if the account does not exist. I've looked on the docs and I can't seem to find out how I could do this. Here's my project so far - http://codepen.io/cmwebby/pen/MKLjKQ?editors=0010
Sergey
@SZharkov
Feb 14 2016 12:26
http://codepen.io/Zharkov/full/wMNXYQ/
  • can anybody explain me what I wrote badly, because there is really bad adaptation on devices. And what I should do to make this project responsible? Using media queries or there is an easier way?
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 12:52
Hello every one I have a problem with a json file I upload it to one of the free hosting websites and tried to retrieve the data from it using $.getJSON method . it did not work !!! any suggestions
James
@jamesgraham10
Feb 14 2016 12:58
hey ZeeMax what are you using to retrieve the data? I just tried a plunkr with your code but it didn't work because of security issues with serving your data.json from http instead of https
'https://plnkr.co/edit/ZqTlS9su3ifIHiGxqmKx?p=preview' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://nairuzabulhul.esy.es/data.json'. This request has been blocked; the content must be served over HTTPS.
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:03
@jamesgraham10 so I should change it to https
@jamesgraham10 I am using $.getJSON method
James
@jamesgraham10
Feb 14 2016 13:14
Try using a .json file that's served over https
like this one https://api.github.com/users/octocat
$.getJSON('https://api.github.com/users/octocat', function (data) { console.log(data); });
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:17
@jamesgraham10 withe link you gave me it works, but not with mine
James
@jamesgraham10
Feb 14 2016 13:18
Yeah, it's because the file you uploaded to your hosting provider is served over http, which Codepen/Plunkr and other online code editors view as an insecure source
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:19
@jamesgraham10 any suggestion to work around this
classact1
@classact1
Feb 14 2016 13:20
hey guys I'm working on tribute page and I have problem with placing image in frame with description underneath. What I mean is how to make frame fit image with small margins? Any tips? http://codepen.io/classact1/pen/pgGKMv?editors=1000
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:21
@classact1 Are you using Bootstrap, if so you can use class thumbnail for the image
James
@jamesgraham10
Feb 14 2016 13:22
@ZeeMax you could try uploading your json file to DropBox or Google Drive or something, that might work.
classact1
@classact1
Feb 14 2016 13:22
@ZeeMax I do use Bootstrap. How do I add description under picture then?
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:23
@jamesgraham10 I did dropbox but getJSOn could not read it
James
@jamesgraham10
Feb 14 2016 13:24
The other solution is to run your server locally
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:25
@classact1 you could use span or <p> options. Example <img src="http://s11.postimg.org/4ngsk6pv7/local.jpg" alt="...">
<div class='caption'>
<h3>Local Weather App</h3>
<p class='well'>HTML, CSS, jQuery, Weather API </p>
</div>
@jamesgraham10 Yeah I know that but for the project I am doing currently Its to be hosted online
@classact1 I did the same with my protfolio image with description http://codepen.io/ZeeMax/pen/eJVJNr
James
@jamesgraham10
Feb 14 2016 13:26
ah okay, do you need to use Codepen
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:27
@jamesgraham10 not really do you know other options. I chose Codepen because it is faster to setup
James
@jamesgraham10
Feb 14 2016 13:29
@ZeeMax I think it would probably be easier to find a way of uploading your file over https. What hosting provider are you currently usign?
using*
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:30
@jamesgraham10 I am using Hostinger
classact1
@classact1
Feb 14 2016 13:36
@ZeeMax So I've put my image in a div with thumbnail class but I still get huge margins on the left and right. What am I doing wrong?
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:45
@classact1 share with us ur pen
@classact1 codepen
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:50
@classact1 it should be like this <div>
<img class="img-responsive thumbnail" src="https://www.dropbox.com/s/2y3oocrbbgjfbe0/rotmistrz-pilecki-681x389.jpg?raw=1">
<text>One of the biggest heroes in Poland's contemporary history.</text>
</div>
@classact1 thumbnail class should be included withing the image <img>
classact1
@classact1
Feb 14 2016 13:52
but now the image is outside of a frame
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 13:54
@classact1 how ?? I tried it and the image is inside the frame
Robert Uivarosi
@URobert
Feb 14 2016 13:55
@classact1 what are you trying to do ?
classact1
@classact1
Feb 14 2016 13:56
@URobert I'm trying to put the text under picture within the frame of thumbnail.
@ZeeMax damn ; p I don't know why it doesn't work for me
classact1
@classact1
Feb 14 2016 14:03
@ZeeMax how is the text supposed to be in the frame when thumbnail class is applied only to image? text is within the same div but it doesn't matter i guess
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 14:15
@classact1 ohh so you want the text and the image inside the frame
@classact1 I forked it ur project and did this http://codepen.io/ZeeMax/pen/EPrzaq
Robert Uivarosi
@URobert
Feb 14 2016 14:20
@classact1 I made some testing on your code as well. You can get away with using absolute positioning on your img, than relative on your text by giving it an id... and then position your text using % or px... however you will encounter problems with scaling because your text won't shrink the way your img does. In order to do that, you can use something specific for mob device OS`s OR just use a program to mod your image, write the text inside it wherever you want. Save the image and use the image with the text. Hope this help. Good luck !
classact1
@classact1
Feb 14 2016 14:21
@URobert @ZeeMax Thanks!
CamperBot
@camperbot
Feb 14 2016 14:21
classact1 sends brownie points to @urobert and @zeemax :sparkles: :thumbsup: :sparkles:
:star: 235 | @zeemax | http://www.freecodecamp.com/zeemax
:star: 584 | @urobert | http://www.freecodecamp.com/urobert
Robert Uivarosi
@URobert
Feb 14 2016 14:21
@classact1 yw. Happy coding ! I gtg
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 14:29
@classact1 you welcome
LennixM
@LennixM
Feb 14 2016 14:48

Guys, I really need your help on something

http://codepen.io/LenniXM/pen/QyYZqz?editors=1010

Can someone look at my code and tell me, why lat and lon are still 0 on the global basis ?:((

Joseph Morse
@jnmorse
Feb 14 2016 15:03
@LennixM geolocation.getCurrentPostion is an asynchronous, so until the function you pass to it is run, the values will not be set
LennixM
@LennixM
Feb 14 2016 15:06
so what should i do to circumvent this?
Joseph Morse
@jnmorse
Feb 14 2016 15:09
@LennixM All your functionality bases on that data needs to happen in that function, or can call other functions from within that function.
Joseph Morse
@jnmorse
Feb 14 2016 15:15
@LennixM http://codepen.io/jnmorse/pen/yeQQmE?editors=1010 this is a bit I wrote trying to do it with a JavaScript Promise, your see the first time it outputs 0 cause the data isn't set yet
LennixM
@LennixM
Feb 14 2016 15:24
Ok I don't really understand what you did in the code sample you sent but you seem to know what you're doing. I just put my code in the function and it works now. Thanks for you help @jnmorse
CamperBot
@camperbot
Feb 14 2016 15:24
lennixm sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 389 | @jnmorse | http://www.freecodecamp.com/jnmorse
Joseph Morse
@jnmorse
Feb 14 2016 15:26
@LennixM np
max77p
@max77p
Feb 14 2016 15:27
in the about page, how do i make it into two rows?
so its 2 rows by 3 columbs of those boxes
batman137
@batman137
Feb 14 2016 15:31
you could add a second bootstrap row and set the height to 50vh
Joseph Morse
@jnmorse
Feb 14 2016 15:31
@max77p are you talking about your portfolio section?
max77p
@max77p
Feb 14 2016 15:32
@jnmorse yes please refresh, i fixed it a bit, but now one of the boxes is pushed down
Joseph Morse
@jnmorse
Feb 14 2016 15:34
@max77p you should wrap each row in a div with class row
batman137
@batman137
Feb 14 2016 15:34
@max77p use col-sm-6 in addition to col-md-6
max77p
@max77p
Feb 14 2016 15:35
@batman137 why is that?
@jnmorse i have the first row wrapped in a class row and the 2nd row wrapped in class row
batman137
@batman137
Feb 14 2016 15:36
@max77p if you view your page in a smaller screen it will get pushed down whitout col-sm
so you add a second possibility for tablets or smaller windows
max77p
@max77p
Feb 14 2016 15:38
@batman137 that doesn't seem to work
Joseph Morse
@jnmorse
Feb 14 2016 15:40
@max77p btw you don't want to use both container and container-fluid on the same elements, use one or the other
max77p
@max77p
Feb 14 2016 15:40
@jnmorse why is that?
Joseph Morse
@jnmorse
Feb 14 2016 15:41
@max77p they serve two destict purposes, one is taking up 100% of the screen width, the other has a margin on the sides
batman137
@batman137
Feb 14 2016 15:43
@max77p i tried myself, with the smaller column the image isn't pushed down
max77p
@max77p
Feb 14 2016 15:49
@batman137 so i put the sm-6 in each of the col-md-4 section?
F1nches
@F1nches
Feb 14 2016 15:49
Hi guys... Could anyone help me out with the Build a Simon Game project? I think I've made some good progress, but can't quite piece it all together.
batman137
@batman137
Feb 14 2016 15:52
@max77p yes, add col-sm-4 after the md-4 class
Taras Yaremkiv
@Y-Taras
Feb 14 2016 15:54
Hello everyone, please review my code; I'm trying to display a string of data from the openweathermap.org. (It's only alpha version, then I'm going to make it look more informative)
http://codepen.io/Y-Taras/pen/EPrRzN
max77p
@max77p
Feb 14 2016 15:56
@batman137 i swear i did this, but its not working still?
batman137
@batman137
Feb 14 2016 15:57
@max77p the problem is in the about page right?
Joseph Morse
@jnmorse
Feb 14 2016 15:57
@max77p you really need to go through your markup.. bunch of your a tags are missing closing tags in your first section, you don't need to use buttons in your links either, can just assign the btn classes to the links, I'm trying to clean it up a bit just to figure out where the problem with that section is exactly
max77p
@max77p
Feb 14 2016 15:57
@batman137 yes
@jnmorse yea you are right, i have been working on that last night and now..trying to clean stuff up....i justt fixed the part the page is pushed left a bit, now this stuff lol
@jnmorse tried to label the closing tags as much so i know where they are coming from
batman137
@batman137
Feb 14 2016 16:02
@max77p it kind of worked for me...
http://codepen.io/batman137/pen/vLbqEj
max77p
@max77p
Feb 14 2016 16:02
@batman137 @jnmorse i just figured something out too, the 2nd row was inside the first row
i separated the two and now its below properly
just some alignment to do now i think
Doandes Razvan
@Fuzyon
Feb 14 2016 16:12
This message was deleted
How would I go about selecting the country key in this json?
{"coord":{"lon":138.93,"lat":34.97},"weather":[{"id":502,"main":"Rain","description":"heavy intensity rain","icon":"10n"}],"base":"cmc stations","main":{"temp":289.194,"pressure":1006.99,"humidity":91,"temp_min":289.194,"temp_max":289.194,"sea_level":1016.36,"grnd_level":1006.99},"wind":{"speed":12.06,"deg":237.5},"rain":{"3h":20.685},"clouds":{"all":32},"dt":1455402700,"sys":{"message":0.0054,"country":"JP","sunrise":1455312746,"sunset":1455351900},"id":1851632,"name":"Shuzenji","cod":200}
Joseph Morse
@jnmorse
Feb 14 2016 16:24
@Fuzyon data.sys.country assuming data is the variable name you assigned it to
Doandes Razvan
@Fuzyon
Feb 14 2016 16:29
thank you @jnmorse
CamperBot
@camperbot
Feb 14 2016 16:29
fuzyon sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 390 | @jnmorse | http://www.freecodecamp.com/jnmorse
Gabriel
@Zera99
Feb 14 2016 16:39
Does anyone have any suggestions to improve my custom CSS skills? Anything I could read or something? Using bootstrap is fine, but doing custom things to tweak, is kind of intimidating, past the font properties and maybe some padding :S
Joseph Morse
@jnmorse
Feb 14 2016 16:40
@max77p this is the fork I made of your project, I think I've largely cleared up what I thought where problems in your html markup http://codepen.io/jnmorse/pen/mVvZOz
Adam Camacho
@Adancode
Feb 14 2016 16:40
@Zera99 , Treehouse is pretty cool for CSS stuff.
Joseph Morse
@jnmorse
Feb 14 2016 16:45
@Zera99 there is a ton of stuff out there on css, bunch of videos on YouTube, https://www.codecademy.com/, just googling will return allot of tutorials and tips and such. Course then there are things like pre-proccessors like LESS, Sass, and Stylus that can be used on Codepen
Gabriel
@Zera99
Feb 14 2016 16:45
Hm, thank you both, @Adancode @jnmorse
CamperBot
@camperbot
Feb 14 2016 16:45
zera99 sends brownie points to @adancode and @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 307 | @adancode | http://www.freecodecamp.com/adancode
:star: 391 | @jnmorse | http://www.freecodecamp.com/jnmorse
Andre Parsons
@Andrparsons
Feb 14 2016 16:47
The example link for the weather app doesn't seem to work properly anymore, is it just me?
Joseph Morse
@jnmorse
Feb 14 2016 16:50
@Andrparsons works for me, but did notice if I had the chrome extension https everywhere it wouldn't for some reason, took me awhile to figure out that was why my own stopped working at some point.
Andre Parsons
@Andrparsons
Feb 14 2016 16:50
hmm
Andre Parsons
@Andrparsons
Feb 14 2016 16:57
looks like my ad blocker was blocking the connection to ipinfo.io which that app seems to need
Joseph Morse
@jnmorse
Feb 14 2016 17:03
@Andrparsons yeah there version uses that to figure out where you are, though it reports the wrong place for me
Nick Burress
@4trio19
Feb 14 2016 17:07
Ugh... Why did they take Camper News out of the Front-End certificate track? Recently finished it and it's probably my best FCC Zipline so far..
:confused:
kirbyedy
@kirbyedy
Feb 14 2016 17:20
@burressdesign well thats life... move on... dont even think about it, the same thing happened to me :)
at least you have one more thing extra in your portfolio ;)
Nick Burress
@4trio19
Feb 14 2016 17:22
for sure @kirbyedy, thanks
CamperBot
@camperbot
Feb 14 2016 17:22
burressdesign sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 464 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
R. E. Daniels
@RDaniels34
Feb 14 2016 17:42
@h4r1m4u Thanks for the links, they really helped!
CamperBot
@camperbot
Feb 14 2016 17:42
rdaniels34 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1397 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
Gabriel
@Zera99
Feb 14 2016 17:55
Does anyone know what the default color is for the navbar-inverse? I'm trying to google it, but all I find is ways to change the color, not what color it actually is by deafult x_x
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:22
@Zera99 i think it’s rgb(51,51,51)
just by inspecting an element that uses the navbar-inverse class
here it’s #222222, which translates to rgb(34,34,34) http://bootstrap3-menu.codedorigin.com/#sthash.lBA8QNHy.dpbs
Gabriel
@Zera99
Feb 14 2016 18:26
Thank you @trueskawka !
CamperBot
@camperbot
Feb 14 2016 18:26
zera99 sends brownie points to @trueskawka :sparkles: :thumbsup: :sparkles:
:star: 449 | @trueskawka | http://www.freecodecamp.com/trueskawka
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:29
but if you inspect the elements here http://www.w3schools.com/bootstrap/bootstrap_navbar.asp it’s rgb(0,0,0) for inactive and rgb(8,8,8) for active link, which would be my best guess :)
Gabriel
@Zera99
Feb 14 2016 18:32
I ended up going with a dark grey color for the background, so that the navbar is visible. (I'm working on the Personal Portfolio challenge
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:32
the easiest way is to use a bootstrap element and then inspect it in dev tools
or read the css source, but with bootstrap it can be longish and confusing
Gabriel
@Zera99
Feb 14 2016 18:33
This is what I have so far, I'm wondering how to make the color for the background + navbar change as I scroll down http://codepen.io/Zera99/full/JGxQXy/
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:34
you could use JS to check height and react accordingly
Gabriel
@Zera99
Feb 14 2016 18:37
That was the idea.. but I need to learn how to check height in JS, as in, which part of the page the user is currently seeing
Manoj Singh
@manojansh
Feb 14 2016 18:37
need help please, my media queries are not working!
anyone?
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:38
what’s the code?
Manoj Singh
@manojansh
Feb 14 2016 18:38

@media only screen and (max-width: 768px) {
.name {
font-size:20px;
}
}

@media only screen and (max-width: 568px) {
.name {
font-size:20px;
}
}

.name{
font-size:800%;
position: absolute;
top: 40%;
left:39%;
color:#F7FE2E;
text-align:center;
font-family:cursive;
}

@trueskawka
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:39
you should put media queries after your initial .name class
CSS is overwriting the previous statements with the last one
so in order for the media queries to work, you first need to declare your main class CSS
then the first media query that is more broad - in this case 768px
and then the most narrow one - 568px
Manoj Singh
@manojansh
Feb 14 2016 18:40
@trueskawka let me try sir
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:41
Manoj Singh
@manojansh
Feb 14 2016 18:41
@trueskawka i feel so stupid, i was stuck here since 3 hrs, and it was such small mistake :(
thanks to yousir... @trueskawka
CamperBot
@camperbot
Feb 14 2016 18:41
manojansh sends brownie points to @trueskawka :sparkles: :thumbsup: :sparkles:
:star: 450 | @trueskawka | http://www.freecodecamp.com/trueskawka
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:42
no worries, you’ll remember it next time :)
also, ma’am would work better ^^
Manoj Singh
@manojansh
Feb 14 2016 18:43
ooops... i am so sorry. ma'am @trueskawka
Alicja Raszkowska
@trueskawka
Feb 14 2016 18:43
;)
Manoj Singh
@manojansh
Feb 14 2016 18:43
@trueskawka mam,, one more thing please
tommy
@tommygebru
Feb 14 2016 18:44
does anyone here use either dribbble or behance ? :smile: I made this today and want to share http://codepen.io/gebrutommy/full/MKLMyK
Manoj Singh
@manojansh
Feb 14 2016 18:44
I am unable to use different fonts, I think i am having problem with importing them, can you please suggest something
@trueskawka
Akash Chavan
@CruiseDevice
Feb 14 2016 18:45
@manojansh What problem are you facing?
Manoj Singh
@manojansh
Feb 14 2016 18:46
@CruiseDevice i dont know how to import different fonts.
Akash Chavan
@CruiseDevice
Feb 14 2016 18:46
@manojansh have you tried google fonts?
Manoj Singh
@manojansh
Feb 14 2016 18:46
No sir, do we need to import them?
@CruiseDevice
Akash Chavan
@CruiseDevice
Feb 14 2016 18:47
@manojansh Yes. It's kind of one line code you get when you select any font from Google Fonts. You can import it in form of html, css or Js. I
Manoj Singh
@manojansh
Feb 14 2016 18:49
Thank you @CruiseDevice I am checking it
CamperBot
@camperbot
Feb 14 2016 18:49
:star: 342 | @cruisedevice | http://www.freecodecamp.com/cruisedevice
manojansh sends brownie points to @cruisedevice :sparkles: :thumbsup: :sparkles:
Akash Chavan
@CruiseDevice
Feb 14 2016 18:49
@manojansh my pleasure, let us know if you face any problem.
Manoj Singh
@manojansh
Feb 14 2016 18:51
@CruiseDevice Thank you sir, it did work, I am so happy :)
CamperBot
@camperbot
Feb 14 2016 18:51
manojansh sends brownie points to @cruisedevice :sparkles: :thumbsup: :sparkles:
:warning: manojansh already gave cruisedevice points
Akash Chavan
@CruiseDevice
Feb 14 2016 18:51
@manojansh :smile:
h4r1m4u
@h4r1m4u
Feb 14 2016 18:56

@h4r1m4u Thanks for the links, they really helped!

@RDaniels34 fantastic. i love it when an answer to one person is helpful to someone else :)

CamperBot
@camperbot
Feb 14 2016 18:56
sorry h4r1m4u, you can't send brownie points to yourself! :sparkles: :sparkles:
:star: 274 | @rdaniels34 | http://www.freecodecamp.com/rdaniels34
h4r1m4u
@h4r1m4u
Feb 14 2016 18:57
@Zera99 for future reference, you can find a lot of the bootstrap CSS defaults on the customize page: http://getbootstrap.com/customize/#navbar
Gabriel
@Zera99
Feb 14 2016 18:58
:O Great. Thanks @h4r1m4u
CamperBot
@camperbot
Feb 14 2016 18:58
zera99 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1398 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
h4r1m4u
@h4r1m4u
Feb 14 2016 18:58
(or you could also inspect the element in your browser with the browser's web tools. it'll show you what styles are applied to the element too)
my pleasure
Casey Heath
@ExhibitArts
Feb 14 2016 19:10
Anyone know how you would go about customizing the style of a JS alert box?
Mark David Teo
@volaix
Feb 14 2016 19:12
help bonfire confirm the ending
CamperBot
@camperbot
Feb 14 2016 19:12
no wiki entry for: bonfire confirm the ending
Mark David Teo
@volaix
Feb 14 2016 19:12
help bonfire
CamperBot
@camperbot
Feb 14 2016 19:12
no wiki entry for: bonfire
Mark David Teo
@volaix
Feb 14 2016 19:12
help confirm the ending
CamperBot
@camperbot
Feb 14 2016 19:12

:point_right: algorithm confirm the ending [wiki]

Explanation:

The function is a whole Boolean operation. You need to return true if the first argument ends with the second argument. This means that for the problem script, it should return true for the end('Bastian', 'n'); case.

:pencil: read more about algorithm confirm the ending on the FCC Wiki

Casey Heath
@ExhibitArts
Feb 14 2016 19:12
@h4r1m4u It says "Stackexchange is currently offline...".
h4r1m4u
@h4r1m4u
Feb 14 2016 19:13
@ExhibitArts yeah, they must be updating the site or something. just give it a moment, it'll be back.
@ExhibitArts you could also use this library and customize it: http://fabien-d.github.io/alertify.js/
Casey Heath
@ExhibitArts
Feb 14 2016 19:28
@h4r1m4u Would anyone be willing to help a newbie out on implementing that alert box library that @h4r1m4u mentioned above?
I'm really not sure how I would go about customizing it.
Gabriel
@Zera99
Feb 14 2016 19:31
Question: http://codepen.io/Zera99/pen/JGxQXy What am I doing wrong? When I click the buttons, it scrolls to the bottom of the element, not the top. Did I miss something?
h4r1m4u
@h4r1m4u
Feb 14 2016 19:32

@ExhibitArts as the instructions say, you have to import the two CSS files into your project (as well as the main JS file):

<!-- include the core styles -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.css" />
<!-- include a theme, can be included into the core instead of 2 separate files -->
<link rel="stylesheet" href="PATH_TO_FILE/alertify.default.css" />

if you want to customize the look, edit the 2nd CSS file (or create a copy, change its name, import that instead and edit that)

@Zera99 it's because you're setting margin:500px; on your divs. change that to height instead and it'll work better
Gabriel
@Zera99
Feb 14 2016 19:36
Hm, Still scrolls to the bottom of the div when I click the button
Joseph Morse
@jnmorse
Feb 14 2016 19:46
@Zera99 it cause you have a fixed nav at the top, if you add some padding to to top of each section it should work
Gabriel
@Zera99
Feb 14 2016 19:47
Ah. Duh, Thanks @jnmorse , @h4r1m4u
CamperBot
@camperbot
Feb 14 2016 19:47
zera99 sends brownie points to @jnmorse and @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: zera99 already gave h4r1m4u points
:star: 392 | @jnmorse | http://www.freecodecamp.com/jnmorse
Gabriel
@Zera99
Feb 14 2016 19:48
A padding of 70px fixed it. Thank you again ^^
Casey Heath
@ExhibitArts
Feb 14 2016 19:51
@h4r1m4u Okay so how do you get the alert dialog to to prompt while the page is loading.?
I'm using this script but it doesn't seem to work. - <script type='text/javascript' src='https://code.jquery.com/jquery-1.12.0.min.js'>
window.onload = function(){ alert("Hi there"));}
</script>
Zerka1982
@Zerka1982
Feb 14 2016 20:00
Hello guys , is anybody have time to look at my code ... I tried to solve a problem since morning ...
for mobile friendly
Casey Heath
@ExhibitArts
Feb 14 2016 20:06
@Zerka1982 I could try.
Zerka1982
@Zerka1982
Feb 14 2016 20:06
please pm so I can explain to you ...
Casey Heath
@ExhibitArts
Feb 14 2016 20:07
@Zerka1982 Wait what language is it? If it's javascript I probably won't be much help
Zerka1982
@Zerka1982
Feb 14 2016 20:08
No
not JavaScript
it is bootstrap
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 20:29
Does anyone know how to speed an embedded Youtube video using JS or HTML ??
Tyler Haas
@tylerthehaas
Feb 14 2016 20:44
like make it play at 1.5x speed?
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 20:54
@haasDev yes
Alex
@Jeckstex
Feb 14 2016 21:22
Hello campers! I am working on the "Build a Random Quote Machine Project". Before starting I was wondering how the hell did the guy get all these quotes from ? Do you have a list somewhere online that you use with Ajax?
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 21:23
@Jeckstex you can create an array of all the quotes you want to include
@Jeckstex then when you click the button randomly display one
Alex
@Jeckstex
Feb 14 2016 21:24
@ZeeMax okay so you mean I get to chose the quotes I want and then use them for my project?
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 21:25
@Jeckstex yeah
@Jeckstex I included 50 of my favorite quotes
Alex
@Jeckstex
Feb 14 2016 21:25
Okay, thank you for your help :smile: @ZeeMax
CamperBot
@camperbot
Feb 14 2016 21:25
jeckstex sends brownie points to @zeemax :sparkles: :thumbsup: :sparkles:
:star: 236 | @zeemax | http://www.freecodecamp.com/zeemax
Nairuz.Abulhul
@nairuzabulhul
Feb 14 2016 21:35
@Jeckstex you welcome
Amir Ghafouri
@amirghafouri
Feb 14 2016 21:48
Could someone take a look at my "Learn More" button. I am very content with it, except after you click the link the text goes back to blue with the underline... tried using :visited and text-decoration:none but couldn't fix it
http://codepen.io/amirghafouri/pen/ZQwJgP
Tyler Haas
@tylerthehaas
Feb 14 2016 21:59
@ZeeMax check this link out. https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/playbackRate . Looks like there is a playback rate property you can set
Gabriel
@Zera99
Feb 14 2016 22:02
Hello.. I still have issues with this: http://codepen.io/Zera99/full/JGxQXy/ The lines I'm using to separate the parts, why are they different, when I'm using page-header class for all?
They're only slightly different.. or am I hallucinating
Filip Kiraa Opálený
@kiraacorsac
Feb 14 2016 22:03
Hello, I have problem with $.getJSON in "Show the Local Weather" zipline. The function $.getJSON want call it's callback function at all - not even the .fail one. Don't mind the hardcoded API string, it's just for easier debbuging.
http://codepen.io/kiraacorsac/pen/ZQwdxe
No "Got JSON" nor "Getting JSON failed" appears.
Filip Kiraa Opálený
@kiraacorsac
Feb 14 2016 22:10
@Zera99 I'm not seeing the difference, could you be more specific about what seems off?
Gabriel
@Zera99
Feb 14 2016 22:12
The first line seems to be.. slightly bolder than the second one
Like if it was 1.25 or 1.50 px, but I can't set that
It's either 1, or 2px
Even if I override page-header bottom-border and set it to 2px, it still looks like the first one is bolder than the second one
I might be wrong, it just looks slightly off to me
Filip Kiraa Opálený
@kiraacorsac
Feb 14 2016 22:16
I went ahead, took a screenshot, and counted the pixels in Paint. Both of them are 2px on my machine. Do the same, maybe yours are really different.
It might be just uneven display backlight or view angle color disortion :)
Gabriel
@Zera99
Feb 14 2016 22:19
Thanks for going through that trouble
It'll just irk me until I'm done I guess
thanks @kiraacorsac (Just for the points :D)
CamperBot
@camperbot
Feb 14 2016 22:21
zera99 sends brownie points to @kiraacorsac :sparkles: :thumbsup: :sparkles:
:star: 238 | @kiraacorsac | http://www.freecodecamp.com/kiraacorsac
Filip Kiraa Opálený
@kiraacorsac
Feb 14 2016 22:21
What the heck are points :D
Kevin Han
@kevhan94
Feb 14 2016 22:29
Hey guys can someone please give me some guidance on this issue
I'm working on the weather App
and after calling the geographical info, is this a valid way to send it to the API?
I pretty much want to update the longitude and latitude field
for the API call
and i'm not sure if thats working correctly
Kevin Han
@kevhan94
Feb 14 2016 22:43
nvm figured it out
Filip Kiraa Opálený
@kiraacorsac
Feb 14 2016 22:51
Turns out my issue is only "local", for others it works fine. I assume some of my chrome extensions is to blame.
can anyone help me get started with turning the JSON data into html? I am lost
How do I access each item?
DJ
@qualitymanifest
Feb 14 2016 23:53
@SusanGrattan try console.log(json). from there, you can get further in using dot notation. let me know if you'd like an example of that
@SusanGrattan i don't see a need for a loop on this one
Alex
@Jeckstex
Feb 14 2016 23:57
Hello Campers! I'am working on the "Build a Random Quote Machine" project. I am trying to put add a quote by pressing the "New Quote" button which should change the quote by: "I'd rather be hated for who I am than loved for who I am not." and the author by:"Kurt Cobain". I used the code from the "Change Text with Click Events" challenge. Could somebody please help me? My pen: http://codepen.io/Jeckstex/pen/YwgzwL
Luke Murray
@vremerz
Feb 14 2016 23:58

hey guys im trying to add a facebook logo to this button, cant seem to get it right? any ideas?

<a href="#" class="btn btn-primary btn-lg" role="button"><i class="fa fa-facebook-square fa-fw"></i>Facebook
</a>