These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Sep 2016
Ambyr
@ambam747
Sep 12 2016 00:07
Hey everybody. I'm making a page on codepen. I have two wells and want them to be one under the other instead of side by side. What should I do differently?
Santiago Fernandez
@sf-jd
Sep 12 2016 00:26
@ambam747 try changing the class to make them full width
or, if you want them to maintain that width, put each of them inside a container that goes full width
on line 70 of your code you can change to col-xs-12 and it will drop the other one down. but it will take the whole width
Ambyr
@ambam747
Sep 12 2016 00:33
This is going in the right direction, thank you @sf-jd! I would like the width of the gray background box to be more narrow. How would I go about doing that? I tried adjusting it in line 66 with no luck
CamperBot
@camperbot
Sep 12 2016 00:33
ambam747 sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 236 | @sf-jd |http://www.freecodecamp.com/sf-jd
Santiago Fernandez
@sf-jd
Sep 12 2016 00:34
uhm you could do <div class="darkgray-background col-xs-8">
again you need to center it as well
Ambyr
@ambam747
Sep 12 2016 00:44
thank you @sf-jd. i can't seem to get it to center.
CamperBot
@camperbot
Sep 12 2016 00:44
:warning: ambam747 already gave sf-jd points
ambam747 sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
Santiago Fernandez
@sf-jd
Sep 12 2016 00:48
@ambam747 http://getbootstrap.com/css/#grid read up on how it works :)
Ambyr
@ambam747
Sep 12 2016 00:51
I'll read up on it, thanks a bunch :)
Santiago Fernandez
@sf-jd
Sep 12 2016 00:52
good luck :)
Daniel Tait
@4xDMG
Sep 12 2016 00:59
Hey guys
Santiago Fernandez
@sf-jd
Sep 12 2016 00:59
hi Dan
Daniel Tait
@4xDMG
Sep 12 2016 01:00
Does anyone know if its possible to make an arch shape using css only?
I want to do it for the buttons on the simon project
Daniel Tait
@4xDMG
Sep 12 2016 01:03
@sf-jd yeah i had a look there but there's no arch :(
Santiago Fernandez
@sf-jd
Sep 12 2016 01:04
aint got to the simon challenge yet, but, are you required to use only css?
cant you use an image asset?
sounds terribly simpler to use an image imo :p style points are a nice tradeoff to get a project done sometimes lol
Daniel Tait
@4xDMG
Sep 12 2016 01:05
@sf-jd nah its not a requirement. i just thought it'd be better to do it that way for simplicity of changing colors when the button is clicked
Santiago Fernandez
@sf-jd
Sep 12 2016 01:06
just have 2 images, youre doing pretty much the same work, swapping the image/swapping the color
Daniel Tait
@4xDMG
Sep 12 2016 01:06
@sf-jd yeah sounds like its gonna be alot harder using css just for the sake of an easy color change lol
Santiago Fernandez
@sf-jd
Sep 12 2016 01:06
if you wanna go nuts, you can have two semicircles with gradients
and play with that
z-index them to the back, have a z-index on top where the events will be logged, and bingo, got yourself an extremely complicated but functional css colored simon :)
can also use this
and overlap a middle circle with a different color, youd fake the arches but youd have them :)
Daniel Tait
@4xDMG
Sep 12 2016 01:10
yeah i was wondering if i could do a quarter circle and use that box shadow attribute. no idea what it does but i saw it mentioned on a similar style shape
Santiago Fernandez
@sf-jd
Sep 12 2016 01:12
i think 4 quarter circles + a smaller radius circle overlapping their centers gets you the basic simon shape.
box-shadow might not be what youre looking for here
Daniel Tait
@4xDMG
Sep 12 2016 01:12
no, doesnt look like thats what box shadow is for lol. yeah id have to go with your solution
Santiago Fernandez
@sf-jd
Sep 12 2016 01:12
most likely not optimal, but you can try n see where it gets you :)
Daniel Tait
@4xDMG
Sep 12 2016 01:14
@sf-jd Thanks for your input :)
CamperBot
@camperbot
Sep 12 2016 01:14
4xdmg sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 237 | @sf-jd |http://www.freecodecamp.com/sf-jd
Santiago Fernandez
@sf-jd
Sep 12 2016 01:15
anytime, i think this will be the path i go down when i get to simon so it helped us both, thank you @4xDMG too :D
CamperBot
@camperbot
Sep 12 2016 01:15
sf-jd sends brownie points to @4xdmg :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @4xdmg |http://www.freecodecamp.com/4xdmg
Daniel Tait
@4xDMG
Sep 12 2016 01:15
where are you up to?
Santiago Fernandez
@sf-jd
Sep 12 2016 01:15
uhm, js objects
never really played much with js before, only html and css. having some fun nights with it
Daniel Tait
@4xDMG
Sep 12 2016 01:17
ah i see. yeah man, coding is so fun/frustrating/rewarding
Santiago Fernandez
@sf-jd
Sep 12 2016 01:19
been a QA for 2 years, its about time i got down to coding
plus, i work at a very interesting place to be in if you know how to talk to computers lol
Daniel Tait
@4xDMG
Sep 12 2016 01:20
oh wow thats awesome!
Santiago Fernandez
@sf-jd
Sep 12 2016 01:20
:D
Daniel Tait
@4xDMG
Sep 12 2016 01:22
are you looking to be a dev or just expanding your knowledge?
or is QA already a dev role?
Ambyr
@ambam747
Sep 12 2016 02:57
I was able to get it centered @sf-jd. :) Thanks again for sharing the resource! http://codepen.io/ambam747/full/EKrJwP/
CamperBot
@camperbot
Sep 12 2016 02:57
ambam747 sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 238 | @sf-jd |http://www.freecodecamp.com/sf-jd
Rabin Shrestha
@jyapujuju
Sep 12 2016 03:19
 var thau;
$.getJSON('http://ipinfo.io', function(data){
   thau=data.city;
  //this will grab city according to my ip
})  
console.log(thau)
Christopher Wilson
@cswilson14
Sep 12 2016 03:36
Hi guys. Is there a way for me to group css for a single class? Right now I have:

`.social-buttons {
font-size: 49px;
}

.social-buttons a:link { color: #fff }
.social-buttons a:visited { color: #aaa }
.social-buttons a:hover { color: #ddd }
.social-buttons a:active { color: #16f }`

oh, i suck at this markdown
can I put the link colorings into the .social-buttons group?

so for example, something like

.social-buttons {
font-size: 49px;
a:link color: #fff
/ etc /
}

