These are chat archives for FreeCodeCamp/HelpFrontEnd

11th
Jan 2017
jay397
@jay397
Jan 11 2017 00:03
accidentally remove the bootstrap, im so dumb
Alan Sato
@Halfcreative
Jan 11 2017 00:20
https://codepen.io/halfcreative/pen/MJaBvX?editors=1010 I must have set up my link for the random button wrong, could someone tell me where i screwed up?
Calvyn
@youdoronronron
Jan 11 2017 00:22
Hi guys can anyone help? As soo as i give my navbar the clas of navbar-fixed-top, it removes my h2 directly beneath it. Any ideas?
<nav class="navbar navbar-default" style="background-color: rgb(147, 44, 44);">
<div class="container-fluid">

<!--Logo-->
<div class="navbar-header">
<a href="#" class="navbar-brand" style="font-family: Fredericka the Great; font-size: 30px">John Johnson Portfolio</a>

</div>

<!--Menu Items-->
<div>

<ul class="nav navbar-nav navbar-right col-lg-3 col-md-6 col-sm-12 col-xs-12" style="font-family: Fredericka the Great;">
<li><a href="#">About</a><li>
<li><a href="#">Portfolio</a><li>
<li><a href="#">Contact</a><li>

</ul>
</div>
</div>
</nav>
    <div class="container" style="font-family: Reenie Beanie">
      <h2>"Some kind of profound quote"  - John Johnson</h2>
    </div>
when i add in the class navbar-fixed-top to the nav element, it removes the h2 element beneath
Hello911
@Hello911
Jan 11 2017 00:35
I found this linkedin picture for my button http://www.tressarandolph.com/images/linkedin-icon.png but I want it to be in gold. How can I do that?
Alan Sato
@Halfcreative
Jan 11 2017 00:36
@Hello911 if you want the picture in gold you're going to have to edit the picture yourself. otherwise you maybe try using the font awesome font for Linkedin and color that gold
max77p
@max77p
Jan 11 2017 00:37
hi guys can someone help me with the correct format to this?
      $(".off").append('<img id='mainImg' src=data.stream.channel.logo />');
Alan Sato
@Halfcreative
Jan 11 2017 00:38
      $(".off").append("<img id='"+mainImg+"' src="+data.stream.channel.logo"+/>");
if data.stream.channel.logo is a variable
@max77p
max77p
@max77p
Jan 11 2017 00:39
@Halfcreative ohh ok that makes sense. thank you!
CamperBot
@camperbot
Jan 11 2017 00:39
max77p sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @halfcreative |http://www.freecodecamp.com/halfcreative
max77p
@max77p
Jan 11 2017 00:41
@Halfcreative why did you put the + besides mainimg though?
Alan Sato
@Halfcreative
Jan 11 2017 00:42
if mainImg is a string variable of the image url, then you are using the + before and after to connect the strings "<img id=' " and the main image url, and the remaining string
.append just adds those strings in as HTML
max77p
@max77p
Jan 11 2017 00:43
$.getJSON('https://api.twitch.tv/kraken/streams/' + twitch + '?client_id=lc44lbut5wgbd7nh03j6w5xow1xs7kq', function(data) {
    if (data.stream !== null) {
      forOnline(data.stream.channel.logo, data.stream.channel.status);

      function forOnline(img, description) {
        $(".off").append("<img id='"+mainImg+"' src="+data.stream.channel.logo" + />");
so this is not working though
Alan Sato
@Halfcreative
Jan 11 2017 00:46
$(".off").append("<img id='mainImg' src="+data.stream.channel.logo + "/>");
my bad, mainImg was a class
@max77p i mean id
max77p
@max77p
Jan 11 2017 00:47
is your above code missing one "?
Alan Sato
@Halfcreative
Jan 11 2017 00:48
$(".off").append("<img id='mainImg' src='"+data.stream.channel.logo + "'/>");
@max77p this should work better
@max77p I just started the same project, but if i remember the formatting correctly that specific line should look like that
max77p
@max77p
Jan 11 2017 00:51
@Halfcreative ok perfect that does work thanks!
CamperBot
@camperbot
Jan 11 2017 00:51
:warning: max77p already gave halfcreative points
max77p sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
Alan Sato
@Halfcreative
Jan 11 2017 00:51
@max77p no problem, thanks for coding with me!
CamperBot
@camperbot
Jan 11 2017 00:51
:cookie: 340 | @max77p |http://www.freecodecamp.com/max77p
halfcreative sends brownie points to @max77p :sparkles: :thumbsup: :sparkles:
Joe Escobedo
@joeEscob1023
Jan 11 2017 00:53
can you guys review my portfolio page? I've gotten come review on it already, but more never hurts!
Alan Sato
@Halfcreative
Jan 11 2017 00:54
@TacoJoe of course
its kinda smudged together on smaller screens :l
i used @media all and (min-width: 469px); but i dont think that helped
Alan Sato
@Halfcreative
Jan 11 2017 00:57
It looks great! I like the font choice for the buttons
Joe Escobedo
@joeEscob1023
Jan 11 2017 00:58
thank you! @Halfcreative
CamperBot
@camperbot
Jan 11 2017 00:58
tacojoe sends brownie points to @halfcreative :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @halfcreative |http://www.freecodecamp.com/halfcreative
Joe Escobedo
@joeEscob1023
Jan 11 2017 00:59
some people have said it just too many icons, but I like the way it looks!
Daniel
@DanJP2016
Jan 11 2017 01:02
I am working on the weather app project and I was wondering if someone could run it real fast and see if it is working correctly so far. would appreciate it.
http://codepen.io/bones211/full/xgZpmE/
Joe Escobedo
@joeEscob1023
Jan 11 2017 01:03
@DanJP2016 nothing shows up
either that or its taking time for it to load
Daniel
@DanJP2016
Jan 11 2017 01:05
@TacoJoe i was afraid of that. It is working when running in my browser from the files on my desktop. Thanks for looking at it i will see if I can figure out the problem.
CamperBot
@camperbot
Jan 11 2017 01:05
danjp2016 sends brownie points to @tacojoe :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @tacojoe |http://www.freecodecamp.com/tacojoe
Joe Escobedo
@joeEscob1023
Jan 11 2017 01:05
@DanJP2016 good luck! Hopefully it turns out to your liking, id like to see it for sure!
sravishankar10
@sravishankar10
Jan 11 2017 01:07
I'm sorry to everyone if this is a dumb question, but I'm starting to move into larger coding projects, and it says "use whichever libraries you need". What does that mean?
Daniel
@DanJP2016
Jan 11 2017 01:07
thanks, hopefully it wont take too much longer to finish it.
@sravishankar10 they mean use which ever libraries you need or want to use for the project, like jquery, bootstrap, foundation, or animation libraries like animate.css.
sravishankar10
@sravishankar10
Jan 11 2017 01:22
@DanJP2016 thanks! My mind's like a colander right now.
CamperBot
@camperbot
Jan 11 2017 01:22
sravishankar10 sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for danjp2016
Jorge Andrade
@jacandrade
Jan 11 2017 01:28
sup everyone, I got a newbie question. So i got this div with a row class and two different sized responsive columns in it. In the larger column i have a div (for main-content) and inside this div i got two other divs, one for the content and one for buttons that will update the content. What i want and haven't been able to do yet is to center the two divs(for the content and the button holder) in relation to the parent container div. I have tried align-items center and justify-content center but with no results. Any tips?
the blue div is the container. I want to center the front/back content (later will be a flipper) and the button group
Sam
@Samwise12
Jan 11 2017 01:39
Question: How do I send an array such as ['a','b'] to a mongodb using a form and then get that array back from mongodb?
Jorge Andrade
@jacandrade
Jan 11 2017 01:44
@TacoJoe tx man, somehow it's not working :(
CamperBot
@camperbot
Jan 11 2017 01:44
jacandrade sends brownie points to @tacojoe :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @tacojoe |http://www.freecodecamp.com/tacojoe
Jorge Andrade
@jacandrade
Jan 11 2017 01:45
@TacoJoe it might be because the insider are divs, which are inline elements
Lindsey
@sanguineseraphine
Jan 11 2017 01:51
@jacandrade try this site: http://getbootstrap.com/css/
breez803
@breez803
Jan 11 2017 01:51
can anyone tell me whats wrong here. its not allowing codepen to pull the info https://codepen.io/breez803/pen/PWPdje?editors=0010
what am i doing wrong that the offline images are pushed right a bit?
its not lining up
max77p
@max77p
Jan 11 2017 02:00
nevermind i figured it out! @Halfcreative
Jorge Andrade
@jacandrade
Jan 11 2017 02:00
@sanguineseraphine lol, that was my first go. Funny, I actually managed to get center, however when I add a CSS rule of width: 100% or add content to the container div, all children go back to default inline display :/
Daniel
@DanJP2016
Jan 11 2017 02:01
i think i got this fixed. would someone mind checking it and seeing if it is working correctly for you? thanks.
https://codepen.io/bones211/full/xgZpmE/
Jorge Andrade
@jacandrade
Jan 11 2017 02:02
@DanJP2016 still nothing for me
@DanJP2016 but if i open in code pen i can see some stuff
@DanJP2016 the api is working for sure, got my location alright
Daniel
@DanJP2016
Jan 11 2017 02:03
but its not showing the weather?
Jorge Andrade
@jacandrade
Jan 11 2017 02:05
@DanJP2016 I see the problem
@DanJP2016 if i open full screen view it works fine, i see everithing normal
Capture.PNG
Daniel
@DanJP2016
Jan 11 2017 02:08
@jacandrade awesome thank you. is it only working in that view though?
CamperBot
@camperbot
Jan 11 2017 02:08
danjp2016 sends brownie points to @jacandrade :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @jacandrade |http://www.freecodecamp.com/jacandrade
JD Tadlock
@jdtdesigns
Jan 11 2017 02:08
@DanJP2016 You can't load codepen over https and request through http
It's not working due to a 'Mixed Content' error
Daniel
@DanJP2016
Jan 11 2017 02:10
@jdtdesigns ok, so the link to codepen has to be http to match whats in the code?
JD Tadlock
@jdtdesigns
Jan 11 2017 02:10
@DanJP2016 Yes
Jorge Andrade
@jacandrade
Jan 11 2017 02:10
@DanJP2016 but if i open on a smaller screen its not responsive
JD Tadlock
@jdtdesigns
Jan 11 2017 02:10
and then it should work fine
Daniel
@DanJP2016
Jan 11 2017 02:10
@jdtdesigns awesome thank you.
CamperBot
@camperbot
Jan 11 2017 02:10
danjp2016 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 832 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Jorge Andrade
@jacandrade
Jan 11 2017 02:10
Capture2.JPG
Daniel
@DanJP2016
Jan 11 2017 02:11
@jacandrade yeah i'm not done with it yet, was working out the javascript code.
Jorge Andrade
@jacandrade
Jan 11 2017 02:11
@DanJP2016 thats why people could see it... if you open in a smaller screen it goes weird
JD Tadlock
@jdtdesigns
Jan 11 2017 02:11
@DanJP2016 @jacandrade It's not responsive because the #info-box has a fixed width. Use a percentage width instead
Daniel
@DanJP2016
Jan 11 2017 02:13
@jdtdesigns yeah im gonna rewrite the whole thing, just prototyping out the javascript for it right now. had a hard time getting the hang of the callback functions. tricky stuff
breez803
@breez803
Jan 11 2017 02:13
@jdtdesigns https://codepen.io/breez803/pen/PWPdje?editors=0010 i still cannot see what i am doing wrong. its denying codepen access
Daniel
@DanJP2016
Jan 11 2017 02:14
here is the http link to it. is it working now, or still the same problem?
http://codepen.io/bones211/pen/xgZpmE?editors=0010
JD Tadlock
@jdtdesigns
Jan 11 2017 02:14
@breez803
$.getJSON(url, function(json) {
      name = json.location.name;

      // should go here
    });console.log(name); // move this
 });
@DanJP2016 Works fine ;)
Daniel
@DanJP2016
Jan 11 2017 02:16
awesome. thank you for the help.
JD Tadlock
@jdtdesigns
Jan 11 2017 02:16
welcome
breez803
@breez803
Jan 11 2017 02:17
thanks @jdtdesigns
CamperBot
@camperbot
Jan 11 2017 02:17
breez803 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 833 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 11 2017 02:18
@breez803 Welcome ;)
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:18
I have set up an http GET service, and in the url, I need to pass an array of strings one at a time. how do I do that? I know that for and forEach won' t work.
Jorge Andrade
@jacandrade
Jan 11 2017 02:19
@breez803 i got this console message when runnig your code:
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
(anonymous) @ pen.js:6
JD Tadlock
@jdtdesigns
Jan 11 2017 02:21
@relentless-coder You need to make multiple GET's?
breez803
@breez803
Jan 11 2017 02:21
@jacandrade yeah. i forgot to switch my codepen to https. thanks tho
CamperBot
@camperbot
Jan 11 2017 02:21
breez803 sends brownie points to @jacandrade :sparkles: :thumbsup: :sparkles:
:cookie: 125 | @jacandrade |http://www.freecodecamp.com/jacandrade
Jorge Andrade
@jacandrade
Jan 11 2017 02:21
@breez803 no probs
well guys, i think i'm done for tday, peace to you all and happy coding
Daniel
@DanJP2016
Jan 11 2017 02:23
@jacandrade take it easy man, and thanks for the help.
CamperBot
@camperbot
Jan 11 2017 02:23
danjp2016 sends brownie points to @jacandrade :sparkles: :thumbsup: :sparkles:
:warning: danjp2016 already gave jacandrade points
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:26

