These are chat archives for FreeCodeCamp/HelpFrontEnd

24th
Apr 2016
Michael Karpinski
@karpimpski
Apr 24 2016 00:02
I figured that out, now can somebody tell me why my AI does 2 at a time at one point, and stops after that?
Andrea McDonald
@AndreaMcD
Apr 24 2016 00:27
I'm curious if anyone else ran into this problem on the Local Weather App, but I figured out finally that my geolocation will not work unless called over a https location (I believe that this is something that chrome/safari have recently changed). Hence, I need a HTTPS connection in codepen.io to allow for geolocation. I then ran into the problem that I could not call the OpenWeather API since 'jsonp' does not allow cross origin requests if it is from https to a http. My final conclusion at this point is to forego geolocation for a location IP API instead. Did anyone else run into this issue? Did you have the same conclusion? Any thoughts and inputs would be stellar! :)
Michael Karpinski
@karpimpski
Apr 24 2016 00:42
why does this sometimes return 2 numbers?
function chooseNumber(){
  var randomNumber = Math.floor((Math.random() * 9) + 1);
  for(var i = 0; i < takenNumbers.length; i++){
    if(randomNumber == takenNumbers[i]){
      randomNumber = Math.floor((Math.random() * 9) + 1);
      i = -1;
    }
  }
  console.log(randomNumber);
  return randomNumber;
}
John O'Connell
@IAmJohnOconnell
Apr 24 2016 01:02
Hey everyone. I have an interesting problem i’m trying to work out. I’m working on creating a breif for future web design projects and i have it coded in html using primarily fieldsets and legends within a form tag. Though when it comes to styling i’m having a hard time of getting the checkboxes and inputs laid out the way i want to. Can anyone offer assistance?
It is unrelated to FCC so I appologise if this is the wrong place to post this..
Kyle Morton
@kmorton1988
Apr 24 2016 01:07
Hey guys, any chance someone in here is a wiz with CSS? Trying to isolate a problem with a div not being where it should be.
John O'Connell
@IAmJohnOconnell
Apr 24 2016 01:10
Im no wiz but i’ll take a look. What are we trying to do here.
@kmorton1988 What seems to be the problem?
Kyle Morton
@kmorton1988
Apr 24 2016 01:12
Ahh, let me change it back @IAmJohnOconnell
I'm having trouble getting the game title floating to the right properly..
John O'Connell
@IAmJohnOconnell
Apr 24 2016 01:13
@kmorton1988 the starcraft title
Kyle Morton
@kmorton1988
Apr 24 2016 01:14
ok, @IAmJohnOconnell So refresh real quick, and I'm trying to get the div containing the name of the game being played on the same line/level as the username
Brendan Jackson
@BrendanJackson
Apr 24 2016 01:15

Working on the final big change for my portfolio, I've run into trouble removing the bootstrap class btn-lg from my list items. At the screen size of 767px and under they're just way too big. I've tried a few things I found on stack overflow such as...

function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth < 767) {
$("ul li.btn").removeClass("btn-lg");
}
}

$(window).load(mobileViewUpdate);
$(window).resize(mobileViewUpdate);

however I'm not getting any results, perhaps I just haven't narrowed down how to select the element because of how the inspect tool functions on codepen not sure.
Can anyone help change the buttons to a smaller size when my screen size is less than 767px in a slmple way? http://codepen.io/brendanjackson/pen/VaMEwO

Kyle Morton
@kmorton1988
Apr 24 2016 01:17
@BrendanJackson you might try making your own media break classes: http://www.w3schools.com/css/css_rwd_mediaqueries.asp
Brendan Jackson
@BrendanJackson
Apr 24 2016 01:23
well I have media queries the trouble is I'm unsure of how to remove the bootstrap class btn-lg with them which is why I defaulted to javascript .removeclass but I havent managed to get it to work and I'm unsure of exactly why
Kyle Morton
@kmorton1988
Apr 24 2016 01:23
just retarget the same class.
yours should override the bootstrap class since it loads after the bootstrap css
Brendan Jackson
@BrendanJackson
Apr 24 2016 01:29

something is wrong with this? function mobileViewUpdate() {
var viewportWidth = $(window).width();
if (viewportWidth < 767) {
$("ul[class="contact_buttons"] li").removeClass("btn-lg");
}
}

$(window).load(mobileViewUpdate);
$(window).resize(mobileViewUpdate);

Kyle Morton
@kmorton1988
Apr 24 2016 01:35
@BrendanJackson Not quite what I meant. Use your own CSS Media Transition calls in your CSS tab to retarget and change the size/shape/etc.
Alex Coder
@jkid314159
Apr 24 2016 01:43
hello world
CamperBot
@camperbot
Apr 24 2016 01:43

welcome to FreeCodeCamp @jkid314159!

Alex Coder
@jkid314159
Apr 24 2016 01:45
I want to manipulate 3 grid items. first row 1 2 second row 3 when collapse want 2 to go to bottom or second row see code
Alex Coder
@jkid314159
Apr 24 2016 01:50
post here in a second
Brendan Jackson
@BrendanJackson
Apr 24 2016 01:51
@kmorton1988 I see how I can make everything smaller however, the text doesn't line up as fluidly as I feel removing the class would. That said i don't have to scroll offscreen to see my whole button
Alex Coder
@jkid314159
Apr 24 2016 01:52
<div class="container">
<div class="jumbotron">
<div class="row text-center">
    <div class="col-sm-9">
        Content Top
    </div>
    <div class="col-sm-3 col-sm-pull-3">
        Content Bottom
    </div>
    <div class="col-sm-9" "col-sm-push-3">
        Content Middle
    </div>
 </div><!-row end-->
