These are chat archives for FreeCodeCamp/HelpFrontEnd

12th
Jul 2016
Aaron Taylor
@aarontaylor
Jul 12 2016 00:01
I would think you can just have a small image (thumbnail) in an anchor tag and then when you click on it, it links to a larger full size image
<a><image></a> sort of thing.
Or bind the Jquery click event to a small image and link it to a larger one
Omar Adzagic
@1ucid
Jul 12 2016 00:02
im not that good with jQuery, i will just make that with anchor :D, thanks
Aaron Taylor
@aarontaylor
Jul 12 2016 00:02
There is this link with a tutorial on how to do it @1ucid http://www.willmaster.com/library/features/image-popup.php
Omar Adzagic
@1ucid
Jul 12 2016 00:02
@aarontaylor thank you
CamperBot
@camperbot
Jul 12 2016 00:02
1ucid sends brownie points to @aarontaylor :sparkles: :thumbsup: :sparkles:
Aaron Taylor
@aarontaylor
Jul 12 2016 00:02
It actually looks pretty good using his little JavaScript library. I might want to try it myself now!
CamperBot
@camperbot
Jul 12 2016 00:02
:cookie: 279 | @aarontaylor |http://www.freecodecamp.com/aarontaylor
Aaron Taylor
@aarontaylor
Jul 12 2016 00:03
Your welcome @1ucid thank you!
CamperBot
@camperbot
Jul 12 2016 00:03
aarontaylor sends brownie points to @1ucid :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @1ucid |http://www.freecodecamp.com/1ucid
Stephen
@stephepush
Jul 12 2016 00:18
i want to animate a color transition between two colors (light blue and navyish violet daily over a 24 hour period relative to sunset and sunrise times. Anybody ever try this? Here's my project & code:
http://codepen.io/stephepush/pen/pbWwog
Aaron Taylor
@aarontaylor
Jul 12 2016 00:18
I haven't every done that, but it sounds like a fantastic idea.
Randy Goggin
@frogshelp
Jul 12 2016 00:20
This message was deleted
Stephen
@stephepush
Jul 12 2016 00:33
@aarontaylor , thanks wanted to make a flat web app as opposed to anything with a real image in it, use the background to signify the time of day
CamperBot
@camperbot
Jul 12 2016 00:33
stephepush sends brownie points to @aarontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @aarontaylor |http://www.freecodecamp.com/aarontaylor
Stephen
@stephepush
Jul 12 2016 00:33
i guess I'll ask on stackoverflow
Simon Cordova
@gbsimon87
Jul 12 2016 00:36
@stephepush maybe css3 transitions?
It's def a nice idea for sure!
Stephen
@stephepush
Jul 12 2016 00:36
I'll check it out, gbsimons87
David Clark
@DavidDoes
Jul 12 2016 00:47
Hey all. Trying to get my second page on my portfolio project to show up when you scroll down, but it's not showing. Ideas?
http://codepen.io/SlouchingToast/pen/VjryZk/
I misspelled my own class name... :smile:
Chrissy Albert
@chrissyalbert
Jul 12 2016 00:53
This message was deleted
Hi Everyone, here is my CodePen for the Twitch.tv JSON api challenge. I can't figure out how to DRY the repetitive code for each if and else statement. I tried cutting the logoLine, nameLine and statusLine and making them global variables at the top, but then the results won't include what was in that if or else statement. I thought was understanding scope but I got really confused with this challenge. Any ideas? I really appreciate the feedback. https://codepen.io/chrissyalbert/pen/jAGogO
Ivan
@gonzalezi2
Jul 12 2016 01:10
Does anyone have a resource they used that helped them with the random quote generator project? The exercises didn't really help
Dylan
@dhcodes
Jul 12 2016 01:33
@gonzalezi2 they should have...
@gonzalezi2 you make an array or object full of quotes and one full of authors in the same order as the quotes, then use Math.random() and the length of the array to get a random quote/author. Then you use HTML/CSS to style a page and JS or jQuery to change the quote based on a function that gets the random quote
Go forth and prosper
or you can use a quote API to get your quotes but that brings up a diff. set of issues
Ivan
@gonzalezi2
Jul 12 2016 01:35
That's what I'm trying to do but there's a disconnect between the API and my code and I can't figure out how to make the connection. I want to be able to use an API instead of creating my own arrays.
I created the HTML/CSS for it already and have a spot for the generated quote. That's the easy part. The javascript is where I'm completely lost
Dylan
@dhcodes
Jul 12 2016 01:49
@gonzalezi2 apis can go wrong a few diff ways. Are you using codepen?
@gonzalezi2 it's likely a mixed content (secure v. insecure) or crossbrowser header issue
Ivan
@gonzalezi2
Jul 12 2016 01:50
Yeah I'm using codepen. Here's the link http://codepen.io/ivan-gonzalez/pen/AXRobW
Robert Richey
@0x0936
Jul 12 2016 01:50

Streaming AMA Web Dev - FCC related or not - (beginner - intermediate front end) - cake will be served at the end (maybe) - it's a more personal experience, sort of like pairing but all the pressure is on me - https://twitch.tv/droopfizzle

Ivan
@gonzalezi2
Jul 12 2016 01:50
I used the code from the exercises and was just going to modify it
@dhcodes and this is the API I'm trying to use
Dylan
@dhcodes
Jul 12 2016 01:55
@gonzalezi2 yeah i'm checking it out
one sec
Ken Haduch
@khaduch
Jul 12 2016 02:00
@chrissyalbert - it looks like you could generate a function to output all of that information - as you said there is a lot of repeated code, only varying in a couple ways. At least that is the case for the null data.stream and the else case for that (when they are online). It seems like you could condense it that way, pass in an object for each case, with the error case using a made-up object that contains the error related values?
Dylan
@dhcodes
Jul 12 2016 02:03
@gonzalezi2 it shows a CORS error in the console, which can usually be overcome by prepending https://crossorigin.me/
but it's not working
maybe try a diff. api
Ivan
@gonzalezi2
Jul 12 2016 02:05
@dhcodes hmmmm ok. I think I might actually just do one manually this time around first and then maybe hopefully I will find another I can use. Thanks for your help though
CamperBot
@camperbot
Jul 12 2016 02:05
gonzalezi2 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1206 | @dhcodes |http://www.freecodecamp.com/dhcodes
Dylan
@dhcodes
Jul 12 2016 02:06
yeah sorry I didn't get it working
@gonzalezi2 if you want to use an API, I just replaced the URL with this one: http://quotes.rest/qod.json and it worked
i.e. it console.logged the object
@gonzalezi2 nvm, that one is quote of the day
Ivan
@gonzalezi2
Jul 12 2016 02:10
Ah alright. Yeah it has to be random. Seems I'll have to go down another youtube rabbit hole!
liu2yamichael
@liu2yamichael
Jul 12 2016 02:12
what do you guys think of my portfolio https://codepen.io/liu2yamichael/pen/ZOaYom
its not fully complete
Chase
@Belax8
Jul 12 2016 02:14
@liu2yamichael I think it looks nice!
liu2yamichael
@liu2yamichael
Jul 12 2016 02:15
are their anything there that i could change to make it look better
sunnyu
@q281589190
Jul 12 2016 02:16
what happend
liu2yamichael
@liu2yamichael
Jul 12 2016 02:17
wanting to know how my portfolio looks and see if it could be better
what should i do ,i donn't want to creat a new programe
Chase
@Belax8
Jul 12 2016 02:19
@liu2yamichael I can't think of anything to change. Just add your projects in there when you get them done.
liu2yamichael
@liu2yamichael
Jul 12 2016 02:19
can i post it but add the projects when i get to them during the course
Chase
@Belax8
Jul 12 2016 02:20
@q281589190 you can go to 'Map' and just choose the next challenge. You can skip that one if you want.
@liu2yamichael Yes. I would post it and move on. That way you can continue to learn. You can always come back and edit it if you want.
liu2yamichael
@liu2yamichael
Jul 12 2016 02:21
ok just want it to know
do i have to put links in for socil media
bc i dont feel like adding in my social media stuff
Chase
@Belax8
Jul 12 2016 02:23
@liu2yamichael I would if you plan on sharing this portfolio with your job resume or something like that, but you don't have to if you don't want to.
Bryan Park
@BryanP37
Jul 12 2016 02:23
A quick question. Is there a way to build a fullpage-like website without using the fullpage.js?
Chris Rutherford
@cjrutherford
Jul 12 2016 02:24
it's finally done!!!!
the only thing is enter doesn't engage the button.
Chase
@Belax8
Jul 12 2016 02:27
@BryanP37 https://css-tricks.com/introducing-css-scroll-snap-points/ Here is a great article about that
liu2yamichael
@liu2yamichael
Jul 12 2016 02:29
i'm not planning on getting a job yet and when i do i would update it and change it in the futur
Bryan Park
@BryanP37
Jul 12 2016 02:30
@Belax8 thanks! I will look into it
CamperBot
@camperbot
Jul 12 2016 02:30
bryanp37 sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @belax8 |http://www.freecodecamp.com/belax8
liu2yamichael
@liu2yamichael
Jul 12 2016 02:31
how do i link social media stuff
for gethub or google plus
or linkedin
Chase
@Belax8
Jul 12 2016 02:33
@liu2yamichael instead of saying <a href="#">Github</a> you could write <a href="https://github.com/liu2yamichael" target="_blank">Github</a> and the same for the rest of those
@liu2yamichael a note: target="_blank" will make it open in a new tab. You basically have to do this in CodePen or else the page looks funny.
liu2yamichael
@liu2yamichael
Jul 12 2016 02:34
thanks
do you think google plus linkedin and github is enough for a portfolio
Chase
@Belax8
Jul 12 2016 02:38
@liu2yamichael Yep. That's perfect.
Aaron Taylor
@aarontaylor
Jul 12 2016 02:38
@stephepush did you ever figure out how to do the gradient transitions in CSS3 for the effect for the weather you were looking for?
I found this pen and was blown away this was in pure CSS3
Anyway, @stephepush I found this gradient animator. It might help you
liu2yamichael
@liu2yamichael
Jul 12 2016 02:42
chase
Greg Duncan
@GregatGit
Jul 12 2016 02:42
@cjrutherford good stuff - here is an article on how you can add enter functionality (so it searches when you press enter) http://www.mkyong.com/jquery/how-to-check-if-an-enter-key-is-pressed-with-jquery/
Chase
@Belax8
Jul 12 2016 02:43
@liu2yamichael Yes?
liu2yamichael
@liu2yamichael
Jul 12 2016 02:43
can you test to see if the google and git hub parts work for button
i dont have a linkedin account yet
Chase
@Belax8
Jul 12 2016 02:44
@liu2yamichael Yep they work!!
liu2yamichael
@liu2yamichael
Jul 12 2016 02:44
thanks do they login to my accounts
Chase
@Belax8
Jul 12 2016 02:46
@liu2yamichael They don't log into your account. They just show me your account. look at mine https://github.com/Belax8 This is all it does. You can see my account, but you can't change anything about it.
liu2yamichael
@liu2yamichael
Jul 12 2016 02:48
thanks for the help
Chase
@Belax8
Jul 12 2016 02:49
@liu2yamichael anytime
William Cabell
@wbac88
Jul 12 2016 02:50
Hi everyone, I'm working on the weather project and my API isn't working. Could someone check it out and see if anything jumps out?
if (navigator.geolocation) {

  navigator.geolocation.getCurrentPosition(function(position) {

    $.getJSON("https://crossorigin.me/api.openweathermap.org/data/2.5/weather?lat=" + position.coords.latitude + "&lon=" + position.coords.longitude +"&APPID=b227615bf69f72681b17d4d63ebd669a", function(where){
      console.log(where);

    });

  });
};
I'm getting a 500 error on it.
Chris Rutherford
@cjrutherford
Jul 12 2016 02:51
@GregatGit Awesome!!!1 thatnks!!!
@GregatGit thanks!
CamperBot
@camperbot
Jul 12 2016 02:51
cjrutherford sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 676 | @gregatgit |http://www.freecodecamp.com/gregatgit
Dylan
@dhcodes
Jul 12 2016 02:54
@wbac88 for crossorigin, you need to leave the http:// on your api url
Greg Duncan
@GregatGit
Jul 12 2016 02:54
@cjrutherford there is a little dropdown menu on the javascript tab in codepen. If you click on it you should see 'TIDY JS'. If you click on that it helps tidy up your code
Dylan
@dhcodes
Jul 12 2016 02:54
@wbac88 what's your codepen link
William Cabell
@wbac88
Jul 12 2016 02:55
@dhcodes Haha, solved. I thought I'd tried that, but obviously not. Thanks!!
CamperBot
@camperbot
Jul 12 2016 02:55
wbac88 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
CamperBot
@camperbot
Jul 12 2016 02:55
:star2: 1208 | @dhcodes |http://www.freecodecamp.com/dhcodes
William Cabell
@wbac88
Jul 12 2016 02:55
Literally just started so it's pretty bare- bones
Dylan
@dhcodes
Jul 12 2016 02:56
@wbac88 yep works now. Happy coding
Tonye Iyalla
@tiyalla
Jul 12 2016 02:59
@tiyalla
Hey all please check out my twitch.tv JSON API Project. I would love some feedback
http://codepen.io/tiyalla/full/QEqBRp/
Chase
@Belax8
Jul 12 2016 03:06
@tiyalla I think it looks great. Good job!!
Greg Duncan
@GregatGit
Jul 12 2016 03:08
@tiyalla Good work! How did you get your writing to sit in the middle - all mine are right at the top of each channel
Tonye Iyalla
@tiyalla
Jul 12 2016 03:09
@Belax8 thank you!!
CamperBot
@camperbot
Jul 12 2016 03:09
tiyalla sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @belax8 |http://www.freecodecamp.com/belax8
Tonye Iyalla
@tiyalla
Jul 12 2016 03:10
@GregatGit Thank you! i messed with my margin-top, line-height and height.
CamperBot
@camperbot
Jul 12 2016 03:10
tiyalla sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 677 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 12 2016 03:11
@tiyalla Cool - thanks for the tip
CamperBot
@camperbot
Jul 12 2016 03:11
gregatgit sends brownie points to @tiyalla :sparkles: :thumbsup: :sparkles:
:cookie: 184 | @tiyalla |http://www.freecodecamp.com/tiyalla
sunnyu
@q281589190
Jul 12 2016 03:45
@Belax8 very thank u
CamperBot
@camperbot
Jul 12 2016 03:45
q281589190 sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @belax8 |http://www.freecodecamp.com/belax8
Kartik Mudgal
@Sprinting
Jul 12 2016 03:54
this is what i'm getting when I make an api request on codepenio. any idea how to get around this ?
XMLHttpRequest cannot load http://quotesondesign.com/wp-json/posts?filter[orderby]=rand. The 'Access-Control-Allow-Origin' header has a value 'http://null' that is not equal to the supplied origin. Origin 'http://s.codepen.io' is therefore not allowed access.
Elizabeth Fine
@elizabethfinedev
Jul 12 2016 04:16
Hey guys, Im working on my portfolio project and using bootstrap. For some reason, in small or mobile view, all my css styling disappears and im left with just default bootstrap styling . Does anyone know why this might be?
Michael Karpinski
@karpimpski
Jul 12 2016 04:19
hey, I have something like this:
$(".place").click(function(){
    $("this").addClass("red");    
});
but I can't get it to work. does anybody know how to make something like this happen?
Kartik Mudgal
@Sprinting
Jul 12 2016 04:21
this doesn't need to be in quotes
$(".place").click(function(){
    $(this).addClass("red");    
});
gitgenie
@gitgenie
Jul 12 2016 04:21
@Sprinting can i see your code
Kartik Mudgal
@Sprinting
Jul 12 2016 04:22
@gitgenie the javascript?
or the html
?
gitgenie
@gitgenie
Jul 12 2016 04:22
javascript
Michael Karpinski
@karpimpski
Jul 12 2016 04:22
@Sprinting cool, thanks!
CamperBot
@camperbot
Jul 12 2016 04:22
karpimpski sends brownie points to @sprinting :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @sprinting |http://www.freecodecamp.com/sprinting
Kartik Mudgal
@Sprinting
Jul 12 2016 04:23
var Qurl="http://quotesondesign.com/wp-json/posts?filter[orderby]=rand";

function getNewQuote(url)
{
  return new Promise((resolve,reject) => {
    var request =new XMLHttpRequest();
    request.open('GET',url)
    request.onload= () =>{
      if(request.status==200  )
      {
        resolve(request.response);
      } //everything's fine
      else {
        reject(Error(request.statusText));
      }
    };
      request.onerror = () =>{ reject(Error("Network Error"));};
      console.log("request","sent");
    request.send();
  });
};



$(document).ready(function()
{
  $("#new_quote").on('click',function(){
    console.log("New quote button clicked!");
    var quotePromise= getNewQuote(Qurl);
    quotePromise.then((value) => {
      let json=JSON.parse(value);
      console.log("JSON: --> Quote",json[0].content);
      console.log("JSON: --> Quote",json[0].title);

      $(".quote").html(json[0].content);
      $(".quote-author").html(json[0].title);
  });

  });
})
@gitgenie
it doesn't work even when I setup a webserver, but on atom it works
Michael Karpinski
@karpimpski
Jul 12 2016 04:27
hey, can anybody check out my Connect Four game and tell me how to check for victory? I'm clueless on how to start this process
gitgenie
@gitgenie
Jul 12 2016 04:27
@Sprinting I faced the same problem of cross origin
so i mentioned the dataType :jsonp
and it worked fine
Michael Karpinski
@karpimpski
Jul 12 2016 04:31
also, how do i access nested classes with js? i want to access a specific "place" within a specific "column"
<div id="eight" class="column">
        <div class="place a"></div>
        <div class="place b"></div>
        <div class="place c"></div>
        <div class="place d"></div>
        <div class="place e"></div>
        <div class="place f"></div>
        <div class="place g"></div>
        <div class="place h"></div>
    </div>
Kartik Mudgal
@Sprinting
Jul 12 2016 04:33
@gitgenie thanks for pointing this out :)
CamperBot
@camperbot
Jul 12 2016 04:33
sprinting sends brownie points to @gitgenie :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @gitgenie |http://www.freecodecamp.com/gitgenie
Sorin Ruse
@sorinr
Jul 12 2016 04:37
@karpimpski you can use $('#eight").each() function to loop and if($('div').hasClass()) to test for class you want
Michael Karpinski
@karpimpski
Jul 12 2016 04:38
yeah, what I want to do is see if (equivalent in CSS) #eight .place .g has a certain class
well actually just #eight .g
so I guess I'd have to loop and see if it contains .g and the other class
ronaldrdguez
@ronaldrdguez
Jul 12 2016 04:49
@karpimpski why loop? jQuery can do $(‘#eight .a’)?
Michael Karpinski
@karpimpski
Jul 12 2016 04:50
awesome! what would that return? also, right now I'm trying to access the parent element using jQuery
$(".place").click(function(){
    var classes = ($(this).attr('class')).split(" ");
    var thisClass = classes[classes.length - 1];
    alert(this.parent);
    alert(thisClass);
    $(this).addClass(""+colors[player]+"");    
    player == 0 ? player = 1 : player = 0;
});
how would I go about this? currently my .places are each inside of something like this: <div id="eight" class="column">
Michael Karpinski
@karpimpski
Jul 12 2016 04:56
@ronaldrdguez do you know how to do that?
ronaldrdguez
@ronaldrdguez
Jul 12 2016 04:57
@karpimpski It gets you the child of #eight with class a, just like CSS. From there you can access your div parent like $(this).parent().addClass(‘whatever’);
Demo: http://codepen.io/ronaldrodguez/pen/dXkrOO
Michael Karpinski
@karpimpski
Jul 12 2016 04:58
yeah, I'm just trying to check an id
so should .attr('id') work the same with that?
ronaldrdguez
@ronaldrdguez
Jul 12 2016 05:02
The parent id? yes, something like .parent().attr(‘id’) == ‘eight’
Michael Karpinski
@karpimpski
Jul 12 2016 05:03
yeah, i got it. thanks!
DevEarl
@DevEarl
Jul 12 2016 05:06
Can someone lend me some help? I'm creating a portfolio, and stuck on the button tag. My button isn't visible, however text is between the tags.
<title>My Portfolio</title>
<body>

  <div class="container-fluid">
    <div class="row">

      <div class="left well" id="header"><h3 id="headerText">Menu</h3></div>
      <button type="btn btn-primary" id="button1">Test</button>

    </div>
  </div> <!-- close fluid container div -->
  <div><button type="btn btn-primary" id="button1">Test</button></div>







</body>
This message was deleted
body{
  background-color: red;
}

#header{
  position: fixed;
  background-color: #bfbfbf;
  width: 100vw;
  height: 50px;

}
#headerText{
  display: inline;
  padding-left: 100px;


}
#button1{

}
buiphuking
@buiphuking
Jul 12 2016 05:23
anyone help me with math in css, hard to understand
Noel
@knowellG
Jul 12 2016 05:47
Did anyone else have problems with the Open Weather API?
kirbyedy
@kirbyedy
Jul 12 2016 05:58
many people, especially if you use chrome
Hong
@designBuildShipSoftware
Jul 12 2016 06:02
Hi, I try to get the value in an input text box and alert it if enter is pressed, but my code did not work. Here is my code:
This message was deleted
<div>
      <input id="input1" type="text" placeholder="Click here to search">
    </div>