Rabin Shrestha
@jyapujuju
Sep 12 2016 03:43
@cswilson14 i dont think you can do that in plain css there are alternative too like sass
.this{
color:black;
}
```css is the markdown
@cswilson14
Darth Skywalker
@adityaparab
Sep 12 2016 03:48
@cswilson14 : No that is not possible. What you've done is correct.
Christopher Wilson
@cswilson14
Sep 12 2016 03:49
ok. thanks @adityaparab
CamperBot
@camperbot
Sep 12 2016 03:49
cswilson14 sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 696 | @adityaparab |http://www.freecodecamp.com/adityaparab
sentedelviento
@sentedelviento
Sep 12 2016 04:49
Hey guys.
Rabin Shrestha
@jyapujuju
Sep 12 2016 04:50
@sentedelviento hi
sentedelviento
@sentedelviento
Sep 12 2016 04:51
I'm trying to figure out why setting a child to absolute, using top/left position, and then setting transform: translate(-50%, -50%) isn't the same as setting the left and top margin to half of the width and height.
in both cases the child is absolute and positioned using top and left. The parent is set to relative positioning.
Rabin Shrestha
@jyapujuju
Sep 12 2016 04:51
@sentedelviento share your coden
codepen
if you look at the class, style-x
I went back and forth between switching out lines 34 & 35.
Rabin Shrestha
@jyapujuju
Sep 12 2016 04:53
@sentedelviento so trying make both transition reach in same time
sentedelviento
@sentedelviento
Sep 12 2016 04:53
No.
Ignore that part.
I want them to be different, I purposely made them different.
The relevant part, is that I don't understand why setting translate(-50%, -50%) is not the same as setting margin-left to half of the width, and margin-top to half of the height.
Oh, I got it.
Rabin Shrestha
@jyapujuju
Sep 12 2016 04:56
@sentedelviento what are you trying to achieve
sentedelviento
@sentedelviento
Sep 12 2016 04:57
What I'm trying to achieve right now is a test, not a final behavior.
I was trying to center 'style-x' to be in the middle of the left half of the box.
But I could do that easily with transform, I just wanted to know why it wasn't the same for setting margins halfway
But I figured out I had to set the margins opposite of the height and width, not the same.
op nevermind
still doesn't work
fml
Adi2Point0
@Adi2Point0
Sep 12 2016 05:11
@sentedelviento Because properties like left/top apply on the actual content box. And margin applies outside of the content box.
on an isolated element, what you're thinking stands true. But you are not considering the other elements from where your padding and margins get inherited.
So in a nested environment (which is always the case) top/left may not be equal to directly applied margin/padding on the same element.
Kleo Pullin
@KleoP
Sep 12 2016 05:18
I am on "build a tribute page," and I am wondering how to upload images to CodePen, or is that possible?
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:19
@KleoP you can't upload . use image link instead
Kleo Pullin
@KleoP
Sep 12 2016 05:19
What image link?
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:20
image >right click >copy image address
@KleoP
Kleo Pullin
@KleoP
Sep 12 2016 05:21
Huh?
Okay, anyway, I can't upload images to codepen. Got it.
Thanks.
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:24
tribute means someone famous you can get image from google @KleoP
use image link which will load faster i guess
Junaidrai
@junaidrai
Sep 12 2016 05:26
guys need help i need my nav menu look like this and cant help me here please :worried:
i wanted to look like this...
Kleo Pullin
@KleoP
Sep 12 2016 05:26
Thanks, Rabin, I want to size and alter images rather than linking to an image that I find online already, so I will host on GitHub or upload my images elsewhere. Still it would have been nicer to use a website that I could just upload the images.
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:27
@KleoP if you have pro a/c you can use assest feature
@KleoP how about width and height in css
vínαч puppαl
@vinaypuppal
Sep 12 2016 05:29
@KleoP upload images to dropbox and use that URL in codepen or try some cloud service like http://cloudinary.com
Junaidrai
@junaidrai
Sep 12 2016 05:29
help someone :fire:
CamperBot
@camperbot
Sep 12 2016 05:29
no wiki entry for: someone fire
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:30
@junaidrai what is your problem . can you elaborate
if you need font use google font
@junaidrai see he has used js also ..https://codepen.io/FreeCodeCamp/pen/YqLyXB
Junaidrai
@junaidrai
Sep 12 2016 05:32
dont know what he use cant look at code :P rule no 1
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:32
:D
Junaidrai
@junaidrai
Sep 12 2016 05:32
so help me get the right nav menu right
it just not coming in little bit left like this one
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:36
@junaidrai first of all maintain the link ..css issues can be solved later i guess... but its all upto you
Junaidrai
@junaidrai
Sep 12 2016 05:36
i use float right... but then i want it in a little bit left but it just ruin it
sorry about the english @jyapujuju
vínαч puppαl
@vinaypuppal
Sep 12 2016 05:38
@junaidrai checkout bootstrap navbar component http://getbootstrap.com/components/#navbar
in that you can use navbar-component-alignment to bring links to right side and brand image to left http://getbootstrap.com/components/#navbar-component-alignment
Rabin Shrestha
@jyapujuju
Sep 12 2016 05:39
@junaidrai decrease margin-left
@junaidrai     margin-left: 300px;
@junaidrai line no 27
Kleo Pullin
@KleoP
Sep 12 2016 06:06
Thanks @vinaypuppal I will just upload them to one of my websites. I had not thought of dropbox. Maybe I will try that.
CamperBot
@camperbot
Sep 12 2016 06:06
kleop sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 498 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Amit Patel
@AmitP88
Sep 12 2016 07:19
hey guys, just had a quick question: Would it be considered bad if I had too many commits on a repo? I'm working on a portfolio site here https://amitp88.github.io/New-Portfolio/ and I already have 100 commits on my repo O_O
Adi2Point0
@Adi2Point0
Sep 12 2016 08:06
@AmitP88 What matters is if someone checks out your repo and it works
Number of commits should be of no concern.
Amit Patel
@AmitP88
Sep 12 2016 08:07
@Adi2Point0 ah ok
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:11
How can i synchronize the session timer with the timer on my screen in pomodoro clock?
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:13
@AmitP88 I really like your site amid
Amit Patel
@AmitP88
Sep 12 2016 08:15
@1moosey1 I dunno, I've been told that it's pretty bad. dunno if I should scrap it or not
Adi2Point0
@Adi2Point0
Sep 12 2016 08:16
@AmitP88 : It's a unique idea. I like the idea. With small bit of alignment fixes, it would look pretty rad!
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:17
@AmitP88 I don't think it is pretty bad. I like it :) and yeah I agree with @Adi2Point0 it could use some alignment fixes
Amit Patel
@AmitP88
Sep 12 2016 08:18
oh yeah, it's not finished yet. I just got done implementing the features I wanted
I was gonna start cleaning up the layouts starting from the smallest screensize, but I dunno now
I may have to start over and do something simpler
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:19
@AmitP88 I'd keep at it man! I'd love to see it after you have it finished.
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:21
How can i synchronize the session timer with the timer on my screen in pomodoro clock?
@1moosey1 @AmitP88
Aiach
@Aiach
Sep 12 2016 08:22
Hey guys, i'm now workin' at my Personal Portfolio Webpage
and i don't know any kind of js
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:22
@MohammadHasham I am not quite sure what you mean. If you link your pen ill check it out though
Aiach
@Aiach
Sep 12 2016 08:22
so what i have to do?
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:22
@Aiach I didnt know any before starting either. For the personal webpage you dont need to use any js
Aiach
@Aiach
Sep 12 2016 08:23
But, for those navbar and any sh*t like that
i ain't learnded that yet
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:23
@Aiach What I did I was google bootstrap navbar and there are a ton of examples on it. Trust me you can do it
Aiach
@Aiach
Sep 12 2016 08:24
Ok thx! dude
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:24
http://codepen.io/Mohammad_Hasham/pen/PGwkwo
@1moosey1
when i change the session length my timer on screen doesn't change with it
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:24
@Aiach If you need any help maybe I can help you out :D
@MohammadHasham Ill check it out right now
Aiach
@Aiach
Sep 12 2016 08:25
Oki
So you need to have some buttons who scroll to the bottom or top
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:25
@1moosey1 :smile:
Aiach
@Aiach
Sep 12 2016 08:25
How i will do that :(
@Aiach it's actually pretty simply you still use <a> tags. Check out the article
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:28
@1moosey1 any idea how can i do that?
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:29
@MohammadHasham give me another minute got distracted reading it now
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:34
@MohammadHasham you still here
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:34
@1moosey1 Yeah trying my best to figure out but i am nowhere
i really don't know how to do this
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:35
@MohammadHasham so when you click the plus on the session length you want the big number in the middle ot change with it?
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:35
Yeah!
Thats what i want
@1moosey1
Mohit Sharma
@xxholyChalicexx
Sep 12 2016 08:38
This message was deleted
This message was deleted
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:39
@MohammadHasham
 $(".addsession").click(function(){  
   sessionVal++;
   $(".snum").html(sessionVal);
   $("#value").html(sessionVal);
});
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:40
should i add this?
and where shall i add this?
@1moosey1
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:41
so all I did was edit your addsession.click piece
notice you were using your breakVal instead of your sessionVal. Also if all you wanted was to change the big number as well with your small num you just needed $("#value").html(sessionVal);
Mohit Sharma
@xxholyChalicexx
Sep 12 2016 08:42
@sorinr thnx man (y)
CamperBot
@camperbot
Sep 12 2016 08:42
xxholychalicexx sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 694 | @sorinr |http://www.freecodecamp.com/sorinr
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:42
@1moosey1 it is not working
i have understood the logic but still the problem is same
Mohit Sharma
@xxholyChalicexx
Sep 12 2016 08:43
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:43
it working just fine for me
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:43
have you forked my pen?
can you show that to me?
@1moosey1
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:44
that is the fork
try it out
@xxholyChalicexx it says gotC is undefined because it hasnt been assigned a value
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:45
Not working man! i am really worried :worried:
@1moosey1
Mohit Sharma
@xxholyChalicexx
Sep 12 2016 08:46
@1moosey1 .... but i have assigned it inside a function.......
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:46
my forked version is not working?
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:46
Yeah!
i dont know wh
y
Adetayo Timilehin
@Sprimage
Sep 12 2016 08:46
Hi everyone
Muhammad Hasham
@MohammadHasham
Sep 12 2016 08:46
WORKING NOW
AWESOME
THANKS MAAN
@1moosey1
Thanks a
@1moosey1 Thanks
CamperBot
@camperbot
Sep 12 2016 08:47
mohammadhasham sends brownie points to @1moosey1 :sparkles: :thumbsup: :sparkles:
:cookie: 304 | @1moosey1 |http://www.freecodecamp.com/1moosey1
Adetayo Timilehin
@Sprimage
Sep 12 2016 08:47
Please i need help with my tribute page
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:47
@xxholyChalicexx
jquery.getJSON('link', function() {

});
Adetayo Timilehin
@Sprimage
Sep 12 2016 08:48
Im trying to add boostrap togglable tabs, but it seems bootstrap.min.js is not working on code pen
can anybody help me?
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:50
@MohammadHasham hopefully you have an idea of what I did and why I did it
Mohit Sharma
@xxholyChalicexx
Sep 12 2016 08:54
This message was deleted
This message was deleted
This message was deleted
Juan Gonzalez Jr.
@1moosey1
Sep 12 2016 08:55
@xxholyChalicexx why delete
Mohit Sharma
@xxholyChalicexx
Sep 12 2016 08:56
@1moosey1 i realised even its not working normally
i mean even without nesting not working
ill fix that first....
@1moosey1 i guess i needed to do this: $.getJSON('//link',function)....... that (//) before link...so its working.....(y)
@1moosey1 (y)
Muhammad Hasham
@MohammadHasham
Sep 12 2016 09:14
@1moosey1 can you tell me why is my timer starting always from 25 even when i change thhe session timer's value?
Ngaosathe
@ThekhoN
Sep 12 2016 09:55
Hi anyone know if there is node-sass extension for http://breakpoint-sass.com/
Alexander Domikov
@AlexanderDom
Sep 12 2016 11:51
@ThekhoN here
Evan Davis
@davisec52
Sep 12 2016 11:53
@MohammadHasham Hi. It is starting at the correct time for me.
Muhammad Hasham
@MohammadHasham
Sep 12 2016 11:56
Please give a critique your feedback is highly appreciated.
http://codepen.io/Mohammad_Hasham/full/PGwkwo/
greg
@wearenotgroot
Sep 12 2016 11:57
@MohammadHasham make sure that the user cant set the session time to be below 1 min(right now it goes to negative numbers)
Muhammad Hasham
@MohammadHasham
Sep 12 2016 11:57
@wearenotgroot Okay
how can i disable that
greg
@wearenotgroot
Sep 12 2016 11:58

@MohammadHasham some form of if test

if(sessionVal > 1) session--;

in here

$("#delsession").click(function(){
   sessionVal--; //<-------put an if test sessionVal > 1
   $("#snum").html(sessionVal);
    $("#value1").html(sessionVal);
     countdown = sessionVal *60 + 59;
});

only let it decrease if it is greater than 1

Alexander Domikov
@AlexanderDom
Sep 12 2016 11:58
@MohammadHasham your session is one minute plus than indicated time, what i mean is if it's 25 your timer starts at 25.59
and it's same for each case
Muhammad Hasham
@MohammadHasham
Sep 12 2016 11:59
@AlexanderDom how can i make that correct
Alexander Domikov
@AlexanderDom
Sep 12 2016 12:00
i don't know how you coded it (i'm at same exercice and don't want to cheat :) )
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:00
Done that please check now
Alexander Domikov
@AlexanderDom
Sep 12 2016 12:00
better :)
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:00
@AlexanderDom Thanks
CamperBot
@camperbot
Sep 12 2016 12:00
mohammadhasham sends brownie points to @alexanderdom :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Sep 12 2016 12:01
just little design opinion you can perhaps add some margin-bottom at your timer same than at the top, just my opinion ;)
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:01
yeah i'll add some
thanks again
greg
@wearenotgroot
Sep 12 2016 12:02
@MohammadHasham :point_up: September 12, 2016 1:58 PM
do the same for breakVal
Alexander Domikov
@AlexanderDom
Sep 12 2016 12:02
:) you're welcome
i don't even start my js >< http://codepen.io/AlexanderDom/pen/ALAGoo
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:05
Thanks @wearenotgroot
CamperBot
@camperbot
Sep 12 2016 12:05
mohammadhasham sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1637 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:05
Can you tell me how can i put two zeros
@wearenotgroot
greg
@wearenotgroot
Sep 12 2016 12:06
@MohammadHasham you can make a general displayFormat function. it will take in an arguments in seconds. then it just convert it to hour, mins and seconds
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:06
Okay
greg
@wearenotgroot
Sep 12 2016 12:07
@MohammadHasham i'll send you the code in pm, if you want
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:08
Yes if possible :smile:
@wearenotgroot
greg
@wearenotgroot
Sep 12 2016 12:09
@MohammadHasham :+1: but in general you just have an if or a ternary like
(hour < 10) ? '0' + hour : hour;
Muhammad Hasham
@MohammadHasham
Sep 12 2016 12:10
but where shall i add that
i have understood that condition but where shall i add that
@wearenotgroot
Irina
@2Irina2
Sep 12 2016 12:30
Hello there!
This may sound very stupid but..
how do i make the header's background transparent? :|
greg
@wearenotgroot
Sep 12 2016 12:36
@2Irina2 you can play aroung with the opacity or set the background-color: rgba(0,0,0,0.5) (r= red, b=blue, g=green and the last one is alpha - determines the opacity)
Irina
@2Irina2
Sep 12 2016 12:38
yeah but suppose i change the background to red, i get this white border around the header
i just want to get rid of the wite rectangle and have the text only
greg
@wearenotgroot
Sep 12 2016 12:40
@2Irina2 try changing the margin to 0
Irina
@2Irina2
Sep 12 2016 12:41
@wearenotgroot that did it..to some extent.. just removed some white from the top and bottom.. but the rectangle still stays
check my css.. i typed in
html{
background: #6441a5;
}
if i replace html with body, the rectangle (the header background) goes away
why
ShiningSoldier
@ShiningSoldier
Sep 12 2016 12:47
@2Irina2 maybe it's a bug? Because when I copy your code to my pen, white rectangle disappears
greg
@wearenotgroot
Sep 12 2016 12:47
@2Irina2 you can try
body, html{
  width:100%;
  height:100%;
}

body > div{

  background: #6441a5;
  padding:0px!important;
  height:100%;
}

.header{
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 50px;
  margin: 0px!important;
  background: rgba(76, 175, 80, 0.3);
}
greg
@wearenotgroot
Sep 12 2016 12:49
@ShiningSoldier it's because of the bootstrap class container fluid
ShiningSoldier
@ShiningSoldier
Sep 12 2016 12:50
@wearenotgroot ah thanks, I understood
CamperBot
@camperbot
Sep 12 2016 12:50
shiningsoldier sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1639 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Sep 12 2016 12:53

@2Irina2 i dont usually add styling to the hmtl and body itself. what i do is just make a main div that will hold the content

<div class="content">
  <div class = "container-fluid">
    <h1 class = "header">Twitch streamers</h1>
  </div>
</div>

then on the css

body, html{
  width:100%;
  height:100%;
}

.content{
  height:100%;
  width:100%;
  background: #6441a5;
}

.header{
  text-align: center;
  font-family: 'VT323', monospace;
  font-size: 50px;
}
Irina
@2Irina2
Sep 12 2016 12:54
@wearenotgroot ooohhh i understand... that makes more sense actually.. thank you
CamperBot
@camperbot
Sep 12 2016 12:54
2irina2 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1640 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Irina
@2Irina2
Sep 12 2016 12:54
@wearenotgroot but doesn't everything have to be nested into a container-fluid div to be mobile friendly?
greg
@wearenotgroot
Sep 12 2016 12:55
@2Irina2 well first div will be set to 100% height and width. then you can just nest other div to it
ShiningSoldier
@ShiningSoldier
Sep 12 2016 12:56
Can't understand what is the "user story" that I must fulfill in the "Build a Tribute Page" task. Do I need to write it on my tribute page or somewhere else?
Irina
@2Irina2
Sep 12 2016 12:56
@wearenotgroot i understand... thanks again :)
CamperBot
@camperbot
Sep 12 2016 12:56
2irina2 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: 2irina2 already gave wearenotgroot points
greg
@wearenotgroot
Sep 12 2016 12:57
@ShiningSoldier user story are just the required feature or action that the user can do on your page.
ShiningSoldier
@ShiningSoldier
Sep 12 2016 12:58
@wearenotgroot so I need to write it on my page?
vaso
@vasokir
Sep 12 2016 12:58
so silly question but i'm trying to create the tribute page at codepen ,when i go back to add something it erases the next one how can i fix it?
greg
@wearenotgroot
Sep 12 2016 12:58
@ShiningSoldier yes it must be implemented on the page(those are minimum requirement) feel free to add more feature :)
ShiningSoldier
@ShiningSoldier
Sep 12 2016 12:58
@wearenotgroot thanks
CamperBot
@camperbot
Sep 12 2016 12:58
shiningsoldier sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: shiningsoldier already gave wearenotgroot points
ShiningSoldier
@ShiningSoldier
Sep 12 2016 12:59
@vaso maybe you have the "insert" button pressed on your keyboard?
vaso
@vasokir
Sep 12 2016 13:06
@ShiningSoldier maybe!i'll chack it thanks
CamperBot
@camperbot
Sep 12 2016 13:06
vasokir sends brownie points to @shiningsoldier :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @shiningsoldier |http://www.freecodecamp.com/shiningsoldier
Irina
@2Irina2
Sep 12 2016 13:41

Now i have a similar problem with the buttons on the side

http://codepen.io/2Irina2/pen/ORyKOY?editors=1100

when you hover on them, the whole width is supposed to change background color
instead, i get these darker purple sections on the sides that wouldn't change color
will zhou
@zhoulinux
Sep 12 2016 14:22
I am working on Build a Wikipedia Viewer and eager to know how to show the icon and transform it.
Hassen Rmili
@hassenrmili
Sep 12 2016 14:22
@zhoulinux icon ???
primeministerPL
@primeministerPL
Sep 12 2016 14:47
@2Irina2 maybe you should use table to achieve desired effect ?
@2Irina2 and simply change a row background color
Irina
@2Irina2
Sep 12 2016 14:49
@primeministerPL thanks, but i already fixed it :) i just had to add padding:0 to te .buttons class
CamperBot
@camperbot
Sep 12 2016 14:49
2irina2 sends brownie points to @primeministerpl :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for primeministerpl
Irina
@2Irina2
Sep 12 2016 14:50
I would have chosen a table if the buttons were displayed on a row, and not coloumn
because with tables, you elements are added from left to right not from top to bottom
primeministerPL
@primeministerPL
Sep 12 2016 14:51
yes, but you have corelated data name - value and this is the best way to do this, I think
if you start with js you can add your name - value pairs from the top to the bottom
At the start you'll render a header and later rest of the table (row by row)
Lidia Wisniewska
@lidiawisniewska
Sep 12 2016 14:53
can someone help with bootstrap toggle?
having issues with js
Tyler Moeller
@TylerMoeller
Sep 12 2016 15:24
@lidiawisniewska The click function will have to trigger off the label instead of the input.
    <label id="convert">
      <input .........>
    </label>
    $("#convert").on('click', function(){
      if($("#temperature").html() == tempF) {
        $("#temperature").html(tempC); 
      } else {
        $("#temperature").html(tempF)
      }
    });
Lidia Wisniewska
@lidiawisniewska
Sep 12 2016 15:33
@TylerMoeller wouldnt figure this out myself thanks! :)
CamperBot
@camperbot
Sep 12 2016 15:33
lidiawisniewska sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 820 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Benjamin McFerren
@mcferren
Sep 12 2016 15:39
I am trying to resize font-size of an em depending on the size of its parent li. When I try vw is changes based on the size of the browser window instead of contingent upon the size of the parent li. The parent li is position relative and the child em is position absolute
very grateful for help you could share
Muhammad Hasham
@MohammadHasham
Sep 12 2016 15:41
I have tried using function but all in vain can anyone help me in adding zero when the value reaches 10 or less than 10 ? if anyone could fork my pen and show me implementing i'll be really grateful
@TylerMoeller
Stephen Passero
@stephenpassero
Sep 12 2016 15:47
Why isn't this code adding a skycon to the webpage. Here's the link. https://codepen.io/stephenpassero/pen/YGzwOq. Check the JS.
Gaston Lenotre
@GLenotre
Sep 12 2016 15:54
Is it possible to toggle ajax requests? I want to toggle the ajax request to the weather API between units: "metric" and units:"imperial"
greg
@wearenotgroot
Sep 12 2016 15:59
@GLenotre what api are you using?
@GLenotre if it is openweather you can add a api url parameter to &units=metric or to imperial. then just have a function that converts
TrayBanks
@TrayBanks
Sep 12 2016 16:01
Hey guys, I am almost finished with the second project on FCC: personal portfolio page, but Im not sure why my images aren't centering and also why they are not organized horizontally instead of vertically. If so some could help me out so that I can finish it up that would be greatly appreciated.
http://codepen.io/TrayBanks/pen/NRKvGg
Gaston Lenotre
@GLenotre
Sep 12 2016 16:08
@wearenotgroot Right, I'm using openweather
@wearenotgroot It sounds like you're saying I can't toggle the request itself. I have to convert it once I've received the data.
greg
@wearenotgroot
Sep 12 2016 16:11
@GLenotre well whatever you specify in the url will be your default unit either metric or imperial, then just make a function that converts to another unit of measurement. If you dont specify the units on the url the data you'll receive will be in "SI units" (Standard). temp in Kelvin
Gaston Lenotre
@GLenotre
Sep 12 2016 16:13
@wearenotgroot right. thanks
CamperBot
@camperbot
Sep 12 2016 16:13
glenotre sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star2: 1641 | @wearenotgroot |http://www.freecodecamp.com/wearenotgroot
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:14
I'm on the portfolio page project, but having a little trouble. If someone could point me in the right direction I would appreciate it, I've searched all over the web.
My problem is.....

after putting together my nav bar with this html:<div class="container-fluid">
<header>
<nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-header navbar-right">
<ul class="nav navbar-nav">
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<a class="navbar-brand" href="#"><b><sup>Nate</sup><sub>DeBenedetti</sub></b></a>
</nav>
</header>

</div>

and this css: .navbar-nav {
height: 100px;
padding: 20px;
font-family: Monospace;
font-size: 25px;
}
I'm unable to get anything else to build on the page
what am i doing wrong?
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:19
@MohammadHasham Detect if minutes or seconds are below zero and prepend a 0 to the text before displaying it to the page:
    if (Math.floor(countdown / 60) < 10) {
      $("#value1").html('0' + Math.floor(countdown / 60).toString());
    } else {
      $("#value1").html(Math.floor(countdown / 60));
    }
Joffrey Nolting
@Yovvel
Sep 12 2016 16:19
@ndebenedetti can you send me your codepen link?
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:20
Joffrey Nolting
@Yovvel
Sep 12 2016 16:21
thanks. one sec please
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:21
whats wrong @ndebenedetti ?
@ndebenedetti it's not that its not working
its your nav
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:22
@stephenpassero You need to add the <canvas> element with the correct ID to display the icon, for example:
<canvas id="cloudy" width="128" height="128"></canvas>
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:22
I can't figure out why I can't add any other content below my navbar
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:22
it takes 100px high and its with position:fixed
so basicly you need
a margin-top of 100px after nav
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:24
I'm not sure I completely follow you.... sorry I'm a nube.... after my nav I would need to do what?
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:25
try this
.navbar-nav {
  height: 100px;
  padding: 20px;
  font-family: Monospace;
  font-size: 25px;
}
.test {
  margin-top: 100px;
  height: 40px;
  background-color: green;
}
<div class="container-fluid">
 <header>
   <nav role="navigation" class="navbar navbar-inverse navbar-fixed-top">
     <div class="navbar-header navbar-right">
      <ul class="nav navbar-nav">
      <li><a href="#">About</a></li>
      <li><a href="#">Portfolio</a></li>
      <li><a href="#">Contact</a></li>
      </ul>
    </div>
     <a class="navbar-brand" href="#"><b><sup>Nate</sup><sub>DeBenedetti</sub></b></a> 
   </nav>
  </header>
 <div class="test"></div>

</div>
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:25
ok i will thank you
TrayBanks
@TrayBanks
Sep 12 2016 16:25
Hey guys how do you link your nav bar to the specific points on my page?
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:25
can you explain what the .test is for though?
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:25
@ndebenedetti Bootstrap's fixed navbar requires padding added to the top of your body:
body {
  padding-top: 140px;
}
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:25
your nav has position:fixed so he is out of "flow" of content @ndebenedetti
Salomon
@zarruk
Sep 12 2016 16:25
Hello. Could someone help me finding why my code doesnt work in this challenge?
https://www.freecodecamp.com/challenges/profile-lookup#?solution=%0A%2F%2FSetup%0Avar%20contacts%20%3D%20%5B%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22firstName%22%3A%20%22Akira%22%2C%0A%20%20%20%20%20%20%20%20%22lastName%22%3A%20%22Laine%22%2C%0A%20%20%20%20%20%20%20%20%22number%22%3A%20%220543236543%22%2C%0A%20%20%20%20%20%20%20%20%22likes%22%3A%20%5B%22Pizza%22%2C%20%22Coding%22%2C%20%22Brownie%20Points%22%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22firstName%22%3A%20%22Harry%22%2C%0A%20%20%20%20%20%20%20%20%22lastName%22%3A%20%22Potter%22%2C%0A%20%20%20%20%20%20%20%20%22number%22%3A%20%220994372684%22%2C%0A%20%20%20%20%20%20%20%20%22likes%22%3A%20%5B%22Hogwarts%22%2C%20%22Magic%22%2C%20%22Hagrid%22%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22firstName%22%3A%20%22Sherlock%22%2C%0A%20%20%20%20%20%20%20%20%22lastName%22%3A%20%22Holmes%22%2C%0A%20%20%20%20%20%20%20%20%22number%22%3A%20%220487345643%22%2C%0A%20%20%20%20%20%20%20%20%22likes%22%3A%20%5B%22Intriguing%20Cases%22%2C%20%22Violin%22%5D%0A%20%20%20%20%7D%2C%0A%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%22firstName%22%3A%20%22Kristian%22%2C%0A%20%20%20%20%20%20%20%20%22lastName%22%3A%20%22Vos%22%2C%0A%20%20%20%20%20%20%20%20%22number%22%3A%20%22unknown%22%2C%0A%20%20%20%20%20%20%20%20%22likes%22%3A%20%5B%22Javascript%22%2C%20%22Gaming%22%2C%20%22Foxes%22%5D%0A%20%20%20%20%7D%0A%5D%3B%0A%0A%0Afunction%20lookUpProfile(firstName%2C%20prop)%7B%0A%2F%2F%20Only%20change%20code%20below%20this%20line%0A%20%20for%20(var%20i%20%3D%200%3B%20i%20%3C%20contacts.length%3B%20i%2B%2B)%7B%0A%20%20%20%20if%20(contacts%5Bi%5D%5B%22firstName%22%5D%20%3D%3D%20firstName)%20%7B%0A%20%20%20%20%20%20if%20(contacts%5Bi%5D.hasOwnProperty(prop))%7B%0A%20%20%20%20%20%20%20%20%20%20return%20contacts%5Bi%5D%5Bprop%5D%3B%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20else%20return%20%22No%20such%20property%22%3B%0A%20%20%20%20%7D%0A%20%20%20%20else%20return%20%22No%20such%20contact%22%3B%0A%20%20%7D%0A%2F%2F%20Only%20change%20code%20above%20this%20line%0A%7D%0A%2F%2F%20Change%20these%20values%20to%20test%20your%20function%0AlookUpProfile(%22Harry%22%2C%22likes%22)%3B%0A
Joffrey Nolting
@Yovvel
Sep 12 2016 16:25
@ndebenedetti look at the answer of @AlexanderDom
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:26
that way i understand so that when i run into this problem again i will be able to work my way out of it.
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:26
@ndebenedetti test div it's just a div with class test to show you
that content is visible
Joffrey Nolting
@Yovvel
Sep 12 2016 16:27
@TrayBanks use id's in your page and place the same id name in the link
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:27
and it has margin-top: 100px - 100px it's height of your nav
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:28
so it's just a tag to assign the margin-top to so that I can start building the rest of the page?
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:28
you need to add that to direct next element to content be visible after nav or it gonna be under the nav, because of position:fixed
TrayBanks
@TrayBanks
Sep 12 2016 16:28
@Yovvel can you show me how to set that up?
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:28
@ndebenedetti yes you can use any class or other attribute that you want
Joffrey Nolting
@Yovvel
Sep 12 2016 16:28
@TrayBanks ```
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:28
@AlexanderDom @Yovvel Make sure you guide @ndebenedetti according to the bootstrap docs. Body padding is required for the bootstrap fixed navbar: https://getbootstrap.com/components/#navbar-fixed-top
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:29
ok thanks.... I'm not as dumb as I sound... I've just worked myself in circles so much the past couple of days that I lost myself somewhere lol
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:29
@TylerMoeller yes you're right
Joffrey Nolting
@Yovvel
Sep 12 2016 16:29
@TrayBanks
<a href="#about">someText</a>
<div id="about">
Nate DeBenedetti
@ndebenedetti
Sep 12 2016 16:30
@TylerMoeller @AlexanderDom @Yovvel thank you all for your guidance
CamperBot
@camperbot
Sep 12 2016 16:30
ndebenedetti sends brownie points to @tylermoeller and @alexanderdom and @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @yovvel |http://www.freecodecamp.com/yovvel
:cookie: 821 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 383 | @alexanderdom |http://www.freecodecamp.com/alexanderdom
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:30
@ndebenedetti never say again that you're numb, we all passed there, no one knows everything from begining :)
Joffrey Nolting
@Yovvel
Sep 12 2016 16:30
@ndebenedetti np haven't done much.. :P
@ndebenedetti had the same problem you had once :P
@TylerMoeller thanks! didn't know that..
CamperBot
@camperbot
Sep 12 2016 16:31
yovvel sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 822 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:31
yes @ndebenedetti it's good idea to read documentation of bootstrap class that you use like @TylerMoeller said
but in you case it's more than 70px but it's ok :)
they don't explain, why it's overlay by the way :angel:
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:33

