These are chat archives for FreeCodeCamp/HelpFrontEnd

17th
Nov 2016
JD Tadlock
@jdtdesigns
Nov 17 2016 00:06
@tracer223 You shouldn't be using iframes for all the streams. iframes should only be used in the most minimalist way. Usually one iframe per page load except on rare occasions. I would loop through the streamers and use the api channels/streams request to show the data you need.
You can get the streamer logo, current live stream preview image from the api.
Luan Millnitz
@millnitzluan
Nov 17 2016 00:18
Hi, someone can check for me if the text are at the center?
Jay Kumar
@jaykch
Nov 17 2016 00:19
@luanmillnitz yes it is centerised
Luan Millnitz
@millnitzluan
Nov 17 2016 00:19
the page is right and good?
or had something to change and be better?
Jay Kumar
@jaykch
Nov 17 2016 00:30
@luanmillnitz dont spend so much time on tribute page, you have bigger fish to fry later
Luan Millnitz
@millnitzluan
Nov 17 2016 00:32
i spend only 1 less than one hour on tribute page
:/
Jay Kumar
@jaykch
Nov 17 2016 00:33
@luanmillnitz I spent 5 minutes, finished front end in 8 days, well I have 1 more project to go
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 00:34

Is this the correct format for an api call to the open weather map api as I can't seam to make it work

$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=[latitude]&lon=[longitude]&APPID=[api key]&callback=?")

Note: information inside [ ] denote information I would provide to the API call.

any help would be really appreciated

Luan Millnitz
@millnitzluan
Nov 17 2016 00:34
@jaykch haha nice bro!
Jay Kumar
@jaykch
Nov 17 2016 00:35
@luanmillnitz don't waste your time on these small projects, the javascript ones are better, you will learn a lot in them
@WhiteCaneGamer is the api key not working?
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 00:37
@jaykch I don't know, it was only just generated. should I generate a new one and try it?
Jay Kumar
@jaykch
Nov 17 2016 00:37
@WhiteCaneGamer nah just input the api key and try again, if it doesnt work tell me the error, I had my fair share of issues with open weather
Luan Millnitz
@millnitzluan
Nov 17 2016 00:38
@jaykch thanks for the advices bro (y)
CamperBot
@camperbot
Nov 17 2016 00:38
luanmillnitz sends brownie points to @jaykch :sparkles: :thumbsup: :sparkles:
:cookie: 294 | @jaykch |http://www.freecodecamp.com/jaykch
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 00:42
@jaykch there's no error I just don't get a response, I'll paste my pen, still in early stages, no site yet just trying to get the api call to work
Jay Kumar
@jaykch
Nov 17 2016 00:43
@WhiteCaneGamer it won't work from inside codepen, try using that link and paste it in your browser see if you get any data in your browser window
Rob
@s31181
Nov 17 2016 00:43
hey is there anyone available to help me with my wikipedia viewer
i'm having so bugs
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 00:44
@jaykch how do I complete the challenge if I can't do it inside CodePen
Jay Kumar
@jaykch
Nov 17 2016 00:46
@WhiteCaneGamer there should be a way, Google it . Running API calls from codepen. I have my own site so I just post them there and edit the js files in a text editor so i can't help you with codepen
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 00:47
@jaykch I just tested the api call in the browser and it just throws an error because I didn't enter valid location data, I'll try it with valid data now but I suspect it will work, thus, CodePen is the issue. Hope google comes to the rescue, sure it will :/ Thank you
CamperBot
@camperbot
Nov 17 2016 00:47
whitecanegamer sends brownie points to @jaykch :sparkles: :thumbsup: :sparkles:
:cookie: 295 | @jaykch |http://www.freecodecamp.com/jaykch
Fernando Chavez
@nando0204
Nov 17 2016 00:54
Hello, how do you insert a jpg image from a hard drive (mac)?
Edgar Pan
@edgaryp
Nov 17 2016 01:06
Hello, is there anyone know how to create a shortcut to change syntax to HTML and other languages in Mac version of Sublime Text 3 (3126). Trying to do it in Key Blinding with following code but haven't got it work yet. { "keys": ["super+p","super+l","super+r"], "command": "set_file_type", "args": {"operation":"HTML"}}
Aaron
@apalm1341
Nov 17 2016 01:10
is someone here good with using gimp?
would appreciate if u could help
send private message if can
Ryan Williams
@Ryanwfile
Nov 17 2016 01:13

Can someone please help me with centering text after a div expands on hover. The codepen link is http://codepen.io/Ryanwfile/pen/ObRemx and the text I am trying to center is the first portfolio example title, it has a blue background to easily identify. The current css of the div containing the text is,

.containerDivClassName:hover .divWithTextClassName
  {  
    width:100%; 
    margin:auto;
    text-align:center;
 }

which shows exactly as I would like only when the div is shrinking back to normal but not when it's expanded. Thank you very much for any help

Shawn Grooms
@SEGrooms
Nov 17 2016 01:15
@nando0204 are you trying to insert the jpg on your codepen?
@nando0204 codepen only allows you to call images online. I simply set up a photobucket account and linked to those :)
@nando0204 here is a link that explains local file paths http://www.htmlkit.com/minit/pages/imgtag1.html
Fernando Chavez
@nando0204
Nov 17 2016 01:20
Thank you shawn, and yes it's on codepen. But for future reference, how do you do it?
checking out link now, thanks again
Shawn Grooms
@SEGrooms
Nov 17 2016 01:21
@nando0204 <img src=“IMG URL”>
You’re welcome @nando0204
@Ryanwfile have you tried setting the width to col-xs-12?
chunnali
@chunnali
Nov 17 2016 01:24
can anyone that has done the wiki viewer challenge help me out?
Shawn Grooms
@SEGrooms
Nov 17 2016 01:26
@Ryanwfile try this <div class=“container-fluid projTitle”><h4></h4></div>
Ryan Williams
@Ryanwfile
Nov 17 2016 01:26
@SEGrooms I just tried, it didn't work. It seems like width 100% would do something similar. Thank you, I will try the container fluid
CamperBot
@camperbot
Nov 17 2016 01:26
:cookie: 384 | @segrooms |http://www.freecodecamp.com/segrooms
ryanwfile sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
Shawn Grooms
@SEGrooms
Nov 17 2016 01:27
@Ryanwfile container-fluid didn’t work.
Ryan Williams
@Ryanwfile
Nov 17 2016 01:27
@SEGrooms The container-fluid method does the same as the current method yea
Shawn Grooms
@SEGrooms
Nov 17 2016 01:27
I forgot I could edit the code on codepen, lol
Ryan Williams
@Ryanwfile
Nov 17 2016 01:27
@SEGrooms No problem, I really appreciate the help
Rob
@s31181
Nov 17 2016 01:28
hey guys i'm working in an atom environment with prepros(preprocessor) i'm trying to live preview my project buy it won't load my custom javascript file - i checked the web-dev:source tab and its only showing the minified jquery file
Shawn Grooms
@SEGrooms
Nov 17 2016 01:28
@Ryanwfile you’re welcome, I’ll keep thinking about it and let you know if I come up with anything.
Ryan Williams
@Ryanwfile
Nov 17 2016 01:28
@SEGrooms Thank you
CamperBot
@camperbot
Nov 17 2016 01:28
ryanwfile sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave segrooms points
Shawn Grooms
@SEGrooms
Nov 17 2016 01:28
@chunnali what are you struggling with?
Ryan Williams
@Ryanwfile
Nov 17 2016 01:29
@SEGrooms It has to do with the main container being in display flex but ordering the div's doesn't change anything
chunnali
@chunnali
Nov 17 2016 01:30
@SEGrooms http://codepen.io/chunnali/pen/RoaLmZ?editors=1111 i have the getjson ready in javascript…(i think). but Im not exactly sure how to get the data from it. I am totally lost and would really appreciate if you can point me in the right direction so I can figure it out from there
Rob
@s31181
Nov 17 2016 01:33
@chunnali you have to treat the json object like an array because it is
Shawn Grooms
@SEGrooms
Nov 17 2016 01:34
@chunnali listen to @s31181
Rob
@s31181
Nov 17 2016 01:34

if you do:

console.log(getSearch[1][i});

and open up your console tab at the bottom you'll see a result for your search