@jdtdesigns yes for example

$scope.arr = ["a", "b", "c"];
$scope.sampleData = function(){
for(var i = 0; i < $scope.arr.length; i++){
var el = $scope.arr[i];
 $http.get('some url' +el ).then(function(data){});

so, as of now, it is only returning data for the last element in the array.

JD Tadlock
@jdtdesigns
Jan 11 2017 02:26
@relentless-coder Here's an example of mapping through an array of strings and running a get on each one. http://jsbin.com/xiyebe/edit?js,console
don't use for loops for multiple requests
it won't run cleanly due to some clocking issues
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:28
okay so, I should use a map. let me try.
JD Tadlock
@jdtdesigns
Jan 11 2017 02:28
use a more async iterator like map
Robert
@SovereignRob1
Jan 11 2017 02:29
@jdtdesigns im just now seeing what you made last night to help me. Thanks big time. I also realize i have a lot of learning to do. As i dont even understand most of what is in there. Which is great because i love learning this stuff
CamperBot
@camperbot
Jan 11 2017 02:29
sovereignrob1 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 834 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 11 2017 02:30
@SovereignRob1 A reason i put so much commenting in there for you ;)
Robert
@SovereignRob1
Jan 11 2017 02:30
im going to study that for sure. That is a huge help
breez803
@breez803
Jan 11 2017 02:30
@jdtdesigns i cant wait to be at your level of this
JD Tadlock
@jdtdesigns
Jan 11 2017 02:30
I'm 8 years in @breez803
Robert
@SovereignRob1
Jan 11 2017 02:30
hey @breez803 , hows it going?
JD Tadlock
@jdtdesigns
Jan 11 2017 02:30
and i still feel like a noob all the time :P
Robert
@SovereignRob1
Jan 11 2017 02:31
god, if you feel like a noob then i feel like protoplasm or something. lol
JD Tadlock
@jdtdesigns
Jan 11 2017 02:31
lol
@SovereignRob1 CSS is pretty expansive now. It can years alone to master.
breez803
@breez803
Jan 11 2017 02:32
@SovereignRob1 its going lol. hopefully i can figure out the rest of this app and move on to the next. how bout you?
JD Tadlock
@jdtdesigns
Jan 11 2017 02:32
That's why there's jobs just for css experts out there
Robert
@SovereignRob1
Jan 11 2017 02:32
yeah. ive never even seen <section> yet
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:32
@jdtdesigns it didn't work. It printed the last string three times.
JD Tadlock
@jdtdesigns
Jan 11 2017 02:33
@relentless-coder Post your code
Robert
@SovereignRob1
Jan 11 2017 02:33
@breez803 oh not bad. Apparently about to start over on my portfolio. lol
breez803
@breez803
Jan 11 2017 02:34
@SovereignRob1 been there, done that, and might be doing it again lol
JD Tadlock
@jdtdesigns
Jan 11 2017 02:34
I made this the other day for somebody just for fun. You can get an idea of what css can do. ;) http://frostedcaribou.com/
@SovereignRob1 @breez803
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:34
@jdtdesigns
  $scope.sampleData = function() {
    $scope.sampleArtist.map(function(el){
      $http.get('https://api.spotify.com/v1/search?type=artist&q='+el).then(function(data) {
        console.log(data);
              $scope.artist.name = data.data.artists.items[0].name;
              $scope.artist.popularity = data.data.artists.items[0].popularity;
        $http.get('https://api.spotify.com/v1/artists/'+ data.data.artists.items[0].id +'/top-tracks?country=SE').then(function(response) {
  $scope.artist.tracks = response.data.tracks;
  $scope.artists.push($scope.artist);
        })
      })
      $scope.artist = {};
    })
  }
  $scope.sampleData();
breez803
@breez803
Jan 11 2017 02:36
@jdtdesigns NICE. thats the stuff I want to be able to do. was that just css or some javascript too?
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:36

@jdtdesigns

$scope.sampleArtist = ["Stevn Wilson", "Slipknot", "Dream Theater", "Deep Purple"];

this is the array, and the data is printed three times for "Deep Purple" and I am receiving one error in the console.

