These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Jan 2017
Chiu Yong
@chiuyong
Jan 12 2017 00:09

hey guys, is it semantically correct to put this?

<main>
<!-- News Slider-->
<section>
<article>
</article>
</section>
<!-- End News -->

<!-- About Us-->
<section>
<article>
</article>
</section>
<!-- End About Us-->
</main>

DJ Pelland
@dna113p
Jan 12 2017 00:25
@chiuyong That seems fine I think
Peter Phillips
@Cowboy59
Jan 12 2017 00:26
can someone help me trying to put picture into my portfolio page pic is from email </div>
<div class ="col-md-6>
<img src ="IMG_20161231_194152[23].jpg"/>
</div>
</div>
Chiu Yong
@chiuyong
Jan 12 2017 00:26
it's better only put section in the "about us"?
or article is fine?
@dna113p
Peter Phillips
@Cowboy59
Jan 12 2017 00:28
yes its for about page but pic wont show up
spuaca
@spuaca
Jan 12 2017 00:28
Richard Stallman eats his feet
beat that Linus!
DJ Pelland
@dna113p
Jan 12 2017 00:29
@chiuyong I think it is up to you depending on what content you put in there. Usually i think article would be used specifically for an article though
So it really dpends on the content
spuaca
@spuaca
Jan 12 2017 00:30
My Bootstrap navbar toggle button is not working on CodePen, when I click on t, I have included both Bootstrap.css and Bootstrap.js. Can somebody help me please?
DJ Pelland
@dna113p
Jan 12 2017 00:30
@Cowboy59 You image has to be hosted somewhere other than on you computer
Chiu Yong
@chiuyong
Jan 12 2017 00:30
If it's only text to put in the section "about us"?
Peter Phillips
@Cowboy59
Jan 12 2017 00:31
ok so I could use pic from GitHub and it would work?
DJ Pelland
@dna113p
Jan 12 2017 00:32
@chiuyong If it is just text in an about us you could probably just use <section> semantic html is strange to me, it seems very subjective to me
Chiu Yong
@chiuyong
Jan 12 2017 00:32
what is an article?
what is to put in ?
DJ Pelland
@dna113p
Jan 12 2017 00:33
@Cowboy59 Yes you could. IF you get the image URL (right click > copy image address) that address goes into your source
into the src=""
Peter Phillips
@Cowboy59
Jan 12 2017 00:33
ok ty
DJ Pelland
@dna113p
Jan 12 2017 00:33
@chiuyong Just like a self contained article. Like a news story, or a blog post.
Chiu Yong
@chiuyong
Jan 12 2017 00:35
@dna113p I want to put a Carousel
MROB0T
@MROB0T
Jan 12 2017 00:36
whats more important to learn python or node?
DJ Pelland
@dna113p
Jan 12 2017 00:37
@chiuyong You could use a <section> for carousel for sure.
Chiu Yong
@chiuyong
Jan 12 2017 00:37
no need article tag, right?
DJ Pelland
@dna113p
Jan 12 2017 00:37
no
Chiu Yong
@chiuyong
Jan 12 2017 00:37
ok
got it
if I build a section to talk about the team who developed a page
is necessary to put article?
DJ Pelland
@dna113p
Jan 12 2017 00:38
@MROB0T Neither is more important to learn. It entirely depends on what you want to do
MROB0T
@MROB0T
Jan 12 2017 00:39
than what would you recommend if i want to go into the gaming side of code
DJ Pelland
@dna113p
Jan 12 2017 00:40
@chiuyong Article would be good for talking about the team.
Chiu Yong
@chiuyong
Jan 12 2017 00:40
There I just need to put photos and some small text
so is it ok to put article tag inside a section tag?
DJ Pelland
@dna113p
Jan 12 2017 00:41
@MROB0T I haven't developed a game before. You can make a game in any language though.
MROB0T
@MROB0T
Jan 12 2017 00:41
@dna113p ok thanks
CamperBot
@camperbot
Jan 12 2017 00:42
mrob0t sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @dna113p |http://www.freecodecamp.com/dna113p
DJ Pelland
@dna113p
Jan 12 2017 00:42
@MROB0T Look into a program called Unity, it is a tool to help build games and they have lots of tutorials
@MROB0T It will be difficult to learn but rewarding
MROB0T
@MROB0T
Jan 12 2017 00:44
@dna113p ok ill look into it thanks alot
CamperBot
@camperbot
Jan 12 2017 00:44
mrob0t sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:warning: mrob0t already gave dna113p points
DJ Pelland
@dna113p
Jan 12 2017 00:45
@chiuyong Yes it is fine if that helps define the meaning of the content of each of those tags. Like I said, it is really up to you the semantic html tags are just to help define the meaning of tags better
Jose Irizarry
@Stjose
Jan 12 2017 00:45
good night
Chiu Yong
@chiuyong
Jan 12 2017 00:46
@dna113p okaay thank you a lot :D
CamperBot
@camperbot
Jan 12 2017 00:46
chiuyong sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @dna113p |http://www.freecodecamp.com/dna113p
Adam Morris
@Adam-Morris
Jan 12 2017 00:59
Can anyone check that this works? https://codepen.io/Amorris/pen/ygYRWo
DJ Pelland
@dna113p
Jan 12 2017 01:00
Works for me!
Adam Morris
@Adam-Morris
Jan 12 2017 01:01
@dna113p Are you using Chrome?
DJ Pelland
@dna113p
Jan 12 2017 01:01
yeahj
Adam Morris
@Adam-Morris
Jan 12 2017 01:02
@dna113p Cool, thanks!
CamperBot
@camperbot
Jan 12 2017 01:02
:cookie: 351 | @dna113p |http://www.freecodecamp.com/dna113p
adam-morris sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
MacGuffin
@MacGuffin1990
Jan 12 2017 01:05
hello everyone
i have a problem with "Show the Local Weather"

$(document).ready(function(){
$("button").click(function(){

$.getJSON("http://api.openweathermap.org/data/2.5/weather?id=1795270&appid=fee562ea07bcf56b0d00d56f4a4e5874",function(value){
var r=JSON.parse(value);
var curname=r.name;
$(".span1").text="name:"+curname;
}

)

});

});

i write the code but got nothing
Adel
@AdelMahjoub
Jan 12 2017 01:09
@MacGuffin1990 post a link to your codepen
MacGuffin
@MacGuffin1990
Jan 12 2017 01:09
ok @AdelMahjoub
herrifransisca
@herrifransisca
Jan 12 2017 01:10

hello,

my code before:
<!-- bootstrap 4.0.0-alpha.2 -->
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">Keynote: Internet of Things</h4>
<span class="label label-default label-pill pull-xs-right">09:00am</span>
NodeStramus
</li>
</ul>

now, I'm using bootstrap 4.0.0-alpha.6 and that code doesn't work anymore, anyone can help me out ?

Thank you very much :)