</div><!-jumbotron end-->
</div><!-container end-->
I want the bottom come to last place but on line above?
Rory Avant
@roryavant8
Apr 24 2016 01:54

Hi everyone, I am working on the Twitch Stream app and I am having a complication. I am trying to access divs that are dynamically created when the page loads. My code trying to access the said divs is from lines 84-86, which simply is a statement to alert to the screen. When I hard code a few divs into the HTML it works fine. How do I work around this issue?

http://codepen.io/roryavant8/pen/ZWxPyv?editors=1010

Nvm I figured it out using $(window).load
Michael Karpinski
@karpimpski
Apr 24 2016 03:22
can anybody tell me why my Restart button won't empty the text?
Javier Cuara
@jcuara123
Apr 24 2016 03:48
Hi, i know this might be a dumb question but is there a way to implement a java project to work in HTML??
looked through google no definet answer that i have found
Jason
@JasonDeving
Apr 24 2016 03:55
@jcuara123 spring
google java framework
Javier Cuara
@jcuara123
Apr 24 2016 04:02
thank you :)
@JasonDeving
Michael Karpinski
@karpimpski
Apr 24 2016 04:33
http://codepen.io/karpimpski/pen/oxMJrN?editors=1010 does anybody know a fix for my bug? if you click the box after you hit reset, you need to hit reset again to start the game
Rada
@Radascript
Apr 24 2016 04:46
just posted in FCC room, thought this place may be better
hey guys, I'm wondering if other people towards the end of Front End section end up feeling a lot more comfortable with JS than with the HTML/CSS. I feel like because the html/css section was so early on in the learning process, and before any projects, it doesn't register as well. I spend a lot of time stuck making all the elements fit where I want on the page; scripts tend to be much easier. Has anyone who's been in my shoes have some general advice for getting more cofortable with html/css parts of the projects?
Michael Karpinski
@karpimpski
Apr 24 2016 05:05
@Radascript I'd recommend just watching a YouTube HTML/CSS/Bootstrap tutorial, there are tons! me personally, I just did a BUNCH of Google until I got comfortable with HTML/CSS. but I'm like you, I'm a lot more comfortable with JS too
John O'Connell
@IAmJohnOconnell
Apr 24 2016 05:14
Wondering if anyone has time to take a look at a CodePen and offer any suggestions to pretty it up a bit. Having trouble getting it to behave
Frank XC
@tenkdayz
Apr 24 2016 06:22
@Radascript I can say that about bootstrap.. i learned the material but it got erased fast..
Rada
@Radascript
Apr 24 2016 06:30
@tenkdayz yeah for sure. Bootstrip's grid itself is quite intuitive but beyond that I have to look things up all the time
Frank XC
@tenkdayz
Apr 24 2016 06:32
@Radascript I just do random projects to familiarize myself with the languages.. I need to do a couple using bootstrap and scss soon.
Rohit Kumar Jena
@rohitrango
Apr 24 2016 06:59
where do we get a free quotes api from ?
need it for Random Quote Machine
@all anyone there ?
Rada
@Radascript
Apr 24 2016 07:04
@rohitrango I just built my own array of quotes. Plenty practice with API with the other three challenges, and no API had House of Cards quotes
@rohitrango you can also check out this guy's, if you are set on using API for this:
https://www.reddit.com/r/FreeCodeCamp/comments/4fm7pl/i_couldnt_find_a_good_api_for_my_quote_generator/
Rohit Kumar Jena
@rohitrango
Apr 24 2016 07:07
@Radascript checking it out
Krishna Sahu
@dvlprkrishna
Apr 24 2016 07:48
hi everyone
guys where do i start after bootstrap ? i want to develop a site with registration , backend data storage and login features
Krishna Sahu
@dvlprkrishna
Apr 24 2016 07:54
no one here ?? :(
Rada
@Radascript
Apr 24 2016 07:56
people who completed Tictactoe challenge, how many lines of code was your JS if you don't mind?
Andrew McKeever
@andmckvr13
Apr 24 2016 10:59
$(document).ready(function(){
  if (navigator.geolocation) {
    var lat = position.coords.latitude;
    var lon = position.coords.longitude;

    $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + lat + '&' + lon + "&&APPID=32a20b6637471f6f92d78f66b6e48ace", function(json){
      var elFahrenheit = Math.floor(json.main.temp * 9/5 - 459.67);//conerts °K to °F
    var elCelcius = Math.floor(json.main.temp - 273.15);// converts °K to °C
      $("#fahrenButton").click(function() {
   $(".message").html(JSON.stringify(elFahrenheit) + '°' + 'F') //assigns °F to farhenheit button
    });
    $("#celcius").click(function(){
      $(".message").html(JSON.stringify(elCelcius) + '° C')//assigns °C to celcius button
    });
  $(".message").html(JSON.stringify(elCelcius) + '°C')    
    });
  } //end of if statement

  navigator.geolocation.getCurrentPosition;

});
Rohit Kumar Jena
@rohitrango
Apr 24 2016 11:00
@andmckvr13 does it work
Andrew McKeever
@andmckvr13
Apr 24 2016 11:00
hello everyone, I'm having trouble getting the geolocation to work for my weather app
no, it's not working @rohitrango
Rohit Kumar Jena
@rohitrango
Apr 24 2016 11:00
i had the same problem @andmckvr13
Andrew McKeever
@andmckvr13
Apr 24 2016 11:01
any resources that helped you figure it out @rohitrango ?
Rohit Kumar Jena
@rohitrango
Apr 24 2016 11:04
nope...figuring out @andmckvr13
how is it guys??
sorry not this
Andrew McKeever
@andmckvr13
Apr 24 2016 11:21
@Whiplash5057 looks good, personally I would try to center the date buttons you have there, otherwise everything is functional
Richard Andrews
@Whiplash5057
Apr 24 2016 11:23
@andmckvr13 Cool ...Let me do that and get back..!!!
I changed the col-md-8 to col-sm-8 .... Isn't shrinking ..!! Is my bootstrap wrong??
the table is the problem
Andrew McKeever
@andmckvr13
Apr 24 2016 11:31
@rohitrango I got that code to work, I stupidly left out the '&lon=' from the URL
faraz
@silentarrowz
Apr 24 2016 11:48
working on my wikipedia viewer and I get a response back, but I am not sure how to get the titles and page information from the response I am receiving -- could you take a look ??
here's the link -- http://codepen.io/silentarrowz/pen/yOEGjE
cmf89
@cmf89
Apr 24 2016 12:26
@silentarrowz you are getting back a JSON object, so just figure out where the info you want is located within the JSON object
faraz
@silentarrowz
Apr 24 2016 12:31
@cmf89 ok, I dont understand. how this format is going to help
cmf89
@cmf89
Apr 24 2016 12:32
@silentarrowz well you need to take a look at the JSON object and figure out how to navigate it. if you look at the well-formatted version, you can see that within your json you have a "query" object, within that you have a "pages" object, and this "pages" object contains 1 object per page with fields for each page
Stephen James
@sjames1958gm
Apr 24 2016 12:33
@silentarrowz Work from the outside in - assuming json is your variable. if json is an array access with index json[i], if it is an object access with the property use json.prop - repeat this same procedure as you work inwards to the data you want.
faraz
@silentarrowz
Apr 24 2016 12:34
@cmf89 that seems like too much of nesting one inside another
Stephen James
@sjames1958gm
Apr 24 2016 12:34
@sjames1958gm For this you have json.query.pages - now it gets more complicated because wikipedia stores the data with page ids for the keys. You should can get the keys from Object.keys(json.query.pages) into an array and then loop over that array to get the pages
faraz
@silentarrowz
Apr 24 2016 12:35
@sjames1958gm i dont think json is an array. seems like an object, but not sure though
cmf89
@cmf89
Apr 24 2016 12:36
@silentarrowz There is a lot of nesting because the wikipedia API can give a lot of different kinds of information, even though you don't want or need it and don't have it turned on in your query. Since you are using an external API, you don't always get to pick the structure you get back. You just have to write code to parse the information you get from Wikipedia.
faraz
@silentarrowz
Apr 24 2016 12:36
@cmf89 hmm, that's true
@cmf89 let me try and figure it out
thanks @cmf89 @sjames1958gm
CamperBot
@camperbot
Apr 24 2016 12:38
silentarrowz sends brownie points to @cmf89 and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:warning: silentarrowz already gave sjames1958gm points
:star: 390 | @cmf89 | http://www.freecodecamp.com/cmf89
Jas K
@jask84
Apr 24 2016 13:20