$(document).ready(function() {

   $("#input1").keypress(function(event) {

     if (event.which == 13) {
       alert($("#input1").val());
     };
   });
 });
What was wrong
kirbyedy
@kirbyedy
Jul 12 2016 06:09
@designBuildShipSoftware I dont understand this line: event.which == 13
what does event.which do ?
Hong
@designBuildShipSoftware
Jul 12 2016 06:10
@kirbyedy event.which == 13 implies the Enter key was pressed
not other keys
kirbyedy
@kirbyedy
Jul 12 2016 06:10
ok, never saw that before
I know about keyCode
Hong
@designBuildShipSoftware
Jul 12 2016 06:14
kirbyedy
@kirbyedy
Jul 12 2016 06:19
did you try to use this code from the link in your code ?
Hong
@designBuildShipSoftware
Jul 12 2016 06:20
@kirbyedy I used this code in my codepen
kirbyedy
@kirbyedy
Jul 12 2016 06:23
works for me, just tried it on plnker
Hong
@designBuildShipSoftware
Jul 12 2016 06:24
hmmm
@kirbyedy I see. I forgot to add jQuery library to my code. Thanks!
CamperBot
@camperbot
Jul 12 2016 06:25
designbuildshipsoftware sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1217 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Hong
@designBuildShipSoftware
Jul 12 2016 06:26
This is the 2nd time it happened. duhhh
kirbyedy
@kirbyedy
Jul 12 2016 06:26
happens
Elbert Cortez
@trip16661
Jul 12 2016 06:38
I use a small snipped that adds it along with html head and body tags
if anyone is bored and free please review my code :P
http://codepen.io/Trip1666/full/rLzzXX/
Nathaniel Nasarow
@Torgian
Jul 12 2016 07:04
Hey guys
buiphuking
@buiphuking
Jul 12 2016 07:44

someone plz explain me this ,
if i have many div nest , like

<div class="1">
<div class="2">
<div class="3">

</div>
<div class="4">

</div>
</div>
</div>

and i set position relative for div 1, so div 2 inherit this? so i can use position absolute for div 4 with div1 relative ???

Nathaniel Nasarow
@Torgian
Jul 12 2016 08:03
hey all need some help with my Twitch.tv project
trying to figure out how to append Online or Offline to my divs, but I'm unable to do so for some reason.
Steven Foster
@Rockchalk8985
Jul 12 2016 08:11
Help I need my content to appear over my background image and for that background image to be transparent
CamperBot
@camperbot
Jul 12 2016 08:11
no wiki entry for: i need my content to appear over my background image and for that background image to be transparent
Kartik Mudgal
@Sprinting
Jul 12 2016 08:19
@steven place a div element with 100% height and width and margin=padding =0
@Rockchalk8985 and set it's background to image and opacity to whatever you want
can somebody please help with this?
chrome keeps caching my ajax after the first response. I've tried making the reuqest urls unique but no dice
it works on every other borwser. wth chrome
help?
Steven Foster
@Rockchalk8985
Jul 12 2016 08:47
@Sprinting think I'm still not doing it right can you give me an example.
Kartik Mudgal
@Sprinting
Jul 12 2016 08:49
This message was deleted
this element will the cover the whole screen :)
err, sorry I was editing
i'll post it again
div.fill-screen
{
  margin:0;
  padding: 0;
  background: url(...);
  min-height: 100vh;
opacity: 0.6;
  z-index: -1;

}
Shivaji
@psrijan
Jul 12 2016 09:11
Hey there. I am trying to getJSON string from a file for my RandomQuoteMachine. I tried to use the jquery function .getJson("<local file system>") using local file system url. However this didn't work . I read that we can't have files on our drive as our browser doesn't allow it for security reasons. So i tried doing so by keeping the file in xamp server htdocs and online in my google drive. However, neither of them worked. I think for xamp server we need to give the password and username to access the files. Does anyone has any idea about this?
My code using drive link
$.getJSON("https://drive.google.com/file/d/0B6GOZrq_5t7aWlFnemVrbEMzZ1E/view?usp=sharing", function(json) {
console.log("we are inside folks");
console.log(json.array[0].quote + json.array1.writer);
});

using localhost
$.getJSON("http://localhost/quotelist.json", function(json) {
console.log("we are inside folks");
console.log(json.array[0].quote + json.array1.writer);
});
tried this aswell
   $.getJSON("http://localhost/quotelist.json", function(json) {
       console.log("we are inside folks");
        console.log(JSON.stringify(json));
    });
Shivaji
@psrijan
Jul 12 2016 09:17
$.getJSON("https://drive.google.com/file/d/0B6GOZrq_5t7aWlFnemVrbEMzZ1E/view?usp=sharing", function(json) {
console.log("we are inside folks");
console.log(JSON.stringify(json);
});
also tried
kirbyedy
@kirbyedy
Jul 12 2016 09:26
@psrijan not sure if that google drive is accesible for public
maybe you should just put your quotes inside javascript
as an array
khanh19934
@khanh19934
Jul 12 2016 09:46
hi everybody , i have done my local weather app , but i still dont know when weather type is rain, snow , cold . Any body have answer ?
here is my pen
http://codepen.io/khanh1993/full/EybPXG/
Vyvojar123
@Vyvojar123
Jul 12 2016 11:34
hello I need the all default values for <ul> and <li> I need it to use within one div other use framework settings
gitgenie
@gitgenie
Jul 12 2016 11:40
@khanh19934 at data.weather[0].main
gives you clod/rain/ etc
@khanh19934 you may need to go subtle with the background or get stronger fonts coz we can hardly see your app
DVladimirov
@dvladimirov
Jul 12 2016 11:44
Guys what API did u use on the Local Weather app ? :)
Adam Lichter
@spot1000
Jul 12 2016 11:44
I used the one the challenge suggests, the open weather one
DVladimirov
@dvladimirov
Jul 12 2016 11:44
because currently they all require keys
okay
Adam Lichter
@spot1000
Jul 12 2016 11:45
that one also requires a key, but it's still free
kirbyedy
@kirbyedy
Jul 12 2016 11:46
@khanh19934 not responsive ?
Timm Stelzer
@tstelzer
Jul 12 2016 12:15
hey guys, is this the right place to ask a wordpress dev/php related question?
Omar Adzagic
@1ucid
Jul 12 2016 12:26
hi guys, i need two images place two images one below the other on right side of my page, but when i try to do it one image is on left of the other
how to solve this
Timm Stelzer
@tstelzer
Jul 12 2016 13:17
if you have a look at the addBoxes function, I think the scope of the callback function is wrong, can anyone spot the problem? showPosts wont show up
Ihor54
@Ihor54
Jul 12 2016 13:23
Hello)
Please help me. I build a Tribute page. Do you know how make the inscription under the photo?
Reginald Davis
@madblkman
Jul 12 2016 13:28
Has anyone done the "Missing letters" problem? running into an issue
Jitesh Pabla
@jiteshpabla
Jul 12 2016 13:31
@Ihor54 what do you mean exactly?
@madblkman what's the issue?
Reginald Davis
@madblkman
Jul 12 2016 13:36

@jiteshpabla

function fearNotLetter(str) {

  var arr = str.split(''),
      alpha = 'abcdefghijklmnopqrstuvwxyz'.split(''),
      code = [],
      i = 0,
      missing = [];

  // Convert string into code format
  for(i; i < arr.length; i++) {
    code.push(arr[i].charCodeAt(0));
  }


 for(i; i < code.length; i++) {

    var initial = code[i] + 1,
        next = code[i + 1];

    if ( initial != next ) {
      var letter = initial,
          final = String.fromCharCode(letter);
      missing.push(final);
    }
  } /* --- for(code loop) --- */

} /* --- fearNotLetter --- */

fearNotLetter("abce");

I think I have the logic right to find the missing letter but I seem to be exiting out of the loop with an undefined before I can get to the part that finds the missing letter. How should I rearrange my code so that I can get through the loop first,then if it checks out call undefined?