sorry
replace i with 0
chunnali
@chunnali
Nov 17 2016 01:34
@s31181 @SEGrooms oh….. I understand now. thank you!!!!
CamperBot
@camperbot
Nov 17 2016 01:34
chunnali sends brownie points to @s31181 and @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @s31181 |http://www.freecodecamp.com/s31181
:cookie: 385 | @segrooms |http://www.freecodecamp.com/segrooms
Rob
@s31181
Nov 17 2016 01:35
glad i could help
Shawn Grooms
@SEGrooms
Nov 17 2016 01:35
sorry for the delay @chunnali thanks for stepping in @s31181
CamperBot
@camperbot
Nov 17 2016 01:35
segrooms sends brownie points to @chunnali and @s31181 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @s31181 |http://www.freecodecamp.com/s31181
:cookie: 257 | @chunnali |http://www.freecodecamp.com/chunnali
chunnali
@chunnali
Nov 17 2016 01:35
@SEGrooms not at all! :D
Shawn Grooms
@SEGrooms
Nov 17 2016 01:35
I couldn’t stand the wikipedia documentation, so I understand.
Rob
@s31181
Nov 17 2016 01:35
this was the first time i was able to help lol
does anyone here have any experience working in atom?
i'm trying to get more comfortable working in an environment oustide of codepen
Shawn Grooms
@SEGrooms
Nov 17 2016 01:36
@s31181 I would recommended checking out youtube
They’re an excellent resource for IDEs and APIs
Rob
@s31181
Nov 17 2016 01:37
cool thanks @SEGrooms
CamperBot
@camperbot
Nov 17 2016 01:37
s31181 sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 386 | @segrooms |http://www.freecodecamp.com/segrooms
Shawn Grooms
@SEGrooms
Nov 17 2016 01:37
np!
Ryan Williams
@Ryanwfile
Nov 17 2016 01:40
@chunnali Just to get the api working I tested this code in your pen and it worked
$(document).ready(function() {    
    $.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=10&search=turtle&callback=?',function(data){
      console.log(data[1]);
      });

})
chunnali
@chunnali
Nov 17 2016 01:40
@Ryanwfile awesome thank you!
CamperBot
@camperbot
Nov 17 2016 01:40
chunnali sends brownie points to @ryanwfile :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @ryanwfile |http://www.freecodecamp.com/ryanwfile
Ryan Williams
@Ryanwfile
Nov 17 2016 01:40
@chunnali You're welcome, happy to help
@SEGrooms I figured out my problem with the text as well, instead of using width:100% I had to just copy the container div's width and that worked, thanks again for the help
CamperBot
@camperbot
Nov 17 2016 01:44
ryanwfile sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave segrooms points
Shawn Grooms
@SEGrooms
Nov 17 2016 01:46
@Ryanwfile I’m glad you figured it out, because I was still searching!
Ryan Williams
@Ryanwfile
Nov 17 2016 01:46
@SEGrooms well, it didn't fix the overall problem because now the text underneath isn't working
Shawn Grooms
@SEGrooms
Nov 17 2016 01:47
:/
I have to throw in the towel @Ryanwfile sorry :/
Good luck!! :thumbsup:
Ryan Williams
@Ryanwfile
Nov 17 2016 01:51
@SEGrooms Well I think I'm just going to hardcode it in anyway, thank you for the help
CamperBot
@camperbot
Nov 17 2016 01:51
ryanwfile sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave segrooms points
JD Tadlock
@jdtdesigns
Nov 17 2016 01:58
@Ryanwfile I think you're going a little far with the animations. Sometimes simpler is better.
Ryan Williams
@Ryanwfile
Nov 17 2016 02:00
@jdtdesigns Thanks, I'm just trying to figure out how to make this text work, most of the animations will be removed
CamperBot
@camperbot
Nov 17 2016 02:00
ryanwfile sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 745 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Nov 17 2016 02:01
which text?
Shawn Grooms
@SEGrooms
Nov 17 2016 02:01
@jdtdesigns check line ~140
Ryan Williams
@Ryanwfile
Nov 17 2016 02:03
@jdtdesigns The first portfolio project title, it's background is blue
JD Tadlock
@jdtdesigns
Nov 17 2016 02:04
@Ryanwfile After looking at your html, I have to be honest. I see a lot of br's, <div>some text</div>, and random text not encased in any element. These are all bad practices that you should always avoid.
Ryan Williams
@Ryanwfile
Nov 17 2016 02:08
@jdtdesigns Thanks, what should I do instead
CamperBot
@camperbot
Nov 17 2016 02:08
ryanwfile sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Nov 17 2016 02:10
Move any header text to a h1, h2, h3, h4 , h5, or h6. Move any paragraph text to a <p>. Move any short random text to a span. Give these classes to style them. Remove all the br's and use margin/padding instead to create space between elements.
@Ryanwfile
Also, you can separate your sections in the html panel with some returns between each one. This will make the code more readable for you and others.
A good practice is to add a comment to the beginning of a section and to the end.
Remove all <u></u>'s as well. This is old school html. Use css instead(text-decoration: underline;).
Ryan Williams
@Ryanwfile
Nov 17 2016 02:15

Thanks I appreciate all of the help, but with a column doesn't adding span to each word add a lot of code for little benefit, especially if they are already being styled inside of a div?

Also, is there anything I can do to center the text I mentioned earlier when the div expands on hover?

@jdtdesigns
JD Tadlock
@jdtdesigns
Nov 17 2016 02:17
You need to take the header out of the <a>. The <a> is inline and will not be the full width of the container.
@Ryanwfile
Ryan Williams
@Ryanwfile
Nov 17 2016 02:18
@jdtdesigns That's perfect, thank you so much
CamperBot
@camperbot
Nov 17 2016 02:18
ryanwfile sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Nov 17 2016 02:18
@Ryanwfile It's not about little code. It's about symantic syntax(the right way to do it). Pull up any nice site and look at their code with inspector to get an idea.
Ryan Williams
@Ryanwfile
Nov 17 2016 02:19
@jdtdesigns I understand, I'm just changing most things on the page nonstop and experimenting right now but I really appreciate all of this advice
JD Tadlock
@jdtdesigns
Nov 17 2016 02:20
You're welcome ;)
Ryan Williams
@Ryanwfile
Nov 17 2016 02:25

@jdtdesigns How would I go about correcting this code,

<h5><a>Text</a><br> List of items</h5>

What should replace the <br> so the link is still above the list?

JD Tadlock
@jdtdesigns
Nov 17 2016 02:27
@Ryanwfile Why are you using a header as a div?
Ryan Williams
@Ryanwfile
Nov 17 2016 02:28
@jdtdesigns This is all inside a div
JD Tadlock
@jdtdesigns
Nov 17 2016 02:28
<div class="my-div">
    <a href="#">A link</a>
    <ul>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li>
      <li>List Item</li> 
    </ul>
</div>
Ryan Williams
@Ryanwfile
Nov 17 2016 02:29
@jdtdesigns Awesome thanks
CamperBot
@camperbot
Nov 17 2016 02:29
ryanwfile sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave jdtdesigns points
Rob
@s31181
Nov 17 2016 02:31
can anyone help? i can't figure out why my preview wont' load my custom js file
sorry out of context - i'm on atom and trying to live preview
JD Tadlock
@jdtdesigns
Nov 17 2016 02:35
@s31181 how are you loading your css?
Rob
@s31181
Nov 17 2016 02:35
i have a sass file that's autocompiling to regular css
JD Tadlock
@jdtdesigns
Nov 17 2016 02:35
in the html
Rob
@s31181
Nov 17 2016 02:36
<link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="CSS/mdb.min.css">
    <link rel="stylehseet" href="CSS/bootstrap.min.css">
Christopher
@christopherwangemann
Nov 17 2016 02:36
Hi Guys, I'm just about to make a tribute page. Do I need to use Bootstrap and make it responsive? It doesn't really specify. Thanks!
JD Tadlock
@jdtdesigns
Nov 17 2016 02:37
try changing "/JS/.." to "JS/..." @s31181
@christopherwangemann You don't have to use BS or make it responsive.
But learning these things will be necessary in the future
Rob
@s31181
Nov 17 2016 02:38
nope
Christopher
@christopherwangemann
Nov 17 2016 02:38
Ok yeah I thought it might be better to use it right away
thanks for the help!
JD Tadlock
@jdtdesigns
Nov 17 2016 02:39
@s31181 You're using jade?
Rob
@s31181
Nov 17 2016 02:39
yeah
is that an issue?
i'm using jade, sass, and prepros
with atom text-editor
JD Tadlock
@jdtdesigns
Nov 17 2016 02:40
can you screenshot the html output?
Rob
@s31181
Nov 17 2016 02:40
index.html or index.jade
JD Tadlock
@jdtdesigns
Nov 17 2016 02:40
.html
Rob
@s31181
Nov 17 2016 02:43
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Free Code Camp - Wikipedia Viewer</title>
    <meta name="Wikipedia Viewer" content="A Web Application with a Wikipeida Interface">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="Rob" content="Free Code Camp"><!-- CSS-- Styles -->
    <link rel="stylesheet" href="CSS/main.css">
    <link rel="stylesheet" href="CSS/mdb.min.css">
    <link rel="stylehseet" href="CSS/bootstrap.min.css">
  </head>
  <body>
    <div class="jumbotron">
      <h1>Wikipedia Viewer</h1>
    </div>
    <div class="container"><a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank" class="btn btn-primary">Random-Wiki</a><br>
      <input id="searchQuery" type="search" placeholder="Search...">
      <button id="search" type="submit" class="btn btn-primary">
        <p>Search</p>
      </button>
      <ul id="output"></ul>
    </div>
    <script rel="text/javascript" src="JS/jquery-3.1.1.min.js"></script>
    <script rel="text/javascript" scr="JS/script.js"></script>
  </body>