Hi. Have a problem in my tic tac toe project. I am just at the first stages and allowing for a random computer choice followed by a user choice. However, it works fine as follows: 1)computer choice, 2)user choice, 3)computer choice, 4)user choice. But then after this the computer takes two turns for some reason. In the log, I can see for some reason the computer take a second turn straight away and automatically chooses to pick an array element from numArray at numArray.length which obviously gives -1. This happens every single time. Not sure what is causing this in my code...

http://codepen.io/jask/pen/grjGoo?editors=0010

Stephen James
@sjames1958gm
Apr 24 2016 13:23
@jask84 It may be that you are adding a click handler to the box every time you go through userfunc and it is processing a single user click as two and calling compfunc twice.
@jask84 Try off('click') at the end of your handler.
Jas K
@jask84
Apr 24 2016 13:27
@sjames1958gm so by calling the userFunc and then placing the click handler inside, that causes it to call compfunc twice? What if compFunc is embedded in the click handler itself? I'm just trying to understand
*compFunc is invoked in the click handler
Stephen James
@sjames1958gm
Apr 24 2016 13:28
@jask84 Then you wouldn't be able to call it to start.
@jask84 You could put your click handler outside of userFunc, just ignore clicks when it is the computer turn.
Jas K
@jask84
Apr 24 2016 13:31
@sjames1958gm I appreciate the help. I just need to take in what you wrote and go over it all. Putting the click handler outside does make sense. Thanks.
CamperBot
@camperbot
Apr 24 2016 13:31
jask84 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 774 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Apr 24 2016 13:44
@jask84 If you assign a click handler inside a function, need to keep track of removing it or you will end up with too many
Jas K
@jask84
Apr 24 2016 13:48
@sjames1958gm oh so it keeps adding it each time...therefore can account for the computer taking two turns?
Mandeep Singh
@MandeepMann
Apr 24 2016 14:19
can anyone tell me why two blood-drop images move under the text when i post my tribute project here , but it is in the row when i am coding in code pan ? http://codepen.io/MrManu/pen/pyVLaw
Stephen James
@sjames1958gm
Apr 24 2016 14:20
@jask84 yes - sorry on another page. Your second user click becomes two calls to your handler
Stuart Taylor
@Bouncey
Apr 24 2016 14:34