TypeError: Cannot read property 'name' of undefined
    at http://127.0.0.1:3000/assets/js/app.js:31:62
    at http://127.0.0.1:3000/bower_components/angular/angular.min.js:133:460
    at m.$eval (http://127.0.0.1:3000/bower_components/angular/angular.min.js:147:313)
    at m.$digest (http://127.0.0.1:3000/bower_components/angular/angular.min.js:144:421)
    at m.$apply (http://127.0.0.1:3000/bower_components/angular/angular.min.js:148:78)
    at l (http://127.0.0.1:3000/bower_components/angular/angular.min.js:101:89)
    at XMLHttpRequest.t.onload (http://127.0.0.1:3000/bower_components/angular/angular.min.js:106:489) Possibly unhandled rejection: {}
Robert
@SovereignRob1
Jan 11 2017 02:36
@jdtdesigns thats awesome. exactly what i want to learn to do
JD Tadlock
@jdtdesigns
Jan 11 2017 02:38
@relentless-coder Try seperating your two requests
create a local function or global that will fire after the first request is done
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:39
@jdtdesigns so it will fire within the then?
JD Tadlock
@jdtdesigns
Jan 11 2017 02:39
The problem is the first request doesn't finish sometimes before the second finishes
that's just the asychronous data way
So you have to make sure the first request has received the data before running the next
make sense?
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:40
yes, that does make sense. so the first request goes like $http.get('some url').then(a callback function)?? is that right?
or should store the data received from the first request in a variable and then use that variable in a separate get request?
JD Tadlock
@jdtdesigns
Jan 11 2017 02:43
 $scope.sampleData = function() {
  var output;
    $scope.sampleArtist.map(function(el){
      $http.get('https://api.spotify.com/v1/search?type=artist&q='+el).then(function(data) {
        console.log(data);
              $scope.artist.name = data.data.artists.items[0].name;
              $scope.artist.popularity = data.data.artists.items[0].popularity;
        output = data;

      }).then(function() {
          $http.get('https://api.spotify.com/v1/artists/'+ output.data.artists.items[0].id +'/top-tracks?country=SE').then(function(response) {
             $scope.artist.tracks = response.data.tracks;
             $scope.artists.push($scope.artist);
             $scope.artist = {};
        })
      })

    })
  }
  $scope.sampleData();
something like that @relentless-coder
sorry, that
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:44
okay let me try that.
JD Tadlock
@jdtdesigns
Jan 11 2017 02:49
@relentless-coder I also moved the $scope.artist reset inside the second request at the end
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:52

@jdtdesigns

  $scope.sampleData = function() {
    var output;
    $scope.sampleArtist.map(function(el){
      $http.get('https://api.spotify.com/v1/search?type=artist&q='+el).then(function(data) {
        console.log(data);
        output = data;
              $scope.artist.name = data.data.artists.items[0].name;
              $scope.artist.popularity = data.data.artists.items[0].popularity;
            }).then(function(){
              $http.get('https://api.spotify.com/v1/artists/'+ output.data.artists.items[0].id +'/top-tracks?country=SE').then(function(response) {
        $scope.artist.tracks = response.data.tracks;
        $scope.artists.push($scope.artist);
        $scope.artist = {};
              })
            })
      })
    }

this is what my code is as of now

blob
and this is what I have on my screen
JD Tadlock
@jdtdesigns
Jan 11 2017 02:54
@relentless-coder Just looks like your calling the artists.items[0].name wrong
console artists.items and show me that if you don't mind
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:55
@jdtdesigns here
blob
JD Tadlock
@jdtdesigns
Jan 11 2017 02:56
@relentless-coder Expand the data object so i can see what it looks like
Ayush Bahuguna
@relentless-coder
Jan 11 2017 02:57
blob
JD Tadlock
@jdtdesigns
Jan 11 2017 02:58
give me a sec
JD Tadlock
@jdtdesigns
Jan 11 2017 03:04
@relentless-coder data.data needs to be just data.artists
also, some of the item objects don't have names
that's why it's throwing an error
it's not the name
it's the object [0] itself
some of the arrays don't have any data
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:09
but, when I manually enter the data using the field in the top, i can get the data displayed perfectly. also, data that http returns is an object, which contains the property data, so it should be data.data
AstralWoof
@AstralWoof
Jan 11 2017 03:09
can some one help me to get my freecodecamp anchor to workhttps://codepen.io/NovaPaw/pen/MJYxGd
Daniel
@DanJP2016
Jan 11 2017 03:13
@AstralWoof you need to add target = "_blank" to your anchor tag. that should fix it.
JD Tadlock
@jdtdesigns
Jan 11 2017 03:16
@relentless-coder Here's the same thing with jQuery. Yeah, angular returns a data object so that's right for your code.
AstralWoof
@AstralWoof
Jan 11 2017 03:16
@DanJP2016 thanks
CamperBot
@camperbot
Jan 11 2017 03:16
astralwoof sends brownie points to @danjp2016 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for danjp2016
JD Tadlock
@jdtdesigns
Jan 11 2017 03:17
@relentless-coder You just need to make sure the artist is actually there. It returns null sometimes due to it not matching i'm guessing.
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:18
but when I add the strings in the array manually it displays the data correctly.
JD Tadlock
@jdtdesigns
Jan 11 2017 03:19
@relentless-coder Is it supposed to be 'Stevn Wilson'?
i changed it to Steven and got all the matches ;)
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:20
that I fixed, but it is displaying name and popularity of just one.
JD Tadlock
@jdtdesigns
Jan 11 2017 03:22
@relentless-coder Prints multiples with my code
make sure to run the if checks
oh wait
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:22
  $scope.sampleData = function() {
    var output;
    $scope.sampleArtist.map(function(el){
      $http.get('https://api.spotify.com/v1/search?type=artist&q='+el).then(function(data) {
        console.log(data);
        output = data;
              console.log(data.data.artists.items[0].name);
              $scope.artist.name = data.data.artists.items[0].name;
              $scope.artist.popularity = data.data.artists.items[0].popularity;
            }).then(function(){
              $http.get('https://api.spotify.com/v1/artists/'+ output.data.artists.items[0].id +'/top-tracks?country=SE').then(function(response) {
        $scope.artist.tracks = response.data.tracks;
        $scope.artists.push($scope.artist);
        $scope.artist = {};
              })
            })
      })
    }
this is my code
JD Tadlock
@jdtdesigns
Jan 11 2017 03:23
i see now
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:25
i think each time we do the callback the name and popularity get overwritten, but how do I fix it?
JD Tadlock
@jdtdesigns
Jan 11 2017 03:25
working on it now
breez803
@breez803
Jan 11 2017 03:27
@jdtdesigns with the apixu api, do you know if "is day" is always 0 or 1
JD Tadlock
@jdtdesigns
Jan 11 2017 03:33
@relentless-coder Ah hah! http://jsbin.com/jecuhaz/edit?js,console
@breez803 I believe it's 0 when the current location night is in effect and 1 when it's day
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:36
@jdtdesigns what?
JD Tadlock
@jdtdesigns
Jan 11 2017 03:37
create the empty artist object inside the first request
then send that object to the addArtist function
then from in there you add the tracks and push it to the artists array
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:41
didn't work, it's display name and property for artists at random
JD Tadlock
@jdtdesigns
Jan 11 2017 03:41
post your code again
worked fine on mine
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:43
  $scope.sampleData = function() {
    var output;
    $scope.sampleArtist.map(function(el){
      $http.get('https://api.spotify.com/v1/search?type=artist&q='+el).then(function(data) {
        $scope.artist = {};
        console.log(data);
        output = data;
              console.log(data.data.artists.items[0].name);
              $scope.artist.name = data.data.artists.items[0].name;
              $scope.artist.popularity = data.data.artists.items[0].popularity;
            }).then(function(){
              $http.get('https://api.spotify.com/v1/artists/'+ output.data.artists.items[0].id +'/top-tracks?country=SE').then(function(response) {
        $scope.artist.tracks = response.data.tracks;
        $scope.artists.push($scope.artist);
        $scope.artist = {};
              })

            })

      })
    }
JD Tadlock
@jdtdesigns
Jan 11 2017 03:47
$scope.sampleData = function() {

  var addArtist = function(data, artist) {
    $http.get('https://api.spotify.com/v1/artists/'+ data.data.artists.items[0].id +'/top-tracks?country=SE')
    .then(function(response) {
      artist.tracks = response.data.tracks;
      $scope.artists.push(artist);
    })
  };

  $scope.sampleArtist.map(function(el){
    $http.get('https://api.spotify.com/v1/search?type=artist&q='+el)
    .then(function(data) {
      var artist = {};

      artist.name = data.data.artists.items[0].name;
      artist.popularity = data.data.artists.items[0].popularity;

      addArtist(data, artist);
    })
  })
}
@relentless-coder
Ayush Bahuguna
@relentless-coder
Jan 11 2017 03:50
yes. it worked. can you explain what happened?
JD Tadlock
@jdtdesigns
Jan 11 2017 03:52
@relentless-coder It was due to async issues. It was not saving the new object each time because the .map() was just pushing the same object over and over.
So I just split the two requests up strictly to make sure our first request data was always sent and then set.
Because the artist can't be anything but the data object we set when we are sending it directly from the first request to the function.
It's basically how you break down to the foundation with async
when all else fails, we implicitly declare the data
Phillip
@psnider22
Jan 11 2017 04:02
anyone use ajax for the twitch challenge? I cant seem to get it to work... http://codepen.io/psnider22/full/LxGddK/
JD Tadlock
@jdtdesigns
Jan 11 2017 04:17
@psnider22 You'll need to use a different image host like postimage.org
Phillip
@psnider22
Jan 11 2017 04:20
@jdtdesigns I just read through a few threads on the forum and it looks like they are going to be removing this challenge along with a few others very soon. Having said that I'm done with this one, I've been fighting it for 2 days now and I'm over messing with the APIs
JD Tadlock
@jdtdesigns
Jan 11 2017 04:21
@psnider22 API's are one of the things you'll be using all the time as a web dev or any other dev for that matter lol. It's good to learn how they work. It's not as crazy as you think. It'll click for you if you keep pushing. ;)
@psnider22 You also might hate to find out that sometimes it takes months or years for things to 'click' for people.
Just the way of the coder
Bozhidar Stoyanov Kabzamalov
@BozhidarKabzamalov
Jan 11 2017 04:28
Hey guys, can anyone check my weather api challenge codepen and tell me if they get correct weather information?
here's the link
Phillip
@psnider22
Jan 11 2017 04:38
@jdtdesigns lol thanks and I'll keep that in mind. maybe I just need a break from it for a while
CamperBot
@camperbot
Jan 11 2017 04:38
:cookie: 835 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
psnider22 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
breez803
@breez803
Jan 11 2017 04:39
@BozhidarKabzamalov no. do you have is set to https
matt lopez
@lowpee
Jan 11 2017 04:46
Need help with the portfolio challenge , how do i change my pill text to black?

.nav-pills{
font-family:Montserrat;
font-size:1.7em;
background-color:grey;

}

body{
font-family:Montserrat;
background-color:grey;
color:white;
}
h1{

padding:100px;
margin-top:-10%;

}
.btn-default{

background-color:white;
border-color:black;

}
.pageOne{

background:url("http://i.dailymail.co.uk/i/pix/2012/05/30/article-2152284-135F25BB000005DC-44_634x478.jpg");

background-size:cover;
height:800px;

}

}

Joe Escobedo
@joeEscob1023
Jan 11 2017 04:48

ok i dont get how

var myVar = 87;

myVar++;

gets myVar = 88

Coy Sanders
@coymeetsworld
Jan 11 2017 04:49
++ operator is shorthand for += 1 @TacoJoe
Andrew Lamansky
@Alamansky
Jan 11 2017 04:50
@TacoJoe The code "myVar++;" increments your myVar value by 1.
Joe Escobedo
@joeEscob1023
Jan 11 2017 04:52
so all ++ does is add 1?
Andrew Lamansky
@Alamansky
Jan 11 2017 04:54
@TacoJoe Yes. It's another (shorter) way of saying "myVar = myVar + 1;"
Joe Escobedo
@joeEscob1023
Jan 11 2017 04:56
@Alamansky thanks! they way the lesson went about it was kind of confusing!
CamperBot
@camperbot
Jan 11 2017 04:56
tacojoe sends brownie points to @alamansky :sparkles: :thumbsup: :sparkles:
:cookie: 116 | @alamansky |http://www.freecodecamp.com/alamansky
Ken Haduch
@khaduch
Jan 11 2017 05:03
@BozhidarKabzamalov - it looks like the correct weather is being displayed, as well as my location. The time that you are outputting is a little strange looking 0:1 for 1 minute after midnight? Also, the background scenery looks like a place where I would like to be - there is no rain or snow there... :)
@TacoJoe - one thing that you do not want to do is this: myVar = myVar++; that will not work! Only use myVar++ on its own... The lesson doesn't show that, but I saw someone on here earlier trying to do that, slightly confused, and it is definitely incorrect!
Joe Escobedo
@joeEscob1023
Jan 11 2017 05:09
@khaduch thanks for the heads up!
CamperBot
@camperbot
Jan 11 2017 05:09
tacojoe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2247 | @khaduch |http://www.freecodecamp.com/khaduch
johnboland91
@johnboland91
Jan 11 2017 05:13
Hey, I am having issues getting my classes and id's in CSS to work in html. I have no idea what the issue is because I formatted them in the same way in the previous project and they worked fine.
Reggie
@Reggie01
Jan 11 2017 05:24
@johnboland91 are you using a CSS library?
Ayush Bahuguna
@relentless-coder
Jan 11 2017 05:25
@jdtdesigns hey thank you
CamperBot
@camperbot
Jan 11 2017 05:25
relentless-coder sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 836 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Ayush Bahuguna
@relentless-coder
Jan 11 2017 05:25
I have a situation, I have an app that has bower components in which reside my angular files, I have uploaded it to my server, but I am getting error 404 on my angular files
johnboland91
@johnboland91
Jan 11 2017 05:33
@Reggie01 I believe I am only using bootstrap
Reggie
@Reggie01
Jan 11 2017 05:37
@johnboland91 just going through a checklist list. Did you include bootstrap? Do you have your own additional css file? Did you call your css file after bootstrap? Are you using codepen?
buiphuking
@buiphuking
Jan 11 2017 05:38
i wanna ask something, if i want to add 3 things, JQUERY , ANGULAR, ANGULAR-ANIMATE, which one should i put first, second and last, help me guy??????????
johnboland91
@johnboland91
Jan 11 2017 05:39
I included bootstrap. I am using codepen. I have called my css file in the context of my http file(not sure if that is what you mean). I am not sure what you mean by additional css file.
Rafael Monroy
@rafaelmonroy
Jan 11 2017 05:40
is anyone familiar with the jquery lighbox plugin
Reggie
@Reggie01
Jan 11 2017 05:43
@buiphuking It depends on each library dependency. I know jquery does'nt depend on angular. so jquery can be first. angular-animate probably depends on angular-animate. so 1. jquery, 2. angular, 3. angular-animate
you can view angular-animate docs here. If you scroll down installation section you see angular.js script before angular-animate script tag
@johnboland91 link your codepen and I can take a look at the css. See if I notice a problem
Felipe
@robohq
Jan 11 2017 05:52
Hello all, I have a quick question. Im at the Building a personal Portfolio section where I have to build a codepen that is similar to the example, but where was I supposed to learn about building a scrolling nav bar? I feel like im cheating if I just search google and copy some nav bar code
thank you in advance
Rafael Monroy
@rafaelmonroy
Jan 11 2017 05:55
can someone tell me why my lightbox plugin is not working http://codepen.io/rafaelmonroy/pen/YNzbxP
@robohq you can use google to learn how to make one
if you are using bootstrap it is really easy
Sorin Ruse
@sorinr
Jan 11 2017 05:57
@TylerMoeller hi. any idea how i can test for false if ("geolocation" in navigator) on my localhost server? i've blocked location on chrome but it seems that the condition always return true because location service is available
Felipe
@robohq
Jan 11 2017 05:57
thanks @rafaelmonroy I just wasn't sure if that was what was ok to do
CamperBot
@camperbot
Jan 11 2017 05:57
robohq sends brownie points to @rafaelmonroy :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @rafaelmonroy |http://www.freecodecamp.com/rafaelmonroy
Rafael Monroy
@rafaelmonroy
Jan 11 2017 05:59
@robohq no problem :) i like watching youtube videos, sometimes they explain step by step what to do, so you get a better understanding of the syntax
Colten Van Tussenbrook
@ColtenVanTussenbrook
Jan 11 2017 06:04
http://codepen.io/coltenv/pen/mRJOZP trying to get my random quote machine to tweet out my quote, but I can't figure out how to create a variable that will hold the quote. Any help?
Reggie
@Reggie01
Jan 11 2017 06:09

@rafaelmonroy you need to wrap your img tag with an anchor tag.

<a href="your-image.png" data-title="My caption" data-lightbox="image 1">
   <img  src="your-image.png" width="500px" class="thumbnailsite" data-title="My caption"></a>

lightbox docs

Rafael Monroy
@rafaelmonroy
Jan 11 2017 06:10
@Reggie01 ahhh i see, let me try that. thanks :)
CamperBot
@camperbot
Jan 11 2017 06:10
rafaelmonroy sends brownie points to @reggie01 :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @reggie01 |http://www.freecodecamp.com/reggie01
Rafael Monroy
@rafaelmonroy
Jan 11 2017 06:13
@Reggie01 it worked! double thanks!
CamperBot
@camperbot
Jan 11 2017 06:13
:warning: rafaelmonroy already gave reggie01 points
rafaelmonroy sends brownie points to @reggie01 :sparkles: :thumbsup: :sparkles:
Rafael Monroy
@rafaelmonroy
Jan 11 2017 06:13
double brownie points :)
lol
Reggie
@Reggie01
Jan 11 2017 06:20
cool, glad it worked :thumbsup:
abhijith shenoy
@shenoyabhijith
Jan 11 2017 06:31
how can i share my quotes on fb
im not finding the right api
Gururaj Birajdar
@grajsb
Jan 11 2017 06:46
hello
This one works in IE or Edge but not on chrome
@ColtenVanTussenbrook give an id to the div holding your quote and use the same id in the document handler
h1tag
@h1tag
Jan 11 2017 07:00
Hey everyone, can you style the Twitter share button ( like adjusting its margin )?
the button from this link: https://publish.twitter.com/#
kirbyedy
@kirbyedy
Jan 11 2017 07:03
@fortMaximus not quite understand the question
h1tag
@h1tag
Jan 11 2017 07:07
@kirbyedy I added the Twitter Share Button (tweet button) code from the link above and I gave it an id to style it but I can't move it in my project using margin in CSS
kirbyedy
@kirbyedy
Jan 11 2017 07:07
can we see your pen
kirbyedy
@kirbyedy
Jan 11 2017 07:17
@fortMaximus ugh well for start bootstrap is a 12 column grid
in that first row you only have 2x4 columns so that has to be corrected
making it 6 and 6 would be better
I mean you can make it 3x4 and then place the buttons inside the middle column
the rest should be fixed in css
h1tag
@h1tag
Jan 11 2017 07:20
@kirbyedy I know but when you add 2x4 columns the 3rd column is left/devided (which is a 4-column). I did that because there's nothing I want to put in the 3rd column
sorry, not devided, defined
but how that relates to the fact that the tweet button can't be moved downward using margin-top or padding-top?
kirbyedy
@kirbyedy
Jan 11 2017 07:24
sec.
kirbyedy
@kirbyedy
Jan 11 2017 07:29
remove this:
#getQuote{
  margin-right: 30px;
  margin-top: 30px;
}
add this:
.col-lg-4 {
  margin-top: 50px;
}
h1tag
@h1tag
Jan 11 2017 07:34
I did this and changed to .col-lg-6 but the page now is a little wider than the browser window (it needs scrolling to the right): https://codepen.io/FortMax/pen/RKWzGN
nvm, fixed it. Thanks
Thanks @kirbyedy
CamperBot
@camperbot
Jan 11 2017 07:38
:star2: 1675 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
fortmaximus sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
h1tag
@h1tag
Jan 11 2017 07:47
@kirbyedy but the problem that the 2 buttons don't look like they're on the same line because of the different size of the buttons
kirbyedy
@kirbyedy
Jan 11 2017 07:48
did you fixed it ?
cause when I open your pen its still the same
kirbyedy
@kirbyedy
Jan 11 2017 07:52
hmmm ok, now they are on the same height, but they are too wide from each other
h1tag
@h1tag
Jan 11 2017 07:53
yea, but because the "tweet" button is smaller it looks like it's higher than the "Roll" button
how do I fix the "too wide" issue? By putting them in the same column (like before use 3x4 columns and put them in the middle one)?
kirbyedy
@kirbyedy
Jan 11 2017 07:55
yes you can do that
h1tag
@h1tag
Jan 11 2017 08:01
now they're too close to each other :worried:
kirbyedy
@kirbyedy
Jan 11 2017 08:14
give them some margin
left/right
Charlie Connor
@Chaz101
Jan 11 2017 08:56
I have no idea how to do a portfolio, I think I'll fail so bad lmao
badalsaibo
@heyDante
Jan 11 2017 08:57
@Chaz101 Even I thought that, but after a month I made it.
Charlie Connor
@Chaz101
Jan 11 2017 09:02
Oka
alpox
@alpox
Jan 11 2017 09:02
@Chaz101 A lot about it will be googling at first, to find out new stuff, since most of it could not be covered by FreeCodeCamp directly.
Just stay strong and try :-)
And whenever you have problems come here and ask
sampah
@manusialemah
Jan 11 2017 09:03
what makes you all stay motivated?
alpox
@alpox
Jan 11 2017 09:03
@Chaz101 Also, try to do it part by part. You can think of some design and then break it down into different sections and "workloads"
@manusialemah For me thats mostly curiosity and the fun about creating new stuff on complex levels :-)
Contributing to the world out there is a nice thing
John Alcher
@alchermd
Jan 11 2017 09:21
Why do you guys think min-height: 30% is not working on my code? See: .box class:
http://codepen.io/AlcherMD/pen/mRewPV/
alpox
@alpox
Jan 11 2017 09:25
@alchermd Give .board a fixed height. As example
.board {
    height: 300px;
}
John Alcher
@alchermd
Jan 11 2017 09:26
@alpox Does it have to be a fixed height? Because it currently has 70% height of the page
main {
    min-height: 70% !important; // to overwrite Bootstrap defaults
}
Oh, setting a fixed height doesn't solve it as well. I wonder what's the problem....
alpox
@alpox
Jan 11 2017 09:29
@alchermd no it can be that, but you have to set the explicit height, not the min-height
John Alcher
@alchermd
Jan 11 2017 09:29
@alpox Ahhhh! That makes sense. I shouldn't be using min-height anyway since I'm not expecting the board elements to overflow.
alpox
@alpox
Jan 11 2017 09:30
@alchermd :thumbsup:
John Alcher
@alchermd
Jan 11 2017 09:30
@alpox Thanks! It's fixed now :)
CamperBot
@camperbot
Jan 11 2017 09:30
:cookie: 728 | @alpox |http://www.freecodecamp.com/alpox
alchermd sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
alpox
@alpox
Jan 11 2017 09:30
@alchermd No problem ;-)
John Alcher
@alchermd
Jan 11 2017 09:30
@alpox Mind sharing how you figured it out? :D
alpox
@alpox
Jan 11 2017 09:32
@alchermd I just know that elements can collapse when they cannot orientate themselves on a parent element which has no explicit boundaries and may vary themselves.
So i just looked up the parent element and took a look if thats the case ;-)
Clyde Lobo
@oppiniated
Jan 11 2017 09:34
@Chaz101 Because your a tags are not closed properly eg <a href="#">Charlie Connor<a> the second <a> should be </a>
Charlie Connor
@Chaz101
Jan 11 2017 09:35
ah thanks
alpox
@alpox
Jan 11 2017 09:40
@Chaz101 At multiple places :-)
Thomas Nguyen
@todadqa
Jan 11 2017 09:41
Can anyone direct me to a resource for the portfolio project because i don't have any idea at all on how to start with the scrolling and stuff.
Sorin Ruse
@sorinr
Jan 11 2017 09:44
@todadqa this can be a starter example but try to do it on your own
Thomas Nguyen
@todadqa
Jan 11 2017 09:45
hm but one of the rules is to not look at source code :) @sorinr
Sorin Ruse
@sorinr
Jan 11 2017 09:46
@todadqa not at the source code of their example :)
Thomas Nguyen
@todadqa
Jan 11 2017 09:46
lol but is there not a javascript tutorial page on how to use a scrolling function or something? @sorinr :) or did everyone look at source code for this project
alpox
@alpox
Jan 11 2017 09:49
@todadqa Not really. There are too many different approaches :-) you can use jQuery as example
Sorin Ruse
@sorinr
Jan 11 2017 09:49
@todadqa no. i have made up this quick example just to see how you can structure, style and "animate" such a site. take it only for inspiration. the layout, design and js part its all up to you. do not copy my code
Thomas Nguyen
@todadqa
Jan 11 2017 09:49
Ok i think i'll go javascript/jquery @alpox
not that i currently know the difference...
Samson Alajede
@ajesamson
Jan 11 2017 09:52
@todadqa jQuery is just javascript with some abstraction of basic things you can or will do with javascript
just master javascript and any other will be a breeze
Thomas Nguyen
@todadqa
Jan 11 2017 09:53
Ok, i just expected teaching javascript to be part of the course tbh @ajesamson
Clyde Lobo
@oppiniated
Jan 11 2017 09:56
@todadqa you cannot teach each and every scenario. The basics were covered. The rest one can learn by googling, reading and debugging someone else's code
Francisco Júnior
@franciscoeaj
Jan 11 2017 09:56
Guys, anybody has any ideia how can I make a div with a S shape border without using images?
Thomas Nguyen
@todadqa
Jan 11 2017 09:57
thanks @oppiniated
CamperBot
@camperbot
Jan 11 2017 09:57
todadqa sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @oppiniated |http://www.freecodecamp.com/oppiniated
Clyde Lobo
@oppiniated
Jan 11 2017 09:58
@franciscoeaj do you have a image for reference ?
Francisco Júnior
@franciscoeaj
Jan 11 2017 10:00
alpox
@alpox
Jan 11 2017 10:00
@todadqa Teaching javascript will come a lot after these challenges you are doing. But as @oppiniated tells, one cannot teach you everything there is :-) just the basics of javascript
Francisco Júnior
@franciscoeaj
Jan 11 2017 10:01
I was trying to do something like this fiddle but its not good at all
I'm working on a layout that has that kinds of curves between its divs and it is a full-width one so I can't use images :/
Here's a peek
Francisco Júnior
@franciscoeaj
Jan 11 2017 10:07
blob
Megan
@megan32
Jan 11 2017 10:15
playing around with jQuery on the random quote generator, nothing serious, but anyone willing to take a look and see why it's not working? if so:
issue: JS starting line 17; trying to change color using toggleClass, but nothing happens (hideous color chosen for sake of seeing if it works)
kirbyedy
@kirbyedy
Jan 11 2017 10:21
@megan32 no jqeury loaded for start
Megan
@megan32
Jan 11 2017 10:22
for start?
kirbyedy
@kirbyedy
Jan 11 2017 10:22
also your head has some issues
GastroGeek
@GastroGeek
Jan 11 2017 10:22