</html>
JD Tadlock
@jdtdesigns
Nov 17 2016 02:44
lol
change scr to src
@s31181
Rob
@s31181
Nov 17 2016 02:46
aldshfoaufvhiosvncpaiosuhfioawushdipoasudvsipudfha
thank you @jdtdesigns
CamperBot
@camperbot
Nov 17 2016 02:46
s31181 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 746 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Rob
@s31181
Nov 17 2016 02:46
holy moly
Johnny Vineyard
@javineya
Nov 17 2016 02:46
Is it just me, or is the Personal Portfolio Page challenge WAY beyond the challenges prior?
JD Tadlock
@jdtdesigns
Nov 17 2016 02:46
always the little things @s31181 ;)
Rob
@s31181
Nov 17 2016 02:46
that's 3 hours
i hate my life
thank you again
JD Tadlock
@jdtdesigns
Nov 17 2016 02:46
yep
been there done that lol
Rob
@s31181
Nov 17 2016 02:47
i'm gonna go and scream at inatimate objects now
JD Tadlock
@jdtdesigns
Nov 17 2016 02:47
@javineya FCC is not a learning site. It's to challenge you. They leave it up to you to learn the in between. So, time to dive into some html/css. I'd go take the html/css course on codecademy.com
Johnny Vineyard
@javineya
Nov 17 2016 02:48
Fair enough.
Ken Haduch
@khaduch
Nov 17 2016 02:52
@s31181 - for you and anyone reading this... a good tool to familiarize yourself with is an HTML validation tool. Google that and check it out. Not sure if it would help with this, but it catches lots of things.
https://validator.w3.org/ is what I had in mind
Megan
@megan32
Nov 17 2016 03:06
sooo I need to ask one of those really stupid questions, that are going to make you just want to palm-to-face....Portfolio challenge, project gallery: where do I get the images of my work?? I'm using placeholder images now...
the thumbnails need to be on the internet somewhere right?? If I toss them in imgur does that work??
JD Tadlock
@jdtdesigns
Nov 17 2016 03:08
@meganvieno use photobucket.com
imgur is blocked on codepen
Megan
@megan32
Nov 17 2016 03:09
thanks! @jdtdesigns ...my mind was thoroughly blown trying to wrap my head around how people got their own images into code...
CamperBot
@camperbot
Nov 17 2016 03:09
:cookie: 747 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
meganvieno sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
Kevin Kindorf
@kkindorf
Nov 17 2016 03:22
@meganvieno you can use imgur but the link might start with http: once you initially upload to imgur. Just add an s at the end of https it should work on Codepen. It works for me on gh-pages. ANd it works here as an example http://codepen.io/kkindorf/pen/oYYvxQ
I would use imgur over photobucket any day of the week.
yeah imgur is definitely not blocked. Codepen doesn't like anything not hosted over https
JD Tadlock
@jdtdesigns
Nov 17 2016 03:25
@kkindorf Forbidden
doesn't work ;)
Kevin Kindorf
@kkindorf
Nov 17 2016 03:25
did you check the codepen i just submitted?
JD Tadlock
@jdtdesigns
Nov 17 2016 03:25
yes
Kevin Kindorf
@kkindorf
Nov 17 2016 03:25
it works for me
JD Tadlock
@jdtdesigns
Nov 17 2016 03:26
rarity
they block imgur conent
content*
due to pornography
Kevin Kindorf
@kkindorf
Nov 17 2016 03:27
hmm thats news to me
JD Tadlock
@jdtdesigns
Nov 17 2016 03:27
been that way for quite awhile
Kevin Kindorf
@kkindorf
Nov 17 2016 03:27
but it works.. so i dunno I'll believe it when they block my image from loading i use gh-pages to submit my projects
anyway
JD Tadlock
@jdtdesigns
Nov 17 2016 03:28
@kkindorf The fact that it loads for you doesn't change the fact that it doesn't for 95% of users
It was blocked for me
Kevin Kindorf
@kkindorf
Nov 17 2016 03:28
ok dude relax
JD Tadlock
@jdtdesigns
Nov 17 2016 03:28
There are other image hosts lol
lalith77
@lalith77
Nov 17 2016 03:29
Hi all, Any hints for the wikipedia viewer? Im kinda stuck
Aaron Bell
@awb715
Nov 17 2016 03:30
@lalith77 what you need help with
lalith77
@lalith77
Nov 17 2016 03:31
how do i get a list of pages that are relevant to what the user wants ( typed in searchbox)?
Terryd12345
@Terryd12345
Nov 17 2016 03:31
Hey guys any clue why:
$.getJSON("http://ip-api.com/json",function(myData){
console.log(myData);
});
doesnt print out the JSON. Is it a faulty API or am i doing something wrong?
Aaron Bell
@awb715
Nov 17 2016 03:32
have you set up the api yet @lalith77 ?
S7eve
@S7eve
Nov 17 2016 03:33
guys does anyone know the difference between:
var a = $.datepicker.formatDate('d M yy')
and
var a = $(".datepicker").formatDate('d M yy')
lalith77
@lalith77
Nov 17 2016 03:33
no. I dont know how to
@S7eve I think the 2nd one selects a class called datepicker
JD Tadlock
@jdtdesigns
Nov 17 2016 03:34
@Terryd12345 Did you look at the browser console?
S7eve
@S7eve
Nov 17 2016 03:35
@lalith77 how bout the 1st one? I was a bit confused about the usage of the 1st one..
Terryd12345
@Terryd12345
Nov 17 2016 03:36
@jdtdesigns I had a look before but couldn't figure out where to find the errors.
JD Tadlock
@jdtdesigns
Nov 17 2016 03:36
can you post your codepen?
Megan
@megan32
Nov 17 2016 03:37
@kkindorf regardless of the imgur/photobucket debate -thank you!
lalith77
@lalith77
Nov 17 2016 03:37
@S7eve not sure if your allowed to use the first one. doesn't that give you a syntactical error?
JD Tadlock
@jdtdesigns
Nov 17 2016 03:38
@S7eve The first one is referring to the jqueryui datepicker formatDate() option
S7eve
@S7eve
Nov 17 2016 03:38
@lalith77 it actually works,so I was tryin to format a date from jquery then put it in a variable, but somehow the 1st one end up showing what I want
JD Tadlock
@jdtdesigns
Nov 17 2016 03:39
the second is a class selector
lalith77
@lalith77
Nov 17 2016 03:40
@awb715 How do i set up the api?
S7eve
@S7eve
Nov 17 2016 03:41
@jdtdesigns would u mind elaborate a bit on when should i be using the 1st one?
JD Tadlock
@jdtdesigns
Nov 17 2016 03:41
@lalith77 Here's an example of how to use the api. http://jsbin.com/biputi/1/edit?html,js,console
@S7eve If you're wanting a date picker like this https://jqueryui.com/datepicker/
Jack Of All Trades International.
@JOATI
Nov 17 2016 03:44
@JOATI
Why is this code not showing the picture i've linked to it ..??:O :$
<div id="Picture">
<a class="text-center"><img src="https://nl.wikipedia.org/wiki/Justin_Nozuka#/media/File:Justinnozuka.jpg" target="_blank">
<alt="justin nozuka" width:800 Height:1200>
</a>
djangoearnhardt
@djangoearnhardt
Nov 17 2016 03:47
Good evening everyone. I’m fighting some styling in my Wiki viewer.
  1. My search glyphicon is a little lopsided (not sure why)
  2. I want my search results to have padding: 20px 15px 20px 15px; but I don’t want that to show until the search has been done. If I style my <li> to have that padding it creates a little box of white.
    Any help would be much appreciated. http://codepen.io/djangoearnhardt/pen/xRRKXy