NixonRichard
@NixonRichard
Jul 12 2016 13:43
hi
i cant get the longtitude and attitude zzz
Dylan
@dhcodes
Jul 12 2016 13:49
@NixonRichard are you using chrome or another browser?
html5 location?
Ihor54
@Ihor54
Jul 12 2016 14:08
@jiteshpabla you have a photo and must write a description below it
Daniel Parvin
@danielparvin
Jul 12 2016 14:10
Hi,
As I work on "Build a JavaScript Calculator," how could I make curved borders (not just border-radius)?
Chrissy Albert
@chrissyalbert
Jul 12 2016 14:10
@khaduch Thank you! I will try that again. I initially started with a function buildOutput but ran into trouble(couldn't get it to work with the if else statements). I will give it another go at some point!
CamperBot
@camperbot
Jul 12 2016 14:10
chrissyalbert sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1427 | @khaduch |http://www.freecodecamp.com/khaduch
Sorin Ruse
@sorinr
Jul 12 2016 14:18
@danielparvin you can try adding shadows to get them some depth
Patrick
@cyas87
Jul 12 2016 14:29
Does anyone have a good resource that could explain the process behind building a navbar? There's a ton of examples online, but they don't really help me understand how the code works.
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 14:36
hi friends
I get the following error when I try to make an ajax request to wikipedia API printed to the console
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://en.wikipedia.org/w/api.php?action=opensearch&search=&limit=10&exsentences=1&namespace=0&format=json. (Reason: CORS header 'Access-Control-Allow-Origin' missing).
what I am doing wrong ?
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 14:41
@cyas87 go to the official docs of bootstrap .. but don't copy an paste the whole code but copy it piece by piece and see what is going in the browser .. you will understand better :smile: .. thus how I have understood the bootstrap navbar
Sorin Ruse
@sorinr
Jul 12 2016 14:41
@cyas87 are you using bootstrap or any other css framework?
MBJean
@MBJean
Jul 12 2016 14:44
@Abdelaziz18003, that's a good question! I had a lot of trouble getting around the same origin policy. There's a couple of possible solutions, but first, have you done any reading into CORS (Cross-Origin Resource Sharing) or into JSON-P (JSON with Padding)?
Tonye Iyalla
@tiyalla
Jul 12 2016 14:45
Check out my Wikipedia viewer project http://codepen.io/tiyalla/full/XKXegj/
Patrick
@cyas87
Jul 12 2016 14:45
@Abdelaziz18003 yes, I am
@Abdelaziz18003 ok, I'll give that a try. Thanks!
CamperBot
@camperbot
Jul 12 2016 14:46
cyas87 sends brownie points to @abdelaziz18003 :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @abdelaziz18003 |http://www.freecodecamp.com/abdelaziz18003
Patrick
@cyas87
Jul 12 2016 14:46
@sorinr Yes, I'm using bootstrap
Sorin Ruse
@sorinr
Jul 12 2016 14:49
@cyas87 then just download the source files and take a look into the sass or less file for navbar and see what css is in there as @Abdelaziz18003 told u. sass or less files are pretty intuitive. you will understand the css inside them
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 14:50
thanks @MBJean
CamperBot
@camperbot
Jul 12 2016 14:50
abdelaziz18003 sends brownie points to @mbjean :sparkles: :thumbsup: :sparkles:
:cookie: 112 | @mbjean |http://www.freecodecamp.com/mbjean
Patrick
@cyas87
Jul 12 2016 14:50
@sorinr sounds good! thanks a lot
CamperBot
@camperbot
Jul 12 2016 14:50
cyas87 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @sorinr |http://www.freecodecamp.com/sorinr
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 14:50
thanks @tiyalla
CamperBot
@camperbot
Jul 12 2016 14:50
abdelaziz18003 sends brownie points to @tiyalla :sparkles: :thumbsup: :sparkles:
:cookie: 185 | @tiyalla |http://www.freecodecamp.com/tiyalla
Sorin Ruse
@sorinr
Jul 12 2016 14:51
@cyas87 the file for bootsrap navbar is called navbar.less
MBJean
@MBJean
Jul 12 2016 14:52
@Abdelaziz18003 try looking here: https://www.webucator.com/tutorial/learn-ajax/cors-jsonp.cfm for a good place to start.
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 14:57
thanks @MBJean so much .. I start to figure out the problem .. you are so kind :+1:
CamperBot
@camperbot
Jul 12 2016 14:57
abdelaziz18003 sends brownie points to @mbjean :sparkles: :thumbsup: :sparkles:
:warning: abdelaziz18003 already gave mbjean points
khanh19934
@khanh19934
Jul 12 2016 15:26
hi http://codepen.io/khanh1993/full/mEqWBV/ how my animate not working when the first click . if i click more it working
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 15:30
@khanh19934 what animation do you mean ?
khanh19934
@khanh19934
Jul 12 2016 15:31
when first click , output have animation :D @Abdelaziz18003
Sorin Ruse
@sorinr
Jul 12 2016 15:36
@khanh19934 when first click on what?
Rasmus Storm
@femganger
Jul 12 2016 15:38
Hello, doing my tribute page, tinkering with the main image. In the example https://codepen.io/FreeCodeCamp/full/NNvBQW/, there's a white box that encapsulates both the image and the caption under it.
I am trying to recreate this by containing the image and the text in <div class="box"> element, but the problem is that the box stretches across the whole parent container: http://codepen.io/femganger/pen/NAwppp.
I want to have it just be a small margin around the image and the text like in the example. I've tried messing about with margins, paddings and other stuff, but I am at a loss. Any tips?
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 15:42
@khanh19934 try to move your "$('li').addClass('animated slideInUp');" inside the for loop
khanh19934
@khanh19934
Jul 12 2016 15:45
@Abdelaziz18003 wow , it;s working , thanks you . but can you explain why is working ?
CamperBot
@camperbot
Jul 12 2016 15:45
khanh19934 sends brownie points to @abdelaziz18003 :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @abdelaziz18003 |http://www.freecodecamp.com/abdelaziz18003
mcorby17
@mcorby17
Jul 12 2016 15:46
Could someone help me try to move the name of the streamer to the right a little bit when the screen is mobile-sized? http://codepen.io/mcorby17/pen/vKydNE?editors=0110
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 15:48
@khanh19934 in the first click you were adding those classes before the "<li>" elements were created and this do nothing .. from the second click the <li>s exist and it add the classes successfully.
khanh19934
@khanh19934
Jul 12 2016 15:49
@Abdelaziz18003 oh i see that , i'm dumb thank you :D
CamperBot
@camperbot
Jul 12 2016 15:49
khanh19934 sends brownie points to @abdelaziz18003 :sparkles: :thumbsup: :sparkles:
:warning: khanh19934 already gave abdelaziz18003 points
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 15:50
not at all @khanh19934 you are welcome :smile:
@femganger try to change the display of your box to inline-block
display: inline-block;
Darrin
@ddschmitz
Jul 12 2016 15:53
Hey guys, with the Wikipedia viewer project, are you adding new html to the page each time? Or what is the concept behind it? I have the api working and can get the information from wikipedia but I'm not sure how to display it? I feel like there is some way to add new html to the page based on each item sent back from the api call or something?
Rasmus Storm
@femganger
Jul 12 2016 15:55
@Abdelaziz18003 That did it! Thanks a bunch :D
CamperBot
@camperbot
Jul 12 2016 15:55
femganger sends brownie points to @abdelaziz18003 :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @abdelaziz18003 |http://www.freecodecamp.com/abdelaziz18003
Abdelaziz Mokhnache
@Abdelaziz18003
Jul 12 2016 15:56
you are welcome @femganger
evandocarmo
@evandocarmo
Jul 12 2016 16:11
Guys
just started working on the wiki viewer
I just wonder if these elements are properly aligned
Gary Siu
@GarySiu
Jul 12 2016 16:21
Looks centered
evandocarmo
@evandocarmo
Jul 12 2016 16:24
thanks @GarySiu
CamperBot
@camperbot
Jul 12 2016 16:24
evandocarmo sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 115 | @garysiu |http://www.freecodecamp.com/garysiu
Ken Haduch
@khaduch
Jul 12 2016 16:32
@chrissyalbert - great - the thing about it is to find the way to pass a particular data structure into the function to keep it uniform. I was thinking that if you create an object to handle the error case (non-existent account) that mimics the non-error cases of offline or broadcasting, then you would be able to just tweak that one bit of data going in for the error case, maybe it will work? You might need another parameter or two to indicate other conditions... It would be great if it works for you!
khanh19934
@khanh19934
Jul 12 2016 16:32
@ddschmitz you can just use prepend(); to display :D
Ken Haduch
@khaduch
Jul 12 2016 16:34
@ddschmitz - if you're using jQuery, there are functions that will append new HTML elements to something in the DOM - like the .appendTo method. As new data is received, you could generate the new HTML and add it to the display. And obviously if you're just using javascript you can find ways to do that, too, since jQuery is just a javascript library.
Ken Haduch
@khaduch
Jul 12 2016 16:40
@mcorby17 - how narrow of a screen width are you shooting for - as I narrow the screen the display really breaks down and things move all over the place into different account areas, etc. I haven't looked at your setup code yet... just curious what you're seeing?
LT1011
@LT1011
Jul 12 2016 16:42
could someone please help me with something.. i was wondering how i could customise my form tag so in css
as its done here
the contact part
Joe
@physicsjoe
Jul 12 2016 16:44
Hoping someone can help. Trying to get the click to activate to change from F to C to F in the weather app. I've tried various placements of the function, all to no avail. Any input is appreciated. Thanks.
http://codepen.io/kaizenjoe/pen/ZOOmOQ?editors=0011
Ken Haduch
@khaduch
Jul 12 2016 16:50
@physicsjoe - I cannot see where you are assigning the click action for your temperature units change button? After you create the button, you then have to assign a click function to it. (I'm still looking at your code...)
Joe
@physicsjoe
Jul 12 2016 16:52
@khaduch Thanks for checking. The button is inserted in javascript; line 13.
CamperBot
@camperbot
Jul 12 2016 16:52
physicsjoe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1428 | @khaduch |http://www.freecodecamp.com/khaduch
Gary Siu
@GarySiu
Jul 12 2016 16:52
@khaduch He's used an old school onclick attribute
Ken Haduch
@khaduch
Jul 12 2016 16:52
@physicsjoe - sorry, I just saw it. I think that you have to add parens after the function name in your onclick="changeTemp()" for one thing.
Joe
@physicsjoe
Jul 12 2016 16:54
@khaduch @GarySiu The parens are a big improvement; at least I'm getting a hit on console.log. Just need to get the numbers to toggle now.
Ken Haduch
@khaduch
Jul 12 2016 16:54
@physicsjoe - after that, your variables are not within the scope of your changeTemp function, so you get errors like this: ReferenceError: tempCelsius is not defined you have to make those variables global (at least "global enough" that the changeTemp() function can access them.
Gary Siu
@GarySiu
Jul 12 2016 16:54
@physicsjoe $('#changeTemp').click(changeTemp) would work but your changeTemp function is broken. If you want to pass it a parameter that data needs to come from somewhere too.
Joe
@physicsjoe
Jul 12 2016 16:55
@GarySiu @khaduch :sparkles: :thumbsup: :sparkles:
Ken Haduch
@khaduch
Jul 12 2016 17:13

@LT1011 - not sure if this will get it all, but using the browser developer tools, the CSS looks like this (and they are using some other CSS generator in their project, so there are probably slicker ways to do this.) I'm just copying and pasting from the browser tools:

/* the form element itself doesn't have too much extra CSS other than width settings */
/* there is a  div that encloses each form element label and input element */

/* the div has the class "form-item" and the CSS for that is */
.form-item {
    position: relative;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #bbb;
}

/* there is a CSS selector for the ".form-item label" that looks like this:  */

.form-item label {
    display: block;
    z-index: 0;
    position: relative;
    top: 2em;
    margin: 0;
    font-size: .85em;
    line-height: 1.764705882em;
    vertical-align: middle;
    vertical-align: baseline;
    opacity: 0;
    -webkit-transition: top .3s ease,opacity .3s ease;
    transition: top .3s ease,opacity .3s ease;
}

/* and the input element itself has a similar CSS selector */
.form-item input, .form-item textarea {
    z-index: 1;
    position: relative;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    border-radius: 0;
    font-size: 1.5em;
    background: 0 0;
    box-shadow: none!important;
    resize: none;
    width: 100%;
}

You can try those and see if it works? It also looks like bootstrap is being used for that particular project, so it might also influence the styling somewhat?

@LT1011 - and with the CSS pre-processor that it appears they are using, they are also adding other pseudo-classes such as :hover, etc... And I see that as you start to type in the form, they pop the label above the input element... I don't know where that is taking place - if it's a CSS or JS action?
I see that it is in the JS, so that's another thing to get into...
LT1011
@LT1011
Jul 12 2016 17:19
@khaduch Thank you, i appreciate the help!
CamperBot
@camperbot
Jul 12 2016 17:19
lt1011 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1429 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jul 12 2016 17:24
@LT1011 - you're welcome - it looks like a nice way to do a form, maybe that will get you on the way?
Rafael Uzcategui
@rafaelg21
Jul 12 2016 17:35
Buenas tardes saludos cordiales, "Show the Local Weather" que API debo usar para ese proyecto. Gracias
Lisa
@Itllbyte
Jul 12 2016 17:43
Hi - I just started the front end development course. This looks like a good place for help when I get stuck.
Spartano
@Spartano
Jul 12 2016 17:55
hy, when i am passing methods down to children in React, from an performance poitn of view, if i have 1000 children i create 1000 methods that point to the parent method?
@rafaelg21 on youtube are some good tutorial too if you are stuck, CODING TUTORIALS 360
Dheerendra Singh
@dsingh110096
Jul 12 2016 18:06
can any tell me if i skip learning thing and go for projects directly? will certificate affected ?
Sorin Ruse
@sorinr
Jul 12 2016 18:08
@dsingh110096 why would u like to skip them?
Kevin Kuehler
@kevinkuehler
Jul 12 2016 18:08
http://codepen.io/kevinkuehler/pen/dXVqdo
I'm trying to get my weather display and picture on the same line. Any idea what's going wrong. They are both inline block elements.
Sorin Ruse
@sorinr
Jul 12 2016 18:13
@kevinkuehler what is the picture u wanna display? haven't seen any code requesting an image?
Kevin Kuehler
@kevinkuehler
Jul 12 2016 18:17
the sun?
@sorinr
Sorin Ruse
@sorinr
Jul 12 2016 18:18
@kevinkuehler i can see the sun on your page. so....? got it you want the sun and temperature on the same line?
Rizwan Ahmed
@rizwanahmed19
Jul 12 2016 18:19
Done with Random Quote Machine :smile:
https://codepen.io/rizwanahmed19/pen/rLGgAa
Kevin Kuehler
@kevinkuehler
Jul 12 2016 18:20
@sorinr Yeah I'm not sure how. I am using inline-block for both elements. Should I do a table instaed?
Sorin Ruse
@sorinr
Jul 12 2016 18:24
@kevinkuehler u can use display: inline but you have to rethink all other elements you want on that line
Islam Ibakaev
@dagman
Jul 12 2016 18:25

i have added foundation-sites through bower
then in gulpfile included path to bower_components/foundation-sites/scss/**/*.scss

gulp.task('styles', () => {
  return gulp.src('app/styles/*.scss')
    .pipe($.plumber())
    .pipe($.sourcemaps.init())
    .pipe($.sass.sync({
      outputStyle: 'expanded',
      precision: 10,
      includePaths: 'bower_components/foundation-sites/scss/**/*.scss'
    }).on('error', $.sass.logError))
    .pipe($.autoprefixer({browsers: ['> 1%', 'last 2 versions', 'Firefox ESR']}))
    .pipe($.sourcemaps.write())
    .pipe(gulp.dest('.tmp/styles'))
    .pipe(reload({stream: true}));
});

then in main.scss added @import 'foundation';
but get return error

Error in plugin 'sass'
Message:
    app\styles\main.scss
Error: File to import not found or unreadable: foundation
       Parent style sheet: C:/Users/User/Desktop/future tech/app/styles/main.scss
        on line 4 of app/styles/main.scss
>> @import 'foundation';
coffeebeanzz
@coffeebeanzz
Jul 12 2016 18:25
@rizwanahmed19 nice :+1:
Like the fonts and colors
@dsingh110096 u only have to do the starred ones to get the certificates
Rizwan Ahmed
@rizwanahmed19
Jul 12 2016 18:27
@coffeebeanzz Thanks a lot :smile:
CamperBot
@camperbot
Jul 12 2016 18:27
rizwanahmed19 sends brownie points to @coffeebeanzz :sparkles: :thumbsup: :sparkles:
:cookie: 654 | @coffeebeanzz |http://www.freecodecamp.com/coffeebeanzz
Kevin Kuehler
@kevinkuehler
Jul 12 2016 18:28
@sorinr Okay thanks!
CamperBot
@camperbot
Jul 12 2016 18:28
kevinkuehler sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 454 | @sorinr |http://www.freecodecamp.com/sorinr
Krishna Sai Gullapalli
@Krish2704
Jul 12 2016 18:28
@rizwanahmed19 is that typedjs?
Kevin Kuehler
@kevinkuehler
Jul 12 2016 18:28
@sorinr But after putting them on the same line, I decided they looked better in separate rows xd
Rizwan Ahmed
@rizwanahmed19
Jul 12 2016 18:29
@Krish2704 No, I tried to use that but didn't work for me, so I figured it out my own way
Sorin Ruse
@sorinr
Jul 12 2016 18:30
@kevinkuehler its all up to you how you design the page
StakeoutFlakeout
@StakeoutFlakeout
Jul 12 2016 18:30
i need help with this jumbotron thing
iin bootstrap
i've got the background-color changed
but there's still this thin white line underneath the page header
Rafael Uzcategui
@rafaelg21
Jul 12 2016 18:32
Thanks @seemly
CamperBot
@camperbot
Jul 12 2016 18:32
rafaelg21 sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:cookie: 37 | @seemly |http://www.freecodecamp.com/seemly
Anuteja Mallampati
@anuteja
Jul 12 2016 18:35
Hi People, I have a css question, I am trying to scale a 1754px div inside 500px div..can anyone help me on how to acheive this?
Darshan
@Dave1089
Jul 12 2016 18:58
width:100% ? @anuteja
Peter Kenward
@PeterKenward
Jul 12 2016 19:03
function getQuote(apiUrl){
  ///get the new Quote and display
  $.getJSON("apiUrl", function(json){
      console.log(JSON.stringify(json));
      });
  }
getQuote ["www.kenward.ca/quotes.json"];
Would someone help me understand why my code above doesn't work?
Kenzo Mendoza
@KenzoM
Jul 12 2016 19:04
Has anyone finished with tic tac toe game?
I am having trouble to restart the game automatically when the first game is over
Anuteja Mallampati
@anuteja
Jul 12 2016 19:04
@Dave1089 I have a webpage which has a 1754px width with widgets inside it, and I am showing that page inside a div box which is about 467px, I am trying to scale the webpage to fit into the div without losing aspect ratio..any help on this?
Ken Haduch
@khaduch
Jul 12 2016 19:05
@PeterKenward - if there is any way for that to work, you have to call the function using parentheses around the argument, not square brackets...
@PeterKenward - and then you would not put the function argument name apiUrl in quotes when you make the $.getJSON() call... just use the variable name instead of making it a string.
Darshan
@Dave1089
Jul 12 2016 19:07
@anuteja http://jsfiddle.net/fzAge/4/ is that what you mean?
Anuteja Mallampati
@anuteja
Jul 12 2016 19:08
@Dave1089 most likely, but my webpage (1754px)should sit inside a div of width (461px)
@Dave1089 I tried using transform: scale() property, but i am losing the aspect ratio for some reason. I tried implementing the same using an iFrame which works fine
Peter Kenward
@PeterKenward
Jul 12 2016 19:10
So, Ken, when calling the function it's ( ) not [ ]? And then by using 'apiUrl' not apiUrl when calling $.getJSON() I'm calling the function with the 'value' of the string not....
Omar Adzagic
@1ucid
Jul 12 2016 19:11
guys
how to make two images appear one below another
on right side of a page
Peter Kenward
@PeterKenward
Jul 12 2016 19:12
I made the changes as suggested Ken and now I'm getting the error "ReferenceError: $ is not defined" (using repl.it)??
Ken Haduch
@khaduch
Jul 12 2016 19:14

@PeterKenward - that is correct. When you call a function, you put the arguments in parens - in your case,


getQuote ("http://www.kenward.ca/quotes.json");

// and then you would use it in the function as:

function getQuote(apiUrl){
  ///get the new Quote and display
  $.getJSON(apiUrl, function(json){
      console.log(JSON.stringify(json));
      });
  }

If everything is correct, and you probably would also need to put http:// (I just added it in the code that I posted) on the beginning of your URL - but I haven't tried any of this, just pointing out syntax and a couple practical things that I've seen through helping people with these.

Sorin Ruse
@sorinr
Jul 12 2016 19:14
@PeterKenward load jquery
Peter Kenward
@PeterKenward
Jul 12 2016 19:15
thanks @khaduch
CamperBot
@camperbot
Jul 12 2016 19:15
peterkenward sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1431 | @khaduch |http://www.freecodecamp.com/khaduch
Peter Kenward
@PeterKenward
Jul 12 2016 19:15
Sorin I'm off to load jQuery. Why didn't I think of that??
Sorin Ruse
@sorinr
Jul 12 2016 19:17
@PeterKenward because $ is not defined means you have not loaded jquery that defines $ as a function
Peter Kenward
@PeterKenward
Jul 12 2016 19:18
@sorinr I only have a free account with repl.it, is it possible to load jQuery?
Sorin Ruse
@sorinr
Jul 12 2016 19:19
@PeterKenward yep. if you are using codepen just go to settings->js tab and choose jquery
Did I miss something?!>
(jQuery is loaded now btw)
Sorin Ruse
@sorinr
Jul 12 2016 19:26
@PeterKenward where is ur other html,css code?
Peter Kenward
@PeterKenward
Jul 12 2016 19:28
I have another pen with that. I just wanted to get a function to fetch the JSON working... which I don't seem to have achieved yet...
But then I thought, hey maybe I can use the same jQuery technique as I already did instead of what I was struggling with above...
Chris Rutherford
@cjrutherford
Jul 12 2016 19:30
the twitch API doesn't seem to like me. it says all the users are "Not Found"
Sorin Ruse
@sorinr
Jul 12 2016 19:38
@PeterKenward and do you expect this html tag: <button id = "getQuote" to trigger your function getQuote?
Chris Rutherford
@cjrutherford
Jul 12 2016 19:43
can someone tell me what's wrong with this api call?
$.getJSON('https://api.twitch.tv/kraken/streams/'+ user +'?callback=?', function(json){
                     console.log(json);
                   });
Sorin Ruse
@sorinr
Jul 12 2016 19:46
@cjrutherford what is returning your console.log?
Chris Rutherford
@cjrutherford
Jul 12 2016 19:50

here is a sample of the console output:

well never mind. I'm getting things now....

it's finally bringing up stuff.
now I just have to figure out how to tell from the JSON that they're actually streaming now....
EdenSweden
@EdenSweden
Jul 12 2016 19:52
Hi guys. I am finishing up my portfolio page project. I noticed in the example page that there are scrolling transitions when you click on the links in the navbar. Is it possible to do those with bootstrap/css or do you need javascript for that?
Daniel Parvin
@danielparvin
Jul 12 2016 19:53
Hi folks,
Is there a way to curve the side (not just the corner) of a border so as to make it look like the calculator in this video? https://www.freecodecamp.com/challenges/build-a-javascript-calculator
a way *in CSS?
Daniel Parvin
@danielparvin
Jul 12 2016 19:58
@disjfa Thank you. I wasn't aware of that functionality.
CamperBot
@camperbot
Jul 12 2016 19:58
danielparvin sends brownie points to @disjfa :sparkles: :thumbsup: :sparkles:
:cookie: 349 | @disjfa |http://www.freecodecamp.com/disjfa
Chris Rutherford
@cjrutherford
Jul 12 2016 20:14

okay, having different trouble with the twitch api....

VM5698 jquery-2.2.4.min.js:4 GET https://api.twitch.tv/kraken/streams/test_channel/ESL_SC2?callback=jQuery2240850582582774086_1468354071090&_=1468354071091 404 (Not Found)

from a call like this:

  for(var i=0;i< users.length; i++){
    $.getJSON('https://api.twitch.tv/kraken/streams/test_channel/' + users[i] +'?callback=?', function(json){
      console.log(json);
    });
Darrin
@ddschmitz
Jul 12 2016 20:15

So say my Json object has an object under pages that has a different value each time like this.

"query":{
"pages":{
"165456":{
"pageid":165456,
"title":"Big cat",
},
"6678":{
"pageid":6678,
"title":"Cat",
},
"2217255":{
"pageid":2217255,
"title":"Cats (disambiguation)",
},

I need to get to the title fields that are inside each of the numbered fields. How can I do this? Is there a way to use like the wildcard (*) option or something?

Query->pages->someNumber How do I account for the some number for each page?
Elbert Cortez
@trip16661
Jul 12 2016 20:16
@cjrutherford
are u sure it supposed to give this
callback=jQuery2240850582582774086_1468354071090&_=1468354071091 404
Omar Adzagic
@1ucid
Jul 12 2016 20:16
is there way to make one div on top of another div without using <div class="row"> ??
Stephen James
@sjames1958gm
Jul 12 2016 20:16
@ddschmitz You can use object.keys or for .. in loop
Elbert Cortez
@trip16661
Jul 12 2016 20:16
@ddschmitz try to reformat it using ```
Darrin
@ddschmitz
Jul 12 2016 20:17
"query":{
"pages":{
"165456":{
"pageid":165456,
"title":"Big cat",
},
"6678":{
"pageid":6678,
"title":"Cat",
},
"2217255":{
"pageid":2217255,
"title":"Cats (disambiguation)",
},
Chris Rutherford
@cjrutherford
Jul 12 2016 20:17
@trip16661 I was wanting to see if the channel was online. I think that one might not be the best example....
VM5698 jquery-2.2.4.min.js:4 GET https://api.twitch.tv/kraken/streams/test_channel/OgamingSC2?callback=jQuery2240850582582774086_1468354071092&_=1468354071093
Elbert Cortez
@trip16661
Jul 12 2016 20:17
@1ucid if u want it on the top of another div u can use z-index
Omar Adzagic
@1ucid
Jul 12 2016 20:18
i have two images in <div class="thumbnail"> and i want them to appear on top one another
i will check z-index, thank you @trip16661
CamperBot
@camperbot
Jul 12 2016 20:18
1ucid sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 389 | @trip16661 |http://www.freecodecamp.com/trip16661
Darrin
@ddschmitz
Jul 12 2016 20:18
@sjames1958gm will those still work if they are nested in side other objects? I could try using the object.keys approach.
Elbert Cortez
@trip16661
Jul 12 2016 20:19
@cjrutherford i think its due to a bad route i think you should check your url instead
Chris Rutherford
@cjrutherford
Jul 12 2016 20:22
so from my understanding, the API base url is 'https://api.twitch.tv/kraken/ ' then the specific attributes needed like channel and then stream in between slases right?
Elbert Cortez
@trip16661
Jul 12 2016 20:24
@ddschmitz

query.pages["165456"].tittle
Darrin
@ddschmitz
Jul 12 2016 20:24
@sjames1958gm Object.keys will work I think but it won't be pretty haha. Thanks
CamperBot
@camperbot
Jul 12 2016 20:24
ddschmitz sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 1810 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
Stephen James
@sjames1958gm
Jul 12 2016 20:25
@ddschmitz for .. in would be my choice.
Darrin
@ddschmitz
Jul 12 2016 20:25
@trip16661 The problem was though that there are multiple objects or numbers under "pages" so I couldn't hard code in numbers.
Elbert Cortez
@trip16661
Jul 12 2016 20:26
like step for in to go
or $.each if u are using jquery if i remember well
Peter Kenward
@PeterKenward
Jul 12 2016 20:26

@sorinr you wrote:

@PeterKenward and do you expect this html tag: <button id = "getQuote" to trigger your function getQuote? I think I do yes....

PeterKenward @PeterKenward scratches head
Darrin
@ddschmitz
Jul 12 2016 20:28

@sjames1958gm Seems as though for each is only supported in firefox. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for_each...in

That seems to be a no go then.

Stephen James
@sjames1958gm
Jul 12 2016 20:29
@ddschmitz :(
Darrin
@ddschmitz
Jul 12 2016 20:29
@sjames1958gm I think if that is what you meant by for each.
yeah
Darrin
@ddschmitz
Jul 12 2016 20:31
@sjames1958gm Yeah should have red the big red box at the top of my link saying it was depricated haha.
Chris Rutherford
@cjrutherford
Jul 12 2016 20:32
@trip16661 thanks, but how do I tell from this if they're streaming? the JSON is complex
CamperBot
@camperbot
Jul 12 2016 20:32
cjrutherford sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 390 | @trip16661 |http://www.freecodecamp.com/trip16661
Sorin Ruse
@sorinr
Jul 12 2016 20:34
@PeterKenward sorry for my eng. what i meant is that your id="getQuote" will never trigger an event unless in your js code you make a function getQuote and trigger it accordingly
Elbert Cortez
@trip16661
Jul 12 2016 20:36
@cjrutherford the documentation might help more but i will just trow this
and you will do the rest
it's not really that complicated
believe me when u get to the wikipedia api you will see what i mean D:
Chris Rutherford
@cjrutherford
Jul 12 2016 20:39
@trip16661 had trouble with the wikipedia one, and that one was a fricken mess! this one just isn't giving me a clear description of how to get the exact info I need. there's no documentation to what the status codes mean, or a clear "User is live now" in the JSON
looks like I will have to do two calls.... one to check the status of the stream, then the other for the channel info....
Daniel Parvin
@danielparvin
Jul 12 2016 20:45
Hi,
What is the most efficient way to make my + button span two vertical rows in my calculator project?
http://codepen.io/danielparvin/pen/zBPGwG
*vertically span two horizontal rows
Elbert Cortez
@trip16661
Jul 12 2016 20:54
@danielparvin ur calculator breaks pretty easily and don't allow chaining D:
Daniel Parvin
@danielparvin
Jul 12 2016 20:54
@trip16661 I know; I'm still tweaking the js.
That's not what I'm asking about.
Elbert Cortez
@trip16661
Jul 12 2016 20:55
I know was just a side comment
Daniel Parvin
@danielparvin
Jul 12 2016 20:55
Ok, thanks!
Olga C
@Octopinky
Jul 12 2016 20:56
Whats the difference between carriage return and new line? \r and\n?
Robel Tesfaye
@Robel612
Jul 12 2016 20:56
Hey guys, I'm having difficulty using bootstrap buttons on code pen. Can anybody help me out?
Lukáš Linhart
@panda7789
Jul 12 2016 20:58
@Robel612 go to settings of project -> css -> quick-add -> bootstrap :)
Robel Tesfaye
@Robel612
Jul 12 2016 20:59
@panda7789 Thank you so much!
CamperBot
@camperbot
Jul 12 2016 20:59
robel612 sends brownie points to @panda7789 :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @panda7789 |http://www.freecodecamp.com/panda7789
Ken Haduch
@khaduch
Jul 12 2016 21:14
@Octopinky - you can read a lot about it here: http://stackoverflow.com/questions/1761051/difference-between-n-and-r
Olga C
@Octopinky
Jul 12 2016 21:14
thank you @khaduch
CamperBot
@camperbot
Jul 12 2016 21:14
octopinky sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1432 | @khaduch |http://www.freecodecamp.com/khaduch
Philip Eckert
@pae4557
Jul 12 2016 21:15
So, how do people typically call the wikipedia API? JSONP or CORS? From what I understand, JSONP won't work with the API because it can only send a get request, and CORS wont work because I can't set it up on codepen?
Olga C
@Octopinky
Jul 12 2016 21:17
@khaduch basically, there is no difference at the level that we are learning here right now, and there is a huge difference if to go deep into coding in different languages and opening files using different programs.
pufla
@pufla
Jul 12 2016 21:22
hey anyone know where to place <style> ccs to change the color of the h2? kinda stuck arrr!!
css...
Ken Haduch
@khaduch
Jul 12 2016 21:39
@Octopinky - I think that for all practical purposes, using \n is what you'll see most. I don't recall many times when I've ever used \r - but it is good to know that both exist and that there might be times when you'll need to use the other.
Peter Kenward
@PeterKenward
Jul 12 2016 21:39
@sorinr Thanks :)
CamperBot
@camperbot
Jul 12 2016 21:39
peterkenward sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 455 | @sorinr |http://www.freecodecamp.com/sorinr
Olga C
@Octopinky
Jul 12 2016 21:40
@khaduch I hear ye!
@pufla what does your code look like?
Ken Haduch
@khaduch
Jul 12 2016 21:40
@pufla - you'll put something between the <style> ... </style> tags. It will have a CSS selector of h2 and will look something like this:
<style>
h2 {
    color: red; /* or whatever color you're supposed to use */
}
</style>
pufla
@pufla
Jul 12 2016 21:41

<h2 style="color: red">CatPhotoApp</h2>

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

still in the beginning stages just started
Ken Haduch
@khaduch
Jul 12 2016 21:42
@pufla - there might be other things that they are looking for in the testing code, if you're doing one of the fcc challenges or waypoints. Look at the test results and outputs... If they want you to use the style attribute, then that looks like it would be correct? What are they asking for, in particular? What is the name of the lesson?
pufla
@pufla
Jul 12 2016 21:44
to change to whole code color using css selector <style>
h2 {color: red;}
</style>
i just dont know where to place them in what configeration...stuck!
Elbert Cortez
@trip16661
Jul 12 2016 21:45
in the head
pufla
@pufla
Jul 12 2016 21:46
@trip16661 thanks
CamperBot
@camperbot
Jul 12 2016 21:46
pufla sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 391 | @trip16661 |http://www.freecodecamp.com/trip16661
Troy
@Socrates714
Jul 12 2016 21:58
My joke tribute page looks very different in the window in this chat than it does when I load it on my screen. How do I make it stay the same on different sized screens? I just got to the tribute page. Do I currently lack the expertise to do this?
Elbert Cortez
@trip16661
Jul 12 2016 22:07
@Socrates714 im not a bootstrap user so i dont know if i can be of much help but i think you need to make it responsive with the grid system they have
if you want to make it the raw way you can use media queries
Abdul Shabbir
@abdulqshabbir
Jul 12 2016 22:13
@Socrates714 add the class 'img-responsive' to make your image responsive (it will resize for smaller screens)
@Socrates714 Also, read up on bootstrap. They make it really easy to make content responsive depending on the screen size. Start by reading about bootstraps 'grid systems'.
Eric Hartline
@wildlifehexagon
Jul 12 2016 22:19
Hi everyone, I have a weird problem with my local weather app. Most of the time, when I first load the page, it doesn't load everything -- only the header, icon and buttons. But when I refresh, everything is working properly. Any idea what is causing this? Here's my Codepen: http://codepen.io/wildlifehexagon/full/vKWpxY/
pufla
@pufla
Jul 12 2016 22:23

got everything right so far but my code won't change to the color i need....<style>
h2 {color: blue;}CatPhotoApp</h2>

<p> {color:blue;} Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
</style>

Abdul Shabbir
@abdulqshabbir
Jul 12 2016 22:23
@wildlifehexagon your code is really organized! Very easy to read.
pufla
@pufla
Jul 12 2016 22:24
how can i fix this?
tryna get all text blue..
any suggestion?
Abdul Shabbir
@abdulqshabbir
Jul 12 2016 22:25
@wildlifehexagon I'm guessing it isn't your problem, but more of a codepen problem. Since you have a $(document).ready function, it requires a page reload for things to display. This is my guess anyway.
Darshan
@Dave1089
Jul 12 2016 22:26
@pufla you are confusing between css and html.. you don't put html tags in between <style></style>
but you can add inline style inside <h2> and <p> tag like <h2 style="color:blue;">
pufla
@pufla
Jul 12 2016 22:28
i get that but it wants me to use css...i'm still new to this but i learn fast so what you think i should do?
@Dave1089
Elbert Cortez
@trip16661
Jul 12 2016 22:29
@wildlifehexagon it's a coors problem
@wildlifehexagon
vKWpxY:1 XMLHttpRequest cannot load http://freegeoip.net/json/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
Darshan
@Dave1089
Jul 12 2016 22:30
okey @pufla , I don't know what exercise you are on but if you want to give blue color to p and h2 tag , you can do it using inline css which I suggested.. and you can also do it inbetween <style> tags puttin
p{
color:blue;
};
Chris Rutherford
@cjrutherford
Jul 12 2016 22:30
Still trying to figure our why my code isn't running when the user is online....
pufla
@pufla
Jul 12 2016 22:31
cool..
Elbert Cortez
@trip16661
Jul 12 2016 22:31
@pufla pufla you are getting it wrong style is a tag you put in the head tag
pufla
@pufla
Jul 12 2016 22:31
smdh!! gotcha
@trip16661
Elbert Cortez
@trip16661
Jul 12 2016 22:31
inside of the style tag you put how to style your html tags like h1 h2 h3 h4
the way to target a specific tag is by either class id or by it's name
like this
h1 {
color:red;
}
but all inside of the style tag
there are actually 3 ways to do it
by a stylesheet or csss
style tag
or inline style
pufla
@pufla
Jul 12 2016 22:34
bingo..now i get it make so much more sense..thanks trip here some brownies!! lol
@trip16661 thanks
CamperBot
@camperbot
Jul 12 2016 22:34
pufla sends brownie points to @trip16661 :sparkles: :thumbsup: :sparkles:
:warning: pufla already gave trip16661 points
Elbert Cortez
@trip16661
Jul 12 2016 22:34
<h1 style="color:red"></h1>
pufla
@pufla
Jul 12 2016 22:34
guess they said you had enough lol..but thanks tho
Elbert Cortez
@trip16661
Jul 12 2016 22:35
that's inline style
pufla
@pufla
Jul 12 2016 22:35
copy that
Elbert Cortez
@trip16661
Jul 12 2016 22:36
but try to see carefuly what they ask you to do and the examples they give you so you don't come here that often xD
Eric Hartline
@wildlifehexagon
Jul 12 2016 22:36
@abdulqshabbir @trip16661 Thanks! I'm having the same problems on other domains though, so I don't think it's just a Codepen issue
CamperBot
@camperbot
Jul 12 2016 22:36
wildlifehexagon sends brownie points to @abdulqshabbir and @trip16661 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @trip16661 |http://www.freecodecamp.com/trip16661
:cookie: 341 | @abdulqshabbir |http://www.freecodecamp.com/abdulqshabbir
Elbert Cortez
@trip16661
Jul 12 2016 22:37
@wildlifehexagon it's because of the api you are using i think
Eric Hartline
@wildlifehexagon
Jul 12 2016 22:37
@abdulqshabbir @trip16661 Even when I open the HTML file on my local machine it happens
@trip16661 So there's a conflict between freegeoip and openweathermap?
Elbert Cortez
@trip16661
Jul 12 2016 22:38
check the error it gives on f12
always check for errors on the develper console
I havent used that myself so i cant tell you
but openweather usually have problems because of https http
mine gets broken if you use chrome xD
Eric Hartline
@wildlifehexagon
Jul 12 2016 22:41
@trip16661 Interesting, so it sounds like a domain issue... I saw the error in dev tools but wasn't sure what was up since it would work on reload. I'll look into it some more
Shannon Palm
@ShannonPalm
Jul 12 2016 22:51
Hey guys! I’m starting the “Build a Personal Portfolio Webpage” section and I really don’t even know here to begin. Any pointers for starting out?
twickster
@twickster
Jul 12 2016 22:52
@ShannonPalm make a "wireframe" basically a simple plan on a piece of paper of what the site will look like, the challenge itself has checkboxes you need to fill.
Greg Duncan
@GregatGit
Jul 12 2016 22:55
@ShannonPalm You might have to build an ordinary portfolio before you make you really like - here is a good template http://www.w3schools.com/bootstrap/bootstrap_scrollspy.asp
getQuote() isn't working. Can someone explain why please?
Alexey Bakhtin-Bibikov
@Hawkite
Jul 12 2016 22:58
I received my Front End Certificate without my name on it. Am I able to change that? https://www.freecodecamp.com/hawkite/front-end-certification
Greg Duncan
@GregatGit
Jul 12 2016 22:59
@cjrutherford i think this may be a problem
 if (json.stream !== null) {
        state = 'Online';
Hadouken
@Harry97
Jul 12 2016 23:02
@PeterKenward Are you sure there are no typos regarding the api url ?
Olga C
@Octopinky
Jul 12 2016 23:03
@PeterKenward what makes you think that it is not working? All console messages are going through, hence the code is running
Eric Hartline
@wildlifehexagon
Jul 12 2016 23:05
@Hawkite I would send an email to team@freecodecamp.com
Peter Kenward
@PeterKenward
Jul 12 2016 23:05
Yes it's working in that sense Olga. I would also like the function to fetch some JSON data and display it on the screen... it's not working in that sense...
Hadouken
@Harry97
Jul 12 2016 23:06
@PeterKenward I've managed to get the function to fire
but the api isn't working
it says 404 not found!
Greg Duncan
@GregatGit
Jul 12 2016 23:06
Peter Kenward
@PeterKenward
Jul 12 2016 23:09
There's a gap in my understanding here: I created a JSON file, named it quotes.json and loaded it up to my webserver: you can see it at www.kenward.ca/quotes.json this is not the same as a simple api then?
Peter Kenward
@PeterKenward
Jul 12 2016 23:11
@Harry97 Where did you run the function that you saw the Error 404 message please?
Troy
@Socrates714
Jul 12 2016 23:11
Why, when I view my tribute page in this chat, are my h2s taking up multiple lines and not lining up with the edge of my picture when they take 1 line and do line up with the left edge of my picture when I open the page in my browser? Am I misunderstanding something about col-xs-offset?
Eric Hartline
@wildlifehexagon
Jul 12 2016 23:11
@GregatGit That seems to work. Tried in Chrome and Firefox, and both Codepen and local. Haven't been able to replicate the bug in any of them. Thank you!
CamperBot
@camperbot
Jul 12 2016 23:11
wildlifehexagon sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 678 | @gregatgit |http://www.freecodecamp.com/gregatgit
Greg Duncan
@GregatGit
Jul 12 2016 23:12
@wildlifehexagon :+1:
Troy
@Socrates714
Jul 12 2016 23:14
?
Hadouken
@Harry97
Jul 12 2016 23:14
@PeterKenward I apologize I entered a space within the api url so it didn't work
Peter Kenward
@PeterKenward
Jul 12 2016 23:15
'should' the url work?
Hadouken
@Harry97
Jul 12 2016 23:15
I modified the api to "https://kenward.ca/quotes.json"
and it's still not working
Peter Kenward
@PeterKenward
Jul 12 2016 23:16
Hadouken
@Harry97
Jul 12 2016 23:16
I get this error in my console "GET https://kenward.ca/quotes.json net::ERR_INSECURE_RESPONSE"
Peter Kenward
@PeterKenward
Jul 12 2016 23:17
but it's not https://......
Fon Socrates Anye
@anye55
Jul 12 2016 23:17
What are brownie points ?
Peter Kenward
@PeterKenward
Jul 12 2016 23:18
Chatbot?
Hadouken
@Harry97
Jul 12 2016 23:18
@PeterKenward I understand what you are pointing to m8
but when I enter the api without the "https" I get an error regarding same-origin-policy
I've tried adding http
replacing it*
Peter Kenward
@PeterKenward
Jul 12 2016 23:19
Thanks @Harry97
CamperBot
@camperbot
Jul 12 2016 23:19
peterkenward sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Hadouken
@Harry97
Jul 12 2016 23:19
and even added "callback=?" at the end to see if it helps but I still get an error each time I try to run it
Peter Kenward
@PeterKenward
Jul 12 2016 23:19
I guess it's not working because of the same-origin policy then...
I read that on the jQuery page once already... maybe that's what I need to figure out..?
@Harry97 Thanks
CamperBot
@camperbot
Jul 12 2016 23:20
peterkenward sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Ken Haduch
@khaduch
Jul 12 2016 23:23
@ShannonPalm - I liked the w3schools bootstrap section and especially the "themes", where they walk you through the design of some portfolio-like web sites - really helpful for getting some direction on how to go, if you are using bootstrap, and perhaps even if you aren't?
Chris Rutherford
@cjrutherford
Jul 12 2016 23:23
@GregatGit isn't that what I have? I just wanted to, if the json from the stream call comes back as anything but null, process the stuff.
Greg Duncan
@GregatGit
Jul 12 2016 23:25
@cjrutherford what if you get back this
{
"error": "Not Found",
"message": "Channel 'soedsaf' does not exist",
"status": 404
}
@cjrutherford as opposed to
{
"stream": null,
"_links": {
"self": "https://api.twitch.tv/kraken/streams/freecodecamp",
"channel": "https://api.twitch.tv/kraken/channels/freecodecamp"
}
}
Chris Rutherford
@cjrutherford
Jul 12 2016 23:27
@GregatGit that makes sense
Ken Haduch
@khaduch
Jul 12 2016 23:28
@cjrutherford - one thing that might be a problem, and I say might, is that you are doing asynchronous requests within your for loop, and using the value of i in a lot of places, where it might be changed before you get the return back (probably will be changed - in cases like this, the for loop will essentially be "free-running" and queue up all of the requests, i will be incremented beyond the end of the array, and probably get you a lot of undefined and unknown stuff. I haven't tried to confirm this, just that I've seen this kind of thing happen, and I'm just examining your code.

@cjrutherford - I just confirmed it by putting a console.log to print the value of i, and got this (partial output):

Object {stream: null, _links: Object}
VM2433 console_runner-d0a557e….js:1 the value of i = 10
VM2433 console_runner-d0a557e….js:1 Object {stream: Object, _links: Object}
VM2433 console_runner-d0a557e….js:1 the value of i = 10
VM2433 console_runner-d0a557e….js:1 Object {stream: Object, _links: Object}
VM2433 console_runner-d0a557e….js:1 the value of i = 10
VM2433 console_runner-d0a557e….js:1 Object {stream: null, _links: Object}
VM2433 console_runner-d0a557e….js:1 the value of i = 10
VM2433 console_runner-d0a557e….js:1 Object {stream: null, _links: Object}
VM2433 console_runner-d0a557e….js:1 the value of i = 10
VM2433 console_runner-d0a557e….js:1 Object {stream: null, _links: Object}
VM2433 console_runner-d0a557e….js:1 the value of i = 10
VM2433 console_runner-d0a557e….js:1 Object {stream: null, _links: Object}

So you cannot use i within the loop as you are doing. I have an initial take on this project that I was doing for the practice, and found that it was better to rely on some information in the returned data, such as the username, or something else, that will be correct for that particular return value.

Greg Duncan
@GregatGit
Jul 12 2016 23:30
@cjrutherford the only api you need is https://api.twitch.tv/kraken/streams/
if it's online then all the data is given in that call
if its offline it gives you the channel api so now you can do that call
if there is another problem (doesn't exit) you won't be given the channel api
Darshan
@Dave1089
Jul 12 2016 23:36
can anyone explain me Arguments Optional Algorithm?
Juan Moraza
@Morazajuan
Jul 12 2016 23:37
hello Guys! Anyone know how can i fade out previous text then empty then fade in new text? here is my code
http://codepen.io/morazajuan/pen/zBPAqJ
Ken Haduch
@khaduch
Jul 12 2016 23:38
@Dave1089 - what do you need to know about it? Have you gotten anywhere - passing any of the tests? If so, which ones aren't passing? Do you have code that you can post?
Hadouken
@Harry97
Jul 12 2016 23:38
@PeterKenward When I use this url I get no errors at all
Hadouken
@Harry97
Jul 12 2016 23:39
@PeterKenward but the quote doesn't change so you may have some problems with the rest of your jQuery code
Chris Rutherford
@cjrutherford
Jul 12 2016 23:39
@GregatGit @khaduch thanks for the help! this is all good stuff!
CamperBot
@camperbot
Jul 12 2016 23:39
cjrutherford sends brownie points to @gregatgit and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 679 | @gregatgit |http://www.freecodecamp.com/gregatgit
:star2: 1433 | @khaduch |http://www.freecodecamp.com/khaduch
Greg Duncan
@GregatGit
Jul 12 2016 23:40
@cjrutherford :+1:
Juan Moraza
@Morazajuan
Jul 12 2016 23:40
@GregatGit yeah thats what i have, the problem is that when i press the button it first deletes the text then fades out new text then fade in new text
*empty i meant
Ken Haduch
@khaduch
Jul 12 2016 23:41
@cjrutherford - you're welcome. If you want to read about this type of problem, it is a "closure" type of issue, this article: http://javascriptissexy.com/understand-javascript-closures-with-ease/ discusses this phenomenon / problem in item 3 of the article.
Peter Kenward
@PeterKenward
Jul 12 2016 23:43
@Harry97 Thanks. That's helpful.
CamperBot
@camperbot
Jul 12 2016 23:43
peterkenward sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
Darshan
@Dave1089
Jul 12 2016 23:43
@khaduch closures
Greg Duncan
@GregatGit
Jul 12 2016 23:45
@Morazajuan you have the code - you just have to play with it till it behaves
Peter Kenward
@PeterKenward
Jul 12 2016 23:45
@Harry97 this bit still isn't working I don't think? $(".quote").html(JSON.stringify(json));
Juan Moraza
@Morazajuan
Jul 12 2016 23:46
could you please give me just a hint? is it the order of the text called or the code should be inside or outside of it? @GregatGit Thank you !
CamperBot
@camperbot
Jul 12 2016 23:46
morazajuan sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 680 | @gregatgit |http://www.freecodecamp.com/gregatgit
Hadouken
@Harry97
Jul 12 2016 23:46
@PeterKenward yeah I believe so. I'm working on a solution to it
btw why do u have to use stringfy ?
Greg Duncan
@GregatGit
Jul 12 2016 23:47
@Morazajuan when you click click it fadout - then after the call is made - fadeIn
Peter Kenward
@PeterKenward
Jul 12 2016 23:48
I was just trying to establish that I was 'getting' the JSON. I figured this way I would see if it's working...
Also following the order in the FCC tutorials
Hadouken
@Harry97
Jul 12 2016 23:48
@PeterKenward There's another problem
Peter Kenward
@PeterKenward
Jul 12 2016 23:48
oh?
Hadouken
@Harry97
Jul 12 2016 23:48
try to console.log(json)
I get nothing
Peter Kenward
@PeterKenward
Jul 12 2016 23:49
yes, so getJSON isn't getting anything...?
Hadouken
@Harry97
Jul 12 2016 23:49
yeah
Juan Moraza
@Morazajuan
Jul 12 2016 23:49
@GregatGit Thanks! ;D
CamperBot
@camperbot
Jul 12 2016 23:49
morazajuan sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: morazajuan already gave gregatgit points
Hadouken
@Harry97
Jul 12 2016 23:49
you can notice this in ur console right ?
Peter Kenward
@PeterKenward
Jul 12 2016 23:49
yes
Greg Duncan
@GregatGit
Jul 12 2016 23:50

@Morazajuan this is the first line of getJSON call

$("h2").append(a[0].content + "<p>— " + a[0].title + "</p>");

so everytime the call is made that is the first thing that shows up

Hadouken
@Harry97
Jul 12 2016 23:51
How come it yields nothing ? I mean, if you typed "http://kenward.ca/quotes.json?callback=?" in your web address bar, you'd see it works perfectly.
Greg Duncan
@GregatGit
Jul 12 2016 23:52
@Morazajuan I also recomend making the blue background a fixed size so it doesn't distract when it changes quotes
Peter Kenward
@PeterKenward
Jul 12 2016 23:52
I have been scratching my head for a long time @Harry97
Ken Haduch
@khaduch
Jul 12 2016 23:52

@Dave1089 - you can read this article http://javascriptissexy.com/understand-javascript-closures-with-ease/ - and "understand them with ease"... :) You can also read this example / explanation of returning a function that does something, I wrote this to try and help someone else here a while ago. It just gets the idea of returning the function and using the closure principle to make it work.... I'll post it here. It is a bit long, but I hope it helps...

Here it is...

the idea is that you want to be able to recognize that the first function call has either 1 argument or 2, and if there is only one, you need to return a function that you can call again to pass the second number and return the result of adding the two values together. So I'm going to look at a function that doesn't check for multiple arguments, the assumption is that it only receives one argument, and returns a function that has enclosed the original argument for use when the function is called. This is my example:

function makeAddWhatever( arg1 ) {
     return function addWhatever(arg) {
        return arg + arg1;
    }
}

var myAdd9 = makeAddWhatever(9);

var result = myAdd9(12);
console.log(result); // returns "21"
var myAdd23 = makeAddWhatever(23);
var result2 = myAdd23(15);
console.log(result2); // returns "38"
var result3 = myAdd9(22);
console.log(result3); // returns "31"

I have a function whose sole purpose is to create another function that will add the single argument passed to the first function to the single argument that is passed to the created (second) function. The first function is called makeAddWhatever(). It receives the argument, represented by the variable arg1. It returns a function (which I've given a name, but that is not essential) of addWhatever(). So what happens is that you can see within the code of addWhatever() that it is using two variables, arg, and arg1. Now, arg is the number that is passed when the generated function is called. And this is the key - arg1 is the value that was passed with the first call. It is closed in to the function that you return. If you run this example and think about what happens, you can see what results you get. But you can call makeAddWhateverany number of times and generate functions that will add the original number and the new number together.

This is essentially what you want to do with this problem - have it generate the function to enclose the initial argument when you only receive one argument, and return that function to be able to be called for the second argument. In my case, I was saving the functions that were returned in variables, that is not the case for the problem because they are calling the function directly with that double set of parens.

I hope that helps? I will try to follow up if you have questions. But study the example and try to run it and play with it in the javascript console...

Hadouken
@Harry97
Jul 12 2016 23:53
@PeterKenward yeah, me too :D
Peter Kenward
@PeterKenward
Jul 12 2016 23:54
It seemed so easy when I started. Now, not so much!!
Greg Duncan
@GregatGit
Jul 12 2016 23:55
@khaduch nice post there - thanks
CamperBot
@camperbot
Jul 12 2016 23:55
gregatgit sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1434 | @khaduch |http://www.freecodecamp.com/khaduch
Hadouken
@Harry97
Jul 12 2016 23:55
@PeterKenward Don't give up m8
You have doing a great job so far
Elbert Cortez
@trip16661
Jul 12 2016 23:56
@khaduch nice as always :) thanks even thought it was directed to me it was nice to read about it
CamperBot
@camperbot
Jul 12 2016 23:56
trip16661 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1435 | @khaduch |http://www.freecodecamp.com/khaduch
Peter Kenward
@PeterKenward
Jul 12 2016 23:57
I think I shall make a cup of tea: perhaps I'll get some inspiration while the kettle boils. (& thanks for looking at it Harry: bbiab).
Greg Duncan
@GregatGit
Jul 12 2016 23:58
@PeterKenward Don't get stuck on one simple api - I spend days trying to figure out the wikipedia api till someone finally gave me one that worked. So grab an api that works in codepen or just use an array of quotes - but don't let it kill your momentum
Hadouken
@Harry97
Jul 12 2016 23:59
@PeterKenward Make sure to check the chat every once in a while maybe I'll be able to find a solution