These are chat archives for FreeCodeCamp/HelpFrontEnd

21st
Feb 2017
Gulsvi
@gulsvi
Feb 21 2017 00:01
@sirus3020 Your code runs pretty much all at once - you get the JSON back in the order the server gives it to you.
Albert L. C.
@sirus3020
Feb 21 2017 00:02
Oh. What can I do to resolve it?
Gulsvi
@gulsvi
Feb 21 2017 00:03
@sirus3020 You could collect all the JSON and sort it, or maybe create a div for every user before you run your ajax. Then send the data to the right div for each user.
It really depends on how you want to order it - you could assign a number ID to the divs in the order you want them displayed and sort by ID too I guess.
Albert L. C.
@sirus3020
Feb 21 2017 00:04
alright. will try. thanks! @SkyCoder01
CamperBot
@camperbot
Feb 21 2017 00:04
sirus3020 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 21 2017 00:05
np :+1:
back to more algorithms :(
jump020305
@jump020305
Feb 21 2017 00:07
@ all can you help me i am new to react.
my close button in the pop up was working fine before including the if condition and this two functions basketballContent and popupFooter.
when I put debugger in this function hidePopover, its not stopping, so there is problem here on a tag onClick={this.hidePopover}
can you guys tell me why.
providng my code below
working fiddle https://jsfiddle.net/bspq9cbd/1/ not working fiddle https://jsfiddle.net/uboe1c9h/
ESLMiguel
@ESLMiguel
Feb 21 2017 00:18
Hey fellow campers~ still fairly new in this chat room. just starting on my weather app so might have a bunch of questions later. :smile_cat: hows everyone doing?
Ken Haduch
@khaduch
Feb 21 2017 00:34
@ESLMiguel - you might want to have a look at these notes in the freecodecamp forum: freeCodeCamp/freeCodeCamp#7853 and this one, too: freeCodeCamp/freeCodeCamp#9145 - or at least bookmark them for reading in a while... They are discussions of some of the problems with the weather app and alternatives / solutions.
@jump020305 - the "working" fiddle doesn't seem to work? It doesn't look right to me at all? Should the HTML panel have all of that javascript code in it? And it probably won't work there with those relative addresses for the different packages? The other one appears to be in the same condition - they just both end up with a lot of gibberish in the output panel?
ESLMiguel
@ESLMiguel
Feb 21 2017 00:39
@khaduch thanks for the heads up. much appreciated :thumbsup:
CamperBot
@camperbot
Feb 21 2017 00:39
eslmiguel sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2503 | @khaduch |http://www.freecodecamp.com/khaduch
ESLMiguel
@ESLMiguel
Feb 21 2017 00:40
just a side note. i am going to code it in vanilla js.
will that make it harder for people to help me if i get stuck?
theSyndical
@theSyndical
Feb 21 2017 00:43
@ESLMiguel not really vanilla js should be fine
Ken Haduch
@khaduch
Feb 21 2017 00:44
@c0d0er2 - I would think that you could pretty much mimic the example that they show in the lesson? What have you tried so far?
theSyndical
@theSyndical
Feb 21 2017 00:44
@ESLMiguel make sure you use clean code http://youmightnotneedjquery.com/
ESLMiguel
@ESLMiguel
Feb 21 2017 00:45
@LazyDesigner ok thanks, i want to really learn vanilla before jumping into things like jquery
CamperBot
@camperbot
Feb 21 2017 00:45
eslmiguel sends brownie points to @lazydesigner :sparkles: :thumbsup: :sparkles:
:cookie: 114 | @lazydesigner |http://www.freecodecamp.com/lazydesigner
ESLMiguel
@ESLMiguel
Feb 21 2017 00:48
@LazyDesigner thats a really handy website!
Tiago Morgado
@tiagomorgado
Feb 21 2017 00:56
hello everyone !!
Mac
@itchick85
Feb 21 2017 00:57
Trying to figure out why my social media buttons are not showing up. http://codepen.io/itchick85/pen/vgvrBX/
Tiago Morgado
@tiagomorgado
Feb 21 2017 00:58
i'm trying to build my first tribute page, and i have a question regarding it.
when styling it with CSS, i need to put some links on the html page. where do i get these links from?
R^2
@iriquoi
Feb 21 2017 00:58
should I be using section instead of div for html 5 semantics????
theSyndical
@theSyndical
Feb 21 2017 01:00
@iriquoi if it feels like a section then yes
R^2
@iriquoi
Feb 21 2017 01:01
lol that makes sense!
Albert L. C.
@sirus3020
Feb 21 2017 01:01
@mac you have to import font awesome.
Ken Haduch
@khaduch
Feb 21 2017 01:01
@itchick85 - you should have href= instead of herf= for your anchor tag attributes. (I just noticed that while looking at the code) For the Icons - Go to your CSS control panel, and in one of the external library inputs, type "font-awesome" and select the URL that pops up - that should fix it. (Those libraries should be loaded in the CSS control panel, anyway.)
R^2
@iriquoi
Feb 21 2017 01:01
but is there like a standard
jump020305
@jump020305
Feb 21 2017 01:03
@khaduch can you tell me why its not calling popup function??
Ken Haduch
@khaduch
Feb 21 2017 01:03
@tiagomorgado - it can be any relevant link related to the subject of your page - a wikipedia article link, some other website - book page, author page, movie page, corporate information page, etc. It depends what you write about.
@jump020305 - do the pages load properly for you at all? It just looks like garbage - I don't think that the jsfiddles were set up properly at all? Did you just copy and paste code in there, or actually have it running?
theSyndical
@theSyndical
Feb 21 2017 01:05
@iriquoi the standard is that section shouldnt be used as a container and it should always start with an h tag
Mac
@itchick85
Feb 21 2017 01:08
@khaduch thanks that help a lot
CamperBot
@camperbot
Feb 21 2017 01:08
itchick85 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2504 | @khaduch |http://www.freecodecamp.com/khaduch
Tiago Morgado
@tiagomorgado
Feb 21 2017 01:08
links like: ref="css/bootstrap.min.css" rel="stylesheet">
or: <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
Ken Haduch
@khaduch
Feb 21 2017 01:09
@tiagomorgado - oh, you mean to load bootstrap? If you are using codepen, you can just go to the CSS config panel. At the bottom of the panel, they have "quick adds" where you can select libraries to load, such as Bootstrap (be aware that it loads Bootstrap V4) and other CSS packages.
@tiagomorgado - add the google fonts link in the same place - you can paste it into the "Add External CSS" section.
Tiago Morgado
@tiagomorgado
Feb 21 2017 01:13
@khaduch thank you!
CamperBot
@camperbot
Feb 21 2017 01:13
tiagomorgado sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2505 | @khaduch |http://www.freecodecamp.com/khaduch
ESLMiguel
@ESLMiguel
Feb 21 2017 01:14
looking for advice: I am on the weather app project and will be using vanilla js to code it. I coded the quote generator in vanilla js also. After that, I plan to use libraries to code the next 2 projects. My question is: would it be better to focus on only learning one library (say, jQuery), or get familiar with a few different ones?
Albert L. C.
@sirus3020
Feb 21 2017 01:14
You guys see something wrong here?
function checkStats(count){
if ( count < streamers.length ){
('#list').html('<p class="animated fadeIn">Offline</p>')
checkStats(++count);
}
}
i cant seem to call the function.
$('#all').click(function(){
$('#list').html('')
checkStats(0);
});
jump020305
@jump020305
Feb 21 2017 01:17
@khaduch I just used fiddle so that i can give the code which is present in my code base....
Ken Haduch
@khaduch
Feb 21 2017 01:17
@sirus3020 - it's hard to tell just looking at a snippet of code? Would you be able to post a URL to your project? Oh, one thing - you might need a $ before $('#list')
Albert L. C.
@sirus3020
Feb 21 2017 01:18
omg
Ken Haduch
@khaduch
Feb 21 2017 01:18
@jump020305 - but it doesn't work at all on jsfiddle, that's my point? I am not a React guru, but know a little (and learning) - having something that will load and run would make it more feasible to try and offer help.
Albert L. C.
@sirus3020
Feb 21 2017 01:18
thats it LOL.
R^2
@iriquoi
Feb 21 2017 01:18
@itchick85 ```
Albert L. C.
@sirus3020
Feb 21 2017 01:18
thanks! @khaduch . that $ sign became invisible for me lol.
CamperBot
@camperbot
Feb 21 2017 01:18
:star2: 2506 | @khaduch |http://www.freecodecamp.com/khaduch
sirus3020 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
R^2
@iriquoi
Feb 21 2017 01:19

@itchick85 ```

<button type="button" class="btn btn-default" aria-label="Left Align">
<span aria-hidden="true"><a href="https://www.google.com/">the button</a></span>
</button>

sorry typing to fast
thats how your suppose to make a button in boot strap
Ken Haduch
@khaduch
Feb 21 2017 01:24
@sirus3020 - you're welcome... it got away from me for a couple minutes, too. :)
Robert Collins
@robbiemu
Feb 21 2017 01:24

anyone done events on media queries?

    window.matchMedia('@media (max-width: 768px)').addListener(function(changed) {
      console.log('changed')
      if(changed.matches) {

https://modernweb.com/using-media-queries-in-javascript/
it's not working for me though

Zack Richardson
@ZackRich12
Feb 21 2017 01:34
anyone have a more visually appealing way to make the lists at the bottom of the screen??
http://codepen.io/ZackRich12/pen/egwWKy?editors=1100
bobevanz
@bobevanz
Feb 21 2017 01:35
i didnt think id be back so soon lol. Only my second hiccup so far so bare with me. Add Borders Around your Elements is where im stuck. when i run the test the only green is Your img element should have the class smaller-image. but if i change my class for smaller-image to class1 all the other tests pass, except for the one i mentioned earlier
Tyler Moeller
@TylerMoeller
Feb 21 2017 01:36
@ZackRich12 I like the way they list everything with an icons alternating around the center on the Angular site: https://angular.io/
Ken Haduch
@khaduch
Feb 21 2017 01:37
@bobevanz - what does your code look like at this point?
bobevanz
@bobevanz
Feb 21 2017 01:37
one sec @khaduch

@khaduch

<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">

<style>
.red-text {
color: red;
}

h2 {
font-family: Lobster, Monospace;
}

p {
font-size: 16px;
font-family: Monospace;
}
.smaller-image {
width: 100px;
}
.thick-green-border {
border-color: green;
border-width: 10px;
border-style: solid;
}

</style>

<h2 class="red-text">CatPhotoApp</h2>

<img class1="smaller-image" class="thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back. ">

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

jump020305
@jump020305
Feb 21 2017 01:40
@khaduch its hard to include all the packages in this fiddle
Ken Haduch
@khaduch
Feb 21 2017 01:40
@bobevanz - if you are adding two or more classes, they have to be included within one set of quotes, with a space between the class names, like: class="class1 class2" - there cannot be multiple "class" attributes. Not sure if that will fix everything.
bobevanz
@bobevanz
Feb 21 2017 01:46
@khaduch It worked! got it, only one class="" thanks
CamperBot
@camperbot
Feb 21 2017 01:46
bobevanz sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2507 | @khaduch |http://www.freecodecamp.com/khaduch
Albert L. C.
@sirus3020
Feb 21 2017 01:47
guys how Can i mimic the .append with .html with different IDs
function checkStats(count){
if ( count < streamers.length ){
$('#list').html('<li id="streamer'+count+'">check</li>')
checkStats(++count);
}
}
'#list' is a <ul>
Hector Garcia
@augmt
Feb 21 2017 02:04
@sirus3020 .html with no arguments returns an element's html content
Gilbert Gaviola
@singleparin
Feb 21 2017 02:05
hey guys, I need help with my navigation bar, how is it that it sticks all the way to the right end but leaves a litle bit of padding on the left?
Zack Richardson
@ZackRich12
Feb 21 2017 02:07
@TylerMoeller What do you mean? and i am trying to stick to html,css and bootstrap
David Meyers
@davmey
Feb 21 2017 02:10
@singleparin do you have a codepen for this?
Gilbert Gaviola
@singleparin
Feb 21 2017 02:11
yes, give me a sec.
Tyler Moeller
@TylerMoeller
Feb 21 2017 02:13
@ZackRich12 I mean use an image with the word "Health" on the left side, bullet points on the right. Below that, image on the right with the word "Transportation", relevant bullet points directly to the left. Below that, "Computer Technology" and an image on the left, relevant bullet points on the right. All with col-xs-6 bootstrap columns.
Just like they do it on that angular site - a vertical list with images
Gilbert Gaviola
@singleparin
Feb 21 2017 02:14
im very new at this and am getting confused about this project
Zack Richardson
@ZackRich12
Feb 21 2017 02:15
@TylerMoeller ?
blob
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:16
hello guys I am at challenge "Build a Random Quote Machine". I have written code in CodePen.io but I am not able to get the output. Can you guys please suggest? Here is the url https://codepen.io/pshiwakoti1/pen/pRMgzQ
Tyler Moeller
@TylerMoeller
Feb 21 2017 02:16
blob
@ZackRich12
Zack Richardson
@ZackRich12
Feb 21 2017 02:17
ooooo great idea Thanks! @TylerMoeller
CamperBot
@camperbot
Feb 21 2017 02:17
zackrich12 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1505 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Zack Richardson
@ZackRich12
Feb 21 2017 02:17
@TylerMoeller use inline??
Tyler Moeller
@TylerMoeller
Feb 21 2017 02:17
@ZackRich12 Was worried I wasn't making sense :)
@ZackRich12 I think that would be a bootstrap grid. Three rows with two columns in each row.
xemexpress
@xemexpress
Feb 21 2017 02:18
@singleparin add
left: 0; in your ul css
Zack Richardson
@ZackRich12
Feb 21 2017 02:19
okyy
Gilbert Gaviola
@singleparin
Feb 21 2017 02:21
@xemexpress Ahhhh ok, thanks a lot.
CamperBot
@camperbot
Feb 21 2017 02:21
singleparin sends brownie points to @xemexpress :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @xemexpress |http://www.freecodecamp.com/xemexpress
Ken Haduch
@khaduch
Feb 21 2017 02:22
@bobevanz - you're welcome
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:29
can anyone tell me that how to display the javascript section of code in the outpout using CodePen
xemexpress
@xemexpress
Feb 21 2017 02:30
@singleparin welcome
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:30
like in html page, I would use script tag and write javascript
but how to do the same thing using CodePen
Zack Richardson
@ZackRich12
Feb 21 2017 02:31
@TylerMoeller http://codepen.io/ZackRich12/pen/egwWKy
how do i display the text beside the image?
xemexpress
@xemexpress
Feb 21 2017 02:31
@pshiwakoti1 there should be a box for javascript
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:31
how to use it?
Im not able to figure out why my code is not being displayed
xemexpress
@xemexpress
Feb 21 2017 02:32
can you send your codepen here?
Zack Richardson
@ZackRich12
Feb 21 2017 02:32
link it @pshiwakoti1
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:32
sure
maybe I should call a function
xemexpress
@xemexpress
Feb 21 2017 02:34
@pshiwakoti1 you should round() your i first
or it is a floating-point number which can't be used as index
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:34
ok
var i = Math.floor((Math.random() * 10))%3;
does that work?
@xemexpress are you looking at my code?
xemexpress
@xemexpress
Feb 21 2017 02:37
floor() also works for your purpose
@pshiwakoti1 then, your console.log should be moved to JS box
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:37
ok
i moved it
xemexpress
@xemexpress
Feb 21 2017 02:37
or your browser don't know what myQuotes is
can u look at it now
xemexpress
@xemexpress
Feb 21 2017 02:38
the quote will appear in your dev console (in your browser)
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:38
how do i call a function from html editor section
I have converted my javascript code to a function
now I want to call that function from my html editor
how do I do that?
should I wrap in within a button?
xemexpress
@xemexpress
Feb 21 2017 02:40

@pshiwakoti1 why not call it in your JS box?

$(document).ready(function(){
showQuote();
});

Tyler Moeller
@TylerMoeller
Feb 21 2017 02:41
@ZackRich12 Are you familiar with the bootstrap grid?
Albert L. C.
@sirus3020
Feb 21 2017 02:41
Question: I have two functions. 1 should go first to check if user is online. then 2nd function prints it.
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:41
@xemexpress documet ready code goes to which editor?
Albert L. C.
@sirus3020
Feb 21 2017 02:41
checkStats(0);
printStats(0);
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:41
javascript or html editor?
xemexpress
@xemexpress
Feb 21 2017 02:41
JS editor
Zack Richardson
@ZackRich12
Feb 21 2017 02:42
kind of, i used it in the parts above, but i find it very confusingand difficult to grasp
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:42
ok
Zack Richardson
@ZackRich12
Feb 21 2017 02:42
@TylerMoeller
xemexpress
@xemexpress
Feb 21 2017 02:42
@pshiwakoti1 put JS code in JS editor
Tyler Moeller
@TylerMoeller
Feb 21 2017 02:43
You can create rows with up to 12 columns in each and have them respond differently based on screen size. @ZackRich12 This is a very rough idea of how you would do it, but you'll need to add some extra classes to make it behave on mobile vs desktop correctly. http://s.codepen.io/TylerMoeller/pen/dNxGez?editors=1100
Albert L. C.
@sirus3020
Feb 21 2017 02:43
would it execute both at the same time, or the checkStats() would go first and then the printStats()?
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:44
@xemexpress can u please look at it again? Why its not showing anything on the console or output? Here is the link https://codepen.io/pshiwakoti1/pen/pRMgzQ
xemexpress
@xemexpress
Feb 21 2017 02:44
@pshiwakoti1 if you want to display the quote on the screen, you better to create a <div> in html editor, then use .html() or .text() in JS editor
Tyler Moeller
@TylerMoeller
Feb 21 2017 02:44
Maybe a bit advanced if you're just learning how to use the grid though...
xemexpress
@xemexpress
Feb 21 2017 02:45
@pshiwakoti1 well, you should add the external javascript in the codepen setup
@pshiwakoti1 to do so, click the gear icon next to the title bar of JS editor
Quick-add -> select "jQuery"
since the $() doing the selection is part of the Jquery
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 02:54
Zack Richardson
@ZackRich12
Feb 21 2017 02:55
@TylerMoeller http://codepen.io/ZackRich12/pen/egwWKy?editors=1100 I am not understanding while numbers i should choose for "col-md-6"
xemexpress
@xemexpress
Feb 21 2017 03:15
@pshiwakoti1 your quote appeared in your dev console
@pshiwakoti1 see in the console (developer tools if you are using chrome) :)
you may need html() for the display http://api.jquery.com/html/
can anyone let me know why only one user detail is shown?
Adam
@GoingAllTheWayUp
Feb 21 2017 03:25
var jsonG;

$(document).ready(function() {
    var htmlCode;
        $("button").on("click", function() {
        $.getJSON('http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?', function(json) {

        $("#quote").html("<h2>" + JSON.stringify(json.quoteText) + "</h2>");

    if   ((JSON.stringify(json.quoteAuthor).length) === 0) {
            console.log (JSON.stringify(json.quoteAuthor));
                 $("#author").html("<h4>" + "Unknown Author" + "</h4>");                   
          } else  {                        
        $("#author").html("<h4>" + JSON.stringify(json.quoteAuthor).replace(/\"/g, "") + "</h4>");
          };
          });
});
        });
https://www.freecodecamp.com/challenges/build-a-random-quote-machine
I cannot get my code to recognize when the author is not given in the json object. any help?
Johnny
@jtan3
Feb 21 2017 03:26
@bigyankarki looks like the space is too small to see the accounts
Bigyan Karki
@bigyankarki
Feb 21 2017 03:27
@jtan3 what spacec are you talking about?
Johnny
@jtan3
Feb 21 2017 03:28
@bigyankarki i see overlapping text in all
Cory Bowles
@cbconsulting
Feb 21 2017 03:29
Need help with moving forward with portfolio page.
Bigyan Karki
@bigyankarki
Feb 21 2017 03:30
@jtan3 ya thats a problem too
Cory Bowles
@cbconsulting
Feb 21 2017 03:30
I am looking at boostrap examples and trying to get started with simple layout
Bigyan Karki
@bigyankarki
Feb 21 2017 03:30
but more than that it shows only one username while it should be showing multiple one
Johnny
@jtan3
Feb 21 2017 03:34
@bigyankarki i don't think you need [i] in your .forEach loop
Bigyan Karki
@bigyankarki
Feb 21 2017 03:36
@jtan3 nope if i delete [i], it wont work
Johnny
@jtan3
Feb 21 2017 03:37
@bigyankarki forEach loops through your userNames array already. Isn't the [i] used in for loops?
Bigyan Karki
@bigyankarki
Feb 21 2017 03:40
@jtan3 yup i looked at it
but even if i remove i, its still not working
userName.forEach(function(letter, i){
   var url = 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i];

  $.ajax({
    url: url,
    type: 'GET',
    dataType: 'json',
    success: function(user) {
      if (user.stream === null){
       $("#allUsers").html('<div class= "col-md-1" id="allLogo"><img src= "http://www.freeiconspng.com/uploads/error-icon-4.png"></div><div class= "col-md-2" id="allUsername">'+ userName[i]+ '</div><div class= "col-md-1" id="allStatus">' + user.stream +'</div>');
Johnny
@jtan3
Feb 21 2017 03:41
@bigyankarki try append instead of .htmL?
@bigyankarki $("#allUsers").append('<div class= "col-md-1" id="allLogo"><img src= "http://www.freeiconspng.com/uploads/error-icon-4.png"></div><div class= "col-md-2" id="allUsername">'+ userName[i]+ '</div><div class= "col-md-1" id="allStatus">' + user.stream +'</div>');
Mac
@itchick85
Feb 21 2017 03:44
I put the correct social links in but when I click on them only one works. http://codepen.io/itchick85/pen/vgvrBX
Bigyan Karki
@bigyankarki
Feb 21 2017 03:45
@jtan3 yup its working
but i think i need to use tables insted of divs right?
Johnny
@jtan3
Feb 21 2017 03:46
@bigyankarki you can do divs maybe on the next row?
Bigyan Karki
@bigyankarki
Feb 21 2017 03:48
@jtan3 next row?
Johnny
@jtan3
Feb 21 2017 03:48
@bigyankarki try putting it in a different div?
Bigyan Karki
@bigyankarki
Feb 21 2017 03:51
@jtan3 do you mean in a different class?
i didnt quite get you @jtan3 :)
Johnny
@jtan3
Feb 21 2017 03:52
@itchick85 the links work when i open them in a new tab. You can put target="_blank" in your anchor tags . This makes them open to a new tab on the first click.
@bigyankarki instead of #allUser try #all in your append
@jtan3 i think my bootstrap class is not working there
i mean col-md-1 and the rest
we can use that class right?
Johnny
@jtan3
Feb 21 2017 04:01
@bigyankarki i see them all in a column
@bigyankarki you wanted to do that right?
Bigyan Karki
@bigyankarki
Feb 21 2017 04:02
nope I want to divide it in three different coloum of size 1-2-1
i mean in three coloumn inside all div which is a third of total screen size
Johnny
@jtan3
Feb 21 2017 04:04
@bigyankarki i think those columns are too small
Bigyan Karki
@bigyankarki
Feb 21 2017 04:05
hmm @jtan3 can i use tables or is it okay to use div
@jtan3 what can i do now?
Johnny
@jtan3
Feb 21 2017 04:06
@bigyankarki try putting it outside all/online/offline
Bigyan Karki
@bigyankarki
Feb 21 2017 04:10
but what if I want it inside all section?
Johnny
@jtan3
Feb 21 2017 04:10
@bigyankarki *$("#all").append('<div class= "col-md-1" id="allLogo"><img src= "http://www.freeiconspng.com/uploads/error-icon-4.png"></div><div class= "col-md-2" id="allUsername">'+ userName[i]+ '</div><div class= "col-md-1" id="allStatus">' + user.stream +'</div>');
try adding div class="row" in front of it
and separate each div your img tag with +
jump020305
@jump020305
Feb 21 2017 04:44
@khaduch yeah i checked in console, its returning undefined, can you tell me how to fix it this.onclick null this.hidePopover undefined this.onClick undefined this.props undefined this.Function function Function() { [native code] }
Cory Bowles
@cbconsulting
Feb 21 2017 04:52
Looking for help with web portfolio. Anyone wants to pair let me know.
anyone who has completed twitch.tv project
and can review this project
is anything missing from this project?
h1tag
@h1tag
Feb 21 2017 05:53
@bigyankarki missing:
  1. User Story: I can click the status output and be sent directly to the Free Code Camp's Twitch.tv channel.
  2. User Story: if a Twitch user is currently streaming, I can see additional details about what they are streaming.
  3. User Story: I will see a placeholder notification if a streamer has closed their Twitch account (or the account never existed). You can verify this works by adding brunofin and comster404 to your array of Twitch streamers.
Bigyan Karki
@bigyankarki
Feb 21 2017 06:00
@fortMaximus for the first user story I need to insert a link in status
for second what is meant by additionall details, I added game
and what exactly does third user story means?
h1tag
@h1tag
Feb 21 2017 06:04
@bigyankarki for the first and second one, see the example given in the project description. And about the second, you need to add more details, not just the picture.
for the 3rd, put something like "Channel deleted or doesn't exist", if the channel is deleted or doesn't exist
Felix the guy
@felixtheguy
Feb 21 2017 06:11
Hi guys~ I having problem with codpen,map 118 a Tribute page, the code work well on my local webstorm, but somehow can not show all the style in codepen, is anyone able to take a look?
http://codepen.io/felixtheguy/pen/xgvOvx
bleka
@bleka
Feb 21 2017 06:11
Hi, why is there a white border around my image? https://codepen.io/bleka/pen/dNBvZV
h1tag
@h1tag
Feb 21 2017 06:13
@felixtheguy you need to add Bootstrap from the CSS settings
Felix the guy
@felixtheguy
Feb 21 2017 06:14
in the setting i add bootstrap in already @fortMaximus
@fortMaximus ....thanks .....forgot add in css settings....
CamperBot
@camperbot
Feb 21 2017 06:15
felixtheguy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
Chris Jantzen
@XXiphias
Feb 21 2017 06:16
@bleka its because your .img div is filling the column
and you have a background color of white
h1tag
@h1tag
Feb 21 2017 06:17
@felixtheguy also, add this version https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css, instead of 4-alpha
Chris Jantzen
@XXiphias
Feb 21 2017 06:17
if you make .img { width: 334px; } that will stop the border on either side
Felix the guy
@felixtheguy
Feb 21 2017 06:19
@fortMaximus why choose 3.3.7?
h1tag
@h1tag
Feb 21 2017 06:21
@felixtheguy because the new version is still in alpha, and they changed classes names in "4-alpha", so your classes won't work properly
I like the dog ;)
Felix the guy
@felixtheguy
Feb 21 2017 06:22
@fortMaximus thanks...I found the page look different after change to 3.3.7
CamperBot
@camperbot
Feb 21 2017 06:22
:warning: felixtheguy already gave fortmaximus points
felixtheguy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
Austin Wolke
@Jumboshr1mp
Feb 21 2017 06:23
hey
Felix the guy
@felixtheguy
Feb 21 2017 06:23
is a lovely dog
Austin Wolke
@Jumboshr1mp
Feb 21 2017 06:24
how do I center list bulet points with the rest of the text
Felix the guy
@felixtheguy
Feb 21 2017 06:27
not so sure....but according to the page if you put all these col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2....it will work.......if you try to put anything like text-center it will go two side
in what case i should use col-lg?
Austin Wolke
@Jumboshr1mp
Feb 21 2017 06:28
the link @fortMaximus sent worked
creating a class to center it all together and then assigning the class to the UL
Felix the guy
@felixtheguy
Feb 21 2017 06:29
in my case i was trying to use all bootstrap....
Austin Wolke
@Jumboshr1mp
Feb 21 2017 06:31
nice, im just kinda trying to use anything and everything to see how it works
Felix the guy
@felixtheguy
Feb 21 2017 06:31
do know how to write css to do it but never use bootstrap LOL....
Austin Wolke
@Jumboshr1mp
Feb 21 2017 06:32
idk if I like bootstrap all that much tbh lol
Felix the guy
@felixtheguy
Feb 21 2017 06:33
is easier to get the job done anyway
afani martin
@whiz25
Feb 21 2017 07:02
i need some help with my JavaScript calculator. i dont understand the error in the JQuery code. Here is the link http://codepen.io/whiz25/pen/vgpXwX
kirbyedy
@kirbyedy
Feb 21 2017 07:07
@whiz25 I can`t even load your pen, its stuck on loading...
most probably you have an error in javascript section
afani martin
@whiz25
Feb 21 2017 07:18
@kirbyedy yeah there is an error but i dont know how to fix it
kirbyedy
@kirbyedy
Feb 21 2017 07:19
sorry, cant help, as its stuck on loading :(
try to comment out line by line
mithun2017
@mithun2017
Feb 21 2017 07:22
how to add image in codepen?? tell me guyz
anyone knows how to set an initial quote?
Johnny
@jtan3
Feb 21 2017 07:26
@FL8Liew put it in the html?
FL8Liew
@FL8Liew
Feb 21 2017 07:26
but then it will be fixed
any way to randomise it?
Johnny
@jtan3
Feb 21 2017 07:27
try putting text in the box
set it up without a click
@FL8Liew var r = Math.floor(Math.random() * a.length); $(".quote").html(a[r].quote); $(".name").html(a[r].name);
place it outside your click function
FL8Liew
@FL8Liew
Feb 21 2017 07:32
@jtan3 okay it works
@jtan3 thanks
CamperBot
@camperbot
Feb 21 2017 07:32
fl8liew sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 315 | @jtan3 |http://www.freecodecamp.com/jtan3
Johnny
@jtan3
Feb 21 2017 07:41
@FL8Liew you can take out var r in your click function since you set it up globally
afani martin
@whiz25
Feb 21 2017 08:02
@mithun2017 add with an image tag like this ....<img src="">
Bgene
@Bgene
Feb 21 2017 08:35
vertical-align won't apply to my elements
guys help
xemexpress
@xemexpress
Feb 21 2017 08:42
@Bgene can you send your codepen here?
I want to apply to my .social-buttons
you will also notice that everything is out of alignment because the screen is smaller. I s there a way I can solve that?
xemexpress
@xemexpress
Feb 21 2017 08:47
@Bgene what do you want to align the .social-buttons with?
Bgene
@Bgene
Feb 21 2017 08:48
@xemexpress I want to put it in the middle of the page in the center
xemexpress
@xemexpress
Feb 21 2017 08:49
@Bgene for the alignment problem, read this https://v4-alpha.getbootstrap.com/layout/grid/
Bgene
@Bgene
Feb 21 2017 08:51
okay sure
xemexpress
@xemexpress
Feb 21 2017 09:04
@Bgene sorry, i don't know how to solve the problem. Normally I use margin: 0 auto, which can fix the alignment
but still, you can use position: relative; left: some values; to adjust the alignment
@all give a look
xemexpress
@xemexpress
Feb 21 2017 09:08
@anilpaliwal the score doesn't count right (I won the programme but it still said computer win)
try this routine: left-top, right-bottom,left-bottom...
Deepanshu Chug
@deepanshuchg
Feb 21 2017 09:14
bootstrap*
isnt it supported any more?
kirbyedy
@kirbyedy
Feb 21 2017 09:18
@deepanshuchg use the bootstrap 3.3.6
version 4 is still in the testing phase
Deepanshu Chug
@deepanshuchg
Feb 21 2017 09:19
I selected bootstrap in codepen, it automatically inserts 4.0
use this one
Deepanshu Chug
@deepanshuchg
Feb 21 2017 09:24
Alright, thanks @kirbyedy
CamperBot
@camperbot
Feb 21 2017 09:24
deepanshuchg sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1821 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Daniël Kroon
@danielkroon
Feb 21 2017 09:25
Screen Shot 2017-02-21 at 10.24.16.png
can anyone see what I’m doing wrong here?
Bgene
@Bgene
Feb 21 2017 09:43
@xemexpress thanks anyway
CamperBot
@camperbot
Feb 21 2017 09:43
bgene sends brownie points to @xemexpress :sparkles: :thumbsup: :sparkles:
:cookie: 334 | @xemexpress |http://www.freecodecamp.com/xemexpress
Bgene
@Bgene
Feb 21 2017 09:55
position:fixed; won't work on my navbar
Manny Hagman
@mannyhagman
Feb 21 2017 10:07
We can align thjnvs in the middle with flexbox
And even easier with flexbox grid
Which is a new grid frame work but with 1000 times less code than BS
zeddmacharia
@zeddmacharia
Feb 21 2017 10:23
Manny Hagman
@mannyhagman
Feb 21 2017 10:29
Can you be more specific?
David Michael
@darlingdavid
Feb 21 2017 10:50
Hi guys! can i change the color of jumbotron? like, i want blue
Matthew
@Krimsonmedic
Feb 21 2017 10:59
@zeddmacharia is that for the first set of front end projects? the portfolio page?
@darlingdavid I had to set the color in CSS
and add the !important tag
although I don't know if the important tag worked, I didn't test run after just changing the color in css lol
kirbyedy
@kirbyedy
Feb 21 2017 11:01
using important is not a good practice, are you sure that was the only solution ?
Matthew
@Krimsonmedic
Feb 21 2017 11:01
.jumbotron {background-color: #2e7bf7:}
I'll go back and remove it, and see if it still works without it.
it doesn't work without important @kirbyedy , I'm not sure of another solution
there was a thread on stack-overflow about making jumbotron transparent, and then changing background of the text, but I couldn't get it to work.
Why is !important bad?
kirbyedy
@kirbyedy
Feb 21 2017 11:06
@Krimsonmedic link your pen to see it
David Michael
@darlingdavid
Feb 21 2017 11:07
hi @krimsonmedic thanks! i'll try using it. will give you feedback soon =)
CamperBot
@camperbot
Feb 21 2017 11:07
darlingdavid sends brownie points to @krimsonmedic :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @krimsonmedic |http://www.freecodecamp.com/krimsonmedic
kirbyedy
@kirbyedy
Feb 21 2017 11:09
<body id="icon" background=>
uhmmm not sure what is it ?
<h1 class="text-center jumbotron">
this is wrong
you dont apply the jumbotron to your h1
Matthew
@Krimsonmedic
Feb 21 2017 11:12
the <body id="icon" background=> is tied to a Jquery function
the background will change with the weather
badalsaibo
@heyDante
Feb 21 2017 11:12
Hey guy, do you know any good reliable place to learn CSS design/animation?
Matthew
@Krimsonmedic
Feb 21 2017 11:13
as the API reports a different weather condition "Icon"'s background image is linked to a different place.
But it only works in chrome if viewed in HTTPS://
so you might not be seeing anything but the buttons
David Michael
@darlingdavid
Feb 21 2017 11:14
i did it! though i figure blue is not a good color. lol.
Matthew
@Krimsonmedic
Feb 21 2017 11:14
@kirbyedy what am I supposed to apply jumbotron
David Michael
@darlingdavid
Feb 21 2017 11:14
.jumbotron {background-color: #2e7bf7 !important} worked thanks @Krimsonmedic
CamperBot
@camperbot
Feb 21 2017 11:14
darlingdavid sends brownie points to @krimsonmedic :sparkles: :thumbsup: :sparkles:
:warning: darlingdavid already gave krimsonmedic points
Matthew
@Krimsonmedic
Feb 21 2017 11:14
@darlingdavid I just used googles hex picture to pick a blue, if you google hex color picker it will pop up at the top
you can play with colors there
Manny Hagman
@mannyhagman
Feb 21 2017 11:15
Check the version of bootstrap
I believe it defaults to 4 in code pen now?
David Michael
@darlingdavid
Feb 21 2017 11:18
will do @Krimsonmedic you're a big help
Matthew
@Krimsonmedic
Feb 21 2017 11:19
already changed it @kirbyedy although I don't see a difference, I guess I could put multitple elements inside of that div tho
Manny Hagman
@mannyhagman
Feb 21 2017 11:19
Daniel is thst alll the code?
David Michael
@darlingdavid
Feb 21 2017 11:19
do you think i'm overdoing it if i wanted a slideshow in my tribute page? lol
Matthew
@Krimsonmedic
Feb 21 2017 11:19
Not if it has puppies, everybody loves puppies
David Michael
@darlingdavid
Feb 21 2017 11:20
lol. i don't know how to do it. no mention of it in the challenges haha
i need to do more readings
Matthew
@Krimsonmedic
Feb 21 2017 11:22
talk to google like it's a professor... "how do I add a slide show to my website?"
David Michael
@darlingdavid
Feb 21 2017 11:23
one more thing
Matthew
@Krimsonmedic
Feb 21 2017 11:24
but wait! there's more!
David Michael
@darlingdavid
Feb 21 2017 11:24
i noticed a little white space in between the picture and the background color
do you know how to remove it? haha
Matthew
@Krimsonmedic
Feb 21 2017 11:24
link the codepen
Matthew
@Krimsonmedic
Feb 21 2017 11:25
and not off the top of my head, I do remember reading there's a way to do it tho
David Michael
@darlingdavid
Feb 21 2017 11:25
i've just started so
Matthew
@Krimsonmedic
Feb 21 2017 11:25
I just started like last month
David Michael
@darlingdavid
Feb 21 2017 11:26
wow seems you've gone a long way now
Matthew
@Krimsonmedic
Feb 21 2017 11:27

Bootstrap suggests below here

To make the jumbotron full width, and without rounded corners, place it outside all .containers and instead add a .container within.

<div class="jumbotron">
<div class="container">
...
</div>
</div>

I copied that from stack overflow. Maybe give that a try?
David Michael
@darlingdavid
Feb 21 2017 11:28
no, what i meant was that thin strip of white between the green and the blue color
im trying to make it look like they are one element
zeddmacharia
@zeddmacharia
Feb 21 2017 11:31
@Krimsonmedic yes it is...what am i doing wrong
Matthew
@Krimsonmedic
Feb 21 2017 11:32
@darlingdavid man, I'm not sure... For what ever reason it looks like they are slightly different widths too. Maybe try changing up the containers somehow
@zeddmacharia I don't think it called for a second page, but unless you're getting it hosted somewhere, to make another webpage and link it...you would just make another codepen with the same format, and just hyperlink to it
@darlingdavid not sure if this will work, but in css..try this
  • {
    margin:0;
    padding:0;
    }
thats an asterisk, not sure why it's a dot on the screen here
the asterisk is a wildcard selector
David Michael
@darlingdavid
Feb 21 2017 11:36
got it will try =)
Matthew
@Krimsonmedic
Feb 21 2017 11:42
I've got to go for a little while, hope you figure it out!
David Michael
@darlingdavid
Feb 21 2017 11:44
thanks, maybe i'll give it a rest for now too. haha will try tomorrow
Nazar
@IsaakNazar
Feb 21 2017 12:44
Hi guys! What is URL localhost on a computer?
RonBeh
@RonBeh
Feb 21 2017 12:49

hey the js code that i wrote on codepen doesnt work when i open the same code as a file in my browser.
i added the same library as in codepen didnt change anything


$("#cityText").keyup(function()
  {
  City = $( this ).val();
  console.log(City)
  })

 .keyup()

any idea?

johnnydemol
@johnnydemol
Feb 21 2017 12:49

Hey guys,

I'm working on the wikipedia viewer and I'm working on a button that adds ten more articles to the list of results by adding 10 to the request limit before running the search script again. The script only seems to work when written inline which is pretty annoying when trying to call it from another function. What am I doing wrong?
https://codepen.io/svenhendrikx/pen/qRgdvR

Ghulam Shabir
@ghulamshabir
Feb 21 2017 12:50
@IsaakNazar if you setup a webserver on your computer it will server you webpages at http://localhost/ , it's ip address will be 127.0.0.1. if it's listens to other than 80 then also would need to mention it in the url like this http://localhost:8080/ for example
Nazar
@IsaakNazar
Feb 21 2017 12:54
@ghulamshabir @ghulamshabir thx
CamperBot
@camperbot
Feb 21 2017 12:54
:star2: 1873 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
isaaknazar sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
Adithya Reddy
@tallpants
Feb 21 2017 12:55
Hello everyone
Ghulam Shabir
@ghulamshabir
Feb 21 2017 12:56
@IsaakNazar :+1:
Nazar
@IsaakNazar
Feb 21 2017 12:56
@ghulamshabir do U know how to work with Brackets editor?
Dany Din
@danydin
Feb 21 2017 12:56
@RonBeh it will work, where did you load the js-jquery code
Ghulam Shabir
@ghulamshabir
Feb 21 2017 12:57
@IsaakNazar never used it
Nazar
@IsaakNazar
Feb 21 2017 12:57
@ghulamshabir what editor do U use?
Adithya Reddy
@tallpants
Feb 21 2017 12:57
Brackets is really good for HTML/CSS/jQuery
But it's not very useful if you start adding things like React or Sass
kirbyedy
@kirbyedy
Feb 21 2017 12:57
what about php
Adithya Reddy
@tallpants
Feb 21 2017 12:57
or want to do backend code
Ghulam Shabir
@ghulamshabir
Feb 21 2017 12:57
I use notepade++ or sometimes sublime
Nazar
@IsaakNazar
Feb 21 2017 12:58
@areyoureddy atom?
Adithya Reddy
@tallpants
Feb 21 2017 12:58
I used to use Sublime for a few years
I tried Atom but it was very slow
Nazar
@IsaakNazar
Feb 21 2017 12:58
@ghulamshabir my LivePreview is not working
Adithya Reddy
@tallpants
Feb 21 2017 12:58
I switched to Visual Studio Code now :)
Nazar
@IsaakNazar
Feb 21 2017 12:59
@areyoureddy im troubling with Live Preview
Adithya Reddy
@tallpants
Feb 21 2017 12:59
Which editor are you using?
RonBeh
@RonBeh
Feb 21 2017 13:00
@danydin you mean in what file?
Adithya Reddy
@tallpants
Feb 21 2017 13:00
Are you talking about the live preview in Brackets @IsaakNazar ?
Nazar
@IsaakNazar
Feb 21 2017 13:01
@areyoureddy yes
Adithya Reddy
@tallpants
Feb 21 2017 13:01
What's the issue you're having?
Nazar
@IsaakNazar
Feb 21 2017 13:03
@areyoureddy my html code is not affecting instantly on to Chrome
Adithya Reddy
@tallpants
Feb 21 2017 13:03
Follow @ghulamshabir's link and try stuff out there first
Nazar
@IsaakNazar
Feb 21 2017 13:04
@ghulamshabir :+1:
Ghulam Shabir
@ghulamshabir
Feb 21 2017 13:05
@IsaakNazar thanks
CamperBot
@camperbot
Feb 21 2017 13:05
ghulamshabir sends brownie points to @isaaknazar :sparkles: :thumbsup: :sparkles:
:cookie: 200 | @isaaknazar |http://www.freecodecamp.com/isaaknazar
Dany Din
@danydin
Feb 21 2017 13:05
@RonBeh in the js file
the jquery href
Ghulam Shabir
@ghulamshabir
Feb 21 2017 13:06
@IsaakNazar haha i have given you your 200th brownie
Nazar
@IsaakNazar
Feb 21 2017 13:07
@ghulamshabir anniversary brownie :)
CamperBot
@camperbot
Feb 21 2017 13:08
:star2: 1873 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Ghulam Shabir
@ghulamshabir
Feb 21 2017 13:08
@IsaakNazar I have got 1873 lol
Nazar
@IsaakNazar
Feb 21 2017 13:09
@ghulamshabir wow U are the Best :)
Manny Hagman
@mannyhagman
Feb 21 2017 13:09
Just switched to sublime from atom. Speed difference is incredible
Nazar
@IsaakNazar
Feb 21 2017 13:10
@ghulamshabir is Subllime best choice for beginners?
Ghulam Shabir
@ghulamshabir
Feb 21 2017 13:10
@IsaakNazar :sunglasses:
Manny Hagman
@mannyhagman
Feb 21 2017 13:10
Atom is
It's easier to get packages
In atom
And it comes built in with nice stuff
Ghulam Shabir
@ghulamshabir
Feb 21 2017 13:12
@IsaakNazar I haved used it for javascript/React it's good in coloring syntax and black bacground not sure about live preview
Nazar
@IsaakNazar
Feb 21 2017 13:12
@mannyhagman have some tutorials how to run JS, HTML livepreview?
@ghulamshabir and U prefer notepad?
Ghulam Shabir
@ghulamshabir
Feb 21 2017 13:15
@IsaakNazar I used notepad++ for bonefires nothing else, every editor has it's pros and cons I have no much expreience on them, I have used just for syntax highlighting
vinay12121
@vinay12121
Feb 21 2017 13:18

@vinay12121
Hello guys i got stuck in the problem "Word Blanks"
my code is

function wordBlanks(myNoun, myAdjective, myVerb, myAdverb) {
var result = "";
// Your code below this line

// Your code above this line
return result;
}

// Change the words here to test your function
wordBlanks("dog"+ "big"+ "ran"+ "quickly");

johnnydemol
@johnnydemol
Feb 21 2017 13:21
Hey guys,
I'm working on the wikipedia viewer and I'm working on a button that adds ten more articles to the list of results by adding 10 to the request limit before running the search script again. The script only seems to work when written inline which is pretty annoying when trying to call it from another function. What am I doing wrong?
https://codepen.io/svenhendrikx/pen/qRgdvR
vargabalint
@vargabalint
Feb 21 2017 13:36
Hi guys,
I am working on the tribute page. My problem is that when I am opening it in a bigger screen I have this gray space after the video. Could anyone help me?
https://codepen.io/varga_b/pen/rjXYev?editors=1100
Simon Fan
@simonfan
Feb 21 2017 13:38
@johnnydemol if you open the console, you'll see that the error is getResults is not defined, and that's because the getResults variable declaration is within a function scope.
If you want to use it globally, you'll have to set the .getResults property of the window, like this: window.getResults = function () { ... }
@vargabalint Your problem seems that you are using a class named jumbotron
The jumbotron class is used for highlighting some content
blob
Just remove the class
Adithya Reddy
@tallpants
Feb 21 2017 13:44
The use of jumbotron isn't 100% correct
but that's not the issue
the problem is the site you're embedding from
They're adding the grey area instead of scaling the video thumbnail
@vargabalint try embedding a video from YouTube and see if the problem still exists
vargabalint
@vargabalint
Feb 21 2017 13:46
@simonfan @areyoureddy yes, the jumbotron should not be a problem. Thanks guys, I give it a try.
CamperBot
@camperbot
Feb 21 2017 13:46
:warning: @areyoureddy's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
:cookie: 15 | @simonfan |http://www.freecodecamp.com/simonfan
vargabalint sends brownie points to @simonfan and @areyoureddy :sparkles: :thumbsup: :sparkles:
FL8Liew
@FL8Liew
Feb 21 2017 13:58

$(document).ready(function() {

$.getJSON("https://geoip-db.com/json/", function(json){
$("#location").html(json.country_code + json.city);
});
});

$(document).ready(function() {

   $.getJSON("https://geoip-db.com/json/", function(json){
      $("#location").html(json.country_code + json.city);
   });
 });
hey guys, anyone can help me check what is the problem?
vargabalint
@vargabalint
Feb 21 2017 14:02
@areyoureddy I tried embedding the video from youtube, now I dont't have gray space. Now I have wrong ratio, despite of setting it to 16:9.
Adithya Reddy
@tallpants
Feb 21 2017 14:03
@vargabalint The embed will take up whatever space you tell it to
The ratio doesn't matter
You can set it with the height and width css properties
Felix the guy
@felixtheguy
Feb 21 2017 14:04
he is trying only use the bootstrap......
Adithya Reddy
@tallpants
Feb 21 2017 14:04
It's okay to use your own CSS on top of bootstrap :)
Felix the guy
@felixtheguy
Feb 21 2017 14:08
when i try to run the web in local with chrome, this thing come out...
Page 'http://localhost:63342/w…css/bootstrap.min.css.map' requested without authorization,
you can copy URL and open it in browser to trust it.
and some of the styling can't show in this case
anyone know how to deal with it?
vargabalint
@vargabalint
Feb 21 2017 14:11
I set the height and width but nothing changed. I think the problem is more complex. The video takes the same space, but youtube fills the gap with black space on the top and on the bottom, and the first site filled the space only with gray space on the bottom.
Colin N. Creighton
@colincreighton
Feb 21 2017 14:21
Can someone help with my javascript on the twitch project? I have two variables declared in the same place used for reference the element of an array. but only one can be read and the other responds as undefined. I've listed them as "i" and "j" but only because I'd tried using "i" for both references unsuccessfully. https://codepen.io/Cncreighton/pen/vgqxmp
tareq4
@tareq4
Feb 21 2017 14:28

can someone explain why the last button (btn 5) is not like i wrote
i want it to be like the others

http://codepen.io/tareq4/full/mRZPzd/

Simon Fan
@simonfan
Feb 21 2017 14:30
@colincreighton What do you mean by responds as undefined? Your code seems to be working here.. What is the expected behaviour?
Felix the guy
@felixtheguy
Feb 21 2017 14:31
@tareq4 you have a <div class="row"> befor btn5
Adithya Reddy
@tallpants
Feb 21 2017 14:32
@vargabalint could you link your codepen?
tareq4
@tareq4
Feb 21 2017 14:32
yeah but even if i remove it ...check what will happen @felixtheguy
vargabalint
@vargabalint
Feb 21 2017 14:34
@areyoureddy https://codepen.io/varga_b/pen/rjXYev?editors=1100 thanks for the help!
CamperBot
@camperbot
Feb 21 2017 14:34
vargabalint sends brownie points to @areyoureddy :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @areyoureddy |http://www.freecodecamp.com/areyoureddy
Adithya Reddy
@tallpants
Feb 21 2017 14:35
@vargabalint that's expected!
tareq4
@tareq4
Feb 21 2017 14:35
@felixtheguy sooo do you see the error?
Adithya Reddy
@tallpants
Feb 21 2017 14:38
@vargabalint Is this more what you were looking for?
Like I said before, it's fine to use your own CSS on top of bootstrap
Felix the guy
@felixtheguy
Feb 21 2017 14:39

not enough space...div class="top-padding">
<div class="container">

<div class="col-xs-2">
<button style="margin-left: -70px"
between container and col should have a row?
im new too......LOL
@tareq4

Adithya Reddy
@tallpants
Feb 21 2017 14:39
I like to set the width to 100% in CSS and then use the iframe's height attribute to set the height
It's the easiest way IMO
Hope that's what you wanted
Felix the guy
@felixtheguy
Feb 21 2017 14:41
I'm also having trouble with bootstrap .....LOL
Adithya Reddy
@tallpants
Feb 21 2017 14:41
What's your issue @felixtheguy ?
vargabalint
@vargabalint
Feb 21 2017 14:42
@areyoureddy better but now I have the spaces on smaller screens, i think it is because of the height="450"
Felix the guy
@felixtheguy
Feb 21 2017 14:43
the bootstrap file? I download it locally to run....some of the styling is not come out.....but put everything in codpen it works......
Adithya Reddy
@tallpants
Feb 21 2017 14:44
@vargabalint you want to avoid the black bars completely?
tareq4
@tareq4
Feb 21 2017 14:44
@felixtheguy yeah i thoght that too ,not enough space ..but why ...there is space hummm
Adithya Reddy
@tallpants
Feb 21 2017 14:44
@felixtheguy could you send me a screenshot of the folder your project is in and your HTML file?
@vargabalint what you want is actually kinda complex to do
You're trying to maintain the aspect ratio no matter the screen size
Felix the guy
@felixtheguy
Feb 21 2017 14:45
blob
Adithya Reddy
@tallpants
Feb 21 2017 14:45
If you're up for it, take a look here: https://benmarshall.me/responsive-iframes/
Felix the guy
@felixtheguy
Feb 21 2017 14:45
blob
Brian Dodwell
@dodwellwebdev
Feb 21 2017 14:45
hello!!! I am new to coding. Can someone please review my code and message me directly and maybe point out a few things I might be missing? http://codepen.io/dodwellwebdev/pres/ggVvoy
Felix the guy
@felixtheguy
Feb 21 2017 14:46
blob
Adithya Reddy
@tallpants
Feb 21 2017 14:46
@felixtheguy I have no idea what you're sending me lol
Hold up
I'll show you how it's done
Felix the guy
@felixtheguy
Feb 21 2017 14:46
blob
the file pics.... just try to say i have all the file it should need
LOL
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="plugin/jquery.min.js">
<link rel="stylesheet" href="plugin/bootstrap/js/bootstrap.min.js">
are these what we need for bootstrap?
btw, im using the bootstrap3.3.7-dist...
Adithya Reddy
@tallpants
Feb 21 2017 14:49
Ignore the rest of the files
In your HTML you need to link it as css/bootstrap.min.css
Vered Rekanati
@veredrec
Feb 21 2017 14:50
@dodwellwebdev Nice work! When you wrote "message me directly" did you mean with a private message?
Adithya Reddy
@tallpants
Feb 21 2017 14:51
Honestly though it would be much easier for you to just use a CDN
Felix the guy
@felixtheguy
Feb 21 2017 14:52
some place the cdn just not working so well......LOL
blob
<link rel="stylesheet" href="plugin/bootstrap/css/bootstrap.min.css"/>
<link rel="stylesheet" href="plugin/jquery.min.js">
<link rel="stylesheet" href="plugin/bootstrap/js/bootstrap.min.js">
this is how i link...
Cory Bowles
@cbconsulting
Feb 21 2017 14:53
Just looking for help for webpage portfolio HTML and CSS layout.
Later on Ohio after 7 pm
Felix the guy
@felixtheguy
Feb 21 2017 14:54
I was in Toledo few years ago~
@areyoureddy are these files looks ok to you?
Colin N. Creighton
@colincreighton
Feb 21 2017 14:56
@simonfan sorry i had commented out the j++. j is instantiated as 0 and for some reason works fine if unmodified, but as soon as I try to increment it the console response is undefined. it doesn't even output the zero response.
Dany Din
@danydin
Feb 21 2017 14:56
anyone has a general concept of how i can use search-filter to search in my region (north-centeral-south) when the users submitted their own city in the form?
Adithya Reddy
@tallpants
Feb 21 2017 14:56
@felixtheguy bootstrap.min.css doesn't exist :P
You've got bootstrap.css and bootstrap.js
but you're href is to bootstrap.min.css and bootstrap.min.js
No wonder it isn't working :sparkles:
Felix the guy
@felixtheguy
Feb 21 2017 14:58
in fact....i have that....
Fabio Di Pane
@saylos
Feb 21 2017 14:58
Hello guys, could you please check why I can't retrieve the Offline Items infos using the second $.getJSON ? thanks
https://codepen.io/saylos/pen/EZJwap?editors=0010
Adithya Reddy
@tallpants
Feb 21 2017 14:59
Oh wait is that WebStorm?
Felix the guy
@felixtheguy
Feb 21 2017 14:59
is not all the styling not come out ....so far only one is not working well
Adithya Reddy
@tallpants
Feb 21 2017 14:59
i forgot that hides the minified files underneath the main one
Could you show me where your HTML files are as well? It should be pretty simple to get it working
at the root
let's see this, when you try the mobile, the nav-bar turn to 3bar,is working well on codpen,but run locally when i click the 3bar nothing come out
everything else works well ,the scoll,all the styling are only bootstrap, dose not have any of my own styling here
try to fix it for hours already.....
Felix the guy
@felixtheguy
Feb 21 2017 15:08
does anyone have any idea where the problem is ?
Fabio
@Gentarozzo
Feb 21 2017 15:10
Hi mates I'm having a problem with my Twitch App... on smatphone when I click on an event... it goes top of page (but the event is working) ... just on smartphone, is this CodePen?
Felix the guy
@felixtheguy
Feb 21 2017 15:16
@areyoureddy still here?
WiseKodama
@WiseKodama
Feb 21 2017 15:30
@Gentarozzo event.preventDefault();
Incase it refreshes the page :)
What do we need to do in the Twitch API challenge?
Just check if that array of channels is online?
Jean Marco Romero
@volkranium
Feb 21 2017 15:35
someone knows why <!DOCTYPE html> messes up my layout?
messes up my heights
tptynlr
@tptynlr
Feb 21 2017 15:43
<html>
<head>

<style type="text/css">
#first{
border:1px solid black;
height:200px;
width:150px;
background-color:green;
}

#second{
border:1px solid black;
height:200px;
width:150px;
background-color:red;
}

img{ display:block; }
#first{ margin-left:150px; }
//#first{ position:relative;left:150px; }
</style>

</head>
<body>
<div id = "testbox">
<div id = "first"></div>
<div id = "second"></div>

</div>
</body>
</html>
what is the difference between margin-left :150px; and left:150px;
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:49
does anyone have problem with the api call for twitch tv challange?
WiseKodama
@WiseKodama
Feb 21 2017 15:49
No, let me give you the link
If you read the instructions theres a link
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:50
WiseKodama
@WiseKodama
Feb 21 2017 15:50
Yeah Lidia
That's the one
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:51
my pen goes down every time i try to loop through it
WiseKodama
@WiseKodama
Feb 21 2017 15:51
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams/freecodecamp?callback=?', function(data) {
console.log(data);
});
There must be a flaw in your loop
you may have an infinite loop
link to the pen please.
WiseKodama
@WiseKodama
Feb 21 2017 15:53
are you even looping?
all I can see is for(var j)
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:55
yeah because it keeps breaking every time i finish the loop
WiseKodama
@WiseKodama
Feb 21 2017 15:55
let me have a look
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:56
i've commented out the api call now
WiseKodama
@WiseKodama
Feb 21 2017 15:56
its an easy fix, give me a sec
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:57
whats wrong?
Manuel Reyes
@Androbat
Feb 21 2017 15:57
What´s up guys!
I need some help.
WiseKodama
@WiseKodama
Feb 21 2017 15:58
well for one what you were doing was
passing an array into the json
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 15:58
lol
WiseKodama
@WiseKodama
Feb 21 2017 15:58
since you have a for loop
basically you inserted the whole array times the length of the array
Darth Skywalker
@adityaparab
Feb 21 2017 16:00
@lidiawisniewska You're gonna have to use Promise api to make sure your api resolution happens correctly.
Jasmin Parent
@charlesdarkwind
Feb 21 2017 16:01
Sup guys, any idea why my jquery.hover wont work on my .result divs?
http://codepen.io/charlesdarkwind/pen/LxoMOz?editors=0110
Lidia Wisniewska
@lidiawisniewska
Feb 21 2017 16:01
@WiseKodama thanks i see this now
CamperBot
@camperbot
Feb 21 2017 16:01
lidiawisniewska sends brownie points to @wisekodama :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @wisekodama |http://www.freecodecamp.com/wisekodama
WiseKodama
@WiseKodama
Feb 21 2017 16:02
And you can declare your array outside the document.ready for future reference
Fabio Di Pane
@saylos
Feb 21 2017 16:02
Hello guys, could you please check why I can't retrieve the Offline Items infos using the second $.getJSON ? thanks
https://codepen.io/saylos/pen/EZJwap?editors=0010
Jasmin Parent
@charlesdarkwind
Feb 21 2017 16:03
ah I forgot to check my console it says Uncaught TypeError: this.toggleClass is not a function
WiseKodama
@WiseKodama
Feb 21 2017 16:05
@saylos try json.stream === null
Some say === is better than --
==*
@saylos from what I see you arent able to pull the data you want from offline channels
twitch says:

if offline

{
"stream": null,
"_links": {
"self": "https://api.twitch.tv/kraken/streams/test_channel",
"channel": "https://api.twitch.tv/kraken/channels/test_channel"
}
}

Osania
@san00
Feb 21 2017 16:08
Hiya @charlesdarkwind,
you have a comma, rather than full stop after your a tag in css.
change it to this
a. a:link, a:visited, a:hover, a:active
Darth Skywalker
@adityaparab
Feb 21 2017 16:09

@lidiawisniewska I forked your pen and made a few adjustments. I removed the logic where you build the table for you know how to do it.

Take a look and pay close attention to how Promise.all is used.

you will get all your required data as an array called allResponses
now you can use allResponses array and use your table building logic on that
WiseKodama
@WiseKodama
Feb 21 2017 16:09
Is it needed to even make an array?
I am just adding html and making a collapsible list sortable by ids
Fabio Di Pane
@saylos
Feb 21 2017 16:13
@WiseKodama I tryed both === and ==..but nothing..still don't understand why it doesn't work
WiseKodama
@WiseKodama
Feb 21 2017 16:15
Check my other response @saylos
because twitch gives less info if the channel is offline

if offline

{
"stream": null,
"_links": {
"self": "https://api.twitch.tv/kraken/streams/test_channel",
"channel": "https://api.twitch.tv/kraken/channels/test_channel"
}
}

Fabio Di Pane
@saylos
Feb 21 2017 16:18
@WiseKodama yep but for that reason I wrote thet if it's null it has to thake data from the other api ...the channel one
*tale
*take
Jasmin Parent
@charlesdarkwind
Feb 21 2017 16:19
Any idea why my .hover wont work here?
$('.results').hover(function() {
    (this).addClass('highlight');
  });
.highlight {
  border-left: 7px solid #A55D00;
}
Darth Skywalker
@adityaparab
Feb 21 2017 16:20
@charlesdarkwind $(this) not (this)
Jasmin Parent
@charlesdarkwind
Feb 21 2017 16:20
damn, still not work :D
Dany Din
@danydin
Feb 21 2017 16:21
this in jqury is same as this in native js?
Nazar
@IsaakNazar
Feb 21 2017 16:23
Whats up guys. I have a html question?
Darth Skywalker
@adityaparab
Feb 21 2017 16:23
@danydin yes
@charlesdarkwind You need to this code after your for loop in wikiAjax function's success callback
you're binding that event in .ready
so when ready is run, you don't have any .results elements.
if you don't wanna do that, you're probably better off doing this in css like
.results:hover{
  border-left: 7px solid #A55D00;
}
WiseKodama
@WiseKodama
Feb 21 2017 16:26
@saylos No idea, sorry
Dany Din
@danydin
Feb 21 2017 16:26
@adityaparab thanks, btw append & prepend adds the code inside its element or before / after the element?
CamperBot
@camperbot
Feb 21 2017 16:26
danydin sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 955 | @adityaparab |http://www.freecodecamp.com/adityaparab
Dany Din
@danydin
Feb 21 2017 16:26
nice idea @adityaparab ;)
WiseKodama
@WiseKodama
Feb 21 2017 16:27
@adityaparab the Twitch API, you told lidia to store all the responses into an array, why is that necessary? Can you not add them to the html straight from the loop?
Darth Skywalker
@adityaparab
Feb 21 2017 16:27
@charlesdarkwind
function wikiAjax(wikiUrl) {
  $.ajax({
    url: wikiUrl,
    dataType: 'json',
    success: function(data) {
        for (var i = 0; i < data[1].length; i++) {
          $("#main").append("<div id ='highlight'></div> <a target='_blank' href=" + data[3][i] + "><div id='result'" + [i] + " class='results container-fluid'><h5>" + data[1][i] + "</h5>" + data[2][i] + "</div></a>")
        };
        $('.results').hover(function() {
          $(this).addClass('highlight');
        });
      } // success func
  }); // ajax
}

$(document).ready(function() {

});

@danydin

@adityaparab thanks, btw append & prepend adds the code inside its element or before / after the element?

append adds the element as a last child

CamperBot
@camperbot
Feb 21 2017 16:27
adityaparab sends brownie points to @danydin :sparkles: :thumbsup: :sparkles:
:cookie: 336 | @danydin |http://www.freecodecamp.com/danydin
Darth Skywalker
@adityaparab
Feb 21 2017 16:28
in the parent element.
prepend adds as first
Jasmin Parent
@charlesdarkwind
Feb 21 2017 16:28
@adityaparab Thanks man!! althought im not sure I understand why it wont work in doc ready
CamperBot
@camperbot
Feb 21 2017 16:28
charlesdarkwind sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 956 | @adityaparab |http://www.freecodecamp.com/adityaparab
Darth Skywalker
@adityaparab
Feb 21 2017 16:29

@WiseKodama

@adityaparab the Twitch API, you told lidia to store all the responses into an array, why is that necessary? Can you not add them to the html straight from the loop?

you can.. however, if you do that, then your response resolution may interfere with rendering and you might get inconsistent output

Dany Din
@danydin
Feb 21 2017 16:29
who's the parent element , for example in @charlesdarkwind #main append
Darth Skywalker
@adityaparab
Feb 21 2017 16:29
so It's always better to have the responses completely resolved and then do your dom rendering.
WiseKodama
@WiseKodama
Feb 21 2017 16:29
You can use create()?
To redraw everything?
Darth Skywalker
@adityaparab
Feb 21 2017 16:30
@danydin : In @charlesdarkwind 's example $('#main') is parent element
Dany Din
@danydin
Feb 21 2017 16:31
ok got it thanks great explanation and its not easy :+1:
Darth Skywalker
@adityaparab
Feb 21 2017 16:32
@danydin :+1:
Fabio Di Pane
@saylos
Feb 21 2017 16:34
@WiseKodama thanks anyway
CamperBot
@camperbot
Feb 21 2017 16:34
saylos sends brownie points to @wisekodama :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @wisekodama |http://www.freecodecamp.com/wisekodama
Daniel Aguila
@MxLooney
Feb 21 2017 16:49
hey guys can someone tell me if you are able to see my images?
I am looking at my tribute page on school at the images does not show so I am wondering if is just the school's computer.
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 16:51
@MxLooney I can see fine
Daniel Aguila
@MxLooney
Feb 21 2017 16:52
@shawon1165 thank you
CamperBot
@camperbot
Feb 21 2017 16:52
mxlooney sends brownie points to @shawon1165 :sparkles: :thumbsup: :sparkles:
:cookie: 211 | @shawon1165 |http://www.freecodecamp.com/shawon1165
Tyler Moeller
@TylerMoeller
Feb 21 2017 16:52
@ZackRich12 Take a look at the bootstrap docs and try out the sample code in a separate pen to get familiar with the grid system. Once you figure out what all the xs, sm, md, lg with numbers 1-12 do, it will be a lot easier to make your list. http://getbootstrap.com/css/#grid. Here's a pen with some examples that may help as you learn more: http://codepen.io/TylerMoeller/pen/qNrbok
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 16:55
Can I get some feedback on this? http://codepen.io/shawon1165/full/BpXKEo/
Manuel Reyes
@Androbat
Feb 21 2017 16:58
Can someone help me?
Sorin Ruse
@sorinr
Feb 21 2017 17:00
@shawon1165 its ok
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 17:01
@sorinr thanks
CamperBot
@camperbot
Feb 21 2017 17:01
shawon1165 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1177 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 21 2017 17:01
@shawon1165 welcome
@shawon1165 maybe i will just try to align the online/offline text to the right near the bullets
Gulsvi
@gulsvi
Feb 21 2017 17:05
@shawon1165 Nice work so far. You also need to show closed/non-existent accounts - that doesn't seem to be working yet.
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 17:06
@SkyCoder01 oh, i didn't notice that, will take a look. thanks.
CamperBot
@camperbot
Feb 21 2017 17:06
shawon1165 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 21 2017 17:09
@shawon1165 No problem - what's that called inside your for loop where you put the function in parentheses and put an (i) at the end? Haven't seen that before.
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 17:11
@SkyCoder01 me neither. i was facing a problem, and found that. gave link to the source in the comment
Gulsvi
@gulsvi
Feb 21 2017 17:12
@shawon1165 Yeah, I read the link, but it doesn't say.
I used a .forEach() instead of a for() loop. I suppose .filter() would work too. Not sure what's the best practice for this scenario
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 17:13
@SkyCoder01 can I see yours?
Gulsvi
@gulsvi
Feb 21 2017 17:14
Sure, I still need to make it look nicer on mobile, so haven't submitted yet: http://codepen.io/skycoder/pen/XpyrYN
Shawon Ibn Kamal
@shawonibnkamal
Feb 21 2017 17:16
@SkyCoder01 awesome ^_^
Gulsvi
@gulsvi
Feb 21 2017 17:16
Thanks @shawon1165
CamperBot
@camperbot
Feb 21 2017 17:16
skycoder01 sends brownie points to @shawon1165 :sparkles: :thumbsup: :sparkles:
:cookie: 212 | @shawon1165 |http://www.freecodecamp.com/shawon1165
Sorin Ruse
@sorinr
Feb 21 2017 17:18
@shawon1165 @SkyCoder01 its just a callback function. usually the for loop will run and don't wait for ajax calls responses
Gulsvi
@gulsvi
Feb 21 2017 17:21
@shawon1165 @sorinr Seems it's an Immediately Invoked Function Expression: http://stackoverflow.com/questions/8228281/what-is-the-function-construct-in-javascript
Still not sure if that's better to use compared to .forEach() or .filter() though
Sorin Ruse
@sorinr
Feb 21 2017 17:25
@SkyCoder01 in this case function(i){}(i) acts like a callback. an each or forEach its more secure as you know exactly how will behave in any situation
Gulsvi
@gulsvi
Feb 21 2017 17:31
@sorinr Okay, thanks. I've seen the error "don't create functions inside of for loops" and the IIFE seems like a way around that. Need to read about closures now too I guess.
CamperBot
@camperbot
Feb 21 2017 17:31
skycoder01 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1178 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 21 2017 17:33
@SkyCoder01 yes thats why i said it "acts" like a callback. its a way around to solve one problem but not sure if will work the same in any situation
Chris Rutherford
@cjrutherford
Feb 21 2017 17:37
hey all, just had some trouble with my project I'm working on outside FCC. The code when entered into code pen works, but the code if run outside does not.....
Darkø Tasevski
@Puritanic
Feb 21 2017 17:39
Need help with css :( http://codepen.io/Puritanic/pen/ygZBqW/ cant make project images to work normal, and cant figure out how to center image in columns...
Everything works okay when window is large, but whenever i try to resize browser hell breaks lose
Manuel Reyes
@Androbat
Feb 21 2017 17:40
@Manish-Giri Man give me a hand with this.
Chris Rutherford
@cjrutherford
Feb 21 2017 17:40
@Puritanic what's the trouble?
Darkø Tasevski
@Puritanic
Feb 21 2017 17:42
@cjrutherford content from Projects div is clipping out of page whenever i try to resize browser , cant make it to resize with browser
Chris Rutherford
@cjrutherford
Feb 21 2017 17:43
@Puritanic okay, so you want them to always be the same size, just group differently for different page widths?
Manuel Reyes
@Androbat
Feb 21 2017 17:43
@Manish-Giri I don´t know why my css transition it doesn´t work. And I want to remove the nav´s list underline.
Darkø Tasevski
@Puritanic
Feb 21 2017 17:44
Something like that if possible, but if they could stay in their window, and not to go to contact window when i resize browser.
Manuel Reyes
@Androbat
Feb 21 2017 17:45
Help.
Chris Rutherford
@cjrutherford
Feb 21 2017 17:45
@Puritanic yeah, the scrolling is a bit odd, it's like they're wrapping up when the window resizes. Have you thought about putting this into a bootstrap grid?
wait, it's in one already
Sorin Ruse
@sorinr
Feb 21 2017 17:46
@cjrutherford first i would add img-responsive class to all imgs in the portfolio section like" class="img-responsive project"
Darkø Tasevski
@Puritanic
Feb 21 2017 17:47
@sorinr How can i do that?
Sorin Ruse
@sorinr
Feb 21 2017 17:49
@Puritanic do what?
Chris Rutherford
@cjrutherford
Feb 21 2017 17:50
@Puritanic might I suggest this bootstrap component to replace your project listing? http://getbootstrap.com/components/#thumbnails
Darkø Tasevski
@Puritanic
Feb 21 2017 17:50
@sorinr To make all images responsive
Chris Rutherford
@cjrutherford
Feb 21 2017 17:50
@sorinr you meant to respond to @Puritanic
Sorin Ruse
@sorinr
Feb 21 2017 17:51
@cjrutherford yep. sorry :)
@Puritanic :point_up: February 21, 2017 7:46 PM see this response
Darkø Tasevski
@Puritanic
Feb 21 2017 17:52
@cjrutherford I ll take a look at this, thanks.
CamperBot
@camperbot
Feb 21 2017 17:52
puritanic sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Chris Rutherford
@cjrutherford
Feb 21 2017 17:54
all good, and I like the initiative you gave to try and build it on your own! Although I feel it's good to know you don't know how to build a specific component, and build atop already build ones
:shipit:
@Puritanic I also think the VH units in your CSS is causing havoc with your vertical sections. Try using the variable width and min-height instead
Chris
@ChrisWHurd
Feb 21 2017 17:55
Hi can anyone help me with getting the bullets of my <ul> centered with the rest of the <li> text????
Darkø Tasevski
@Puritanic
Feb 21 2017 17:56
@cjrutherford I made a mess with code here :D yesterday i spen half fckin day lookin why code isnt working, a it was all because one bracket more in css notepad
Chris Rutherford
@cjrutherford
Feb 21 2017 17:57
@Puritanic lol I know that feel very well, and I love your hero image in the header
Sorin Ruse
@sorinr
Feb 21 2017 17:57
@ChrisWHurd u can use list-style-position: inside; on the ul that will make all text as a block
Chris
@ChrisWHurd
Feb 21 2017 17:58
ok let me see
is this correct? <ul style=list-style-position: inside;>
Darkø Tasevski
@Puritanic
Feb 21 2017 18:01
@cjrutherford Its just a placeholder, i will add my pic later. So i should exchange my vh with max width and height? If so can u give me an example what height and widht should i use for page background?
Sorin Ruse
@sorinr
Feb 21 2017 18:02
@Puritanic in css if you have some syntax errors the browser parser will just not take them into consideration without any warning. in this case i just try to rewrite my css rules from scratch without any copy paste from the previous attempt
Chris Rutherford
@cjrutherford
Feb 21 2017 18:03
@Puritanic I want to say for your section heights, you want to specify a min-height for the divs so they can expand as needed, but always be a minimum height.... going from there, the grid should take care of the rest.
your divs are resizing based on page scroll
sorry resizing their heights down based on the width of the page when they should get longer and their contents should be wrapping when there's not enough horizontal space
Darkø Tasevski
@Puritanic
Feb 21 2017 18:07
@cjrutherford @sorinr Thanks a lot, i will try to figure it out tonight somehow.
CamperBot
@camperbot
Feb 21 2017 18:07
puritanic sends brownie points to @cjrutherford and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: puritanic already gave cjrutherford points
:star2: 1179 | @sorinr |http://www.freecodecamp.com/sorinr
Ayobami
@purpose50
Feb 21 2017 18:21
and here it is, my JS calculator:
http://codepen.io/purpose/full/ggNVZd/
Sorin Ruse
@sorinr
Feb 21 2017 18:31
@purpose50 try to add 4.02+3.03 and see the result. i would make it fixed(2)
@purpose50 after i make a calculation (i press the "=" btn) i would preserve the result to use it in the next one like 4.02+3.03 = + 1 should give me 8.05 not error
Chris
@ChrisWHurd
Feb 21 2017 18:42
Hi, can someone help me? what does this line of code do?
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
Chris Jantzen
@XXiphias
Feb 21 2017 18:44
it sets your div to 12 columns horiztonally on a mobile screen (xs), 10 columns on small screens and 1 column offset from the left (aka 1 empty column then 10 full columns), 8 columns on medium and large screens with a 2 column offset from the left.
Sorin Ruse
@sorinr
Feb 21 2017 18:44
@ChrisWHurd it will center everything on screen on any device width :)
Ken Haduch
@khaduch
Feb 21 2017 18:44
@ChrisWHurd - it looks like Bootstrap classes that will set the number of columns for different screen widths - for an "xs" (extra small) screen, that div will occupy all 12 columns. For a "sm" (small) size, 10 columns, with an offset of 1 - so there will be a blank column and then the content, etc.
Chris
@ChrisWHurd
Feb 21 2017 18:45
Thats what i thought but it doesnt seem to be working...
Chris Jantzen
@XXiphias
Feb 21 2017 18:45
is it in a div class="row"? and is all of that in a div class="container" or fluid-container?
Ken Haduch
@khaduch
Feb 21 2017 18:45
@ChrisWHurd - you have to make sure that Bootstrap is loaded, you have to have a container div, and then row divs, then this column-based div nested in that row.
Chris
@ChrisWHurd
Feb 21 2017 18:46
Ok let me check that out, thanks for the help
tareq4
@tareq4
Feb 21 2017 18:46
guys ...
does any one know how to add a img src= "" but then from your pc... if you say >the name of img+.jpg ..then no that doesn't work ??..please help if you know
Ken Haduch
@khaduch
Feb 21 2017 18:46
do you have a URL for a project? Also, make sure that you are using Bootstrap V3, because a lot of things have changed in v4, not sure if the grid is still the same, but worthwhile to check. @ChrisWHurd
Chris Graziano
@cmgraz
Feb 21 2017 18:47
Hey all! I have a very rudimentary question here about using jQuery. It seems that all of jQuery code I write is essentially adding classes to different elements. My question is, what's the reason for doing this using a jQuery statement rather than making a modification to the CSS files? I suppose I have only used the most basic of jQuery functions, but so far, it seems like I'm simply doing something in a round about type of way...
Alo
@aloRanking
Feb 21 2017 18:47
here is my Weather Forecast..pls check it and give me feedback
http://codepen.io/aloRanking/full/pRMKKE
Sorin Ruse
@sorinr
Feb 21 2017 18:47
@ChrisWHurd its better to use @username when givving a response so we know to what you reffer
Chris Jantzen
@XXiphias
Feb 21 2017 18:47
@tareq4 if you're using something like codepen you cant. you'd have to upload the image to somewhere like imgur then use it in your code. If you're working on your pc directly in notepad, then just do a full hardlink to it (aka C:/Users/Documents..)
Ken Haduch
@khaduch
Feb 21 2017 18:48
@cmgraz - using jquery to add classes is useful when you have some dynamic content that you are outputting "on the fly". If you have static content and do not want to change classes or styling on the page, then putting the CSS in a static file is a good way to go.
Chris Jantzen
@XXiphias
Feb 21 2017 18:48
@cmgraz That way you can turn on and off classes without a page reload. SO for example, if you want text to turn red after clicking on a button, you can apply that class to make it red when you click on that button
you cant dynamically do that just with css
tareq4
@tareq4
Feb 21 2017 18:49
@XXiphias yes i am trying to do that but it shows nothing ...or yes it does ...it shows little img with (x) inside it
empty img
Chris Jantzen
@XXiphias
Feb 21 2017 18:50
then your link is incorrect. Are you working on a local file? or are you working in codepen or something else online?
tareq4
@tareq4
Feb 21 2017 18:50
no on local file
Chris Jantzen
@XXiphias
Feb 21 2017 18:51
try copying the image string you have into your file browser and see if it opens the image
if not its the wrong string to use
tareq4
@tareq4
Feb 21 2017 18:51
ok i will try
Chris Jantzen
@XXiphias
Feb 21 2017 18:52
if you're using windows, you can go to the image, right click on it and hit properties, click on the security tag, then copy the object name at the top. It should be the proper string
just put that into the src="" in your img tag
Ayobami
@purpose50
Feb 21 2017 18:52
@sorinr thanks, but now fixed? http://codepen.io/purpose/full/ggNVZd/
CamperBot
@camperbot
Feb 21 2017 18:52
purpose50 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1180 | @sorinr |http://www.freecodecamp.com/sorinr
Chris Rutherford
@cjrutherford
Feb 21 2017 18:53
anyone mind looking at my Git Repo? having trouble understanding why my CSS isn't taking effect....
Ken Haduch
@khaduch
Feb 21 2017 18:53
@aloRanking - the weather app looks good - one thing that is a little odd is that the font is different for the degrees "F" and "C", but just for the F and the C.
Chris Graziano
@cmgraz
Feb 21 2017 18:54
@XXiphias Ah, I see. I thought you could do something like that with a click using ":Active" in CSS, but I guess that's not the same as using a function in jQuery
tareq4
@tareq4
Feb 21 2017 18:54
@XXiphias ooow it works with the full string.. thx man
CamperBot
@camperbot
Feb 21 2017 18:54
tareq4 sends brownie points to @xxiphias :sparkles: :thumbsup: :sparkles:
:cookie: 290 | @xxiphias |http://www.freecodecamp.com/xxiphias
Chris Graziano
@cmgraz
Feb 21 2017 18:54
@XXiphias Your options appear to be much more limited if confined to just CSS
Alo
@aloRanking
Feb 21 2017 18:55
@khaduch thanks..will see to that.
CamperBot
@camperbot
Feb 21 2017 18:55
aloranking sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2510 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 21 2017 18:56
@cjrutherford - what is your top-level page in that project / repo? I mean the page where you are expecting to load CSS, and which CSS are you referring to that isn't taking effect?
Chris Jantzen
@XXiphias
Feb 21 2017 18:57
@tareq4 Glad you got it :) You should be able to do active in css, its just a different word. Use :hover or :focus (when clicked) to change it on active in css rather than jquery
Chris Rutherford
@cjrutherford
Feb 21 2017 18:57
@khaduch okay, so in the Dist folder is the index.html, and the css is in css/main.css. I've set it up this way because I'm actually writing pug/sass and the dist folder is where it goes when done.
of course, it's under the dist folder for CSS as well
Darkø Tasevski
@Puritanic
Feb 21 2017 19:01
@cjrutherford Your height advice worked mate :) At least it looks better now, i just need to figure out how to center and arrange project tiles.
Chris Rutherford
@cjrutherford
Feb 21 2017 19:01
@Puritanic Nice! Have Fun!
Ken Haduch
@khaduch
Feb 21 2017 19:02
@cjrutherford - do you have this project set up somewhere that is accessible through a browser? Or are you running locally?
Chris Rutherford
@cjrutherford
Feb 21 2017 19:03
Running locally with gulp, but you should be able to clone and run npm install and then once that's done, gulp to run it. It will automatically compile and refresh on save
did a pen, and the issues I had locally weren't there.... a little miffed.
Ken Haduch
@khaduch
Feb 21 2017 19:03
@cjrutherford - that sounds like a lot of work... ;)
Chris Rutherford
@cjrutherford
Feb 21 2017 19:04
yeah, this project is only going to get bigger, so I need it to run locally. this will totally be out of scope for code pen. We're going to need a back end too
@khaduch this is the pen:
not updated to the latest for the project.
roeP
@roeP
Feb 21 2017 19:05
hello, i nedd help in my project. my anchor link doesent work
please enter this
<a herf="https://en.wikipedia.org/wiki/Fiat_Uno" target="_blank">link</a>.
Chris Rutherford
@cjrutherford
Feb 21 2017 19:05
@roeP change herf to href
roeP
@roeP
Feb 21 2017 19:05
now i see
:)
Chris Rutherford
@cjrutherford
Feb 21 2017 19:06
GL @roeP
Ayobami
@purpose50
Feb 21 2017 19:06
@sorinr problems fixed ? http://codepen.io/purpose/full/ggNVZd/
Chris Rutherford
@cjrutherford
Feb 21 2017 19:07
@purpose50 like your style in the pen
Ayobami
@purpose50
Feb 21 2017 19:07
@cjrutherford thanks :smile:
CamperBot
@camperbot
Feb 21 2017 19:07
purpose50 sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 318 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Sorin Ruse
@sorinr
Feb 21 2017 19:10
@purpose50 it seems no. it still returns 7.49999998999 for just 4.03+3.02
Jason
@ICodeWateverIFeelLikeCoding
Feb 21 2017 19:11
My :hover transitions aren't tweening my button color over my specified time interval, why is this? https://codepen.io/JaosnCodes/pen/VPJorz
Ken Haduch
@khaduch
Feb 21 2017 19:12
@cjrutherford - the pen shows that the selector (at least in what's there, and I'm assuming that you're trying to figure out the .col-md-4#signHeader selector? The selector that the firefox devtools are displaying is #signHeader.col-md-4 - which might make sense, since the ID is supposed to be unique, you would want to probably parse that first? I'm sure that there is a rule for a selector construction (that I don't know about)
Chris Rutherford
@cjrutherford
Feb 21 2017 19:13
for me it's done with Sass indentation and heirarchical stuff, let me change it up in the sass to be right.
Ken Haduch
@khaduch
Feb 21 2017 19:14
although maybe it works, anyway? It seems to apply the same style. I haven't seen the button in the page, yet?
no, that seems to be working - those style elements are being applied. Am I looking at the wrong thing? @cjrutherford ?
Chris Rutherford
@cjrutherford
Feb 21 2017 19:16
@khaduch it has to be the build setup, or something wrong with browser sync
Chris
@ChrisWHurd
Feb 21 2017 19:18
@khaduch I can not figure out why the text below the picture is not centering. I have tried to check if I am missing a div or not and I think I am correct here... can you help me out?
Gulsvi
@gulsvi
Feb 21 2017 19:18
Is maintaining a global counter a common practice for determining when everything in your code has been processed? With my Twitch App, I don't want to display a user's info until their image is loaded - it looks weird seeing their images load after the rest of the data, so I'm doing something like this:
var users = ['a','b','c'];
var counter = 0;

function processUser() {
  var img = new Image();

  $(img).on('load', function() {
    // do something when the image is loaded
    displayEntirePage();
  });
}

function displayEntirePage() {
  counter++;

  if (counter === users.length) {
    // display the entire page
  }
}
Everywhere I read "global" variables are bad...but I don't know how else to track when all images are loaded because they're all added on the fly and don't exist in the html until they're loaded
Jason
@ICodeWateverIFeelLikeCoding
Feb 21 2017 19:19
My :hover transitions aren't tweening my button color over my specified time interval, why is this? https://codepen.io/JaosnCodes/pen/VPJorz
Gulsvi
@gulsvi
Feb 21 2017 19:22
@ICodeWateverIFeelLikeCoding transition: background-color .5s linear;
Ken Haduch
@khaduch
Feb 21 2017 19:23
@cjrutherford - I have cloned this in my github desktop (which I haven't done anything with in a while, so I might not be 100% correct in what I'm doing.) I cannot see where it is actually loading that CSS file "main.css" ?
Chris Rutherford
@cjrutherford
Feb 21 2017 19:24
it should be in the head of the index.html file. should be the last of the link tags. could be load order though.
Gulsvi
@gulsvi
Feb 21 2017 19:24
@ChrisWHurd If you can figure out the grid system with code as complicated as this:
<div class="col-xs-12 col-sm-10 col-sm-offset-1 col-md-8 col-md-offset-2">
I'm not sure how you're having problems with centering text :p
Either way, you're using the wrong version of bootstrap - it may help to update that in your codepen CSS settings to use v3.3.7 instead of 4.0alpha. https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Chris
@ChrisWHurd
Feb 21 2017 19:26
@SkyCoder01 I am using the template on this task to try and identify what each line of code does, i learn better this way.
Chris Rutherford
@cjrutherford
Feb 21 2017 19:26
@khaduch this is one of those #SMH moments. I added the rel='stylesheet' to the tag and it started working..... :shaved_ice:
Gulsvi
@gulsvi
Feb 21 2017 19:26
@ChrisWHurd Change your bootstrap version and it will work like the example
Ken Haduch
@khaduch
Feb 21 2017 19:27
@cjrutherford - I was just looking at that and trying to figure out how to edit that file, but as I said, I'm a little bit github-impaired right now...
Chris Rutherford
@cjrutherford
Feb 21 2017 19:27
@khaduch ah, github isn't all that bad, it's the node/gulp/sass/browsersync setup that probably has you confused.
it's a good system if you know how to work it. got it from DevTips on youtube
Chris
@ChrisWHurd
Feb 21 2017 19:28
@SkyCoder01 thanks for the heads up, going to try to figure out how to do this with the current verison
CamperBot
@camperbot
Feb 21 2017 19:28
chriswhurd sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ken Haduch
@khaduch
Feb 21 2017 19:28
@cjrutherford - yeah, I used to have a better handle on it, but I haven't really taken the time to refresh... I was able to add rel="stylesheet" directly in the devtools in Microsoft Edge, and it then loaded the file and styled the elements... so it's working, I guess?
@ChrisWHurd - did you get the help that you needed? It looks like you might have - I was tied up on another issue...
Chris
@ChrisWHurd
Feb 21 2017 19:30
@khaduch yes I did, thanks!
CamperBot
@camperbot
Feb 21 2017 19:30
chriswhurd sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2511 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 21 2017 19:31
@ChrisWHurd - okay, great!
Chris Rutherford
@cjrutherford
Feb 21 2017 19:33
@khaduch yep! got it working, and about to commit the fix in git
Sorin Ruse
@sorinr
Feb 21 2017 19:34
@ICodeWateverIFeelLikeCoding think u should define transition all on the parent o your buttons
Ken Haduch
@khaduch
Feb 21 2017 19:34
@cjrutherford - okay - thanks for giving me that push to get my github knowledge back to a level above ground zero... :)
CamperBot
@camperbot
Feb 21 2017 19:34
khaduch sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 319 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Chris Rutherford
@cjrutherford
Feb 21 2017 19:35
@khaduch if you want to contribute, my partner and I are already working on this, but we're in the planning and general design stages of building a Volunteer Management solution for a non-profit
you're welcome to!
Tyler Moeller
@TylerMoeller
Feb 21 2017 19:38
@SkyCoder01 You could perhaps check to see if all the img src attributes have been populated before displaying the page if you don't want to use a counter. I think callback counting is a fairly standard practice though.
hklass18
@hklass
Feb 21 2017 20:06

<p>Here's a <a href="http//freecatphotoapp.com">
link to Cat Photos</a> for you to follow.</p>

<a href="http://freecatphotoapp.com"> cat photos</a>

Hello, I am stuck on this a link . Would appreciate the help.
Bigyan Karki
@bigyankarki
Feb 21 2017 20:18
can anyone help me understand how function inside a function works?
Moisés Man
@moigithub
Feb 21 2017 20:19
@bigyankarki isnt the same thing ??
function do something.. and return something
only diff being inside.. is scope
Bigyan Karki
@bigyankarki
Feb 21 2017 20:19
return newArr.filter(function(a){
    if(arr1.indexOf(a) === -1 || arr2.indexOf(a) === -1){
      return a;
    }
  });
}
 function diff(arr1, arr2) { 
    var newArr = arr1.concat(arr2); 

    function search(num) { 
      if (arr1.indexOf(num) === -1 || arr2.indexOf(num) === -1) { 
        return num; 
        } 
    } 
  return newArr.filter(search); 
}
Brandon
@ishartalot
Feb 21 2017 20:20
Can anyone help me with the "Build a Tribute Page?"
Adam
@GoingAllTheWayUp
Feb 21 2017 20:20
@bigyankarki what is num?
Bigyan Karki
@bigyankarki
Feb 21 2017 20:20
how does search(num) gets its argument?
Jason
@ICodeWateverIFeelLikeCoding
Feb 21 2017 20:20
Anybody have some tips for me before i begin figuring out the TwitchTv API project? i'm unsure how to go about coding this..
Bigyan Karki
@bigyankarki
Feb 21 2017 20:20
well its a parameter @GoingAllTheWayUp
but i am confused as to how num gets its value
Adam
@GoingAllTheWayUp
Feb 21 2017 20:21
me too
Bigyan Karki
@bigyankarki
Feb 21 2017 20:21
@moigithub can you help?
Moisés Man
@moigithub
Feb 21 2017 20:22
in that case.. that function is know as callback.. cuz its not u who call the function..
u only provides the function to ... filter (another method)
and this filter is the one who CALLS the function
@bigyankarki
every methods (like filter) have a predefined set of parameters (check the documentation)
filter callback function parameters
soo on filter... its function (element, index, array)
filter will pick each and every(one by one) array elements u applying filter on..
and CALL the funciton u provides with those parameters
(is up to u if u wanna use or not)
 function search(num) { 
   /// do something with num   
   } 
[1,2,3].filter(search);
filter internally will do
search(1,0,[1,2,3])
search(2,1,[1,2,3])
search(3,2,[1,2,3])
Bigyan Karki
@bigyankarki
Feb 21 2017 20:27
oh
Moisés Man
@moigithub
Feb 21 2017 20:27
doesnt matter if ur funciton provided only accept 1 parameter (num)
filter will still call it sending all those 3.. (according to the doc) if u like.. u can add more params to the function to use it..or just ignore
Isaac Oke
@isaacoke
Feb 21 2017 20:27
Can anyone help me with the 'Build a Personal Portfolio Webpage' project? I am having issues getting javascript to work
Bigyan Karki
@bigyankarki
Feb 21 2017 20:28
wow thats helpful L)
:)
thanks @moigithub
CamperBot
@camperbot
Feb 21 2017 20:28
:star2: 2719 | @moigithub |http://www.freecodecamp.com/moigithub
bigyankarki sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
Ogunlolu Ayokunle
@larney1
Feb 21 2017 20:29
please, how can i post a picture on codepen using html. it is showing the alt info? @ChrisWHurd
Moisés Man
@moigithub
Feb 21 2017 20:31
@isaacoke r u doing on codepen ?
@larney1 do u have ur picture url ??
Stephen
@stephepush
Feb 21 2017 20:33
@isaacoke & @larney1, share your codepens so that we can see what the problem is
Isaac Oke
@isaacoke
Feb 21 2017 20:34
@moigithub yes i am
Moisés Man
@moigithub
Feb 21 2017 20:35
@isaacoke but u already have a picture there.. whats the problem ?
Isaac Oke
@isaacoke
Feb 21 2017 20:35
I am trying to get scroll event working but I haven't had any luck
my issue is javascript releated @moigithub
Moisés Man
@moigithub
Feb 21 2017 20:35
right :P
Stephen
@stephepush
Feb 21 2017 20:37

Everyone else, I have a problem. I'm working on Udacity's api course, and I'm having problems with appending an img tag to my html with jquery. HTML is only reading a part of the src link. I put the code up on jsbin:

https://jsbin.com/likulah/edit?html,output

Chris
@ChrisWHurd
Feb 21 2017 20:37
@larney1 <img src="https://blogs.deusto.es/alumni/wp-content/uploads/2016/07/Warren-Buffett-Smiling-Black-White.jpg" height="100%" width="100%">
Isaac Oke
@isaacoke
Feb 21 2017 20:38
I know the minimal basics of Javascript/jQuery but I don't have a clue how to do the scroll event @moigithub
Annetta Ives
@IvesNoIdea
Feb 21 2017 20:45
Hi everyone, I've hit a brick wall with my Wikipedai Viewer - can anyone help me?
Here's a link to my CodePen: Wiki Quickie
I know that the URL for the API call is building correctly, because when I console log it, I can copy it and paste it into a new browser window and get the relevant JSON. But when I actually do the call, I can't get it to work. Or rather, I can't prove to myself that it is working. I have tried using stringify to output the JSON to my page, but nothing appears. Any ideas?
Moisés Man
@moigithub
Feb 21 2017 20:46
@isaacoke why u need scrolling ? wanna make some effects or something ??
cuz defult anchor <a> behavior is to "jump/scroll to"
Chris Rutherford
@cjrutherford
Feb 21 2017 20:48
@IvesNoIdea seems to be an issue with the way you're calling the API, I'm getting this error in the browser's console.
blob
Isaac Oke
@isaacoke
Feb 21 2017 20:49
@moigithub I thought the whole point of the 'Build a Personal Portfolio Webpage' project was to build something similar to this https://codepen.io/FreeCodeCamp/full/YqLyXB/
@moigithub I am trying to implement the same scroll effects for my page
Annetta Ives
@IvesNoIdea
Feb 21 2017 20:50
@cjrutherford Any ideas what I'm doing wrong? I've used a pretty standard $.getJSON("URL", function(json){ });call.
Moisés Man
@moigithub
Feb 21 2017 20:51
@isaacoke no need tobe similar.. u can put whatever u want, thats just an example
Annetta Ives
@IvesNoIdea
Feb 21 2017 20:52
@isaacoke Do you mean the way the navbar stays fixed at the top while the rest of the content scrolls behind it?
Chris Rutherford
@cjrutherford
Feb 21 2017 20:52
@IvesNoIdea nope, that's not it. it's something in the way your call was handled by the api.... let me see
Isaac Oke
@isaacoke
Feb 21 2017 20:53
@moigithub Ah I see, no worries then. Although it would've been nice to have
Annetta Ives
@IvesNoIdea
Feb 21 2017 20:53
@cjrutherford I don't need a key, do I? I haven't seen any mention of it in the API documentation.
Janina Pohorecki
@janepohorecka
Feb 21 2017 20:54
Hey guys!! Do you know if there is a tutorial out there that can help me make a contact form that looks like the one on this website?? http://indicius.com/
Moisés Man
@moigithub
Feb 21 2017 20:54
if u dont know something u can search code snippets to add
ie: https://css-tricks.com/snippets/jquery/smooth-scrolling/ @isaacoke
Chris Rutherford
@cjrutherford
Feb 21 2017 20:55

@IvesNoIdea shouldn't need to and I used a simpler call in mine.

 function searchWiki() {
    title = $('#input').val();
    $.ajax({
      dataType: "jsonp",
      url: apiBase + title,
      success: setResult
    });
  }

and then the setResult function

 function setResult(json) {
    console.log(json);
    $('#results').empty();
    for (var i = 0; i < json[1].length; i++) {
      $('#results').append('<div class="panel panel-primary slideUp"><div class="panel-heading"><a href="' + json[3][i] + '">' + json[1][i] + '</a></div><div class="panel-body"><p>' + json[2][i] + '</p></div></div>');
    }
  }
oh and my apiBase variable:
var apiBase = 'http://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=';
@IvesNoIdea I think the issue might be related to where I used opensearch as my action where you used query
Isaac Oke
@isaacoke
Feb 21 2017 20:56
@IvesNoIdea So when you scroll down the page and the navbar list items changes depending the section. E.g. if I scrolled to the portfolio section, the the portfolio tab in the navbar is highlighted. Does that make sense?
Annetta Ives
@IvesNoIdea
Feb 21 2017 20:57
@cjrutherford Can you point me at any resources to learn about this way of doing it? I only know the .getJSON method because that's what the FreeCodeCamp tutorial uses :-(
Chris Rutherford
@cjrutherford
Feb 21 2017 20:59
@IvesNoIdea yeah this one had a bunch of issues for me. .getJSON is a simplified form of $.ajax() so it should work either way. here's my pen, but it's been forever since I did it..... http://codepen.io/christopherrutherford/pen/OXOPxW
Annetta Ives
@IvesNoIdea
Feb 21 2017 20:59
@isaacoke Ah, right. Yes that is cool. But it appears to be done with JavaScript / jQuery, so if you haven't got to those sections yet, it might be something to add to the 'to-do' list for later!
@cjrutherford Thanks, I'll take a look :+1:
CamperBot
@camperbot
Feb 21 2017 21:00
ivesnoidea sends brownie points to @cjrutherford :sparkles: :thumbsup: :sparkles:
:cookie: 320 | @cjrutherford |http://www.freecodecamp.com/cjrutherford
Bartłomiej Rakowiecki
@Biskupator
Feb 21 2017 21:01
Hey guys. I have a quick question. How to make my pics scale down when changing the size of my browser? https://codepen.io/Biskupator/pen/RKzROg
Chris Rutherford
@cjrutherford
Feb 21 2017 21:02
@Biskupator check out the image-responsive class in bootstrap, also look into the min-width and max-width directives in CSS
Bartłomiej Rakowiecki
@Biskupator
Feb 21 2017 21:05
One simple trick. Thanks.
Isaac Oke
@isaacoke
Feb 21 2017 21:10
@IvesNoIdea ok, thanks :smile:
CamperBot
@camperbot
Feb 21 2017 21:10
isaacoke sends brownie points to @ivesnoidea :sparkles: :thumbsup: :sparkles:
:cookie: 265 | @ivesnoidea |http://www.freecodecamp.com/ivesnoidea
Ogunlolu Ayokunle
@larney1
Feb 21 2017 21:15
I cannot even figure out how to send my codepen down here
Moisés Man
@moigithub
Feb 21 2017 21:19
copy paste the link.. (from ur browser address bar ) @larney1
Ogunlolu Ayokunle
@larney1
Feb 21 2017 21:19
@moigithub Thank you
CamperBot
@camperbot
Feb 21 2017 21:19
larney1 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2720 | @moigithub |http://www.freecodecamp.com/moigithub
Dejvid Vujic
@DejvidV
Feb 21 2017 21:26
Quick question. I have a nav bar with nav pills but it isn’t showing me the pill-like boxes instead they’re right next to each other without spaces. Any idea on how to make it work?
Moisés Man
@moigithub
Feb 21 2017 21:27
check ur browser devtools console IF u have any errors @DejvidV
Ogunlolu Ayokunle
@larney1
Feb 21 2017 21:28
:+1: @moigithub
Dejvid Vujic
@DejvidV
Feb 21 2017 21:28
Only about external stylesheets but I should be good as it’s only bootstrap
Jason
@ICodeWateverIFeelLikeCoding
Feb 21 2017 21:32
Is there any way to pass a parameter through an embedded html event? i'm trying to call an onclick function for multiple buttons & pass a different argument for each one to check if certain circumstances are true via javascript..when i add an argument such as code onclick="selectButton(passAnArgument)", the corresponding function ins't called. Help me out?
onclick="selectButton(passAnArgument)"*
<button onclick="selectButton()"id="usersBtn" style="btn btn-primary"><i id="button1Icon"class="glyphicon glyphicon-user"></i></button>
Moisés Man
@moigithub
Feb 21 2017 21:36
@larney1 u wrote scr and its src (source) on ur image
Ogunlolu Ayokunle
@larney1
Feb 21 2017 21:42
@moigithub :sparkles: :thumbsup: :sparkles: Also the lists are not properly centered. Thank You So much
CamperBot
@camperbot
Feb 21 2017 21:42
larney1 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:warning: larney1 already gave moigithub points
Moisés Man
@moigithub
Feb 21 2017 21:44

@DejvidV an easy way to start is.. checking the examples.. and copy the code

<ul class="nav nav-pills  nav-justified">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
</ul>

https://v4-alpha.getbootstrap.com/components/navs/#pills

Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 21:45
hello guys I am writing a Weather Page which displays weather as per the city. Here is the JSON data I got for San Francisco from the api call. Now how do I extract each elements like temeprature city humidity etc
{"coord":{"lon":-122.42,"lat":37.77},"weather":[{"id":721,"main":"Haze","description":"haze","icon":"50d"},
{"id":521,"main":"Rain","description":"shower rain","icon":"09d"}],"base":"stations","main":
{"temp":14.42,"pressure":1023,"humidity":82,"temp_min":13,"temp_max":16},"visibility":9656,
"wind":{"speed":4.1,"deg":190},"clouds":{"all":75},"dt":1487709480,
"sys":{"type":1,"id":392,"message":0.0085,"country":"US",
"sunrise":1487688617,"sunset":1487728587},
"id":5391959,"name":"San Francisco","cod":200}
Gulsvi
@gulsvi
Feb 21 2017 21:45
Thanks @tyler, I'll give it a try
CamperBot
@camperbot
Feb 21 2017 21:45
skycoder01 sends brownie points to @tyler :sparkles: :thumbsup: :sparkles:
:cookie: 30 | @tyler |http://www.freecodecamp.com/tyler
Gulsvi
@gulsvi
Feb 21 2017 21:49

@pshiwakoti1 To simplify it:

var json = {
            "coord": {
              "lon": -122.42,
              "lat": 37.77
            }
          }

You would get the value for lat with json.coord.lat

Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 21:49
oh ok
I tried openweather API
Gulsvi
@gulsvi
Feb 21 2017 21:50

@pshiwakoti1 It's a little more complicated with accessing stuff inside of weather, because it uses an array:

var json = {
            "weather": [{
              "id": 721,
              "main": "Haze",
              "description": "haze",
              "icon": "50d"
            }, {
              "id": 521,
              "main": "Rain",
              "description": "shower rain",
              "icon": "09d"
            }],
          }

To get the weather description, it would be: json.weather[0].description

Moisés Man
@moigithub
Feb 21 2017 21:50

@larney1 i see em centered.. but probably the bullets
u can remove em if u like

ul {
  list-style-type:none;
}

https://www.w3schools.com/csSref/pr_list-style-type.asp

Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 21:51
I wanted to use lattitude and longitude to get the data from API
I couldn't use that because I didn't know how to generate latitude and longitude for current location
Gulsvi
@gulsvi
Feb 21 2017 21:51
@pshiwakoti1 If you use a service for getting the location, like https://ipinfo.io/json, it will be similar
They all give you a JSON object you can parse to build a URL for Open Weather Map
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 21:53
ok Let me try @SkyCoder01 thanks for the directions
CamperBot
@camperbot
Feb 21 2017 21:53
pshiwakoti1 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 269 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 21 2017 21:53
Good luck :+1:
Moisés Man
@moigithub
Feb 21 2017 21:54
@pshiwakoti1 also if u install on ur browser an addon like json viewer
it makes easier to read
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 21:54
ok thanks
Ogunlolu Ayokunle
@larney1
Feb 21 2017 21:56
@moigithub seen :gem:
achudoz
@achudoz
Feb 21 2017 22:00
@pshiwakoti1 I think I have been where you are and IMO what you need to do is to get the url which gives you at least some data and then just experiment with displaying it until you get it right. remember to not just go by props, but also numbers. e.g. data.weather.temperature might be wrong, but data[0].weather.temperature might be what you are looking for. From what I understand getting the data is usually pretty easy abut what people have trouble with is getting the desired information from that data. Take your time, study the structure and you will be successful
Im getting error why
can u tell me
Gulsvi
@gulsvi
Feb 21 2017 22:34
@pshiwakoti1 Open that in your browser and you will find your answer
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 22:34
i opened it
Garo
@Garabed96
Feb 21 2017 22:47

`` js

function bouncer(arr) {
// Don't show a false ID to this bouncer.
var filtered;
var x;
var y = [];

// loop through the length of the array
for(i=0;i<arr.length;i++){

// for each element in the array if its a falsly value it is labeled as false
 x = Boolean(arr[i]);
// if true aka the value is not falsly this if statement is complete
if(x){

   y = arr[i];
  filtered += arr.filter(y);
     // filtered = arr.filter(arr[i]);
} 

}

return filtered;
}

bouncer([7, "ate", "", false, 9]);
``

guys I need help with this, clearly I can't pass y into filter because its not a function what do I do in this case?
Gulsvi
@gulsvi
Feb 21 2017 22:52
@Garabed96 This problem is almost like a riddle - not sure how to help without giving you the answer. The people at https://gitter.im/FreeCodeCamp/HelpJavaScript can probably help better. I will say - no need to use a for loop and a .filter(). .filter() will loop through your array.
Ken Haduch
@khaduch
Feb 21 2017 22:54
@Garabed96 - Garo - take a good look at the documentation for Array.filter() - it's almost magic how it works! Pay attention to the Description section - and especially the link that they have there. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter --- you'll be amazed when you get it working!
Garo
@Garabed96
Feb 21 2017 22:55
Thanks for not giving the straight answer btw I appreciate it I want to figure it out myself @khaduch @SkyCoder01 appreciate the hints Ill look into it
CamperBot
@camperbot
Feb 21 2017 22:55
garabed96 sends brownie points to @khaduch and @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:star2: 2512 | @khaduch |http://www.freecodecamp.com/khaduch
bleka
@bleka
Feb 21 2017 22:57
Hi, how do I get rid of the border on the right of my image when it's resized? https://codepen.io/bleka/pen/MJRNMm
Gulsvi
@gulsvi
Feb 21 2017 22:59
@bleka You'll need a larger image, or you need to put a max width on your .img class, like: max-width: 334px;
bleka
@bleka
Feb 21 2017 23:04
Will try @SkyCoder01 . Thanks!
CamperBot
@camperbot
Feb 21 2017 23:04
bleka sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Ghost
@ghost~58a69946d73408ce4f4af5d5
Feb 21 2017 23:07
help me please, i can't get html target attribute to work .hidden{display:none;}.hidden:target{display:block;} http://codepen.io/jansen-1991/pen/WRWrMr
jdl2017
@jdl2017
Feb 21 2017 23:08
Is it possible to do responsive margins? I'm working on the Tribute Page and if I reduce the browser window size from full to half the viewport, my tribute page retains white margins all around.
Gulsvi
@gulsvi
Feb 21 2017 23:14
@jansen-1991 .hidden is a built-in bootstrap class, use a different class name
@jdl2017 Yes, you can use % or vw units. 1vw = 1% of the viewport width. 1vh = 1% of the viewport height.
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:20
hi @SkyCoder01 when I open the url I get error
this latitude and longitude is for San Francisco
Gulsvi
@gulsvi
Feb 21 2017 23:21
@pshiwakoti1 Yes:
{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}
I can't help you fix your API key though :/
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:22
I can add the url and make a url by adding parts of it like
Gulsvi
@gulsvi
Feb 21 2017 23:22
I don't know your API key
Have you visited the web page in the error message for help?
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:22
api key is appid=b1b15e88fa797225412429c1c50c122a1
Gulsvi
@gulsvi
Feb 21 2017 23:23
@pshiwakoti1 I think you may have copied it incorrectly because that is an invalid API key
jdl2017
@jdl2017
Feb 21 2017 23:23
@SkyCoder01 I tried those values after looking around and the margins still don't seem to go away. I'm comparing my page with the FCC Tribute Page
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:24
let me copy next key
Gulsvi
@gulsvi
Feb 21 2017 23:24
@pshiwakoti1 It seems you copied that key from another weather app... That is not cool. You need to get your own API key.
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:25
34a4cf171b5fa89cd0ea82794d903fdb
Gulsvi
@gulsvi
Feb 21 2017 23:25
@pshiwakoti1 Sign up for your own API key.
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:25
i did
its a new key i generated
Gulsvi
@gulsvi
Feb 21 2017 23:26
Okay, now try it in the URL like you did with the last one
fllprbt
@fllprbt
Feb 21 2017 23:26
Hey. any senior frontend developer here with clear understanding in CSS? I want to 1:1 to get some advice
it works now
Gulsvi
@gulsvi
Feb 21 2017 23:27
@jdl2017 I'm not sure I understand what you mean by the margins. It will make it easier if you remove the inline styles and use CSS instead.
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:27
now how do i create this app can u give me hints
Gulsvi
@gulsvi
Feb 21 2017 23:28
@jdl2017 If you use container-fluid instead of container your jumbotron will be the full width of the screen
@pshiwakoti1 Did you use an API for your quote machine?
jdl2017
@jdl2017
Feb 21 2017 23:29
@SkyCoder01 I'm trying to approach the problem in a different way and was trying to avoid looking at FCC's code but I'll do that now to save time. Thanks!
CamperBot
@camperbot
Feb 21 2017 23:29
jdl2017 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:30
i used string array
Gulsvi
@gulsvi
Feb 21 2017 23:31
@pshiwakoti1 Start with getting the location from a location API like https://ipinfo.io/json
You can use $.getJSON to store that data in a variable. Once you have your variable, you can try adding it to the page like you did with your quote string array.
When you get comfortable with that, try to build a OpenWeatherMap URL with the location data and then you'll be ready to use that Data to display the weather.
It's going to take 20-30hrs, so watch some YouTube videos, practice displaying data from getJSON
Chris
@bestintown23
Feb 21 2017 23:42
how can i make my pictures full screen on this site? https://codepen.io/bestintown23/pen/KaOBJR
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:51
@SkyCoder01 I got 1 more question for you
in this example, if I change the url to https://ipinfo.io/json and store that into a variable will that work?
what is function(data) in this example do
Moisés Man
@moigithub
Feb 21 2017 23:54
do u know how to use console.log?
and check the output on devtools/console?
Gulsvi
@gulsvi
Feb 21 2017 23:54
@pshiwakoti1 Yes. function(data) stores the response from the API in a variable called data
So you can do data.loc to see the coordinates later and add them to your html, similar to what was learned here: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
In that challenge we learned how to store the results in a variable called json and then stringify the object so it can be displayed in HTML
jdl2017
@jdl2017
Feb 21 2017 23:56
@SkyCoder01 http://v4-alpha.getbootstrap.com/utilities/spacing/ Figured out that this is what I was looking for
Gulsvi
@gulsvi
Feb 21 2017 23:56
@jdl2017 I haven't studied v4-alpha yet. It is very different from what everyone is taught in the Free Code Camp bootstrap challenges.
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:56
thanks @SkyCoder01 I will look into it and work on it now
CamperBot
@camperbot
Feb 21 2017 23:56
pshiwakoti1 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 275 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Prakash Shiwakoti
@pshiwakoti1
Feb 21 2017 23:57
if I have questions I"ll ask you again
jdl2017
@jdl2017
Feb 21 2017 23:58
@SkyCoder01 Yeah while using codepen.io for FCC some of the things I learned didn't work (img-responsive is now img-fluid) so I ended up there
Moisés Man
@moigithub
Feb 21 2017 23:59
fcc teach bootstrap 3
codepen by default load boostrap 4
soo u should expect some differences
but ofc u can always put a link to v.3
Gulsvi
@gulsvi
Feb 21 2017 23:59
I'm going to wait until it's at least beta before putting time into it. No idea what bugs are out there now.