Yeah, default navbar is 50px high. You made it 100px high with 20px of padding, so 70px more than default. body padding should be 140px to accommodate.

Body padding required
The fixed navbar will overlay your other content, unless you add padding to the top of the <body>. Try out your own values or use our snippet below. Tip: By default, the navbar is 50px high.

TrayBanks
@TrayBanks
Sep 12 2016 16:33
@Yovvel thank
CamperBot
@camperbot
Sep 12 2016 16:33
traybanks sends brownie points to @yovvel :sparkles: :thumbsup: :sparkles:
:cookie: 337 | @yovvel |http://www.freecodecamp.com/yovvel
Joffrey Nolting
@Yovvel
Sep 12 2016 16:34
@TrayBanks np
Alexander Domikov
@AlexanderDom
Sep 12 2016 16:34
@TylerMoeller 121px for me 100px of height and 1px border and 20px margin just saying :)
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:34
lol :)
@zarruk Move your final return to the end of the function:
function lookUpProfile(firstName, prop){
// Only change code below this line
  for (var i = 0; i < contacts.length; i++){
    if (contacts[i]["firstName"] == firstName) {
      if (contacts[i].hasOwnProperty(prop)){
          return contacts[i][prop];
      }
      else return "No such property";
    }
  }
  return "No such contact";
// Only change code above this line
}
Salomon
@zarruk
Sep 12 2016 16:41
@TylerMoeller Oh great!!!
@TylerMoeller Thanks
CamperBot
@camperbot
Sep 12 2016 16:41
zarruk sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 823 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
TrayBanks
@TrayBanks
Sep 12 2016 16:44
can someone help me resize this image in my code to match the others?
http://codepen.io/TrayBanks/full/NRKvGg/
Harry Adel
@harryadel
Sep 12 2016 16:47
@TrayBanks which image are you pointing to?
oh your tribute image, sorry
I'll see what I can do, lemme fork it first
Sorin Ruse
@sorinr
Sep 12 2016 16:50
@TrayBanks try to add to .img-responsive: min-height: 261px;
Harry Adel
@harryadel
Sep 12 2016 16:52
@TrayBanks
#tribute {
  height: 260px;
}
or better yet use min-height just like @sorinr suggested
TrayBanks
@TrayBanks
Sep 12 2016 16:54
where should I place it?
@Harry97
Harry Adel
@harryadel
Sep 12 2016 16:54
Why does my code fail to insert the computer symbol on line 56 of my code?
http://codepen.io/Hadouken/pen/PGPpNL?editors=1010
@TrayBanks
<img class="img-responsive" src="https://s14.postimg.io/av1qvqb7z/port_1.jpg" alt=null id="tribute">
TrayBanks
@TrayBanks
Sep 12 2016 16:55
didn't work @Harry97 it should be in css right?
Harry Adel
@harryadel
Sep 12 2016 16:55
yeah
@TrayBanks just make sure to attach the id first
in order for the css to be applied to it
TrayBanks
@TrayBanks
Sep 12 2016 16:56
@Harry97 It worked thanks so much!
CamperBot
@camperbot
Sep 12 2016 16:56
traybanks sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 12 2016 16:57
@TrayBanks yw ^^
Tyler Moeller
@TylerMoeller
Sep 12 2016 16:58
@Harry97 Add the # for the id: $('#' + item).text(comptrSym);
Drego
@dregothedoge
Sep 12 2016 16:59
Hey - is anybody acquainted with flexboxes? Aiming to keep the top 3 divs next to each other and covering 33% of the screen at all times - and nearly got that done, except for the picture in the middle scales down on a certain high res - any ideas? http://codepen.io/dregothedoge/pen/LRpNbo?editors=1100
Harry Adel
@harryadel
Sep 12 2016 16:59
@TylerMoeller shit how come could I forget such a thing :D thank you
CamperBot
@camperbot
Sep 12 2016 16:59
harry97 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
TrayBanks
@TrayBanks
Sep 12 2016 16:59
Hey guys I have completed my personal portfolio and I would greatly appreciate it if you guys could give me some feedback and advice on how to improve it in the future or how to create more organized code. Thanks in advance
http://codepen.io/TrayBanks/full/NRKvGg/
CamperBot
@camperbot
Sep 12 2016 17:00
:cookie: 824 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Sep 12 2016 17:00
Lol, helps to have multiple eyes looking at code
Harry Adel
@harryadel
Sep 12 2016 17:03
@TrayBanks It looks pretty, I like the font and background image, but it'd be nice to remove opacity from your projects images
and nice job on the responsiveness :+1:
"Trayvon Banks" is out of place tho, when I resize the window
Benjamin McFerren
@mcferren
Sep 12 2016 17:11
what css options are there to scale font-size relative to the width of the parent container?
Harry Adel
@harryadel
Sep 12 2016 17:14
@mcferren I guess "em"
@mcferren check this link, it might help: http://www.w3schools.com/cssref/css_units.asp
Tyler Moeller
@TylerMoeller
Sep 12 2016 17:16
@mcferren viewport width units may also be useful: font-size: 4vw
http://stackoverflow.com/questions/16056591/font-scaling-based-on-width-of-container
Benjamin McFerren
@mcferren
Sep 12 2016 17:19
@Harry97 @TylerMoeller thanks guys. vw is relative to the viewport (entire window) ; not the parent container. em is relative to the parent font-size; not the parent height and width
CamperBot
@camperbot
Sep 12 2016 17:19
mcferren sends brownie points to @harry97 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @harry97 |http://www.freecodecamp.com/harry97
:cookie: 825 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Drego
@dregothedoge
Sep 12 2016 17:20
Just a ping - any ideas on my case above? Might've gotten lost in the stream.
ayliffe1987
@ayliffe1987
Sep 12 2016 17:23
Can anyone help? Can't seem to center my <li> elements. The Nav bar is centered but the links are to the left. http://codepen.io/ayliffe1987/pen/GjoJqR
Benjamin McFerren
@mcferren
Sep 12 2016 17:23
is an iframe considered a viewport?
Harry Adel
@harryadel
Sep 12 2016 17:26
@ayliffe1987 you can some extra padding to center them a bit
@dregothedoge I'm not an expert at all but I'm ready to help you out find an answer
your image looks pretty good to me, what's really the problem?
ayliffe1987
@ayliffe1987
Sep 12 2016 17:27
@Harry97 Thanks. where would i add the padding?
CamperBot
@camperbot
Sep 12 2016 17:27
ayliffe1987 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 12 2016 17:29
@ayliffe1987 within your .nav li
@ayliffe1987 ops, margin seems to work better, try this:
.nav li {
  margin-left: 15px;
  float: left;
  padding: 10px 0;
}
Drego
@dregothedoge
Sep 12 2016 17:32
@Harry97 Try to scroll it out far away - then the picture will start getting smaller
ayliffe1987
@ayliffe1987
Sep 12 2016 17:33
thanks @Harry97
CamperBot
@camperbot
Sep 12 2016 17:33
ayliffe1987 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: ayliffe1987 already gave harry97 points
Harry Adel
@harryadel
Sep 12 2016 17:33
@dregothedoge yeah, you're right. the text maintains its size while the image keeps getting smaller
Sorin Ruse
@sorinr
Sep 12 2016 17:33