Adel
@AdelMahjoub
Jan 12 2017 01:11
@MacGuffin1990 first, add jquery under javascript tab under code pen settings
MacGuffin
@MacGuffin1990
Jan 12 2017 01:12
ok @AdelMahjoub
second? @AdelMahjoub
FreeHandz
@FreeHandz
Jan 12 2017 01:16
hey guys, can somebody check out my calculator? I want to log out the numbers to the "display" field, but somehow it's not working.
http://codepen.io/FreeHandz/full/egZzrr/
Walid Ashri
@walidashri
Jan 12 2017 01:17
@FreeHandz document.GetElementsById the right document.getElementsById
FreeHandz
@FreeHandz
Jan 12 2017 01:18
o yeah
working
thanks @walidashri
CamperBot
@camperbot
Jan 12 2017 01:18
freehandz sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 840 | @walidashri |http://www.freecodecamp.com/walidashri
Adel
@AdelMahjoub
Jan 12 2017 01:19
@MacGuffin1990 syntax error
@MacGuffin1990 $(".span1").text(curname);
@MacGuffin1990 and no need to use JSON.parse
MacGuffin
@MacGuffin1990
Jan 12 2017 01:20
why?
Adel
@AdelMahjoub
Jan 12 2017 01:20
@MacGuffin1990 try it and found out :+1:
Tam Nguyen
@bankplank
Jan 12 2017 01:20
Does anyone know if wikipedia api will timeout if you make too many request?
MacGuffin
@MacGuffin1990
Jan 12 2017 01:21
@AdelMahjoub thank u so much
CamperBot
@camperbot
Jan 12 2017 01:21
macguffin1990 sends brownie points to @adelmahjoub :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @adelmahjoub |http://www.freecodecamp.com/adelmahjoub
Adel
@AdelMahjoub
Jan 12 2017 01:21
@MacGuffin1990 you are welcome
MacGuffin
@MacGuffin1990
Jan 12 2017 01:21
u are very nice!
@AdelMahjoub
Adel
@AdelMahjoub
Jan 12 2017 01:22
@MacGuffin1990 thanks
CamperBot
@camperbot
Jan 12 2017 01:22
:cookie: 254 | @macguffin1990 |http://www.freecodecamp.com/macguffin1990
adelmahjoub sends brownie points to @macguffin1990 :sparkles: :thumbsup: :sparkles:
marcela123
@marcela123
Jan 12 2017 01:22
how do I move picture and sentence to the middle of the line in the box?
cjljohnson
@cjljohnson
Jan 12 2017 01:24
Vertically or horixontally?
marcela123
@marcela123
Jan 12 2017 01:25
to the right
Callum Ward
@callumquick
Jan 12 2017 01:29
Hi can someone who actually knows what they're doing with react please look at this codepen and tell me why the <p> tag in the Markdown component isn't being rendered on the page by ReactDOM, thanks http://codepen.io/callumquick/pen/BpKLOx?editors=1111
Nvm, I've sorted it for now
Tam Nguyen
@bankplank
Jan 12 2017 01:37
Hello, can someone look at my code? Sometimes it will fetch the JSON data, and other times nothing.
https://codepen.io/Tamn1988/pen/QdjJqO?editors=1011
DJ Pelland
@dna113p
Jan 12 2017 01:44
@callumquick I don't see any react
Callum Ward
@callumquick
Jan 12 2017 01:45
@dna113p Yeah sorry I fixed the issue with react, then realised react was overkill in the first place
Tony Miri
@TonyMiri
Jan 12 2017 01:46
Maybe I'll have better luck here. I'm working on the Simon game, and I need to make a smaller circle in the center for the controls and logo and whatnot. I'm pretty sure I can get it to work by using the relative positioning or floating it, but I'm not sure exactly which would be better. I also had hoped to make it responsive, but the way it's working now, I can't set my colored wedges with percentage based sizes for some reason. http://codepen.io/TonyMiri/pen/WRQYgM
Tom
@moT01
Jan 12 2017 02:00
@FatTone225 im working on simon as well, ...i got my controls in the middle with absolute position
Kaz Baig
@kbaig
Jan 12 2017 02:01
Could somebody give me a hand on the twitch.tv challenge?
Sara Soliman
@solimansara
Jan 12 2017 02:01
Hi, I found this drop menu code that i tried to apply in my portfolio page but it is not working. can someone please help me out? http://codepen.io/Solimansara/pen/YNzXJp?editors=1000
Tony Miri
@TonyMiri
Jan 12 2017 02:01
@moT01 Is yours responsive for mobile?
Tom
@moT01
Jan 12 2017 02:01
not sure if its the way you would want to go
yes
i made it as responsive as it gets
Tony Miri
@TonyMiri
Jan 12 2017 02:02
Did you use bootstrap?
Tom
@moT01
Jan 12 2017 02:02
no
Tony Miri
@TonyMiri
Jan 12 2017 02:02
Flexbox?
Tom
@moT01
Jan 12 2017 02:02
yes
Tony Miri
@TonyMiri
Jan 12 2017 02:02
I see.
And when you set the relative position, you use percentage?
Tom
@moT01
Jan 12 2017 02:02
still learning, flexbox and positioning, but i got it to work
i used a formula, % - vw or something, lemme paste it to codepen and ill link it
Tony Miri
@TonyMiri
Jan 12 2017 02:03
@moT01 Thanks!
CamperBot
@camperbot
Jan 12 2017 02:03
:cookie: 453 | @mot01 |http://www.freecodecamp.com/mot01
fattone225 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
Tony Miri
@TonyMiri
Jan 12 2017 02:06
@solimansara It looks like you have 2 sets of code for navbars?
Walid Ashri
@walidashri
Jan 12 2017 02:07
@solimansara u need to load jQuery and bootstrap.js
Tony Miri
@TonyMiri
Jan 12 2017 02:09
@moT01 Aye it looks like I've got some learning to do. Thanks again.
CamperBot
@camperbot
Jan 12 2017 02:09
fattone225 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:warning: fattone225 already gave mot01 points
Tony Miri
@TonyMiri
Jan 12 2017 02:09
@walidashri @solimansara And jQueryUI no?
Tom
@moT01
Jan 12 2017 02:10
@FatTone225 im not sure im doing things the way theyre supposed to be done, but im pretty happy with how it's looking so far
Tony Miri
@TonyMiri
Jan 12 2017 02:10
Yeah it's looking good. You're making more progress than me so you're doing something right lol
uriznik
@uriznik
Jan 12 2017 02:13
@FatTone225 thought I'd better respond too :) http://stackoverflow.com/questions/22406661/how-to-make-one-circle-inside-of-another-using-css has a few examples that might be useful
Tony Miri
@TonyMiri
Jan 12 2017 02:13
@uriznik Awesome! I'll check it out. Thanks :smile:
CamperBot
@camperbot
Jan 12 2017 02:13
fattone225 sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 482 | @uriznik |http://www.freecodecamp.com/uriznik
Sara Soliman
@solimansara
Jan 12 2017 02:17
@walidashri I found this code at w3schools.com for bootstrap...i didnt learn jquery yet so i dont want to use it...is the code i have in jquery?
Kaz Baig
@kbaig
Jan 12 2017 02:18
Hey guys, I'm working on the twitch app. Can't seem to figure out why my stream names aren't becoming links to their channels. Help would be appreciated. https://codepen.io/kbaig/pen/vgGXyX?editors=0010
Tom
@moT01
Jan 12 2017 02:20
@solimansara no, jquery is a javascript library, it would go in the js tab on the far right
uriznik
@uriznik
Jan 12 2017 02:21
@kbaig I think the logic to match up the channel may be at fault
Tony Miri
@TonyMiri
Jan 12 2017 02:21
@kbaig It looks like your channelObj variable is defined inside that for loop
Also, it looks like that for loop would finish and then you push channlObj to channels
So you'd be pushing the entire array of names
Sara Soliman
@solimansara
Jan 12 2017 02:22
So how can i create a bootstrap navigation bar that collapse without using javascript?
Kaz Baig
@kbaig
Jan 12 2017 02:24
@FatTone225 the object 'channels' looks fine if you log it at the very bottom though
6thSen
@6thSen
Jan 12 2017 02:24
hey guys need some help with my code. I'm working on the random quote generator, and I'm able to generate a random quote when my page first loads up, but when I try to generate a new one by clicking on the button, it doesn't work. Not sure what's wrong. I would really appreciate the help.
$(document).ready(function () {

    // on page load works okay
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function (json) {
        $("#quote-content").html(json[0].content);
        $("#quote-title").html(json[0].title);
    });

    // button click action
    $("#get-quote-btn").on("click", function () {
        $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function (json) {
            $("#quote-content").html(json[0].content);
            $("#quote-title").html(json[0].title);
        });
    });
});
uriznik
@uriznik
Jan 12 2017 02:25
@kbaig it might be the you do the second getJSON to get the URL and then use the URL before the callback has actually happened
Tony Miri
@TonyMiri
Jan 12 2017 02:25
@kbaig Yep I was looking at it wrong
uriznik
@uriznik
Jan 12 2017 02:27
@kbaig so you could move any code that relies on the channel(i) call to be put inside the channel() function getJSON callback
Walid Ashri
@walidashri
Jan 12 2017 02:27
@solimansara you'll not use it but the libraries must be in ur project check the w3school examples the files are loaded only
@solimansara the bootstrap dropdown needs bootstrap.js to work and bootstrap.js needs Jquery :)
Tom
@moT01
Jan 12 2017 02:29
@6thSen i think i had that problem, and i think i fixed it by doing a .ajax instead of .getjson and used a cache:false setting, might be able to set that in the .getjson as well, ...not sure
6thSen
@6thSen
Jan 12 2017 02:30
@moT01 aah, let me rework with $.ajax. thanks!
CamperBot
@camperbot
Jan 12 2017 02:30
6thsen sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @mot01 |http://www.freecodecamp.com/mot01
Sara Soliman
@solimansara
Jan 12 2017 02:32
@walidashri I am confused lol....but do i need to include this is the settings page? src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"
*in
Walid Ashri
@walidashri
Jan 12 2017 02:32
@solimansara yes and also the bootstrap.js
Sara Soliman
@solimansara
Jan 12 2017 02:33
@walidashri ok...i will try it
Kaz Baig
@kbaig
Jan 12 2017 02:34
@uriznik not sure if that's it. I say that because if you log an object at the end, you see the url. If you try to just log the url, you get nothing
Sara Soliman
@solimansara
Jan 12 2017 02:42
Thank you @walidashri
CamperBot
@camperbot
Jan 12 2017 02:42
solimansara sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:cookie: 842 | @walidashri |http://www.freecodecamp.com/walidashri
uriznik
@uriznik
Jan 12 2017 02:42
@kbaig where are you logging from? I have the links working by moving things inside the second callback
Sara Soliman
@solimansara
Jan 12 2017 02:43
@walidashri The menu is now working however it doesn't link to the pages...What is missing? http://codepen.io/Solimansara/pen/YNzXJp?editors=1000
Tom
@moT01
Jan 12 2017 02:46
@solimansara i think they are working, all your pages are just condensed at the top
Sara Soliman
@solimansara
Jan 12 2017 02:47
@moT01 I used to be able to see all the pages....how can i stretch them again?
uriznik
@uriznik
Jan 12 2017 02:48
@kbaig do you know that getJSON() doesn't wait till the request has been made and the callback run?
Tom
@moT01
Jan 12 2017 02:53
im not sure, what did you change since then, ...one of those bootstrap classes im guessing
Sara Soliman
@solimansara
Jan 12 2017 02:56
@moT01 Can you please review, i am not sure what is wrong that it is not displaying all the page! <!-- home page -->
<div id="home">
<h1> Sara Soliman</h1>
<p> Work Smarter... Not Harder</p>
</div>
sorry this what i wanted to paste: http://codepen.io/Solimansara/pen/YNzXJp?editors=1100
uriznik
@uriznik
Jan 12 2017 02:57
@solimansara you're not closing the <nav> tag
Sara Soliman
@solimansara
Jan 12 2017 02:59
Thank you very much @uriznik that worked !!!
CamperBot
@camperbot
Jan 12 2017 02:59
:cookie: 483 | @uriznik |http://www.freecodecamp.com/uriznik
solimansara sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
Walid Ashri
@walidashri
Jan 12 2017 03:06
@solimansara sorry was not here . and u have typo here <div id= "portfolio"> extra # before id
Sara Soliman
@solimansara
Jan 12 2017 03:10
@walidashri No problem, thank you for your help anyways and i did fix the typo!!
CamperBot
@camperbot
Jan 12 2017 03:10
solimansara sends brownie points to @walidashri :sparkles: :thumbsup: :sparkles:
:warning: solimansara already gave walidashri points
Walid Ashri
@walidashri
Jan 12 2017 03:11
@solimansara :+1:
Sara Soliman
@solimansara
Jan 12 2017 03:13
I am sorry, one more question, how is it possible that my portfolio page directed to the contact page??? http://codepen.io/Solimansara/pen/YNzXJp?editors=1100
uriznik
@uriznik
Jan 12 2017 03:23
@solimansara it's moving to portfolio but that section isn't very tall so you can't see it and the navbar is sitting above it
Sara Soliman
@solimansara
Jan 12 2017 03:25
@uriznik got it!
Adam Morris
@Adam-Morris
Jan 12 2017 03:32
Any comments or suggestions? http://codepen.io/Amorris/pen/ygYRWo
Gururaj Birajdar
@grajsb
Jan 12 2017 03:51
Hello
i have a problem with my quote machine
Long Vu
@longorjames
Jan 12 2017 03:59
soooo I'm on Build a Personal Portfolio Webpage and I know I'm not supposed to look at the code of the example, but I did cause I'm currious
and they use CSS and JS
even though I haven't gotten to the JS part yet
also from the smaller project there was no example of clickable things that would scroll down to a section of the page
which is a requirement for this project, are we supposed to be expected to do this already, or are we expected to just look up and find out?
Paulo Tokimatu
@paulotokimatu
Jan 12 2017 04:02
@longorjames You are expected to do some research, just search in google or stackoverflow
You can go back to this project later too, if you prefer
uriznik
@uriznik
Jan 12 2017 04:03
@grajsb your ajax request is probably getting cached
@grajsb $.ajaxSetup({ cache: false }); if you run that once then it'll disable caching (which you may not always want to do)
Jacob Leatherwood
@dadleatherwood
Jan 12 2017 04:07
I am having trouble with a couple of things starting my tribute page. The first is probably simple, just changing the color of my title. The second is putting two columns next to one another. http://codepen.io/dadleatherwood/pen/KazaLQ
Gururaj Birajdar
@grajsb
Jan 12 2017 04:11
@uriznik tweetquote button tweets populate tweet with html elements and an additional codepen url i am not sure where it is coming from
@dadleatherwood if ur column doesnt go side by side...maximize ur window
Paulo Tokimatu
@paulotokimatu
Jan 12 2017 04:19
@dadleatherwood And your title color is not changing because the h1 has the property of inherit the color from parents
JD Tadlock
@jdtdesigns
Jan 12 2017 04:23
I'm live if anybody wants to watch or ask questions https://www.liveedu.tv/jddesign/ ;)
Long Vu
@longorjames
Jan 12 2017 04:23
when I'm using CodePen there's 3 boxes, HTML, CSS, and JS. If I put a <style></style> in CSS, and reference it in my HTML does the styles work for the HTML?
or do the boxes not cross into eachother
Robin
@LuckyRabbits
Jan 12 2017 04:44
I do believe that you would first set your css <style></style> and then reference it inside of your html. @longorjames
Long Vu
@longorjames
Jan 12 2017 04:45
@LuckyRabbits thanks
CamperBot
@camperbot
Jan 12 2017 04:45
longorjames sends brownie points to @luckyrabbits :sparkles: :thumbsup: :sparkles:
:cookie: 38 | @luckyrabbits |http://www.freecodecamp.com/luckyrabbits
Robin
@LuckyRabbits
Jan 12 2017 04:46
you're welcome @longorjames
Nathan Parsons
@10milliondollarwebpage
Jan 12 2017 05:00
Hey guys I am wondering what a user story is, I just started building codepen.io apps
Long Vu
@longorjames
Jan 12 2017 05:14
user story is what the user who is going to open your file and look at it, and what they will see
pretty much their view point
@unlawfulspoonisback @longorjames
user story is what the user who is going to open your file and look at it, and what they will see
pretty much their view point
@unlawfulspoonisback the "user story" will appear in CodePen on the side similar to the FreeCodeCamp has the little phone screen on the side next to the coding section
charles
@code9ja
Jan 12 2017 05:51
hi guys
I just finished my tribute page
and I would like to share it
what do you think
Sorin Ruse
@sorinr
Jan 12 2017 05:56
@code9ja move what you have between <style></style> into the css panel of codepen. try to center align the img and text
@code9ja what is supposed to do your <input type="text"> ?
Aldair
@ald1413
Jan 12 2017 06:08
Hello can anyone help me with the local weather app? I dont know what i am doing wrong (probably everything haha), my api request for the openweather website does not bring me back anything
http://codepen.io/ald1413/pen/MJayro?editors=1111
Sorin Ruse
@sorinr
Jan 12 2017 06:11
@ald1413 make it http://api.openweathermap.......
Aldair
@ald1413
Jan 12 2017 06:14
@sorinr Sorry I dont follow
Sorin Ruse
@sorinr
Jan 12 2017 06:15
@ald1413 where you call the openweather api just put http:// in front of the url.
Aldair
@ald1413
Jan 12 2017 06:16
@sorinr Wow, I feel so dumb right now hahaha
@sorinr Thank you that worked
CamperBot
@camperbot
Jan 12 2017 06:16
ald1413 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1069 | @sorinr |http://www.freecodecamp.com/sorinr
charles
@code9ja
Jan 12 2017 06:17
@sorinr Thanks. I do that now
CamperBot
@camperbot
Jan 12 2017 06:17
code9ja sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1070 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 12 2017 06:19
@ald1413 welcome. it happens. don't worry. you can even make it like "//api.openweathermap.org/d..." and that means the ajax call will try first http protocol or https if available
twitter button not working
Sorin Ruse
@sorinr
Jan 12 2017 06:38
@shenoyabhijith its working after you make the first quote call
@shenoyabhijith because when you load the pen your var tweet = $('#getMessage').text(); is empty
DarylKnapp
@DarylKnapp
Jan 12 2017 06:43
why wont background-image: url(images/FinalGInal.png); work at all for importing an image?
Sorin Ruse
@sorinr
Jan 12 2017 06:45
@DarylKnapp it will probably work on your localhost but not on codepen. on codepen your url must point to an external resource. you have to upload that img some place and put that url in there
DarylKnapp
@DarylKnapp
Jan 12 2017 06:50
@sorinr Hey! im on my localhost, im not on codepen
do i still have to declare with in html as well?
Sorin Ruse
@sorinr
Jan 12 2017 06:51
@DarylKnapp if you look into the dev tools can u see if the img was loaded or not?
@DarylKnapp because it maybe a relative path to the image problem or if it correctly loads but not showing it means you have to give to the element for witch you aplay that background-image some width and height
DarylKnapp
@DarylKnapp
Jan 12 2017 06:57
@sorinr Here's what going on now since i declared the img in HTML
http://i68.tinypic.com/28r0bjo.png
Sorin Ruse
@sorinr
Jan 12 2017 07:03
@DarylKnapp if you placed it in html using an <img> tag its not the same as declaring it as background-image. the img tag will try to accommodate the space provided by his parent container while background-image applied to the parent container will try to take full width/height of it depending also on other properties like background-size: cover or fill etc
r2d2
@UsamaHameed
Jan 12 2017 07:07
Anyone familiar with flexbox?
Sorin Ruse
@sorinr
Jan 12 2017 07:08
@UsamaHameed whats the problem?
r2d2
@UsamaHameed
Jan 12 2017 07:10
@sorinr
I have got 5 flex-items, I have set the width of each to 20vw. No margins or padding. They should fit on one line right?
Sorin Ruse
@sorinr
Jan 12 2017 07:18
@UsamaHameed give me 5min. have to finish something. i think i got what u mean. you have only 4 on a row instead of 5. right?
r2d2
@UsamaHameed
Jan 12 2017 07:19
Yes @sorinr
Jamestrey
@Jamestrey
Jan 12 2017 07:27
Hey guys brand new to this room just wanted to introduce my self. Still a baby learning to walk in front end, and I am so thankful for this room!
Sorin Ruse
@sorinr
Jan 12 2017 07:29
@UsamaHameed you can try it like:
.flex-item {
  min-height: 50vh;
  font-size: 5em;
  flex-basis: 20%;
}
r2d2
@UsamaHameed
Jan 12 2017 07:40
@sorinr Okay it worked. i used flex-basis: 20vw; but when I reloaded the page after saving, it is back to 4 elements per row.
@Jamestrey Welcome. Good to have you hear.
blob
After reloading the page, I got this
blob
It is set to auto-update. I don't know why is this happening.
Changed to flex-basis: 20% and got this
r2d2
@UsamaHameed
Jan 12 2017 07:45
blob
Changed back to flex-basis: 20vw and the layout does not change as expected.
Sorin Ruse
@sorinr
Jan 12 2017 07:46
@UsamaHameed here is the forked example
r2d2
@UsamaHameed
Jan 12 2017 07:46
blob
But when I reload without changing any thing, the layout is back to 4 divs per row
blob
It works sometimes and then it does not :confounded:
@sorinr I just forked the codepen you sent me. it is back to 4 divs per row :/
I think there is something wrong with codepen @sorinr
Sorin Ruse
@sorinr
Jan 12 2017 07:52
@UsamaHameed here what i get with that pen:
Screenshot from 2017-01-12 09-51-10.png
abhijith shenoy
@shenoyabhijith
Jan 12 2017 07:52
status bar
has a gap
how to remove the default padding
Sorin Ruse
@sorinr
Jan 12 2017 07:56
@shenoyabhijith make h1{ margin: 0;}
abhijith shenoy
@shenoyabhijith
Jan 12 2017 07:57
worked!
thanks @sorinr
CamperBot
@camperbot
Jan 12 2017 07:57
shenoyabhijith sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1071 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 12 2017 07:58
@shenoyabhijith welcome
abhijith shenoy
@shenoyabhijith
Jan 12 2017 07:59
:+1:
how can i just move the text
without effecting the block
abhijith shenoy
@shenoyabhijith
Jan 12 2017 08:05
i want some padding around the weather app

