These are chat archives for FreeCodeCamp/HelpFrontEnd

16th
Jun 2016
laurenamy
@laurenamy
Jun 16 2016 00:04
Hey everyone, I'm currently on the "Build a Wikipedia Viewer" project and I'm getting this error in console when I try to search "No 'Access-Control-Allow-Origin'" Anyway to get around this?
JD Tadlock
@jdtdesigns
Jun 16 2016 00:14
@laurenamy add &callback=? as a parameter to the url
laurenamy
@laurenamy
Jun 16 2016 00:15
it's there. here's my codepen link if anyone wants to take a look! https://codepen.io/laurenamy/pen/RRRVvQ?editors=1010
Luke
@lukenetti3
Jun 16 2016 00:18
@jdtdesigns Hi, you were helping me earlier with the random quote machine. I looked at your code and it seems to make sense, but some of that stuff was never taught in the previous challenges. Are we supposed to just figure this out on our own or is there another way similar to how it was taught on how to do it?
JD Tadlock
@jdtdesigns
Jun 16 2016 00:25
@laurenamy
$.ajax({
      url:url,
      jsonp: "?",
      dataType: "jsonp",
      success: function(data) {
        console.log(data);
      },
      error: function(errorMessage) {
        alert("Error");
      }
    });//end ajax call
  }); //end click function
@lukenetti3 FCC doesn't teach you a lot. It just pushes you to learn.
Luke
@lukenetti3
Jun 16 2016 00:29
@jdtdesigns So there is no other way to do the quote machine other than how you approached it? And thanks again for all the help. I really appreciate it.
CamperBot
@camperbot
Jun 16 2016 00:29
lukenetti3 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 16 2016 00:31
@lukenetti3 there is literally hundreds of ways to approach logic in programming
Luke
@lukenetti3
Jun 16 2016 00:32
@jdtdesigns Is there anyway to do the random quote machine with a forEach method then? If I maybe used a different api?
JD Tadlock
@jdtdesigns
Jun 16 2016 00:33
@lukenetti3 the forEach would be good for something where you are appending multiple items to the page
sense you are only putting one quote on the page at a time, forEach isn't going to be useful
Luke
@lukenetti3
Jun 16 2016 00:33
@jdtdesigns Okay, I see what your saying. Thanks
CamperBot
@camperbot
Jun 16 2016 00:33
lukenetti3 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave jdtdesigns points
Ken Haduch
@khaduch
Jun 16 2016 00:34

@Whiplash5057 - great - I'm taking a look at your Pomodoro clock. One thing that I noticed is that when there is a single zero in the seconds count, that it only displays a single zero. Actually, all single digits, like "0:9", "0:8", etc. And it just stops after the break time with 0:1 in the display. I'm not sure if having it reset and count is part of the user story - one thing that I think was in there, though, was some kind of sound to indicate the end of the time period? At least they mention the clock "going off", and the example clock does have some kind of sound that plays. I don't recall if it loops through the count cycle again?

Also, I can set the work time to a negative number, and the break time, too. So there might be a little more work to do on it - maybe you've already fixed some of them or got some feedback. I loaded the page a while ago (an hour or so) But good progress!!

Andrew Krupicka
@akrupicka
Jun 16 2016 00:36
Could someone who is not in the U.S.A take a peek at my weather app and let me know if you can see your location?
http://codepen.io/akrupicka/pen/OXNZwg
laurenamy
@laurenamy
Jun 16 2016 00:51
@jdtdesigns thank you!
CamperBot
@camperbot
Jun 16 2016 00:51
laurenamy sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 496 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Greg Duncan
@GregatGit
Jun 16 2016 01:17
@akrupicka It's working for me
Greg Duncan
@GregatGit
Jun 16 2016 01:22
@laurenamy I could see the right json in the console - this is will be helpful http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/
hurrunaga
@hurrunaga
Jun 16 2016 01:28
Hello folks! I am new on this chat room and want to cheer everyone for the great job you are doing! i have a problem with bootstrap grid
Ray Liu
@mania7539
Jun 16 2016 01:39
Hi campers, very exciting I've just finished my Wikipedia Viewer project , if you are available , let me know your opinion and suggestions about it , would like to hear all from you guys :) link here: http://codepen.io/mania7539/pen/YWqZxw
Usmaan Ali
@usyyy
Jun 16 2016 01:47
Hello, I'm about to start my portfolio, any tips? Also I see a lot of people using java script, but this hasn't been covered yet, and is next in the challenges list, is Java essential?
buiphuking
@buiphuking
Jun 16 2016 01:48
hi guys, anyone help me put button START at the center ,plz
http://codepen.io/buiphuking/pen/JKoEZG
Jose
@MageTank
Jun 16 2016 01:50
Hi so do we have to have a timeline for the Tribute page? What else could we do?
Usmaan Ali
@usyyy
Jun 16 2016 02:05
Thank you :) @GregatGit any other resources that will help?
CamperBot
@camperbot
Jun 16 2016 02:05
usyyy sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 591 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jun 16 2016 02:07
@mania7539 Best one I've seen so far - well done
Rada
@Radascript
Jun 16 2016 02:08
hey guys, when there is a line:
if (--timer < 0)
is it doing timer=timer-1 within the condition, or is it just evaluating whether timer-1<0?
Hey my thing was resolved in HelpJavaScript, don't worry about it!
Ray Liu
@mania7539
Jun 16 2016 02:12
@GregatGit thank you man, really glad you like it :)
CamperBot
@camperbot
Jun 16 2016 02:12
mania7539 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 592 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg D
@mosaic-greg
Jun 16 2016 02:14
@jdtdesigns thanks i was able to update it with document.getElementById("thisTextArea").value = '1'; and didn't need to use the full DOM address
CamperBot
@camperbot
Jun 16 2016 02:14
mosaic-greg sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 497 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Chris Cullen
@123xylem
Jun 16 2016 02:15
I have just completed Symmetric Differences... BUT I Had to CHEAT. And I dont understand some of f this code... Is there something that can help me understand it. my comments are my understanding of it.. How correct are they?
function sym(args) {

  var argz = Array.prototype.slice.call(arguments);

  // Return the symmetric difference of 2 arrays
  var getDiff = function(arr1, arr2) {

//Creates function that Returns items in arr1 != arr2
    function filterFunction(arr1, arr2) {
      return arr1.filter(function(item) {
        return arr2.indexOf(item) === -1;
      });
    }
//Now it uses that filterFunction on both arrays and joins them
return filterFunction(arr1,arr2).concat(filterFunction(arr2,arr1));
    };

//Here we actually START the function on argz. we reduce argz with getDiff function and an empty array.
 var symArray= argz.reduce(getDiff,[]);

  //So far it only works for 2 args so
  //here we filter the array returning the index of a num in array
 //if its the first instance of this. index=== num in arr means first instance of num in arr return that index value.
  var answer=symArray.filter(function(num,index,arr){
    return index===arr.indexOf(num);
  });

  return answer;

}

sym([1, 2, 3], [5, 2, 1, 4]);
buiphuking
@buiphuking
Jun 16 2016 02:42
anyone use atom editor ????????????/
Kevin Murphy
@kaym0
Jun 16 2016 02:44
Hey. I am trying to build a background onto my Tribute page like this one has https://codepen.io/FreeCodeCamp/full/NNvBQW/ (I am talking about the white-boreder that also incases the TEXT for the IMAGE as well as the overall background that doesn't actually cover the whole page, but some.)
I am having trouble because the backgrounds I am using seem to cover the entire page or push text away.
Sophia Brandt
@sophiabrandt
Jun 16 2016 03:09

@kaym0 this one uses bootstrap. I looked at it with the Chrome inspect tool:

.thumbnail {
    display: block;
    padding: 4px;
    margin-bottom: 20px;
    line-height: 1.42857143;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;

Are you using bootstrap for your site? If not, perhaps you can take a look at the bootstrap source code at https://github.com/twbs/bootstrap?

Paul Borawski
@iAmNawa
Jun 16 2016 03:09
@kaym0 You have to put things inside a div
Make a div inside and then make it width like 80% and also center it @kaym0
Kevin Murphy
@kaym0
Jun 16 2016 03:10
thank you.
I'm using Bootstrap as well. I can't seem to get it to work nicely though. It goes a lot higher on my page than I want it too.
I have the <DIV CLASS="thumbnail"> surrounding the Image and the Caption.
Are you saying I should make a DIV INSIDE the picture DIV?
This what I'm getting right now
I'm trying to get JUST the caption+image inside of the WHITE background
gamma112
@gamma112
Jun 16 2016 03:23
Just put div before whatever you want to be included in that background and close it. Like if you want everything it will be div class="grey-background" and close it at the end of your code. Amd dont forget to give grey color to grey-backgrpund in your <stule>
Style*
Kevin Murphy
@kaym0
Jun 16 2016 03:23
I'll post my code. I have it in a div.

<div class="container-fluid backgroundgray">
<div class="col-xs-12">
<h1 class="text-center">The Man Who Changed Buddhism</h1>

<h2 class="text-center">Lord Buddha</h2>
</div>

<div>
<div class="thumbnail">
<img class="box center" src="http://indiafacts.org/wp-content/uploads/2015/10/buddha.jpg"></img>
<div class="text-center">Buddha Pictured
</div>
</div>
</div>

<div class="col-xs-6 text-center timeline">
<br>
<br>
<br> Here is a time line of Buddhas Life.
<br>
<br>
</div>
</div>
</div>

@import url(http://fonts.googleapis.com/css?family=PT+Sans);
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow);
@import url(http://fonts.googleapis.com/css?family=PT+Serif);

h1 {
color:#000;
font-size: 46px;
font-family: 'PT Sans Narrow';
}

h2 {
color:#000;
font-size: 36px;
}
.thumbnail {
display: block;
padding: 4px;
margin-bottom: 20px;
line-height: 1.42857143;
background-color: #fff;
border: 1px solid #ddd;
border-radius: 4px;
background-size: 10% 10%;
}
.backgroundgray {
background-color: gray;
background-radius: 50%;
}

timeline {

font-family: 'PT Serif';
font-size: 12px;
color: #000;
}

On my page, the white background for the image goes to the very top the page despite the <div> element being started just before the image. So I am not sure why it's doing that, and that's the question. Everything is seemingly working fine but I cannot figure out how to reduce the size of the background box
gamma112
@gamma112
Jun 16 2016 03:36
pay attention to your </div>
Kevin Murphy
@kaym0
Jun 16 2016 03:38
Yeah, you've said that twice now. I checked the <div> and where they open and close and they're all done correclty
I'm pretty sure it has something to do with the CSS
gamma112
@gamma112
Jun 16 2016 03:38
No, they are not
JD Tadlock
@jdtdesigns
Jun 16 2016 03:41
@kaym0 and whoever else. Here's an example of that page using bootstrap. You can use this as a guide. http://jsbin.com/ziqixa/edit?html,css,output
Kevin Murphy
@kaym0
Jun 16 2016 03:46
Thanks @jdtdesigns
CamperBot
@camperbot
Jun 16 2016 03:46
kaym0 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 498 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 16 2016 03:47
welcome ;)
Tom
@Bandaloop428
Jun 16 2016 03:56
I've completed the Build a Tribute Page challenge, but when I click on the button saying I've completed, the pop-up comes up and says submit and go to next challenge. However, when I click that it just brings me right back to the same challenge. Any ideas?
Kevin Murphy
@kaym0
Jun 16 2016 03:57
Hey, also considering you import Bootstrap using CodePen.io's editor, do you need to add it into the HTML as well? I haven't been adding it in because of that.
Paolo
@mav1283
Jun 16 2016 04:11
Guys for the local weather app, do you need to signup on open weather for your api key?
JD Tadlock
@jdtdesigns
Jun 16 2016 04:23
@mav1283 yes
Sorin Ruse
@sorinr
Jun 16 2016 04:29
@Bandaloop428 copy paste your codepen link in there
Paolo
@mav1283
Jun 16 2016 05:16
i recently have my api key from open weather, i tested it here https://openweathermap.org/current#geo by changing the appid value but i get the "Invalid API key" error, anyone encountered this for the first time?
Coy Sanders
@coymeetsworld
Jun 16 2016 05:26
it works for me when i put my appid in
did you fully register through your email and all @mav1283 ?
perhaps make sure you have the correct appid
you didn't cut it too prematurely or anything I mean
Paolo
@mav1283
Jun 16 2016 05:32
it worked when i used the cityname instead of the city id url
thanks
Ethan Rose
@ethanrose
Jun 16 2016 05:43
When I'm planning to use many variables from a JSON object from an api, is it best practice to assign each item it's own variable outside the object?
i.e. tempMax = json["main"]["temp_max"];
or is it best just to use the json object to change the text in the page? and skip assigning a variable? It seems to work either way, I'
I'm just wondering what is the best practice?
is it a waste of time to make more variables?
Ethan Rose
@ethanrose
Jun 16 2016 06:19
This message was deleted
shariquemaaz
@shariquemaaz
Jun 16 2016 06:21

Hey guys ., For Open weather app, am not able to use geolocatioon to fetch user's location as it is restricted in unsecure origins in chrome. i need to add 'https' in the address bar to make it work. if i do so, openweather api doesn't work due to mismatch in the protocols..

please suggest me an alternate way to get user location, maybe another api which fetches the location details of user..

Coy Sanders
@coymeetsworld
Jun 16 2016 06:22
try http://ip-api.com/json @shariquemaaz
shariquemaaz
@shariquemaaz
Jun 16 2016 06:25
thanks @coymeetsworld does this mean geolocation API is not used these days?? it seemed to be a good one
CamperBot
@camperbot
Jun 16 2016 06:25
shariquemaaz sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1159 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jun 16 2016 06:26
its used but only in secure connections
shariquemaaz
@shariquemaaz
Jun 16 2016 06:26
ohh ki
Coy Sanders
@coymeetsworld
Jun 16 2016 06:26
but since openweathermap's free account only gives you a non-secure API call they won't work together
they do provide a secure API call but it costs money, you don't need to do that though
if you want information on why this changed
shariquemaaz
@shariquemaaz
Jun 16 2016 06:28
:+1: @coymeetsworld
buiphuking
@buiphuking
Jun 16 2016 06:37
help me guys
http://codepen.io/buiphuking/pen/JKoEZG
why the second time go wrong
CamperBot
@camperbot
Jun 16 2016 06:37
no wiki entry for: me guyshttpcodepeniobuiphukingpenjkoezgwhy the second time go wrong
Greg Duncan
@GregatGit
Jun 16 2016 06:47
@buiphuking the logic gets pretty hard to follow on most tictactoe. What line do you think is giving you grief?
@buiphuking I think you need to pull apart your play function so its easier to follow. So a function for computerMoves and one for playerMoves
Dustin McCaffree
@AdPie
Jun 16 2016 06:54
@buiphuking I think if you declare your "count" variable outside of the function (right now you have var count = 0; at line 101) instead of within, it will stop adding CPU player moves each time you replay the game. :)
declare that variable above line 94 instead?
RakeshNerkar
@Rakesh18754
Jun 16 2016 07:21