@ayliffe1987 you can change your css like:```

.nav {
list-style: none;
background-color: #666666;
overflow: hidden;
display: flex;
flex-direction: row;
justify-content: center;
flex-base: 100%;
/ width: 33%; /
/ margin: 0 auto; /
}
```

Tyler Moeller
@TylerMoeller
Sep 12 2016 17:33
@mcferren You could calculate the width of the containing element and apply font-size based on that document.getElementById('text-container').offsetWidth
Drego
@dregothedoge
Sep 12 2016 17:34
@Harry97 Yeah - and got stuck in here, even though I've limited the size of those to a maximum of 33%, the padding is probably what's destroying that
TrayBanks
@TrayBanks
Sep 12 2016 17:38
So remove opacity... got you! thanks for the feedback @Harry97
CamperBot
@camperbot
Sep 12 2016 17:38
:warning: traybanks already gave harry97 points
traybanks sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
Benjamin McFerren
@mcferren
Sep 12 2016 17:44
@TylerMoeller @Harry97 Think I got it with iframe: https://plnkr.co/edit/X2FQGzxjeDFiYHXlQFFg
David Darius
@DavidDarius
Sep 12 2016 17:44
give me a note from 1 to 10 https://codepen.io/DavidDarius/pen/kkrWOq
Liz Chen
@moist17
Sep 12 2016 17:47
http://codepen.io/dilute/pen/dpGorA
Hi Can anyone help me to figure out why my “media query” doesn’t work out? I thought if i set “.container” for 100% the content will resize when the screen is smaller than 480px...
Muhammad Hasham
@MohammadHasham
Sep 12 2016 17:48
@TylerMoeller Thanks
CamperBot
@camperbot
Sep 12 2016 17:48
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 826 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Muhammad Hasham
@MohammadHasham
Sep 12 2016 17:49
can someone tell me about media queries and breakpoints in bootstrap?
how to use them and when to use them?
john94
@lpy1994
Sep 12 2016 18:14
hello, all.
does anybody happens to know C++?
billpzt
@billpzt
Sep 12 2016 18:16
Hello! My Twitch.tv code isn't working, not sure if I'll have to change everything or if there's just some small detail I'm overlooking:
$(document).ready(function(){
    var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

    for(var i = 0; i < channels.length; i++){
    $.getJSON('https://api.twitch.tv/kraken/streams/'+channels[i]+'?callback=?', function(data) {
         console.log(data);
    });
}

   processResult(data);


  function processResult(apiResult){
     console.log(apiResult);
     for (var i = 0; i < apiResult.channels.length; i++){
         var status = "";
         if ("stream" === null) {
             status = "offline";
             $('#displayResults').append("<span>"+status+"</span>");
     } else {
             status = "online";
             var streamURL = data._links.self;
             $('#displayResults').append("<span><a href="+streamUrl+ "target='_blank'>"+status+"</a></span>");
     }    
    }
  }
});
I'm getting a "data is not defined" error. But I'm not sure how to put the data I get from the API into a variable to use later. Or if my function that's supposed to use that data will work at all for that matter...
Harry Adel
@harryadel
Sep 12 2016 18:19
@billpzt could you post your codepen?
billpzt
@billpzt
Sep 12 2016 18:20
@Harry97 Sure! Here goes:
http://codepen.io/billpzt/pen/Zpbwbv
I tried to copy whatever I could from previous challenges I did and modify it so it would work here. Don't really know what I'm doing :laughing:
First loop was a suggestion from a user here that helped me yesterday.
Harry Adel
@harryadel
Sep 12 2016 18:27
@billpzt yeah the loop is they way to go, I've forked your project and figuring out a solution
billpzt
@billpzt
Sep 12 2016 18:30
@Harry97 I'm not sure if my reasoning was correct. My general idea was to append each result to the displayResult area. But I think there are several things wrong with the way I'm trying to get that information, referencing it, formatting the link, etc etc...
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:31
My icon-bars are not visible they are functioning but they are not visible
<nav class = "navbar navbar navbar-fixed-top">
          <div class = "container-fluid">

         <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="#" id="banner">Portfolio</a>

              <div class  = "collapse navbar-collapse" id="myNavbar">
              <ul class = "nav navbar-nav navbar-right ">
                    <li class = "active"><a href="#home"> Home </a></li>
                    <li><a href="#skills">Skills</a></li>
                    <li><a href="#work">Work</a></li>
                    <li><a href="#aboutme">About Me</a></li>
                    <li><a href="#contactus">Contact </a></li> 
               </ul>
               </div>
           </nav>