padding

Sorin Ruse
@sorinr
Jan 12 2017 08:22
@shenoyabhijith you can add text-align: center; to your h1
@shenoyabhijith if you want it centered ofc
abhijith shenoy
@shenoyabhijith
Jan 12 2017 08:23
okay
how to make secondary block go behind content
Avinash camma
@avinashcamma
Jan 12 2017 08:43
hey do we get feedback? on our project from freeCodeCamp?
Sorin Ruse
@sorinr
Jan 12 2017 08:45
@shenoyabhijith add position: relative; to .content
Avinash camma
@avinashcamma
Jan 12 2017 08:47
Any one?
Sorin Ruse
@sorinr
Jan 12 2017 08:51
for?
Sorin Ruse
@sorinr
Jan 12 2017 08:57
@avinashcamma oh. haven't seen your question above. just share your pen link and we will give you feedback on it :)
h1tag
@h1tag
Jan 12 2017 08:58
Hey, I'm on the Show the Local Weather project, I'm using the recommended [Open Weather API]: (https://openweathermap.org/current#geo) to get the weather info. I'm getting this error: http://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=bbcfc4b3596f6707ba393430fbfbcfb6 Failed to load resource: the server responded with a status of 502 (Bad Gateway). Here's my codepen: (http://codepen.io/FortMax/pen/wgGdGR)
Sorin Ruse
@sorinr
Jan 12 2017 09:01
@fortMaximus you can't use openweather along with geolocation coz geolocation works only on https and free openweather account works on http only
h1tag
@h1tag
Jan 12 2017 09:02
@sorinr what's the alternative?
Sorin Ruse
@sorinr
Jan 12 2017 09:03
@fortMaximus you can use an ip api location along with openweather or use another weather api that supports https like apixu.com or others
@fortMaximus the bad thing using ip location is that if a user has a dynamic ip you may get wrong location most of the time
h1tag
@h1tag
Jan 12 2017 09:06
Are you sure (that you can't use them with each other)? I mean aren't they (geolocation and openweather api) being executed in separate requests, you get the data (decimal) from one (geolocation) and you put in a another (openweather api request)
@sorinr
Sorin Ruse
@sorinr
Jan 12 2017 09:11
@fortMaximus try loading your pen over https and console.log(position) before lat = position.coords.latitude; and you will see you get the position coordinates. after in the console using dev tools you will see something like:
Mixed Content: The page at 'https://codepen.io/FortMax/pen/wgGdGR' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://api.openweathermap.org/data/2.5/weather?lat=undefined&lon=undefined&appid=bbcfc4b3596f6707ba393430fbfbcfb6'. This request has been blocked; the content must be served over HTTPS.
h1tag
@h1tag
Jan 12 2017 09:16
@sorinr I also think that codepen itself doesn't accept non https requests, because on the random quote generator project, I was using an api url with http, the console was saying something like: it doesn't allow request over http, i.e. it must be secure (https). Idk, I'm confused
Sorin Ruse
@sorinr
Jan 12 2017 09:18
@fortMaximus codepen works both on http and https. but if you load the pen over http and you make ajax calls using https it will not work. and viceversa
h1tag
@h1tag
Jan 12 2017 09:21
yea, true. I remember that this maybe happened after I added the tweet button (which uses https) to the random quote generator project
abhijith shenoy
@shenoyabhijith
Jan 12 2017 09:22
how to make secondary block
appear to 100px top
6thSen
@6thSen
Jan 12 2017 09:24
hi anybody else experience this error when trying to call an API from Codepen?
XMLHttpRequest cannot load https://crossorigin.me/http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&_=1484213003372. The 'Access-Control-Allow-Origin' header contains multiple values '*, https://s.codepen.io', but only one is allowed. Origin 'https://s.codepen.io' is therefore not allowed access.
Sorin Ruse
@sorinr
Jan 12 2017 09:30
@6thSen just load your pen over http not https and remove the https://crossorigin.me/ from your url and it will work
6thSen
@6thSen
Jan 12 2017 09:32
@sorinr you rock! thanks!
CamperBot
@camperbot
Jan 12 2017 09:32
6thsen sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1072 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 12 2017 09:34
@6thSen welcome. i would advice you to put all the logic of requesting a new quote into a separate function like getQuotes(logic in here) and call this function in docready and also when you click the new quote btn
search icon
not aligning r8
i want it parallel to weather
right center
sennator
@sennator2
Jan 12 2017 10:17
hi guys
do we have to know the stuff we copy when we use API
i mean i could not write that stuff by myself in a decade
or point is just to understand what it do
?
Sorin Ruse
@sorinr
Jan 12 2017 10:19
@shenoyabhijith center to what?
Sorin Ruse
@sorinr
Jan 12 2017 10:29
@sennator2 try to read the docs, look at the examples given by each api and understand what will be the response you get when calling that api. most of the apis have pretty much the same kind of url structure
sennator
@sennator2
Jan 12 2017 10:31
@sorinr thanks
CamperBot
@camperbot
Jan 12 2017 10:31
sennator2 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1073 | @sorinr |http://www.freecodecamp.com/sorinr
sennator
@sennator2
Jan 12 2017 10:32
im pretty much overwhelmed with the stuff i just saw
so not sure if we are supose to be able to come up with this stuff by ourselves
or we just need to know how to manipulate this
Sorin Ruse
@sorinr
Jan 12 2017 10:33
@sennator2 don't worry about that. its normal for the beginning. with time it will seem a piece of cake
sennator
@sennator2
Jan 12 2017 10:34
@sorinr hope so :)
Sorin Ruse
@sorinr
Jan 12 2017 10:34
@sennator2 read a lot, practice/fail a lot and step by step you will learn.
sennator
@sennator2
Jan 12 2017 10:36
@sorinr can you tell me why it wont display a second quote when i click the button?
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 10:37
@shenoyabhijith what do you you want it just beside the weather text or what
Sorin Ruse
@sorinr
Jan 12 2017 10:40
@sennator2 why do u call http://wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1 on click event? and not same api http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=
Clyde Lobo
@oppiniated
Jan 12 2017 10:41
@sennator2 your are missing http://quotesondesign.com in your ajax call
sennator
@sennator2
Jan 12 2017 10:42
@oppiniated @sorinr thanks :))
Sorin Ruse
@sorinr
Jan 12 2017 10:42
@sennator2 i would place all api call and logic into an unique function like getQuotes(logic in here) and call this function on both doc ready or btn click event
CamperBot
@camperbot
Jan 12 2017 10:42
sennator2 sends brownie points to @oppiniated and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: sennator2 already gave sorinr points
:cookie: 492 | @oppiniated |http://www.freecodecamp.com/oppiniated
sennator
@sennator2
Jan 12 2017 10:44
@sorinr i will do that as soon as I figure out what it means :D
@sorinr just kidding i'll give it a try :)
Tomas
@TOMEJUS
Jan 12 2017 10:44
Hey everyone! hope everyone is fine!
Sorin Ruse
@sorinr
Jan 12 2017 10:45
@sennator2 :+1:
@TOMEJUS hi
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 10:46
@TOMEJUS hi
Tomas
@TOMEJUS
Jan 12 2017 10:47
Im working on my portfolio assignment, and I was wondering if someone could help me about bootstrap, Im stuck with this for a few hours already, just cant wrap my head about it.
I can't figure out how to eliminate empty spaces using bootstrap column, basically I create div with class col-xs-4 and inside I put an IMG, everything's is fine (I center the image with center-block). However if I put a border around the image it leaves the empty spaces from both sides (since the img was centralized) how to get rid of these empty spaces? Problem isn't the border (as I can put it directly on image) but about wrapper itself, I can't add another wrapper because it will still have the size of col-xs-4, and ofcourse can't put a fixed width which would defeat the purpose of bootstrap. Any suggestions? I imagine it may be confusing, so there is an image with mark-up: https://s28.postimg.org/ns6ynkrn1/emptyspaces_TRUE.png what I want to achieve is: https://s27.postimg.org/kvh3a3fab/emptyspaces.png (without using IMG tag itself, but rather putting border on wrapper and eliminating white spaces) is that even possible?
Not sure if you can see the pictures, if anyone is even alive/checking it. let me know! thanks in advance
Sorin Ruse
@sorinr
Jan 12 2017 10:50
@TOMEJUS have you used class="container" ?
Tomas
@TOMEJUS
Jan 12 2017 10:52