in my node server i have this

app.use(express.static(__dirname + "/public"));

so thus the public folder require ONLY a file with name index.html file
because if i change the file name it throws an error cannot GET.

Sourabh
@sumitsrbh
Jun 16 2016 08:15
Help !!
I am not able to do the "unordered list" as said in the format
https://codepen.io/srbh101/pen/OXNjMR
CamperBot
@camperbot
Jun 16 2016 08:15
no wiki entry for: i am not able to do the unordered list as said in the format httpscodepeniosrbh101penoxnjmr
Sourabh
@sumitsrbh
Jun 16 2016 08:16
I mean the texts in the unordered list
Sourabh
@sumitsrbh
Jun 16 2016 08:24
Please help guys, as i unable to structure the text in the unordered list as par the asked format.
Sourabh
@sumitsrbh
Jun 16 2016 08:41
@alejandronanez please help.
where are the people ?
Clyde
@hea-hea
Jun 16 2016 08:44
@sumitsrbh hi
you want the quotes to appear under the list?
NatixDev
@NatixDev
Jun 16 2016 08:45
Hi guys, I'm working on the Weather API, I made a function which call the API and works fine but I'm trying now to make a function which allow user to change his location if the previous was wrong, my problem is that the getJSON seems to not refresh and modify the new value in the API link, I wanna know if there is a trick to refresh it or if I'm doing something wrong : https://codepen.io/NatixDev/pen/beVdPp?editors=1010
Clyde
@hea-hea
Jun 16 2016 08:45
you need to put </div>before your <blockquote> and then open another <div class="row"> and
then put <blockquote> and the rest inside that new row
@sumitsrbh I mean :)
Sourabh
@sumitsrbh
Jun 16 2016 08:46
actually there is an ordered list of dates but structured in a particular format. that thing i an unable to do
Clyde
@hea-hea
Jun 16 2016 08:47
@sumitsrbh how do you want it to look like, do you have an example somewhere?
Clyde
@hea-hea
Jun 16 2016 08:48
@sumitsrbh actually I don't know what you mean :( the list looks the same, only the quote and the rest of text is in the right column, instead of below - is that what you mean?
Sourabh
@sumitsrbh
Jun 16 2016 08:49
no no the listed dates are slightly towards right.
@hea-hea when u open in the full page view u will see the diffrence
Clyde
@hea-hea
Jun 16 2016 08:53
@sumitsrbh sorry in full page I don't see the difference as well. what browser are you using?
Sourabh
@sumitsrbh
Jun 16 2016 08:53
firefox.
@hea-hea come man there is a difference
Clyde
@hea-hea
Jun 16 2016 08:54
@sumitsrbh I give up :D
Sourabh
@sumitsrbh
Jun 16 2016 08:54
:worried:
NatixDev
@NatixDev
Jun 16 2016 08:55
No one has a solution ?
Sourabh
@sumitsrbh
Jun 16 2016 08:56
got to peek in the origin code !! :sailboat: mile:
Kashif Mohammed
@Spyreo
Jun 16 2016 08:56
Hey, can anyone help me with JavaScript?
Sourabh
@sumitsrbh
Jun 16 2016 09:00
class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2
this is the difference but i am not sure how this works
@hea-hea @NatixDev any idea
```
class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2
RakeshNerkar
@Rakesh18754
Jun 16 2016 09:07
can i have multiple multiple module in angular js
NatixDev
@NatixDev
Jun 16 2016 09:10
@sumitsrbh xs is for extra small device (phone), sm small device etc...
@sumitsrbh xs-12 means it will take all the width of the device
sm-10 means it will take only 10 columns of 12
Sourabh
@sumitsrbh
Jun 16 2016 09:13
@NatixDev well, when they are grouped how they work to allign text in a particular format
NatixDev
@NatixDev
Jun 16 2016 09:13
the offest-1 means it will take 1 column with nothing in it, your content will be centered
Now, to explain it, all of this is for responsive
Sourabh
@sumitsrbh
Jun 16 2016 09:14
k, what about offset 2
NatixDev
@NatixDev
Jun 16 2016 09:15
Offset will let 2 column with nothing in it
Sourabh
@sumitsrbh
Jun 16 2016 09:15
so in all these the content will be entered
i mean centered
NatixDev
@NatixDev
Jun 16 2016 09:15
So, to have your content centered
you will to have a xs-8 or sm-8 or md-8 etc...
If you want to have 2 content align, you will write <div id="content1" class="md-6"></div> <div id="content2" class="md-6"></div>
That means, one content will take 6 columns of 12, and the other content will take the 6 rest
You don't need to have md for it, it's only an example
xs sm md lg are only for adapt you content over situation
Sourabh
@sumitsrbh
Jun 16 2016 09:20
thanks a ton @NatixDev
CamperBot
@camperbot
Jun 16 2016 09:20
sumitsrbh sends brownie points to @natixdev :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @natixdev |http://www.freecodecamp.com/natixdev
NatixDev
@NatixDev
Jun 16 2016 09:20
If you want your content appear one above the other on smartphone, you will write xs-12 for the 2 content
Sorin Ruse
@sorinr
Jun 16 2016 09:21
@sumitsrbh as @NatixDev already explained u should understand how grids are working. be it bootstrap or any anther css franework
NatixDev
@NatixDev
Jun 16 2016 09:21
But if you want your content appear align on computer screen, you'll write sm or md-6 for the 2 content
After it's only calculations, if you have 3 content and want it to be align, you'll write sm-4 or md-4 or lg-4 for the 3 content
Sorin Ruse
@sorinr
Jun 16 2016 09:24
@NatixDev just learn what sm md .... means. take a look at the source of the css framework ur using to understand what it does
Sourabh
@sumitsrbh
Jun 16 2016 09:24
@NatixDev so when to use offset
NatixDev
@NatixDev
Jun 16 2016 09:25
One more time, xs sm md lg only depend of what you want to display on which type of device/screen
You'll use offset If need to let column blank
if you*
If you want to play with space, like displaying a content with a blank space before
or for centering all of it
It's a simple grid with 2 columns, if you write offset-3, it will just let 3 columns with nothing in it, and your content will start at the 4th column
with 12 columns*
NatixDev
@NatixDev
Jun 16 2016 09:31
This is why if your first content is a md-8 for example and your second is a md-6 for example, it will not display inline/align because there is only 12 columns
Sourabh
@sumitsrbh
Jun 16 2016 09:32
yes
NatixDev
@NatixDev
Jun 16 2016 09:33
hmm there is or there are ? My English is not very good, I hope I have explained it right
:smile:
Sourabh
@sumitsrbh
Jun 16 2016 09:34
yes. thanks again @NatixDev
CamperBot
@camperbot
Jun 16 2016 09:34
sumitsrbh sends brownie points to @natixdev :sparkles: :thumbsup: :sparkles:
:warning: sumitsrbh already gave natixdev points
NatixDev
@NatixDev
Jun 16 2016 09:34
@sumitsrbh No problem, good luck dude !
Now I'll try to understand why my API isn't refreshing with my new value lol
Sourabh
@sumitsrbh
Jun 16 2016 09:35
good luck man
:smile:
NatixDev
@NatixDev
Jun 16 2016 09:35
I'll need it ahah
Oh wait in addition, if you want to know more about grid and columns just go on the bootsrap website, you will find when xs/sm/md/lg start, for which number of pixels etc...
Nikhil Goyal
@ngoyal100894
Jun 16 2016 10:00

Hi I was doing challenge Name LookUp profile I dont know whats the problem with my code it says it cannot read property 'firstName' of undefined.

function lookUpProfile(firstName, prop){
// Only change code below this line
for(var i=0; i<contacts.length ; i++){
  if(firstName == contacts[i].firstName && contacts[i].hasOwnProperty(prop)){
    return contacts[i][prop];
    }
}

  if(firstName!== contacts[i].firstName){
    return "No such contact";
    }


   if(!contacts[i].hasOwnProperty(prop)  ){
     return "No such property" ;
   }

The code runs well and good for first 3 but for "bob" and "akira" its giving errors

jennerousity
@jennerousity
Jun 16 2016 10:03
Hello, so I am at build my tribute page (which I have done) and now build my portfoilio, am I going ot have ot go Pro for this to work? I actually put my assets in an outside link and it didn;t work in code pen.
John Ho
@ragbone
Jun 16 2016 10:03
Hi I was doing change the font size of an element challenge and I can't figure out whats wrong

<style>

p elements
{font-size : px;}
}
</style>

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

any one knows what is keeping me from passing it?
buiphuking
@buiphuking
Jun 16 2016 10:09
@GregatGit @AdPie
thanks!, let me try
CamperBot
@camperbot
Jun 16 2016 10:09
buiphuking sends brownie points to @gregatgit and @adpie :sparkles: :thumbsup: :sparkles:
:cookie: 148 | @adpie |http://www.freecodecamp.com/adpie
:cookie: 593 | @gregatgit |http://www.freecodecamp.com/gregatgit
John Ho
@ragbone
Jun 16 2016 10:22

```html <<style>

p elements 

{font-size : px;}
}
</style>

<p >Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>

<p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p> >, ```

ah why can't I format this here with multi line code:((
Ken Haduch
@khaduch
Jun 16 2016 10:23

@ragbone - unless your code formatting (or lack of it) is causing something not to be displayed correctly, I do not see where you are following the instructions:

Inside the same <style> tag that contains your red-text class, create an entry for p elements and set the font-size to 16 pixels (16px).

I see nothing in the code you posted with the text "16px"

help format
CamperBot
@camperbot
Jun 16 2016 10:23

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick() at _start_ and _end_ around thecode`.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

Ken Haduch
@khaduch
Jun 16 2016 10:24
@ragbone - make sure you put the three backticks on a line alone, and put the text on the lines between them.
Ken Haduch
@khaduch
Jun 16 2016 10:29
@ragbone - I have to leave the computer for a minute or two. One of the things that I see in your posted code is that you have the words p elements. That is not correct, the syntax should be:
<style>
    p {
            /* your CSS property here */
    }