@Harry97
Harry Adel
@harryadel
Sep 12 2016 18:33
@billpzt oki doki, I got the api to yeild a response properly, but now we've got a problem with displaying things nicely
Jason Luboff
@JLuboff
Sep 12 2016 18:34
@MohammadHasham Do you have bootstrap loaded in both CSS and Java sections of codepen? (assuiming your using codepen)
billpzt
@billpzt
Sep 12 2016 18:34
@Harry97 Cool! Yeah, I was going to leave the "nice" part for later, after I was able to display something :smile:
Harry Adel
@harryadel
Sep 12 2016 18:34
@MohammadHasham show me your codepen
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:34
@Harry97 @JLuboff working locally on sublime but i am sure that bootstrap is loading that's for sure
Harry Adel
@harryadel
Sep 12 2016 18:35
@billpzt honestly, everything is set now, all you've to do is to check the api response and figure out which info you want to display and how to display it
@MohammadHasham copy paste everything into a codepen and send us the link
billpzt
@billpzt
Sep 12 2016 18:37
@Harry97 Yeah, I'm checking out your code to understand what you did and learn from it before I modify anything. Thanks!!
CamperBot
@camperbot
Sep 12 2016 18:37
billpzt sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @harry97 |http://www.freecodecamp.com/harry97
Harry Adel
@harryadel
Sep 12 2016 18:37
@billpzt ok, man. ask me if something wasn't really that clear
billpzt
@billpzt
Sep 12 2016 18:37
@Harry97 :+1:
@Harry97 Kinda relieved that my code wasn't 100% crap hahaha One question so far: I see you removed the (document).ready function. It's not necessary then?
bkd705
@bkd705
Sep 12 2016 18:40
anyone need help?
Harry Adel
@harryadel
Sep 12 2016 18:40
@billpzt It's important if you were developing on locally, but you don't really need it when working with codepen
billpzt
@billpzt
Sep 12 2016 18:41
@Harry97 Ok
Harry Adel
@harryadel
Sep 12 2016 18:41
my eyes hurt when I see too many parens, so I just removed it :D
@bkd705 yeah
bkd705
@bkd705
Sep 12 2016 18:41
whatsup?
Harry Adel
@harryadel
Sep 12 2016 18:41
ok so @dregothedoge was working on this portfolio
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:41
can you have a look
@bkd705 now if tried zooming out you'd find that the image keeps getting samller
but the text isn't affected that much
so what can we do about it?
thanks :)
@MohammadHasham yeah man sure thing
Sarah Chima
@sayrah901
Sep 12 2016 18:43
Please is there any book or website where I can read further on JSON? I have no idea on how to make my random quote machine generate random quotes. Any help will be highly appreciated.
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:43
:smile:
bkd705
@bkd705
Sep 12 2016 18:43
its because he used vw units to size the text
use rem
if you use 3rem
it is similar size to 1.8vw
Harry Adel
@harryadel
Sep 12 2016 18:43
@bkd705 so the image behaviour is normal, right?
billpzt
@billpzt
Sep 12 2016 18:44
@sayrah901 Welcome to the club hahaha The lessons here on APIs so far are very superficial. I needed a lot of help to figure that one out and I'm still not 100% sure of what I'm doing :smile:
bkd705
@bkd705
Sep 12 2016 18:44
yeah with bootstrap the img behaviour is normal
why does he want the image to stay large with the text?
or the text to shrink with the img?
billpzt
@billpzt
Sep 12 2016 18:45
@sayrah901 I found a nice tutorial that gives a good general idea, if I find it I'll post it here for you.
Harry Adel
@harryadel
Sep 12 2016 18:45
@bkd705 I really don't know, I'm not that handy with flexbox nor I do know what type of look he want to achieve
@dregothedoge please check out @bkd705 answers above m8
@bkd705 thanks alot man I kept searching online and failed to find a solution
CamperBot
@camperbot
Sep 12 2016 18:45
harry97 sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @bkd705 |http://www.freecodecamp.com/bkd705
bkd705
@bkd705
Sep 12 2016 18:46
oh, well yeah, tl;dr use rem for font-size, it uses relative sizing to its parent ie when the parent element gets smaller (page gets bigger) the text will stay the same size relevant to the parent
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:46
@Harry97 any idea what's going on?
bkd705
@bkd705
Sep 12 2016 18:46
otherwise text will force the parent to grow, or overflow out of the parent
Harry Adel
@harryadel
Sep 12 2016 18:46
@MohammadHasham oh yeah sorry :D I'm on it
Sarah Chima
@sayrah901
Sep 12 2016 18:46
@billpzt I really need any tutorial I can get. Thanks in advance.
CamperBot
@camperbot
Sep 12 2016 18:46
sayrah901 sends brownie points to @billpzt :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @billpzt |http://www.freecodecamp.com/billpzt
bkd705
@bkd705
Sep 12 2016 18:47
hey whats wrong @MohammadHasham ?
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:47
@bkd705 my collapse button i mean those three dashes are not appearing but it is functioning properly
i dont know whats wrong
Harry Adel
@harryadel
Sep 12 2016 18:47
Sarah Chima
@sayrah901
Sep 12 2016 18:48
@Harry97 Thank you
CamperBot
@camperbot
Sep 12 2016 18:48
sayrah901 sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 243 | @harry97 |http://www.freecodecamp.com/harry97
bkd705
@bkd705
Sep 12 2016 18:49
oh like the navigation collapse? @MohammadHasham
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:49
Yes!
i dont know whats wrong
@bkd705
billpzt
@billpzt
Sep 12 2016 18:53
@sayrah901 https://zapier.com/learn/apis/ This won't automatically give you all the answers but it's nicely formatted and will make some things clearer! But with the quote machine the general idea is (I don't know how much you already know, so bear with me):
  1. You need to go to a page that has quotes and offers an API. I used "quotes on design" They're easy to find on Google;
  2. The format they use for the information you need to get is JSON, which is just a bunch of key / value pairs like {"author": "Albert Einstein"};
  3. Your code needs to get that info and display it on the page. You're probably not going to need to use all the info they offer through their API, so you need to create variables that will hold only the values you want (like "author" and "quote");
  4. Then after you get that figured out there's the Twitter button which is another hassle hahaha