Yes I am, well container-fluid

It goes like this:

container-fluid
row
col-xs-4
img tag

Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 10:55
@TOMEJUS link to your code please
Sorin Ruse
@sorinr
Jan 12 2017 10:56
@TOMEJUS take a look at this example to understand whats going on
Tomas
@TOMEJUS
Jan 12 2017 10:58
http://codepen.io/monkevicius/full/ygevVY/ A link, after you hoover over the image u'll get the idea, WHY i need this. I want to scale image bigger within the same dimensions, but since I have white spaces IT FILLS spaces and then works like it should, so basically if it wouldn't have empty spaces it would be perfectly. Btw, ppreciate all the help guys!
Any other feedback is welcome as well!
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 10:59
@TOMEJUS the image is just scalling and nothing happening
Tomas
@TOMEJUS
Jan 12 2017 11:01
@AkashKumarVerma image is supposed to scale. The idea is: it scales BUT WITHIN its dimensions, now since there is empty spaces it scales TILL IT fills the empty spaces and then continues to scale within its dimensions, but the problem is not there, problem is the wrapper can't figure it out how to eliminate the empty spaces, I believe I am looking the wrong side :(
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:02
@TOMEJUS i am sorry but what empty space are you taking about i can see only red borders and the image scaling inside them
Tomas
@TOMEJUS
Jan 12 2017 11:02
Found it @AkashKumarVerma this is what I want to achieve: http://jsfiddle.net/hashem/7vY7v/ exactly like this, however due to empty spaces it fills them up, which I do not want to happen
@AkashKumarVerma https://s28.postimg.org/ns6ynkrn1/emptyspaces_TRUE.png these spaces, can you see them?
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:04
@TOMEJUS whatbrowser are you using
Tomas
@TOMEJUS
Jan 12 2017 11:04
Chrome, I believe if I'd put bigger size images the issue would go away, but I really want to solve this without doing that :(
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:04
@TOMEJUS no they are not appearing in Firefox50
Tomas
@TOMEJUS
Jan 12 2017 11:05
@AkashKumarVerma That's really weird, since I do understand why there are spaces, when I put image I put it on central align (so there was like 10px each from each side) untouched which I believe is the space
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:06
@TOMEJUS trying adding vendor prefix to transform property in meatime i will take a look at it in chrom
Clyde Lobo
@oppiniated
Jan 12 2017 11:09
@TOMEJUS Those spaces are padding added by the grid framework
Tomas
@TOMEJUS
Jan 12 2017 11:10
@AkashKumarVerma I added prefixes, try now. How's chrome?
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:11
@TOMEJUS ye it is appearing in chrome
Tomas
@TOMEJUS
Jan 12 2017 11:11
@oppiniated I understand that, since they need to take all the space in the row, right? Any ideas how do I get rid of them, or even better just don't select them when applying something?
Sorin Ruse
@sorinr
Jan 12 2017 11:11
@TOMEJUS make
#section3 .col-xs-4 {
  overflow: hidden;
    border: 10px solid red;
  padding: 0;
}
@TOMEJUS if this is what u want
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:12
@sorinr why it is not happeing in firefox
Tomas
@TOMEJUS
Jan 12 2017 11:12
@sorinr I tried that already, didn't seem to work, I'll try again.
@AkashKumarVerma have you tried now? Since I added prefixes? Honestly I have no clue.
Sorin Ruse
@sorinr
Jan 12 2017 11:13
@TOMEJUS here is the working forked pen
Clyde Lobo
@oppiniated
Jan 12 2017 11:14
@TOMEJUS add a class of no gutter to the parent of those elements and then use this css
.no-gutter > [class*='col-'] {
    padding-right:0;
    padding-left:0;
}
Tomas
@TOMEJUS
Jan 12 2017 11:14
Minimaze HTML/CSS/JS (get preview wider) and you will it isn't. Unfortunetely :(
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:14
@TOMEJUS it ok now no spaces appearing
Tomas
@TOMEJUS
Jan 12 2017 11:15
@AkashKumarVerma I still have spaces with full page view, same size
Sorin Ruse
@sorinr
Jan 12 2017 11:15
@TOMEJUS here a snapshot of that pen on ff
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:15
@TOMEJUS no not in my chrome try refresing the page
Clyde Lobo
@oppiniated
Jan 12 2017 11:16
@TOMEJUS created a fork with no padding http://codepen.io/clydelobo/pen/apNEQO
Sorin Ruse
@sorinr
Jan 12 2017 11:17
@TOMEJUS that padding: 0 works on all browsers
Tomas
@TOMEJUS
Jan 12 2017 11:18
blob
As you can see it still shows me the gaps even at yours @sorinr
Sorin Ruse
@sorinr
Jan 12 2017 11:20
Screenshot from 2017-01-12 13-15-06.png
Tomas
@TOMEJUS
Jan 12 2017 11:20

@oppiniated tell me if im doing it right:

HTML added no-gutter class to parent div:
<!-- PORTFOLIO *** -->
<div class="row bg-portfolio no-gutter text-center" id="section3">
<h3>Take a look at my work</h3>
<div class="col-xs-4">
<img src="http://t15.deviantart.net/pc6y5YUm_XVwKsXbaJQSELdzF-c=/fit-in/700x350/filters:fixed_height(100,100):origin()/pre00/cb8b/th/pre/f/2008/054/f/c/home_page_by_esito.jpg" class="img-responsive center-block" alt="Portfolio design 1"/>
</div>

Then just added this css at the bottom:

.no-gutter > [class*='col-'] {
padding-right:0;
padding-left:0;
}

And nothing changed, Am i doing something wrong? You can refresh my pen

Robin
@LuckyRabbits
Jan 12 2017 11:20
Good morning 👋🏼
Tomas
@TOMEJUS
Jan 12 2017 11:20
@LuckyRabbits hello!
Robin
@LuckyRabbits
Jan 12 2017 11:20
✌🏼
Tomas
@TOMEJUS
Jan 12 2017 11:20
@sorinr go to full page view and check what does it show there, thank you
CamperBot
@camperbot
Jan 12 2017 11:20
tomejus sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1074 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 12 2017 11:22
@TOMEJUS even on debug mode works as expected
Screenshot from 2017-01-12 13-22-00.png
Tomas
@TOMEJUS
Jan 12 2017 11:23
@sorin check full page, Iam pretty sure you'll see the spaces :( im starting to believe there is no work around this
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:23
@TOMEJUS They are not appearing in any of my browsers
mow
@LuckyRabbits Good Evening Robin
Sorin Ruse
@sorinr
Jan 12 2017 11:24
Screenshot from 2017-01-12 13-23-54.png
Tomas
@TOMEJUS
Jan 12 2017 11:24
@AkashKumarVerma I believe its maybe because I use larger screen res, wait I'll put smaller images so you'll all should see it then
Sorin Ruse
@sorinr
Jan 12 2017 11:24
@TOMEJUS above the full page of the same pen
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:24
@TOMEJUS maybe that is the problem try setting bacground-size to cover for img tag
Robin
@LuckyRabbits
Jan 12 2017 11:25
@TOMEJUS Good evening Akash
Tomas
@TOMEJUS
Jan 12 2017 11:25
http://codepen.io/monkevicius/full/ygevVY/ please check now, and let me know if you see any spaces @AkashKumarVerma @sorinr @oppiniated
@AkashKumarVerma Im just setting the background color, that's it i hvn't set any width/heights anywhere, and if I do it will defeat the purpose of the bootstrap (although that would work, maybe)
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:27
@TOMEJUS yeah in the first image, no bootstrap dosent deal with resizing image
@TOMEJUS set bacground-size to cover
Tomas
@TOMEJUS
Jan 12 2017 11:30
No change :(
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:34
@TOMEJUS set the width of img to 100% and height to auto and set overflow of parent container to hidden
Tomas
@TOMEJUS
Jan 12 2017 11:36
@AkashKumarVerma but image has nothing to do with, right? so it won't make any difference, correct me if i am wrong, but if'll put text instead of img i'll still have empty spaces (which are column). What I need is a way to somehow select only what is inside it, not whole column, and I hvn't found that yet, if i try to create a wrap it gets the same dimensions as col-xs-4.
blob
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:43

@TOMEJUS sorry i din't get ehat you are trying to say.
since there is no height and width set for img tag it will scale to fit the image inside the parent div, and since the image is taller than it is wider it will have gaps on both the side. Now when we set img width to 100% it's width is set to that of the parent container and on setting background-size to cover the image is stretched to cover the entire width of the img element. Now since image is taller then wider when the image will be scaled to fit the img element it will get taller then the parent element and will flow out of it, to prevent that we set the parent element overflow to hidden.

Hope you got it

Sorin Ruse
@sorinr
Jan 12 2017 11:43
@TOMEJUS why don't you just add that padding: 0 to #section3 .col-xs-4 in order to have the imgs fill your xs-4 column? ofc not working for the first img coz it have 100px by 100px as it is now
Tomas
@TOMEJUS
Jan 12 2017 11:45
@AkashKumarVerma it makes no sense to add width to a img since it is responsive, also, if I add width 100% it totally messes img. :(
@sorinr padding does not change anything in this case, unfortunetely :(
blob
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:47
@TOMEJUS this is the reason i dont like frameworks
Tomas
@TOMEJUS
Jan 12 2017 11:48
IT would work perfectly if id put very big images so it won't have any space to overflow (which example I exactly saw), however if somehow I could manage to put that image into wrapper which are same dimensions as image then it would work as well, but unfor i believe im over my head and im doing something wrong :(
@AkashKumarVerma haha i feel you, this is the first time im working with bootstrap, so I guess i don't know any secrets where I could find a workaround around this
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:49
@TOMEJUS they are messy, it's in their code abstracting something too much creates problems that we cant even se
e
Ajay Tanwar
@ajayt365
Jan 12 2017 11:50
hey can anyone help with html units ? rem,em,px ?
Tomas
@TOMEJUS
Jan 12 2017 11:50
@ajayt365 we'll try!
Ajay Tanwar
@ajayt365
Jan 12 2017 11:50
should i use px or rem ? when shoud i use em etc. ?
Tomas
@TOMEJUS
Jan 12 2017 11:51
@ajayt365 as far as I know, px is the best measure to use, however there are cases when others are better to use.
@ajayt365 so if i were you I would stick with px's for times sake
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:51
Ajay Tanwar
@ajayt365
Jan 12 2017 11:54
see i made this https://ajayt365.github.io/js30/playSound/ page and whenever i switch to responsive design by devtools , it kind of leaves blank grey space at the bottom what could be the reason ?
is it because i am using px ?
Sorin Ruse
@sorinr
Jan 12 2017 11:56
@TOMEJUS how do you see this pen excepting first img?
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 11:56
@ajayt365 because your page is not responsive, The page width is exceeding the viewport width and scrollbar is being added to view content
Sorin Ruse
@sorinr
Jan 12 2017 11:57
@TOMEJUS btw. what kind of monitor are you using?
Tomas
@TOMEJUS
Jan 12 2017 11:58
@sorinr
blob
Sorin Ruse
@sorinr
Jan 12 2017 11:59
@TOMEJUS it is possible that on my laptop display to look ok but on a bigger normal monitor to look like the blob above
Tomas
@TOMEJUS
Jan 12 2017 12:00
@sorinr full HD (1920px)
@sorinr Its a laptop as well
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 12:01
@TOMEJUS you will have to use fixed height for section3
Tomas
@TOMEJUS
Jan 12 2017 12:01
@AkashKumarVerma but the height is alright, isn't it? its just the wideness, right? Im getting lost.
sennator
@sennator2
Jan 12 2017 12:01
How to make my div in which quotes are displayed responsive to the size of quote?
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 12:03

@sennator2 set

min-height: 70%; and max-height: auto;

also add
.new-quote { cursor: pointer; } it will be more user friendly

Sorin Ruse
@sorinr
Jan 12 2017 12:03
@TOMEJUS thats strange. i don't know what to say. with that padding: 0 for me its removing that teal background
Tomas
@TOMEJUS
Jan 12 2017 12:04
@sorinr Yeah, I've spent 3 hours already trying to fix that, but i've came to conclusions that its impossible
sennator
@sennator2
Jan 12 2017 12:04
@AkashKumarVerma thanks man
CamperBot
@camperbot
Jan 12 2017 12:04
sennator2 sends brownie points to @akashkumarverma :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @akashkumarverma |http://www.freecodecamp.com/akashkumarverma
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 12:04
@TOMEJUS those are not paddings that is you image beiing added to fit the container vertically. Do what i said and set the section3 height to some value
sennator
@sennator2
Jan 12 2017 12:05
what a great community this is
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 12:05
@sennator2 welcome
@sennator2 here to help each other
Tomas
@TOMEJUS
Jan 12 2017 12:08
@AkashKumarVerma As I said, even if it would help it looses its responsiveness (just tried) so its no use in any case, but thanks for help. Or im clearly missing something, by any chance could you edit that pen?
CamperBot
@camperbot
Jan 12 2017 12:08
tomejus sends brownie points to @akashkumarverma :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @akashkumarverma |http://www.freecodecamp.com/akashkumarverma
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 12:09
@TOMEJUS fixing the heigth wont affect the responsiveness much if you want to try
Tomas
@TOMEJUS
Jan 12 2017 12:11
@AkashKumarVerma I just tried it, and height just changes the height of the row (which is perfect without any height measures) so I clearly dont get something. :(
Tomas
@TOMEJUS
Jan 12 2017 12:46
I just cant figure it out, can't. PLease if someone will let me know! thanks
Philipp Scholz
@philipp32
Jan 12 2017 13:07
@TOMEJUS can you send your code again?
or your pen?
Tomas
@TOMEJUS
Jan 12 2017 13:08
@philipp32 http://codepen.io/monkevicius/full/ygevVY/ But im still playing with it, so its a bit different, but you can edit it right?
What i am trying now is a workaround with JS, I know its not ideal, but what I will try to accomplish is a add wraper with jQuery hover, then Style it according to picture size and then add transition class and then remove everything :D
Seems like it wont work, but worth a try
Philipp Scholz
@philipp32
Jan 12 2017 13:12
@TOMEJUS take a look at my portfolio. It isn't finished but if you hover over the Obama picture, is that what you want?
Tomas
@TOMEJUS
Jan 12 2017 13:14

@philipp32 similar, but no. I want to change the size of the picture, but keep the picture in the same dimensions.

Nice portfolio by the way! If it really is your first web design you're way ahead of me already! really like it.

Philipp Scholz
@philipp32
Jan 12 2017 13:14
thank you. problem was I did all those pictures in photoshop and then i wanted to put it together. As you can see, not very responsive. :/
kirbyedy
@kirbyedy
Jan 12 2017 13:15
@philipp32 small problems with your page, check the centering and font sizes
Screen Shot 2017-01-12 at 15.13.31.png
Philipp Scholz
@philipp32
Jan 12 2017 13:17
@kirbyedy Atm I am not into the portfolio. I will re-design it later. I do appreciate your input, though.

Hello my fellow campers,
I have a little problem.

function getLocation(){
  // select HTML output elements
  var locationOutput = $('#location-output')
  // get JSON data
  $.getJSON("http://ip-api.com/json",
  // puts JSON data in console       
    function(jsonData){
    // can access JSON data in this function
    console.log(jsonData);
    var city = jsonData.city;    
    var country = jsonData.countryCode;
    locationOutput.html(city + ", " + country);       
    // makes lat & lon properties of windows, thus somewhat global
     var lat = jsonData.lat;
     var lon = jsonData.lon;
    function getWeather(){
      $getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&appid=f9461b5a35486896321efd7ddd9d4bba", function(JSONData){
        console.log(JSONData);
        var temperature = JSONData.weather[0].main.temp;
        temperatureOutput.html(temperature);
        } // end of JSONData function      
               )} // end getWeather
               } // end function (jsonData)
               )} // end function get Location

The second API call either does not work or, my suspicion, the variables lat and lon aren't passed into the URL. Can someone confirm my suspicion?

kirbyedy
@kirbyedy
Jan 12 2017 13:17
if you are using chrome yes its normal
most probably you are getting mixed content error
check your console
geolocation needs secure https:// connections in order to work, yet you are trying to call the api which goes over unsecure http:// connection
Philipp Scholz
@philipp32
Jan 12 2017 13:23
@kirbyedy checked my console. Variables get passed but API doesn't call. How can I circumvent that with a proxy?
kirbyedy
@kirbyedy
Jan 12 2017 13:23
can you give the link to check
does your console log the lat and long ?
Alexeggers
@Alexeggers
Jan 12 2017 13:38
does anyone here have any experience with axios requests? I am trying to set the "Access-Control-Allow-Origin" header, but for some reason wikipedia still rejects my request
Ghulam Shabir
@ghulamshabir
Jan 12 2017 13:39
@Alexeggers try adding &origin=* to the api url
Alexeggers
@Alexeggers
Jan 12 2017 13:41
@ghulamshabir That works, thank you! Why though? Isn't that supposed to be a header?
CamperBot
@camperbot
Jan 12 2017 13:41
alexeggers sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1667 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Ghulam Shabir
@ghulamshabir
Jan 12 2017 13:42
@Alexeggers that's how wikipedia api is implemented, it uses that query parameter to allow cors
Alexeggers
@Alexeggers
Jan 12 2017 13:43
@ghulamshabir fair enough. Is it just me, or is the wikipedia api wiki godawful?
Tomas
@TOMEJUS
Jan 12 2017 13:44
@AkashKumarVerma @sorinr i've fixed it... 5 hours of my life, but I did it with one single line...
Ghulam Shabir
@ghulamshabir
Jan 12 2017 13:44
pardon me I have not uderstood what you said, my first language is not english
Alexeggers
@Alexeggers
Jan 12 2017 13:45
@ghulamshabir no Problem. I just mean that wikipedia does not explain its api very well. I had to ask a lot to get it to work
Ghulam Shabir
@ghulamshabir
Jan 12 2017 13:45
@Alexeggers that's wiki api, not you if understand you correctly
@Alexeggers there are lot of issues for programmers to make things work, that's where communities and google search come into play :smile:
Alexeggers
@Alexeggers
Jan 12 2017 13:48
@ghulamshabir Definitely! Thanks again mate!
CamperBot
@camperbot
Jan 12 2017 13:48
alexeggers sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:warning: alexeggers already gave ghulamshabir points
Ghulam Shabir
@ghulamshabir
Jan 12 2017 13:49
@Alexeggers welcome :smile:
Kevin Nolan
@betaalpha987
Jan 12 2017 13:56
Hiya. Can anyone help me a problem? My Calculator is using Flexbox to place the buttons. When I use 'flex-flow: column wrap' it doesn't wrap and stays in a single column. But if I set it to 'row wrap' it does wrap. I need columns to work. Any idea why this is happening? https://codepen.io/betaalpha/pen/rjaxeW
THe problem CSS is in .calc-b-panel
Ankit Agarwal
@ankit-prgmr
Jan 12 2017 14:10
@betaalpha987 It's because your CSS class .calc-b-panel is missing height property. You're not restricting the container to wrap , that's why the container grows to adjust the content inside it
Kevin Nolan
@betaalpha987
Jan 12 2017 14:11
Awww, so simples! Thanks Ankit, you star!
@ankit-prgmr thanks (to give you kudos)
CamperBot
@camperbot
Jan 12 2017 14:12
betaalpha987 sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
Ankit Agarwal
@ankit-prgmr
Jan 12 2017 14:12
@betaalpha987 :+1:
Akash Kumar Verma
@AkashKumarVerma
Jan 12 2017 14:43
@TOMEJUS how
AstralWoof
@AstralWoof
Jan 12 2017 14:50
can someone help to get my email to workhttps://codepen.io/NovaPaw/pen/MJYxGd
Tomas
@TOMEJUS
Jan 12 2017 14:58
@AkashKumarVerma by adding display: inline-block; have no idea why did it work, but it did. http://codepen.io/monkevicius/full/ygevVY/ I did put random pictures now tho. What do you guys think about this portfolio in general? I know its not state of the art, but its something, i guess. Appreciate for all the help guys!
HAVENKTB13
@HAVENKTB13
Jan 12 2017 15:05
how do i make my p element red?
playingwithinfinity
@playingwithinfinity
Jan 12 2017 15:10

@HAVENKTB13 ```

<p class = "red-text">blah blah blah<p>```

Ugh... ```

<script type = "text/javascript" src = "test.js"></script>```

<script type = "text/javascript" src = "test.js"></script>
Wow that took a long time.
Wait.
Wait.
Wrong.
Wait.
I mean this :
<p class = "red-text"></p>
Philipp Scholz
@philipp32
Jan 12 2017 15:19

Hey, so I get JSON data and if the attribute cloudCover reaches a certain value, I want to display a different symbol and background picture.

function showSymbolsandPictures(){
        // display weather symbols for weather
        // clouds
        if ( JSONData.cloudCover < 0,5){
          // mildly cloudy
          $('sun-symbol').style.display = "none";
          $('mildly-cloudy-symbol').style.removeAttribute("display");
          $('sunny-day').style.display = "none";
          $('mildly-cloudy-day').style.removeAttribute("display");
        } 
          // lots of clouds
        else  if (JSONData.cloudCover >= 0,50){
          $('sun-symbol').style.display = "none";
          $('cloud-symbol').style.removeAttribute("display");
          $('sunny-day').style.display = "none";
          $('cloudy-day').style.removeAttribute("display");
        }
        }

This would be the code. Sadly it doesn't work. Do I have a thinking error somewhere?

deepakSpatil
@deepakSpatil
Jan 12 2017 15:40

I want to create a dropdown from the below data array but i want to create the dropdowns dynamically at run time using javascript or jquery

var data = [{  
  "name":"A",
  "value":"A",
  "child":[  
     {  
        "name":"A2",
        "value":"A2",
        "child":[  
           {  
              "name":"A2.1",
              "value":"A2.1"
           },
           {  
              "name":"A2.2",
              "value":"A2.2",
              "child":[  
                 {  
                    "name":"A2.2.1",
                    "value":"A2.2.1"
                 }
              ]
           }
        ]
     },
     {  
        "name":"A3",
        "value":"A3"
     }
  ]},{  
  "name":"B",
  "value":"B",
  "child":[  
     {  
        "name":"B1",
        "value":"B1"
     }
  ]}];

the data could have n number of nested parent child relationship.

Samir Sakanovic
@SagiSan
Jan 12 2017 15:55
can someone guide me with making circle progress bar..I am building pomodoro clock project.and I want circular progress of remaining time..msg me who can help...ty
Rahul Yedida
@yrahul3910
Jan 12 2017 16:37
I was gonna ask the same thing, is it required?
Sanket Chaudhari
@sanket-chaudhari
Jan 12 2017 16:37
Hey
Does anyone know of a Weather API which works over HTTPS?
I can't seem to find one.
Rahul Yedida
@yrahul3910
Jan 12 2017 16:38
Doesn't OpenWeather work over HTTPS? @sanket-chaudhari
I tried using jQuery to add a linear gradient to the background-image property but it didn't work when done using jQuery @SagiSan
This solution worked when I put the linear gradient directly in the CSS, but not when I tried modifying the CSS using jQuery. Idk why
Sanket Chaudhari
@sanket-chaudhari
Jan 12 2017 16:41
@yrahul3910 No
it doesnt :/
not if you dont have a paid account it seems
Rahul Yedida
@yrahul3910
Jan 12 2017 16:42
Ah, I see. But for the purpose of the project it doesn't matter I guess
Tyler Moeller
@TylerMoeller
Jan 12 2017 16:47
@yrahul3910 @sanket-chaudhari Weather Underground, Dark Sky, and Apixu all offer free weather APIs that work over both HTTP and HTTPS.
Rahul Yedida
@yrahul3910
Jan 12 2017 16:48
Oh thanks @TylerMoeller :)
CamperBot
@camperbot
Jan 12 2017 16:48
yrahul3910 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1301 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sanket Chaudhari
@sanket-chaudhari
Jan 12 2017 16:49
@TylerMoeller I couldn't see my locations data coming up with the weather underground api
:/
Rahul Yedida
@yrahul3910
Jan 12 2017 16:50
@sanket-chaudhari I used ipinfo.io for location to make it easier, try that
Tyler Moeller
@TylerMoeller
Jan 12 2017 16:51
@sanket-chaudhari I can look at the code if you want - weather undeground is what I used for my weather project.
Rahul Yedida
@yrahul3910
Jan 12 2017 16:52
@TylerMoeller Did you fill the circular progress bar for the Pomodoro clock?
Tyler Moeller
@TylerMoeller
Jan 12 2017 16:52
@yrahul3910 No, I used a standard line that goes from left to right to show progress
Rahul Yedida
@yrahul3910
Jan 12 2017 16:52
Oh okay, thanks :) @TylerMoeller
CamperBot
@camperbot
Jan 12 2017 16:52
yrahul3910 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: yrahul3910 already gave tylermoeller points
@sanket-chaudhari By the way, you can get location + weather all in one URL with this link:
https://api.wunderground.com/api/<your API key>/conditions/q/autoip.json
TracesOfNuts
@TracesOfNuts
Jan 12 2017 17:08