</style>
Ken Haduch
@khaduch
Jun 16 2016 10:40
in other words, the HTML elements are just the word for the element alone, for example, h1, div, p, etc. Classes use a . followed by the class name, and ID values use a # followed by the ID name.
iigmir
@iigmir
Jun 16 2016 11:10
Hi there, I want to let my child menu toggle by clicking <i> element in parent menu, but seems no work. Here's my code:
https://jsfiddle.net/iigmir/6zj2qv4j/2/
Any other works I need or idea?
Fikri55
@Fikri55
Jun 16 2016 11:24
hello...
can I ask something?
lilyliterate
@lilyliterate
Jun 16 2016 11:24
Always!
Ankit Panwar
@coderNoob
Jun 16 2016 11:24
@Fikri55 of course you can
Fikri55
@Fikri55
Jun 16 2016 11:25
I'm at building tribute page. I wonder if the one portrayed there can be anyone, or must be Dr. Norman Borlaug
lilyliterate
@lilyliterate
Jun 16 2016 11:26
It can be anyone you like, just focus on the structure and design of the page.
Fikri55
@Fikri55
Jun 16 2016 11:26
I see. Thanks @lilyliterate, and others too... ^^
CamperBot
@camperbot
Jun 16 2016 11:26
fikri55 sends brownie points to @liliyliterate :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for liliyliterate
lilyliterate
@lilyliterate
Jun 16 2016 11:27
I would argue that you are better off just using the Dr. Borlaug content, so that you focus on the structure rather than content, but nothing is stopping you from using whoever you want.
Henrique Salguero
@kikosalguero
Jun 16 2016 11:29
Hi there! Anyone can explain me what are the ::after and ::before elements in a HTML document? Here is an example: http://getbootstrap.com/examples/starter-template/
Ankit Panwar
@coderNoob
Jun 16 2016 11:33
@kikosalguero It's used to insert some content before and after the css selector. Pseudo elements in CSS
Henrique Salguero
@kikosalguero
Jun 16 2016 11:37
@coderNoob I understand the use in a CSS document, but not in de body of a HTML file. In that example that i gave, what is the meaning?
Ankit Panwar
@coderNoob
Jun 16 2016 11:39
@kikosalguero I'm not sure if I get what you are asking. I've never seen the pseudo elements being used in an HTML page. The example link simply shows a page with some content nothing more.
Henrique Salguero
@kikosalguero
Jun 16 2016 11:39
@coderNoob can you inspect the code?
@coderNoob i will paste it here
lilyliterate
@lilyliterate
Jun 16 2016 11:41
There are no ::s present in the page source HTML.
@kikosalguero the Styles tab of your developer console is an interpretation of css. If you just want the HTML instead go with 'view page source'.
View Page Source will provide the raw html.
Ankit Panwar
@coderNoob
Jun 16 2016 11:43
@kikosalguero Exactly what @lilyliterate said.
Henrique Salguero
@kikosalguero
Jun 16 2016 11:44
Ahh, ok, now i got it... Thanks @coderNoob and @lilyliterate
CamperBot
@camperbot
Jun 16 2016 11:44
kikosalguero sends brownie points to @codernoob and @lilyliterate :sparkles: :thumbsup: :sparkles:
:cookie: 387 | @codernoob |http://www.freecodecamp.com/codernoob
:cookie: 258 | @lilyliterate |http://www.freecodecamp.com/lilyliterate
Thabani Manzini
@ThabaniM
Jun 16 2016 11:47
hello everyone i need help with implementing sound in my simon game. first problem is i keep getting some Uncaught (in promise) DOMException: The element has no supported sources. error
Ankit Panwar
@coderNoob
Jun 16 2016 11:47
@ThabaniM post a link to your codepen
second problem is there is no sound on codepen
there is sound when i test externally
the sound that is giving the promise error is the one called wrong answer
Ankit Panwar
@coderNoob
Jun 16 2016 11:54
@ThabaniM Need a link to your code. This one leads to the debug page.
@coderNoob the first four sounds i.e the ones given to us work on internet explorer so i don't know what's chromes problem is
Ankit Panwar
@coderNoob
Jun 16 2016 12:04
@ThabaniM It would take a lot of time to go through all of your code. Here is how I did it.
Play a sound when a button is lit up. You can create a function to play a sound that takes as parameter the tile number or id/class which was pressed and call that function inside the animate function.

@ThabaniM This is all the code that I needed to make it run

function playSound(tileNumber){ //Play sound according to the tile pressed or animated 
  var audio = $('<audio autoplay></audio>');
  if(tileNumber === 1)
    audio.append('<source src="https://s3.amazonaws.com/freecodecamp/simonSound1.mp3" type="audio/mp3"/>');
  if(tileNumber === 2)
    audio.append('<source src="https://s3.amazonaws.com/freecodecamp/simonSound2.mp3" type="audio/mp3"/>');
  if(tileNumber === 3)
    audio.append('<source src="https://s3.amazonaws.com/freecodecamp/simonSound3.mp3" type="audio/mp3"/>');
  if(tileNumber === 4)
    audio.append('<source src="https://s3.amazonaws.com/freecodecamp/simonSound4.mp3" type="audio/mp3"/>');  
  $('[data-action=sound]').html(audio);
}

And I called this function inside my animate function

function lightUp(tile) { //Light up the tiles
  playSound(tile);
  //some code to animate the buttons
};

Also add

<div class="sound"></div>

in your HTML and you're done.

Thabani Manzini
@ThabaniM
Jun 16 2016 12:08
@coderNoob i think a working link to a sound that plays when the answer is wrong is all thats needed i must have got that one wrong the other sounds play provided its not my codepen link on chrome being used
@coderNoob any idea why chrome could be having issues?
Ankit Panwar
@coderNoob
Jun 16 2016 12:10
@ThabaniM I noticed that the user is able to click while the AI is making it's move. That could be a problem.
NatixDev
@NatixDev
Jun 16 2016 12:10
Guys, I'm working on the Weather API, I made a function which call the API and works fine but I'm trying now to make a function which allow user to change his location if the previous was wrong, my problem is that the getJSON seems to not refresh and modify the new value in the API link, I wanna know if there is a trick to refresh it or if I'm doing something wrong : https://codepen.io/NatixDev/pen/beVdPp?editors=1010
Thabani Manzini
@ThabaniM
Jun 16 2016 12:12
@coderNoob yes i was planning to do that at the end but you right it is a problem
Holic
@Holic101
Jun 16 2016 12:14
Hey everybody I have a bug in my Pomodoro Clock. The countdown only counts one second and then stops. Could you please help. http://codepen.io/Holic101/pen/mEPazO The code for the countdown function is at the bottom
Matt
@Pixelbark
Jun 16 2016 12:32

Hi, looking for a bit of very basic CSS help. In the pen below, how would I make the top/left/right sides of my searchPanel fit snugly in its container div, only showing whitespace below it.

http://codepen.io/Pixelbark/full/EyyPKe

kirbyedy
@kirbyedy
Jun 16 2016 12:33
@NatixDev I noticed that you first call goes over https to api and the second one over http that might be a problem
Greg Duncan
@GregatGit
Jun 16 2016 12:42
@Holic101 what line does it count down?
Holic
@Holic101
Jun 16 2016 12:43
@GregatGit line 86
Greg Duncan
@GregatGit
Jun 16 2016 12:46
@Holic101 I find what you have done quite complicated to follow
i don't think you should be using recursion here
In fact I think that is your problem
Holic
@Holic101
Jun 16 2016 12:50
@GregatGit what would you do differently?
Greg Duncan
@GregatGit
Jun 16 2016 12:50
I think you need to simplify it down a bit
I used setInterval.
setInterval can be a variable and can be passed around
But the way you have done your math is hared to follow
Manuel Micu
@manu-4216
Jun 16 2016 12:52
@Holic101 You should have done time -1000
Greg Duncan
@GregatGit
Jun 16 2016 12:53
Once setInterval starts it keeps repeating until you stop it - so you don't need a loop
Manuel Micu
@manu-4216
Jun 16 2016 12:53
@Holic101 and also you might have to set the time var as global, to pass it on. And first you need to initialize it before calling the recursive function. Right now, your time is reset each time at the begining of coundown...
These things you can see in the debugger; put "debugger; " on the line that you want to start debugging from
Greg Duncan
@GregatGit
Jun 16 2016 12:55
NatixDev
@NatixDev
Jun 16 2016 12:56
@kirbyedy It will not resolve this problem, but probably a futur problem, well done !
Holic
@Holic101
Jun 16 2016 12:56
@GregatGit thx for going through my code, i'll have a look
CamperBot
@camperbot
Jun 16 2016 12:56
holic101 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 594 | @gregatgit |http://www.freecodecamp.com/gregatgit
NatixDev
@NatixDev
Jun 16 2016 12:56
@kirbyedy Ty
CamperBot
@camperbot
Jun 16 2016 12:56
natixdev sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1127 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jun 16 2016 12:56
@NatixDev I think you will have to call api twice
Holic
@Holic101
Jun 16 2016 12:56
@manu-4216 thank you for the hints
CamperBot
@camperbot
Jun 16 2016 12:56
holic101 sends brownie points to @manu-4216 :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @manu-4216 |http://www.freecodecamp.com/manu-4216
NatixDev
@NatixDev
Jun 16 2016 12:57
@kirbyedy Already tried but there was a problem with refreshing the content
Greg Duncan
@GregatGit
Jun 16 2016 12:57
with the math - if you have a variable minutes and one seconds and simply seconds-- and then when it reaches 0 seconds = 59 and minutes--
kirbyedy
@kirbyedy
Jun 16 2016 13:04
@NatixDev hmmm returning undefined... that test() function
Holic
@Holic101
Jun 16 2016 13:05
@GregatGit it works now!! thx again! you made my day :D
CamperBot
@camperbot
Jun 16 2016 13:05
holic101 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: holic101 already gave gregatgit points
Greg Duncan
@GregatGit
Jun 16 2016 13:07
@Holic101 cool!
NatixDev
@NatixDev
Jun 16 2016 13:12
@kirbyedy Yes... getJSON to not refresh with the new value
@kirbyedy seems to*
@kirbyedy But if we make an alert inside the test() but outside of the .getJSON, it works, I don't know how to refresh getJSON
crisayala16
@crisayala16
Jun 16 2016 13:15
anyone know how to make bullet points centered using bootstrap?
kirbyedy
@kirbyedy
Jun 16 2016 13:25
@NatixDev ok I think i got it
NatixDev
@NatixDev
Jun 16 2016 13:26
@kirbyedy You found a solution ?
kirbyedy
@kirbyedy
Jun 16 2016 13:26
yep
Screen Shot 2016-06-16 at 16.26.42.png
 $('.get').click(function() {
        console.log("click");
        var val = $('input').val();
        var api = 'https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=' + val + '&appid=9db1464acb5397dd3c1340f59afc0880&units=metric';     
        console.log(val);
        console.log(api);
        $.getJSON(api, function(data) {
          var winSpeed = data.wind.speed;
          var city = data.name;
          var weather = data.weather[0].description;
          var weatherIcon = data.weather[0].icon;
          var temp = data.main.temp;
          console.log(city);
          console.log(temp);
        });

      });
Arun Shah
@ameeno
Jun 16 2016 13:44
Hello all
Anyone free to help with tribute page?
NatixDev
@NatixDev
Jun 16 2016 13:45
@kirbyedy Wtf, console.log made the trick ?
kirbyedy
@kirbyedy
Jun 16 2016 13:45
no, actually your api was wrong
NatixDev
@NatixDev
Jun 16 2016 13:45
@kirbyedy I can confirm it works, I don't know how, but it works lol, thank you dude !
CamperBot
@camperbot
Jun 16 2016 13:45
natixdev sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:warning: natixdev already gave kirbyedy points
NatixDev
@NatixDev
Jun 16 2016 13:46
@kirbyedy What was wrong ?
kirbyedy
@kirbyedy
Jun 16 2016 13:46
@NatixDev you had find instead of weather and some xml format there...
your line:
http://api.openweathermap.org/data/2.5/find?q=' + val + '&type=like&mode=xml&appid=9db1464acb5397dd3c1340f59afc0880
corrected line: 
http://api.openweathermap.org/data/2.5/weather?q=' + val + '&appid=9db1464acb5397dd3c1340f59afc0880&units=metric
the shitty part is... my weather app now does not work :D
NatixDev
@NatixDev
Jun 16 2016 13:48
@kirbyedy I didn't expected that lol, I was persuaded that was my code, but it was simply the find in my api...
kirbyedy
@kirbyedy
Jun 16 2016 13:48
they are blocking all kind of insecure connections
Arun Shah
@ameeno
Jun 16 2016 13:48
Can anyone help me?
kirbyedy
@kirbyedy
Jun 16 2016 13:48
everything has to go over https
NatixDev
@NatixDev
Jun 16 2016 13:49
@kirbyedy Yes this is why I use a CORS Proxy
Anna
@LadyAnna
Jun 16 2016 13:52
Hello! Is there somebody familiar with Paper.js framework?
NatixDev
@NatixDev
Jun 16 2016 13:53
@kirbyedy Crossorigin.me does the trick
akhil
@akhil451
Jun 16 2016 14:19
hey ..I am doing the rndom qoute gen zipline and i cannot get the qoutetext and author in the text box. someone please help me out..
I do not why iam not getting the qoutes from the api . someone please help.
Zachary Hyder
@zacharyhyder
Jun 16 2016 14:24

Hey guys I cannot figure out why my navbar collapse button will not work. Currently, I have it to where it will collapse into a hamburger icon but when I click on the icon nothing opens up. I feel like my code is correct. Any light you can shed on this would be great!

<code><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">

  <a class="navbar-brand" href="#home">Uptown Brass Quintet</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#upcoming-events">Upcoming Events</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div>
</div>
</nav>

<code><nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">

  <a class="navbar-brand" href="#home">Uptown Brass Quintet</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#upcoming-events">Upcoming Events</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div>
</div>
</nav>
</code>