lalith77
@lalith77
Nov 17 2016 03:49
@jdtdesigns how did you get that api? The api and output seem cryptic to me
JD Tadlock
@jdtdesigns
Nov 17 2016 03:53
@JOATI You're using a file link for the image source. You also have the link target attribute inside the img tag. And, you have the alt tag in it's own element. That should be an attribute of the image. You can wrap the image in a div and give that a class to change the size. Changing the img directly will result in ratio errors. http://jsbin.com/raxoha/edit?html,css,output
grantknaver
@grantknaver
Nov 17 2016 03:54
How do I use the geolocation api to no only graph coordinates, but actual city and weather info?
I am under the belief that the weather challenge wants a functional weather program, but is it rather asking me to create an object for a set of coordinates and use that in my challenge? Please help anyone out there?
JD Tadlock
@jdtdesigns
Nov 17 2016 03:54
@lalith77 I looked through the api docs for a couple hours to get the parameters i needed
grantknaver
@grantknaver
Nov 17 2016 03:54
Im on the weather channel
lol *challenge
lalith77
@lalith77
Nov 17 2016 03:55
@jdtdesigns thanks
CamperBot
@camperbot
Nov 17 2016 03:55
lalith77 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 748 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Terryd12345
@Terryd12345
Nov 17 2016 03:55
Any clue what this error is :
Mixed Content: The page at 'https://codepen.io/terryd12345/pen/mOrRgx?editors=1011' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://ip-api.com/json'. This request has been blocked; the content must be served over HTTPS.
JD Tadlock
@jdtdesigns
Nov 17 2016 03:55
@grantknaver OpenWeather will give you the city, country and weather. All you need to is get the lat and long. This can be done with the navigator or an ip location api like ip-api.com/json.
@Terryd12345 You can't load codepen on https and then load something through http.
remove the https from https://codepen....
grantknaver
@grantknaver
Nov 17 2016 03:58
ahhhh
Terryd12345
@Terryd12345
Nov 17 2016 03:58
@jdtdesigns oh awesome thanks !
CamperBot
@camperbot
Nov 17 2016 03:58
terryd12345 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 749 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
grantknaver
@grantknaver
Nov 17 2016 03:59
I misinterpreted the challenge
gottcha
thanks @jdtdesigns
CamperBot
@camperbot
Nov 17 2016 04:00
grantknaver sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 750 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
grantknaver
@grantknaver
Nov 17 2016 04:05
@jdt one last question. you got a sec
?
JD Tadlock
@jdtdesigns
Nov 17 2016 04:06
sure
grantknaver
@grantknaver
Nov 17 2016 04:08
The challenge sounds like it needs to dynamically detect the weather and other elements of you current location... am I on track @jdtdesigns ?
JD Tadlock
@jdtdesigns
Nov 17 2016 04:08
Yep
grantknaver
@grantknaver
Nov 17 2016 04:10
how do I setup a dynamic detection... do you have any hints to point me the right direction?
JD Tadlock
@jdtdesigns
Nov 17 2016 04:10
you need to use the navigator or an ip location api to get the lat and long
then use those to get the weather for the user from openweather
ajax stuff
grantknaver
@grantknaver
Nov 17 2016 04:12
ahhhh openweather is another api isnt it?
lalith77
@lalith77
Nov 17 2016 04:13
@grantknaver yes it is
grantknaver
@grantknaver
Nov 17 2016 04:13
that is why I have been so stuck
lalith77
@lalith77
Nov 17 2016 04:13
''' $.getJSON('api.openweathermap.org/data/2.5/weather?lat='+lat+'&lon='+long+'&appid=aa3f245973b19d01d0ff9e5e434b6d6c',function(json){
console.log(json.main.temp);
}); '''
CamperBot
@camperbot
Nov 17 2016 04:13
:bulb: to format code use backticks! ``` more info
lalith77
@lalith77
Nov 17 2016 04:14
anyone know why the code doesnt work?
grantknaver
@grantknaver
Nov 17 2016 04:14
I though I was missing some sort of api. thank you @jdtdesigns and @lalith77
CamperBot
@camperbot
Nov 17 2016 04:14
grantknaver sends brownie points to @jdtdesigns and @lalith77 :sparkles: :thumbsup: :sparkles:
:warning: grantknaver already gave jdtdesigns points
:warning: could not find receiver for lalith77
lalith77
@lalith77
Nov 17 2016 04:14
ive already defined the variables lat and long
JD Tadlock
@jdtdesigns
Nov 17 2016 04:15
@lalith77 Probably an async issue. Post your pen if you don't mind
JD Tadlock
@jdtdesigns
Nov 17 2016 04:17
@lalith77 Don't use codepen console. Use the browser instead. You'll see your errors then. ;)
lalith77
@lalith77
Nov 17 2016 04:19
But if I use a html file how will I print to console?
JD Tadlock
@jdtdesigns
Nov 17 2016 04:20
same way (console.log('somethin')
right click on the codepen preview window and hit inspect
then click the console tab
lalith77
@lalith77
Nov 17 2016 04:22
ok thanks @jdtdesigns
CamperBot
@camperbot
Nov 17 2016 04:22
lalith77 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: lalith77 already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Nov 17 2016 04:33
@lalith77 here's an example of how to go about getting the data http://codepen.io/jdtadlock/pen/xRRKBB?editors=0010
Joshua Henderson
@tracer223
Nov 17 2016 04:40
thanks @jdtdesigns @gregagit I'll make those changes
CamperBot
@camperbot
Nov 17 2016 04:40
tracer223 sends brownie points to @jdtdesigns and @gregagit :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for gregagit
:cookie: 751 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
lalith77
@lalith77
Nov 17 2016 04:44
@jdtdesigns the only difference I see is I used two different variables and you used an array for latitude and longitude.
I didnt check for the error but that shouldnt matter because the navigator api works on safari right?
JD Tadlock
@jdtdesigns
Nov 17 2016 04:45
@lalith77 It doesn't work in chrome with http which is what 90% of users use now across the world.
lalith77
@lalith77
Nov 17 2016 04:45
oh ok
JD Tadlock
@jdtdesigns
Nov 17 2016 04:46
You also, didn't add http:// to the openweather url. And you tried setting global variables on an async event.
Async means it won't immediately grab the data. The rest of your code will run even if the data hasn't been received yet. Because of this, you need to use callbacks or promises to call other requests, ect in order of when the data is received.
Never use global variables by the way.
Use var to set them first.
lalith77
@lalith77
Nov 17 2016 04:55
corrected the http error. If i declare the variables as local to the navigator function , how can I access them from the openweather function?
Do i pass them as arguments to another function like in the example?
Understood. thanks
RakeshNerkar
@Rakesh18754
Nov 17 2016 04:57

I have a variable.

var titileDiv = $(this).parents("[id^='menu']").get(0).childNodes1;
console.log(titileDiv);

         the above statement returns a entire dom element like 
         <div class="test">......</div>
          and now i want to access element inside that ?

console.log(titileDiv.text()); // returns error
console.log($("titileDiv.className");// returns error

JD Tadlock
@jdtdesigns
Nov 17 2016 05:10
childNodes1 is incorrect syntax
grantknaver
@grantknaver
Nov 17 2016 05:17
anyone have any idea how I can call the getLocation function and actually access the x var through the secondary function showPosition? I am returning the x var shouldn't prompt the x var when I alert the getLocation function?
```
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(d);
    } else {
        target.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
   var x = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
  return x;
}
*shouldnt the x var prompt when I alert the getLocation function?... Sorrry
JD Tadlock
@jdtdesigns
Nov 17 2016 05:21
@grantknaver You're passing d into getCurrentPosition()
that's not declared
getCurrentPosition(showPosition);
grantknaver
@grantknaver
Nov 17 2016 05:24
gotcha I fixed that and when I alert getLocation it returns undefined
```
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        target.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
   var x = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
  return x;
}
JD Tadlock
@jdtdesigns
Nov 17 2016 05:25
can you post the codepen?
grantknaver
@grantknaver
Nov 17 2016 05:25
gotcha doing that now
JD Tadlock
@jdtdesigns
Nov 17 2016 05:26
Have you looked at the browser console?
grantknaver
@grantknaver
Nov 17 2016 05:29
what are you seeing
JD Tadlock
@jdtdesigns
Nov 17 2016 05:30
You're showPosition return won't be available to getLocation. You'd need to do it like this.
function showPosition(position) {
   var x = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
   alert(x);
}
Also, you're loading codepen from http which won't work with navigator on chrome.
Unfortunately, openweather requires a premium account for https usage, so you'll need to find another weather api that support https for free or use an ip location api if navigator doesn't load
Digvijay Jaiswal
@DJRockstar
Nov 17 2016 05:32
Hey Guys, i have put together a blog explaining the ins and outs of Hoisting. Give it a read if you like and :heart: if you like Thanks!
https://medium.com/@digvijay.jaiswal18/hoisting-how-js-interprets-variable-declaration-9b1c1218a6ff#.e2mmqnjp9
grantknaver
@grantknaver
Nov 17 2016 05:32
I didn't know about the whole navigator on chrome
so there is no way to return the x I am trying to store the coordinates in a var
JD Tadlock
@jdtdesigns
Nov 17 2016 05:36
you can can do it many different ways
you're trying to pass the coords to a getWeather()?
grantknaver
@grantknaver
Nov 17 2016 05:37
yep
I thought I could just store the info, but apparently not
JD Tadlock
@jdtdesigns
Nov 17 2016 05:37
Here's an example i posted above for someone else. It will also handle the chrome issue. http://codepen.io/jdtadlock/pen/xRRKBB?editors=0010
grantknaver
@grantknaver
Nov 17 2016 05:40
thanks
JD Tadlock
@jdtdesigns
Nov 17 2016 05:40
yep
JD Tadlock
@jdtdesigns
Nov 17 2016 05:59
@grantknaver I updated it to be a little cleaner. ;)
grantknaver
@grantknaver
Nov 17 2016 06:46
quick question.
I am having a tough time understanding api's and how to use them
this is the call you used right...
api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
but what is this aspect of the code supposed to do...
+'&appid=aa3f245973b19d01d0ff9e5e434b6d6c',function(json){
console.log(json.main.temp);
});
};
kirbyedy
@kirbyedy
Nov 17 2016 06:59
@grantknaver appid is your key
to access the data
grantknaver
@grantknaver
Nov 17 2016 07:04
how do you obtain that
kirbyedy
@kirbyedy
Nov 17 2016 07:06
you have to register on the openweather site
its free
grantknaver
@grantknaver
Nov 17 2016 07:08
ahhhh
gotcha
Jack Lyons
@JackEdwardLyons
Nov 17 2016 07:48
Hey guys, im working on my tic tac toe trying to do it in an OOP approach... ive made a function called createElement, in order to create my tiles and buttons... but i'm wondering if this could be refactored or simply done differently to be more elegant?
inventormc
@inventormc
Nov 17 2016 07:57
Hey guys, I'm working on the first front end project, and I'm a bit confused. I'm trying to center a div using the bootstrap 12 column grid system. So I thought I could put content in an 8 column div and have a 2 column div on each side to center the div. Weirdly it appears centered when I use 4 column divs on each side
why is it centered for a 4 column div but not a 2 column div?
NITIN RAGHAV
@nitinraghav
Nov 17 2016 08:04
Hi Guys can you check if this weather app shows your local weather details. I want to confirm functionality before getting into styling it.
http://codepen.io/nitinraghav/pen/rWeRMa
code-or-die
@code-or-die
Nov 17 2016 08:26
@nitinraghav shows location but not sure about T.
kirbyedy
@kirbyedy
Nov 17 2016 08:29
@nitinraghav works, a bit off like 70km, but thats fine
Tyler Moeller
@TylerMoeller
Nov 17 2016 08:57

@inventormc The text is aligned to the left by default, so it appears centered when moved further to the right. A good way to better visualize the grid system for debugging is to use this CSS:

* {
  border: 1px solid black;
}

Instead of putting empty divs before/after, just use the col-*-offset-* class. More info here: http://getbootstrap.com/css/#grid-offsetting

jayden8388
@jayden8388
Nov 17 2016 09:36
@nitinraghav works but like the others said the location is a bit off
Sourav Samanta
@sourav0457
Nov 17 2016 09:39
Need help with my portfolio
http://codepen.io/sourav0457/pen/aBBOyj?editors=1100
In the navigation bar, when i hover over "portfolio" and "contact", the text seems to be alligned towards the right. I want it to be centered.
i have tried setting the margin, padding and even used "text-center" class. Please help.
Chris Cullen
@123xylem
Nov 17 2016 09:42
@sorinr thanks
CamperBot
@camperbot
Nov 17 2016 09:42
123xylem sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 856 | @sorinr |http://www.freecodecamp.com/sorinr
kat-mag
@kat-mag
Nov 17 2016 09:44
@sourav0457 god why
@sourav0457 put the links in one div, float them left. Position the div
defining a column for every one of them makes your job harder, not easier
Sourav Samanta
@sourav0457
Nov 17 2016 09:45
@kat-mag : just realised my page isnt responsive. fixing it :/
kat-mag
@kat-mag
Nov 17 2016 09:45
And making fixed margins on every one of them makes your job hell :D
Just try to simplify ^^
Sourav Samanta
@sourav0457
Nov 17 2016 09:46
If i put all the links in one div, how to i make them change background colour when hovering over them?
@kat-mag
Chris Cullen
@123xylem
Nov 17 2016 09:55
Hi,
Im uploading a few images onto a web based game... How should I efficenetly do this with codepen?
kat-mag
@kat-mag
Nov 17 2016 09:56
@sourav0457 give them ids
@123xylem put them in one place. e.g. github repo or some other hosting service. And ofc optimize the images
Sourav Samanta
@sourav0457
Nov 17 2016 09:57
okay, thanks for the help @kat-mag
i'll start from scratch
CamperBot
@camperbot
Nov 17 2016 09:57
sourav0457 sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @kat-mag |http://www.freecodecamp.com/kat-mag
Chris Cullen
@123xylem
Nov 17 2016 09:58
@kat-mag and how do i then access them with codepen?
kat-mag
@kat-mag
Nov 17 2016 09:59
by a link of course. enter the repo you've created, click on the image and get the link. Then use it in your codepen
it's this or get pro codepen acc xD
Or you can just use git & host your 'game' on ghpages/bitbucket
n0ahhhhh
@n0ahhhhh
Nov 17 2016 11:20
Hello, this is my first time asking for help, and I'm hoping someone might be able to help with the personal portfolio webpage project.
I can't seem to get my collapsible navigation bar button to expand to show the contents. When I resize my browser, it collapses just fine, but when I click on the button again, nothing happens and I can't quite figure out why.
n0ahhhhh
@n0ahhhhh
Nov 17 2016 11:28
if anyone can help, please send me a message. :)
Sachin Mate
@sachinmatepatil
Nov 17 2016 11:29
ko loy yee
@koloyyee
Nov 17 2016 11:37
Hey guys! How are you all doing ?
I want to share my first free code camp challenge project on here please give me some comments ! Thanks!
Thayyeb salim
@Thayyebsalim
Nov 17 2016 12:09
So you did it :thumbsup:
nice work @koloyyee
@sachinmatepatil It's good but spend some more time for it
Karsten Duim
@kalkala
Nov 17 2016 12:15
@koloyyee it is a nice page i just finnished mine 2 days ago wanna comment on mine???
Thayyeb salim
@Thayyebsalim
Nov 17 2016 12:17
Could you guys review my tribute page
https://codepen.io/Thayyeb_Itachi/pen/rWVrmG
ko loy yee
@koloyyee
Nov 17 2016 12:29
@Thayyebsalim nice! nikola tesla one of my favorite figure !
Thayyeb salim
@Thayyebsalim
Nov 17 2016 12:30
@koloyyee My Idol figure
ko loy yee
@koloyyee
Nov 17 2016 12:31
your page page looks much better than alot of biography pages on the public lol
@kalkala IMHO i think you can try different font, maybe google font, and maybe using some <ul> <li> will be easier to read, hope my comment would help!
Thayyeb salim
@Thayyebsalim
Nov 17 2016 12:34
@koloyyee thank you very much my friend TEsla deserves more right
CamperBot
@camperbot
Nov 17 2016 12:34
:cookie: 119 | @koloyyee |http://www.freecodecamp.com/koloyyee
thayyebsalim sends brownie points to @koloyyee :sparkles: :thumbsup: :sparkles:
ko loy yee
@koloyyee
Nov 17 2016 12:34
@Thayyebsalim that was the first challenge i am still working on the personal portfoilo challenge
@Thayyebsalim thank you for sharing!
CamperBot
@camperbot
Nov 17 2016 12:35
koloyyee sends brownie points to @thayyebsalim :sparkles: :thumbsup: :sparkles:
:cookie: 204 | @thayyebsalim |http://www.freecodecamp.com/thayyebsalim
Thayyeb salim
@Thayyebsalim
Nov 17 2016 12:36
don't rush things @koloyyee
Take your time and learn
ko loy yee
@koloyyee
Nov 17 2016 12:36
yup!
Jeff Shapiro
@Jeff-Shapiro
Nov 17 2016 12:37
Yes @Thayyebsalim!!!! you should too!
Thayyeb salim
@Thayyebsalim
Nov 17 2016 12:38
@Jeff-Shapiro
sure
I think I'll try making a couple more websites for practice @Jeff-Shapiro
and I'll disturb you with my questions as usual :D
Jeff-Shapiro @Jeff-Shapiro is turning off for the night
Rony2351
@Rony2351
Nov 17 2016 13:11
how do i start his off? where do i go to start a triubte ??
Thayyeb salim
@Thayyebsalim
Nov 17 2016 13:13
codepen.io
@Rony2351
Levi
@MalangeLevi
Nov 17 2016 13:46
@Rony2351 click on the link provided
Jordan Ivanov
@DaniGithub
Nov 17 2016 14:20
Could I get some help with the Simon's game CSS? I think its a specificity problem but I am not sure. I've got 4 selectors, one for each color, which only change the background-color property. Then, underneath those, I have one selector that selects all of them and sets the dimensions and other properties. The problem is that the very first element does not get the background color applied while the other three are colored as expected. Here is the CodePen link http://codepen.io/jordanivanov/pen/WooRMy
Jack Of All Trades International.
@JOATI
Nov 17 2016 14:29
thanks @jdtdesigns thanks @jdtdesigns
CamperBot
@camperbot
Nov 17 2016 14:29
joati sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 752 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Lajuane Brown
@bluntiebrown
Nov 17 2016 15:15
Hello out here I need help,I'm catching hell trying to import a font I want to use from google to codepen
Simon Cordova
@gbsimon87
Nov 17 2016 15:18
Hey guys...Cheers to all...
I have a question.
Say I've got three divs all with respective classes, but I want each div to appear with a two second delay in order, what's the most efficient way to go about this?
Vuong
@vuongggggg
Nov 17 2016 15:19
@bluntiebrown Post your codepen link here
Lajuane Brown
@bluntiebrown
Nov 17 2016 15:20
@vuongggggg I just started the project and I would like to use the font Bangers for the text in the <h> element
Vuong
@vuongggggg
Nov 17 2016 15:24
put font name in single quote
like this:
font-family: 'Bangers';
Lajuane Brown
@bluntiebrown
Nov 17 2016 15:25
@vuongggggg ok,I'll give it a shot
Vuong
@vuongggggg
Nov 17 2016 15:27
Right syntax to include the font
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet">
@bluntiebrown you need to write css in CSS part of codepen. Don't write it in HTML part ^^
Lajuane Brown
@bluntiebrown
Nov 17 2016 15:34
@vuongggggg I included <link href="https://fonts.googleapis.com/css?family=Bangers"/> in the head I didn't in css though I'll do that now and hit you back with the result
ko loy yee
@koloyyee
Nov 17 2016 15:41
hey guys i am working on the personal portfolio challege here is what i got so far
please give me some suggestion on improving the page to make it more exciting ! thank you!!
http://codepen.io/snwomanco/pen/QGGvYg
Thayyeb salim
@Thayyebsalim
Nov 17 2016 15:42
you need a nav bar @koloyyee
check out bootstrap nav bar
ko loy yee
@koloyyee
Nov 17 2016 15:43
cool thanks @Thayyebsalim
CamperBot
@camperbot
Nov 17 2016 15:43
koloyyee sends brownie points to @thayyebsalim :sparkles: :thumbsup: :sparkles:
:cookie: 205 | @thayyebsalim |http://www.freecodecamp.com/thayyebsalim
ko loy yee
@koloyyee
Nov 17 2016 15:43
i wonder how to do the "nav bar" like other pages do
Thayyeb salim
@Thayyebsalim
Nov 17 2016 15:44
just google nav bar bootsrap
ko loy yee
@koloyyee
Nov 17 2016 15:46
alright i will do that now
Vuong
@vuongggggg
Nov 17 2016 15:46
@koloyyee you need to learn how to use class .contailer-fluid, .container
Link to the tutorial http://getbootstrap.com/css/
ko loy yee
@koloyyee
Nov 17 2016 15:48
thanks! @vuongggggg
CamperBot
@camperbot
Nov 17 2016 15:48
koloyyee sends brownie points to @vuongggggg :sparkles: :thumbsup: :sparkles:
:cookie: 292 | @vuongggggg |http://www.freecodecamp.com/vuongggggg
ko loy yee
@koloyyee
Nov 17 2016 16:01
i think i will work on it tomorrow damn getting sleepy, thanks for the tips again @vuongggggg and @Thayyebsalim !
CamperBot
@camperbot
Nov 17 2016 16:01
koloyyee sends brownie points to @vuongggggg and @thayyebsalim :sparkles: :thumbsup: :sparkles:
:warning: koloyyee already gave thayyebsalim points
:warning: koloyyee already gave vuongggggg points
Lajuane Brown
@bluntiebrown
Nov 17 2016 16:03
@vuongggggg I was able to change the font of the text in my <h>element but it didn't change to the Bangers font that I'm trying to use
Lajuane Brown
@bluntiebrown
Nov 17 2016 16:12
@vuongggggg thanx for the help you the dopest
CamperBot
@camperbot
Nov 17 2016 16:12
bluntiebrown sends brownie points to @vuongggggg :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @vuongggggg |http://www.freecodecamp.com/vuongggggg
Vuong
@vuongggggg
Nov 17 2016 16:12
@bluntiebrown old link? :D
is it work?
Lajuane Brown
@bluntiebrown
Nov 17 2016 16:16
@vuongggggg possibly or I could still be doing something wrong
Vuong
@vuongggggg
Nov 17 2016 16:18
blob
@bluntiebrown can you see the problem?
Lajuane Brown
@bluntiebrown
Nov 17 2016 16:19
@vuongggggg this is how the Bangers font appears on the library page https://fonts.google.com/?query=Bangers
Vuong
@vuongggggg
Nov 17 2016 16:20
^^ no, look at screenshot i posted
Lajuane Brown
@bluntiebrown
Nov 17 2016 16:20
@vuongggggg aww shit I this so,I shouldn't have included the font size
Vuong
@vuongggggg
Nov 17 2016 16:20
it's missing }
the font-size isn't a problem.
Lajuane Brown
@bluntiebrown
Nov 17 2016 16:24
@vuongggggg actually it's there after the font-family both of which are in between the same { }
Vuong
@vuongggggg
Nov 17 2016 16:24
@bluntiebrown check private message please
djangoearnhardt
@djangoearnhardt
Nov 17 2016 16:40

Good morning! Can anyone explain why my search button is slightly lopsided on my wiki viewer? Or how I could fix it? Thank you!

http://codepen.io/djangoearnhardt/pen/vyyBzY

JD Tadlock
@jdtdesigns
Nov 17 2016 16:44
@djangoearnhardt
.glyphicon-search {
  position: relative;
  top: 0;
}
Tyler Moeller
@TylerMoeller
Nov 17 2016 16:44
@DaniGithub Rather than using attribute selectors, assign each button a common class like mBtn mBtn-green, mBtn mBtn-yellow, etc... When you need to apply CSS to all of the buttons at once, select them with the mBtn class. When you need to target individual buttons, use the color-specific class. Also, if you just want to change the color on click, use the :active pseudo-class. Here's a fork of your pen that shows what I mean.
JD Tadlock
@jdtdesigns
Nov 17 2016 16:44
One of the reasons i despise BS. It's full of hacktastic code.
djangoearnhardt
@djangoearnhardt
Nov 17 2016 16:48
Awesome!!! thank you @jdtdesigns I was just watching some videos on animating through CSS that was using position and top… but I wasn’t able to put that together on my own lol
CamperBot
@camperbot
Nov 17 2016 16:48
:cookie: 753 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
djangoearnhardt sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
djangoearnhardt
@djangoearnhardt
Nov 17 2016 16:49
what is a better option that BS? @jdtdesigns
JD Tadlock
@jdtdesigns
Nov 17 2016 16:50
vanilla css
flexbox has huge support now and blows away BS's grid system
i can make a grid in 10 lines of code that BS makes in 150
djangoearnhardt
@djangoearnhardt
Nov 17 2016 16:51
i’ll look into flexbox… i wanted to try one of my front end projects using BS just to practice, but I have found a few little things like that pretty frustrating
that’s nice to know thanks
Jason Luboff
@JLuboff
Nov 17 2016 16:55
(is that what you're refering to)
djangoearnhardt
@djangoearnhardt
Nov 17 2016 16:56
if you’ve got another second, why am I getting an empty white box for my <ul> before it populates w/ my search results. I wanted to add padding but only after the API is loaded. @jdtdesigns
Jason Luboff
@JLuboff
Nov 17 2016 16:57
@djangoearnhardt Add the padding with jQuery's .css() after the click function?
JD Tadlock
@jdtdesigns
Nov 17 2016 16:57
@JLuboff No libraries or frameworks. Just vanilla flexbox.
Jason Luboff
@JLuboff
Nov 17 2016 16:58
@jdtdesigns Gotcha. I'll look into it. I like BS just for the simplicity of it (once you get it), but am open to understanding and learning different/better techniques
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:00
$('#output’).css('padding: 20px 15px 20px 15px;’).prepend('<li><a href= ' + data[3][i] + '>' + data[1][i] +'</a> <p>' + data[2][i] + '</p></li>');} ?
Jason Luboff
@JLuboff
Nov 17 2016 17:01
@djangoearnhardt Apply the .css to your li element
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:02
still through jQuery? @JLuboff
Jason Luboff
@JLuboff
Nov 17 2016 17:02
$(".li").css('padding': 20px 15px 20px 15px;);
$("#output").prepend.....
(You may have to double check my syntax)
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:04
I’m getting an unexpected illegal token...
i haven’t tried styling through jQuery before, does that need to be declared outside the function or a global type thing?
JD Tadlock
@jdtdesigns
Nov 17 2016 17:05
@djangoearnhardt
$(document).ready(function() {
  $('#output').hide(); // hides the ul initially

  $('#search').click(function() {

    var searchContent = $('#searchContent').val();

    var api = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchContent + "&format=json&callback=?";

    $.ajax({
      type: 'GET',
      url: api,
      async: false,
      dataType: 'json',
      success: function(data) {

        // If user typed in something, show the ul, else hide it
        if ( searchContent.length ) 
          $('#output').show(); 
        else $('#output').hide(); 

        $('#output').html(' ');
        for (var i = 0; i < data[1].length; i++) {
          $('#output').prepend('<li><a href= ' + data[3][i] + '>' + data[1][i] + '</a> <p>' + data[2][i] + '</p></li>');
        }
      },
      error: function(error) {
        $('#output').html('Please try another search term');
      }
    })
  });
  $('#searchContent').keypress(function(e) {
    if (e.which == 13) {
      $('#search').click();
    }
  });
});
Jason Luboff
@JLuboff
Nov 17 2016 17:06
@djangoearnhardt It can be declared in the function. As I said, my syntax may have been off, you'd want to look at the documentation for it. But it looks like @jdtdesigns offered another wy, looks like using jQuery's .show()/.hide()
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:07
yall are incredible !! thank you both @jdtdesigns @JLuboff
CamperBot
@camperbot
Nov 17 2016 17:07
djangoearnhardt sends brownie points to @jdtdesigns and @jluboff :sparkles: :thumbsup: :sparkles:
:warning: djangoearnhardt already gave jdtdesigns points
:cookie: 443 | @jluboff |http://www.freecodecamp.com/jluboff
Jason Luboff
@JLuboff
Nov 17 2016 17:08
Have the brownies always actually been cookies? I just noticed that...
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:08
the type of thing that makes perfect sence, but my limited experience prevents me from seeing :)
Shawn Grooms
@SEGrooms
Nov 17 2016 17:12
@JLuboff hahaha
I think they used to be called something else
JD Tadlock
@jdtdesigns
Nov 17 2016 17:14
@djangoearnhardt You're creating a keypress event listener every time you search. You should put the ajax/output into a function and set the listeners seperately.
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:16
@jdtdesigns ok i’m going to go read about that and see if i can fix it, thanks
CamperBot
@camperbot
Nov 17 2016 17:16
djangoearnhardt sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: djangoearnhardt already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Nov 17 2016 17:22
@djangoearnhardt
$(document).ready(function() {
  $('#output').hide(); // hides the ul initially

  var getResults = function() {
    var searchContent = $('#searchContent').val();

    var api = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchContent + "&format=json&callback=?";

    $.ajax({
      type: 'GET',
      url: api,
      async: false,
      dataType: 'json',
      success: function(data) {

        // If user typed in something, show the ul, else hide it
        if ( searchContent.length ) 
          $('#output').show(); 
        else $('#output').hide(); 

        $('#output').html(' ');
        for (var i = 0; i < data[1].length; i++) {
          $('#output').prepend('<li><a href= ' + data[3][i] + '>' + data[1][i] + '</a> <p>' + data[2][i] + '</p></li>');
        }
    },
    error: function(error) {
      $('#output').html('Please try another search term');
    }
    })
  };

  // Set the listeners only once
  $('#search').on('click', getResults);

  $('#searchContent').keypress(function(e) {
    if (e.which == 13) getResults();
  });
});
@djangoearnhardt Also, you need to move jQuery above BS in Settings->JS. BSjs requires jquery to run.
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:26
wow that’s really nice, that makes much more sense. i can spend all day looking this over and learning from it. @jdtdesigns
just better thought out
thank you again for your time @jdtdesigns
CamperBot
@camperbot
Nov 17 2016 17:27
djangoearnhardt sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: djangoearnhardt already gave jdtdesigns points
Gigarthan
@gigagj
Nov 17 2016 17:32
guys a small help how do get images to get working with when i get their links from other websites.
i got it thanx anyways
Emil
@EmilTsg
Nov 17 2016 17:39
Hi guys :D If i have a picture with a white border, how do i get some text under it, and still inside the white border?
Jason Luboff
@JLuboff
Nov 17 2016 17:42
@EmilTsg Place them into the same div container and apply the border to the div would be one way
JD Tadlock
@jdtdesigns
Nov 17 2016 17:52
@djangoearnhardt To help you understand a better approach to avoid errors, I've refactored some of your code. Once you learn .map(), you'll never go back. ;) http://codepen.io/jdtadlock/pen/GNNMXJ?editors=0010
djangoearnhardt
@djangoearnhardt
Nov 17 2016 17:56
that’s so nice of you @jdtdesigns :clap: :+1: I’m off to learn about .map() right now, really appreciate all the help this AM
inventormc
@inventormc
Nov 17 2016 18:04
@TylerMoeller I understand, thank you so much!
CamperBot
@camperbot
Nov 17 2016 18:04
inventormc sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 938 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
djangoearnhardt
@djangoearnhardt
Nov 17 2016 18:14
so with data[1].map(function(result, i) you created a new array of the wikipedia API results, which essentially got rid of the need for the for loop? @jdtdesigns
JD Tadlock
@jdtdesigns
Nov 17 2016 18:18
@djangoearnhardt I didn't create a new array. I just iterated through the second array in the results with the titles in it. .map() can just iterate or change values.
iteration is going through a list only once
djangoearnhardt
@djangoearnhardt
Nov 17 2016 18:25
ok i think i have a tenuous grasp so far, enough to get into plenty of trouble :) piqued my interest for sure @jdtdesigns
JD Tadlock
@jdtdesigns
Nov 17 2016 18:29
@djangoearnhardt I updated it to show when the api has no results. You were trying to display a 'no results' message when the ajax request failed, not when the api returned nothing. ;)
djangoearnhardt
@djangoearnhardt
Nov 17 2016 18:33
ohhh ok i see the difference there @jdtdesigns
Joshua Henderson
@tracer223
Nov 17 2016 19:47
http://codepen.io/tracer223/pen/pNJZMp?editors=1111
Re-writing my twitch app with the fixed URL, unable to get any data to output to my HTML element as a test. Been wrestling with this a while now, any help is appreciated.
Joshua Henderson
@tracer223
Nov 17 2016 19:52
thanks @jdtdesigns
CamperBot
@camperbot
Nov 17 2016 19:52
tracer223 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 754 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Nov 17 2016 19:53
since null is a falsy value you can just change the if to this
     if (!data.stream) {
        $("#status").html("Channel OFFLINE");
      }
      else {
        $("#status").html("Channel ONLINE");
      }
@tracer223
Joshua Henderson
@tracer223
Nov 17 2016 19:57
nice! I'll try implementing that @jdtdesigns
o2ri
@o2ri
Nov 17 2016 20:27

hi all , i am new here ,just checking the power of this chat
i need help with building my portofollio,

the question is how to make a photo appear on two rows.
each line has its own background color so it cant be a column

this is the codepen http://codepen.io/o2ri/pen/YpGPOd?editors=1010

i want the BIG maya will be on top of both blue rows

WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 20:29
Hi guys, I need help with the Weather Challenge. Does the open weather API work inside CodepPen?
I can't get ti to work, trying to figure out if I'm doing something wrong if if the API just wont work inside CodePen
it if
JD Tadlock
@jdtdesigns
Nov 17 2016 20:33
@o2ri I don't have a clue what you're trying to do lol. First thing though would be to remove <style>...</style>, <body></body> elements from the html panel. Codepen adds <html><body> for you. Also, put your styles in the css panel.
@WhiteCaneGamer Post your codepen
o2ri
@o2ri
Nov 17 2016 20:35

@jdtdesigns

the preview is not true , pls open in in codepen:

this is what i try to do : http://mayaoh0.wixsite.com/mayahaser

but i cant understand how to put the right image on top of two rows

@WhiteCaneGamer .if its help it worked for me , Chrome asked me for permission than showd me my geo
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 20:40
@o2ri yeah the geolocation bit works, but the open weather api call doesn't work :(. It should consolelog the json data it returns but it won't work.
I've tried it in 3 browsers too, edge, chrome and firefox and doesn't work in either
There is a delay in edge and Firefox though before I get my console.log message "something went wrong"
so it may be a timeout issue
or I've messed up somewhere
WhiteCaneGamer
@WhiteCaneGamer
Nov 17 2016 21:11
@jdtdesigns thanks you've given me a lot to think about
CamperBot
@camperbot
Nov 17 2016 21:11
whitecanegamer sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 755 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Isaac Calvo
@Icalvo1
Nov 17 2016 21:14
Hello, I'm having trouble binding an click event handler to a dynamically added <a id='symbol'> tag. http://codepen.io/Icalvo1/pen/kkYkqR

//delared helper vars

var geoip = "//freegeoip.net/json/";
var w_key= ',us&appid=17e01a8f09c957ee8ead577842268b0b&units=imperial'; 
var weatherapi ="api.openweathermap.org/data/2.5/weather?zip=";
var loc;

//functions
function convertToF(celsius) {
  var fahrenheit;
  fahrenheit = (celsius * 9/5) + 32;
  return fahrenheit;
}
function convertToC(fahrenheit) {
  var celsius;
  celsius = (5/9) * (fahrenheit - 32);
  return celsius;
}
//detects users location
$.getJSON( geoip, function( data ) {
  $.each( data, function( key, val ) {
    if(key ==='city'){
      $('#tom').append("<h2 class='location'>City: " + val +"</h2>");
    }
    else if(key === 'zip_code'){
      loc=val;
      weatherapi ="http://" + weatherapi + loc + w_key;
        //calls weather api based on user location
        $.getJSON( weatherapi, function( data ) {
          $("#jerry").append("<h2 id='temp' class='line'>Temp: "+ data.main.temp+ "<a id='symbol' href='#'>F</a>" +"</h2>");
          $("#jerry").append("<h2 class='line'>Sky: "+ data.weather[0].description +"</h2>");
          //conditional for sky: 'mist', 'fog', 'clear sky'
            if(data.weather[0].description === 'clear sky'){ 
              $('body').addClass('clear');
            }else if(data.weather[0].description === 'fog'){
              $('body').addClass('fog');
            }else if(data.weather[0].description === 'mist'){
              $('body').addClass('mist');
            }else if(data.weather[0].description === 'light rain'){
              $('body').addClass('lrain');
            }else if(data.weather[0].description === 'moderate rain'){
              $('body').addClass('mrain');
            }else if(data.weather[0].description === 'heavy rain'){
              $('body').addClass('hrain');
            }else if(data.weather[0].description === 'broken clouds'){
              $('body').addClass('bclouds');
            }else if(data.weather[0].description === 'overcast clouds'){
              $('body').addClass('Ovclouds');
            }
          $("#jerry").append("<h2 class='line'>Wind: " + data.wind.speed + " mph</h2>"); 
          $("#jerry").append("<h2 class='line'>Cloudy: " + data.clouds.all +"% </h2>");
        });      
    }   
  });
});
Ben
@TheBenjimoto
Nov 17 2016 21:15
Hey guys, any idea why this simple code doesn't work? http://codepen.io/Benjibooty/pen/bBBvjv
Isaac Calvo
@Icalvo1
Nov 17 2016 21:20
i tried .on() .click() can't get click event to bind to <a> tag http://codepen.io/Icalvo1/pen/kkYkqR
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:27
@WhiteCaneGamer To help simplify, you are hitting a Mixed-Content error. At a basic level, you cannot load your web page over HTTPS and then call resources, like openweathermap, over HTTP. Read this issue to learn more about workarounds for your project: FreeCodeCamp/FreeCodeCamp#7853
@Icalvo1 <a id='symbol'> does not need a click handler, it's an anchor tag and clickable by default - like any link you would see on a web page.
@TheBenjimoto You have a lower-case b on line 7. It should be var image = document.getElementById('zero'); -- note the ById - it is case sensitive.
Ben
@TheBenjimoto
Nov 17 2016 21:31
@TylerMoeller thanks, i feel silly now @_@
CamperBot
@camperbot
Nov 17 2016 21:31
:warning: could not find receiver for _
thebenjimoto sends brownie points to @tylermoeller and @_ :sparkles: :thumbsup: :sparkles:
:cookie: 939 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:31
Easy mistake :) more commonly, people do ID instead of Id
Ben
@TheBenjimoto
Nov 17 2016 21:32
is window.onload = init; necessary at all?
JD Tadlock
@jdtdesigns
Nov 17 2016 21:33
@o2ri Here's an example of how to layout the content without BS. The issue will be making it responsive. It'll be a little work, but much less than if you used BS to do this. Custom design like this is not what BS is made for.
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:33
@TheBenjimoto With your app, no.
But you do need to call the function
Ben
@TheBenjimoto
Nov 17 2016 21:35
so i could just call it via init()?
Gaelle Sop
@ges227
Nov 17 2016 21:35
Hi! I am new to JS and just started working on the Random Quote Machine on codepen. I am trying to test my ability to trigger a text upon a click event. Can someone lmk why this isn't working ?
<script>
$(document).ready(function(){
  $('#quoteButton').on("click",function(){
    $(".Quote").html('"We are now one"');
  });
});
</script>

<div class="container center-block text-center">
  <h1 class="Quote"></h1>
  <button id="quoteButton" class="btn btn-primary">New Quote</button>
</div>
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:35
@Icalvo1 This should work:
$('#symbol').click(function() {
  alert('clicked!')
  // If the text is F convert to C, else convert to F.
})
@TheBenjimoto Yes, but it doesn't hurt to leave it the way you have it
Ben
@TheBenjimoto
Nov 17 2016 21:37
@TylerMoeller thanks again. i'm reading up on window.onload = init() as opposed to window.onload = init; now
CamperBot
@camperbot
Nov 17 2016 21:37
thebenjimoto sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: thebenjimoto already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:39
@ges227 You will need to load jQuery before trying to use it. Try this instead:
<div class="container center-block text-center">
  <h1 class="Quote"></h1>
  <button id="quoteButton" class="btn btn-primary">New Quote</button>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $('#quoteButton').on("click",function(){
    alert('clicked')
    $(".Quote").html('"We are now one"');
  });
});
</script>
Gaelle Sop
@ges227
Nov 17 2016 21:41
oh thank you!
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:41
No problem
Anabel
@AnabelSalomone
Nov 17 2016 21:46
Hey! Can somebody check how can I correct the "extra space" at the right? =) http://codepen.io/marieanabel/pen/yVVjMB
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:46
@TheBenjimoto Oh, I meant you can do either: window.onload = init() or just init(). window.onload waits for the window to load, but since you aren't dynamically adding any HTML and the user can't do anything until the picture appears, you don't have to wait for the window to load.
Ben
@TheBenjimoto
Nov 17 2016 21:48
@TylerMoeller Is one or the other better for conventional use?
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:49
@TheBenjimoto It really depends on what your code is doing - hard to give a concise answer. Maybe read this answer here for more details: http://stackoverflow.com/questions/8717401/is-the-onload-necessary-when-the-code-is-at-the-bottom
kat-mag
@kat-mag
Nov 17 2016 21:51
@AnabelSalomone use devtools. But it's probably padding on bootstrap's row or some other magic margin.
JD Tadlock
@jdtdesigns
Nov 17 2016 21:53
@AnabelSalomone First thing, remove all <html><head><body> from the html tab. Codepen adds that for you. Bootstrap is added through Settings->CSS, and the fonts are all added through Settings->HTML->Stuff for head. Then wrap the bottom content in a container.
<div class="container">
  <div class="row padding">
    <div class="col-md-4 text-center"><i class="material-icons md-48">art_track</i><br> Histoire de l'art</div>
    <div class="col-md-4 text-center"><i class="material-icons md-48">work</i><br> Experiences</div>
    <div class="col-md-4 text-center"><i class="material-icons md-48">art_track</i><br>Histoire de l'art</div>
  </div>
</div>
Tyler Moeller
@TylerMoeller
Nov 17 2016 21:56
@AnabelSalomone Also, please change that image to a smaller size :) it causing my old computer to hang because it is so big. Unsplash lets you do that by calling out the image ID followed by the size you want: https://source.unsplash.com/VV_AtjLknlA/1280x1024
Anabel
@AnabelSalomone
Nov 17 2016 21:57
@jdtdesigns yes, I know, I just made a quick copy-paste
@jdtdesigns great, thanks! I added the "container" class and it worked :)
CamperBot
@camperbot
Nov 17 2016 21:59
anabelsalomone sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 756 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Anabel
@AnabelSalomone
Nov 17 2016 22:00
@TylerMoeller Oops, sorry :( I'll check that, I just put a random image as a placeholder. No problem on my pc though.
ferminrp
@ferminrp
Nov 17 2016 22:04
Hi! I'm having some trouble centering an image/thumbnail on mu first project. The tribute one. Can someone please take a look at it and tell me what's wrong? Thanks in advance
Tyler Moeller
@TylerMoeller
Nov 17 2016 22:11

@ferminrp You'll need to use an offset to center it if you want it in a column:

<div class="thumbnail col-md-4 col-md-offset-4">
    <img class="img-rounded img-responsive" id="main-photo" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d4/Cura_Brochero_01.jpg/200px-Cura_Brochero_01.jpg">
    <p class="caption text-center">El cura brochero</p>
</div>

Also, I noticed your HTML preprocessor is markdown. You don't want that for the tribute project.

ferminrp
@ferminrp
Nov 17 2016 22:12
@TylerMoeller many thanks!!
CamperBot
@camperbot
Nov 17 2016 22:12
ferminrp sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 940 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ferminrp
@ferminrp
Nov 17 2016 22:12
I don't know what a reprocessor is
I though i could turn it into something like sublime-texts which completes the fields for me
Tyler Moeller
@TylerMoeller
Nov 17 2016 22:13
No problem. Here are some more Bootstrap Grid Examples that may help understand how columns work. To change the preprocessor, click the Settings button and choose None from the HTML Preprocessor dropdown menu
ferminrp
@ferminrp
Nov 17 2016 22:14
Done, and thanks for those examples.
Tyler Moeller
@TylerMoeller
Nov 17 2016 22:14
Ahh, you can do autocomplete in your profile settings: https://codepen.io/ferminrp/settings/editor
denada :)
ferminrp
@ferminrp
Nov 17 2016 22:15
Gracias!
Aaron Bell
@awb715
Nov 17 2016 22:26
how do you vertically align text?
Rami
@RNwebdk
Nov 17 2016 22:49
What do you guys use to sync you bookmarks ? something clean and simple
a.sanchez
@0100000101010011
Nov 17 2016 22:55
@RNwebdk can you expand on that? technically google chrome syncs bookmarks across devices
Rami
@RNwebdk
Nov 17 2016 22:56
@0100000101010011 I need something more visual. like a place where i can sort in categories and see thumbnails
a.sanchez
@0100000101010011
Nov 17 2016 23:01
in regards to thumbnails, default chrome bookmarks show a thumbnail and you can create folders that act as categories
one thing i like to do is to drag the folder/category to my chrome bookmark toolbar for quicker access
Rami
@RNwebdk
Nov 17 2016 23:03
thanks @0100000101010011 i'll give it a try :)
CamperBot
@camperbot
Nov 17 2016 23:03
rnwebdk sends brownie points to @0100000101010011 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for 0100000101010011
a.sanchez
@0100000101010011
Nov 17 2016 23:05
cheers
TobyChow
@TobyChow
Nov 17 2016 23:39
Hi, I have CSS that works in Chrome (v54) but not in Firefox(v50) or IE(v11)
Website in question: http://tobychow.github.io/
The overlay on my 'projects' section isn't positioned properly in firefox (50) and IE.
I tested it on chrome V.54 and it works fine.
I tried playing with the positioning on '.slot-2' and also '.overlay', and still can't figure it out. Any help would be appreciated.
aRtoo
@artoodeeto
Nov 17 2016 23:59
hello someone can help me about box flex??