hi guys. need some help with CSS on codepen.

* {
height: 100vh;
}

I'm wondering why does this code provide a scrollbar on the side. And is there anyway to overcome this?

pkaretas
@pkaretas
Jan 12 2017 17:10
I'm working on the first project for Front-End and I've got to div columns next to each other, one has a lot of text and the other only has a little, I'm trying to move the little box so that it is in the middle of the first box(in the middle on the side that is) any tips on how I might be able to do so?
Tom
@moT01
Jan 12 2017 17:11
@TracesOfNuts maybe theres a margin on it, ...pushing the 100vh down a hair
Nicola
@blitzpb
Jan 12 2017 17:11
hey guys
I'm having some kind of issue with my project on codepen
TracesOfNuts
@TracesOfNuts
Jan 12 2017 17:11
@moT01 yup that helps. thanks!
CamperBot
@camperbot
Jan 12 2017 17:11
tracesofnuts sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 455 | @mot01 |http://www.freecodecamp.com/mot01
Nicola
@blitzpb
Jan 12 2017 17:12
Like, I added a thumbnail div for an image, but the image and the thumbnail don't match in size
Tom
@moT01
Jan 12 2017 17:13
@blitzpb got a pen?
@pkaretas i personally, would do some css positioning, there might be an easier way with bootstrap not sure. maybe nest the one inside the other in your html
Mike
@mik123je
Jan 12 2017 17:15
I'm working on the first project in codepen. I'm having an issue changing the size of my text using CSS for my <p> element. The color will change, I can align it, and whatever else but the size will not change?
I feel like i'm already going crazy with div tags trying to seperate everything
Tom
@moT01
Jan 12 2017 17:17
@pkaretas, what are you trying to achieve
pkaretas
@pkaretas
Jan 12 2017 17:18
I want to light grey box to be halfway down the time line bullet list to the left of it. In the browser it shows them side by side with the grey box aligned to the top.
Mike
@mik123je
Jan 12 2017 17:18
Anyone have this problem?
Tom
@moT01
Jan 12 2017 17:20
@pkaretas i would probly use a flexbox, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ...with the align-items property ---but there might be an easier way using bootstrap
@mik123je no, got a pen?
Tom
@moT01
Jan 12 2017 17:24
@mik123je i think its supposed to be font-size: not text-size
I was just trying different things.
I was sure it was font-size.
Tom
@moT01
Jan 12 2017 17:25
something is overriding the font-size
Mike
@mik123je
Jan 12 2017 17:26
I can't figure it out...
I can change it inline.
Tom
@moT01
Jan 12 2017 17:26
probly your bootstrap class of small-text
works when you put it like this font-size: 30px !important;
Mike
@mik123je
Jan 12 2017 17:27
Nope....I tried changing it with a class
Tom
@moT01
Jan 12 2017 17:27
so something is overriding it
Mike
@mik123je
Jan 12 2017 17:27
ooooohh I forgot about that!
Yes!!! That will work.
Tom
@moT01
Jan 12 2017 17:28
or like this
.well p {
    font-size: 30px; }
Mike
@mik123je
Jan 12 2017 17:30
Thank you. I'm still not sure what is overriding it, but glad I have something different than inline style.
Mike
@mik123je
Jan 12 2017 17:41
I figured it out. I did not have an = sign after my Alt attribute in my image tag.
  <div class="thumbnail"><img src="http://bit.ly/2014_Masters_AP" alt"Arnold teeing it up">
 </div>
Guille
@guillegn
Jan 12 2017 17:44
How i can use libraries and APIs to do my first front end project?
i dont rememeber anything in the challenges explaining about that
Mike
@mik123je
Jan 12 2017 17:45
Rerun the 110 challenge it shows you how to setup Codepen
Guille
@guillegn
Jan 12 2017 17:49
@mik123je I understand how to use codepen. My question is what libraries i supposed to use
Ajay Tanwar
@ajayt365
Jan 12 2017 17:52
.keys .key{ border: 4px solid black; color:white; margin:0 8px; background: rgba(0,0,0,0.4); padding:4px; text-align: center; width: 110px; transition: all 0.3s; font-size: 20px; text-shadow: 0 0 5px black; } .playing{ transform: scale(1.1); border: 4px solid goldenrod; }
i was trying to add '.playing' to element with '.key' class. it was added but the border was not changed . how to change that ?
Tom
@moT01
Jan 12 2017 17:54
@guillegn use whatever libraries you want or need, ...click the settings button and in the css and javascript tabs in the settings, theres a quick add at the bottom
Ajay Tanwar
@ajayt365
Jan 12 2017 17:54
.keys .key{
    border: 4px solid black;
    color:white;
    margin:0 8px;
    background: rgba(0,0,0,0.4);
    padding:4px;
    text-align: center;    
    width: 110px;
    transition: all 0.3s;
    font-size: 20px;
    text-shadow: 0 0 5px black;
}
.playing{
    transform: scale(1.1);
    border: 4px solid goldenrod;
}
i was trying to add '.playing' to element with '.key' class. it was added but the border was not changed . how to change that ?
Tom
@moT01
Jan 12 2017 17:56
@ajayt365 probly being overridden by the other class, try adding some more selectors to the .playing or removing some from other one
Ritvars
@RitvarsZ
Jan 12 2017 17:56
Hi, can anyone help me center all the text inside my stream div?
You'll get what I mean when you open it: http://codepen.io/Ritvars/pen/apOKYa
Ajay Tanwar
@ajayt365
Jan 12 2017 17:58
no overriding by other class @moT01
Tom
@moT01
Jan 12 2017 17:59
got a pen?
@RitvarsZ flexbox can center vertically, https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ...or maybe a margin on top
Guille
@guillegn
Jan 12 2017 18:01
@moT01 thank you. But still i thought a libray was a call to functionalities implementing a line of code. I'm confused now
CamperBot
@camperbot
Jan 12 2017 18:01
guillegn sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 12 2017 18:02
that sounds right, a lot of people use bootstrap for the first project or two, so add it in the css tab, and now all the bootstrap stuff is available for use
Ritvars
@RitvarsZ
Jan 12 2017 18:03
@moT01 Wow, im such an idiot lol, been google searching for soo long, and all the solutions are so complicated that they didn't work. I had already looked into flexbox, but turns out its just 3 lines
  display: flex;
  align-items: center;
  justify-content: center;
@moT01 Thanks! :D
CamperBot
@camperbot
Jan 12 2017 18:03
ritvarsz sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Jan 12 2017 18:04
@RitvarsZ i think weve all done that before
@RitvarsZ you might need some -webkit- stuff for more browser compatibility
Ritvars
@RitvarsZ
Jan 12 2017 18:08
@moT01 Just found a 'bug'. I'm using foundation and when the browser goes into mobile mode, my rows don't work like they should
Tom
@moT01
Jan 12 2017 18:12
did you try some bug spray?
Mario Galindo
@mariogalindov
Jan 12 2017 18:33

Hi everyone! Can someone help me center the thumbnails? I have tried using different styles and classes such as center-block and text-align: center but they allow me to center just one thumbnail per row. Here’s my pen:

http://codepen.io/magv89/pen/WRQWrg?editors=1100

Ritvars
@RitvarsZ
Jan 12 2017 18:36
@mariogalindov instead of col-xs-6 col-md-3 use col-xs-12 col-md-12 Then set a max-height of your needs
@mariogalindov Also, there is an arrow top right side of your html tab, use it to tidy up your html ;)
Mario Galindo
@mariogalindov
Jan 12 2017 18:46
Thanks @RitvarsZ I’ll try it, and yes I have been playing around with several things and now everything’s a mess haha
CamperBot
@camperbot
Jan 12 2017 18:46
mariogalindov sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
Tyler Moeller
@TylerMoeller
Jan 12 2017 19:07
@mariogalindov Some of your inline styles are causing conflicts and the 'center-block' + 'thumbnail' classes are intended for images. Maybe give this a try:
<div class="row">
  <div class="col-xs-6 col-md-3 col-md-offset-3">
    <a href="#">
      <img class="img-responsive center-block thumbnail" src="https://upload.wikimedia.org/wikipedia/en/3/3d/Plague_Inc_loading_screen.png" alt="lo que sea">
    </a>
    <p class="text-center">Thumbnail 1</p>
  </div>
    <div class="col-xs-6 col-md-3">
      <a href="#">
        <img class="img-responsive center-block thumbnail" src="https://upload.wikimedia.org/wikipedia/en/3/3d/Plague_Inc_loading_screen.png" alt="lo que sea">
      </a>
      <p class="text-center"> Thumbnail 1</p>
    </div>