Manny
@Alloffices
Jun 16 2016 14:30
@zacharyhyder codepen it.
Manny
@Alloffices
Jun 16 2016 14:36
This message was deleted
@zacharyhyder Check settings - under javascript: You need to have jQuery load before bootstrap - bootstrap is dependant on jQuery: http://codepen.io/aystarz52/pen/mEELLV
@zacharyhyder Did it work now?
mcorby17
@mcorby17
Jun 16 2016 14:40
@akhil451 well first off, although I don't think it messes with your code, qoute is spelled "quote". Second, your $.getJSON function should take only 2 parameters, the url of the api you're using and a function as to what to do with the json from that api. Should look something like this: $.getJSON(url, function(json){});
@akhil451 inside that function you would take items from the JSON and append them to elements in your html using jQuery's .html() function
Zachary Hyder
@zacharyhyder
Jun 16 2016 14:45
@Alloffices Yes!
NatixDev
@NatixDev
Jun 16 2016 15:05
@kirbyedy It works, but now icons and background won't change lol
Marvourneen Dolor
@marvokdolor
Jun 16 2016 15:08
Any suggested resources for understanding how to use HTML, CSS and Bootstrap a little more? I thought I understood the FCC lessons but now I'm stuck on building a portfolio page. I'm not sure how to get it to actually look like a real website, v.s. a home-made amateurish thing.
sogotownpn
@sogotownpn
Jun 16 2016 15:12
'''<span class="social social-facebook"></span>'''
CamperBot
@camperbot
Jun 16 2016 15:12
:bulb: to format code use backticks! ``` more info
sogotownpn
@sogotownpn
Jun 16 2016 15:12
'''
CamperBot
@camperbot
Jun 16 2016 15:12
:bulb: to format code use backticks! ``` more info
Manny
@Alloffices
Jun 16 2016 15:13
@marvokdolor Id say get better at HTML and CSS.
sogotownpn
@sogotownpn
Jun 16 2016 15:13
'''
<span class="social social-facebook"></span>
'''
CamperBot
@camperbot
Jun 16 2016 15:13
:bulb: to format code use backticks! ``` more info
sogotownpn
@sogotownpn
Jun 16 2016 15:13
<span class="social social-facebook"></span>
why it don't work? who can help me, thx.
<button type="button" class="btn btn-primary"><span class="social social-facebook"></span></button>
Manny
@Alloffices
Jun 16 2016 15:15
This message was deleted
sogotownpn
@sogotownpn
Jun 16 2016 15:16
yes
Manny
@Alloffices
Jun 16 2016 15:16
This message was deleted
Shusil Banjade
@shusil123
Jun 16 2016 15:16
I think you have to use <i class="social social-facebook"></i> instead of span.
@sogotownpn
Manny
@Alloffices
Jun 16 2016 15:16
@shusil123 yea most likely
sogotownpn
@sogotownpn
Jun 16 2016 15:16
@shusil123 I'll try it.
Shusil Banjade
@shusil123
Jun 16 2016 15:17
What iconset are you using @sogotownpn ? ionicons / font awesome ??
sogotownpn
@sogotownpn
Jun 16 2016 15:18
http://glyphicons.com/ from this website.
Shusil Banjade
@shusil123
Jun 16 2016 15:18
@sogotownpn , do you have their cdn in your pen settings ??
sogotownpn
@sogotownpn
Jun 16 2016 15:19
no, how to add it? @shusil123
Marvourneen Dolor
@marvokdolor
Jun 16 2016 15:19
@Alloffices Any thoughts on how to go about getting better?
Shusil Banjade
@shusil123
Jun 16 2016 15:21
@sogotownpn , i think they have some css files which you have to import to your working environment to use the icons. Or if you are using bootstrap, you can simply use them, I guess.
Manny
@Alloffices
Jun 16 2016 15:22
@sogotownpn For future reference I've curated this free icon list: http://kamper.pw/devtools/curated-list-of-free-icons
Shusil Banjade
@shusil123
Jun 16 2016 15:23
This message was deleted
@sogotownpn , You have to purchase the icons for the use, I think. You can use ionicons/ FOnt awesome, for icons in your site. They are free and simple to use.
Manny
@Alloffices
Jun 16 2016 15:28
@marvokdolor Work on small projects - create buttons, navigations ect. Try coding up one of these web elements I've designed: http://goo.gl/9I3XFo pixel perfect. Just use HTML&CSS.
sogotownpn
@sogotownpn
Jun 16 2016 15:30
@shusil123 @Alloffices I use Bootstrap Glyphicons
<button type="button" class="btn btn-primary"><span class="glyphicon glyphicon-envelope"></span></button>
<span class="glyphicon glyphicon-envelope"></span>
It works! I think maybe other need pay.
Manny
@Alloffices
Jun 16 2016 15:33
@sogotownpn Cool!
Zachary Hyder
@zacharyhyder
Jun 16 2016 15:33

Ok so, i've managed to fixe my collapse bar but when i open the menu the menu items are shoved to the right rather than under the brand.

``<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#home">Uptown Brass Quintet</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navHeaderCollapse">

  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
</button>

<div class="collapse navbar-collapse" id="navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#upcoming-events">Upcoming Events</a></li>
<li><a href="#contact-us">Contact Us</a></li>
</ul>
</div>
</div>
</nav>``

Shusil Banjade
@shusil123
Jun 16 2016 15:33
@sogotownpn , yes, I guess so. The social icons are in pro pack only.
Zachary Hyder
@zacharyhyder
Jun 16 2016 15:33
ugh let me pin it hold on
sogotownpn
@sogotownpn
Jun 16 2016 15:35
ion-social-facebook how should i use ionicons/ FOnt? @shusil123
Manny
@Alloffices
Jun 16 2016 15:35
@zacharyhyder pin
you should use fontawesome @sogotownpn
@sogotownpn Add to <head> <link https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css> </head> then you can use any of these http://fontawesome.io/icons/
Shusil Banjade
@shusil123
Jun 16 2016 15:39

@sogotownpn , you can use their cdn to import the icons :

http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css

just link this in your html like any other external css.

and then you can use any icons like this <i class="ion ion-social-facebook"></i> .

<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"> or in codepen go to your css settings and paste the url . @sogotownpn
As the add new stylesheet
Manny
@Alloffices
Jun 16 2016 15:43
@sogotownpn Check settings for dependancies: http://codepen.io/aystarz52/pen/vKKrJm
@zacharyhyder did you get it working?
Shusil Banjade
@shusil123
Jun 16 2016 15:50
@sogotownpn , that's it. You've added the ionicons stylesheet. Now you can use them wrapped by <i></i> . for the name of the class to use / icons , visit their website.
@ajesamson , nice work. Responsive too. I like the simple design.
Perfectly functional
Sorin Ruse
@sorinr
Jun 16 2016 15:52
@ajesamson after you make some calculations like 8+2 = then when you hit CE button it change 10 to 1 instead of clearing all data and make it 0
NatixDev
@NatixDev
Jun 16 2016 15:54
Guys I have a question, I have a weather API, geolocation works fine and display icons, city etc..., I recently made an input to change manually the location, it call a new API link and modify all precedent request with the news value, it works fine too except for the icons and backgrounds because I set an addClass(), I don't know how to refresh this, .removeClass + .addClass don't work.
sogotownpn
@sogotownpn
Jun 16 2016 15:56
@shusil123 I do it as you said, but the icon still don't display.
Sorin Ruse
@sorinr
Jun 16 2016 15:57
@NatixDev what do you return here? return test(api); i mean the function calling this function is expecting a return variable?
Shusil Banjade
@shusil123
Jun 16 2016 16:00
@sogotownpn , use the icon inside container and give some color to it with large font size. You are doing everything right. It should work
sogotownpn
@sogotownpn
Jun 16 2016 16:04
@shusil123 @Alloffices thanks!
CamperBot
@camperbot
Jun 16 2016 16:04
sogotownpn sends brownie points to @shusil123 and @alloffices :sparkles: :thumbsup: :sparkles:
:cookie: 101 | @alloffices |http://www.freecodecamp.com/alloffices
:cookie: 462 | @shusil123 |http://www.freecodecamp.com/shusil123
Shusil Banjade
@shusil123
Jun 16 2016 16:06
@sogotownpn , Oh man, The ionicons won't work in codepen due to insecure origins - http hosted . You have to use font awesome icons. In similar manner , after adding the stylesheet in css, you can use them like <i class="fa fa-envelope"></i> . class names in their site.
Manny
@Alloffices
Jun 16 2016 16:07
@shusil123 @sogotownpn I've codepend it - check settings for dependancies: http://codepen.io/aystarz52/pen/vKKrJm
Sorin Ruse
@sorinr
Jun 16 2016 16:11
@Alloffices what do u want to achieve there? make your icon grow and change color when hovered?
Manny
@Alloffices
Jun 16 2016 16:12
@sorinr No that was just an example on how to upload fontawesome fonts
sogotownpn
@sogotownpn
Jun 16 2016 16:13
@Alloffices @shusil123 Ok! I will try it. Thanks for your patient.
CamperBot
@camperbot
Jun 16 2016 16:13
sogotownpn sends brownie points to @alloffices and @shusil123 :sparkles: :thumbsup: :sparkles:
:warning: sogotownpn already gave alloffices points
:warning: sogotownpn already gave shusil123 points
NatixDev
@NatixDev
Jun 16 2016 16:14
@sorinr I return my test(api) with the new api value which refresh all weather informations except icons and background because of addClass, I'm trying to find a trick to fix that
Sorin Ruse
@sorinr
Jun 16 2016 16:14
@Alloffices ok
@NatixDev why not instead of return test(api); just update the html with the new data? because you are returning data to no ware
NatixDev
@NatixDev
Jun 16 2016 16:27
@sorinr Rewrite with a second getJSON ?
@sorinr Or do you have something else to reuse a function, because the only way I know for the moment is the return, but I'm not sure to use it properly
Samuel Plumppu
@Greenheart
Jun 16 2016 16:32

Hey! Do anyone know why the arrow on the right side of this image slider starts spinning around when I repeatedly hover over it? It works when moving the cursor slowly but fails at higher speeds.

The arrow-image is rotated using CSS. Could this have something to do with the transitions not declaring a specific rotation?

Manny
@Alloffices
Jun 16 2016 16:36
@Greenheart Are you trying to make it rotate?
Samuel Plumppu
@Greenheart
Jun 16 2016 16:37
@Alloffices No, I'm trying to stop it :D
It's supposed to work like the left arrow
Manny
@Alloffices
Jun 16 2016 16:39
It's not spinning when I go on it. @Greenheart seems to be working over here. Try reloading the page again.
Samuel Plumppu
@Greenheart
Jun 16 2016 16:40
@Alloffices Try rapidly moving the cursor all the way over and then all the way back ^^
Manny
@Alloffices
Jun 16 2016 16:41
@Greenheart nothing
Samuel Plumppu
@Greenheart
Jun 16 2016 16:41
@Alloffices Do you have 10 minutes? :blush:
Manny
@Alloffices
Jun 16 2016 16:41
sure
Samuel Plumppu
@Greenheart
Jun 16 2016 16:43
@Alloffices Sent you a PM!
jdoichy
@jdoichy
Jun 16 2016 16:46
for the life of me i cannot figure out how to get my unordered list like the tribute page one
Marvourneen Dolor
@marvokdolor
Jun 16 2016 16:49
@Alloffices Thanks Manuel, will do!
CamperBot
@camperbot
Jun 16 2016 16:49
marvokdolor sends brownie points to @alloffices :sparkles: :thumbsup: :sparkles:
:cookie: 104 | @alloffices |http://www.freecodecamp.com/alloffices
lpcavenaghi
@lpcavenaghi
Jun 16 2016 17:01
Hello guys! I'm totally new to html and I'm trying to make my portfolio page.
I want to ask you guys for your feedback and also how could I make my social media buttons have the same space between them
Here's my codepen: https://codepen.io/lpcavenaghi/full/MeeVKa/
ALINATSUI
@ALINATSUI
Jun 16 2016 17:07
@jdoichy link to your codepen?
Jessica
@QueenCode
Jun 16 2016 17:15
Hello, I'm working on the weather challenge and right now I'm testing out the weather API, which doesn't seem to be working. I can't figure out why.
$(document).ready(function() {

    $.getJSON("https://api.openweathermap.org/data/2.5/weather?lat=35&lon=139&    APPID=f334770b2bd3a14b0e291f5aa4c7d10b", function(json) {
$(".message").html("Poop");

    });
});
JD Tadlock
@jdtdesigns
Jun 16 2016 17:16
@QueenCode why do you have all those spaces before the appid?
Jessica
@QueenCode
Jun 16 2016 17:17
i'm not sure.. i attempted to take them out just now and then ran the code again with the same results, so that's not the problem
JD Tadlock
@jdtdesigns
Jun 16 2016 17:17
@QueenCode you need to add &callback=? as a param
Jessica
@QueenCode
Jun 16 2016 17:17
what do you mean?
Samuel Plumppu
@Greenheart
Jun 16 2016 17:18
thanks a lot @Alloffices
CamperBot
@camperbot
Jun 16 2016 17:18
greenheart sends brownie points to @alloffices :sparkles: :thumbsup: :sparkles:
:cookie: 105 | @alloffices |http://www.freecodecamp.com/alloffices
JD Tadlock
@jdtdesigns
Jun 16 2016 17:20
@QueenCode post your codepen
andreas2249
@andreas2249
Jun 16 2016 17:23

Good morning, Campers. Given these html anchors and the following CSS, none of the CSS is working. Not even the hover. Stumped here. Here's CodePen, if needed: https://codepen.io/andreas2249/pen/oLLwxp

(For the menus to appear in CodePen, wait for quick animation to end... ) Thanks in advance. :)

  <header class="container-fluid col-xs-12">
    <div class="row">
      <a href="https://s.codepen.io/andreas2249/debug/oLLwxp" class="logo col-xs-8">Aegean Designworks</a>
      <a href="#" id="about" class="menu-nav col-xs-1 link">about<a/>
      <a href="#" id="port" class="menu-nav col-xs-1">portfolio<a/>
      <a href="#" id="contact" class="menu-nav col-xs-1">contact<a/> 
    </div>
  </header>


/*CSS*/
a:link {
  color: #87CEFA; /* sky blue */
}
a:visited {
  color: white;
}
a:hover {
  color: yellow;
}
a:active {
  color: white;
}
a {
  text-decoration: none;
}
JD Tadlock
@jdtdesigns
Jun 16 2016 17:25
@QueenCode
 $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=3&long=135&units=imperial&APPID=<your id>, function(json) {
    console.log(json);
  });
Jessica
@QueenCode
Jun 16 2016 17:26
@jdtdesigns what was wrong with it?
JD Tadlock
@jdtdesigns
Jun 16 2016 17:26
@QueenCode spelling or something in the url
i just replaced it with the standard url from the api and it worked
Jessica
@QueenCode
Jun 16 2016 17:27
and you actually used an id in place of "your id"?
JD Tadlock
@jdtdesigns
Jun 16 2016 17:27
lol yes
Jessica
@QueenCode
Jun 16 2016 17:28
lol interesting.. the main difference i'm seeing is the "units=imperial" part
maybe i needed to indicate that in order for it to work
JD Tadlock
@jdtdesigns
Jun 16 2016 17:29
@QueenCode that might be it
you need to declare what unit type you want returned
imperial is fahrenheit so it's easy to convert
Sorin Ruse
@sorinr
Jun 16 2016 17:30
@andreas2249 make them a :hover not a:hover
Jessica
@QueenCode
Jun 16 2016 17:31
right.. that makes a lot of sense.. i don't think i see that anywhere on the website though lol which is odd
JD Tadlock
@jdtdesigns
Jun 16 2016 17:32
@QueenCode i remember i had to do a little searching to find it
Jessica
@QueenCode
Jun 16 2016 17:32
thanks @jdtdesigns for the help though.. i've been struggling with this for hours
CamperBot
@camperbot
Jun 16 2016 17:32
queencode sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 499 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jun 16 2016 17:32
welcome ;)
Jessica
@QueenCode
Jun 16 2016 17:32
ohhh i see
andreas2249
@andreas2249
Jun 16 2016 17:34
Thank you @sorinr. You're saying to add a space? Tried that. Same result... Here's revised CodePen: https://codepen.io/andreas2249/pen/oLLwxp
CamperBot
@camperbot
Jun 16 2016 17:34
andreas2249 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 367 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jun 16 2016 17:38
@andreas2249 strange. I have your old pen modified as i told you already opened in a new tab and its working. the latest one its not :)
OceanMountains
@OceanMountains
Jun 16 2016 17:38

Looking for insight as to why my Twitch API project is not working correctly.

As you can see in the JS tab, I started out setting all channels to offline. Then I use an if/else chains to figure out if a channel is online, offline, or unavailable. Then I iterate through my channel array to display all the data of the channels.

My problem: right now the "unavailable" channels are displaying correctly but the "online" ones are not. They all show as "offline." I don't understand why the "online " channels show as "offline." When I click on them they go to Twitch and the channel is definitely online. Everything looks right in my logic and clearly the "unavailable" is working correctly. Can anyone see my error(s)?

http://codepen.io/OceanMountains/pen/MewxWO

matthew3454
@matthew3454
Jun 16 2016 17:39
Does anyone know how to relocate mentions after I already clicked on the button that locates them once already?
Sorin Ruse
@sorinr
Jun 16 2016 17:39
@andreas2249 take a look here: https://codepen.io/sorinr/pen/OXXwBK
andreas2249
@andreas2249
Jun 16 2016 17:42
@sorinr, the hover is now changing color of that bold text. It's supposed to change color of menu items (about, portfolio, contact). I don't get it. Had hover working fine last night. Someone here suggested using the line, visited, and active methods. Thought it was a great idea. Added them and this just fell apart...
Sorin Ruse
@sorinr
Jun 16 2016 17:42
@andreas2249 its working but because you have some timings you will see the hover, ecc efect only after the animation
andreas2249
@andreas2249
Jun 16 2016 17:43
@sorinr, that's intentional. No links are supposed to appear until AFTER the animation.
When they do appear, having a hard time figuring out why this very basic CSS isn't working.
@sorinr, if the animation is finished and the links are displayed, the animation shouldn't be an issue. (At least it wasn't until I made the changes, adding the link, visited, and active methods
I'm stumped. :)
Sorin Ruse
@sorinr
Jun 16 2016 17:45
@andreas2249 then try to make your css for a :hover, ecc !important to override the bootstrap default
Manny
@Alloffices
Jun 16 2016 17:47
@andreas2249 is this what you want: https://codepen.io/aystarz52/pen/yJJqwg
Vinay Jaju
@vinay-jaju
Jun 16 2016 17:47
@OceanMountains I think the problem is where you are making the arrays. I had a similar problem. The array becomes null once everything is added. I think this mught be your problem as well. adding html/angular(dont know angular) there itself when you fetch the data
Manny
@Alloffices
Jun 16 2016 17:47
@andreas2249 check css: header {z-index:1;top:0;}
Colin
@finkbeca
Jun 16 2016 17:49
Could anyone help me I'm trying to center my project names underneith some images and I can't get them to center
Sorin Ruse
@sorinr
Jun 16 2016 17:50
@andreas2249 I would avoid using !important but its just a quick fix. maybe u should add a new class to take over the bootstrap defaults
andreas2249
@andreas2249
Jun 16 2016 17:50
Thank you @Alloffices. Getting pretty close. Would like link to change to yellow on hover -- without underline.
CamperBot
@camperbot
Jun 16 2016 17:50
andreas2249 sends brownie points to @alloffices :sparkles: :thumbsup: :sparkles:
:cookie: 106 | @alloffices |http://www.freecodecamp.com/alloffices
andreas2249
@andreas2249
Jun 16 2016 17:51
@Alloffices, what does css: header {z-index:1;top:0;} mean / do ?
OceanMountains
@OceanMountains
Jun 16 2016 17:51
All right @vinay-jaju that could explain it since the offline test checks if the data stream is null. That looks like a good place to start.
andreas2249
@andreas2249
Jun 16 2016 17:52
@sorinr, I'm a total noobie with this. How do I "take over" the bootstrap defaults?
Manny
@Alloffices
Jun 16 2016 17:52
@andreas2249 Just updated
Bas ter Hedde
@Basterhedde
Jun 16 2016 17:53
Hello people. I got a question about the geolocation API. I read this afternoon that it wasn't working with the weather API anymore. Is there any way I can still get my location and use it with the weather API? Since navigator.geolocation isn't really working..
(regarding the 'build your own weather app')
flindip
@flindip
Jun 16 2016 17:57

I'm working with bootstrap again. Just trying to clarify in order to make a page responsive. I understand the grid system will cover the width of a div. But, can I use CSS for width/margins and keep it responsive?

Also, do I have to define a div in all platforms in order for it to be responsive:

For example: <div class="col-xs-6 col-sm-6 col-md-6 col-md-6 col-xl-6">

or can I just use span?

Sorin Ruse
@sorinr
Jun 16 2016 17:59
@andreas2249 when you load bootstrap.css in your header it automatically adds some behavior(read it css) to your html tags. then to give your elements your "flavor" you should modify bootstrap's defaults
andreas2249
@andreas2249
Jun 16 2016 17:59

Thank you @Alloffices. The update is much nicer. The 'about, portfolio, and contact' links start out as sky blue color. When I click any of them, they all go to white and stay white. I'd like hover to be yellow, clicked to be yellow (neither with underlines), and when I click a link to stay yellow -- without changing the color of the other links. If I hover over a different link, it does the same.

My gut tells me this is simple to do... Am I wrong? Or does doing this need complex css programming?

CamperBot
@camperbot
Jun 16 2016 17:59
andreas2249 sends brownie points to @alloffices :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave alloffices points
Sorin Ruse
@sorinr
Jun 16 2016 18:02
@flindip you should understand how ur framework grid is working first
flindip
@flindip
Jun 16 2016 18:02
@sorinr ok, but is <div class="col-xs-6 col-sm-6 col-md-6 col-md-6 col-xl-6"> acceptable code?
@sorinr thanks
CamperBot
@camperbot
Jun 16 2016 18:03
flindip sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @sorinr |http://www.freecodecamp.com/sorinr
andreas2249
@andreas2249
Jun 16 2016 18:03
@sorinr. I'll start tinkering with that. Thanks again for your time and consideration. :)
CamperBot
@camperbot
Jun 16 2016 18:03
:warning: andreas2249 already gave sorinr points
andreas2249 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Dylan
@dhcodes
Jun 16 2016 18:05
@jdtdesigns i need flexbox help
Sorin Ruse
@sorinr
Jun 16 2016 18:08
@flindip just <div class="col-xs-6"> it will be like you are writing div class="col-xs-6 col-sm-6 col-md-6 col-md-6 col-xl-6"> because sm, md, ecc takes the same column width of 6. but if you wanna make some div full width on mobile and half for desktop I would use <div class="col-sm-12 col-md-6"> as an example
flindip
@flindip
Jun 16 2016 18:10
@sorinr ok, so really I should be defining my pages at the smallest possible platform? Everything else adjusts?
@sorinr Its a very simple page. I don't have to get too complext
@sorinr I should define height and margins through CSS? I'm just worried about it screwing up responsiveness
Sorin Ruse
@sorinr
Jun 16 2016 18:12
@flindip only if you make your page mobile friendly. but i suggest u to think mobile first and afterwards adjust your code to desktop
Jonathan
@JonKaric
Jun 16 2016 18:12
@sorinr Not so sure about this for a beginner.
@sorinr Mobile first is a lot harder if you don't have the designs beforehand
flindip
@flindip
Jun 16 2016 18:14
@sorinr makes sense thanks
CamperBot
@camperbot
Jun 16 2016 18:14
flindip sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave sorinr points
Sorin Ruse
@sorinr
Jun 16 2016 18:14
@JonKaric we all here where begginers. don't be afraid. just learn as much as u can. trial and error is mother's name :)
flindip
@flindip
Jun 16 2016 18:15
@sorinr regarding height and margins though? That was what screwed me up last time when working with bootstrap. I gotta a very vague answer about how I don't have define certain things when use container fluid. It wasn't really made clear. Do I define height and margins with CSS or not?
Jonathan
@JonKaric
Jun 16 2016 18:17
@flindip Generally you dont need to define height when using bootstrap, unless you need to define somthing smaller than lets say 400px, (anything smaller than iphone 4)
flindip
@flindip
Jun 16 2016 18:18
@JonKaric so is it padding to make the div larger?
Manny
@Alloffices
Jun 16 2016 18:18
@andreas2249 I've updated: https://codepen.io/aystarz52/pen/vKKzLq
Jonathan
@JonKaric
Jun 16 2016 18:18
@flindip margin on the other hand is used all throughout mostly for spacing so don't be afraid to use it. and yeah padding adds into the box, rather than margin (which adds outside of the box)
flindip
@flindip
Jun 16 2016 18:19
@JonKaric ok, so if your trying to actually make a div larger with bootstrap your mainly using padding. To center it you use margins?
@JonKaric thanks
CamperBot
@camperbot
Jun 16 2016 18:20
:cookie: 81 | @jonkaric |http://www.freecodecamp.com/jonkaric
flindip sends brownie points to @jonkaric :sparkles: :thumbsup: :sparkles:
Dylan
@dhcodes
Jun 16 2016 18:20
@flindip to make it larger, you can modify height and width
@flindip padding is the space between the elements inside the box
so the space between two images within the div for ex.
is padding
flindip
@flindip
Jun 16 2016 18:20
@dhcodes yeah, but what I found was that when you start messing with the height it will make your page unresponsive.
Jonathan
@JonKaric
Jun 16 2016 18:21
@flindip Yeah, but try to avoid using setting definite px widths and heights. Just try to use them for small things like icons etc..
flindip
@flindip
Jun 16 2016 18:21
@dhcodes at lest thats what one of the campers told me here
Jonathan
@JonKaric
Jun 16 2016 18:22
@flindip Because if you set a solid height when viewing on desktop, when the viewport gets smaller your contents have to be squished into a smaller area, thus making the column longer
flindip
@flindip
Jun 16 2016 18:22
@JonKaric @dhcodes thanks. Will do. Is there a way I check to see if the page is responsive?
CamperBot
@camperbot
Jun 16 2016 18:22
flindip sends brownie points to @jonkaric and @dhcodes :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave jonkaric points
:star2: 1052 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jun 16 2016 18:22
@flindip well you just need to use flexible units then, like vw and vh
or %
vw = viewport width (the width of the display you're on) and vh = viewport height (the height of the display you're on). for ex. a full height div would be 100vh
or 100% if you like percents
it's all good
flindip
@flindip
Jun 16 2016 18:23
@dhcodes ahh I see I've never even worked with viewport. I don't believe that was ever taught in any of the tasks
andreas2249
@andreas2249
Jun 16 2016 18:23

Wow, thanks so much for that, @Alloffices. I can see one of my mistakes: I should have had text-decoration: none on all of those. I did have

a { text-decoration: none; }

... at the bottom of my list. I guess doing that didn't make it "global" and apply to the others, right?

CamperBot
@camperbot
Jun 16 2016 18:23
andreas2249 sends brownie points to @alloffices :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave alloffices points
Sorin Ruse
@sorinr
Jun 16 2016 18:24
@flindip you just have to define ether width or height to ur elements based on what you like them to look like on desk and mobile. for example i wanna div on desktop to have a margin-top of 5% but on mobile using @media i can set it to have only 2%. it is justb an example
flindip
@flindip
Jun 16 2016 18:25
@sorinr understood
Dylan
@dhcodes
Jun 16 2016 18:25
@flindip that's true, it wasn't
does anyone know flexbox well
i've hit a wall
flindip
@flindip
Jun 16 2016 18:27
Thanks guys, you have been a big help. I think a couple of approaches to work with for the project. Probably do the html today(I already did the JS component). Then I'll link it together tomorrow. Take it easy...
actually one brief last question: I have already used container fluid for the page. Do I have to use row-fluid as well? or is "row" sufficient?
Sorin Ruse
@sorinr
Jun 16 2016 18:30
@dhcodes here is a complete guide on flexbox concept if that helps: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Jonathan
@JonKaric
Jun 16 2016 18:30
@flindip row is enough. Rows will always span accross the whole parent container
JD Tadlock
@jdtdesigns
Jun 16 2016 18:30
@dhcodes what's the issue?
Sorin Ruse
@sorinr
Jun 16 2016 18:31
@dhcodes but i relay haven't experienced with it along with other css frameworks
andreas2249
@andreas2249
Jun 16 2016 18:31
@Alloffices, thank you for your time and consideration on that. I learned a lot. Thanks, too, for the z-index link. Have a great day. :)
CamperBot
@camperbot
Jun 16 2016 18:31
andreas2249 sends brownie points to @alloffices :sparkles: :thumbsup: :sparkles:
:warning: andreas2249 already gave alloffices points
Cindy Hsu
@Cinders-P
Jun 16 2016 18:31
anyone around? I'm trying to grab wiki images for my wiki viewer, but im not sure how to go through the json
e.g. https://en.wikipedia.org/w/api.php?action=query&titles=Al-Farabi&prop=pageimages&format=json&pithumbsize=100
i'd have to explicitly use the pageID to access the thumbnail, but that number changes for each page. is there a way to just select the first element or something?
Andy
@Zubenna
Jun 16 2016 18:31
Hello Everyone,
My weather app has stopped working. It could not retrieve information again. Any suggestion please?
Sorin Ruse
@sorinr
Jun 16 2016 18:32
@Zubenna maybe u have exceeded your free quota :)
Bas ter Hedde
@Basterhedde
Jun 16 2016 18:34
there were more people having this issue. I still can't figure out how to get the geolocation to work somehow. It says access denied, although I didn't deny it. :P
Andy
@Zubenna
Jun 16 2016 18:34
@sorinr , does that mean it will never work again?
Ricardo Enciso
@Ricka7x
Jun 16 2016 18:37
It still works in Firefox though
Sorin Ruse
@sorinr
Jun 16 2016 18:38
@Zubenna i don't know. try to change ur api id by obtaining a new one :)
Nerando Johnson
@Nerajno
Jun 16 2016 18:38
greetings one an all
Toni Shortsleeve
@KoniKodes
Jun 16 2016 18:39
@Ricka7x did you try the secure http?
Ricardo Enciso
@Ricka7x
Jun 16 2016 18:39
I did but it doesn't work
Toni Shortsleeve
@KoniKodes
Jun 16 2016 18:40
@Ricka7x Ouch.
Ricardo Enciso
@Ricka7x
Jun 16 2016 18:40
Apparently that feature is been deprecated from chrome
Nerando Johnson
@Nerajno
Jun 16 2016 18:40
i am trying to figure out how to make my navbar active to have the same property as the rest of the li s
here is the code
Bas ter Hedde
@Basterhedde
Jun 16 2016 18:41
Yeah, so I heard. There must be a way though to still use it maybe
one idea is to put https:// in front of codepen.io I see. then it seems to work :D
Tyler Moeller
@TylerMoeller
Jun 16 2016 18:44
@Cinders-P Object.keys is helpful here. With a JSON object called myObj, you could do the following:
var pageId = Object.keys(myObj.query.pages);
var thumbnailSrc = myObj.query.pages[pageId].thumbnail.source;
console.log(thumbnailSrc);
Luke
@lukenetti3
Jun 16 2016 18:44
I am working on the random quote machine. Can someone steer me in the right direction. I don't want your code, because I want to figure it out by myself. I just need some guidance. Here is my code
http://codepen.io/lukenetti3/pen/rLeXmZ?editors=0010
Sorin Ruse
@sorinr
Jun 16 2016 18:45
@Nerajno try add jquery and bootstrap.js to your project
Nerando Johnson
@Nerajno
Jun 16 2016 18:46
huh ?
@sorinr
explain please or send me a link
CamperBot
@camperbot
Jun 16 2016 18:46
no wiki entry for: please or send me a link
Tyler Moeller
@TylerMoeller
Jun 16 2016 18:47
@Zubenna Press F12 in your browser for a debug console. It looks like the issue is that you aren't enclosing the word True in quotes: counter = 'True';
Sorin Ruse
@sorinr
Jun 16 2016 18:48
@lukenetti3 I can understand u wanna make it on your own but how do we have to guess "your direction" in order to be able to help?
@Nerajno as you have added boostrap.css just add in the js part of your settings first jquery then boostrap.js :)
Luke
@lukenetti3
Jun 16 2016 18:51
@sorinr Sorry, I just mean I don't want to someone to just show me there code and me use that. I want to understand what I am doing. I was trying to use the API to grab the quotes, and then display them, but it only works when I click New Quote for the first time, which makes sense, but how can I change that? Do I need some kind of loop to go through the API? At the end of the url after it says callback=....I can change that number and get different quotes. So I also tried a random number generator but again it only happens once.
Nerando Johnson
@Nerajno
Jun 16 2016 18:52
sorry i may not know how to do that but thanks for pointing me in the right way
Luke
@lukenetti3
Jun 16 2016 18:52
@sorinr If you have a different approach I am open to changing it! Maybe just explain how you went about solving it. I just don't want someone else code.
Tyler Moeller
@TylerMoeller
Jun 16 2016 18:54
@lukenetti3 I would take the code from your anonymous click function and make it into an actual named function, like getNewQuote();. You can then call that function in your document.ready so it is called on page load. You can also call it whenever the button is clicked to retrieve a new quote. You are on the right track thinking of a random number - get 5-10 quotes from the API and choose a random one to display when the function is called.
There may be a better way to do it with that API, I haven't used it yet...they may have a specific URL for getting a random quote every time. Best I could see with a quick look was to get 5-10 at a time and choose a random one.
Sorin Ruse
@sorinr
Jun 16 2016 18:55
@lukenetti3 i got that but in order to just give u some guidance everyone wanna know what you have in mind to achive. its hard to help whe you actually don't know what the other person need, if you want some inspiration take a look here then ask: http://codepen.io/sorinr/pen/VaJKrw
Toni Shortsleeve
@KoniKodes
Jun 16 2016 18:56
@lukenetti3 Yes, you call an i and yet you haven't looped it.
Luke
@lukenetti3
Jun 16 2016 18:58
@TylerMoeller @sorinr @KoniKodes Thanks everyone! I really appreciate it. That is making much more sense now. I didn't quite understand the document ready function. So by creating the code and naming the actual function that gets the quote and then using it helps!
CamperBot
@camperbot
Jun 16 2016 18:58
lukenetti3 sends brownie points to @tylermoeller and @sorinr and @konikodes :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @konikodes |http://www.freecodecamp.com/konikodes
:cookie: 597 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 369 | @sorinr |http://www.freecodecamp.com/sorinr
Toni Shortsleeve
@KoniKodes
Jun 16 2016 18:59
@lukenetti3 You will make it look great!
Manny
@Alloffices
Jun 16 2016 19:01
@andreas2249 I tried adding *{text-decoration:none;} this would have set it global however it didn't work for some reason. Yea - since :hover, :link ect are different states you would have to set it in each.
MD91
@MD91
Jun 16 2016 19:01
Hi guys: https://codepen.io/MD91/pen/xOOqZy?editors=1010 does anyone know how I can add an account that has never existed to my list? I keep trying data===undefined but it's not coming up with anything
Sorin Ruse
@sorinr
Jun 16 2016 19:01
@lukenetti3 happy coding and don't be afraid of trial and error. this is the mother of learning
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:02
@sorinr So true
Luke
@lukenetti3
Jun 16 2016 19:03
@sorinr Thanks! I just don't want to finish the course and feel like I copied my way through it and didn't really challenge myself and do it myself. I am studying Electrical and Computer Engineering and doing this over the summer to sharpen my skills, so I just want to make sure I am learning it all properly.
CamperBot
@camperbot
Jun 16 2016 19:03
lukenetti3 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave sorinr points
Tyler Moeller
@TylerMoeller
Jun 16 2016 19:05
@MD91 if (!data.status) will return true if data.status is undefined.
  $.getJSON('https://api.twitch.tv/kraken/streams/cretetion', function(data) {
    if (!data.status) {
      $("#cretetion").html("Cretetion"+" - ✘");
    } else {
      $("#cretetion").html("Cretetion"+" - ✓").append(" - "+data1.stream.game);
    }
  });
Joshua Abu
@Absolutestunna
Jun 16 2016 19:07
anyone have experience working with admin templates and sifting through the files to create your customiezd look?
anyone have experience working with admin templates and sifting through the files to create your customiezd look?
Manny
@Alloffices
Jun 16 2016 19:07
@Absolutestunna Which theme
Joshua Abu
@Absolutestunna
Jun 16 2016 19:08
@Alloffices that part of my research. I don't know what i want. the project will need a lot of tables.
Jack Reinke
@jreinke10
Jun 16 2016 19:08
just finished my portfolio. You guys wanna check it out for me? http://codepen.io/jreinke10/pen/LZZbYp its not mobile compatible
Joshua Abu
@Absolutestunna
Jun 16 2016 19:08
@Alloffices sifting through the files to create a customized look (deleting bunch of files) is what i don't know how to tackle
Sorin Ruse
@sorinr
Jun 16 2016 19:08
@lukenetti3 take ur time. if u like programming u need to understand what ur doing. there is no competion in here
Luke
@lukenetti3
Jun 16 2016 19:09
@sorinr Definitely. Thanks
CamperBot
@camperbot
Jun 16 2016 19:09
lukenetti3 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave sorinr points
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:10
Hello to all :-) I've been busy working on my portfolio and now I have a weird JS thing that I can't get to work in FireFox (in Chrome it works fine) :-( Can anyone help me out?
Jonathan
@JonKaric
Jun 16 2016 19:11
@jreinke10 It would be nice if you put the whole thing inside a container
Manny
@Alloffices
Jun 16 2016 19:11
@Absolutestunna You Which theme are you having trouble with. You most likely have to find the main css style sheet - style.css or main.css.
Sourabh
@sumitsrbh
Jun 16 2016 19:12
hi guys, I am building the portfolio page, how to create a fix header with buttons in it.
Manny
@Alloffices
Jun 16 2016 19:12
@Absolutestunna Also what do you mean: the project will need a lot of tables. - you mean like Database tables
Sorin Ruse
@sorinr
Jun 16 2016 19:13
@KoniKodes its the real thing. I've encountered a lot of helps request in this forum but very few persons made the right question. majority didn't know what they need
Joshua Abu
@Absolutestunna
Jun 16 2016 19:14
@Alloffices yeah database tables..ill be consuming data from the restful api rendering the page based on the data i pull in a table structure
Damian Collier
@damianpcollier
Jun 16 2016 19:15
Hello. I'm looking at the Tribute page (first challenge). I have the following code to create an image with some text under it. How do I place all this inside a rectangle with a very light grey border?
<img class="img-responsive center-block" src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg" alt="Picture">
<div class="caption text-center">Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</div>
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:15
@sorinr I know. I run into that issue with myself when trying google for help.
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:15
Can anyone please help me out with a small JS issue on my portfolio site?
Joshua Abu
@Absolutestunna
Jun 16 2016 19:16
I'm seeing lots of admin tables built for and by differenct frameworks and I was wondering if i can get a simple one i can maniplute and use with React, backbone or something simple
@Alloffices
Dylan
@dhcodes
Jun 16 2016 19:16
@chrisamsterdam1986 sure ask it
do you have a codepen
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:16
Thanks @dhcodes
CamperBot
@camperbot
Jun 16 2016 19:16
chrisamsterdam1986 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1053 | @dhcodes |http://www.freecodecamp.com/dhcodes
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:16
I actually already have it live
on a site
so, this is the problem
When you scroll the page after it loads, in Google Chrome, it perfectly loads in the title of the project every time you scroll further
Dylan
@dhcodes
Jun 16 2016 19:17
k
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:17
but in FireFox, it loads in the title but not as visible
Check it out for yourself :)
Dylan
@dhcodes
Jun 16 2016 19:17
what's the site?
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:17
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:18
@chrisamsterdam1986 chrome gave this info: fullPage: Option scrollBar is mutually exclusive with scrollOverflow. Sections with scrollOverflow might not work well in Firefox
Dylan
@dhcodes
Jun 16 2016 19:19
@chrisamsterdam1986 are both supposed to load the plain text and then the font? if so, you might move that to happen while the page loads
@chrisamsterdam1986 like the site though, i'll see if I can figure out what's up
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:19
Ah @KoniKodes , thanks for also thinking with me :) but that has to do with another plug-in (FullPage JS)
CamperBot
@camperbot
Jun 16 2016 19:19
:cookie: 303 | @konikodes |http://www.freecodecamp.com/konikodes
chrisamsterdam1986 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:20
@chrisamsterdam1986 I tried... But it is very pretty.
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:20
@dhcodes - The way it works in Chrome is the right way :) I don't think there is an easier way to describe what it should do ;-)
Dylan
@dhcodes
Jun 16 2016 19:20
what do you mean by "not as visible"
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:21
Thanks @KoniKodes! I'm a webdesigner for profession, but sometimes those sneaky JS things still break me up
CamperBot
@camperbot
Jun 16 2016 19:21
chrisamsterdam1986 sends brownie points to @konikodes :sparkles: :thumbsup: :sparkles:
:warning: chrisamsterdam1986 already gave konikodes points
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:21
@dhcodes - When you for example scroll down after you see the text: "digital design creates happiness" you see the text "hundred day challenge" appear
It should load in immediately when it enters the viewport
All the text that is visible
And this happens exactly as it should in Google Chrome
However, when I try to view the page in Firefox, it doesn't load in the text when I hit the viewport
If that makes sense :)
Dylan
@dhcodes
Jun 16 2016 19:22
yes
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:22
@chrisamsterdam1986 Yes. But it looks good to me in Firefox too.
Dylan
@dhcodes
Jun 16 2016 19:22
it does now
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:24
@KoniKodes - Which FireFox version do you use? :)
@dhcodes - Do you see the problem? :P This is actually the code that triggers the fade-in:
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:25
@chrisamsterdam1986 I'm not sure.
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:25
$(window).scroll( function(){
                $('.hideme').each( function(i){
                    var bottom_of_object = $(this).offset().top + $(this).outerHeight();
                    var bottom_of_window = $(window).scrollTop() + $(window).height();

                    if( bottom_of_window >= bottom_of_object ){
                        $(this).animate({'opacity':'1'},400);
                    }
                }); 
            });
Toni Shortsleeve
@KoniKodes
Jun 16 2016 19:25
I think I missed the last upgrade.
Dylan
@dhcodes
Jun 16 2016 19:26
@chrisamsterdam1986 there's an error in the JS console that may pertain: This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!
@chrisamsterdam1986 also have you tested something as inocuous as making adding +1 to the bottom of window?
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:28
To be honest, I stole this script from Stack Overflow :) So making an easy +1 adding to the bottom of the window... I don't really know how to do that...
But the weird thing is
Dylan
@dhcodes
Jun 16 2016 19:29
@chrisamsterdam1986 change var bottom_of_window = $(window).scrollTop() + $(window).height();
to var bottom_of_window = $(window).scrollTop() + $(window).height() + 1;
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:30
Done!
I immediately put it live, so it should be visible for you as well now
Dylan
@dhcodes
Jun 16 2016 19:30
seems to work?
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:32
I'm not sure how I can see in the browser
I tried a console.log in de console of chrome
sorry for being such a noob :P
Dylan
@dhcodes
Jun 16 2016 19:34
I mean I refreshed it on firefox
and it seems to load right
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:34
oooh
let me see :D
my god
you are the man!!!!
:D :D :D
thank you so much !!!
let me know if I can ever help you back with some design feedback or anything similar
Dylan
@dhcodes
Jun 16 2016 19:35
lol @chrisamsterdam1986 i just guessed
and reverse engineered it
lol
tommy
@tommygebru
Jun 16 2016 19:35
is there a browser app like codeshare..... that shares one persons tab view instead of both sharing the same?
Chris C.
@chrisamsterdam1986
Jun 16 2016 19:36
Cheers mate! Have a nice evening :+1:
Dylan
@dhcodes
Jun 16 2016 19:37
@chrisamsterdam1986 you too
Israel Ramalho
@ADSNTO
Jun 16 2016 19:57
Your p element should have the text "View more " (with a space after it).
NOT THAT I can solve
???
Mert Barış
@mertbaris
Jun 16 2016 20:07
Hey! I'm working on Random Quote Machine. I've done everything but tweet button. It should be able to tweet the current quote on the screen, but I just don't know how to do it. Here is my pen from codepen: http://codepen.io/mertbaris/full/OXXRBm/ I would appreciate if anyone were to help me :)
Ethan Leyden
@Darksmurf
Jun 16 2016 20:12
I needs halp.
Patrick Walters
@Patflyer
Jun 16 2016 20:29
I have a question, and wanted to get someone experienced to see if it's straightforward
Is Python or another scripted language a better technology stack for formatting XML (from a single long string)?
VBScript? JavaScript?
Or would C# or Java be a better fit?
I don't think I'm even Googling it right. Most of my results are about parsing and not (perhaps) formatting
Anyone there?
Tyler Moeller
@TylerMoeller
Jun 16 2016 20:32
@Patflyer Are you talking about applying a stylesheet to your XML to display as HTML?
Or just trying to "beautify" it (make it look pretty and indented correctly)?
andreas2249
@andreas2249
Jun 16 2016 20:36
Hi, Campers. Do I have this syntax right? I can't get it to jump to the '#section5' location...
  <a href="#section5" class="btn btn-primary btn-custom">About</a>
<-- This should jump to <a name=”#section5”, right? -->

  <a name="#section5">
  <div class="row">
    <section class="well col-xs-5 col-xs-offset-1">
      <h1>Section 5</h1>
      <p id="section-5">Original Section 5 text</p>
    </section>
Thanks in advance. :)
Johnny Rock
@freekngdom
Jun 16 2016 20:39
can anyone tell me what's wrong with my getJSON call?
I tried
'''
$.get(url, function (data) {
alert(data);
});
'''
and that didn't alert anything either.
I can go to the url that is alert'ed and see some data, but it isn't showing up in my $.getJSON call?
Thanks!
http://codepen.io/freekngdom/pen/JKKmLX?editors=1010
Ok, It just alert'ed some data when I went through the above linked pen?
Aleksandr Kozlov
@Cu3bIu
Jun 16 2016 20:41
Hey Guys Could someone help me with the twitch task ?
its basically finished
But the links for the channels are not working - getting constant loading screen - the funny thing is when i copy the same link and open new tab it works fine again the very same link.
It needs to be opened in the full screen atm to be nicely visible.
Aleksandr Kozlov
@Cu3bIu
Jun 16 2016 20:48
@freekngdom Hey _ but I can see that you do get JSON out
Johnny Rock
@freekngdom
Jun 16 2016 20:50
OK, I see the #output area change for a second, but then goes back to saying "output goes here". What gives?
https://codepen.io/freekngdom/pen/JKKmLX?editors=0010
Aleksandr Kozlov
@Cu3bIu
Jun 16 2016 20:51
ok So what you would need to do is to get it out - from the "success state"
Just create a global variable
and pull the object there
this is not needed
but helped me to understand what object is pulled
$.getJSON(url, function (data) {
console.log(data);
});
everything that will happen next has to be inside this
otherwise it wont work
DJ
@qualitymanifest
Jun 16 2016 20:55
@freekngdom default behavior of a form is to submit, which refreshes the page. you need to prevent that default behavior with preventDefault
mcorby17
@mcorby17
Jun 16 2016 21:01
Hey guys, how do I get the input from a form in javascript/jQuery? I'm on the wikipedia project and I can't find anything on the 'net that says how to get the input from a text input box... http://codepen.io/mcorby17/pen/vKGPmQ
Do I need to use AJAX or something?
Johnny Rock
@freekngdom
Jun 16 2016 21:06
@qualitymanifest Thanks
CamperBot
@camperbot
Jun 16 2016 21:06
freekngdom sends brownie points to @qualitymanifest :sparkles: :thumbsup: :sparkles:
:star2: 1203 | @qualitymanifest |http://www.freecodecamp.com/qualitymanifest
matthew3454
@matthew3454
Jun 16 2016 21:07
I someone could take a look at my Wikipedia Viewer Application and give me some helpful tips tha'd rock. Thanks. http://codepen.io/codeabode20/pen/XKKBvV
marcimmediato
@marcimmediato
Jun 16 2016 21:18
hey guys are all the projects supposed to be responsive?
specifically the portfolio
mcorby17
@mcorby17
Jun 16 2016 21:20
@marcimmediato what do you mean by responsive?
Like change according to the size of the browser?
Tbh I think it's all up to you... I feel like I could submit an empty project and FCC probably wouldn't care
marcimmediato
@marcimmediato
Jun 16 2016 21:21
haha good point
i don't believe they check them but as far as getting my skills up
Jessica
@QueenCode
Jun 16 2016 21:21
I've been trying to use the openweathermap API and I have been getting this error message "not city found" over and over all day. Does anyone know what's wrong?
$(document).ready(function() {

 $.getJSON('http://api.openweathermap.org/data/2.5/weather?lat=51.5034070&long=-0.1275920&APPID=<My Id>', function(json) {
    console.log(json);
  });
});
marcimmediato
@marcimmediato
Jun 16 2016 21:22
the example they show for the portfolio page uses a bunch of stuff i haven't gone over yet
mcorby17
@mcorby17
Jun 16 2016 21:22
@marcimmediato yeah they leave a lot of things up to you to learn yourself
marcimmediato
@marcimmediato
Jun 16 2016 21:23
@mcorby17 makes sense
mcorby17
@mcorby17
Jun 16 2016 21:25
@QueenCode I'm trying to figure out whats up with that :)
I got the same error when I put your url in my browser... put my id in
Jessica
@QueenCode
Jun 16 2016 21:26
@mcorby17 When I look it up online, I see a lot of people (including the weather API people) saying that it's a server overload issue.
I was just wondering if anyone had any other ideas before I try to switch to another API.
Daniel Combs
@DunderStruck
Jun 16 2016 21:37
I'm having a bit of trouble on the portfolio project. I'm trying to change the background color of my entire About section, but it keeps only applying it to the top. http://codepen.io/dunderbutt2000/pen/MeyQVY Anyone able to point me in the right direction?
Oh, and I guess the scaling is terrible too, hadn't checked that yet...
marcimmediato
@marcimmediato
Jun 16 2016 21:43
i'm having trouble with the same project ha
Daniel Combs
@DunderStruck
Jun 16 2016 21:43
Heh, yea, it's just confusing me.
marcimmediato
@marcimmediato
Jun 16 2016 21:44
do they go over the <nav> tag during the html/css section?
i've never seen that before
Daniel Combs
@DunderStruck
Jun 16 2016 21:46
Nah, had to look that up myself. I like looking things up, but I've kind of hit a wall and I'm not sure what to search. All I could find was how to change the entire background color of the body, not just one part.
plus I still don't understand the col-- class and how to get things to look right on mobile.
marcimmediato
@marcimmediato
Jun 16 2016 21:47
bootstrap is very confusing to me as well
as far as the responsive part
Daniel Combs
@DunderStruck
Jun 16 2016 21:49
Yea. There's just a lot to it, and I'm not sure where to start with it, haha.
marcimmediato
@marcimmediato
Jun 16 2016 21:51
someone yesterday was saying in here about how they didn't like bootstrap at all
and there's other better ways to do it
but didn't get into too much detail
Daniel Combs
@DunderStruck
Jun 16 2016 21:51
Oh. I like it just fine, it just confuses me.
Moisés Man
@moigithub
Jun 16 2016 21:54
@DunderStruck col class should be inside a row class
<div class="row">
         <div class="col-md-3">
         </div>
</div>
also u have a extra </header> in ur code
Daniel Combs
@DunderStruck
Jun 16 2016 21:55
oh
Yup, that fixed it. my bad. Now to work on the mobile scaling I guess.
Moisés Man
@moigithub
Jun 16 2016 21:57
:+1:
Daniel Combs
@DunderStruck
Jun 16 2016 21:58
Thanks! @moigithub
CamperBot
@camperbot
Jun 16 2016 21:58
dunderstruck sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 1446 | @moigithub |http://www.freecodecamp.com/moigithub
Joshua Abu
@Absolutestunna
Jun 16 2016 21:59
For practice, i'm trying to create an app that uses any sports shoe api to get pics of sports shoes. any suggestions?
marcimmediato
@marcimmediato
Jun 16 2016 22:00
how do you send brownie points
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:03
Just say thanks @username
help brownie
CamperBot
@camperbot
Jun 16 2016 22:03

:point_right: brownie points [wiki]

Brownie Points

The number beside your picture on Free Code Camp tells you how many Brownie Points you have.

A user profile picture next to a with Brownie Points score

There are two ways you can get Brownie Points:

  1. Complete challenges - you get one point per challenge you complete
  2. Help other campers in chat - each time you help another camper and they thank you (by typing "thanks @yourname"), you will get a point

Brownie Points help you look like the kind of person who codes a lot, shares relevant links, and helps people.

They also add to your Streak.

:pencil: read more about brownie points on the FCC Wiki

marcimmediato
@marcimmediato
Jun 16 2016 22:04
thanks @TylerMoeller
CamperBot
@camperbot
Jun 16 2016 22:04
marcimmediato sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 600 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:04
Wow #600 thank you :)
marcimmediato
@marcimmediato
Jun 16 2016 22:04
:)
Holish
@Holish
Jun 16 2016 22:17
Hi guys, I need your advice: Im working on challenge and wondering what are the best ways to work with data derived from ajax callbacks. Here is my solution: http://codepen.io/holi0004/pen/mEEQrG
but i dont like it
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:21

@Holish Not sure if I would say this is the "best", but you could also use the .done(), .fail(), .always() pattern with $.getJSON to wait for data and capture failures:

$.getJSON( "example.json", function() {
  console.log( "success" );
})
  .done(function() {
    console.log( "second success" );
  })
  .fail(function() {
    console.log( "error" );
  })
  .always(function() {
    console.log( "complete" );
  });

I prefer promises over callbacks, personally, to avoid the pyramid of doom

andreas2249
@andreas2249
Jun 16 2016 22:22
Hi, Campers. If I want to load an image into a page that's not a link to an image on a website, is there a way to create an images or assets folder to load it from? Thanks in advance. :)
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:23
@andreas2249 You can create a gh-pages branch on github, upload your images, and link to them over there. Lots of people just upload to dropbox, flickr, or postimage.org and then use those URLs in their projects.
You can also pay for a CodePen Pro account and they'll give you local storage to link to photos, css files, js files, etc.
Holish
@Holish
Jun 16 2016 22:24
@TylerMoeller oooh, that's what i was looking for! Thanks!!!
CamperBot
@camperbot
Jun 16 2016 22:24
holish sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 601 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:24
I use it all the time now that I discovered it. Enjoy :)
andreas2249
@andreas2249
Jun 16 2016 22:25
Thank you for your prompt reply, @TylerMoeller. Excellent ideas. I'll use the postimage.org. So easy. Thanks again. :) :+1:
CamperBot
@camperbot
Jun 16 2016 22:25
andreas2249 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 602 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
andreas2249
@andreas2249
Jun 16 2016 22:25
(I really like how postimage.org gives you immediate link choices... Slick!)
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:26
It's a favorite of many here :) Glad that helped
andreas2249
@andreas2249
Jun 16 2016 22:28
It sure did. Thank you, Tyler.
anacou
@anacou
Jun 16 2016 22:29
how would you make this portfolio webpage better? see here: https://codepen.io/anacou/full/VjaNwJ/
lcassettai
@lcassettai
Jun 16 2016 22:30
@anacou change the hover style in <a> tag in the menu
but i really like it!
anacou
@anacou
Jun 16 2016 22:31
thanks @lcassettai
CamperBot
@camperbot
Jun 16 2016 22:31
anacou sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 321 | @lcassettai |http://www.freecodecamp.com/lcassettai
anacou
@anacou
Jun 16 2016 22:32
but how and why do I change the <a> tag in the menu?
(the hover style)
lcassettai
@lcassettai
Jun 16 2016 22:32
np bro! nice work!
andreas2249
@andreas2249
Jun 16 2016 22:33

@anacou, one idea is that you might want to consider using a different [less common] font. https://fonts.google.com/

Another is moving moving your <h1> tags to the left to avoid having EVERY-thing centered. It can sometimes make the page look more interesting to have some visual elements offset from the rest...

Nice page. :)

lcassettai
@lcassettai
Jun 16 2016 22:33
li a:hover{
  color:red;
}
you can make this for eg to change color to red you can play with css
@anacou
anacou
@anacou
Jun 16 2016 22:33
thanks @andreas2249
CamperBot
@camperbot
Jun 16 2016 22:33
anacou sends brownie points to @andreas2249 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for andreas2249
Tyler Moeller
@TylerMoeller
Jun 16 2016 22:33
@anacou great work. One minor suggestion is to add a footer for your social media info. It would also be nice to hover over your portfolio images for a brief description.
anacou
@anacou
Jun 16 2016 22:34
thanks @TylerMoeller
CamperBot
@camperbot
Jun 16 2016 22:34
anacou sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 603 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
andreas2249
@andreas2249
Jun 16 2016 22:34
I like Tyler's idea of a popup description on images. :)
anacou
@anacou
Jun 16 2016 22:34
by using an alt tag? or some other way?
andreas2249
@andreas2249
Jun 16 2016 22:35
@anacou, there's some pretty simple jQuery modules that'll do that -- you can google for them.
@anacou, here's one of the more simple ones: Tooltips https://jqueryui.com/tooltip/
@anacou, there are also many nice drop-down caption jQuery modules: Here's the first link I found: https://www.sitepoint.com/30-text-captions-overlay-image-plugins/
anacou
@anacou
Jun 16 2016 22:39
awesome
thanks a bunch
time for me to get back to work
Is it fine?
Jonathan Aguilar
@jonaguiar
Jun 16 2016 23:12
i can't seem to add the jumbotron to my project. Do you need an external link on codepen.com or is not required on this?
lcassettai
@lcassettai
Jun 16 2016 23:13
@Biazus nice work!
@jonaguiar you have to add bootstrap in codepen just that!
Jonathan Aguilar
@jonaguiar
Jun 16 2016 23:15
@lcassettai thanks man it worked.
CamperBot
@camperbot
Jun 16 2016 23:15
jonaguiar sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 322 | @lcassettai |http://www.freecodecamp.com/lcassettai
matthew3454
@matthew3454
Jun 16 2016 23:18
Thank you to whoever will take a look at this.http://codepen.io/codeabode20/pen/XKKBvV
M. Oliveira
@m-oliv
Jun 16 2016 23:25
Hi guys! I have been developing my weather app locally (using brackets) and the code works pretty well. However, when I move the exact same code to codepen, it stops working. Anyone had a similar problem before? If so, how did you solve this issue?
lcassettai
@lcassettai
Jun 16 2016 23:26
@m-oliv send your pen !
M. Oliveira
@m-oliv
Jun 16 2016 23:27
@lcassettai Here is my pen: http://codepen.io/m-oliv/pen/jrrQoM
lcassettai
@lcassettai
Jun 16 2016 23:28
blob
its working fine i think! @m-oliv
anacou
@anacou
Jun 16 2016 23:28
hey! can you please tell me how I can get the About This Page section and the Around The Web section of this page side by side? https://codepen.io/anacou/full/VjaNwJ/
M. Oliveira
@m-oliv
Jun 16 2016 23:29
@lcassettai Oh, weird. Must be my browser.. Thanks for looking into it! It looks exactly as it should.
CamperBot
@camperbot
Jun 16 2016 23:29
m-oliv sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 323 | @lcassettai |http://www.freecodecamp.com/lcassettai
lcassettai
@lcassettai
Jun 16 2016 23:30
@m-oliv no problem! i tried in mozilla and work fine too!
nice work! i like your app! :D
anacou
@anacou
Jun 16 2016 23:32
anyone?
lcassettai
@lcassettai
Jun 16 2016 23:32
@anacou you can wrap them in separated divs and then you can use float
anacou
@anacou
Jun 16 2016 23:33
awesome! how do I use float though? haha sorry I'm a newbie
Ale Gerosa
@alegerosa
Jun 16 2016 23:34
Hi all!! If you have a minute, I'm pretty new here, on the first challenge. Can anybody help me understand why my image isn't centering in its col? Other feedback on my work in progress also appreciated http://codepen.io/alegerosa/pen/oLLegm
Lars von der Burg
@LarsCastle
Jun 16 2016 23:34
Guys I might need your help. In the Smallest Common Multiple algorithm challenge (https://www.freecodecamp.com/challenges/smallest-common-multiple), I entered the // noprotect flag, which wasn't wise. Every time I try to access the challenge, my browser tab now freezes because JavaScript is caught in an infinite loop. Any idea how to prevent the challenge from automatically executing the code and how to reset the exercise so I can start again? Cheers
anacou
@anacou
Jun 16 2016 23:36
I think your work in progress is awesome @alegerosa
It's the very first time I hear about the woman who coded the moon
Greg Duncan
@GregatGit
Jun 16 2016 23:37
@matthew3454 this is a little more organised
$(document).ready(function() {
  $('#search').click(function() {
    var searchTerm = $('#searchTerm').val();
    var url = "http://enwikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
    $.ajax({
      type: "GET",
      url: url,
      contentType: "application/json; charset=utf-8",
      async: false,
      dataType: "json",
      success: function(data) {
        console.log(data);
        $('output').html('');
        for (var i = 0; data[1].length; i++) {
          $("#output").prepend("<li><a href = " + data[3][0] + ">" + data[2][0] + "</a><p>" + data[1][0] + "</p></li>");
        }
      }
    });
  });
});
Ale Gerosa
@alegerosa
Jun 16 2016 23:38
Heh, I took a creative license there. She did code (and lead the team of coders for) the machine that went to the moon
marcimmediato
@marcimmediato
Jun 16 2016 23:38
@anacou i like your site!
max77p
@max77p
Jun 16 2016 23:38
for practice sake, i am just trying to play with the dom create element to see if i can create element and push whatever to the page
but what am i doing wrong here
anacou
@anacou
Jun 16 2016 23:38
thanks @marcimmediato
CamperBot
@camperbot
Jun 16 2016 23:38
anacou sends brownie points to @marcimmediato :sparkles: :thumbsup: :sparkles:
:cookie: 129 | @marcimmediato |http://www.freecodecamp.com/marcimmediato
max77p
@max77p
Jun 16 2016 23:38
i am simply trying to put the word "water" to the myDIV id
marcimmediato
@marcimmediato
Jun 16 2016 23:38
i agree with the others, think you need to maybe change the hover for the links but otherwise i'm a fan
max77p
@max77p
Jun 16 2016 23:38
help anyone?
CamperBot
@camperbot
Jun 16 2016 23:38
no wiki entry for: anyone
marcimmediato
@marcimmediato
Jun 16 2016 23:39
@max77p those colors are painful for the eye lol
max77p
@max77p
Jun 16 2016 23:39
@marcimmediato lol yea i will fix all that
just want to get the coding part down
marcimmediato
@marcimmediato
Jun 16 2016 23:40
not sure how to fix your issue though sorry
max77p
@max77p
Jun 16 2016 23:40
anyone else please?
Ale Gerosa
@alegerosa
Jun 16 2016 23:41
I'm sorry @max77p, I'm afraid I'm too much of a newbie to help
max77p
@max77p
Jun 16 2016 23:42
thanks guys no worries, hopefully someone experienced sees this lol
Ale Gerosa
@alegerosa
Jun 16 2016 23:43
Is there anybody around to help on my tribute page?
lcassettai
@lcassettai
Jun 16 2016 23:43
@alegerosa CSS goes in the css module (in code pen) you can add this style to img responsive class to center your image
.img-responsive {
    margin: 0 auto;
}
Ale Gerosa
@alegerosa
Jun 16 2016 23:43
Thanks @lcassettai !
CamperBot
@camperbot
Jun 16 2016 23:43
alegerosa sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @lcassettai |http://www.freecodecamp.com/lcassettai
anacou
@anacou
Jun 16 2016 23:44
@lcassettai I don't understand how to use float
lcassettai
@lcassettai
Jun 16 2016 23:44
@alegerosa np! :D
Greg Duncan
@GregatGit
Jun 16 2016 23:44
@max77p which div id are you trying to change?
matthew3454
@matthew3454
Jun 16 2016 23:44
@GregatGit Thanks again mate.
CamperBot
@camperbot
Jun 16 2016 23:44
matthew3454 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
anacou
@anacou
Jun 16 2016 23:44
to get the two things side by side..
CamperBot
@camperbot
Jun 16 2016 23:44
:cookie: 595 | @gregatgit |http://www.freecodecamp.com/gregatgit
max77p
@max77p
Jun 16 2016 23:46
@GregatGit the myDIV
lcassettai
@lcassettai
Jun 16 2016 23:46
@anacou you can make this it's easier. Wrap your content in a div and then add width to that container and then make them inlinle block for eg
<div class="container1">
</div>
<div class="container2">
</div>

//Style here
.container1,.container2{
  width:400px;
  display:inline-block;
}
anacou
@anacou
Jun 16 2016 23:47
wow! thank @lcassettai
CamperBot
@camperbot
Jun 16 2016 23:47
anacou sends brownie points to @lcassettai :sparkles: :thumbsup: :sparkles:
:cookie: 325 | @lcassettai |http://www.freecodecamp.com/lcassettai
Ale Gerosa
@alegerosa
Jun 16 2016 23:47
It totally worked @lcassettai !
Greg Duncan
@GregatGit
Jun 16 2016 23:47
@matthew3454 try to keep it simple
success: myFunction(data),
// out side the ajax

function myFunction(json){
    // here is where you mess around with the data
}
@max77p so you want <div id="myDIV"> to be <div id="water"> ?
lcassettai
@lcassettai
Jun 16 2016 23:48
@alegerosa glad to hear that! i hope you send your final work, i am really interested on the facts!
Ale Gerosa
@alegerosa
Jun 16 2016 23:49
Will do!
max77p
@max77p
Jun 16 2016 23:50
@GregatGit no i want the word "water" pushed as a <p> element to ID myDIV
@GregatGit ohh i got it to work lol...looks like i need to have getElementByID and not getElementsByID
anacou
@anacou
Jun 16 2016 23:52
@lcassettai the wrapping content in a div didn't work
Greg Duncan
@GregatGit
Jun 16 2016 23:53
@max77p or $('#id').
max77p
@max77p
Jun 16 2016 23:53
@GregatGit what do you mean?
anacou
@anacou
Jun 16 2016 23:53
is there another way to make this work
Greg Duncan
@GregatGit
Jun 16 2016 23:54
try replacing getElementByID('myDIV') with $('#myDIV')
max77p
@max77p
Jun 16 2016 23:56
@GregatGit the whole thing or just the mydiv part?
Greg Duncan
@GregatGit
Jun 16 2016 23:56
just getElementByID('myDIV')
max77p
@max77p
Jun 16 2016 23:57
that doesnt work
Greg Duncan
@GregatGit
Jun 16 2016 23:57
what is the whole line that works
max77p
@max77p
Jun 16 2016 23:58
@GregatGit document.getElementById("myDIV").appendChild(para);
when i add an s at end of element so it becomes getElementsById then it doesnt work
either
Greg Duncan
@GregatGit
Jun 16 2016 23:58
$('#id').appendChild(para);
max77p
@max77p
Jun 16 2016 23:58
so trying to understand why that is so
@GregatGit that doesnt work either
Greg Duncan
@GregatGit
Jun 16 2016 23:59
do you have jQuery.js added?
max77p
@max77p
Jun 16 2016 23:59
yes