bkd705
@bkd705
Sep 12 2016 18:53
@MohammadHasham add this to your css .icon-bar { color: white; }
all it is
sorry thats wrong
.icon-bar {
background: white;
}
add that
melisa pettaway
@mpettaw2
Sep 12 2016 18:53
can anyone please tell me why my if statement is not being evaluated multiple times in my while loop.
bkd705
@bkd705
Sep 12 2016 18:53
the icon bar is too dark or the same color
so you cant see it
melisa pettaway
@mpettaw2
Sep 12 2016 18:54
spaces.on('click', function(e){

     //AI choice
        /*will do two moves and stop. may be because random is repeating numbers and then the eq stops. making me have to click again instead of ai looking for another space. will work on that.*/
     var AI=function(){

      var random=Math.floor(Math.random()*8);
        var randomSpaces=spaces.eq(random); 
       var j;
       while(j<9){
       if(Boolean(randomSpaces.text())===false){
     randomSpaces.append(player2);


   }  
       }


   };
      setTimeout(AI
       ,3000);


   e.preventDefault();

   });
in fact let me post my entire code
 $(document).ready(function(){
   var x=$("#x");
   var o=$("#o");
   var xText=x.text();
   var oText=o.text();
   var player1;
   var player2;
   var spaces=$(".spaces");
   var reset=function(){
      spaces.html("");
         player1;
         player2;

   };
   //choose ltrs for player and AI
   x.on('click',function(e){
     player1="X";
     player2="O";
     console.log(player1,player2);
     e.preventDefault();
   });
   o.on('click', function(e){
     player1="O";
     player2="X";
      console.log(player1,player2);
     e.preventDefault();
   });

   spaces.on('click', function(e){
     //human choice
      var $this=$(this);
      $this.append(player1);
     e.preventDefault();


   });  

   spaces.on('click', function(e){

     //AI choice
        /*will do two moves and stop. may be because random is repeating numbers and then the eq stops. making me have to click again instead of ai looking for another space. will work on that.*/
     var AI=function(){

      var random=Math.floor(Math.random()*8);
        var randomSpaces=spaces.eq(random); 
       var j;

       if(Boolean(randomSpaces.text())===false){
     randomSpaces.append(player2);


   }  



   };
      setTimeout(AI
       ,3000);


   e.preventDefault();

   });
    //winning module
   /* i want winning module to evaluate after all spaces has been filled with text. currently not evaluating*/
     if(Boolean(spaces.text())){
       //winning combinations spaces indexes.
      var winning=[[1,2,3],[4,5,6],[7,8,9],[1,4,7],[2,5,8],[3,6,9],[3,4,7],[1,4,9]];


   winning.forEach(function(win){
    for(var i=0;i<win.length;i++){
              if(spaces.eq(win[i],win[i+1],win[i+2]).text()===player1){
         var winner="you Win";
          ("#done").append(winner);      
         reset();

       }else if(spaces.eq(win[i],win[i+1],win[i+2]).text()===player2){
         var looser="you Loose";
         ("#done").append(looser);
         reset();

       }else{
         var draw="Draw";
         ("#done").append(draw);
        reset();

       }

    }


   });
     }

 });
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:55
@bkd705 Thanks
CamperBot
@camperbot
Sep 12 2016 18:55
mohammadhasham sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @bkd705 |http://www.freecodecamp.com/bkd705
Muhammad Hasham
@MohammadHasham
Sep 12 2016 18:55
@Harry97 Thanks
CamperBot
@camperbot
Sep 12 2016 18:55
mohammadhasham sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:cookie: 244 | @harry97 |http://www.freecodecamp.com/harry97
melisa pettaway
@mpettaw2
Sep 12 2016 18:55
wait here is my code pen
billpzt
@billpzt
Sep 12 2016 18:58
@sayrah901 They usually show what their API is formatted like on their API page so you have some idea of how to reference the data you need. But someone also gave me a cool tip the other day: you can install a browser plugin that shows that data very nicely if you copy and paste the API link into your browser. Something like a JSON viewer. I installed mine on Firefox, they have it for Chrome too.
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:02
how do i know the pixels in my browser to apply breakpoints?
Stephen Passero
@stephenpassero
Sep 12 2016 19:02
@TylerMoeller are you sure? Because if I go the javascript console and copy my html and then paste it in to the pen's html, it works.
Sarah Chima
@sayrah901
Sep 12 2016 19:02
@billpzt Thank you
CamperBot
@camperbot
Sep 12 2016 19:02
sayrah901 sends brownie points to @billpzt :sparkles: :thumbsup: :sparkles:
:warning: sayrah901 already gave billpzt points
billpzt
@billpzt
Sep 12 2016 19:02
@sayrah901 :+1:
melisa pettaway
@mpettaw2
Sep 12 2016 19:05
@MohammadHasham if you are using google chrome you can go to developer tools and click the icon with the two squares.
it looks like a phone on top of a blank page.
its in the top left hand corner
that should give you current pixels for a web page
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:08
@mpettaw2 Thanks
CamperBot
@camperbot
Sep 12 2016 19:08
mohammadhasham sends brownie points to @mpettaw2 :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @mpettaw2 |http://www.freecodecamp.com/mpettaw2
melisa pettaway
@mpettaw2
Sep 12 2016 19:10
np :)
Byron
@jbgcrugers
Sep 12 2016 19:21
hi .. so i've gotten as far as Build a Tribute Page. And now i don't have the first idea what to do. I don't think solving all the individual challenges has taught me how to build a page from scratch. I've googled examples, but none look familiar from the challenges we were doing. I'm also confused by the HTML, CSS and JS being in separate panes. Any suggestions on how to proceed? Do i need to find a 'build a webpage' tutorial somewhere else and follow that? Thanks in advance for any ideas.
bkd705
@bkd705
Sep 12 2016 19:28
Just give it a go, and ask for help when you need it.
I'll be on here for the next 3 hours as I'm in yet another bland class.
Byron
@jbgcrugers
Sep 12 2016 19:33
@bkd705 thanks for the offer, but i don't want to deluge you with the 300 questions it would take me to do this. I'll see if i can find a tutorial somewhere that can at least get me started. Thanks.
CamperBot
@camperbot
Sep 12 2016 19:33
jbgcrugers sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @bkd705 |http://www.freecodecamp.com/bkd705
bkd705
@bkd705
Sep 12 2016 19:33
Aha, well think of all the inline css you did
and just put that in the css pane
and you wont really need javascript for now anyways
i would like talk you through it but im in class so i cant atm
Byron
@jbgcrugers
Sep 12 2016 19:39
@bkd705 ok, good advice, i'll give it a shot. Thanks.
CamperBot
@camperbot
Sep 12 2016 19:39
jbgcrugers sends brownie points to @bkd705 :sparkles: :thumbsup: :sparkles:
:warning: jbgcrugers already gave bkd705 points
Justin Kishbaugh
@jkishbaugh
Sep 12 2016 19:43
I am working on the weather app I have gotten most of it but I am having trouble getting the icon to dynamically update in AngularJS. Any help or advice would be greatly appreciated. http://codepen.io/kishju/pen/zKxAdL
lyaa
@lyaa
Sep 12 2016 19:43
Hello guys :) I just completed the weather viewer project and it works fine but I am not satisfied with the design... I had wanted to try out CSS filters and stylesheet injection so I played around with wunderground's API and got this: https://codepen.io/alyaa/pen/amvEbJ ... Any suggestions on how to make it look better/less outline-y?
Joris Labie
@labiej
Sep 12 2016 19:47
@jbgcrugers You can always check if codecademy or the like has a nice step-by-step explanation
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:48
Is there any way that i can shift the element to next row after certain pixels using media queries ?
is there a way?
lyaa
@lyaa
Sep 12 2016 19:50
@MohammadHasham if the element is being displayed as inline-block, you can just switch it to display as block... otherwise if you're using bootstrap/skeleton/etc put the relevant elements in a row with suitable column classes
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:51
yes i am using bootstrap
@lyaa
but the row would be same if i will use the relevent classes like col-ms or col-xs
@lyaa
lyaa
@lyaa
Sep 12 2016 19:54
so here is the thing, a row is 12 columns wide and you can tell the browser that an element should take 6 columns when the screen is large (or more) by giving it the class col-lg-6 and then tell it the element should take the full 12 columns when the screen is small by giving it the class col-sm-12
Joris Labie
@labiej
Sep 12 2016 19:55
you want to look at display: flex if you want a vanilla CSS solution (it's awesome if you ask me)
lyaa
@lyaa
Sep 12 2016 19:55
but flex is not supported well
by browsers I mean
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:55
but it wont give that a new row it would just manipulate on that row ? i guess
@lyaa
correct me
lyaa
@lyaa
Sep 12 2016 19:56
yeah but the row will now have the elements arranged vertically too
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:56
How vertically?
@lyaa
can you elaborate please
lyaa
@lyaa
Sep 12 2016 19:57
check the contributions grid and how it changes on resize in this pen https://codepen.io/alyaa/pen/GjKmEd
Muhammad Hasham
@MohammadHasham
Sep 12 2016 19:58
@lyaa Thanks
CamperBot
@camperbot
Sep 12 2016 19:58
mohammadhasham sends brownie points to @lyaa :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @lyaa |http://www.freecodecamp.com/lyaa
lyaa
@lyaa
Sep 12 2016 19:58
you're welcome @MohammadHasham
Chelsea Casareale
@ChelseaCasareale
Sep 12 2016 20:00
Hey guys. So I'm on the Random Quote Generator project and I have a potentially silly question. Am I supposed to know where to get some sort of quote site API? They always say not to look at their example's code, but I have no idea how to find a reliable resource for that.
Coy Sanders
@coymeetsworld
Sep 12 2016 20:01
you don't have to @ChelseaCasareale
Chelsea Casareale
@ChelseaCasareale
Sep 12 2016 20:01
Just make my own json and stick it in?
Coy Sanders
@coymeetsworld
Sep 12 2016 20:01
I didn't, I just created a fixed array. This challenge actually used to be in the Beginning Projects section before you learned about JSON and APIs
yeah you could make your own JSON object too
Chelsea Casareale
@ChelseaCasareale
Sep 12 2016 20:02
Ah OK thanks!
Coy Sanders
@coymeetsworld
Sep 12 2016 20:02
nothing in the instructions specify you need to use any API, the other projects you will though like for Weather and Twitch
since you can't hardcode any of that
no problem good luck
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:03
@lyaa checkout flexbox is supported by many browsers http://caniuse.com/#feat=flexbox
@ChelseaCasareale if you want some quotes checkout this gist
https://gist.github.com/signed0/d70780518341e1396e11
lyaa
@lyaa
Sep 12 2016 20:10
@vinaypuppal thanks for the link, I hadn't checked the support there in a while. My statement was based on comments I read on reddit last month and also trying out some flexbox sites on Safari which didn't work well. I'll keep this in mind but I am still hesitant about using it in production code
CamperBot
@camperbot
Sep 12 2016 20:10
lyaa sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
billpzt
@billpzt
Sep 12 2016 20:11
Hi there! Two questions:
  1. Anyone know why I can't create an html element with an id from my JSON? I tried but it gives me an error. No id, no problem... And:
  2. My html's target="blank" isnt working here, no idea why... Here's the code for the two questions:
    $('#displayResults').append("<div id="chan"><a href=" +  streamURL + "target='blank'>" + channels[i] + "</a>" + " " + status + "</div>"+"</br>");
Oh, now that I posted it I think I know why the id thing wasn't working hahaha
Wrong quotes!
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:13
@lyaa oh okay
billpzt
@billpzt
Sep 12 2016 20:14
Haven't figured out the target=blank problem though
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:14
@billpzt it should be target="_blank"
lyaa
@lyaa
Sep 12 2016 20:14
@billpzt target="_blank"
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:15
This message was deleted
billpzt
@billpzt
Sep 12 2016 20:17
@vinaypuppal @lyaa Actually I think that's what I had before and it wasn't working so I deleted that underscore...
But I may be wrong, I'll try it again!
Harshil Agrawal
@harshil1712
Sep 12 2016 20:19
Hey guys. I have been working on the Wikipedia Viewer project for week now but am not able to make it work. Can anyone help me please.
http://codepen.io/harshil1712/pen/oLWVaX
billpzt
@billpzt
Sep 12 2016 20:20
@vinaypuppal @lyaa Tried it, didn't work...
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:20
@billpzt provide link to your pen, will debug whats going wrong
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:22
@harshil1712 You have to stop default form submission event read more here
http://www.w3schools.com/jquery/event_preventdefault.asp
lyaa
@lyaa
Sep 12 2016 20:23
try to put a space before target...
Harshil Agrawal
@harshil1712
Sep 12 2016 20:25
@vinaypuppal tried that but is not working.
lyaa
@lyaa
Sep 12 2016 20:25
@harshil1712 change the links to https instead of http
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:26

@billpzt You generated link html looks like this

<a href="https://api.twitch.tv/kraken/streams/ESL_SC2target=_blank">ESL_SC2</a>

problem is with your quotes

@harshil1712 well you did not, i was telling to do this
$('#search-btn').on('click', function(event){
event.preventDefault();
//rest of your code
}
Harshil Agrawal
@harshil1712
Sep 12 2016 20:31
@lyaa @vinaypuppal not working
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:33
@harshil1712 next move the sWord and url inside the abv function place them after event.preventDefault(); Because you are collecting sWord before user pressed search btn
@harshil1712 and BTW no need of https i think so
is it required @lyaa ??
Harshil Agrawal
@harshil1712
Sep 12 2016 20:35
@vinaypuppal thanks. Now i understand where was i making mistake.
CamperBot
@camperbot
Sep 12 2016 20:35
harshil1712 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 500 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
billpzt
@billpzt
Sep 12 2016 20:35
@vinaypuppal Hmmm, interesting. I'll try to fix it, thanks!
CamperBot
@camperbot
Sep 12 2016 20:35
billpzt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 501 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Sep 12 2016 20:36
@billpzt just give space before target then its working
$('#displayResults').append("<div id='chan'><a href=" +  streamURL + " target='_blank'>" + channels[i] + "</a>" + " " + status + "</div>"+"</br>");
@harshil1712 on more tip Just remove margin-left or margin-right on input and just give text-align:center on form to get input field nicely aligned in center
mzedlach
@mzedlach
Sep 12 2016 20:42
Hello everyone!
Can someone have a look at my portfolio codepen and help me figure out why I cannot adjust the font size for the logo and navigation buttons? I can change the font for the catchy phrase (banner), but not anything before that. http://codepen.io/mzedl/pen/dXQkdq?editors=1100
billpzt
@billpzt
Sep 12 2016 20:45
@vinaypuppal Great, it worked! Now I realized I'm referencing the wrong link apparently hahaha thanks again
CamperBot
@camperbot
Sep 12 2016 20:45
billpzt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: billpzt already gave vinaypuppal points
Hamza Anwer
@ImHamzaAnwer
Sep 12 2016 20:47
Hi !
bkd705
@bkd705
Sep 12 2016 20:50
@billpzt access the element directly, so do like .logo h1 { font-size: 50px; }
it works if you do that
billpzt
@billpzt
Sep 12 2016 20:53
@bkd705 Cool, but the dot before the name would mean a class, right? And my problem was getting the quotations right to include a class or an id or whatever.
bkd705
@bkd705
Sep 12 2016 20:53
yep basically its saying "only the h1 in the logo class div"
David
@DavidLi-Minxiao
Sep 12 2016 20:53
Hey guys, can anyone help with the Local Weather app?
I'm on Chrome (latest), and I'm not sure how to get geo-location since the HTML5 method doesn't work
Cormac Curtis
@curtiscormac
Sep 12 2016 20:55
Hi folks... I'm hitting a will with the twitter part of the random code generator... can someone give me a hint as to how I get the current quote into the tweet?
David
@DavidLi-Minxiao
Sep 12 2016 20:56
@curtiscormac Twitter has a functionality to include tweet text in an URL, and if you open that URL you'll find that text pre-loaded...
Sam Griffen
@ssgriffen
Sep 12 2016 20:57
Does anyone know how to create a new array property within an already existing object?
Cormac Curtis
@curtiscormac
Sep 12 2016 20:57
@arvendragon - many thanks... I'll dig it out!
CamperBot
@camperbot
Sep 12 2016 20:57
curtiscormac sends brownie points to @arvendragon :sparkles: :thumbsup: :sparkles:
:cookie: 161 | @arvendragon |http://www.freecodecamp.com/arvendragon
Sam Griffen
@ssgriffen
Sep 12 2016 20:57
I'm on "record collection" within basic js
Justin Kishbaugh
@jkishbaugh
Sep 12 2016 21:02
Can someone take a look at my pen for the weather app. I can't seem to get the icon to display and change based on the weather. Everything else works but I have been experimenting with this part for over a week. http://codepen.io/kishju/pen/zKxAdL
Ken Haduch
@khaduch
Sep 12 2016 21:03
@ssgriffen - it would be collection[id][prop] = []; or collection[id][prop] = [ value ]; or collection[id].tracks = []; or collection[id].tracks = [ value ]; depending on the approach you are taking in your code.
Sam Griffen
@ssgriffen
Sep 12 2016 21:04
@khaduch dang... i had this collection.id.tracks = [];
Ken Haduch
@khaduch
Sep 12 2016 21:05
@ssgriffen - if you want to post your code to make sure - but, yes, any time you have a property value (such as the id) in a variable, you have to use bracket mode to properly index into the collection object.
Sam Griffen
@ssgriffen
Sep 12 2016 21:05
This message was deleted
This message was deleted
how do you post code again
isnt it like ``` or something?

@khaduch
// Setup
var collection = {
"2548": {
"album": "Slippery When Wet",
"artist": "Bon Jovi",
"tracks": [
"Let It Rock",
"You Give Love a Bad Name"
]
},
"2468": {
"album": "1999",
"artist": "Prince",
"tracks": [
"1999",
"Little Red Corvette"
]
},
"1245": {
"artist": "Robert Palmer",
"tracks": [ ]
},
"5439": {
"album": "ABBA Gold"
}
};
// Keep a copy of the collection for tests
var collectionCopy = JSON.parse(JSON.stringify(collection));

// Only change code below this line
function updateRecords(id, prop, value) {
collection.id[prop] = value; //Not sure if this will be necessary

//Starting check conditions.

if(prop != "tracks" && value != ""){ 
collection.id[prop] = value;
}if(prop == "tracks" && !collection.hasOwnPropery("tracks")){
collection.id.tracks = [];

}

return collection;
}

// Alter values below to test your code
updateRecords(5439, "artist", "ABBA");

@khaduch I'm just trying to create an empty array property called tracks
Ken Haduch
@khaduch
Sep 12 2016 21:09
@ssgriffen '''
CamperBot
@camperbot
Sep 12 2016 21:09
:bulb: to format code use backticks! ``` more info
Ken Haduch
@khaduch
Sep 12 2016 21:11

@ssgriffen - you have a couple other issues there. you would need to test with !collection[id].hasOwnProperty("tracks"), or since your prop variable has the value tracks (you just tested it) !collection[id].hasOwnProperty(prop) and then as I posted above collection[id][prop] = []; to create the empty array.

Also, your starting line of code is not correct collection.id[prop] = value; has to be collection[id][prop] = value; but furthermore, you are only to do that if value !== '' && prop !== 'tracks', so it would be modified to take those conditions into account.

Actually, if you make the basic testing for your function like this:

if ( value === '' ) {
    // do the actions that you are supposed to do when the value is blank
} else {
    /// do the actions that you are supposed to do when the value is not blank
}

That will put you on good footing to get all of your conditions tested and the actions properly categorized.

David
@DavidLi-Minxiao
Sep 12 2016 21:12
@jkishbaugh where did you learn Angular? or did you just use the FCC example
Justin Kishbaugh
@jkishbaugh
Sep 12 2016 21:12
I learned it from codecademy...
Sam Griffen
@ssgriffen
Sep 12 2016 21:12
@khaduch I follow perfectly...thankk you
Justin Kishbaugh
@jkishbaugh
Sep 12 2016 21:12
But I don't know a ton.
Sam Griffen
@ssgriffen
Sep 12 2016 21:12
thank you @khaduch
CamperBot
@camperbot
Sep 12 2016 21:12
ssgriffen sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1667 | @khaduch |http://www.freecodecamp.com/khaduch
Justin Kishbaugh
@jkishbaugh
Sep 12 2016 21:15
@arvendragon Do you have some advice on how to get it to work?
Sam Griffen
@ssgriffen
Sep 12 2016 21:19
@khaduch thank you, so...
CamperBot
@camperbot
Sep 12 2016 21:19
ssgriffen sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: ssgriffen already gave khaduch points
Sam Griffen
@ssgriffen
Sep 12 2016 21:19
@khaduch would this be how to push a new value onto the empty array I just create? collection[id][prop].push[value];
David
@DavidLi-Minxiao
Sep 12 2016 21:21
@jkishbaugh i know nothing about angular yet :cry:
Justin Kishbaugh
@jkishbaugh
Sep 12 2016 21:22
Ok thanks.
David
@DavidLi-Minxiao
Sep 12 2016 21:24
Can someone diagnose why this code isn't returning anything for var city?
function getLocation(){ $.ajax({ url: "http://ipinfo.io/json", success: function(data1){ city = data1.city; country = data1.country; } });
<script>function getLocation(){ $.ajax({ url: "http://ipinfo.io/json", success: function(data1){ city = data1.city; country = data1.country; } });</script>
billpzt
@billpzt
Sep 12 2016 21:24
So, I decided to alter my code to get a logo from another source. My page results didn't return (they did before). So I commented out the section I had inserted, but I'm still not getting any results! Help! Here's my page: http://codepen.io/billpzt/pen/Zpbwbv
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:27
@arvendragon If you have any AdBlockers installed on your browser then ip-info api will also be blocked
billpzt
@billpzt
Sep 12 2016 21:27
Oops, think I figured it out: I was just inserting the link with the logo straight into my html without the proper img tag...!
David
@DavidLi-Minxiao
Sep 12 2016 21:28
@vinaypuppal I do have an adblocker, but it's correctly updating my country but not my city
@vinaypuppal I have no idea what I changed but it's working now.......
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:29
@arvendragon console.log(data1) and check in console what response are you getting and verify are you accessing it correctly
David
@DavidLi-Minxiao
Sep 12 2016 21:31
@vinaypuppal It's working correctly now as an object. It was partially before, but only one of the keys worked. I double-checked my spelling but I think it's likely I misspelled a key...
@vinaypuppal thank you regardless :)
CamperBot
@camperbot
Sep 12 2016 21:31
arvendragon sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:31
@arvendragon turnoff adblcoker for codepen and try it will work all time.
But i suggest dont use IP-API as many will have Adblockers so you cant show your project working to all.
Why are you not using Geolocation
CamperBot
@camperbot
Sep 12 2016 21:31
:cookie: 502 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
David
@DavidLi-Minxiao
Sep 12 2016 21:31
@vinaypuppal I couldn't get Geolocation to work, as I'm on Chrome (latest) and codepen isn't HTTPS
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:32
FreeCodeCamp/FreeCodeCamp#9145
@arvendragon
follow this discussion you will get some info regarding that @arvendragon
@arvendragon you can load codepen over https as well
David
@DavidLi-Minxiao
Sep 12 2016 21:32
@vinaypuppal hahaha what? does changing your url from http:// to https:// work?
oh i didn't realize that, thanks for all the help again :)
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:33
yes @arvendragon but openweather api dont support https thats the problem why all are using IP-API
@arvendragon but read abv github issue u will understand more
David
@DavidLi-Minxiao
Sep 12 2016 21:37
@vinaypuppal Could you explain why using IP-API is bad for adblockers?
Is it just many adblockers intentionally block it since it' poses a security risk?
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:38
@arvendragon dont know correctly but its a privacy issue right with IP you can see your getting user location without their permission But geolocation API asks permission before locating them.
billpzt
@billpzt
Sep 12 2016 21:40
Does anyone know why I can't get my code to work if I use two different JSON calls in the same loop? Here's the code (I commented out the part that's causing trouble):
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

channels.forEach(function(channel, i) {
  $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?', function(data) {

    console.log(data);

    var streamURL = 'https://www.twitch.tv/' + channels[i];

  /*$.getJSON('https://api.twitch.tv/kraken/channels/' + channels[i] + '?callback=?', function(data) {
    var logo = data.logo;
});
    console.log(logo);*/

    var status = "";

    if (data.stream === null) {
      status = "offline";
    } else {
      status = "online";
    }

    $('#displayResults').append("<div id='chan'>" + "<a href=" +  streamURL + " target='_blank'>" + channels[i] + "</a>" + " " + status + "</div>");

  });
});
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:43
@billpzt since AJAX is asynchronous. You can access response only after it finishes. so move rest of code inside call back of 2nd Ajax request
billpzt
@billpzt
Sep 12 2016 21:46
@vinaypuppal Didn't quite understand...
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:46
@billpzt sorry I phrased it incorrectly
billpzt
@billpzt
Sep 12 2016 21:47
@vinaypuppal That's alright!
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:48
@billpzt
just move all UI updating logic inside callback of second API call so you have access to response from two calls
@billpzt understood??
billpzt
@billpzt
Sep 12 2016 21:50
@vinaypuppal That's what I thought you meant, but I don't think I know how to change the code, I tried and it didn't work
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:50
@billpzt can you provide pen link once more
billpzt
@billpzt
Sep 12 2016 21:51
Ok, let me try one more time here, maybe I got it this time :smile:
@vinaypuppal This is what I thought you meant, didn't work:
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

channels.forEach(function(channel, i) {
  $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?', function(data) {

    console.log(data);

    var streamURL = 'https://www.twitch.tv/' + channels[i];

  .getJSON('https://api.twitch.tv/kraken/channels/' + channels[i] + '?callback=?', function(data) {
    var logo = data.logo;
    console.log(logo);

    var status = "";

    if (data.stream === null) {
      status = "offline";
    } else {
      status = "online";
    }

    $('#displayResults').append("<div id='chan'>" + "<a href=" +  streamURL + " target='_blank'>" + channels[i] + "</a>" + " " + status + "</div>");
});


  });
});
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:54
@billpzt .getJSON its $.getJSON in second call and link would help to further debug
billpzt
@billpzt
Sep 12 2016 21:54
It's not only not working, I'm also getting a few errors now
underOneFlag
@underOneFlag
Sep 12 2016 21:54
@billpzt do you know what part is not working, what are you expecting compared to what you are getting?
@vinaypuppal well spotted :thumbsup:
billpzt
@billpzt
Sep 12 2016 21:56
@vinaypuppal Ok, let me try to include the $ first see if that helps!
@underOneFlag WHen I include the second JSON call I get no more results on my page
@vinaypuppal The $ worked :smile:
vínαч puppαl
@vinaypuppal
Sep 12 2016 21:56
:+1:
billpzt
@billpzt
Sep 12 2016 21:57
@vinaypuppal Thanks again!
CamperBot
@camperbot
Sep 12 2016 21:57
billpzt sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 503 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Julia
@ju-liax
Sep 12 2016 22:42
how to change font size again?
vínαч puppαl
@vinaypuppal
Sep 12 2016 22:45
@ju-liax Using font-size property in CSS
Refer this : https://mdn.io/font-size
underOneFlag
@underOneFlag
Sep 12 2016 22:45
@ju-liax
font-size: 18px;
Julia
@ju-liax
Sep 12 2016 22:45
@vinaypuppal thanks
CamperBot
@camperbot
Sep 12 2016 22:45
ju-liax sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 504 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
billpzt
@billpzt
Sep 12 2016 22:47
Hey there, one more doubt: The following code stopped working completely once I inserted the code to change the background color of the <div> element. Any ideas?
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];