I guys, had I had this working, then I change some styles trying to get a text 'cut-out' effect (I abandoned that idea, in favour of color:inherit;. Anyway, i have no idea why .append() isn't working any more. If someone could take the time to have a look and point me in the right direction, i would much appreciate it

https://codepen.io/Bouncey/pen/oxMmvg

yikes, I need to make that responsive.....
Stuart Taylor
@Bouncey
Apr 24 2016 14:43
fixed it, a closing div tag wasnt complete
sorry for wasting your time
Bekah
@bekahmcdonald
Apr 24 2016 14:51
This message was deleted
Zubair Ali
@03aliz
Apr 24 2016 15:12
Hi I'm doing the twitch API can someone tell me why I'm getting data back that is undefined
Branislav Bugarcic
@BBugarcic
Apr 24 2016 15:22
This message was deleted
This message was deleted
Jas K
@jask84
Apr 24 2016 15:30
@zubairali looking at the log it seems the object is labelled as '0'
so I just tested on one like name (as data[0].name) and it seemed to worj
work
@03aliz obviously you need to check if it works for all data and how to correct it for the names that seem to be coming up as undefined.
Mayur Kulkarni
@maykulkarni
Apr 24 2016 15:50
Hi guys how do i position an image to left and add text to right?
I'm using bootstap
bootstrap*
nsloc22
@nsloc22
Apr 24 2016 15:57
@mayur3086 you can use bootsrap row class
Marcus
@mjohnsonengr
Apr 24 2016 15:59
@mayur3086 I believe you would just add a "float:left" to the image as shown here: http://codepen.io/mjohnsonengr/pen/jqpjNo
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:01
@mjohnsonengr Yea I tried it, it doesnt work
Marcus
@mjohnsonengr
Apr 24 2016 16:02
@mayur3086 Perhaps you could enlighten us on your setup then?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:03
@mjohnsonengr I'm using bootstrap to fadein fadeoout some image in left and a text at right
blob
the doesnt go left, I tried hard
Marcus
@mjohnsonengr
Apr 24 2016 16:04
@mayur3086 Could you show me some code? Show me how you tried ti add the float:left?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:05
<div id="cycler" class="bottomImages">
<img class="active " style="float:left;" id="picOne" src="{% static 'img/phone1.png' %}" >
<img id="picTwo" style="float:left;" src="{% static 'img/phone2.png' %}" > </div>
Marcus
@mjohnsonengr
Apr 24 2016 16:08
So in the image you posted, the phone at the bottom that says "Going out simplified" should actually be up above?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:09
@mjohnsonengr No, the entire phone should be at left and then I have some text at right
Marcus
@mjohnsonengr
Apr 24 2016 16:10
Could you clarify what's not working then?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:10
@mjohnsonengr I want to phone to be at left, as you can see it's somewhere in the middle
@mjohnsonengr so how do I get it to left?
Marcus
@mjohnsonengr
Apr 24 2016 16:13
@mayur3086 Oh. I see. it sounds then like you want to use some CSS positioning then. Could you show me what CSS is already being applied to it?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:14
#cycler{position:relative;}
#cycler img{position:absolute;z-index:1}
#cycler img.active{z-index:3}
Marcus
@mjohnsonengr
Apr 24 2016 16:15
@mayur3086, @nsloc22 had the right idea from the start; you may need to use a Bootstrap row and add columns to it.
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:16
@mjohnsonengr using bootstrap cancels the fadein fadeout and displays my images directly into screen
Marcus
@mjohnsonengr
Apr 24 2016 16:17
Do you have this on codepen? It will certainly help if I could see a lot more context.
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:17
@mjohnsonengr Just a sec, i'll put it up on cp
@mayur3086 All the images are local, how do I put it up in codepen?
Bruce Young
@mutantspore
Apr 24 2016 16:20
@mayur3086 host them at http://postimage.org
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:21
@mutantspore thanks
CamperBot
@camperbot
Apr 24 2016 16:21
mayur3086 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1447 | @mutantspore | http://www.freecodecamp.com/mutantspore
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:35
@mjohnsonengr here it is http://codepen.io/mayur3086/pen/wGxLWN
@mjohnsonengr for some reason, the images don't appear
Bruce Young
@mutantspore
Apr 24 2016 16:39
@mayur3086 your url’s aren’t quite right. here is the proper URL for your Facebook image http://s31.postimg.org/x39rmu2af/facebook.png
Mayur Kulkarni
@maykulkarni
Apr 24 2016 16:41
@mutantspore gimme a moment i'll fix it
@mutantspore @mjohnsonengr i've fixed it, please recheck http://codepen.io/mayur3086/pen/wGxLWN
Dan Stockham
@DanStockham
Apr 24 2016 17:27
Any reason why openweather api is not pulling weather information? http://codepen.io/DanStockham/full/adNaZz/
Ken Haduch
@khaduch
Apr 24 2016 18:03
@DanStockham - there appears to be some data getting through because my location is being reported, and it looks like there is data being returned in the JSON data
Dan Stockham
@DanStockham
Apr 24 2016 18:04
@khaduch but the properties from the JSON object is not getting placed on the DOM?
JD Tadlock
@jdtdesigns
Apr 24 2016 18:05
@DanStockham Works fine for me
Ken Haduch
@khaduch
Apr 24 2016 18:06
Yes, the temperature is not being reported, but I can see the location. I'm trying to look at your code but I'm on a small computer screen so it's taking some time.
Ken Haduch
@khaduch
Apr 24 2016 18:13
@DanStockham - oh, I was a little confused about your view on the smaller screen, the temps were off the bottom of the screen. So it appears to be working... sorry for the misleading information.
Dan Stockham
@DanStockham
Apr 24 2016 18:14
@khaduch No it's fine, I thank you for taking the time to look at my code.
CamperBot
@camperbot
Apr 24 2016 18:14
danstockham sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star: 996 | @khaduch | http://www.freecodecamp.com/khaduch
Dan Stockham
@DanStockham
Apr 24 2016 18:14
I'm going to check on my linux machine and see if I have the same issue.
Ken Haduch
@khaduch
Apr 24 2016 18:15
@DanStockham - my only comment is that having the information on the screen where it is not immediately visible, did make me miss the fact that the output was there.
Dan Stockham
@DanStockham
Apr 24 2016 18:17
I checked my linux machine and I'm still not seeing the info.
I even tried to console.log the JSON object and I'm getting nothing.
Ken Haduch
@khaduch
Apr 24 2016 18:18
@DanStockham - and the responsive behavior is not good - I wonder how it would look on a mobile device?would look on a mobile device?
Dan Stockham
@DanStockham
Apr 24 2016 18:20
@khaduch I'm not so concerned about responsiveness right now as I am for it actually working.
Ken Haduch
@khaduch
Apr 24 2016 18:20
@DanStockham - one other thing, as I just went back and checked, the CodePen environment does not allow you to put the <html>, <head>and<body>` tags in the HTML panel. They provide that all in the template that is used to generate your page.
Arminas
@ArminasBek
Apr 24 2016 18:21
var streams = ["freecodecamp", "storbeck", "ogamingsc2", "comster404"];
var streamVal;
//Get info from Twitch.tv API
for (var i = 0; i < streams.length; i++) {
    $.getJSON('https://api.twitch.tv/kraken/channels/' + streams[i] +'?callback=?', function(data){
        //Check if user is online/offline
        if(data.status == null) {
            streamVal = "Offline";
            $("div.item").addClass("online");
        } else {
            streamVal = data.status;
        }
        //Check if user account available and display output
        if(data.status == 422) {
            streamVal = "Account is closed";
            $("div#data").append(data.message);
            }else {
            $("div#data").append("<div class='item'>" + data.display_name + ": " + " " + streamVal + "</div>")
            console.log(data);
            }
        })
    } //EOF for statement
Hello guys, I can’t understand why when i try to add class on line 9 on page refresh it adds whenever it wants ;/
Ken Haduch
@khaduch
Apr 24 2016 18:21
@DanStockham - yeah, I agree - first things first. It is working, and in the Chrome developer tools I can see the transaction and get the data from the response, so it definitely is working and displaying. I'm on a Windows 8 machine with Chrome.

@DanStockham - this is the data:

{coord: {lon: -72.5, lat: 41.58},…}
base
:
"cmc stations"
clouds
:
{all: 1}
cod
:
200
coord
:
{lon: -72.5, lat: 41.58}
dt
:
1461521080
id
:
4833387
main
:
{temp: 287.83, pressure: 1017, humidity: 24, temp_min: 285.15, temp_max: 289.82}
name
:
"East Hampton"
sys
:
{type: 1, id: 624, message: 0.0127, country: "US", sunrise: 1461491685, sunset: 1461541305}
weather
:
[{id: 800, main: "Clear", description: "clear sky", icon: "01d"}]
wind
:
{speed: 1.76, deg: 337.003}

As I'm seeing it.

except for formatting when I cut and paste from the browser tools window.
{"coord":{"lon":-72.5,"lat":41.58},"weather":[{"id":800,"main":"Clear","description":"clear sky","icon":"01d"}],"base":"cmc stations","main":{"temp":287.83,"pressure":1017,"humidity":24,"temp_min":285.15,"temp_max":289.82},"wind":{"speed":1.76,"deg":337.003},"clouds":{"all":1},"dt":1461521080,"sys":{"type":1,"id":624,"message":0.0127,"country":"US","sunrise":1461491685,"sunset":1461541305},"id":4833387,"name":"East Hampton","cod":200}
Dan Stockham
@DanStockham
Apr 24 2016 18:24
@khaduch I don't understand, why is it that other users can see the data but I'm not even getting the JSON file?
Ken Haduch
@khaduch
Apr 24 2016 18:24
@DanStockham are you familiar with the browser developer tools? You can see if there are errors in the transaction, etc.
very helpful.
Dan Stockham
@DanStockham
Apr 24 2016 18:25
@khaduch I already checked sources and network. Not even seeing a call being made.
There isn't any errors either.
Ken Haduch
@khaduch
Apr 24 2016 18:25
@DanStockham - here's one thing that maybe you have done, but I figured it was worth a check - have you enabled your browser to retrieve your location? Not sure if it would be causing you to see nothing?
Dan Stockham
@DanStockham
Apr 24 2016 18:27
@khaduch That's been checked.
Ken Haduch
@khaduch
Apr 24 2016 18:28
@DanStockham - hmmm... I wish I could see your screen and see what's going on!
Kartik Shah
@krtk6160
Apr 24 2016 18:59
Hey guys, how do I remove the extra whitespace at the right? Basically, get the web page to cover 100% of the width, no more. I've already applied container-fluid but it ain't working, it seems.
https://codepen.io/krtk6160/full/bpWJbe/
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 24 2016 19:03
@krtk6160 which part of the page are you talking about ??
Kartik Shah
@krtk6160
Apr 24 2016 19:04
@Mr-Kumar-Abhishek The whole page! It has horizontal scrolling, I do not want that.
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 24 2016 19:05
@krtk6160 Ah... I see.
Paul
@codepaulcode
Apr 24 2016 19:07
Hi, does anyone know how to resize and center an image in codepen. I'm on the first tribute page challenge and nothing i do seems to work. I've tried the html5/css/bootstrap taught.
Islam Ibakaev
@dagman
Apr 24 2016 19:07
@codepaulcode share your pen
Paul
@codepaulcode
Apr 24 2016 19:10
@dagman Not much to share. i've only add a title, subtitle, and a linked image. Nothing else at all but nothing i add works for me.
Kartik Shah
@krtk6160
Apr 24 2016 19:13
@Mr-Kumar-Abhishek Got it to work, simple tweak in the code.
Islam Ibakaev
@dagman
Apr 24 2016 19:13
@codepaulcode also if you use bootstrap u should add to your images class img-responsive in order for them to scale properly
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 24 2016 19:14
@krtk6160 yes, you only had to set the width of class parallax to 99%
Paul
@codepaulcode
Apr 24 2016 19:16
I've been trying the example from the fcc so far. None of them work for me. I must be missing something.
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 24 2016 19:16
could someone explain how to achieve a css blur effect ?? http://codepen.io/Mr-Kumar-Abhishek/pen/aNjWYd ??
with bootstrap ?
Islam Ibakaev
@dagman
Apr 24 2016 19:18
@Mr-Kumar-Abhishek you already did it in your pen, didnt u??
@Mr-Kumar-Abhishek you'de better use sass instead css

instead of writing this

  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url(#blur);
  filter: progid: DXImageTransform.Microsoft.Blur(PixelRadius='10');

you can import bourbon library in the top of sass folder and write this one line @include filter(blur(10px)); to achieve the same effect

Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 24 2016 19:27
@dagman Thanks a lot !! :D
CamperBot
@camperbot
Apr 24 2016 19:27
mr-kumar-abhishek sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:star: 433 | @dagman | http://www.freecodecamp.com/dagman
Paul
@codepaulcode
Apr 24 2016 19:35
@dagman Are we suppose to complete these projects using what is taught in fcc or are we just suppose to do it any old way we can find? Because so far i've just been going through fcc and nothing else.
João Alves
@JADSN
Apr 24 2016 19:40
Where i find the url and queryData for this:
var myUrl = "";

  $.ajax( {
    url: myUrl,
    data: queryData,
    dataType: 'json',
    type: 'POST',
    headers: { 'Api-User-Agent': 'Example/1.0' },
    success: function(data) {
       // do something with data
    }
} );
I'm try making a wikipedia viewer.
Islam Ibakaev
@dagman
Apr 24 2016 19:58
@codepaulcode what do u mean?
look at this portfolio guys http://codepen.io/dagman/full/WwKrgX/
Chris Shields
@Cshields88
Apr 24 2016 20:05
@JADSN i
João Alves
@JADSN
Apr 24 2016 20:06
@Cshields88 i ?
@Cshields88 I don't know how to find the url in the api wikipedia, to get what user typed.
Chris Shields
@Cshields88
Apr 24 2016 20:09
@JADSN I found this link useful for a udacity project I just finished using the Wikipedia api https://m.mediawiki.org/wiki/API:Main_page
João Alves
@JADSN
Apr 24 2016 20:12
@Cshields88 Ok, but how i get the remoteUrlWithOrigin, and queryData
// Using jQuery
$.ajax( {
    url: remoteUrlWithOrigin,
    data: queryData,
    dataType: 'json',
    type: 'POST',
    headers: { 'Api-User-Agent': 'Example/1.0' },
    success: function(data) {
       // do something with data
    }
} );
@Cshields88 In the success i want to show a list of results based typed user.
Chris Shields
@Cshields88
Apr 24 2016 20:15
@JADSN I'm not too sure on that ...if I remember right I saw that someone used an empty array to bring in the user input....I know it's different than what your talking about but if you wanted to look at how I set up my api you might be able to get an idea,
João Alves
@JADSN
Apr 24 2016 20:22
@Cshields88 Can you send me your codePen?
Chris Shields
@Cshields88
Apr 24 2016 20:34
@JADSN I only have it on github right now, sorry
Here is the link to the actual code though...it is in the allPlaces function https://github.com/Cshields88/Udacity-FEND-NeighborhoodMap/blob/master/js/app.js
Tien Anh Nguyen
@tienanh2007
Apr 24 2016 20:43
function turnX() {
for (var i = 1; i < 10; i++) {
$("#" + i).click(drawX);
if(oTurn)
break;
}
}function drawX() {
$(this).text("X");
xTurn = false;
oTurn = true;
}
does turnX break when drawX is called ?
willamgriffin
@willamgriffin
Apr 24 2016 20:44
ive been working on validating us phone numbers challenge and i'm stuck, ive even tried just googling for a regex to match but nothing seems to work.
Tien Anh Nguyen
@tienanh2007
Apr 24 2016 20:46
you could type help challengeName if you can't figure it out
willamgriffin
@willamgriffin
Apr 24 2016 20:46
help Validate US Telephone Numbers
CamperBot
@camperbot
Apr 24 2016 20:46

:point_right: algorithm validate us telephone numbers [wiki]

Problem Explanation:

  • The task is not that hard to understand, implementing it is the hardest part. You have a to validate an US phone number. This means there is a certain amount of numbers required, while you don't need to put the country code, you will still need the area code and use one of the few formats allowed.
:pencil: read more about algorithm validate us telephone numbers on the FCC Wiki
Mayur Kulkarni
@maykulkarni
Apr 24 2016 20:53
can anyone tell me why my navbar-collapse isnt working : http://codepen.io/mayur3086/pen/jqpjgr?editors=1010
Branislav Bugarcic
@BBugarcic
Apr 24 2016 20:55
@mayur3086 You have to add bootstrap in setings in Javascript
Mayur Kulkarni
@maykulkarni
Apr 24 2016 20:56
@BBugarcic I have already added in CSS->add external css
should I add it in JavaScript too?
Branislav Bugarcic
@BBugarcic
Apr 24 2016 20:56
Yes
Mayur Kulkarni
@maykulkarni
Apr 24 2016 20:57
@BBugarcic It still doesnt work
@BBugarcic when you narrow down the webpage, those 4 lines appear in the top right corner, when I click them I should have my menu
Frank XC
@tenkdayz
Apr 24 2016 20:58
@mayur3086 you need jquery.
Mayur Kulkarni
@maykulkarni
Apr 24 2016 20:58
@tenkdayz Added it already
Islam Ibakaev
@dagman
Apr 24 2016 21:01
@mayur3086 add jquery BEFORE bootstrap.js
:smile:
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:02
@dagman it works!
@dagman geez I never knew the order mattered too
Islam Ibakaev
@dagman
Apr 24 2016 21:03
@mayur3086 yw
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:03
@dagman in what order should I place things?
@dagman so that I don't get stuck next time
Islam Ibakaev
@dagman
Apr 24 2016 21:03
@mayur3086 which things?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:04
@dagman the links to jquery, bootstrap etc.
Islam Ibakaev
@dagman
Apr 24 2016 21:04
jquery first and then bootstrap
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:04
@dagman and in the CSS section?
Islam Ibakaev
@dagman
Apr 24 2016 21:04
in css just add bootstap.css
as u have it right now
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:05
@dagman ok thanks :)
CamperBot
@camperbot
Apr 24 2016 21:05
mayur3086 sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:star: 434 | @dagman | http://www.freecodecamp.com/dagman
EmmanuelAremu
@OhManny
Apr 24 2016 21:05
In the Front End, Build a Personal Portfolio Webpage challenge I can't seem to get this image to display. Is there something wrong with my code:<!-- Header -->
<header>
<div class="container">
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="img/portfolio/Manny.jpg" alt="Emmanuel Aremu">
<div class="intro-text">
<span class="name">Welcome</span>
<hr class="star-light">
<span class="skills">Front End Developer (in-training) - Online Marketer - Podcaster</span>
</div>
</div>
</div>
</div>
Stephen James
@sjames1958gm
Apr 24 2016 21:06
@OhManny Are you hosting your webpage personally?
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:06
@OhManny I'm on the same challenge too!
@OhManny this is the tutorial : https://www.youtube.com/watch?v=e6VYRVRoC40
EmmanuelAremu
@OhManny
Apr 24 2016 21:07
@sjames1958gm hosting on CodePen
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:07
@OhManny Then you should upload you images and then add a link there
Stephen James
@sjames1958gm
Apr 24 2016 21:07
@OhManny Your image is a relative URL, I don't think codepen will host your images.
Islam Ibakaev
@dagman
Apr 24 2016 21:08
@sjames1958gm yo man what about my portfolio?http://codepen.io/dagman/full/WwKrgX/
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:08
@OhManny use postimg.org to upload your images and then click the "get direct link" and then paste the link there in your code
Stephen James
@sjames1958gm
Apr 24 2016 21:09
@dagman Cool looking, text is a bit big. :) Looks like you have a p tag loose in your code.
Islam Ibakaev
@dagman
Apr 24 2016 21:10
@sjames1958gm i don't have p tags at all :worried:
Ashleigh Irwin
@airwin1391
Apr 24 2016 21:11
Hi , would anyone be able to help me out? I made a webpage for the first challenge and also just to demonstrate what I can do, something to add to my portfolio. I used the code editor Atom to write it and I now have it on Github, but is there any way to transfer the code straight from github to codepen so it can be viewed? I don't really understand how codepen works yet. And also the images are located on my desktop so how do I make the page look the way its supposed to, how I can see it?
EmmanuelAremu
@OhManny
Apr 24 2016 21:16
Great it worked thanks @mayur3086 @dagman @sjames1958gm
CamperBot
@camperbot
Apr 24 2016 21:16
ohmanny sends brownie points to @mayur3086 and @dagman and @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star: 435 | @dagman | http://www.freecodecamp.com/dagman
:star: 788 | @sjames1958gm | http://www.freecodecamp.com/sjames1958gm
:star: 131 | @mayur3086 | http://www.freecodecamp.com/mayur3086
Simon Jacobs
@SimonJacobsTLD
Apr 24 2016 21:17
Anyone who can help me? How do I get the names of the 'offline streams' and the 'closed streams'? I did get the names of the 'offline streams' but not in the nicest way possible.
http://codepen.io/SimonJacobs/pen/JXBQBM?editors=0010
Mayur Kulkarni
@maykulkarni
Apr 24 2016 21:22
Hi guys I want the "my idol favo guitarist and company" equally spaced. How do I do it?
http://codepen.io/mayur3086/pen/jqpjgr?editors=1010
42void
@42void
Apr 24 2016 21:23
hi everybody I'm on "Build a Tribute Page" and I was wondering how we are supposed to properly add the image caption ?
Simon Jacobs
@SimonJacobsTLD
Apr 24 2016 21:24
Never mind, got it!
42void
@42void
Apr 24 2016 21:24
first, have you used class="img-thumbnail" from bootstrap?
Ashleigh Irwin
@airwin1391
Apr 24 2016 22:04
Hi would anyone be able to help? I created a modal window and it works on my local device but it doesn’t work on codepen for some reason, would anyone know why? The code for my modal window is below and I’m using bootstrap.
<div class="modal fade" id="coffitivityModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4>Want to boost your productivity?</h4>
            </div>
            <div class="modal-body">
                <p>Get the coffee shop vibe without having to leave your house or office.</p>
                <p>According to a scientific research from the University of Chicago, "A moderate level of
                    ambient noise is conducive to creative cognition."</p>
                <p>This means being a tiny bit distracted helps you be more creative and productive.</p>
                <br>
                <p><strong>Check it out!</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default coffitivity-button center-block"><a href="https://coffitivity.com/" target="blank"><img class="img-responsive" src="img/coffitivity-logo.png"></a></button>

            </div>
        </div>
    </div>
</div>
Stuart Taylor
@Bouncey
Apr 24 2016 22:25

Why can't I get the stringified JSON in $('.message') or in the console.log()?

$.getJSON("api.openweathermap.org/data/2.5/weather?lat....long...APPID=...", function(json) { 
$(".message").html(JSON.stringify(json)); 
});

Am i doing the .getJSON wrong?
any help much appreciated

everything else in my js code is either working or commented out
Coira Ellison
@Coira
Apr 24 2016 22:27
@Bouncey do you have any errors in the console? do you have // in front of api.etc ?
Stuart Taylor
@Bouncey
Apr 24 2016 22:29
@Coira lots of too much recursion and its pointing at .proxy/i() but I dont haave anything like that in my code

i have the

if (navigator.geolocation)

from the json and api tutorial

and i have a load of variables set but commented out
Coira Ellison
@Coira
Apr 24 2016 22:31
i'm gonna have to see the whole thing, i don't know what that error's going to be about
Coira Ellison
@Coira
Apr 24 2016 22:38
@Bouncey i don't get any recursion errors
Stuart Taylor
@Bouncey
Apr 24 2016 22:41
I got it, I didn't have http:// in the url, so it was sending the request to codepen
thanks for having a look though
Coira Ellison
@Coira
Apr 24 2016 22:42
ah, great, is it working for you now? i'm getting a failed to start loading error
Yahya Gilany
@Ygilany
Apr 24 2016 22:54
Hey guys I'm having an issue with codepen .. my code works perfectly fine locally on my machine but doesn't work on codepen.. does anyone have an idea why is that happening ?
This is my codepen page
Stuart Taylor
@Bouncey
Apr 24 2016 23:07
@Coira I got the stringified JSON to the browser and in the console, but I still cant populate my var's with the data.
Im going to be now though, Ill have another go tomorrow
Gilbert Smith
@GJSmith3rd
Apr 24 2016 23:12
@Ygilany You still in chat?
Yahya Gilany
@Ygilany
Apr 24 2016 23:19
@GJSmith3rd yes I'm here
I also tried to console print the data that comes from the Api it looks totally different. In fact, it doesn't get what I'm expecting at all
Rex Smith Jr.
@rsmith731
Apr 24 2016 23:29
anyone familiar with the command line?
Kevin
@KevinBruland
Apr 24 2016 23:32
I have a div that is exactly 446 pixels wide, including 3px padding on the right and the left... inside I have rows of 11 boxes with 40 width... there is an extremely small white space on the right side of this grid that I can't figure out
sadlyj
@sadlyj
Apr 24 2016 23:48
I have a question. For the front end project that's asking you to make a codepen.io app, is it expecting you to buy a membership on code pen? I have been using brackets and I don't see why I would need to pay for that.
Don Price
@KingHippo
Apr 24 2016 23:50
@sadlyj you can use the free version.
I think that's what most people are doing
sadlyj
@sadlyj
Apr 24 2016 23:51
@KingHippo Okay, I appreciate the response. Thnanks!
Thanks*
Don Price
@KingHippo
Apr 24 2016 23:51
no problem!