</div>
Mario Galindo
@mariogalindov
Jan 12 2017 19:14
It worked! Thanks @TylerMoeller I think I have to investigate more about the thumbnail properties
CamperBot
@camperbot
Jan 12 2017 19:14
mariogalindov sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1302 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 12 2017 19:20
@mariogalindov search for .thumbnail here to see what it does: https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css
Both center-block and thumbnail can be used on any element, but you typically don't want to change the padding or margins of bootstrap columns or they may not be responsive.
Mario Galindo
@mariogalindov
Jan 12 2017 19:22
Perfect, I needed this to better understand classes. Thanks again @TylerMoeller
CamperBot
@camperbot
Jan 12 2017 19:22
mariogalindov sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mariogalindov already gave tylermoeller points
alexbuster
@alexbuster
Jan 12 2017 19:57
I'm in the portfolio challenge how do get my menu to be horizontal, because it comes out vertically. Anybody please!
Jeremy Barbe
@eemebarbe
Jan 12 2017 19:57
any webpack pros here?
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:10
Just finished the first challenge the tribute page. Mine's pretty rudimentary, but I feel good about it nonetheless. https://codepen.io/johnnyosullivan/full/JEXoGP
Ritvars
@RitvarsZ
Jan 12 2017 20:11
Whew! Just finished my twitch stream viewer, I'd be happy to receive some criticism :smile:
http://codepen.io/Ritvars/pen/apOKYa
alexbuster
@alexbuster
Jan 12 2017 20:16
can anybody tell me please how do I get my menu to come out horizontal and not vertically.
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:20
@alexbuster Can you show your code?
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:31
@RitvarsZ Nice work. You coded yours the same as me by placing everyone in all/online/offline elements. I'm seeing a horizontal scroll bar - looks like it's because of your nested row in your <header>.
@johnnyosullivan Nice job. I don't see any <div class="row">'s in your code. With bootstrap, columns go in rows and rows go in containers. You should also try to center that bullet list - you can use column offsets for that. See here for more info: http://getbootstrap.com/css/#grid-offsetting
Ritvars
@RitvarsZ
Jan 12 2017 20:36
@TylerMoeller Thanks! Not sure if it was the best practice, but I achieved what I aimed for :+1:
CamperBot
@camperbot
Jan 12 2017 20:36
ritvarsz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1303 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
alexbuster
@alexbuster
Jan 12 2017 20:43

<header>
<link href='https://fonts.googleapis.com/css?family=arial' rel='stylesheet' type='text-/css'>
</header>

<div class="container-fluid">
<ul class="nav nav- pills">
<li>
<a href="#">Oscar Bustillo</a>
</li>
<li>
<a href="#">about me</a>
</li>
<li>
<a href="#">porfolio</a>
</li>
<li>
<a href="#">contact me</a>
</li>

</ul>
</div>

here'
here's my code
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:43
@TylerMoeller Thanks for the advice. Where would I incorporate rows into my code? I wish I knew enough to understand your tip. I flew through the lessons and then found my self scurrying back to see what I actually knew. I actually freaked for a whole day before attempting anything.
CamperBot
@camperbot
Jan 12 2017 20:43
johnnyosullivan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1304 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:45
@alexbuster change <ul class="nav nav- pills"> to <ul class="nav nav-pills"> (no space between nav-pills). Also: https://github.com/FreeCodeCamp/FreeCodeCamp/wiki/Code-Formatting :)
@johnnyosullivan Each set of 12 columns would have it's own row wrapped around it usually. Like:
<div class="container">
  <div class="row">
    <div class="col-xs-6">
      ...
    </div>
    <div class="col-xs-6">
      ...
    </div>
  </div>
</div>
alexbuster
@alexbuster
Jan 12 2017 20:48
thank you very much @TylerMoeller
CamperBot
@camperbot
Jan 12 2017 20:48
:star2: 1305 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
alexbuster sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:48
@TylerMoeller I'll definitely have a read of all of that. I guess in layman's terms, I'm wondering what that would do visually to my page.
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:50
@johnnyosullivan For your page, it will not have a visual impact. It's a best practice to use for when your pages get more complicated.
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:50
@TylerMoeller By the way, I had a look at your own tribute page for Robin Williams. Really, really nice!
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:51
Thanks!
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:51
@TylerMoeller Ok. That helps a lot. I was keenly aware of that possibility actually, so thanks for the heads-up.
CamperBot
@camperbot
Jan 12 2017 20:51
johnnyosullivan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: johnnyosullivan already gave tylermoeller points
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:52
@TylerMoeller Did you learn all of your coding on FCC?
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:53
@johnnyosullivan Yes, FCC taught me everything from scratch
At least got me started learning it all :)
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:54
@TylerMoeller That's awesome! Gives me hope! I'm planning to actually reverse engineer a few tribute pages including yours and Quincy's before I go further.
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:55
@johnnyosullivan It's a good resource. I did that page a while ago and see some bugs! I'll try to fix them today ;)
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:56
@TylerMoeller Did you find that you were able to iron out the basics as you went along?
Tyler Moeller
@TylerMoeller
Jan 12 2017 20:58
@johnnyosullivan Yes, I learned a lot as I progressed and went back to make changes to my earlier projects.
Free Code Camp meetups were helpful too - meeting people in person for feedback really speeds things up
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 20:59
@TylerMoeller Thanks for the tips. Are you working in coding now?
CamperBot
@camperbot
Jan 12 2017 20:59
:warning: johnnyosullivan already gave tylermoeller points
johnnyosullivan sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 12 2017 21:01
@johnnyosullivan Any time! Front end development is just a hobby for the most part right now.
Johnny O'Sullivan
@johnnyosullivan
Jan 12 2017 21:01
@TylerMoeller Right on! Again, I appreciate the help. Happy Coding!
Anastasiia
@NastyaSh454
Jan 12 2017 21:10
blob
Hello, guys! Need your help :)
Why there is no title on page? What I did wrong?
uriznik
@uriznik
Jan 12 2017 21:11
@NastyaSh454 the html section on codepen should only contain stuff that would go within the body tag. If you go to the settings you can set the title there
Anastasiia
@NastyaSh454
Jan 12 2017 21:18
@uriznik thanks ;)
CamperBot
@camperbot
Jan 12 2017 21:18
nastyash454 sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
:cookie: 485 | @uriznik |http://www.freecodecamp.com/uriznik
alpox
@alpox
Jan 12 2017 21:38
@NastyaSh454 What should come in the head, put in the settings under "stuff for head"
Martynas
@FlintMayers
Jan 12 2017 21:55
@uriznik how do you include bootstrap cdn in codepen?
Michael Davis
@mhdavis
Jan 12 2017 21:56
go to settings and there should be a quicklink button that lets you add it to the pen
under the css tab
uriznik
@uriznik
Jan 12 2017 21:59
^^
Michael Davis
@mhdavis
Jan 12 2017 22:09
does anyone know what pseudoclasses to edit once you click a button and want it to change colors when you hover it again?
Tyler Moeller
@TylerMoeller
Jan 12 2017 22:48
@mhdavis A button retains :focus until you click somewhere else, so if you want your CSS :hover settings to apply while your :focus settings are in effect, you'll need to .blur() the button first. e.g: $('#yourButton').on('click', e => e.target.blur());
Jose Irizarry
@Stjose
Jan 12 2017 22:49
here my tribute page. any thing before a click completed
Lydia Larae
@nevaIsDreaming
Jan 12 2017 22:54
anyone here that can help with the javascript part of the wikipedia viewer project?
Tyler Moeller
@TylerMoeller
Jan 12 2017 22:54
@Stjose In the Codepen HTML panel, click the down arrow in the top, right-hand corner and select "Analyze HTML". There are some issues to address.
Jose Irizarry
@Stjose
Jan 12 2017 22:55
@TylerMoeller thank I will do that now
CamperBot
@camperbot
Jan 12 2017 22:55
stjose sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1306 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 12 2017 22:55
@nevaIsDreaming I can try to help
Lydia Larae
@nevaIsDreaming
Jan 12 2017 22:56
hang on, I just spotted something that might be giving me trouble. let me fiddle with it a bit @TylerMoeller
David Marentette
@Silvertop1
Jan 12 2017 23:03
I find organizing things on a page to be the most difficult thing so far....Like creating a chunk of text on some background and then a new chunk of text on a different background...I think its because I don't really understand the row and col parts very well
DarylKnapp
@DarylKnapp
Jan 12 2017 23:15

Good afternoon Devs,

I was just wondering if someone can help me , Im trying to get the jumbotron centered, with the pic centered as well, Here's a pic of the CSS and HTML, anything im doing wrong?

http://i64.tinypic.com/2nrq2pt.png

RJ
@IronyOfRyan
Jan 12 2017 23:18
@DarylKnapp use margin instead of position
DarylKnapp
@DarylKnapp
Jan 12 2017 23:20
@Printhe how big should i make it or how small?
RJ
@IronyOfRyan
Jan 12 2017 23:21
margin: 0 auto;
DarylKnapp
@DarylKnapp
Jan 12 2017 23:25
@Printhe still doesnt fix my issue.
Tyler Moeller
@TylerMoeller
Jan 12 2017 23:26
@DarylKnapp By position: center I think you mean to use background-positionhttp://www.w3schools.com/cssref/pr_background-position.asp
DarylKnapp
@DarylKnapp
Jan 12 2017 23:27
@TylerMoeller whoops! yeah that's what i ment, but still I have the same issue.
Tyler Moeller
@TylerMoeller
Jan 12 2017 23:28
Everything else looks centered to me, from the screenshot. Hard to tell without having some code to run.
DarylKnapp
@DarylKnapp
Jan 12 2017 23:29
@TylerMoeller Ill PM you right now with some code. I dont use codepen so sorry about the long length of code I'm about to send to you lol
Anastasiia
@NastyaSh454
Jan 12 2017 23:30
Guys, how can I add image on my page if it's located d:/Images/me.jpg. Problem is that picture isn't added
Jose Irizarry
@Stjose
Jan 12 2017 23:35
I got stuck with this The 'alt' attribute is required for <img> elements.
<div class="thumbnail"><img src="https://images-na.ssl-images-amazon.com/images/I/31fAAZIGjtL.jpg"></div>
thi is my code
Tyler Moeller
@TylerMoeller
Jan 12 2017 23:36
@NastyaSh454 You can upload it to https://postimage.org
@Stjose alt is alternative text for the image, here is more information: http://www.w3schools.com/tags/att_img_alt.asp
Just add alt="some text that describes the image" (for example)
Jose Irizarry
@Stjose
Jan 12 2017 23:38
@TylerMoeller thank
CamperBot
@camperbot
Jan 12 2017 23:38
:warning: stjose already gave tylermoeller points
stjose sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Anastasiia
@NastyaSh454
Jan 12 2017 23:39
@TylerMoeller thanks ;)
CamperBot
@camperbot
Jan 12 2017 23:39
nastyash454 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1307 | @tylermoeller |http://www.freecodecamp.com/tylermoeller