These are chat archives for FreeCodeCamp/HelpFrontEnd

9th
Jul 2016
Tyler Moeller
@TylerMoeller
Jul 09 2016 00:00
@MattTheWebDev Codepen is running kind of slow now. Lots of friday coding I guess. I'll take a look now
Matthew King
@MattTheWebDev
Jul 09 2016 00:00
Alrighty
Tyler Moeller
@TylerMoeller
Jul 09 2016 00:04

@MattTheWebDev Your $.each needs to go inside the getJSON function:

      $.getJSON(wikipediaUrl, function (data) {
        wikiData = data.query.pages;
        $.each(wikiData, function (key, data) {
          console.log(data);
          results += "<div class='results'>";
          results += '<h2>' + data.title + '</h2>';
          results += '<div>' + data.extract + '</div>';
          results += '</div>';
          $('#resultsDiv').append(results);
        })
      })
      .fail(function (jqXHR, textStatus, errorThrown) {
        alert('fail ' + errorThrown);
      });

I'll try to see why results aren't getting cleared when you search.

Matthew King
@MattTheWebDev
Jul 09 2016 00:04
That actually makes a lot of sense, thanks.
askeralperen
@askeralperen
Jul 09 2016 00:11
Hi guys, I am currently working on "Build a Tribute Page" Task and I have trouble with centering the h1 h3 and img . Here is the codepen link: http://codepen.io/askeralperen/full/jAGAXm/
Tyler Moeller
@TylerMoeller
Jul 09 2016 00:13
@MattTheWebDev Sorry for the delay...phone call. To overwrite past results, clear your results variable and the html in your #resultsDiv element.
        $('#resultsDiv').html('');
        var results = '';
You can add that to the top of your wikiSearch() function so it runs every time a search is performed.
Matthew King
@MattTheWebDev
Jul 09 2016 00:15
@askeralperen , simply add .text-center{text-align:center;} to your css and that should fix it, sorry for typing it out, I don't remember how to format code.
Chris Rutherford
@cjrutherford
Jul 09 2016 00:16
So...... I'm having trouble getting my JSON back from openweathermap. I think the issue is that I'm assigning the JSON response to a variable instead of automatically parsing it. Or completely different, it could be that I'm not calling it right....
weatherObject = $.getJSON("http://api.openweathermap.org/data/2.5/weather?APPID=0244f7c5085de8ae6e6ae6aa09da489e&lat=" + lat + "&lon=" + long); console.log(JSON.stringify(weatherObject.weather.id));
I already know that my lat and long vars are assigned properly.
askeralperen
@askeralperen
Jul 09 2016 00:17
@MattTheWebDev thank you sir, I will try it.
CamperBot
@camperbot
Jul 09 2016 00:17
askeralperen sends brownie points to @mattthewebdev :sparkles: :thumbsup: :sparkles:
:cookie: 252 | @mattthewebdev |http://www.freecodecamp.com/mattthewebdev
Ken Haduch
@khaduch
Jul 09 2016 00:23
@cjrutherford - you need a callback function to handle the return of the data - something like this:
$.getJSON(URL, function(data) {
    // do something with data when it returns.
});
Chris Rutherford
@cjrutherford
Jul 09 2016 01:10
@khaduch makes sense everything needs a call back for some strange reason..... C# doesn't have call backs and I'm not sure if I like that in Javascript.
Johnny Rock
@freekngdom
Jul 09 2016 01:13

Noob needs help on Twitch API:

I have an asynchronous function that is called multiple times in a for loop with different arguments each time.
I want to run a function only after all those calls are finished.
What is the best way to go about doing this?

In detail:
I am building a <ul> from data received from $.getJSON calls.
Each <li> is a different $.getJSON call.
Once all the <li> 's are created and the <ul> is built,
I want to call:
tinysort('ul.offline',{attr:'class'});
to sort the list by class name.

I've tried using .done, but don't think it is working.
Any criticism of my code is appreciated as well.
http://codepen.io/freekngdom/pen/rLzrJb

Chris Rutherford
@cjrutherford
Jul 09 2016 01:22
okay, so now I have it where it's through a callback function, but I wanted it to place information in my page so I could see what I'm working with, but it's not running right......
https://codepen.io/christopherrutherford/pen/YWxNJz?editors=1111
and here is my code
  $.getJSON("http://api.openweathermap.org/data/2.5/weather?APPID=0244f7c5085de8ae6e6ae6aa09da489e&lat=" + lat + "&lon=" + long, function(data){
    $('.message').html(JSON.stringify(data));
  });