@megan32

No jQuery included...

This does not do what you think it does:

$("#container").toggleClass("background","#1aff8c");

toggleClass should be used to add/remove a class... THEN you define what the class does via CSS.

$("#container").toggleClass('fancy-background');
.fancy-background {
  background: #FF0000 !important;
}

https://codepen.io/anon/pen/vgLQdE?editors=1111

Don't use !important if possible... just for demo purposes.

kirbyedy
@kirbyedy
Jan 11 2017 10:22
well thats a first problem :)
Sorin Ruse
@sorinr
Jan 11 2017 10:22
@megan32 3element..toggleClass() expects a class not a background
GastroGeek
@GastroGeek
Jan 11 2017 10:23

@megan32

+

https://api.jquery.com/toggleclass/
Francisco Júnior
@franciscoeaj
Jan 11 2017 10:23
@megan32 use .css() instead of .toggleClass in this case and JQuery is not included as @GastroGeek said
Megan
@megan32
Jan 11 2017 10:23
@kirbyedy ...this is what I get for trying to apply codecademy to fcc projects
@franciscoeaj, @GastroGeek , @sorinr, @kirbyedy -Thank you!
Megan
@megan32
Jan 11 2017 10:29
"not included"?!?!! You gentlement are genius! Thank you!
hah gentlemen** ...so excited I can't spell
Clyde Lobo
@oppiniated
Jan 11 2017 10:31
@GastroGeek using !important can cause a lot of issues with css
alpox
@alpox
Jan 11 2017 11:23
@shivanksharma91 Any question about it?
@shivanksharma91 If the question is how:
This is possible with using css and just a little bit javascript to toggle classes
Shivank Sharma
@shivanksharma91
Jan 11 2017 11:24
@alpox how should i proceed? i am using bootstrap and jquery
alpox
@alpox
Jan 11 2017 11:25
@shivanksharma91 best would be to use no bootstrap for the alignment of these boxes. Use your own css to position them.
For the movement use the css attribute named transition and put the shifted layout as additional css classes which you toggle on the boxes through jquery
through that, the boxes shift when getting the css classes with other positions and the transition makes the movement smooth instead of instant
Shivank Sharma
@shivanksharma91
Jan 11 2017 11:28
@alpox can you code it for me? i would be very greatful to you
alpox
@alpox
Jan 11 2017 11:29
Im here to give tips, not code for other people, where is the learn effect in that? :)
Shivank Sharma
@shivanksharma91
Jan 11 2017 11:29
@alpox thanks for the tips, i am trying it now
CamperBot
@camperbot
Jan 11 2017 11:29
shivanksharma91 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 729 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 11 2017 11:31
@shivanksharma91 you can always come back and ask more specific questions when you're stuck - best would be if you do it in codepen so you can show the code
Clyde Lobo
@oppiniated
Jan 11 2017 11:31
@shivanksharma91 You can do it either by using position absolute
alpox
@alpox
Jan 11 2017 11:45
@shivanksharma91 @oppiniated Or position relative :-)
Clyde Lobo
@oppiniated
Jan 11 2017 11:46
@alpox more work with position relative,
Sorin Ruse
@sorinr
Jan 11 2017 11:47
any idea how i can test in a real environment for false this: if ("geolocation" in navigator)? without making it if(!....)
alpox
@alpox
Jan 11 2017 11:48
@oppiniated I never had that feeling ^^
@sorinr I don't think there is another way... just go with if (!("geolocation" in navigator)) yea i know... ugly...
@sorinr I often test it with just if(!navigator.geolocation) though
That is less secure though since it would also occur if navigator.geolocation === null as example. But well... in this case you wouldn't want to use it either would you :D
Sorin Ruse
@sorinr
Jan 11 2017 11:51
@alpox the problem is that "geolocation" in navigator always return true. even if you block the geolocation it doesn't meen its not available. hope you know what i mean
alpox
@alpox
Jan 11 2017 11:52
@sorinr Hmm so you mean you want to test whether you can use it because of https restrictions?
@sorinr One way would be to just strictly try if it would run and if it crashes... well do something else:
try {
    navigator.geolocation.......
} catch { // Oh heck, didn't work...
    // Do something else
}
Clyde Lobo
@oppiniated
Jan 11 2017 11:54
@alpox I made one with only css. Need a way to add animations
Raoul Strachan
@r4oul
Jan 11 2017 11:54
Here is my Personal Webpage submission .. please let me know what you think :) http://codepen.io/r4oul/pen/BpoddO
Sorin Ruse
@sorinr
Jan 11 2017 11:54
@alpox not really. for that i can use if (location.protocol != 'https:') and made my logic
alpox
@alpox
Jan 11 2017 11:55
@oppiniated one what?
@sorinr Ah okay :-) nice. So then i don't exactly get the case you want to handle
Sorin Ruse
@sorinr
Jan 11 2017 11:56
@alpox here is what i mean: https://developer.mozilla.org/en-US/docs/Web/API/Geolocation/Using_geolocation in witch case the else code will run?
Clyde Lobo
@oppiniated
Jan 11 2017 11:58
@alpox The one for swapping the two divs, this one https://files.gitter.im/FreeCodeCamp/FreeCodeCamp/W19C/grafik.png
alpox
@alpox
Jan 11 2017 11:58
@sorinr The else code would run if you have a browser where navigator.geolocation is not defined at all, not even set to null or something.
@oppiniated Ah. I thought someone else was on that one :D
Ananda Johnson
@Sovember
Jan 11 2017 11:59
Anybody know the best way I would go about making a contact bootstrap contact form actually function? My website is live on a host site, but I've never done contact forms (making them actually work) do I just need to use PHP?
alpox
@alpox
Jan 11 2017 11:59
@oppiniated If you need animations, just go with css transitions: http://www.w3schools.com/css/css3_transitions.asp
For making them swap, you'll need some javascript
Sorin Ruse
@sorinr
Jan 11 2017 11:59
@alpox what will be that browser i can install and test it. thi is my problem? :")
alpox
@alpox
Jan 11 2017 11:59
@Sovember You can use different technologies, PHP is one of them... not sure about the just :D
Ananda Johnson
@Sovember
Jan 11 2017 12:00
thanks @alpox i'll try php!
CamperBot
@camperbot
Jan 11 2017 12:00
sovember sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 730 | @alpox |http://www.freecodecamp.com/alpox
alpox
@alpox
Jan 11 2017 12:00
@sorinr D'oh... probably an old browser which doesn't depend on chromium...
Internet explorer 7? :D
Clyde Lobo
@oppiniated
Jan 11 2017 12:01
@alpox I can make them swap without js :)
alpox
@alpox
Jan 11 2017 12:02
@oppiniated Well, you need something to trigger it no? How do you trigger it with css
Clyde Lobo
@oppiniated
Jan 11 2017 12:02
@alpox Here, http://codepen.io/clydelobo/full/NdxeJe/ click on the text 'Swap'
Nagireddy Srichakradhar Reddy
@srichakradhar
Jan 11 2017 12:03
I'm trying to limit scroll to a "screen" when user scrolls:
http://codepen.io/srichakradhar/full/MJKzZX/
alpox
@alpox
Jan 11 2017 12:03
@oppiniated Lol what a hack :D
Nagireddy Srichakradhar Reddy
@srichakradhar
Jan 11 2017 12:03
but, somehow it behaves weirdly on scrolling up second time
Sorin Ruse
@sorinr
Jan 11 2017 12:04
@alpox lol. i don't wanna get back in time and install an older version of browser. it would be nicer to have a way to disable/reenable completly geolocation in the newst browsers :)
Nagireddy Srichakradhar Reddy
@srichakradhar
Jan 11 2017 12:05
it works fine when I click on the buttons, though
but, before scrolling
Philipp Scholz
@philipp32
Jan 11 2017 12:07
function getLocation(){
  // select HTML output elements
  var locationOutput = $('#location-output')
  // get JSON data
  $.getJSON("http://ip-api.com/json",
  // puts JSON data in console       
    function(jsonData){
    // can access JSON data in this function
    console.log(jsonData);
    var city = jsonData.city;    
    var country = jsonData.countryCode;
    locationOutput.html(city + ", " + country);    

    // makes lat & lon properties of windows, thus somewhat global
    window.lat = lat;
    window.lon = lon;
    function getWeather(){
    $getJSON("http://api.openweathermap.org/data/2.5/weather?lat=%lat%&lon=%lon%&APPID=f9461b5a35486896321efd7ddd9d4bba",     function(JSONData){
        console.log(JSONData);
        var temperature = JSONData.

      }

I am not getting any results from the second API. I want the lat and lon coordinates from the ip-api.com JSON call to go into my API url. How do I manage that?
I am currently trying this without any luck:

$getJSON("http://api.openweathermap.org/data/2.5/weather?lat=%" + lat "%&lon=" + lon        "%&APPID=f9461b5a35486896321efd7ddd9d4bba",

Which results in the error message: Unexpected string.

alpox
@alpox
Jan 11 2017 12:08
@sorinr I can imagine. I don't know another way though. It seems that even when i do delete navigator.geolocation it doesn't really delete it :D
Sorin Ruse
@sorinr
Jan 11 2017 12:08
@oppiniated i can't do that on linux :)
Clyde Lobo
@oppiniated
Jan 11 2017 12:08
@alpox now with animations :) http://codepen.io/clydelobo/pen/NdxeJe
alpox
@alpox
Jan 11 2017 12:09
@sorinr To test code in the else i would just set if(false) i guess :D
Sorin Ruse
@sorinr
Jan 11 2017 12:09
@alpox yes. even if you block access to geolocation the service exists and that conditional always return true
Megan
@megan32
Jan 11 2017 12:09
Working on: Random Quote; Issue: Jquery will link to Twitter, but won't pull quote in. Question: Does anyone know what it means when the Twitter box shows "[object object]" where the quote should be?
codepen link: window.open('https://twitter.com/intent/tweet?text=' + $("#quoteDisplay"));
}
Sorin Ruse
@sorinr
Jan 11 2017 12:09
@alpox yep. its the only way i think
JS line: 43
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:12

@TylerMoeller hi. any idea how i can test for false if ("geolocation" in navigator) on my localhost server? i've blocked location on chrome but it seems that the condition always return true because location service is available

@sorinr One way is to use the success/error callbacks:

function geoSuccess(position) {
  // navigator.geolocation succeeded
}

function geoError(error) {
  // navigator.geolocation failed
}

navigator.geolocation.getCurrentPosition(geoSuccess, geoError);
Clyde Lobo
@oppiniated
Jan 11 2017 12:13
@megan32 replace $("quoteDisplay") with $("#quoteDisplay").html()
alpox
@alpox
Jan 11 2017 12:14
@oppiniated Maybe bit cleaner than with calcs:
.swap:checked ~ .top {
  left: 100vw;
  margin-left: -10px;
  transform: translateX(-100%);
  transition: 1s all ease-in;
}
Sorin Ruse
@sorinr
Jan 11 2017 12:15
@alpox @oppiniated @TylerMoeller thank you all for ur time
CamperBot
@camperbot
Jan 11 2017 12:15
sorinr sends brownie points to @alpox and @oppiniated and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 731 | @alpox |http://www.freecodecamp.com/alpox
:star2: 1296 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
:cookie: 488 | @oppiniated |http://www.freecodecamp.com/oppiniated
Megan
@megan32
Jan 11 2017 12:15
@oppiniated thank you! That at least got it looking at the right thing, but it pulled in my html <!-- --> note haha
CamperBot
@camperbot
Jan 11 2017 12:15
megan32 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 489 | @oppiniated |http://www.freecodecamp.com/oppiniated
Megan
@megan32
Jan 11 2017 12:15
gotta figure that one out...
alpox
@alpox
Jan 11 2017 12:15
@sorinr np :D
Megan
@megan32
Jan 11 2017 12:17
@oppiniated nailed it! Thank you!
CamperBot
@camperbot
Jan 11 2017 12:17
megan32 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:warning: megan32 already gave oppiniated points
kirbyedy
@kirbyedy
Jan 11 2017 12:18
@megan32 open your console and check all the errors you have, it is good to correct them
Megan
@megan32
Jan 11 2017 12:18
you gotta actually pull up a quote for it to have something to pull into twitter...sometimes it's not the learning to code that has me worried haha
@kirbyedy -console?
Clyde Lobo
@oppiniated
Jan 11 2017 12:18
@alpox Thanks. Used your suggestion. Looks better now http://codepen.io/clydelobo/pen/NdxeJe
CamperBot
@camperbot
Jan 11 2017 12:18
oppiniated sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:cookie: 732 | @alpox |http://www.freecodecamp.com/alpox
kirbyedy
@kirbyedy
Jan 11 2017 12:18
hit f12
Megan
@megan32
Jan 11 2017 12:19
...nothing happens...
kirbyedy
@kirbyedy
Jan 11 2017 12:19
or ctrl+alt+I
Clyde Lobo
@oppiniated
Jan 11 2017 12:19
@megan32 You can use text() instead of html() to just get the text
kirbyedy
@kirbyedy
Jan 11 2017 12:19
command+alt+ i on mac
Megan
@megan32
Jan 11 2017 12:20
oh got it -I have seen that console before...didn't know it was called the console haha
@kirbyedy thank you!
CamperBot
@camperbot
Jan 11 2017 12:20
megan32 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1677 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Jan 11 2017 12:21
as you can see there are some errors... spelling mistake, wrong links etc
Megan
@megan32
Jan 11 2017 12:24
At this point it's a miracle there's anything but a blank screen in codepen. I'm a learner. I'm ok with spelling mistakes, wrong links, etc....I can't make heads or tails of the errors messages anyways haha If just seems upset about a "initial-scale" which I can't find in my code anyway. I'm a ways out before there's zero errors
is there a resource that explains how to use the console? I've only opened it to look at other sites. I don't actually know how to use it, read it, etc.
(Such as: how to know what errors there are? ...the little red "x" circle just says "Failed to load resource: the server responded with a status of 404 (Not Found)" 388 times, so I'm not sure how you can tell spelling mistakes? (although I'm sure they are there)
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:27
@megan32 That error message is actually about intiail-scale <-- note the spelling :)
A good start for using the console on Chrome: https://developers.google.com/web/tools/chrome-devtools/console/
Megan
@megan32
Jan 11 2017 12:28
@TylerMoeller ...not spelling errors on a massive scale? ;-)
thank you!
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:30

Just massive enough to invalidate your viewport settings. To get rid of the error, change:

<meta name="viewport" content="width=device-width, intiail-scale=1.0, user-scalable=yes">

to:

<meta name="viewport" content="width=device-width, intial-scale=1.0, user-scalable=yes">
Megan
@megan32
Jan 11 2017 12:30
@TylerMoeller ...that actually sounds serious haha ...I was thinking like "Anyd" instead of "Andy"...
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:32
@megan32 Yeah, it should be fixed :) The console won't report spelling errors in the content of your page, just in the code.
Megan
@megan32
Jan 11 2017 12:32
@TylerMoeller thank you! ...398 down to 3...all because of one typo
CamperBot
@camperbot
Jan 11 2017 12:32
megan32 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1297 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Megan
@megan32
Jan 11 2017 12:33
oh got it...I'll be reading through that link you sent this weekend. Thank you!
kirbyedy
@kirbyedy
Jan 11 2017 12:35
@megan32 when you have an error like that, note that on the right side of your screen there is a name and number if you double click on it, it will actually take you to the exact spot where the error is
Screen Shot 2017-01-11 at 14.32.57.png
can you see it on this image ?
Megan
@megan32
Jan 11 2017 12:36
oh cool! I tried clicking one but it just opened a new blank window
I likely just didn't click correctly or in the right spot
Shivank Sharma
@shivanksharma91
Jan 11 2017 12:36
can anyone help me_
?
Sorin Ruse
@sorinr
Jan 11 2017 12:37
@megan32 here two of my fav quotes:
"A working program is one that has only unobserved bugs."
"A patch is a piece of software which replaces old bugs with new bugs."
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:38
"Weeks of programming can save you hours of planning."
:)
Sorin Ruse
@sorinr
Jan 11 2017 12:38
@TylerMoeller lol
Megan
@megan32
Jan 11 2017 12:38
@sorinr ...that is some solid truth haha
..it's so true...I've gotten good about writing a recipe for codewars...I need to do that for the projects now...girls a dreamer...not a planner :-/
How does anyone have a life and learn to code??? ...I've started declining social obligations to code instead, and that was pre-console -awesome. I'll see you all on here 24/7/365 :-)
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:43
@shivanksharma91 You don't seem to be using jQuery. Are you trying to animate the boxes moving or just change the colors? If you scroll up, you'll see a similar problem solved: http://s.codepen.io/clydelobo/pen/NdxeJe
:point_up: January 11, 2017 4:18 AM
alpox
@alpox
Jan 11 2017 12:43
@megan32 I... never had a social life... :D
Clyde Lobo
@oppiniated
Jan 11 2017 12:45
@megan32 If you use chrome https://developer.chrome.com/devtools is a great read on how to debug using the developer tools
Megan
@megan32
Jan 11 2017 12:45
I love chrome! I'll add that to my reading list! Thank you @oppiniated
CamperBot
@camperbot
Jan 11 2017 12:45
megan32 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:warning: megan32 already gave oppiniated points
Megan
@megan32
Jan 11 2017 12:45
(/are there people out there who don't use chrome?)
Shivank Sharma
@shivanksharma91
Jan 11 2017 12:46
@TylerMoeller i am trying to animate the boxes moving
Clyde Lobo
@oppiniated
Jan 11 2017 12:46
I know people who prefer firefox.
Megan
@megan32
Jan 11 2017 12:47
huh who knew...the name firefox just kills me...like when Lindsey Lohan hits 45, instead of being called a cougar she'll be "the firefox" :-)
Clyde Lobo
@oppiniated
Jan 11 2017 12:47
@shivanksharma91 did you get to the point of getting the box change place
Sorin Ruse
@sorinr
Jan 11 2017 12:48
i'm usually using chrome but i test also on ff and opera. as i'm on linux not testing much IE/Edge coz i have to switch to win and i'm too lazy for that :)
Clyde Lobo
@oppiniated
Jan 11 2017 12:48
I work on a mac, and I use VM to test for IE
Shivank Sharma
@shivanksharma91
Jan 11 2017 12:49
@oppiniated no, thats what i am trying to do
Simon Cordova
@gbsimon87
Jan 11 2017 12:49

Hey guys...good afternoon...
I've got an IE issue, as we all do haha
I'm trying to assign an ID to a selector, then use the text method on the ID

$(".job-desc.hays-page > div:nth-child(1)").attr("id", "PageFirstRow");
$("#pageRow").text("Search Results");

It works just fine one all other browsers, but IE 10 is giving me a hard time...
Does anyone know a fix?
I've checked in IE 10 and my selector does indeed exist

Clyde Lobo
@oppiniated
Jan 11 2017 12:50
@gbsimon87 Why do you need to add an id?
Sorin Ruse
@sorinr
Jan 11 2017 12:50
my mac is broken do to charger. have an old 2007 macbook. RIP :)
alpox
@alpox
Jan 11 2017 12:51
@sorinr Got a macbook here too... i hate it :D
Simon Cordova
@gbsimon87
Jan 11 2017 12:51
@oppiniated Just so I can reference it easier...
If there's no fix I'll simply try Native JS
But the rest of my code is in jQuery so it'd be nice to stay consisten
consistent**
Sorin Ruse
@sorinr
Jan 11 2017 12:52
@alpox the os its nice but thats all.
Clyde Lobo
@oppiniated
Jan 11 2017 12:52
@gbsimon87 If you want to access it later, why not store a reference to it like var $pageRowFirst = $(".job-desc.hays-page > div:nth-child(1)")
alpox
@alpox
Jan 11 2017 12:53
@sorinr Relatively... its quite okay but i still prefer a linux with i3 over it for programming work.
What i absolutely hate about the mac is the keyboard layout >.<
Clyde Lobo
@oppiniated
Jan 11 2017 12:53
and then use $pageRowFirst.text('Search')
Simon Cordova
@gbsimon87
Jan 11 2017 12:53
text method won't work on IE10 either
My code works fine on Safari, Chrome, Firefox, and Opera, but the text just won't on IE9 nor 10
alpox
@alpox
Jan 11 2017 12:54
@gbsimon87 Hmm your id doesn't seem to be consistant in the piece of code you showed
But i guess it will be right when it works in other browsers
Simon Cordova
@gbsimon87
Jan 11 2017 12:54
@alpox yeah I just wrote it here I didn't copy and paste
Clyde Lobo
@oppiniated
Jan 11 2017 12:55
@gbsimon87 jQuery text method works in IE
alpox
@alpox
Jan 11 2017 12:55
@gbsimon87 Yea i thought so. I've just seen that IE doesn't support nth-child. You gotta find something else ^^
Clyde Lobo
@oppiniated
Jan 11 2017 12:56
@shivanksharma91 I don't see any boxes
Simon Cordova
@gbsimon87
Jan 11 2017 12:56
@alpox thanks, I'll give that a shot...
and @oppiniated thanks for the help as well :)
CamperBot
@camperbot
Jan 11 2017 12:56
gbsimon87 sends brownie points to @alpox and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 490 | @oppiniated |http://www.freecodecamp.com/oppiniated
:cookie: 733 | @alpox |http://www.freecodecamp.com/alpox
Shivank Sharma
@shivanksharma91
Jan 11 2017 12:57
wait
Sorin Ruse
@sorinr
Jan 11 2017 12:57
@alpox i have a macmini and a macbook both 2007 that are now two museum pieces in my house for charging/batteries purposes. just investing in that to make them work again will cost me like a new decent laptop. so BYE BYE to them :)
Shivank Sharma
@shivanksharma91
Jan 11 2017 12:58
@oppiniated can you see it now?
Tyler Moeller
@TylerMoeller
Jan 11 2017 12:58
@srichakradhar The .animate() method is working fine, your CSS is not. You'll want to use absolute positioning to move things with left and right. Try to get that working first. After that, you need to check which box is on the left/right before moving them in your JavaScript.
alpox
@alpox
Jan 11 2017 12:58
@sorinr Yea thats another thing which is really bad about mac stuff... it all needs its own stuff and all its own stuff is expensive as hell
I'll never buy apple stuff again
Shivank Sharma
@shivanksharma91
Jan 11 2017 13:08
@TylerMoeller on using absolute postion all boxes stack over each other :worried:
Tyler Moeller
@TylerMoeller
Jan 11 2017 13:13
@shivanksharma91 Yes, with absolute positioning, elements need to be positioned manually. You may want to go through this tutorial to understand it better: http://www.w3schools.com/css/css_positioning.asp
^^ hope that helps get you on the right track at figuring out the CSS requirements
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:13
how to add twitter share button to random quote generator
Megan
@megan32
Jan 11 2017 13:20
@shenoyabhijith we were just talking about this. I think there are a few ways to do it. Check out jQuery window.open
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:21
window.open?
Megan
@megan32
Jan 11 2017 13:21
but also check out the jQuery link, you might need it too
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:23
i wanna propulate the tweets
and just tweet the quotes out
i dont wanna just open the site
Megan
@megan32
Jan 11 2017 13:23
oh so that the quote automatically generates in the twitter window?
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:23
ya
window open is same as that of <a> anchor tag
Megan
@megan32
Jan 11 2017 13:24
yeah, so you need to add the link to twitter and then the $() for your text...like this: 'https://twitter.com/intent/tweet?text=' + $("h3").html());
I'm sure someone can explain it more eloquently (haha js pun..anyone?), but that's the quick answer
Alexeggers
@Alexeggers
Jan 11 2017 13:26
Hey guys, does anyone here have experience with flexbox? I am trying to force some flex-items to shrink, but they don't http://codepen.io/alexandereggers/pen/BpjLxP
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:26
text wrapped in h3 @megan32
?
Megan
@megan32
Jan 11 2017 13:28
sorry, just an example. My tweets for example are in <h3> tags so to get them for twitter I used $(h3), but as I understand it this could be a variety of other things
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:28
okay
im pretty clear with the concept
but here by quotes appear dynamically from the api
i need to make button also
Megan
@megan32
Jan 11 2017 13:31
oh, I did not do an api...you are officially outside my realm of knowledge. I don't want to steer you wrong, sorry :-(
Alexeggers
@Alexeggers
Jan 11 2017 13:32
@shenoyabhijith You are trying to fill your quote element with a quote from an api?
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:32
yes
ill share a link to codepen
Alfian Akmal Hanantio
@amalhanaja
Jan 11 2017 13:35
Hello
How to add a Header to getJSON ?
MaxLAB
@Max-LAB
Jan 11 2017 13:35
@amalhanaja Hello
Alexeggers
@Alexeggers
Jan 11 2017 13:37
@shenoyabhijith Not sure how that works, I didnt you Jquery to get an api but instead saved the json in an object and then always took from that what I needed
MaxLAB
@Max-LAB
Jan 11 2017 13:37
@amalhanaja is it posible for you to use $.ajax
Alexeggers
@Alexeggers
Jan 11 2017 13:38
@shenoyabhijith do you know the structure of the json object that is returned?
Sorin Ruse
@sorinr
Jan 11 2017 13:38
@shivanksharma91 this is what you want ?
Alfian Akmal Hanantio
@amalhanaja
Jan 11 2017 13:38
@Max-LAB thanks man!
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:38
api returns quotes
Alfian Akmal Hanantio
@amalhanaja
Jan 11 2017 13:38
@Max-LAB thanks
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:38
check the codepen
CamperBot
@camperbot
Jan 11 2017 13:38
amalhanaja sends brownie points to @max-lab :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @max-lab |http://www.freecodecamp.com/max-lab
Alfian Akmal Hanantio
@amalhanaja
Jan 11 2017 13:39
@shenoyabhijith thanks
CamperBot
@camperbot
Jan 11 2017 13:39
amalhanaja sends brownie points to @shenoyabhijith :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @shenoyabhijith |http://www.freecodecamp.com/shenoyabhijith
Alexeggers
@Alexeggers
Jan 11 2017 13:40
@shenoyabhijith there is a bug in your code, I would fix that before attempting to solve your problem
abhijith shenoy
@shenoyabhijith
Jan 11 2017 13:40
whats the bug
Alexeggers
@Alexeggers
Jan 11 2017 13:42
@shenoyabhijith I don't know, but there is an uncaught syntax error. You probably have a bracket missing in your javascript or something. Open up the console on your browser, itll tell you where it is

@shenoyabhijith 'https://twitter.com/intent/tweet?text=' + $("p").html());

The last bracket needs to go

Dhavalkumar Prajapati
@adhavalboy
Jan 11 2017 13:50
function phoneticLookup(val) {
  var result = "";

  // Only change code below this line
   val={
    "alpha": "Adams",

    "bravo": "Boston",

    "charlie": "Chicago",
       "delta": "Denver",
       "echo": "Easy",
 "foxtrot":  "Frank"
  };

  // Only change code above this line
  return result;
}
Use it to lookup val and assign the associated string to the result variable.
Sorin Ruse
@sorinr
Jan 11 2017 13:50
@shivanksharma91 take a look now at this example
Shivank Sharma
@shivanksharma91
Jan 11 2017 13:53
@sorinr https://jsfiddle.net/b73fwgx8/ It is not working here?
Sorin Ruse
@sorinr
Jan 11 2017 13:54
@shivanksharma91 load jquery in the external resources
Shivank Sharma
@shivanksharma91
Jan 11 2017 13:54
@sorinr loaded, still not working
Sorin Ruse
@sorinr
Jan 11 2017 13:56
@shivanksharma91 but on codepen its working?
Shivank Sharma
@shivanksharma91
Jan 11 2017 13:57
@sorinr yes
Sorin Ruse
@sorinr
Jan 11 2017 13:58
@shivanksharma91 then its up to you making work on jsfiddle. i just used jquery and thats all
Shivank Sharma
@shivanksharma91
Jan 11 2017 13:58
@sorinr thanks a lot
CamperBot
@camperbot
Jan 11 2017 13:58
shivanksharma91 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1067 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 11 2017 14:01
@shivanksharma91 maybe its a problem with the animate function on jsfiddle
@shivanksharma91 it seems that jsfiddle does not recognize the animateMySquares() function
JD Tadlock
@jdtdesigns
Jan 11 2017 14:05
@relentless-coder Even better ;)
$scope.sampleData = function() {

  var addArtist = function(id, artist) {
    $http.get('https://api.spotify.com/v1/artists/'+ id +'/top-tracks?country=SE')
    .then(function(response) {
      artist.tracks = response.data.tracks;
      $scope.artists.push(artist);
    })
  };

  $scope.sampleArtist.map(function(el){
    $http.get('https://api.spotify.com/v1/search?type=artist&q='+el)
    .then(function(data) {
      var artist = {};

      artist.name = data.data.artists.items[0].name;
      artist.popularity = data.data.artists.items[0].popularity;

      addArtist(data.data.artists.items[0].id, artist);
    })
  })
}
@breez803 Just saw your question from last night in regards to http://frostedcaribou.com/. I made all the animations and clouds with css. The art was drawn in Illustrator and exported as SVG so I can resize it to any dimension and maintain perfect quality. The background circles that fade in and out are added to the DOM with js and animated with css. Also, all the click listeners and showing/hiding of the about/contact/side alerts are handled through js as well. ;)
h1tag
@h1tag
Jan 11 2017 14:10
I'm on the Random Quote Generator project, I'm using the Twitter button to tweet the quote from this link: https://publish.twitter.com/# (this link gives a code to put the tweet button on your website). How can I set what the twitter button tweets (it tweets the full page by default, I want it to tweet just the random quote I got from the JSON object)? Here's the link to the codepen: https://codepen.io/FortMax/pen/YNwjqb
abhijith shenoy
@shenoyabhijith
Jan 11 2017 14:19
help
seed similar social buttons
css break down
i want two buttons to be similar
guys i wanna know why the fa icons dont appear here
JD Tadlock
@jdtdesigns
Jan 11 2017 14:35
@fortMaximus Here's a way to do it. I changed the html a little and commented the js for you.
https://codepen.io/jdtadlock/pen/apdrww?editors=0010
JD Tadlock
@jdtdesigns
Jan 11 2017 14:42
@leruzal Because you're adding the <html><head> content to your html panel. <html><head><body> are added by codepen for you. You just put the stuff that goes between the <body></body> into the html panel. CSS is added through Settings->CSS.
h1tag
@h1tag
Jan 11 2017 14:44
@jdtdesigns where did you get the tweet link from? Or how did you assemble it?
JD Tadlock
@jdtdesigns
Jan 11 2017 14:45
how to pre populate my tweets
from api to twitter
h1tag
@h1tag
Jan 11 2017 14:49
Thanks @jdtdesigns for taking the time to answer my questions :smile:
CamperBot
@camperbot
Jan 11 2017 14:49
fortmaximus sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 837 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 11 2017 14:49
@shenoyabhijith Look at your browser console(ctrl shift j). You'll see a bunch of errors. You can't use the facebook script on codepen apparently.
For the twitter button look at the code for @fortMaximus I just posted.
abhijith shenoy
@shenoyabhijith
Jan 11 2017 14:51
in the debug mode i dont see any errors
@jdtdesigns
so should i remove fb
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 11 2017 15:03
@shenoyabhijith If it's working on the debug then that's fine. Just be aware if you ask for help with it, the first thing people will see when checking your code is all the errors. :P
You also need to move all the <head> content to Settings->Stuff for HEAD
the only thing that goes in the html panel on codepen is the stuff between <body></body>
Otherwise, it will cause errors loading css and js sometimes
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:05
okay
need help now
@jdtdesigns
JD Tadlock
@jdtdesigns
Jan 11 2017 15:10
@shenoyabhijith <center> is out of date html and not supported in html5. Use text-align: center; on the element instead in CSS
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:10
okay
JD Tadlock
@jdtdesigns
Jan 11 2017 15:11
also, instead of inlining the css, just add a class to the element and style it in the css panel
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:12
doesn't add everything to center
JD Tadlock
@jdtdesigns
Jan 11 2017 15:13
@shenoyabhijith You need to take some html/css courses(2016 dated courses).
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:13
okay buddy
now tell me how to fix this
JD Tadlock
@jdtdesigns
Jan 11 2017 15:13
You're making a bunch of errors that tell me you're skipping a lot of the learning part and trying to move ahead without the knowledge
It will make your coding that much more fun and exciting if you know the right way to do it. ;)
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:17
okay ill check out and fix it
fixed it
:smile:
JD Tadlock
@jdtdesigns
Jan 11 2017 15:20
<p style="color:#224687;
           font-weight:bold;font-size:25px;">GET RANDOM QUOTES <br/> CLICK ON THE BUTTON
     </div>  

   <button type="button" target="_blank"class="btn btn-primary" id="twit" ><i class="fa fa-twitter" aria-hidden="true">Twitter</i></button>
</p>
Paragraphs shouldn't be used as containers for content. The closing </div> is misplaced. You shouldn't use <br>'s to seperate content anymore. CLICK ON THE BUTTON should be wrapped in a paragraph element as well. The button should be outside the paragraph
just a few things
there's plenty more ;)
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:24
ill take it as a challenge :smile:
Alexeggers
@Alexeggers
Jan 11 2017 15:27
I am working on the wikipedia challenge at the moment. When I try to send an XMLHttpRequest to wikipedia, I get an error "No 'Access-Control-Allow-Origin' header is present on the requested resource." All the solutions i find advise to configure the server differently. Is there a way to do this on codepen?
JD Tadlock
@jdtdesigns
Jan 11 2017 15:28
@Alexeggers add &callback=? to your api url ;)
abhijith shenoy
@shenoyabhijith
Jan 11 2017 15:28
@jdtdesigns can i use span
instead of p
JD Tadlock
@jdtdesigns
Jan 11 2017 15:29
@shenoyabhijith You can use spans. Just remember they are inline. ;)
Alexeggers
@Alexeggers
Jan 11 2017 15:32
@jdtdesigns might be a silly question, but should I replace the questionmark with a callback of my own making or is that actually what needs to be added?
JD Tadlock
@jdtdesigns
Jan 11 2017 15:33
@Alexeggers the ? refers to the callback function. You don't need a name
Alexeggers
@Alexeggers
Jan 11 2017 15:34
@jdtdesigns then I seem to still be doing something wrong :C this is my api call at the moment: 'https://en.wikipedia.org/w/api.php?action=query&format=json&list=search&srsearch=mao&callback=?'
the browser does not seem to recognize the questionmark as a valid part of the url
JD Tadlock
@jdtdesigns
Jan 11 2017 15:35
@Alexeggers Works fine for me http://jsbin.com/kajike/edit?js,console
Alexeggers
@Alexeggers
Jan 11 2017 15:36
@jdtdesigns maybe the problem is the xmlhttprequest. you used jquery. Ill try that
JD Tadlock
@jdtdesigns
Jan 11 2017 15:37
@Alexeggers There's no reason to use vanilla for ajax stuff. No professionals do that these days.
It's either jQuery or framework ajax script
Alexeggers
@Alexeggers
Jan 11 2017 15:40
@jdtdesigns i'll read up a bit more on web requests then. I've heard of ajax, but have no idea how it works :smile:
@jdtdesigns Thanks a lot dude!
CamperBot
@camperbot
Jan 11 2017 15:40
:cookie: 838 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
alexeggers sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
JD Tadlock
@jdtdesigns
Jan 11 2017 15:41
@Alexeggers Here's a good video to watch https://www.youtube.com/watch?v=rJesac0_Ftw
Alexeggers
@Alexeggers
Jan 11 2017 15:42
@jdtdesigns awesome xD Ill take a look when i've finished this bit of functionality. Thanks again!
CamperBot
@camperbot
Jan 11 2017 15:42
alexeggers sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: alexeggers already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 11 2017 15:43
@Alexeggers welcome ;)
Alexeggers
@Alexeggers
Jan 11 2017 15:49
@jdtdesigns while I have you xD is there a good design pattern for returning the results of a callback? returning it does not seem to work, and passing it to a global seems like bad form
JD Tadlock
@jdtdesigns
Jan 11 2017 15:51
@Alexeggers There's plenty of good ways depending on what you're trying to achieve. What's your goal with the returned result?
Alexeggers
@Alexeggers
Jan 11 2017 15:53
@jdtdesigns I have a handler method that gets called when the search button is pressed. the click event passes the search term to the handler method, which then calls the method that makes the api call. Ideally, I would like to return the resulting json to the handler so it can pass it forward to have it formatted into html
(I like the mvc pattern)
i could just call the method that builds html from json from the callback in the jquery api call, but that feels like cheating
JD Tadlock
@jdtdesigns
Jan 11 2017 15:58
@Alexeggers I'll code you an example real quick.
JD Tadlock
@jdtdesigns
Jan 11 2017 16:15
@Alexeggers Here ya go. http://jsbin.com/kajike/edit?js,output
Alexeggers
@Alexeggers
Jan 11 2017 16:15
@jdtdesigns still have your jsbin window open. I see what you mean. Does the call stack return to the "init" method after getResults completes?
i mean if I called getResults in init and didnt do it via an event
JD Tadlock
@jdtdesigns
Jan 11 2017 16:17
@Alexeggers It's all about separation of functionality when cleaning up your code.
You want your getters, setters separate.
@Alexeggers
It doesn't fall back to init
the init just basically sets up the listener on the search input
it could also set up listeners and run functions that need to be started when the app is first loaded
Alexeggers
@Alexeggers
Jan 11 2017 16:20
@jdtdesigns Separation of functionality is what I'm concerned about. If I have the method that collects data also call the method that displays it, isn't that a problem? Because now my "getResults" does more than it should
or am I mixing something up
JD Tadlock
@jdtdesigns
Jan 11 2017 16:22
@Alexeggers It's not a problem in small apps with very little code. The problem is when the code starts expanding. You'll quickly find yourself overwhelmed by your code. That's the reason to always separate functionality from the start.
Alexeggers
@Alexeggers
Jan 11 2017 16:25
@jdtdesigns Just to be clear, the way you coded it is separated functionality? It just looks weird to me (I come from java) because there is a chain of events that I can't clearly overlook in one main method (for lack of a better name)
I don't mean to be critical, just trying to understand how things are done in JS
JD Tadlock
@jdtdesigns
Jan 11 2017 16:28
@Alexeggers Yes. 1)You have the app initialization which sets up listeners and runs code that needs to be started when the app is loaded. 2)The getter which fires the get request. 3) The showResults which 'sets' or shows the output.
I could code it in a class form if you like.
The way i did it in that one is called the 'Revealing Modular Pattern'
Alexeggers
@Alexeggers
Jan 11 2017 16:29

@jdtdesigns How do you keep track of chains like this in larger apps? It sounds like a lot to have in your head.

If it isn't too much trouble, that would be amazing

David Marentette
@Silvertop1
Jan 11 2017 16:30
Quick question for you guys.....I set my body background color to a blue and wrote some text which is great...then I inserted a picture...and wrote some more text under it...the problem I am having is I now have a blue background with my text, then a white bar with the picture, then a blue background under it with the rest of the text....I want to make the white bar that appeared be blue...I tried setting color's in the img tag but it didn't work...not sure what to do here
JD Tadlock
@jdtdesigns
Jan 11 2017 16:31
@Alexeggers In larger apps, you would typically use a framework which splits everything up into 'components' or 'modules'.
But you can also split it up yourself. You would just create module code for each 'module' on the page(ie. navbar, sidebar, search, ect)
Christopher Ryder
@cryder9898
Jan 11 2017 16:34
Question about the twitch project, Do I need to make a request for every channel? I can make one api call to all the channels but I only get back the ones that are live? I feel like that should be enough, but I see in the example project he makes a separate call to each channel
Alexeggers
@Alexeggers
Jan 11 2017 16:35
@jdtdesigns Alright then. Thanks so much! Especially going through the effort of coding an example :)
CamperBot
@camperbot
Jan 11 2017 16:35
alexeggers sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:warning: alexeggers already gave jdtdesigns points
JD Tadlock
@jdtdesigns
Jan 11 2017 16:59
@Alexeggers Here's another way to approach it using a Search class. This is way overkill for such a small app, but you could build classes for all the different functions your app may have. http://jsbin.com/cuduba/edit?js,output
Varun Kumar
@heysadboy
Jan 11 2017 17:02
Hello. There is a space between my heading and the divs, can someone help me to remove that https://heysadboy.github.io/
Vaidotas
@unreality23
Jan 11 2017 17:02
how to change in javascript one variable to another and back ?
Tanmay Agrawal
@tanmay7270
Jan 11 2017 17:03
Hey, I need help with the Random Quote Machine.
http://codepen.io/tanmay7270/pen/oBvedO?editors=1010
How do I get the Twitter share button running?
Manuel Almeida
@netstudenton
Jan 11 2017 17:03
@jdtdesigns hello ! how are you doing !
JD Tadlock
@jdtdesigns
Jan 11 2017 17:04
@heysadboy .section-heading: margin: 0;
@netstudenton hey!
i'm good, u?
Tanmay Agrawal
@tanmay7270
Jan 11 2017 17:04
also, how do I get some placeholder text in the empty space in my quote box before I click on "Roll a quote"?
JD Tadlock
@jdtdesigns
Jan 11 2017 17:05
@unreality23 Can you post an example of what you're trying to achieve?
Vaidotas
@unreality23
Jan 11 2017 17:05
@jdtdesigns im trying to change celsius between fahrenheit and back
Manuel Almeida
@netstudenton
Jan 11 2017 17:06
@tanmay7270 just put insine html and them Overwrite it with javascrpit
Vaidotas
@unreality23
Jan 11 2017 17:06
it changes to fahrenheit easily but it doesnt go back
Alexeggers
@Alexeggers
Jan 11 2017 17:06
@jdtdesigns Jesus, you put some effort into this :D I assume resolve(data) gives the WikiSearch object a property "data" that can then be used by showresults?
Varun Kumar
@heysadboy
Jan 11 2017 17:06
@jdtdesigns thank you so much. There is also a space under about section, how can it be removed.
CamperBot
@camperbot
Jan 11 2017 17:06
heysadboy sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 839 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
Manuel Almeida
@netstudenton
Jan 11 2017 17:06
@jdtdesigns good i've just finished intermediate projects
@jdtdesigns i want to finish front-end this month if possible !! I want to help nonprofit entities as soon as possible !!
@unreality23 post your code here
Alexeggers
@Alexeggers
Jan 11 2017 17:10
@jdtdesigns oh no nevermind, just managed to follow that all the way through xD Ill have a closer look at Promise tomorrow
ill go off for now, thanks for all your help and effort!
Tanmay Agrawal
@tanmay7270
Jan 11 2017 17:10
@netstudenton I didn't get you. :worried:
Manuel Almeida
@netstudenton
Jan 11 2017 17:10
@tanmay7270
That's how you post on twiiter
https://twitter.com/intent/tweet?text={your text}
Tanmay Agrawal
@tanmay7270
Jan 11 2017 17:11
Could you please elucidate
?
Manuel Almeida
@netstudenton
Jan 11 2017 17:11
@tanmay7270 yes sorry for my bad english
Vaidotas
@unreality23
Jan 11 2017 17:11
@netstudenton
<!DOCTYPE html>
<html>
<head>
  <title>Weather FCC</title>
</head>
<body> 
  <div id="weather"></div>
  <p>Temperature: <span id="temp" onclick="changeTemp()"></span>C</p><br>
  <p>Wind Speed: <span id="wind"> </span></p>



  <script>
    var weather = new XMLHttpRequest();
    weather.open("GET", "http://api.wunderground.com/api/045b530e018ef76b/conditions/q/UK/Huddersfield.json", false);
    weather.send(null);

    var r = JSON.parse(weather.response);

    var dis = "Current location: " + r.current_observation.display_location.full + "<br/>";
    var temp_c = r.current_observation.temp_c +  " ";
    var temp_f  = r.current_observation.temp_f + " ";
    var wind = r.current_observation.wind_string + "<br>";
    getWeather("weather",dis);
    getWeather("temp",temp_c);
    getWeather("wind",wind);

    function getWeather(id,res) {
      document.getElementById(id).innerHTML = res;
    }

    function changeTemp(){
      if(getWeather("temp",temp_c))
      {
        getWeather("temp",temp_f);

      }
      if(getWeather("temp",temp_f))
      {
        getWeather("temp",temp_c);
      }


    }

  </script>   
</body>
</html>
Tanmay Agrawal
@tanmay7270
Jan 11 2017 17:12
Alright, thanks @netstudenton , I'l try that.
CamperBot
@camperbot
Jan 11 2017 17:12
:cookie: 137 | @netstudenton |http://www.freecodecamp.com/netstudenton
tanmay7270 sends brownie points to @netstudenton :sparkles: :thumbsup: :sparkles:
Manuel Almeida
@netstudenton
Jan 11 2017 17:15
@tanmay7270 choose some quote and just put it on your html code... if you use this jquery $({select to replace}).html() you'll replace the placeholder with a random quote
$({selector to replace}).html({you random quote})
Tanmay Agrawal
@tanmay7270
Jan 11 2017 17:17
@netstudenton Thanks again!
CamperBot
@camperbot
Jan 11 2017 17:17
tanmay7270 sends brownie points to @netstudenton :sparkles: :thumbsup: :sparkles:
:warning: tanmay7270 already gave netstudenton points
Manuel Almeida
@netstudenton
Jan 11 2017 17:21
@unreality23 You should use a current_unity variable to keep track...try do something like this
if (current_unity = f){
change to Celsius 
current_unity = c
} 
else{
change to  fahrenheit 
current_unity = f
}
Vaidotas
@unreality23
Jan 11 2017 17:23
in wundergrtound api it im using temp_c or temp_f they not using letter C or letter F after a number so I have to add by myself
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:24
twitter api
help
how to send random quotes to twitter
Manuel Almeida
@netstudenton
Jan 11 2017 17:25
@shenoyabhijith
https://twitter.com/intent/tweet?text={your text}
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:25
the tweet comes dynamically from api
how do i include that
Manuel Almeida
@netstudenton
Jan 11 2017 17:26
@unreality23 I typed just a pseudocode just to give you an idea what to do you can call your variables the way you wish
JD Tadlock
@jdtdesigns
Jan 11 2017 17:26
@unreality23 Here's a way to do it. I changed a little bit of your code. http://jsbin.com/bijujaw/edit?js,output
Vaidotas
@unreality23
Jan 11 2017 17:27
@netstudenton ok thank you!
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:27
can i use .html to add the tweet
CamperBot
@camperbot
Jan 11 2017 17:27
unreality23 sends brownie points to @netstudenton :sparkles: :thumbsup: :sparkles:
:cookie: 138 | @netstudenton |http://www.freecodecamp.com/netstudenton
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:27
?
Vaidotas
@unreality23
Jan 11 2017 17:27
@jdtdesigns thank you for the answer!
CamperBot
@camperbot
Jan 11 2017 17:27
unreality23 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 840 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
JD Tadlock
@jdtdesigns
Jan 11 2017 17:27
@unreality23 welcome ;)
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:27
i mean to say the jquery .html() method
Manuel Almeida
@netstudenton
Jan 11 2017 17:29
@shenoyabhijith i think no. the twiiter quote is just a link with one parameter which is your quote text
JD Tadlock
@jdtdesigns
Jan 11 2017 17:29
@shenoyabhijith When you want people to help with your code, post the edit version of the pen please. ;)
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:30
okay @jdtdesigns
i learnt some skills @jdtdesigns :D
JD Tadlock
@jdtdesigns
Jan 11 2017 17:31
nice!
Manuel Almeida
@netstudenton
Jan 11 2017 17:31
@shenoyabhijith just put the Twitter link inside the href attribute , put your quote text after de = sign
https://twitter.com/intent/tweet?text={your text}
here you go
@netstudenton i know about that my problem is getting my quoted into that {your text}
how do i get my quotes in the { the text } ?
Manuel Almeida
@netstudenton
Jan 11 2017 17:36
"https://twitter.com/intent/tweet?text="+content_variable+title_variable
JD Tadlock
@jdtdesigns
Jan 11 2017 17:37
@shenoyabhijith I changed a little of the html and added a tiny bit of js.
http://codepen.io/jdtadlock/pen/YNqzxm?editors=0010
@shenoyabhijith You don't need to nest a button inside a link. A link can be styled just like a button itself.
Also, buttons don't act as hyperlinks, so target="_blank" on a button won't do anything.
abhijith shenoy
@shenoyabhijith
Jan 11 2017 17:44
im a bit confused on .attr() method
@jdtdesigns
Nick
@Nickt1231
Jan 11 2017 17:51
can someone help me out? trying to build my portfolio on codepen but I cant seem to get my buttons to my social medias to work?
<button type="submit" src="https://aimhigh24.wordpress.com/">My Blog</button>
<button type="submit" src="https://github.com/Nickt1231">GitHub</button>
<button type="submit" src="https://www.linkedin.com/in/william-thomas-a2413a134">Linkedin</button>
<Button type="submit"><a href:"mailto:WNT.Business@Gmail.com">Email Me</a></button>
Tom
@moT01
Jan 11 2017 18:03
you want those to be little images i take it?
need a url that has the actual image, not just a page with the image on it, ...ends in an image file
@Nickt1231
Nick
@Nickt1231
Jan 11 2017 18:05
@moT01 i mean yeah i did want the little images too but i cant get the buttons to even work? when I click them nothing happens
Sorin Ruse
@sorinr
Jan 11 2017 18:05
@shenoyabhijith as @jdtdesigns said buttons are a little different respecting <a> tags(hyperlinks) their main difference is that anchor tags can link you directly to some place instead for buttons you have to write javascript code to do the same thing. sometimes its better using anchor tags but sometimes the buttons are more suitable. here an example
Tom
@moT01
Jan 11 2017 18:05
k i see you probly dont want little images, ...try href like you did on the last one
on the last one, try <a href="mailto: ...">
with the equal sign, that should work, ...and you should be able to make the rest like that
Aditya Ranjan Singh
@AdityaRanjanSingh
Jan 11 2017 18:07
hi,
jquery library not working in code pe
any help
Tom
@moT01
Jan 11 2017 18:08
@AdityaRanjanSingh did you add it
Nick
@Nickt1231
Jan 11 2017 18:09
@moT01 it worked for the email but nothing else
Tom
@moT01
Jan 11 2017 18:11
take a look at what @sorinr said, ...you may have to go that route
Yerrapotu Manojkiran
@nani554
Jan 11 2017 18:13
need help in angular js
Tyler Moeller
@TylerMoeller
Jan 11 2017 18:14

@Nickt1231 If you want buttons that open links without using javascript, you can do something like this:

<form method="GET" action="https://www.github.com" target="_blank">
  <input type="submit" value="Github">
</form>

It's really best to use <a> for hyperlinks though and style them as needed.

Only use <button> for submitting information to a server
Nick
@Nickt1231
Jan 11 2017 18:17
@TylerMoeller thanks! I'll give it a shot
CamperBot
@camperbot
Jan 11 2017 18:17
nickt1231 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1298 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
cjljohnson
@cjljohnson
Jan 11 2017 18:22
Anyone know why my bootstrap cols don't work? http://codepen.io/cjljohnson/pen/PWZKWO
Tyler Moeller
@TylerMoeller
Jan 11 2017 18:27
@cjljohnson You aren't using bootstrap columns in your code
<div class="col">
Nick
@Nickt1231
Jan 11 2017 18:36
got all my buttons working. now can't seem to figure out how to get my "email me" link to work?
<form method="GET" action="https://aimhigh24.wordpress.com/" target="_blank">
<input type="submit" value="My Blog">
</form>
<form method="GET" action="https://github.com/Nickt1231" target="_blank">
<input type="submit" value="Github">
</form>
<form method="GET" action="https://www.linkedin.com/in/william-thomas-a2413a134" target="_blank">
<input type="submit" value="Linkedin">
</form>
<a href="mailto:WNT.business@Gmail.com">Email Me</a>
Sorin Ruse
@sorinr
Jan 11 2017 18:46
@Nickt1231 <a href="mailto:WNT.business@Gmail.com">Email Me</a> its working. if you click the link it opens mail client and prefill the to field
Tyler Moeller
@TylerMoeller
Jan 11 2017 18:47
@Nickt1231 On Chrome, you can check if you have an email client mapped to the mailto protocol: chrome://settings/handlers
Nick
@Nickt1231
Jan 11 2017 18:50
@sorinr ahhh I think i must have clicked chrome when it asked me what app i want to open the link with
Tyler Moeller
@TylerMoeller
Jan 11 2017 18:50
Or, if you're trying to make it look like the rest of your links...use POST instead of GET:
<form method="POST" action="mailto:WNT.business@Gmail.com" enctype="text/plain">
  <input type="submit" value="Email Me">
</form>
Nick
@Nickt1231
Jan 11 2017 18:59
Got it all figured out. You guys are great @TylerMoeller @sorinr thanks again
CamperBot
@camperbot
Jan 11 2017 18:59
nickt1231 sends brownie points to @tylermoeller and @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1068 | @sorinr |http://www.freecodecamp.com/sorinr
:warning: nickt1231 already gave tylermoeller points
Tyler Moeller
@TylerMoeller
Jan 11 2017 19:00
You're welcome, Nick :+1:
Sorin Ruse
@sorinr
Jan 11 2017 19:02
@Nickt1231 welcome :+1:
not working twitter
button
Dave Reaser
@reaser
Jan 11 2017 19:40
trying to create a button that will reset all checkboxes in a waiver field, any suggestions
help
twitter button
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:08
@shenoyabhijith Add target="_blank" to your twitter link. Also, <button> can't go inside of <a>
abhijith shenoy
@shenoyabhijith
Jan 11 2017 20:09
i need javascript code
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:11
@shenoyabhijith It looks like you have the link correct: https://twitter.com/intent/tweet?text={your text}, you just need to replace "{your text}" with the quote text.
abhijith shenoy
@shenoyabhijith
Jan 11 2017 20:11
.attr
?
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:12
Yes, you can do that with the .attr() in jQuery, like $('selector').attr('href', 'http://link');
(trying to give a hint and not give the exact code)
Chiu Yong
@chiuyong
Jan 11 2017 20:12
I need someone to help me with bootstrap
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:13
@chiuyong What's your question?
@reaser This may be a good start - if you want to share your code, I can take a closer look: http://stackoverflow.com/questions/2279760/how-to-reset-all-checkboxes-using-jquery-or-javascript
how to add message inside link
@TylerMoeller
cjljohnson
@cjljohnson
Jan 11 2017 20:17
What is the disadvantage to using flex layouts?
Are they not widely supported or something?
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:19
@shenoyabhijith Your twitter message will be the same message you write to the page without the HTML: a[0].content + " " + a[0].title
abhijith shenoy
@shenoyabhijith
Jan 11 2017 20:21
now how do i add it inside the attr
@TylerMoeller
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:22
@cjljohnson Yeah, not supported natively in IE8 or IE9
DevRice
@DevRice
Jan 11 2017 20:22
Hello! Can somebody help me with the Twitch.tv JSON API?
cjljohnson
@cjljohnson
Jan 11 2017 20:23
@TylerMoeller so what is the best way to do something like this? http://codepen.io/cjljohnson/pen/PWZKWO
where i have a fixed width image div, then two flex divs next to it that are 33% and 66% of the remaining space?
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:24
@shenoyabhijith If you just want the code, you can look at this Codepen here: http://s.codepen.io/TylerMoeller/pen/MbyvwJ
Otherwise, I recommend reading the .attr() method in the jQuery docs: http://api.jquery.com/attr/
You will append the quote to the end of the URL similarly to how you got the quote data and wrote it to the page.
@cjljohnson Bootstrap is fine for doing that - it's a framework and is fully tested on all browsers and OS. With Flexbox, you'll be writing your own CSS from scratch, which is also fine if you want to learn flexbox.
Just make sure to test it thoroughly :)
cjljohnson
@cjljohnson
Jan 11 2017 20:26
I couldn't figure out how to do the fix width div in bootstrap, stack overflow said it wasn't supported except for in the new alpha version
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:28
@cjljohnson I'll take a closer look at your code
Shouldn't be necessary to use v4 alpha yet
CampEvan
@CampEvan
Jan 11 2017 20:33
any idea why the weather app api is not supported by http protocols on chrome?
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:34
@cjljohnson I don't think you need fixed width columns here - you could, for example, have your image, name, and status all in columns of size col-xs-4
You'll want to add the img-responsive class to your images so they resize appropriately
Robin
@LuckyRabbits
Jan 11 2017 20:34
@here 👋🏼 hopping on to code in a few. Hope everyone is have a good day!
also having* lol
cjljohnson
@cjljohnson
Jan 11 2017 20:34
@CampEvan link it
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:34

Kind of like:

  $("#results").append(
    '<div id="' + name + '" class="streamer row">' +
      '<div class="col col-xs-4 item1">' + 
        '<img class="img-responsive" src="' + logo + '" class="logo">' + 
      '</div>' + 
      '<div class="col col-xs-4 name">' + 
        '<b>' + name + '</b>' + 
      '</div>' + 
      '<div class="col col-xs-4 item2">' + 
        status + 
      '</div>' + 
    '</div>'
  );

@cjljohnson

it runs fine on firefox but on chrome I can't seem to make both the api response and the geolocation work
cjljohnson
@cjljohnson
Jan 11 2017 20:35
pen.js:6 getCurrentPosition() and watchPosition() no longer work on insecure origins.
from console
you need to get the location from an api
CampEvan
@CampEvan
Jan 11 2017 20:35
yeah that's what I read as well
cjljohnson
@cjljohnson
Jan 11 2017 20:36
it's a security feature that will be implemented into other browsers in the future
CampEvan
@CampEvan
Jan 11 2017 20:36
@cjljohnson so get the geolocation from an api instead of the browser itself, yeah?
cjljohnson
@cjljohnson
Jan 11 2017 20:36
Yes
CampEvan
@CampEvan
Jan 11 2017 20:36
ok I see. thanks a lot @cjljohnson
CamperBot
@camperbot
Jan 11 2017 20:36
campevan sends brownie points to @cjljohnson :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @cjljohnson |http://www.freecodecamp.com/cjljohnson
CampEvan
@CampEvan
Jan 11 2017 20:37
@cjljohnson I could just get my location from the weather api I'm already using though, can't I?
cjljohnson
@cjljohnson
Jan 11 2017 20:37
?
i dunno, the one i used needed lat and long as parameters
so i used a geolocation api to get that first
CampEvan
@CampEvan
Jan 11 2017 20:38
ah scrap that my bad. the weather api uses the coords from the browser geolocation to get the weather
cjljohnson
@cjljohnson
Jan 11 2017 20:41
@TylerMoeller according to this flex has pretty good support so i'll jsut use that i thinkhttp://caniuse.com/#feat=flexbox
@TylerMoeller thanks for the help
CamperBot
@camperbot
Jan 11 2017 20:41
cjljohnson sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1299 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 11 2017 20:41
@CampEvan Unfortunately, navigator.geolocation gives the most accurate location results. If it fails or if it's blocked, you'll have to get the user's location based on their IP Address. Here's an example of how to do that: http://s.codepen.io/TylerMoeller/pen/XNvJzy
It's also a good idea to consider using a Weather API that works over HTTPS, like Weather Underground, Dark Sky, or Apixu.
Sergio
@scamargo
Jan 11 2017 20:48
@CampEvan a lot of people had issues with this so one of our fellow campers created a proxy so we can make https calls -- just append your query to ttps://weather.millergeek.xyz/data/2.5/weather?
Joshua
@jfc246
Jan 11 2017 21:03
what is wrong with this code?
str.replace("\"\"", "&quot;");
Tyler Moeller
@TylerMoeller
Jan 11 2017 21:08
@jfc246 That should replace the first instance of "" with " - what are you trying to get it to do?
technically, replace with &quot; which = " in html, but...
Joshua
@jfc246
Jan 11 2017 21:12
@TylerMoeller but?
Tyler Moeller
@TylerMoeller
Jan 11 2017 21:12
but, you get what I mean
a " is a &quot; in html
If you need to replace more than the first instance use a regex instead: str.replace(/\"/g, "&quot;"); @jfc246
Joshua
@jfc246
Jan 11 2017 21:16
@TylerMoeller thanks alot!
CamperBot
@camperbot
Jan 11 2017 21:16
jfc246 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1300 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 11 2017 21:17
yw :+1:
Joshua
@jfc246
Jan 11 2017 21:18
:thumbsup:
Adam Morris
@Adam-Morris
Jan 11 2017 21:20
I think the OpenWeatherMap icons are ugly. How do I have different icons to the ones OpenWeatherMap provides?
cjljohnson
@cjljohnson
Jan 11 2017 21:21
@Adam-Morris just don't use them. make your own or find some on the web
Tyler Moeller
@TylerMoeller