channels.forEach(function(channel, i) {
  $.getJSON('https://api.twitch.tv/kraken/streams/' + channels[i] + '?callback=?', function(data) {

    console.log(data);

    var streamURL = 'https://www.twitch.tv/' + channels[i];

  $.getJSON('https://api.twitch.tv/kraken/channels/' + channels[i] + '?callback=?', function(data) {
    var logo = data.logo;

    console.log(logo);

    var status = "";
    var resultLine = document.getElementById("resultLine");

    if (data.stream === null) {
      status = "offline";
      resultLine.style.backgroundColor = "red";
    } else {
      status = "online";
      resultLine.style.backgroundColor = "blue";
    }

    $('#displayResults').append("<div class='row' id='re sultLine'><div id='logoCont' class='col-sm-4'>" + "<img src=" + logo + " id='logo'></div>" + 
                                "<div id='pageLink' class='col-sm-4'>" + "<a href=" +  streamURL + " target='_blank'>" + channels[i] + "</a></div>" + 
                                "<div id='status' class='col-sm-4'>" + status + "</div></div>");
}); 
  });
});
Julia
@ju-liax
Sep 12 2016 22:49
@vinaypuppal it didnt work and i read the page
vínαч puppαl
@vinaypuppal
Sep 12 2016 22:51
@ju-liax what did you try
@ju-liax if you scroll through the page i shared you will find examples did you check them
@billpzt any errors in console
billpzt
@billpzt
Sep 12 2016 22:54
@vinaypuppal I don't think so... I'll check
@vinaypuppal resultLine is null
@vinaypuppal I think it's null because it hasn't been created before I try to alter it...
vínαч puppαl
@vinaypuppal
Sep 12 2016 22:57
@billpzt might be problem with this var resultLine = document.getElementById("resultLine");
did you have any existing Html element with id resultLine
underOneFlag
@underOneFlag
Sep 12 2016 22:59
@billpzt maybe add the class "offline" or "online" to the append ("<div class='row ' + status + ' id...
then add the red/blue background-color props to your css file
Santiago Fernandez
@sf-jd
Sep 12 2016 23:00
h guys
Byron
@jbgcrugers
Sep 12 2016 23:00
hi ... for Build a Tribute Page, could someone tell me how to resize a photo? i've tried in the HTML panel: <img class= "smaller image" src="http://bit.ly/2cRGzcV" alt="photo not loading"></img> and in the CSS panel: .smaller-image {
width: 100px;
}
Santiago Fernandez
@sf-jd
Sep 12 2016 23:01
tried image-responsive class byron?
billpzt
@billpzt
Sep 12 2016 23:01
@vinaypuppal No, this element is created once the page loads
@underOneFlag Might try that... Sounds a bit complicated!
vínαч puppαl
@vinaypuppal
Sep 12 2016 23:01
@jbgcrugers you gave smaller image class in html and using smaller -image in css
Santiago Fernandez
@sf-jd
Sep 12 2016 23:01
or, you could confirm smaller-image is in your code
@jbgcrugers http://www.w3schools.com/css/css_syntax.asp have a look at this, it should help you clear your doubts
Byron
@jbgcrugers
Sep 12 2016 23:03
@sf-jd thanks!
CamperBot
@camperbot
Sep 12 2016 23:03
jbgcrugers sends brownie points to @sf-jd :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @sf-jd |http://www.freecodecamp.com/sf-jd
Byron
@jbgcrugers
Sep 12 2016 23:03
@vinaypuppal thanks!
CamperBot
@camperbot
Sep 12 2016 23:03
jbgcrugers sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 505 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Santiago Fernandez
@sf-jd
Sep 12 2016 23:03
yw, hope you get it working as expected :)
Ken Haduch
@khaduch
Sep 12 2016 23:03
@ssgriffen :point_up: September 12, 2016 5:19 PM - it looks like you have collection[id][prop].push[value]; - looks like square brackets at the end. To use the .push() method, it should be parentheses, because that is a function call. collection[id][prop].push(value); should do it. (Just in case you didn't get an answer from someone, but you probably did - I was away for a couple hours.)
Cameron Burkholder
@Cameron-Burkholder
Sep 12 2016 23:11
So I finished the Weather app a while ago, fully functional, and when I came back to check it, it was not working. Can anyone find what's wrong? As far as I can tell, the position confirmation isn't working, but I'm not sure why.
underOneFlag
@underOneFlag
Sep 12 2016 23:15
@Cameron-Burkholder says position is undefined
Cameron Burkholder
@Cameron-Burkholder
Sep 12 2016 23:15
So you get the location prompt? @underOneFlag
underOneFlag
@underOneFlag
Sep 12 2016 23:16
@Cameron-Burkholder no
i dont see any code where you ask for position
oh, nvm i see navigator now
vínαч puppαl
@vinaypuppal
Sep 12 2016 23:23
@Cameron-Burkholder you are only checking navigator.geolocation is supported by browser, i dont see anywhere in your code where your are getting position variable from. You need to call to get user location
navigator.geolocation.getCurrentPosition(function(position) {
// here you can access position.coords.latitude and position.coords.longitude
}
Cameron Burkholder
@Cameron-Burkholder
Sep 12 2016 23:40
@vinaypuppal Thanks, I got it now.
CamperBot
@camperbot
Sep 12 2016 23:40
cameron-burkholder sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 506 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
ManBearPigg
@ManBearPigg
Sep 12 2016 23:43
How can I consistently horizontally align labels with buttons, where labels are below buttons? My method of individually changing margins is hacky and inconsistent.
  <div id="langButtons">
     <input class="btn-group langButton" id="useJavascript" value="JavaScript" type="button"></input>
     <input class="btn-group langButton" id="useRuby" value="Ruby" type="button"></input>
     <input class="btn-group langButton" id="usePython" value="Python" type="button"></input>
     <input class="btn-group langButton" id="useHTML" value="HTML" type="button"></input>
     <input class="btn-group langButton" id="useCSS" value="CSS" type="button"></input>
     <input class="btn-group langButton" id="useSwift" value="Swift" type="button"></input>
  </div>

  <div id="langDescriptions">
    <label style="margin-left: 4.8%" class="langDescription" id="JavaScript">Javascript</label>
    <label style="margin-left: 6.8%" class="langDescription" id="Ruby">Ruby</label>
    <label style="margin-left: 4.5%" class="langDescription" id="Python">Python</label>
    <label style="margin-left: 5.4%" class="langDescription" id="HTML">HTML</label>
    <label style="margin-left: 5.3%" class="langDescription" id="CSS">CSS</label>
    <label style="margin-left: 4.8%" class="langDescription" id="Swift">Swift</label>
  </div>
Santiago Fernandez
@sf-jd
Sep 12 2016 23:50
I would use 1 div per label/button if you want it to be responsive
or, position them absolutely if not
i think bootstrap will let you use tables for that as well
dont really use bs :/
ManBearPigg
@ManBearPigg
Sep 12 2016 23:55
ya me neither
ok I'll try 1 div per label.