looks like the console is returning an error stating "Connection Refused...."
Greg Duncan
@GregatGit
Jul 09 2016 01:37
@cjrutherford are you using the free openweather api?
Chris Rutherford
@cjrutherford
Jul 09 2016 01:39
yep
Greg Duncan
@GregatGit
Jul 09 2016 01:39
@cjrutherford then it has to be http
@cjrutherford even if you could use https for open weather (which you can't) your code would still not work
Chris Rutherford
@cjrutherford
Jul 09 2016 01:41
@GregatGit I initially did it over http but switched because of an error stating something about mixed content, and now that I've switched back I get a failed to load.
Greg Duncan
@GregatGit
Jul 09 2016 01:42
for chrome you cannot get http api in https
Chris Rutherford
@cjrutherford
Jul 09 2016 01:43
got it....
Greg Duncan
@GregatGit
Jul 09 2016 01:43
to use open weather make you page http
geolocation has to be done through https - so you have it ditch it - use this instead http://ip-api.com/json
Chris Rutherford
@cjrutherford
Jul 09 2016 01:45
@GregatGit okay this is all starting to make sense.... I'll come back to it
Greg Duncan
@GregatGit
Jul 09 2016 01:45
and finally - and most importantly - your open weather api call has to be inside the lat long api call
if you didn't have the https/http issues your code would still not work because your weather api call is not inside the lat long call
Juwdohr
@Juwdohr
Jul 09 2016 01:52
Can't seem to get it to work can anyone help me?
http://codepen.io/juwdohr/pen/XKbbEZ
Chris Rutherford
@cjrutherford
Jul 09 2016 02:06
@GregatGit so.... I'm not sure what you mean by my weather api call has to be in the location call. so the weather data needs to be called inside the same function, and maybe inside a subfunction of, the location data call?
vvkgdm
@vvkgdm
Jul 09 2016 02:13
how to place a placeholder
guys can over write navigation bar text color into something what color i want
i used bootstrap to build my navigation bar
http://codepen.io/vvkgdm/pen/NAvRdY?editors=1100
Kevin
@KevinBruland
Jul 09 2016 02:16
@vvkgdm what do you mean by placeholder?
vvkgdm
@vvkgdm
Jul 09 2016 02:17
@Benalron placeholder images in my portfolio
Greg Duncan
@GregatGit
Jul 09 2016 02:18
@cjrutherford the 2nd api call (open weather) needs info from the first api call (either geolocation or http://ip-api.com/json) -
Kevin
@KevinBruland
Jul 09 2016 02:18
@vvkgdm bunch of ways, you can use a image with a blank square, or you can just divide it into two rows with 3 bootstrap col-sm-4 divs
vvkgdm
@vvkgdm
Jul 09 2016 02:19
@Benalron you can use a image with a blank square how to do that?
Kevin
@KevinBruland
Jul 09 2016 02:20
@vvkgdm find the size of the image you want, and either use a gray square or a placeholder image... and create it as though it was an actual image
vvkgdm
@vvkgdm
Jul 09 2016 02:21
ok im newbie here sorry , but how to do that?
nbogie
@nbogie
Jul 09 2016 02:22
@vvkgdm one way is <img src="http://placehold.it/200x220"/>
vvkgdm
@vvkgdm
Jul 09 2016 02:22
ok leemme try it
Chris Rutherford
@cjrutherford
Jul 09 2016 02:27
@GregatGit okay that works. sleeping on it....
vvkgdm
@vvkgdm
Jul 09 2016 02:28
@nbogie thanks man
CamperBot
@camperbot
Jul 09 2016 02:28
vvkgdm sends brownie points to @nbogie :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @nbogie |http://www.freecodecamp.com/nbogie
vvkgdm
@vvkgdm
Jul 09 2016 02:30
@Benalron thank you too
CamperBot
@camperbot
Jul 09 2016 02:30
vvkgdm sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 354 | @benalron |http://www.freecodecamp.com/benalron
Kevin
@KevinBruland
Jul 09 2016 02:30
np, good luck
it can be a bit confusing at first, but pushing through stuff you don't understand will help
vvkgdm
@vvkgdm
Jul 09 2016 02:35
hahah to build my portfolio it took like 3 days @Benalron
to me
Darshan
@Dave1089
Jul 09 2016 02:52
Anything wrong in this function?
function whatIsInAName(collection, source) {
  // What's in a name?
  var arr = [];

  // Only change code below this line
 var cnt = 0; 
keys = Object.keys(source);
  for(var i=0;i<collection.length;i++){
    for(var x in collection[i]){
       for(var j=0;j<keys.length;j++){
          if(x.hasOwnProperty(keys[j]) && x[keys[j]] == source[keys[j]])
          cnt = 1;
         else
          cnt = 0;

       }
          if(cnt === 1){
            arr.push(x);
            }


       }


    }
  // Only change code above this line
return arr;
//  return keys;
}
whatIsInAName([{ "a": 1, "b": 2 }, { "a": 1 }, { "a": 1, "b": 2, "c": 2 }], { "a": 1, "b": 2 });
Jonathan Basulto
@JohnBasulto98
Jul 09 2016 02:58
idk how to put a picture to a background
Dylan
@dhcodes
Jul 09 2016 03:09
@JohnBasulto98 make a div
and then in the CSS choose that div and give it the attribute
background-image: url('yoururl');
Connor
@ctgrace88
Jul 09 2016 04:11
When I put my brand logo into the navigation bar it does not center itself right. It puts the image too low so it hangs down below the bar. Any ideas of how to fix that?
Kevin
@KevinBruland
Jul 09 2016 04:15
@ctgrace88 do you have a link to the code?
Connor
@ctgrace88
Jul 09 2016 04:15
blob
Kevin
@KevinBruland
Jul 09 2016 04:17
@ctgrace88 if you open the debug view, right click the icon and select inspect element, you can see that navbar-brand has 15px padding
@ctgrace88 which is what is pushing it down
Connor
@ctgrace88
Jul 09 2016 04:19
@Benalron sweet thanks fixed it!
CamperBot
@camperbot
Jul 09 2016 04:19
ctgrace88 sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 355 | @benalron |http://www.freecodecamp.com/benalron
Kevin
@KevinBruland
Jul 09 2016 04:20
NP, the developer tools can be extremely useful when dealing with bootstrap
while extremely useful, Bootstrap has a lot of CSS properties that can cause a lot of confusing problems while getting used to using it
Connor
@ctgrace88
Jul 09 2016 04:22
@Benalron Yea I had no clue I could even see all that. Yea you don't know how long I
Ive been trying to figure that out lol
Kevin
@KevinBruland
Jul 09 2016 04:23
yeah, I think I probably spent about an hour or so the first time I ran into a bootstrap related problem lol
whenever something doesnt look like it's where it should be, just check in the developer tools
the computer tab on the right hand size shows you the "box model", so you can see where margin, padding, border, etc are all applied for the element you have selected
*computed, not computer
Greg Duncan
@GregatGit
Jul 09 2016 04:57
I keep getting the error TypeError: arr1.indexOf is not a function but can't figure out why
function sym(args) {    
    function mergeArr(arr1, arr2){
        //var arr = [];
        for (var i in arr2){
            if (arr1.indexOf(arr2[i]) === -1)
                arr1 = arr1.push(arr2[i]);
            else
                arr1.splice(i, 1);
        }
        return arr1;
    }
    var arr = mergeArr(arguments[0], arguments[1]);    
  return arr;
}
sym([1, 2, 3], [5, 2, 1, 4]);
sentedelviento
@sentedelviento
Jul 09 2016 05:06
well, i'm not so sure about that, but if you are running the for loop with the values from arr2, it is problematic because the first call will look like: arr1.indexOf(arr2[5])
But arr2[5] doesn't exist
because you're using the values as indexes
you should do something more like, for (var x = 0; x <= arr2.length; x++)
Greg Duncan
@GregatGit
Jul 09 2016 05:14
@sentedelviento thanks for looking. arr2[i] i will start at 0 and just go up by one. var i in arr is just shorthand for (var i = 0; i < arr.length; i++)
It works on the first iteration and then on the second gets an error
CamperBot
@camperbot
Jul 09 2016 05:14
gregatgit sends brownie points to @sentedelviento :sparkles: :thumbsup: :sparkles:
:cookie: 11 | @sentedelviento |http://www.freecodecamp.com/sentedelviento
Gabriel Certeza
@gabrielcerteza
Jul 09 2016 05:16
hi, can someone take a look at my code and assist me?
sentedelviento
@sentedelviento
Jul 09 2016 05:17
wow i feel dumb, you're right
I totally thought for...in iterated over values, not indexes
thanks @GregatGit for the info
CamperBot
@camperbot
Jul 09 2016 05:17
sentedelviento sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 669 | @gregatgit |http://www.freecodecamp.com/gregatgit
sentedelviento
@sentedelviento
Jul 09 2016 05:19
Guys, I can't figure out why my title is going through the top border of my paragraph, when the ones below are not and are all added via the same function:
I was having this problem in a different challenge but simplified the code to isolate the problem
The ideal behavior is for the title to be inside the paragraph (I gave it absolute positioning), not hovering over the border.
kirbyedy
@kirbyedy
Jul 09 2016 05:44
@sentedelviento is there a reason why are you creating html page with js?
matt li
@mattliye
Jul 09 2016 06:06
```
$(document).ready(function(){
  $("#search").click(function(){
    var searchtext=$("#searchtext").val();
    var url="https://en.wikipedia.org/w/api.php?&action=opensearch&search="+searchtext+"&format=json&callback=?";    
    $.ajax({
      type:"GET",
      url:url,
      asnyc:false,
      dataType:"json",
      success:function(data){
        for(var i=0; i<data[1].length; i++){
        $("#searchresults").prepend(
        "<a target='_blank' href="+data[3][i]+"><li>"+data[1][i]+"<p>"+data[2][i]+"</p></li></a>"
        );

        }

      },
      error:function(errorMessage){
        alert("error");

      }

    });

  });


});
the wikipedia viewer
if i search once then search again, the previous search results also shows in the second search
someone please help
no worries, i got it resolved
sentedelviento
@sentedelviento
Jul 09 2016 06:21
@kirbyedy yes, there is a reason
The code I wrote is a simplified version of another challenge I am undergoing
where i am getting data from an api, then using javascript to add it to the page
kirbyedy
@kirbyedy
Jul 09 2016 06:25
cool
sentedelviento
@sentedelviento
Jul 09 2016 06:27
not really, 'cause it's broken
buiphuking
@buiphuking
Jul 09 2016 06:33
someone plz explain me this
function flashMessage(msg, times){
      $('.count').text(msg);
      var lf = function(){
        $('.count').addClass('led-off');
        gameStatus.toHndlFl = setTimeout(function(){
          $('.count').removeClass('led-off');
        }, 250);
      };
      var cnt = 0;
      lf();
      gameStatus.flHndl = setTimeout(function(){
        lf();
        cnt++;
        if(cnt === times) clearInterval(gameStatus.flHndl);
      }, 500)
    };
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:25
hi. What i want to do is create a jquery script such that there will be 3 sections with different classes. when one of them is clicked, a class should be removed from it. my overflow is hidden, so only one section is visible at a time. i have written some code but that is not working. so if someone can tell me how to upload a screenshot of the code that would be helpful. I am completely new to the chat
Samson Alajede
@ajesamson
Jul 09 2016 08:27
@reachdeviprasad you can do something like this
$(“.targetElement”).addClass(“class_name_to_be_visible”).removeClass(“class_name_to_be_hidden”);
that should be added to the click function
to carry out the class change
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:30
$(document).ready(function() {
  $('section').on('click', function () {
    if ($('section').hasClass('active')) {
      $('section').removeClass('active');
    } else {
      $('section').addClass('active');
    }
  });
});
Samson Alajede
@ajesamson
Jul 09 2016 08:30
check the section
there is an error there
you did not specify if it is an id or a class
it should be $(“.section”)
or $(“#section”)
depending on the way you declare section in your html
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:32
@ajesamson it is section element of html. let me put my html code too.. I feel that will be more helpful
Samson Alajede
@ajesamson
Jul 09 2016 08:32
hold on
just do thise
<section class=“section”>...</section>
ok
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:33
<section class="main first active" style="z-index: 3;"></section>
<section class="main second active" style="z-index: 2;"></section>
<section class="main third active" style="z-index: 1;"></section>
Samson Alajede
@ajesamson
Jul 09 2016 08:34
ok
then use
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:35
@ajesamson this is the html code.. i want to remove the active class from each section on each click. but it is either not working or removing all of them at the same time
Samson Alajede
@ajesamson
Jul 09 2016 08:35
$('section').on('click', function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
    } else {
      $(this).addClass('active');
    }
  });
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:35
ok.
i will try first the new code
Samson Alajede
@ajesamson
Jul 09 2016 08:36
or to make it
simple
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:36
thank you for the help
Samson Alajede
@ajesamson
Jul 09 2016 08:36
just do this
```
$('section').on('click', function () {
    $(this).toggleClass('active’);
  });
```
sorry for the extra quote
the toggleClass checks
whether its there or not and toggle
as appropriate
hope this help
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:37
ya. it is working perfectly now.
thanks a lot
Samson Alajede
@ajesamson
Jul 09 2016 08:38
great
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:38
can u please tell me how to make it working with scroll
like if i scroll down it will remove the class and on scroll up it will add the class
Samson Alajede
@ajesamson
Jul 09 2016 08:38
like scroll spy in bootstrap/
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 08:40
ok i will check it and post on the room soon. thanks a lot again
shweta rajput
@ShwetaRajput
Jul 09 2016 08:53
hello friends i am starting to build the local weather project.
bu i don't know exactly where to start from and what to do. did you felt the same as i am feeling now?
and please guide me through it
Marco Mazzeo
@Doko85
Jul 09 2016 08:54
use the ip-api to get the lat and long values for the user position
use openweather api to extract weather data for those coordinates
shweta rajput
@ShwetaRajput
Jul 09 2016 08:56
@Doko85 can you tell me did you took help from somewhere to build your app?
Marco Mazzeo
@Doko85
Jul 09 2016 08:56
yeah, I watched other people' codes to understand what I had to do... I checked some online resources on how to interact with a json file and then I made mine
shweta rajput
@ShwetaRajput
Jul 09 2016 08:58
@Doko85 okay. so can you send me the link to your weather app. so that i would be able to understand what to do?
shweta rajput
@ShwetaRajput
Jul 09 2016 09:01
@Doko85 wohh.. very impressive. how much time did it took to build the app?
Marco Mazzeo
@Doko85
Jul 09 2016 09:01
a week and a half I guess
I always focus too much on the design part
I'm doing the same for the wikipedia search app now :D
shweta rajput
@ShwetaRajput
Jul 09 2016 09:02
@Doko85 i can only say great work. are u already an engineer?
Marco Mazzeo
@Doko85
Jul 09 2016 09:02
no, I'm an unemployed guy who's trying to understand these things to make them a job
Nkwazema Chidiebere Raphael
@KingCyrus
Jul 09 2016 09:03
Marco Mazzeo how long have you been coding? Honestly, that's a nice app
shweta rajput
@ShwetaRajput
Jul 09 2016 09:03
@Doko85 ohkay good. and good luck
@Doko85 i can't even compete with your app.
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:04
@ajesamson the scrollspy.js is helpful in creating a page to highlight which tab is active when you scroll through the page
Samson Alajede
@ajesamson
Jul 09 2016 09:05
ok
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:05
but i want to create a page that will fade out the old section and fade in the new section
Samson Alajede
@ajesamson
Jul 09 2016 09:05
you can make use css animation
Marco Mazzeo
@Doko85
Jul 09 2016 09:06
@KingCyrus I coded old static html pages for 8 ys for personal purpose, I started focusing on modern web dev on october 2015 but I put FCC course on a hold for 4 months before starting again
Samson Alajede
@ajesamson
Jul 09 2016 09:06
in your codepen @reachdeviprasad
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:06
Samson Alajede
@ajesamson
Jul 09 2016 09:06
you will see an animation option from the css
Nkwazema Chidiebere Raphael
@KingCyrus
Jul 09 2016 09:06
O
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:06
this is the type of page i am trying to do
any help for it
it is working on click. as you have resolved it. but i want to resolve using the scroll
Nkwazema Chidiebere Raphael
@KingCyrus
Jul 09 2016 09:07
@Doko85 got that. I wish you all the best and I think if you hang in there you'll make good in the long run. Cheers
Marco Mazzeo
@Doko85
Jul 09 2016 09:07
it's working with the mouse scroll as well
thanks @KingCyrus
CamperBot
@camperbot
Jul 09 2016 09:07
doko85 sends brownie points to @kingcyrus :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @kingcyrus |http://www.freecodecamp.com/kingcyrus
Marco Mazzeo
@Doko85
Jul 09 2016 09:07
really appreciated :D
Samson Alajede
@ajesamson
Jul 09 2016 09:08
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:10
@ajesamson i want to create a page something like topcoder.com
Samson Alajede
@ajesamson
Jul 09 2016 09:10
or you can as well the kind of page you are trying implement
ok let me check
@reachdeviprasad you can use the scroll spy in bootstrap for it
or you can get some slider library online
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:12
ok.let me try once again. can i message you privately if i am stuck?
Samson Alajede
@ajesamson
Jul 09 2016 09:12
only that each section height will be full page
you are welcome
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:13
ok. thank you.i will try to modify the code for scroll spy
Samson Alajede
@ajesamson
Jul 09 2016 09:13
just add hidden class to the section to be rendered inactive
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:15
ok. so i will create a class hidden with the height property set to 0 and add it to each section which is inactive. right?
Samson Alajede
@ajesamson
Jul 09 2016 09:15
bootstrap already has a class hidden
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:15
oh. ok. i am new to bootstrap.
Samson Alajede
@ajesamson
Jul 09 2016 09:15
no need to change height property to 0
its a cool css framework
try to learn it
but also master your css
R S Devi Prasad
@reachdeviprasad
Jul 09 2016 09:18
ok. i will message you if anything goes wrong.
Nkwazema Chidiebere Raphael
@KingCyrus
Jul 09 2016 09:22
I strongly believe one can only get better as a coder by doing lots of project. Please where can I work for others even if it's for free to do projects with them?
Jack Lyons
@JackEdwardLyons
Jul 09 2016 09:36
hey guys ive got a tricky question
im trying to built a website with the marvel comics api
but my cloud IDE (Cloud 9) wont allow me to runt eh request because its not a secure sever
so ive pulled all the JSON data
and now im wondering, how to get the info -- im not allowed to use jQuery either.. would anyone like to help out?
i can show yuou my codepen
Abd-afeez Abd-hamid Adedamola
@Itsdenty
Jul 09 2016 09:55
please help... i am presently working on my javascript calculator project and i've been unable to get my plus working... tried eval...tried parseFloat and even parseInt but it keeps concatenating the values. here is my pen http://codepen.io/itsdenty/full/MeaoxP/
Samson Alajede
@ajesamson
Jul 09 2016 10:25
@Itsdenty i will advice you let the content be displayed first
then when you click on equal
do the calculation of all content of the input
Greg Duncan
@GregatGit
Jul 09 2016 10:49
@Itsdenty are the values generated being stored in the js or the html. I highly recommend that the js is does all the storing and calculations and the html simply displays
Dany Din
@danydin
Jul 09 2016 12:15
somebody here to help a bit in css?
Samson Alajede
@ajesamson
Jul 09 2016 12:16
how can we help
ErgoProxy
@ProxyOfDeath
Jul 09 2016 12:22
Hi all,
Dany Din
@danydin
Jul 09 2016 12:23
@ajesamson check my msg please
hey
ErgoProxy
@ProxyOfDeath
Jul 09 2016 12:24
just curius, first time posting here
im stuck at 1 point and maybe just maybe any 1 here has a clue on how to help me resolve it.
the text on both of the images on the middle..so far i was able to get 1 on the middle but the other 1 just wont budge. >.<
here is the code(hope i copied it right)
http://codepen.io/ErgoProxy/pen/qNPAYE/
Samson Alajede
@ajesamson
Jul 09 2016 12:25
@danydin please i cant locate your message
Marco Mazzeo
@Doko85
Jul 09 2016 12:25

ehy guys, how can I reduce the distance between the social buttons on this project? http://codepen.io/doko/pen/RRkjPO

to open the social buttons just click on the world button on the bottom right

Samson Alajede
@ajesamson
Jul 09 2016 12:25
oh ok
just a min
Ha Nguyen
@minhha0510
Jul 09 2016 12:25
Hi I'm at the portfolio challenge and try to get my image in the same line but I couldn't. Here is my code, could anyone take a look at this http://codepen.io/minhha0510/pen/KrvVZJ
Samson Alajede
@ajesamson
Jul 09 2016 12:26
@danydin please i cant find your message
can please post again
Dany Din
@danydin
Jul 09 2016 12:26
check on the left
@minhha0510 you mean in a row?
Ha Nguyen
@minhha0510
Jul 09 2016 12:28
yeah in a row @danydin
Dany Din
@danydin
Jul 09 2016 12:31
@minhha0510 take off the ul and li
acilegna
@acilegna
Jul 09 2016 12:34
@minhha0510 have you tried using class="list-inline" in <ul>?
Ha Nguyen
@minhha0510
Jul 09 2016 12:43
@danydin makes it worse danydin :(
I'll try now @acilegna
Samson Alajede
@ajesamson
Jul 09 2016 12:46
@Doko85 you can try this
.fixed-action-btn ul li{
 margin-bottom: 10px;
}
Ha Nguyen
@minhha0510
Jul 09 2016 12:49
don't know why it doesn't work for me @danydin
Dany Din
@danydin
Jul 09 2016 12:49
copy paste then my code i fixed for you.. read it you will understand @minhha0510
Ha Nguyen
@minhha0510
Jul 09 2016 12:53
okay ty @danydin
CamperBot
@camperbot
Jul 09 2016 12:53
minhha0510 sends brownie points to @danydin :sparkles: :thumbsup: :sparkles:
:cookie: 289 | @danydin |http://www.freecodecamp.com/danydin
Marco Mazzeo
@Doko85
Jul 09 2016 12:54
@ajesamson nothing changes
Samson Alajede
@ajesamson
Jul 09 2016 12:55
@Doko85 add !important at the front
the margin is pre-defined
by materialize
if it is still not taking effect
Marco Mazzeo
@Doko85
Jul 09 2016 12:55
yeah now it worked, thanks
thanks @ajesamson
CamperBot
@camperbot
Jul 09 2016 12:55
doko85 sends brownie points to @ajesamson :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @ajesamson |http://www.freecodecamp.com/ajesamson
Samson Alajede
@ajesamson
Jul 09 2016 12:55
great
@minhha0510 you can also try using
bootstrap row
to achieve that
the reason why you might not be getting what @danydin is saying is because
you are not using ul tag and each image in li
if that seems difficult
just try putting each of the image is the row
for example
<div class=“row”>
    <div class=“col-xs-3”> <img..></div>
 <div class=“col-xs-3”> <img..></div>
<div class=“col-xs-3”> <img..></div>
<div class=“col-xs-3”> <img..></div>
</div>
John Alcher
@alchermd
Jul 09 2016 13:18
Hey fellas. I have just finished both the Wiki Searcher and Twitch App projects, and I want your opinion if they're good enough to submit :D
http://s.codepen.io/chermandu/debug/akyLBp
http://s.codepen.io/chermandu/debug/BzkaLL
Subroto
@Shub1427
Jul 09 2016 13:21
what is the diff between CSS color and -webkit-text-fill-color? Aren't they both same?
Samson Alajede
@ajesamson
Jul 09 2016 13:23
@alchermd it cool
the second is more stylish than the first codepen though
great job
John Alcher
@alchermd
Jul 09 2016 13:25
@ajesamson I agree. My designing skills are awful (choosing colors is hard lmao), but I'm definitely proud of my work especially the wiki searcher. Purple makes anything look sleek :D Thank you!
CamperBot
@camperbot
Jul 09 2016 13:25
alchermd sends brownie points to @ajesamson :sparkles: :thumbsup: :sparkles:
:cookie: 341 | @ajesamson |http://www.freecodecamp.com/ajesamson
Samson Alajede
@ajesamson
Jul 09 2016 13:26
@alchermd don’t worry. same with me
just keep churning out and learning from others design
and over time
i’m sure you’l be amazed
ErgoProxy
@ProxyOfDeath
Jul 09 2016 13:39
just curious if any 1 has a few min to spare for a litle help here and there?
Samson Alajede
@ajesamson
Jul 09 2016 13:39
@RandoProxy how can we help
have you fixed the previous issue?
ErgoProxy
@ProxyOfDeath
Jul 09 2016 13:40
tried..failed came back again for help :D
maybe i missed the reply(sorry if i did)
Samson Alajede
@ajesamson
Jul 09 2016 13:41
i guess the shop men text should be on the man’s image?
ErgoProxy
@ProxyOfDeath
Jul 09 2016 13:43
got that right yup
Adetunji Iyaniwura
@Iadetunji
Jul 09 2016 13:43
can anyone help with making button change background color,change quotes and button color simultaneously ? here is my codepen :http://codepen.io/Iadetunji/pen/ZOKqXy
Samson Alajede
@ajesamson
Jul 09 2016 13:44
@RandoProxy do you mind trying bootstrap thumnail
if not, you may have to put the image and text in the same div
image first, then h2 text next
then you can do negative margin for text
so it can stay on the image
ErgoProxy
@ProxyOfDeath
Jul 09 2016 13:46
tbh think il need a few min to see how bootstrap works(newbie here)
il give it a go without the bootstrap atm.Thx
Samson Alajede
@ajesamson
Jul 09 2016 13:46
@RandoProxy no prob
its wort it
ErgoProxy
@ProxyOfDeath
Jul 09 2016 13:47
@ajesamson got to work on a project aka to test my skills and im not allowed to use any bootstrap
Samson Alajede
@ajesamson
Jul 09 2016 13:47
no prob
just go with the second option i gave you
@Iadetunji your quote should be random
and not from array
ErgoProxy
@ProxyOfDeath
Jul 09 2016 13:48
will do thx
Samson Alajede
@ajesamson
Jul 09 2016 13:49
@Iadetunji all the same
you can do this to change the button background color
$(this).addClass("blueBg");
then declare a class blueBg or any desired class name
with the color you want to add to it
Adetunji Iyaniwura
@Iadetunji
Jul 09 2016 13:50
@ajesamson ,ok it try it
Samson Alajede
@ajesamson
Jul 09 2016 13:52
@Iadetunji also your quote need to have an index
like this
$("#quote").html(quotes[0]);
not
$("#quote").html(quotes[index]);
hope its understandable
Adetunji Iyaniwura
@Iadetunji
Jul 09 2016 13:53
@ajesamson ,am trying to put it together
Samson Alajede
@ajesamson
Jul 09 2016 13:54
@Iadetunji discovered you are generating random number
and storing in your index
you are right
$("#quote").html(quotes[index]);
This message was deleted
Stephen James
@sjames1958gm
Jul 09 2016 13:56
@Iadetunji You have three buttons all with the same id "getMessage" it is confusing jquery
Samson Alajede
@ajesamson
Jul 09 2016 13:58
@Iadetunji @sjames1958gm has just pointed out another important point
Adetunji Iyaniwura
@Iadetunji
Jul 09 2016 13:58
@sjames1958gm , i have removed it
Samson Alajede
@ajesamson
Jul 09 2016 13:58
also ensure you have included jQuery in your library
Hassan ben haj
@Hassanbhb
Jul 09 2016 14:03
guys I am stuck in the random quote machine
I have no idea how to do the json
this is my code
Hassan ben haj
@Hassanbhb
Jul 09 2016 14:14
$(document).ready(function(){
    $.getJSON(".button").on("click", function(){
        $.ajax({
            url: 'http://quotes.stormconsultancy.co.uk/quotes.json',
            dataType: 'jsonp',
            success: function(data) {
            // your code to handle data here
                var html = "";
                json.forEach(function(val){
                    html +="<p>" + val.quote + "<p>";
                });
                $(".quote").html(html);
            }
        });
    })
})
Sorin Ruse
@sorinr
Jul 09 2016 14:16
@Hassanbhb you mean $.each instead of json.forEach ?
Hassan ben haj
@Hassanbhb
Jul 09 2016 14:18
@sorinr forEach is what the lesson used so i used it
Adetunji Iyaniwura
@Iadetunji
Jul 09 2016 14:18
http://codepen.io/Iadetunji/pen/ZOKqXy/:how can i make the twitter button tweet and make the tumbler button post on tumbler
Hassan ben haj
@Hassanbhb
Jul 09 2016 14:20
and to be honest I don't understand my own code
Sorin Ruse
@sorinr
Jul 09 2016 14:21
@Hassanbhb ok. as u wish. but you have to use the data returned by success: function(data) and i don't see how do u use it
shakedt
@shakedt
Jul 09 2016 14:23
hi any one can hlep me with Steamroller challnge?
Hassan ben haj
@Hassanbhb
Jul 09 2016 14:23
@sorinr is there any reference i can use to learn about this thing, I don't really know what to do and how to use ajax and all that cross origin thing
Sorin Ruse
@sorinr
Jul 09 2016 14:25
@Hassanbhb here is how i did it: http://codepen.io/sorinr/pen/VaJKrw
Hassan ben haj
@Hassanbhb
Jul 09 2016 14:29
thats really cool and well done
but i can't look at the code
i need to figure that out by my self
I am going to use google to learn about this
thanks
Jonathan Basulto
@JohnBasulto98
Jul 09 2016 14:33
Does anyone know how to make a image as an background
Sorin Ruse
@sorinr
Jul 09 2016 14:33
@Hassanbhb open the pen link not run it and just look at js part
@JohnBasulto98 background-image: url()
Greg Duncan
@GregatGit
Jul 09 2016 14:35
@JohnBasulto98
body {
  background: url()no-repeat center fixed;
  background-size: cover;
  text-align: center;
}
Jonathan Basulto
@JohnBasulto98
Jul 09 2016 14:36
oh
let me see
Sorin Ruse
@sorinr
Jul 09 2016 14:37
@JohnBasulto98 if you want it full page background take a look here: https://css-tricks.com/perfect-full-page-background-image/
Jonathan Basulto
@JohnBasulto98
Jul 09 2016 14:44
@sorinr thx
CamperBot
@camperbot
Jul 09 2016 14:44
johnbasulto98 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 441 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jul 09 2016 14:48
@JohnBasulto98 you havent seen that @GregatGit already modified his previous post and added same info
sharing some cookies to @GregatGit . thanks
CamperBot
@camperbot
Jul 09 2016 14:50
sorinr sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 670 | @gregatgit |http://www.freecodecamp.com/gregatgit
sentedelviento
@sentedelviento
Jul 09 2016 14:52
This message was deleted
This message was deleted
This message was deleted
uniforlyff
@uniforlyff
Jul 09 2016 15:29
@JohnBasulto98 @GregatGit it can go like this as well :+1:
background: #fff url('example.png') no-repeat center/cover fixed
Hanifah Mutesi
@hannyGitHub
Jul 09 2016 15:30
how do i start building my tribute page?
uniforlyff
@uniforlyff
Jul 09 2016 15:30
it can be about anything or anyone i believe
@hannyGitHub
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 15:31
Am I supposed to be finding the helpful links for the algorithm challenges mostly unhelpful, or am I just coding everything really inefficiently.
Stephen James
@sjames1958gm
Jul 09 2016 15:32
@FreyaRhianna Some of them are just suggestions, in my opinion some of them are downright misleading.
Hanifah Mutesi
@hannyGitHub
Jul 09 2016 15:34
i get that @uniforlyff but how do i start or maybe where i click to open a new page
uniforlyff
@uniforlyff
Jul 09 2016 15:34
oh you mean a pen?
Hanifah Mutesi
@hannyGitHub
Jul 09 2016 15:34
yes
uniforlyff
@uniforlyff
Jul 09 2016 15:35
goto codepen.io and click new pen
@hannyGitHub
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 15:35
@sjames1958gm that's super relieving to hear. I've been answering every challenge thinking "well, that was probably the worst solution possible".
Hanifah Mutesi
@hannyGitHub
Jul 09 2016 15:37
thanks it helped @uniforlyff
CamperBot
@camperbot
Jul 09 2016 15:37
hannygithub sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
uniforlyff
@uniforlyff
Jul 09 2016 15:37
:+1:
Jonathan Basulto
@JohnBasulto98
Jul 09 2016 15:58
i put style="text-align: center;" but it isnt working am i doing this right?
Jonathan Basulto
@JohnBasulto98
Jul 09 2016 16:12
never mind i got it
Stephen
@stephepush
Jul 09 2016 16:19
Can someone take a look at the code I have for weather app so far and tell me why I'm not getting anything? http://codepen.io/stephepush/pen/pbWwog
Daniel Sousa
@dgsousa
Jul 09 2016 16:23
Hey does anyone know why to check if your page is opening in an iframe? i just came across this and am not sure what the purpse is
Daniel Sousa
@dgsousa
Jul 09 2016 16:47
@stephepush, have you located where in the code it stops running?
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 16:48
@stephepush it doesn't look like you have jQuery imported? (unless I'm the one missing somethings). You need jQuery to use Json (the $ symbol is short-hand for Jquery, which is how you know you're using it). You need to go up into your settings and, under JS, add jquery,
Daniel Sousa
@dgsousa
Jul 09 2016 16:48
have you checked to make sure you're getting geo coordinates from the geolocation API?
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 16:48
Oh wait, nvm, just realised you've imported it in you html
Stephen
@stephepush
Jul 09 2016 16:50
console says getJSON not defined
Dan Stockham
@DanStockham
Jul 09 2016 16:51
Anyone ever mess with writing media queries in SASS?
Daniel Sousa
@dgsousa
Jul 09 2016 16:51
for the geoData or the weather?
@stephepush when you're writing code, check to make sure each step works before you move to the next one
Stephen
@stephepush
Jul 09 2016 16:52
@danielmooncloud by console logging?
Daniel Sousa
@dgsousa
Jul 09 2016 16:54
sure, or inserting html onto the document
first, check to see if the geoData API is working
Stephen
@stephepush
Jul 09 2016 16:54
inserting html with jquery
Daniel Sousa
@dgsousa
Jul 09 2016 16:55
I had to use a different one, because chrome has disable their version with insecure browsers
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 16:55
@stephepush You have a syntax error on line 7,
Stephen
@stephepush
Jul 09 2016 16:56
fixed it
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 16:56
@DanStockham I write my media queries using sass (really scss, but same difference minus a few brackets)
Dan Stockham
@DanStockham
Jul 09 2016 16:57
@FreyaRhianna How though? is it any different from writing it in vanllia CSS?
Stephen
@stephepush
Jul 09 2016 17:00
i write code in sublime and then paste it into codepen
Ethan Rose
@ethanrose
Jul 09 2016 17:02
am I doing my bracket notation wrong?
  console.log(data.query.pages[0].title);
  console.log(data.query.pages[0].extract);
to me it looks right, but I'm getting
Uncaught TypeError: Cannot read property 'title' of undefined
Stephen
@stephepush
Jul 09 2016 17:03
thanks @FreyaRhianna and @danielmooncloud
CamperBot
@camperbot
Jul 09 2016 17:03
stephepush sends brownie points to @freyarhianna and @danielmooncloud :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @danielmooncloud |http://www.freecodecamp.com/danielmooncloud
:cookie: 274 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 17:03
@DanStockham How do I write my media queries? You can probably google the format, but there are a few different ways. I write mine: @mixin breakPointName{ @media only screen and(max-width:XXXX){ @content; }}}. There's a real great video on it that I'll find for you in a minute, but simply put, SCSS (and sass) don't add any extra functionality. What they do is make it easier to write CSS. Take the media queries for example, instead of having a block right at the bottom where you write all of your adapted attributes, you can attach the break points to your elements with @include and write up what needs to be changed for different right next the rest of that elements attributes. It just makes it that much easier to read and write.
Dan Stockham
@DanStockham
Jul 09 2016 17:04
@FreyaRhianna Do you have the video?
Ethan Rose
@ethanrose
Jul 09 2016 17:04

http://codepen.io/aidansven/pen/Wxkoba?editors=0010

there's my codepen.. I'm trying to console.log (the JSON data) but wondering why I'm getting that error.. thanks :)

Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 17:06
@DanStockham Yeah, sorry, I was just looking for it. https://www.youtube.com/watch?v=8F1Vof0gTG4 It's a bit long, but it's worth watching all of it to fully understand SCSS (or SASS). I think it does also talk about some functionality that SCSS adds.
There are probably shorter ones out there that are just as detailed, but that was the one I watched and I could write semi-competent SCSS afterwards so...
Dan Stockham
@DanStockham
Jul 09 2016 17:07
@FreyaRhianna Thanks
CamperBot
@camperbot
Jul 09 2016 17:07
danstockham sends brownie points to @freyarhianna :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @freyarhianna |http://www.freecodecamp.com/freyarhianna
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 17:08
If your gonna write SCSS outside of code pen, you might want to get an automatic compiler for your SCSS files, (or else learn the commands in the command prompt) because you'll need to compile it into a CSS file before you can use it. (codepen does it for you automatically though)
you're*
Dan Stockham
@DanStockham
Jul 09 2016 17:09
@FreyaRhianna I'm already aware of that, I have web pack do it for me when I take my projects locally.
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 17:13
Ahh never mind then :P
Dan Stockham
@DanStockham
Jul 09 2016 17:14
@FreyaRhianna I wish we it was a lot easier to do the projects locally. I ran into some issues when I was doing the leaderboard project.
Freya Sheer Hardwick
@FreyaRhianna
Jul 09 2016 17:15
@DanStockham You're way ahead of me. I guess I have all of those issues to look forward to,
Dan Stockham
@DanStockham
Jul 09 2016 17:16
@FreyaRhianna You betcha, darling!
Zach Sosana
@SOSANA
Jul 09 2016 17:17
hey guys I am using bs4 with react and redux. I am currently using ternary operator for boolean for "has-danger" and "has-success" but seems hacky, you guys n gals have a better suggestion to avoid DRY? I only applied it to one field
import React, { Component, PropTypes } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';
import { Link } from 'react-router';

class NewPost extends Component {
  // using contextTypes for routing after we successfully submit form
  static contextTypes = {
    router: PropTypes.object,
  }

  constructor(props) {
    super(props);
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(props) {
    this.props.createPost(props)
      .then(() => { // passing in our promise
        // blog post has been created, navigate the user to the index
        // we navigate by calling this.context.router.push with the new
        // path to navigate to
        this.context.router.push('/');
      });
  }

  render() {
    // same as doing const handleSubmit = this.props.handleSubmit;
    // same as doing const title = this.props.fields.title
    const { fields: { title, categories, content }, handleSubmit } = this.props;

    // adding alternative option for danger and success errors
    const dangerStyle = `form-group ${title.touched && title.invalid ? 'has-danger' : ''}`;
    const successStyle = `form-group ${title.touched && title.valid ? 'has-success' : ''}`;

    // console.log(title); // title configuration object

    // using destructoring object in input tag with {...title} which allows every
    // property on the title object to show up inside the input, so it destructures
    // the object into its seperate keys and values and passes it into the input.
    // So in effect all the properties we saw in our console.log above like
    // onChange, onBlur, etc show up inside our input
    // passing in our action creator in handleSubmit()
    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <h3>Create a New Post</h3>

        <div className={title.touched && title.invalid ? dangerStyle : successStyle}>
          <label className="form-control-label" htmlFor="inputDanger1">Title</label>
          <input type="text" className="form-control" {...title} />
          <div className="text-danger">
          {title.touched ? title.error : ''}
          </div>
        </div>

        <div className={`form-group ${categories.touched && categories.invalid ? 'has-danger' : ''}`}>
          <label className="form-control-label" htmlFor="inputDanger1">categories</label>
          <input type="text" className="form-control" {...categories} />
          <div className="text-danger">
          {categories.touched ? categories.error : ''}
          </div>
        </div>

        <div className={`form-group ${content.touched && content.invalid ? 'has-danger' : ''}`}>
          <label className="form-control-label" htmlFor="inputDanger1">content</label>
          <textarea className="form-control" {...content} />
          <div className="text-danger">
          {content.touched ? content.error : ''}
          </div>
        </div>

        <button type="submit" className="btn btn-primary">Submit</button>
        <Link to="/" className="btn btn-danger">Cancel</Link>
      </form>
    );
  }
}

NewPost.propTypes = {
  handleSubmit: React.PropTypes.func.isRequired,
  fields: React.PropTypes.object.isRequired,
  createPost: React.PropTypes.func.isRequired,
};

// creting a validate function for our form validation
function validate(values) {
  const errors = {};

  if (!values.title) {
    errors.title = 'Enter a title';
  }
  if (!values.categories) {
    errors.categories = 'Enter some categories';
  }
  if (!values.content) {
    errors.content = 'Enter a content';
  }

  return errors;
}

// like connect, redux form is injecting some helpers on this.props inside of NewPost Component
export default reduxForm({
  // setting up our redux form configuration
  form: 'NewPostForm', // NewPostForm is our unique token
  // defining the form fields
  fields: ['title', 'categories', 'content'],
  validate,
}, null, { createPost })(NewPost);
Matthew Boland
@mattboland
Jul 09 2016 17:20
@SOSANA try https://github.com/chat-rooms/reactjs or the data viz chat room if no one has any tips here
Zach Sosana
@SOSANA
Jul 09 2016 17:21
@mattboland this is more of a styling and javascript logic question than a reactjs question though
I will try there if no can help :(
vespoli95
@vespoli95
Jul 09 2016 17:29
Hey guys how can I make my last bit of text on a page reach close to the border of a box like the wikepedia part here: https://codepen.io/FreeCodeCamp/full/NNvBQW
Can anyone see what is wrong? I set my media query at max-width of 760 and expect the table to disappear but it isn't doing it.
Blake Geraci
@bgeraci714
Jul 09 2016 18:15
when doing the random quote machine, did you guys use some online quote site or generate your own list?
(i mean for actually feeding them into the web page)
uniforlyff
@uniforlyff
Jul 09 2016 18:16
@bgeraci714 i got quotes from different sites but i created my own json file
Blake Geraci
@bgeraci714
Jul 09 2016 18:16
okay, thanks @uniforlyff
CamperBot
@camperbot
Jul 09 2016 18:16
bgeraci714 sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 401 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
uniforlyff
@uniforlyff
Jul 09 2016 18:17
:+1:
Chad Hurley
@ChadDean82
Jul 09 2016 18:39
Build a Personal Portfolio Webpage "this is the challenge"User Story: I can see thumbnail images of different projects the portfolio creator has built (if you haven't built any websites before, use placeholders.)"this is where I'm stuck. I only have one other web site created but I cant seem to snapshot any images of it to use for a thumbnail. Any help would be greatly appreciated.
I have also completely built both site's from the ground up, so there could be any number of cause's.
Ethan Rose
@ethanrose
Jul 09 2016 19:07
am I trying to access the object correctly here?
console.log(data.query.pages[0].title);
please help!!!
because I get an error
Uncaught TypeError: Cannot read property 'title' of undefined
This message was deleted
Ken Haduch
@khaduch
Jul 09 2016 19:09
@aidansven - what data are you trying to read from?
Ethan Rose
@ethanrose
Jul 09 2016 19:09
from a JSON object response from the wikipedia api
Ken Haduch
@khaduch
Jul 09 2016 19:09
@aidansven - can you post the data, I don't know the format of it by memory...
Ethan Rose
@ethanrose
Jul 09 2016 19:09
I based my code off the JSON response too,
Ken Haduch
@khaduch
Jul 09 2016 19:10
post a URL?
just type anything in the search bar and press enter
and you should see everything happening in the console
Ethan Rose
@ethanrose
Jul 09 2016 19:18
@ndburrus thanks, will read that now :)
CamperBot
@camperbot
Jul 09 2016 19:18
aidansven sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 900 | @ndburrus |http://www.freecodecamp.com/ndburrus
Norvin Burrus
@ndburrus
Jul 09 2016 19:19
@ndburrus you're welcome! anytime... :palm_tree:
Ethan Rose
@ethanrose
Jul 09 2016 19:26
@khaduch did you see that error accessing the information? it's telling me that
.log(data.query.pages[0].title);
returns undefined...
@khaduch and thanks for your help too
CamperBot
@camperbot
Jul 09 2016 19:26
aidansven sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1419 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Jul 09 2016 19:40
@aidansven - the $.getJSON function returns a jquery object, and you have to use the $.each() method in jquery to access it. I haven't done this yet, and thankss
to @ndburrus for the documentation links - either helped me learn what to do, or provided a refresher, if I did know this... :)
CamperBot
@camperbot
Jul 09 2016 19:40
khaduch sends brownie points to @aidansven and @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 901 | @ndburrus |http://www.freecodecamp.com/ndburrus
:cookie: 276 | @aidansven |http://www.freecodecamp.com/aidansven
CruftMaster
@CruftMaster
Jul 09 2016 19:42
hey guys, i have a question on how to make the simon game project, does any one know how to make a image into a non-rectangle. i used a transparent background on my image but when i click out side of the image it still registers as clicked
Norvin Burrus
@ndburrus
Jul 09 2016 19:49

@khaduch
anytime!
i especially like the part:

Note that there are a few other issues with our returned data (like warnings and links not working)...

as in - don't look behind the curtain! :smile:

Wikiblurb.js should be very useful :+1:

Bennett Dungan
@Beznet
Jul 09 2016 20:25
how does this codepen get his header items to seemingly space out dynamically as you adjust the window?
I cannot identify the code responsible for this function
Jonathan Mitchell
@Vanhealen
Jul 09 2016 20:28

so if <ul> is the parent of <li> then is

<h2> the parent of <strong> if I have

<h2><strong>Hello bold</strong></h2>

Bennett Dungan
@Beznet
Jul 09 2016 20:44
yes @Vanhealen it would be
To make a little more sense, you can write it like this:
Jonathan Mitchell
@Vanhealen
Jul 09 2016 20:46
ok
Jonathan Mitchell
@Vanhealen
Jul 09 2016 20:51
alright yeah tight
Stephen
@stephepush
Jul 09 2016 20:52
I can't get weather description info from my api's JSON on my weather app project. Refer to line 25 of the JS of my codepen to see. Also:
http://openweathermap.org/current#current_JSON for parameter info
codepen:
http://codepen.io/stephepush/pen/pbWwog
Emmanuelle DeBarge
@emmanuelledebarge
Jul 09 2016 20:52
@Beznet think its in his javascript
@stephepush checking on it
Emmanuelle DeBarge
@emmanuelledebarge
Jul 09 2016 21:01
ok got it
@stephepush var descr = data.weather[0].description;
@stephepush you forgot to make your descr a variable
uniforlyff
@uniforlyff
Jul 09 2016 21:08
you guys take a look at this and tell me how to make it work, it seems i have a CORS prob
I have a basic understanding of XMLHttpRequest and did a little bit of research but still can't figure it out
any help would be great :+1:
input.addEventListener('keypress', function(event) {
  var key = event.which || event.keyCode;
  if(key === 13) {
    var destination = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=' + input.value;
    var xhr = new XMLHttpRequest();
    xhr.open('GET', destination, true);
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4 && xhr.status === 200) {
        var json = JSON.parse(xhr.responseText);
        alert(json);
      }
    };
    xhr.send(null);
  }
Stephen
@stephepush
Jul 09 2016 21:12
@emmanuelledebarge , I thought I declared it as a variable @ line 20?
Emmanuelle DeBarge
@emmanuelledebarge
Jul 09 2016 21:13
@stephepush yes sorry, but you have to set it to an array of 0
uniforlyff
@uniforlyff
Jul 09 2016 21:13
@stephepush try weather[0]
Stephen
@stephepush
Jul 09 2016 21:15
It works! But why?
Also thanks @uniforlyff & @emmanuelledebarge
CamperBot
@camperbot
Jul 09 2016 21:17
stephepush sends brownie points to @uniforlyff and @emmanuelledebarge :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @emmanuelledebarge |http://www.freecodecamp.com/emmanuelledebarge
:cookie: 403 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
Emmanuelle DeBarge
@emmanuelledebarge
Jul 09 2016 21:18
@stephepush because it has to grab different weather types from the api so it has to be set to an array in order to do so
Stephen
@stephepush
Jul 09 2016 21:21
@And the most recent update will always be in index [0] of the array, I'm guessing?
@emmanuelledebarge ^ if you are elsewhere...
Emmanuelle DeBarge
@emmanuelledebarge
Jul 09 2016 21:22
@stephepush yes
Stephen
@stephepush
Jul 09 2016 21:22
ok cool
Juwdohr
@Juwdohr
Jul 09 2016 21:25
Not sure why it's not working, any help?
http://codepen.io/juwdohr/pen/XKbbEZ/
Gary Siu
@GarySiu
Jul 09 2016 21:31
@Juwdohr I'll take a look. Anything specific?
Juwdohr
@Juwdohr
Jul 09 2016 21:33
@GarySiu I can't seem to get it to play, or it's not showing the "X" & "O".
Gary Siu
@GarySiu
Jul 09 2016 21:33
@Juwdohr pen.js:303 Uncaught TypeError: _state.isTerminal is not a function
@Juwdohr I can't find where you've defined _state anywhere
Juwdohr
@Juwdohr
Jul 09 2016 21:37
@GarySiu it's being passed into that function.
Gary Siu
@GarySiu
Jul 09 2016 21:38
@Juwdohr state is being passed into the function but I don't know what state is either. Presumably an object?
Ah ok, the constructor is at the bottom
Gary Siu
@GarySiu
Jul 09 2016 21:43
@Juwdohr So where is isTerminal?
Juwdohr
@Juwdohr
Jul 09 2016 21:46
@GarySiu Sorry isTerminal was changed to gameOver
Gary Siu
@GarySiu
Jul 09 2016 21:47
I see gameOver but no definition for isTerminal
ah
So you probably just need to rename the 2 instances of isTerminal still in the code
Juwdohr
@Juwdohr
Jul 09 2016 22:03
Still not working from what I can tell.
Joel Santos
@St3ps
Jul 09 2016 22:16
Hey folks, i'm trying to work with regex here and i'm confused by how matches work. So:
^[(]\d{3}[)]\d{3}[-]\d{4}
//this will match (555)555-5555
//but if i put the $ at the end of it 
^[(]\d{3}[)]\d{3}[-]\d{4}$ 
//it will no longer match 
//what am i getting wrong here? i thought the ^ and $ operators are supossed to indicate the beggining and end of a string?
George Phalen
@gphalen
Jul 09 2016 22:29
Can anyone help with TwitchTV project? I can get the online and offline accounts fine, but for the life of me, I can't figure out how to print the inactive accounts. They never pass through JSON, so something like "if data.status==422" doesn't work, splicing out online/offline accounts and printing the remaining ones doesn't consistently work because of asynchronous issues, and I'm just at a loss. Any help is appreciated.
uniforlyff
@uniforlyff
Jul 09 2016 22:29
anyone know how i can make this work :(
it seems to be a CORS problem
http://codepen.io/uniforlyff/pen/qNPPba?editors=0010
vaibhav sharma
@vaibsharma
Jul 09 2016 22:36
Hello everyone
Is there anyone who know how to get the link of facebook so that I can use it directly from my web page to update my status
Matt Leonard
@matty22
Jul 09 2016 22:54
Anyone tried creating the Markdown Previewer in Angular2?
hnry
@hnry
Jul 09 2016 23:16
@uniforlyff you need to do JSONP on the request
uniforlyff
@uniforlyff
Jul 09 2016 23:17
@hnry tell me how i read about jsonp but it told me to create a script i did not understand
hnry
@hnry
Jul 09 2016 23:17
@uniforlyff yea it's complicated, you should just use jquery to do the request to simplify it since it'll setup jsonp for you
uniforlyff
@uniforlyff
Jul 09 2016 23:18
@hnry hehe that was what i was trying to avoid i wanted to learn it through pure js
hnry
@hnry
Jul 09 2016 23:28
@uniforlyff sorry got distracted, but this is a good read http://stackoverflow.com/questions/22780430/javascript-xmlhttprequest-using-jsonp if you still want to go down that route
uniforlyff
@uniforlyff
Jul 09 2016 23:28
@hnry okay thank you
CamperBot
@camperbot
Jul 09 2016 23:28
uniforlyff sends brownie points to @hnry :sparkles: :thumbsup: :sparkles:
:cookie: 370 | @hnry |http://www.freecodecamp.com/hnry
Hassan ben haj
@Hassanbhb
Jul 09 2016 23:38
guys why is my javaScripte code returning all the quotes
here is the code
$(document).ready(function(){
    $.ajax({
        url: 'http://quotes.stormconsultancy.co.uk/popular.json',
        dataType: 'jsonp',
        success:function(json){
            // your code to handle data here
            var html = "";
            json.forEach(function(val){
            $(".button").on("click", function(){

                html += "<p>" + val.quote + "</p>";
                $(".quote").html(html);

                });

            })
        }
    })
})
this is my codepen
Stephen James
@sjames1958gm
Jul 09 2016 23:40
@Hassanbhb You have attached multiple button handlers to the same button, which means they all run. and they all use the same html variable so they all add to it.
Hassan ben haj
@Hassanbhb
Jul 09 2016 23:42
@sjames1958gm do i need to move the button handler out of the forEach function
I did it but didn't fix it
maybe i need to clear the html variable after every loop?
Stephen James
@sjames1958gm
Jul 09 2016 23:43
@Hassanbhb Yes. You need to have a single click handler and that should select amongst the returned quotes
Hassan ben haj
@Hassanbhb
Jul 09 2016 23:44
oh ok I think i fixed it here is how
$(document).ready(function(){
    $.ajax({
        url: 'http://quotes.stormconsultancy.co.uk/popular.json',
        dataType: 'jsonp',
        success:function(json){
            // your code to handle data here
            var html = "";
            $(".button").on("click", function(){
                json.forEach(function(val){

                html += "<p>" + val.quote + "</p>";
                $(".quote").html(html);
                html = "";
                });

            })
        }
    })
})
oh but the button does not update the quote when i click it
with a diffirent quote
Stephen James
@sjames1958gm
Jul 09 2016 23:49
@Hassanbhb You get the last quote every time?
@Hassanbhb Store all the quotes in a global array, on a button click use Math.random() to select one amongst the array
Hassan ben haj
@Hassanbhb
Jul 09 2016 23:50
@sjames1958gm aaah I"m gonna try that
thanks
Alayna Browder
@Absailnit
Jul 09 2016 23:54
In the portfolio project it stipulatest to connect the social media buttons to your various social media sites.. do you have to purchase the CodePen Pro for them to connect?
Stephen James
@sjames1958gm
Jul 09 2016 23:54
:+1: