These are chat archives for FreeCodeCamp/HelpFrontEnd

4th
Feb 2017
Karthik Nallasivan
@furball514
Feb 04 2017 00:04 UTC
@SkyCoder01 need help with that?
Gulsvi
@gulsvi
Feb 04 2017 00:09 UTC
@furball514 I think I've got it, just taking a lot of time to learn what the parameters do. Thanks for offering :)
CamperBot
@camperbot
Feb 04 2017 00:09 UTC
skycoder01 sends brownie points to @furball514 :sparkles: :thumbsup: :sparkles:
:cookie: 167 | @furball514 |http://www.freecodecamp.com/furball514
Gulsvi
@gulsvi
Feb 04 2017 00:10 UTC
gsrsearch vs srsearch vs search, etc...
Bethany
@BettiBeez
Feb 04 2017 00:24 UTC
I just reached the basic front end projects. I'm on the tribute page and I'm stuck on the fact that I don't have a clue what to make a page about. I've got no idea, and I don't know how extensive it should be. What should I be making? What exactly is a tribute page? I saw the example but I've got nothing coming to mind. Can it be something that is not a human? Maybe a game or something?
Seth
@sethdcd
Feb 04 2017 00:24 UTC
hello, for the frontend challenge of personal portfolio, do we need to set it up to create media queries and build it so it's completely responsive?
@BettiBeez i would do the tribute page on anything you like, i did it on a drummer that i personally enjoy :)
Coy Sanders
@coymeetsworld
Feb 04 2017 00:31 UTC
@BettiBeez no it doesn't have to be about a person
Bethany
@BettiBeez
Feb 04 2017 00:31 UTC
I'll give it a try. This should be interesting.
Coy Sanders
@coymeetsworld
Feb 04 2017 00:31 UTC
as long as you pass the user stories they list on the challenge then you're ok, nothing in there indicates it needs to be a person
Bethany
@BettiBeez
Feb 04 2017 00:32 UTC
Thank you for the guidance!
Coy Sanders
@coymeetsworld
Feb 04 2017 00:32 UTC
no problem good luck
bitcoinabdi
@bitcoinabdi
Feb 04 2017 00:34 UTC
hey folks
please provide feedback on my portfolio http://codepen.io/abdihakim/pen/oBGVom
Seth
@sethdcd
Feb 04 2017 00:38 UTC
hello, for the frontend challenge of personal portfolio, do we need to set it up to create media queries and build it so it's completely responsive?
bitcoinabdi
@bitcoinabdi
Feb 04 2017 00:41 UTC
not really
@sethdcd you are supposed to creat it with HTML, bootsrap, jquery and css
anyfeedback on my portfolio ?
Hello911
@Hello911
Feb 04 2017 00:54 UTC
function mutation(arr) {
  var one=arr[0];
  var two=arr[1];

  one.toLowerCase();
  two.toLowerCase();

  var array=two.split("");

  for(var i=0;i<array.length;i++){
    if(one.indexOf(array[i]) !== -1){
      return false;
    }else return true;
  }


}

mutation(["hello", "hey"]);

This is the function for Mutation Challenge. The function is given an array of 2 elements, 2 string to be exact. If the first element has everysingle letter in the second element (just one time, no case, no order), then the function returns true, if not false.

hey and hello works. But for example, mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]) is not returning true, somehow. I suspect there is something wrong with my if statement nested inside my for loop. Am I returning false or true multiple times, or some other problem?

Chris Cullen
@123xylem
Feb 04 2017 01:03 UTC

var arr=[1,1,1,1];

function same(){
    for (j=0;j<arr.length;j++) {
    for (k=j+1;k<arr.length;k++) {
        if (arr[k]==arr[j]){ 
            return true;
        }
    }
}
return false;
}
Why doesnt this see that there are duplicates in my code? or vice versa?
Seth
@sethdcd
Feb 04 2017 01:59 UTC
hi all! any feedback would be much appreciate on my portfolio :D
http://codepen.io/sethdcd/pen/VPXzNJ
Johnny
@JohnnyBizzel
Feb 04 2017 02:01 UTC

@123xylem

function same(arr){
    for (let j=0;j<arr.length;j++) {
    for (let k=j+1;k<arr.length;k++) {
        if (arr[k]==arr[j]){ 
            return true;
        }
    }
}
return false;
}
same([1,1,1,1]);

try this

Chris Cullen
@123xylem
Feb 04 2017 02:01 UTC
@JohnnyBizzel hm why let?
i actually took my original code from stackoverflow
thanks btw
Johnny
@JohnnyBizzel
Feb 04 2017 02:02 UTC
@sethdcd Great apart from some overlapping on the smaller view.
Overlap.png
@123xylem why not let?
Seth
@sethdcd
Feb 04 2017 02:03 UTC
@JohnnyBizzel thanks johnny! i wasn't sure if I needed to get that deep into media queries on the project
CamperBot
@camperbot
Feb 04 2017 02:03 UTC
sethdcd sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:star2: 1237 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
Johnny
@JohnnyBizzel
Feb 04 2017 02:03 UTC
@123xylem http://pythontutor.com/visualize.html#mode=edit doesn't like undeclared variables.
@sethdcd Bootstrap does this work for you.
Seth
@sethdcd
Feb 04 2017 02:05 UTC
@JohnnyBizzel hmm i must have done something wrong then because i did hook up the .img-responsive classes with the pictures. each area i used i only gave a static 760px; so maybe that's why there is the over lapping
Johnny
@JohnnyBizzel
Feb 04 2017 02:05 UTC
@sethdcd are you using containers and rows?
Ken Haduch
@khaduch
Feb 04 2017 02:06 UTC
@Hello911 - still looking at the Mutation challenge? I think that if you change your test for the .indexOf to be === -1, then you want to return false - meaning that you didn't find the character in your string. Oh, and I just noticed that your .toLowerCase() method calls are not updating the values of one and two - those methods return an array that is lowercased, they do not modify the original array in place. Then that almost all pass - for some reason the first one doesn't?
@Hello911 - the last thing is that you should not return true; from within the for loop - this is similar to the profile lookup, if you've done that already, where you cannot determine if everything is found until you've been through the entire string. So you can return false from within the loop, because that automatically means you didn't find a character, but only return true if you have gotten all the way through your letters in the second string.
Seth
@sethdcd
Feb 04 2017 02:12 UTC
@JohnnyBizzel hi johnny i am but inside a div with an id of: home, about, contact..etc. i then gave each of those a height of 760px; so i could have them cleanly section off like that. is there a better way to go about this?
Johnny
@JohnnyBizzel
Feb 04 2017 02:14 UTC
@sethdcd http://codepen.io/JohnnyBizzel/pen/BpxEjM
The lower section looks better now
Hello911
@Hello911
Feb 04 2017 02:15 UTC
@khaduch Problem solved thanks
CamperBot
@camperbot
Feb 04 2017 02:15 UTC
hello911 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2404 | @khaduch |http://www.freecodecamp.com/khaduch
Johnny
@JohnnyBizzel
Feb 04 2017 02:15 UTC
:phone: :nine: :one: :one:
Seth
@sethdcd
Feb 04 2017 02:16 UTC
@JohnnyBizzel hi johnny did you change something?
Johnny
@JohnnyBizzel
Feb 04 2017 02:16 UTC
@sethdcd I think it looks better on smaller narrow view.
Seth
@sethdcd
Feb 04 2017 02:17 UTC
oh ok, thanks!
Johnny
@JohnnyBizzel
Feb 04 2017 02:17 UTC
apart from your image
Seth
@sethdcd
Feb 04 2017 02:17 UTC
yeah i will tweak it a bit more but honestly i just wanted to get into the javascript bit at this point :D
Johnny
@JohnnyBizzel
Feb 04 2017 02:18 UTC
@sethdcd Try now http://s.codepen.io/JohnnyBizzel/debug/BpxEjM/YvAgOaVPVZXA
I am putting col-xs-12 classes in, so it fills the page.
Seth
@sethdcd
Feb 04 2017 02:19 UTC
ah nice! yes that does look better, thank you :)
Johnny
@JohnnyBizzel
Feb 04 2017 02:19 UTC
@sethdcd Thanks, anytime ;)
CamperBot
@camperbot
Feb 04 2017 02:19 UTC
johnnybizzel sends brownie points to @sethdcd :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @sethdcd |http://www.freecodecamp.com/sethdcd
Jesus Hilario Hernandez
@jesushilarioh
Feb 04 2017 02:22 UTC
Hello all, is it good practice to declare a const within an if statement?
Skullvapor
@Skullvapor
Feb 04 2017 02:42 UTC
document.getElementById("SubTitle").innerHTML =(famousQuotesA[Math.floor(Math.random)*famousQuotesA.length]);
}; still curious why this don't be working.
It is showing up undefined. here is the link. https://codepen.io/Skullvapor/pen/ZLvgzJ?editors=0010
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 02:49 UTC
@Skullvapor You have to call the function random
So it should be Math.random()
document.getElementById("SubTitle").innerHTML =famousQuotesA[Math.floor(Math.random())*famousQuotesA.length]);
Skullvapor
@Skullvapor
Feb 04 2017 02:50 UTC
Thankyou!
@paulotokimatu
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 02:51 UTC
no problem
Faddah Wolf
@faddah
Feb 04 2017 02:58 UTC
@chris0715 sorry, here is the correct pen address, sorry if i mangled it before: https://codepen.io/faddah/pen/qRXmLy
Tony
@FreakishLancer
Feb 04 2017 03:04 UTC
Ahh!! This is driving me insane. Does anyone know why my table is giving undefined value for all the streamers in my Twitch viewer? http://codepen.io/Freaklancer/pen/rjvbKm
Faddah Wolf
@faddah
Feb 04 2017 03:06 UTC
ok, all — so i am working on a new pen, the second FCC HTML/CSS project, the Portfolio. i am using a hybrid of Bootstrap & my own CSS. here is my issue, the text and buttons on the header section (looks like a busines desktop with a computer, iPat, notebook, etc., on it) — that is made using the Bootstrap Jumbotron elements — https://v4-alpha.getbootstrap.com/components/jumbotron/. i want to center the blocks of text, and also align them center/middle from top to bottom. i have tried using Bootstrap classes, like .center-block and .align-middle or text-center and none of it works. the text and buttons stay in the same place no matter what class i put on them. any help here, please in getting this stuff centerd within the Jumbotron, please? here is the codepen — http://codepen.io/faddah/pen/egVyrM
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:13 UTC
@FreakishLancer I suppose the problem is that AJAx calls area asynchronous, so in the document.ready function you are trying to access variables that are not still set
Mirko Sorbara
@konV92
Feb 04 2017 03:14 UTC
I finally finish my first project, this is my tribute page and I'd love to hear some feedback and advices from you. What can I improve? https://codepen.io/konV/pen/ygKyqz
Tony
@FreakishLancer
Feb 04 2017 03:16 UTC
@paulotokimatu Hmm, would I need a callback or a promise? Deferreds (?)?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:16 UTC
@FreakishLancer I think so, JQuery's getjson function has an argument which is a callback
but I am not exactly sure about how it would fit in your code
maybe you will need to tweak a few things]
Tony
@FreakishLancer
Feb 04 2017 03:21 UTC
@paulotokimatu Yes, I think I put myself into a corner by making the class and whatnot. Although it did work for my random quote project since I only made one getjson call in that one.
BRB, trying to dig myself out of my hole!
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:21 UTC
hmmm
Tony
@FreakishLancer
Feb 04 2017 03:22 UTC
?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:22 UTC
but anyway we should be careful with the asynchronous nature of api calls
Tony
@FreakishLancer
Feb 04 2017 03:25 UTC
Hmm, wait, I think I can just simply use .done() or something.
I wish the FCC curriculum actually touched on this in more detail.
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:26 UTC
I had some problems with this in my Twitch project too
It was a little bit frustrating haha
But I guess they want us to learn this by making mistakes
Tony
@FreakishLancer
Feb 04 2017 03:38 UTC
@paulotokimatu I just ended up setting the global ajax async to false. :shrug:
Ken Haduch
@khaduch
Feb 04 2017 03:39 UTC
@faddah - it looks like your jumbotron is very "small" - the closing </section> tag comes after a few elements - the header, the buttons, etc. If you put a text-center class along with the jumbotron class - it does center the buttons and everything in the section until the closing </section> tag. Do you want to make your jumbotron extend throughout the page? Then you need to move that </section> tag down to the bottom?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:40 UTC
@FreakishLancer Ah, that would work haha
Tony
@FreakishLancer
Feb 04 2017 03:41 UTC
@paulotokimatu Yeah, not the best solution for a real app/site, but it will work for my purposes, I guess!
Ctiller93
@Ctiller93
Feb 04 2017 03:41 UTC
Can anyone explain why this is giving me that weird console error?
I took the example directly from here in order to test it:
Ken Haduch
@khaduch
Feb 04 2017 03:44 UTC
@FreakishLancer - one thing that you need to do with these async transfers is to figure out a way to sync the data to where it belongs when it returns. For the twitch app, you would have to look at the data and find which user it pertained to, using the userid or username, and collect it into the appropriate section - it can be done that way, I haven't looked at what you've coded to see if you are far off from being able to do that easily? It doesn't really make sense to turn the async transfers off, it might slow your site down quite a bit? But that's my comment on that...
@Ctiller93 - you also need the jqueryui library loaded, I think that will do it? It is available in the quick adds in the JS tab. Try that?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:47 UTC
@Ctiller93 I made it work by using bootstrap 3.3.7
Remember to link the javascript from bootstrap too
Ctiller93
@Ctiller93
Feb 04 2017 03:47 UTC
@khaduch Just tried that. Gets a little farther, but now hooray shows up twice.
Huh. Let's see then...
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:48 UTC
Just use the links from the example
Ctiller93
@Ctiller93
Feb 04 2017 03:49 UTC
Gotcha.
Tony
@FreakishLancer
Feb 04 2017 03:49 UTC
@khaduch I will look into that. I do know it is possible too. I think the mistake I made was trying to put 3 AJAX requests in a constructor for a class, so that I would have 3 async requests running when I create a Channel object. What I need to find out now is how to get the data stored into variables independently of the HTML append, etc. without setting everything to synchronous.
Ken Haduch
@khaduch
Feb 04 2017 03:51 UTC
@Ctiller93 - oh, I see, it's bootstrap.js that you should add, not jquery ui...
Ctiller93
@Ctiller93
Feb 04 2017 03:52 UTC
Sweet. It works now! Thanks @khaduch @paulotokimatu
CamperBot
@camperbot
Feb 04 2017 03:52 UTC
ctiller93 sends brownie points to @khaduch and @paulotokimatu :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @paulotokimatu |http://www.freecodecamp.com/paulotokimatu
:star2: 2405 | @khaduch |http://www.freecodecamp.com/khaduch
Ctiller93
@Ctiller93
Feb 04 2017 03:52 UTC
But question, why can't I just use the most recent libraries and expect tooltips to work then?
Or at least, the ones that come up when I type "bootstrap" in codepen.
Ken Haduch
@khaduch
Feb 04 2017 03:53 UTC
@Ctiller93 - it looks like it works for me - just load bootstrap.css in the CSS panel. And in the JS panel, load jquery.js and bootstrap.js - it seems to work fine that way?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 03:56 UTC
Oh, it works with bootstrap 4.0 too, sorry
Ctiller93
@Ctiller93
Feb 04 2017 04:01 UTC
It does? It's not working for me when I load in bootstrap 4.0.
Like as it is now:
The tooltip doesn't work and we're back to seeing the error. All I changed this time was I switched the bootstrap css and js files to 4.0
Unless I did something else without noticing, anyway.
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:05 UTC
@Ctiller93 Now I am confused
Ctiller93
@Ctiller93
Feb 04 2017 04:05 UTC
Yay! I'm not the only one! :D
I mean, crap! I'm not the only one!
Ken Haduch
@khaduch
Feb 04 2017 04:05 UTC
@Ctiller93 - I just loaded your pen and it looks like it is working. They might have restyled the tooltip so that it doesn't look like what you see in the w3schools example? But I see it pop up beneath the link when you hover on it?
Ctiller93
@Ctiller93
Feb 04 2017 04:06 UTC
Well yeah, the popup still appears without the styling, and we still get the error.
Ken Haduch
@khaduch
Feb 04 2017 04:06 UTC
make sure that you click the run in the COdePEn interface?
Ctiller93
@Ctiller93
Feb 04 2017 04:06 UTC
Yep.
Ken Haduch
@khaduch
Feb 04 2017 04:07 UTC
oh, I didn't see the console error... hmmmm....
Ctiller93
@Ctiller93
Feb 04 2017 04:07 UTC
:O You don't? Interesting.
Oh, I misread.
I thought you said you weren't getting it. Then I would've been all like: "WOAH!"
Ken Haduch
@khaduch
Feb 04 2017 04:08 UTC
I mean that I didn't notice it. I think that it is not a jquery function - it must be defined in the bootstrap.js, and it is loaded after jquery.js - so I wonder if that's it?
Ctiller93
@Ctiller93
Feb 04 2017 04:09 UTC
Maybe. Is there a way to change the order that thing load in in codepen?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:10 UTC
But it should work wirh bootstrap 4.0
Ctiller93
@Ctiller93
Feb 04 2017 04:11 UTC
Huh. I see.
So it might just be a weird codepen quirk?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:13 UTC
Maybe... This is strange
Ctiller93
@Ctiller93
Feb 04 2017 04:13 UTC
It seems to be specific to jquery 3.11
Ken Haduch
@khaduch
Feb 04 2017 04:13 UTC
@Ctiller93 - the thing is that bootstrap.js depends on having the jquery.js plugin loaded first. But I think that your javascript code that you are adding to activate the tooltip is trying to use a jquery selector, so it it looking for a jquery method ".tooltip()", and that doesn't come in until after the bootstrap.js is loaded. Sounds like a bit of a chicken-and-egg problem? Maybe you just have to ignore the console error at first?
Ctiller93
@Ctiller93
Feb 04 2017 04:14 UTC
Check this out:
And @khaduch Probably. It wouldn't bother me except the whole styling bit.
So that person is using an older version of jquery.
I tried changing it to the more recent version. The moment I did, it broke.
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:15 UTC
Actually
you need tether
Ctiller93
@Ctiller93
Feb 04 2017 04:15 UTC
tether?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:16 UTC
https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.1/js/tether.min.js
Put that in your settings
and you area good to go
Ctiller93
@Ctiller93
Feb 04 2017 04:17 UTC
Sweet. Let's try it!
specifically that version of tether?
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:19 UTC
ps: I think the order matters, so try Jquery, tether and then boostrap
Ctiller93
@Ctiller93
Feb 04 2017 04:20 UTC
Sweet. Now it works!
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:20 UTC
Ufff
haha
Ctiller93
@Ctiller93
Feb 04 2017 04:21 UTC
Well wait a second. It only appears once. D:
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:21 UTC

https://v4-alpha.getbootstrap.com/components/tooltips/#overview

I did not read that before, but the first item in the documentation mentions that

Ctiller93
@Ctiller93
Feb 04 2017 04:22 UTC
loooooool.
But then why did it work for bootstrap 3?
I... I think I'll just stop thinking about it for the night.
Thanks again man. I really do appreciate it. Learned a ton from this! :P
Ken Haduch
@khaduch
Feb 04 2017 04:23 UTC
@paulotokimatu - good job tracking that one down - I was trying to get to the bootstrap v4 docs, but didn't get there and got sidetracked...
@Ctiller93 - they are always changing things... have to read the docs, really! :)
Ctiller93
@Ctiller93
Feb 04 2017 04:23 UTC
shrug go figure!
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:24 UTC
@Ctiller93 A lot changed from v3 to v4, but I do not know the details
Ctiller93
@Ctiller93
Feb 04 2017 04:24 UTC
Gotcha!
No big. That was intense though!
Paulo Tokimatu
@paulotokimatu
Feb 04 2017 04:25 UTC
haha for sure
Faddah Wolf
@faddah
Feb 04 2017 04:27 UTC
@khaduch sorry, was attending other things.thank you for the suggestions. i will also try re-doing the end placement of the seciton of my Bootstrap jumbotron </section> end. thank you.
CamperBot
@camperbot
Feb 04 2017 04:27 UTC
faddah sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2406 | @khaduch |http://www.freecodecamp.com/khaduch
Ken Haduch
@khaduch
Feb 04 2017 04:30 UTC
@faddah - I think that another thing that is messing with the centering is that you are using the bootstrap grid later on, and only using the first 6 columns in your portfolio section - using a text-center on that part causes the text to be centered within the frames, but the iframes themselves are not centered on the page. I think that's what I saw going on there? It was a while ago that I looked at it.
Faddah Wolf
@faddah
Feb 04 2017 05:22 UTC
@khaduch thanks, i’m still fiddling with it, so the portfolio setion will look funky for a bit until i get to getting the grid class measurements in Bootstrap re-done. what i need to focus on now is that, per your suggestion, @khaduch, i’ve made most of the page within the Jumbotron Bootstrap class section, but now the “about” and “portfolio” sections have crept up bleeding into that header sectioin and i cannot figure how to push them back down where i want them using bootstrap classes, please?
CamperBot
@camperbot
Feb 04 2017 05:22 UTC
faddah sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: faddah already gave khaduch points
Karthik Nallasivan
@furball514
Feb 04 2017 05:40 UTC
lolz
Johnny
@jtan3
Feb 04 2017 05:47 UTC
Hi everyone. Is anyone on the twitch project? I'm stuck and need help.
Gulsvi
@gulsvi
Feb 04 2017 05:51 UTC
@jtan3 I've been looking at it along with the wikipedia project at the same time, maybe I can help?
Johnny
@jtan3
Feb 04 2017 05:54 UTC
@SkyCoder01 oh cool. I was able to display the accounts that are online but not the offline ones. http://codepen.io/jtan3/pen/OWZYGp/
So if stream === 'null', they're offline

@jtan3 In your code, you have to move this:

        var name=data.stream.channel.name;
        var game=data.stream.channel.game;
        var logo=data.stream.channel.logo;

to the section where you know they're online, otherwise the data doesn't exist and it errors out

image.png
Johnny
@jtan3
Feb 04 2017 06:02 UTC
Ok, i'll try moving it. Thanks.
Gulsvi
@gulsvi
Feb 04 2017 06:04 UTC
@txtsd Hello?
Johnny
@jtan3
Feb 04 2017 06:06 UTC
@SkyCoder01 how is the wiki viewer going?
Gulsvi
@gulsvi
Feb 04 2017 06:07 UTC
I'm still learning the API, to be honest. I got it working with basic results, but want to add pictures, so trying to figure that out at the moment
Johnny
@jtan3
Feb 04 2017 06:08 UTC
oh cool. I didn't go that far with mine.
Gulsvi
@gulsvi
Feb 04 2017 06:09 UTC
I think it could look nice with materialize cards or bootstrap panels. Still not sure what I'll do for the UI...
Ali Hammad
@alihammad-gist
Feb 04 2017 06:15 UTC
@SkyCoder01 you can use material-ui https://codepen.io/alihammad-gist/full/VaVEYg/ . If you are using react for UI
Gulsvi
@gulsvi
Feb 04 2017 06:18 UTC
@alihammad-gist I've been learning materialize.css http://materializecss.com/
But only used it for my quote machine so far - which just pulls random jokes from reddit
Cuneyt Akcay
@cuneytakcay
Feb 04 2017 06:19 UTC
Help please! I am going to start building my portfolio on codepen for my challenge assignment. If I want to include my picture on this website, do I have to store it somewhere in codepen, like in Assets? What do I put inside href="???"?
Gulsvi
@gulsvi
Feb 04 2017 06:20 UTC
@cuneytakcay Use https://postimage.org or your github profile for storing the image
Ali Hammad
@alihammad-gist
Feb 04 2017 06:20 UTC
hahaha :D
i heard about it first time today
Gulsvi
@gulsvi
Feb 04 2017 06:20 UTC
me too :)
Cuneyt Akcay
@cuneytakcay
Feb 04 2017 06:20 UTC
Thank you. Let me check that out.
Faddah Wolf
@faddah
Feb 04 2017 06:30 UTC
looking for help, still, with the second FCC project for HTML/CSS, the Portfolio page project. per the suggestion of someone in here, i moved the bottom closing </section> for my Bootstrap Jumbotron section to near the bottom of the web site to close it off. The page looks somewhat better, except — the formerly behaving sections below the header picture have now all creeped up into that section way too far. how do i push them back down, please, perhaps just using Bootstrap classes? here's the codepen — http://codepen.io/faddah/pen/egVyrM
also - i realize there are other glaring layout errors throughout the page, it's a work in progress, just ignore those for now and i'll revisit them later, just want to work on moving those sections back down where they belong visually in the layout.
Gulsvi
@gulsvi
Feb 04 2017 06:34 UTC
@faddah imgur doesn't work well with codepen, try https://postimage.org instead
I love the design though - lots of potential, just not sure how you want it all to look in the end. The design changes a lot depending on the screen size
Faddah Wolf
@faddah
Feb 04 2017 06:37 UTC
@SkyCoder1 - ok, but do you think that is what is causing the layout mis-match now?
Gulsvi
@gulsvi
Feb 04 2017 06:39 UTC
image.png
No, that has to be the html, but I get a broken image in the navbar from imgur
Faddah Wolf
@faddah
Feb 04 2017 06:39 UTC
@SkyCoder - those are the things i'm trying to fix. i thought using mainly Bootstrap classes and using classes like .jumbotron-fluid and .container-fluid would keep it responsive.
@SkyCoder01 - ok, i'll try that later. thank you. i'm more concerned with pushing those sections and the first lines of h1 text and the .button-group and such down where they belong.
CamperBot
@camperbot
Feb 04 2017 06:41 UTC
faddah sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 108 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 04 2017 06:41 UTC
I don't think jumbotron-fluid is a bootstrap class and container-fluid just adds padding:
.container-fluid {
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
Faddah Wolf
@faddah
Feb 04 2017 06:43 UTC
@SkyCoder01 - per the Bootstrap Jumbotron documenation, .jumbotron-fluid is what you add to .jumbotron to have it extend to both sides, left & right of the window with no rounded corners. see — https://v4-alpha.getbootstrap.com/components/jumbotron/
@SkyCoder01 - i will try what you suggest in the code sample above, however.
Gulsvi
@gulsvi
Feb 04 2017 06:44 UTC
image.png
You aren't using v4 bootstrap though
Faddah Wolf
@faddah
Feb 04 2017 06:45 UTC
ah, so use v4?
Gulsvi
@gulsvi
Feb 04 2017 06:45 UTC
I don't know much about v4 bootstrap, but I guess it's in alpha - maybe better to stick with the v3 documentation for now: https://getbootstrap.com/css
Until v4 is ready for production anyway
Faddah Wolf
@faddah
Feb 04 2017 06:46 UTC
i'll give that a try, @SkyCoder01. thank you.
CamperBot
@camperbot
Feb 04 2017 06:46 UTC
faddah sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:warning: faddah already gave skycoder01 points
Gulsvi
@gulsvi
Feb 04 2017 06:46 UTC
Good luck :+1:
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 04 2017 07:06 UTC
could someone help me with tic-tac-toe ?/
Faddah Wolf
@faddah
Feb 04 2017 07:09 UTC
@Mr-Kumar-Abhishek sure - i take center square to start, 'X' - your movel 😜
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 04 2017 07:11 UTC
@faddah lol could you tell me how to approach to give the feature of giving option to choose from 'x' and 'o' ? https://mr-kumar-abhishek.github.io/tic-tac-toe/
Chase
@Athabasco
Feb 04 2017 07:14 UTC
Why won't my tweet function tweet the newest quote, but only the first one loaded?
Go to the pen itself andlook at my JS.
http://codepen.io/Athabasco/pen/LxeMEX
Faddah Wolf
@faddah
Feb 04 2017 07:15 UTC
well, heuristically @Mr-Kumar-Abhishek , i would, on loading the screen, present the user with the choice in a dialogue, they choose 'X' or 'O', you make that a variable that gets loaded throughout your existing application, and go from there.
@Mr-Kumar-Abhishek - the web app is written in JavaScript, i take it?
Abhishek Kumar
@Mr-Kumar-Abhishek
Feb 04 2017 07:17 UTC
@faddah yes, I am just looking an easier way to implement the UIs
@faddah yes, I am just looking for* an easier way to implement the UIs
Sorin Ruse
@sorinr
Feb 04 2017 07:26 UTC
@Athabasco make your var qTweet=''; global just after var url and in click event just use it like $("#clickHere").text(qLink.quoteText); qTweet =...... and it will work
Archit Chandra
@architchandra
Feb 04 2017 07:34 UTC

In the JSON exercise: https://www.freecodecamp.com/challenges/convert-json-data-to-html
the code given is this:

<script>
  $(document).ready(function() {

    $("#getMessage").on("click", function() {
      $.getJSON("/json/cats.json", function(json) {
        var html = "";
        // Only change code below this line. 
        json.forEach(function(val) {
  var keys = Object.keys(val);
  html += "<div class = 'cat'>";
  keys.forEach(function(key) {
    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
  });
  html += "</div><br>";
});   
        // Only change code above this line.
        $(".message").html(html);
      });
    });
  });
</script>

In there, a foreach loop is applied to the json variable (which contains the JSON), which is a string type as far as I can understand. From what I know, the foreach loop can only be applied to arrays. This confuses me as I understood a JSON to be a string.

In the previous example too, the JSON is wrapped in square brackets, which I can’t understand. Is JSON an array here?

How are we applying foreach to json, which is not an array?
Chase
@Athabasco
Feb 04 2017 07:37 UTC
@sorinr OK, thanks. Will try it.
CamperBot
@camperbot
Feb 04 2017 07:37 UTC
athabasco sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1153 | @sorinr |http://www.freecodecamp.com/sorinr
Archit Chandra
@architchandra
Feb 04 2017 07:38 UTC

In the previous exercise: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method this is the some of the code that is used:

$("#getMessage").on("click", function(){
      // Only change code below this line.

      $.getJSON("/json/cats.json", function(json){
        $('.message').html(JSON.stringify(json));
      });

      // Only change code above this line.
    });

The output generated is this:

[{"id":0,"imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg","altText":"A white cat wearing a green helmet shaped melon on it's head. ","codeNames":["Juggernaut","Mrs. Wallace","Buttercup"]},{"id":1,"imageLink":"https://s3.amazonaws.com/freecodecamp/grumpy-cat.jpg","altText":"A white cat with blue eys, looking very grumpy. ","codeNames":["Oscar","Scrooge","Tyrion"]},{"id":2,"imageLink":"https://s3.amazonaws.com/freecodecamp/mischievous-cat.jpg","altText":"A ginger cat with one eye closed and mouth in a grin-like expression. Looking very mischievous. ","codeNames":["The Doctor","Loki","Joker"]}]

Doesn’t the stringify method convert a Javascript object into a JSON? So shouldn’t the above output have single quotes instead of square brackets wrapping it?

Please help. This is really confusing me. Thanks.

Chase
@Athabasco
Feb 04 2017 07:41 UTC
@sorinr Yup, making it global worked. Thanks, again.
CamperBot
@camperbot
Feb 04 2017 07:41 UTC
athabasco sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: athabasco already gave sorinr points
Darth Skywalker
@adityaparab
Feb 04 2017 08:07 UTC

@architchandra

A string that is added to the dom doesn't show surrounding quotes (first and last). Any quotes within the string (that are escaped) will be shown though.

Archit Chandra
@architchandra
Feb 04 2017 08:14 UTC
@adityaparab That was dumb on my part. Thanks!
CamperBot
@camperbot
Feb 04 2017 08:14 UTC
architchandra sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 911 | @adityaparab |http://www.freecodecamp.com/adityaparab
Sorin Ruse
@sorinr
Feb 04 2017 08:39 UTC
@Athabasco :+1:
@Athabasco btw add this in css to show that all content including paragraph text is clickable:
#clickHere, #source, .safe1, .safe2{
  cursor: pointer;
}
BoomRaccoon
@BoomRaccoon
Feb 04 2017 09:17 UTC
So I am at the point, where they want me to go to codepen. Do I really have to sign in on another platfrom? I'd prefer to wirte the code in my IDE
Mihai Veronica
@VeronicaM
Feb 04 2017 09:18 UTC
@DatBread you can use github or other code versionning platform and paste the code to your repository on fcc when you are done
codepen it's just an easy option for small projects
buiphuking
@buiphuking
Feb 04 2017 09:26 UTC
help me with cs6 plz, i select a layer and i want to save it as a image, how can i do that?????????????/
Sorin Ruse
@sorinr
Feb 04 2017 09:41 UTC
@DatBread codepen is also useful for sharing your code when you need help
h1tag
@h1tag
Feb 04 2017 09:57 UTC
Hey, I've finished the twitch api project, but I have a problem when I click on the channel status (which is a link to the channel) it opens a new blank browser tab although you can see the url is correct on the browser address bar in this new tab pag. Here's the code: https://codepen.io/FortMax/pen/pRayPQ
Sorin Ruse
@sorinr
Feb 04 2017 10:05 UTC
@fortMaximus its because of codepen sandboxing. don't worry about that. if you copy that opened link in a new tab you will see it works
h1tag
@h1tag
Feb 04 2017 10:08 UTC
Thanks @sorinr :smile:
CamperBot
@camperbot
Feb 04 2017 10:08 UTC
:star2: 1154 | @sorinr |http://www.freecodecamp.com/sorinr
fortmaximus sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
Sorin Ruse
@sorinr
Feb 04 2017 10:08 UTC
@fortMaximus welcome
Muhammad Hasham
@MohammadHasham
Feb 04 2017 10:24 UTC
how can i get the value for a button when clicked because i don't want to make event listener for every button is there a way that a single event listener will do that?
@sorinr
Sorin Ruse
@sorinr
Feb 04 2017 10:30 UTC
@MohammadHasham i would go for distinct ids for each button and use in js something like $('button[id^="id-"]').on('click'..... so i would apply the event to any button that have an id starting with "id-"
Muhammad Hasham
@MohammadHasham
Feb 04 2017 10:31 UTC
can you please give a small example @sorinr Thanks
CamperBot
@camperbot
Feb 04 2017 10:31 UTC
mohammadhasham sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1155 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 04 2017 10:32 UTC
@MohammadHasham just a sec
Muhammad Hasham
@MohammadHasham
Feb 04 2017 10:32 UTC
yeah thanks
Muhammad Hasham
@MohammadHasham
Feb 04 2017 11:12 UTC
@sorinr i figured that one out,Thanks alot :D
FubaraEmpire
@FubaraEmpire
Feb 04 2017 11:21 UTC
Hello
badalsaibo
@heyDante
Feb 04 2017 12:07 UTC
@mml3b FirstLinenewline backslashSecondLinebackslash carriage-returnThirdLine
Mostafa Masri
@thefakeweed
Feb 04 2017 12:07 UTC
var myStr = '\FirstLine \n SecondLine\ \r ThirdLine';
@heyDante
it didnt work :/
badalsaibo
@heyDante
Feb 04 2017 12:08 UTC
after newline there's backslash so it would be \n\\
@mml3b FirstLinenewline backslashSecondLinebackslash carriage-returnThirdLine
Sorin Ruse
@sorinr
Feb 04 2017 12:09 UTC
@MohammadHasham :+1:
badalsaibo
@heyDante
Feb 04 2017 12:09 UTC
just remove the highlighted words with the table they provided @mml3b
Mostafa Masri
@thefakeweed
Feb 04 2017 12:10 UTC
still not working
var myStr = '\FirstLine \n\ \SecondLine\ \r ThirdLine';
badalsaibo
@heyDante
Feb 04 2017 12:11 UTC
@mml3b why are you adding \ at the beginning
@mml3b also after SecondLine you are not adding backslash
Mostafa Masri
@thefakeweed
Feb 04 2017 12:13 UTC
im lost
var myStr = 'FirstLine \n\ \SecondLine \r ThirdLine';
i messed up
badalsaibo
@heyDante
Feb 04 2017 12:13 UTC
myStr="FirstLine\n\\SecondLine\\\rThirdLine";
Mostafa Masri
@thefakeweed
Feb 04 2017 12:16 UTC
now it worked ty
badalsaibo
@heyDante
Feb 04 2017 12:18 UTC
@mml3b FirstLinenewline backslashSecondLinebackslash carriage-returnThirdLine
just replace the highlighted word with their equivalent characters
Mostafa Masri
@thefakeweed
Feb 04 2017 12:19 UTC
Thx mate
kyadondo Timothy
@chadwalt
Feb 04 2017 12:42 UTC
var myStr = "FirstLine \n\ \SecondLine\ \r ThirdLine";
badalsaibo
@heyDante
Feb 04 2017 12:47 UTC
@chadwalt see the discussion above
KaviJo
@KaviJo
Feb 04 2017 13:33 UTC
hello everyone, I am doing the simon game challenege and seem to be stuck after the original animation. I have analysed and console the code but cant find the error. can anyone please take a look?
http://codepen.io/Daemon0205/pen/JEvGza?editors=0011
Meli94
@meli94
Feb 04 2017 14:07 UTC
Hey guys I'm having problem with sharing the quote on twitter, Is there anyone that can tell me what I'm doing wrong? http://codepen.io/Meli94/pen/egVqwK?editors=1010
Pradeep
@PRADEEPGUNDLURU
Feb 04 2017 14:22 UTC
Hey guys I hv learned bootstrap and css to apply free code camp but in codepen io and when am doing my on page in gedit (linux) those arenot working is it that I NEED TO add anything for it pls help me am lot obessed bout it....
Darth Skywalker
@adityaparab
Feb 04 2017 14:34 UTC

@PRADEEPGUNDLURU This might be of some use

https://www.youtube.com/watch?v=Zuu3BTpUwU4&t=26s

Pradeep
@PRADEEPGUNDLURU
Feb 04 2017 14:51 UTC
@adityaparab thanks
CamperBot
@camperbot
Feb 04 2017 14:51 UTC
pradeepgundluru sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 915 | @adityaparab |http://www.freecodecamp.com/adityaparab
kirbyedy
@kirbyedy
Feb 04 2017 15:12 UTC
@adityaparab isnt it easier just to do export to zip on codepen why do it all manually ?
Darth Skywalker
@adityaparab
Feb 04 2017 15:13 UTC
@kirbyedy To understand how the html pages are put together?
Ashish verma
@ashish1500616
Feb 04 2017 15:14 UTC
What exactly happens when we put a div element with absolute position inside a div element with relative position
storbeck
@storbeck
Feb 04 2017 15:15 UTC
@bitian1506 try it and report back
kirbyedy
@kirbyedy
Feb 04 2017 15:15 UTC
@adityaparab the link you sent is just showing how to copy paste the code from codepen to the local machine
dont understand
Darth Skywalker
@adityaparab
Feb 04 2017 15:16 UTC
@kirbyedy Don't worry about it. There are plenty of people who are more than interested in understanding this workflow. :)
kirbyedy
@kirbyedy
Feb 04 2017 15:16 UTC
:)
Ashish verma
@ashish1500616
Feb 04 2017 15:17 UTC
@storbeck I feel difficulties in positioning elements in a web page can u help me with it.
storbeck
@storbeck
Feb 04 2017 15:17 UTC
absolute positions are relative to the parent container with relative positioning
there are to divs that are absolutely positioned, but one is a small square and one is the whole screen
but both share the same class
one is inside a relatively positioned div, so it uses that as the bounds
absolutely positioning things shouldn't be your default method of positioning elements, though. this is usually for one-off things
instead use something like flexbox + margins/padding
Nikita Geibel
@idoubtyoudlikeit
Feb 04 2017 15:27 UTC
hey guys, i have a question about 1st project in codepen. so i should make an info page about any person, am i right?
badalsaibo
@heyDante
Feb 04 2017 15:30 UTC
@idoubtyoudlikeit yep
chris10emery
@chris10emery
Feb 04 2017 15:30 UTC
@idougtyoudlikeit - yes, I did mine on Margaret H Hamilton and referenced interviews, a Wired article & Wikipedia... The research took longer than the coding
sorry @idoubtyoudlikeit - typo
Nikita Geibel
@idoubtyoudlikeit
Feb 04 2017 15:32 UTC
@chris10emery @heyDante ok, thank you guys!
CamperBot
@camperbot
Feb 04 2017 15:32 UTC
idoubtyoudlikeit sends brownie points to @chris10emery and @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 120 | @chris10emery |http://www.freecodecamp.com/chris10emery
:cookie: 382 | @heydante |http://www.freecodecamp.com/heydante
chris10emery
@chris10emery
Feb 04 2017 15:37 UTC
I am working on the Personal Portfolio project and decided to use panels to display my "projects" (tbd). I figured out how to pull a local source/reference for Bootstrap in codepen (vs. the reference in the codecamp instructions) which enabled me to customize the background of the panel titles... But I decided I wanted the panels to all be the same height regardless of the image in the panel. I found a script which ran correctly twice & then stopped. ...Is it the script - or do I need to make a more solid reference to
the panel-body in bootstrap http://codepen.io/chris10emery/pen/ZLaVRm/
Mirko Sorbara
@konV92
Feb 04 2017 15:38 UTC
hi guys I need help with video size in my tribute page. I want the real size width="560" height="315" with the responsive code. This is the pen, you can find the video in the third jumbotron code https://codepen.io/konV/pen/ygKyqz
In this view video is responsive but in full page on desktop the video is larger. Sorry for my english
badalsaibo
@heyDante
Feb 04 2017 15:48 UTC
@konV92 i think thats the default size
Fabio Di Pane
@saylos
Feb 04 2017 15:51 UTC
Ok, I guess I've finished my Wikipedia Viewer, please give a check! Ps. don't know why it finishes to load the right border of the <li> tag only at the end.
http://codepen.io/saylos/pen/ygoGEW?editors=1100
kirbyedy
@kirbyedy
Feb 04 2017 15:53 UTC
Screen Shot 2017-02-04 at 17.52.29.png
@saylos some cosmetics fixing
:D
Mirko Sorbara
@konV92
Feb 04 2017 15:53 UTC
@heyDante before css responsive code video was small at the center of jumbotron
badalsaibo
@heyDante
Feb 04 2017 15:54 UTC
@konV92 maybe jumbotron has something to do with it
Mirko Sorbara
@konV92
Feb 04 2017 16:00 UTC

if I delete this code in css: .video {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
margin: 10px 0;
overflow: hidden;
}

.video iframe {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}

this is the situation @heyDante https://codepen.io/konV/pen/ygKyqz
almaaganovic
@almaaganovic
Feb 04 2017 16:01 UTC
hello. how to add underscore to this regex replace(/\W+/g, '')? my conn went off sorry for repeating.
Mirko Sorbara
@konV92
Feb 04 2017 16:01 UTC
in this resolution the video break the jumbotron but if you open the pen in browser on desktop you can see that the video is small and centered
chris10emery
@chris10emery
Feb 04 2017 16:01 UTC
...I'm going to finish this and move on. There will be plenty of time for me to troubleshoot js -- cheers
Mirko Sorbara
@konV92
Feb 04 2017 16:03 UTC
the problem is in css code for responsive. I tried in many ways but I didn't find the solution
h1tag
@h1tag
Feb 04 2017 16:03 UTC
@almaaganovic google
almaaganovic
@almaaganovic
Feb 04 2017 16:04 UTC
@fortMaximus google doesnt know so I thought you might know
h1tag
@h1tag
Feb 04 2017 16:07 UTC
@almaaganovic are you trying to solve a challenge?
almaaganovic
@almaaganovic
Feb 04 2017 16:11 UTC
@fortMaximus yes. and I cant find anywhere and I cant figure out how to eliminate underscore along with other non alphanumeric
it confuses me how to put both conditions in one regex
h1tag
@h1tag
Feb 04 2017 16:12 UTC
@almaaganovic what's the challenge name?
Ruhul amin
@Ruhulcse
Feb 04 2017 16:12 UTC
hi
Amol Borkar
@Amminexx
Feb 04 2017 16:12 UTC
can someone here help me with a little bit of js?
Fabio Di Pane
@saylos
Feb 04 2017 16:13 UTC
@kirbyedy I don't have that result, when appens to you?
almaaganovic
@almaaganovic
Feb 04 2017 16:13 UTC
check for pallindromes
kirbyedy
@kirbyedy
Feb 04 2017 16:13 UTC
@saylos as I open your pen, all the time
emamadordev
@emamadordev
Feb 04 2017 16:16 UTC
what's up my peeps? quick question: is there a way to be able to see the array symbols [ ] in the console? I can't see it when console logging arrays.
Fabio Di Pane
@saylos
Feb 04 2017 16:18 UTC
@kirbyedy I really can't see it. I'd like to fix it but if I can't see my modfications..
@konV92 non sei Italiano immagino :smile:
Mirko Sorbara
@konV92
Feb 04 2017 16:20 UTC
@saylos chi io? no :smile:
h1tag
@h1tag
Feb 04 2017 16:22 UTC
@almaaganovic can you think of another way to solve it?
a much easier way
Pieter Stokkink
@forkerino
Feb 04 2017 16:24 UTC
@Amminexx shoot
Fabio Di Pane
@saylos
Feb 04 2017 16:25 UTC
@konV92 hai iniziato da poco con FCC
?
Amol Borkar
@Amminexx
Feb 04 2017 16:25 UTC
@forkerino want to play shake animation when i hover over a button, check this https://codepen.io/Amminexx/pen/mRLZrW
Mirko Sorbara
@konV92
Feb 04 2017 16:26 UTC
@saylos si neanche una settimana
almaaganovic
@almaaganovic
Feb 04 2017 16:26 UTC
@fortMaximus the first thing I have to do is to remove all non alphanumeric chars, how to do that without regex?
Pieter Stokkink
@forkerino
Feb 04 2017 16:28 UTC
@Amminexx why would you use JS for that?
Fabio Di Pane
@saylos
Feb 04 2017 16:28 UTC
@konV92 è ottimo, ho usato anche codeaccademy ma questo è decisamente meglio, ti forza a metterci subito mani
Amol Borkar
@Amminexx
Feb 04 2017 16:29 UTC
i know it can be done with just css, i did some jquery challenges today, wanted to apply some of it here lol @forkerino
Pieter Stokkink
@forkerino
Feb 04 2017 16:30 UTC
@Amminexx you mean like this? https://api.jqueryui.com/shake-effect/
Just to be sure: jQuery UI is a different library than just jQuery.
Mirko Sorbara
@konV92
Feb 04 2017 16:30 UTC
@saylos esatto, anche io in passato ne ho provati altri infatti avevo già un'infarinatura generale ma il fatto che impari costruendo cose effettivamente utili che non sono il classico hello world è ottimo. Ho compreso una logica che prima non riuscivo a cogliere e alla fine a parte la sintassi quando avevo un'idea mi perdevo senza sapere come realizzarla. Anche la community il fatto di poter consultare centinaia di codici è favoloso.
Amol Borkar
@Amminexx
Feb 04 2017 16:31 UTC
@forkerino oh, i wanted to use animated.css's shake animation with jquery, i'm doing it all wrong
Pieter Stokkink
@forkerino
Feb 04 2017 16:32 UTC
@Amminexx I thought you said you wanted to do it without css. ?
btw using js to animate things while you could just do it with css is a serious performance issue.
Fabio Di Pane
@saylos
Feb 04 2017 16:33 UTC
@konV92 si, impari molto più velocemente e nel frattempo ti crei anche un portfolio
h1tag
@h1tag
Feb 04 2017 16:34 UTC
@almaaganovic no, use regex but instead of removing all non-alphanumeric characters one by one, there's an easier, reversed way
Mirko Sorbara
@konV92
Feb 04 2017 16:34 UTC
@saylos ti ho seguito su codepen! Tu da quanto sei qui?
Fabio Di Pane
@saylos
Feb 04 2017 16:36 UTC
@konV92 ho iniziato a metà dell'anno scorso, purtroppo non in maniera intensiva per lavoro e robe varie
Mirko Sorbara
@konV92
Feb 04 2017 16:38 UTC
@saylos vedo che anche tu sei un web marketer :smile: ti ho chiesto il collegamento linkedin. Hai già completato tutta la certificazione front end?
Robin
@LuckyRabbits
Feb 04 2017 16:49 UTC
Hey hey Free Code Campers. I need your help! My navigation bar turns partially transparent when the body paragraph scrolls underneath. E.G. you can see thetext underneath. I don't want the text to show underneath the navbar when you scroll. Any thoughts on how to solve this? Here is a link to my code: http://codepen.io/luckyrabbit/pen/ygENXz?editors=1100
kirbyedy
@kirbyedy
Feb 04 2017 16:55 UTC
@LuckyRabbits most probably you have transparency set on you navbar background colour
@LuckyRabbits or try adding z-index: 999; to the header
Robin
@LuckyRabbits
Feb 04 2017 17:11 UTC
@kirbyedy You. Are. The. Best. Thank you! adding a z-index: 999; to the css header resolved the transparency.
CamperBot
@camperbot
Feb 04 2017 17:11 UTC
luckyrabbits sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1738 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
Fabio Di Pane
@saylos
Feb 04 2017 17:12 UTC
@konV92 si l'ho fatto per un periodo, adesso mi voglio dedicare solo alla programmazione. No ancora non l'ho completata, sono arrivato ad una sfilza di challenge che a poco a poco sto finendo, poi di nuovo algoritmi e dovrei esserci.
Mostafa Masri
@thefakeweed
Feb 04 2017 17:36 UTC
hey guys can you help me with this ?
var myStr="This is the first sentence."+="This is the second sentence.";
im pretty sure my code is correct but for some reason im unable to pass the challenge
Vasile Botnaru
@VasileBotnaru
Feb 04 2017 17:52 UTC

@mml3b
var myStr="This is the first sentence.";
myStr += "This is the second sentence.";

next time read carefully - it's said over several lines

Mostafa Masri
@thefakeweed
Feb 04 2017 17:52 UTC
@VasileBotnaru Yeah man thx it worked a while ago
CamperBot
@camperbot
Feb 04 2017 17:52 UTC
mml3b sends brownie points to @vasilebotnaru :sparkles: :thumbsup: :sparkles:
:cookie: 256 | @vasilebotnaru |http://www.freecodecamp.com/vasilebotnaru
Muhammad Hasham
@MohammadHasham
Feb 04 2017 19:02 UTC
how to add a click listener with simple javascript (no jquery) that when something other than my dropdown menu is clicked the dropdown menu disappears ?
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:12 UTC
@MohammadHasham You would need to use :not, something like:
document.querySelector("div:not([your menu class name])").addEventListener('click', function() {//hide your dropdown})
Muhammad Hasham
@MohammadHasham
Feb 04 2017 19:12 UTC
@TylerMoeller Thanks.
CamperBot
@camperbot
Feb 04 2017 19:12 UTC
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1449 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Or Halimi
@orhalimi
Feb 04 2017 19:15 UTC
guys do you recommend any resources to get better at css?
Nikki L.R.
@nikkilr88
Feb 04 2017 19:20 UTC
Is anyone around? I have a question about jQuery parallax scrolling.
Nikki L.R.
@nikkilr88
Feb 04 2017 19:26 UTC
@orhalimi W3Schools and YouTube tutorials. That's what I do.
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:29 UTC
I might be able to help @nikkilr88
Nikki L.R.
@nikkilr88
Feb 04 2017 19:34 UTC
Hi! @TylerMoeller I was just wondering how to start with the values set in my css...
This are kind of messed up now. The computer picture is supposed to be higher up
I can't figure out how to adjust it now.
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:35 UTC
@nikkilr88 It may depend on how you want to implement parallax - lots of libraries out there with different approaches.
Nikki L.R.
@nikkilr88
Feb 04 2017 19:36 UTC
Well, I have the scrolling working. I just want to adjust the starting position of my picture now.
:D
Icah Banton
@remdata
Feb 04 2017 19:41 UTC
Hello. I am trying to layout my Twitch.tv project. Can someone please tell me why I am getting gaps between my buttons? https://codepen.io/ibanton/pen/LxmZZZ
Nikki L.R.
@nikkilr88
Feb 04 2017 19:43 UTC
@TylerMoeller It seems the jQuery overrides the CSS . Is there a way to set in right in the script?
 $('.header').css('background-position', '0 ' +  -currScrollPos/4 + 'px');
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:45 UTC
@nikkilr88 You can use .scrollTop() like you're already doing to set it back to the value you want when you are at the top of the page
Nikki L.R.
@nikkilr88
Feb 04 2017 19:51 UTC
@TylerMoeller Ok, I got that working... but now it just snaps back into place. I already have transition speed set on that element for something else.
Is there any way to fix that and make it smoother?
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:52 UTC
@nikkilr88 Hmm, I'm not noticing that. What browser are you using?
I know that parallax technique won't work on all browsers - fixed position backgrounds don't work well on mobile in particular
Nikki L.R.
@nikkilr88
Feb 04 2017 19:54 UTC
Chrome
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:54 UTC
By the way, I just realized you got that image from unsplash - you can play around with the image dimensions with an URL like:
https://source.unsplash.com/tAKXap853rY/1600x800
Just specify the size you want at the end of the URL
Unsplash is a great API :)
I'm using Chrome too and don't notice it snapping back
Nikki L.R.
@nikkilr88
Feb 04 2017 19:55 UTC
Hmmmm... Thanks! I didn't know. Well, I'm just going to leave it how it is for now.
Well, I didn't save it
It looks better how it is now. :D
I guess I can just crop the photo.
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:56 UTC
@nikkilr88 It looks distorted on smaller screens right now, something to consider
blob
Nikki L.R.
@nikkilr88
Feb 04 2017 19:57 UTC
I really have no idea how to fix that. :D
Tyler Moeller
@TylerMoeller
Feb 04 2017 19:59 UTC
@nikkilr88 That's where you would have to use background-size: cover; and choose the right image size for the various screen sizes
And an appropriate left/right position. If you want to get it perfect, you can use the usnplash api to call up the image size you need based on window width
Nikki L.R.
@nikkilr88
Feb 04 2017 20:01 UTC
I am quite new at this... Haha. I will write that down and google it. :) Thanks!
Ah, I think I got it
Well, not the positioning, but it looks better.
Tyler Moeller
@TylerMoeller
Feb 04 2017 20:21 UTC
@remdata There are gaps between your buttons because bootstrap columns have 15px of padding on each side.
{
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
}
Add a no-padding class to the columns where you don't want padding and define .no-padding {padding: 0;} in your CSS
Icah Banton
@remdata
Feb 04 2017 20:28 UTC
@TylerMoeller . Thanks. I will have to remember that in the future.
CamperBot
@camperbot
Feb 04 2017 20:28 UTC
remdata sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1450 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Parminder Sanghera
@parmsang
Feb 04 2017 20:41 UTC
hi - whats the best way to handle keystrokes in react (window)
aRtoo
@artoodeeto
Feb 04 2017 20:45 UTC
hi guys how to you center an image on bootstrap?? is it still the class "text-center" or its different on the images???
Waqas Abbasi
@Waqas909
Feb 04 2017 20:55 UTC
Hello Guys

Can someone help me :P

http://codepen.io/Waqas909/pen/OWENwR?editors=1100

My Equal Button is pushing my other button downwards because in the HTML code, they come after the equal button.

How could I fix this? I know the problem, But is there a way to fix them from going downwards of the calculator?

Tyler Moeller
@TylerMoeller
Feb 04 2017 20:57 UTC
@artoodeeto use the center-block class on the <img> element or put the <img> element in a <div> and use the text-center class on the <div>
In bootstrap v4, use the classes mx-auto d-block on the <img> element
aRtoo
@artoodeeto
Feb 04 2017 20:58 UTC
@TylerMoeller thank you. i got it. it wasnt responding on my center-block because i had set a margin on the css. thank sir.
CamperBot
@camperbot
Feb 04 2017 20:58 UTC
artoodeeto sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1451 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 04 2017 21:03 UTC
@Waqas909 Try using display: inline-block on all of your keys and then reduce the width of each of your keys to get them back to 4 per row.
This improves it a bit if you add the .Key class to all of your keys:
.Key{
  display: inline-block;
  height: 50px;
  width: 67px;
Then re-order your keys the way you want after that :)
Waqas Abbasi
@Waqas909
Feb 04 2017 21:09 UTC
@TylerMoeller See the thing is, For the last row, I want only 3 keys. 0 (I want 0 to be double the width) ( ".") and ( "= and to be double the height")
Tyler Moeller
@TylerMoeller
Feb 04 2017 21:10 UTC

Okay, add a equals class to the = button and do this:

.equals {
  position: absolute;
  top: 205px;
  left: 260px;
  min-height: 115px;
}

@Waqas909

play around with the pixels to get it lined up just right
Waqas Abbasi
@Waqas909
Feb 04 2017 21:12 UTC
@TylerMoeller Thank you, It aligned perfectly :)
CamperBot
@camperbot
Feb 04 2017 21:12 UTC
waqas909 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1452 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Waqas Abbasi
@Waqas909
Feb 04 2017 21:12 UTC
nvm I need to align it
Tyler Moeller
@TylerMoeller
Feb 04 2017 21:13 UTC
Yeah, the . button is a little off and the = button is a little too wide, just by a few pixels
Tony
@FreakishLancer
Feb 04 2017 21:25 UTC
Does anyone know how to append what is in the HTML of a clicked element to a specified element?
Tyler Moeller
@TylerMoeller
Feb 04 2017 21:28 UTC
@FreakishLancer If you have a pen, I could show something more specific, but in general:
$('clickedElement').on('click', function() {
  $('otherElement').append($(this).html());
});
Tony
@FreakishLancer
Feb 04 2017 21:28 UTC
@TylerMoeller Thanks! Just what I was looking for. I'll remember to show you how it works once I finish my pen.
CamperBot
@camperbot
Feb 04 2017 21:28 UTC
freakishlancer sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1453 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Ian
@ikilpat
Feb 04 2017 22:06 UTC
Hey ya'll great to be here. I'm trying to figure out how to make the margins on my tribute page go away when it gets to a mobile width to make it easier to read on a small screen. As it is, they just smash down. I'm very new to this so any help is greatly appreciated. http://codepen.io/ikilpat/pen/WRyGbm
taltmann42
@taltmann42
Feb 04 2017 22:09 UTC
@ikilpat for that you have to make use of media queries (https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries ).
You define breakpoints and write the CSS inside which gets applied if the rules in the media queries apply. For mobile pages a breakpoint of 500px may be a good choice, but you can adjust it to your needs.
Ian
@ikilpat
Feb 04 2017 22:11 UTC
@taltmann42 Thank you very much. I will read up about media queries.
CamperBot
@camperbot
Feb 04 2017 22:11 UTC
ikilpat sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 455 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:11 UTC
@ikilpat For another approach, use the .container class instead of .container-fluid - no need to specify a width in your CSS, it will automatically adjust for you based on screen size.
Ian
@ikilpat
Feb 04 2017 22:14 UTC
@TylerMoeller Even easier. Just changed to .container and took away width in CSS and it worked. Thanks much!
CamperBot
@camperbot
Feb 04 2017 22:14 UTC
ikilpat sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1454 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tony
@FreakishLancer
Feb 04 2017 22:14 UTC
@TylerMoeller Hmm...I've tried a few other different methods including what you suggested, but I can't seem to get the numbers to appear on the screen. http://codepen.io/Freaklancer/pen/NdzRxJ What am I doing wrong?
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:15 UTC
I'll take a look, brb
Tony
@FreakishLancer
Feb 04 2017 22:15 UTC
I've tried appendTo() $(this).html() append() .attr() etc. There has to be something I'm missing.
taltmann42
@taltmann42
Feb 04 2017 22:17 UTC
@FreakishLancer Ah you are using the => notation for functions. This keeps the this in the scope of where the function is called from. In your case, using an anonymous function would work better, because then this refers to the actually clicked element
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:18 UTC
@FreakishLancer When you use arrow notation the this keyword doesn't work the same.
    $("button:not(#calc-screen, .operation)").on("click", (e) => {
        $('#calc-screen').append($(e.target).text())
    });
Need to use e.target instead
Tony
@FreakishLancer
Feb 04 2017 22:19 UTC
@taltmann42 @TylerMoeller Thanks for the explanation. I always had trouble with this.
CamperBot
@camperbot
Feb 04 2017 22:19 UTC
freakishlancer sends brownie points to @taltmann42 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: freakishlancer already gave tylermoeller points
:cookie: 456 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:19 UTC
@FreakishLancer code below does the same thing for comparison:
$(document).ready(() => {
    $("button:not(#calc-screen, .operation)").on("click", function() {
        $('#calc-screen').append($(this).text())
    });
});
Tony
@FreakishLancer
Feb 04 2017 22:20 UTC
I can see how usage of arrow functions might screw me over if I'm not careful!
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:20 UTC
They look so nice though ;)
aRtoo
@artoodeeto
Feb 04 2017 22:41 UTC
hey guys. need help for bootstrap. i hav a nav bar that i want to be fixed top. but when i use the bootstrap navbar-fixed-top i can scroll my page. this is for my portfolio. heres the code pen. http://codepen.io/artoo/pen/VPdKzX. Thank you so much
taltmann42
@taltmann42
Feb 04 2017 22:42 UTC
@artoodeeto you never close your nav tag, so the browser thinks all the content is inside that nav
aRtoo
@artoodeeto
Feb 04 2017 22:43 UTC
@taltmann42 theres closing tag at the bottom man.
taltmann42
@taltmann42
Feb 04 2017 22:43 UTC
@artoodeeto man, that's not how you do this
@artoodeeto the navigation should be in the nav tag, not the content
@artoodeeto having fixed elements will pin them to the viewport. Your complete page is fixed due to the large nav-tag, so even if you'd be able to scroll you'll see the same part of the page
aRtoo
@artoodeeto
Feb 04 2017 22:45 UTC
@taltmann42 ohh. isee what you mean. their. ill try to fix it
@taltmann42 wait bro
taltmann42
@taltmann42
Feb 04 2017 22:46 UTC
@artoodeeto going from "sir" to "man/pro" quite quickly ;)
aRtoo
@artoodeeto
Feb 04 2017 22:46 UTC
@taltmann42 i fixed it but with your help man. thanks
CamperBot
@camperbot
Feb 04 2017 22:46 UTC
artoodeeto sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 457 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Hello911
@Hello911
Feb 04 2017 22:46 UTC
var x=new Boolean('false');
if (x){
//code executed;
}
What is the point of Boolean object? I know it is a object wrapper for boolean value. But what does it mean?
aRtoo
@artoodeeto
Feb 04 2017 22:46 UTC
@taltmann42 what??
@taltmann42 ohh i remembered. called you sir before. haha. thank you again sir!!! hugsss!!
CamperBot
@camperbot
Feb 04 2017 22:47 UTC
artoodeeto sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: artoodeeto already gave taltmann42 points
Tony
@FreakishLancer
Feb 04 2017 22:50 UTC
There has to be an easy way to vertically center a div in CSS.
I've googled for a half an hour.
Still can't find the answer. -_-"
This is annoying.
taltmann42
@taltmann42
Feb 04 2017 22:51 UTC
@FreakishLancer you're lucky there's CSS3 out there. Now it's easy with the use of flexbox. Previously you'd need to write JS to do that
Tony
@FreakishLancer
Feb 04 2017 22:52 UTC
I've read through that and still can't find the answer through all that mess.
taltmann42
@taltmann42
Feb 04 2017 22:53 UTC
@FreakishLancer it's on the left side under align-items
Reggie
@Reggie01
Feb 04 2017 22:53 UTC
@FreakishLancer center elements in css
Tony
@FreakishLancer
Feb 04 2017 22:56 UTC
Still can't.
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:56 UTC
@FreakishLancer If this is for your calculator, wrap your calculator in a div and apply this CSS:
.wrapper {
  height: 100vh;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
Tony
@FreakishLancer
Feb 04 2017 22:56 UTC
I've tried position: relative in container div and position: absolute in content div
Everything.
I'll try that @TylerMoeller
Tyler Moeller
@TylerMoeller
Feb 04 2017 22:57 UTC
Flex is probably the easiest way to do it, but I don't think it'll work on IE9 or lower, if you care about that
Tony
@FreakishLancer
Feb 04 2017 23:00 UTC
@TylerMoeller Thanks so much! I didn't have the height property set to anything and that probably screwed me over.
CamperBot
@camperbot
Feb 04 2017 23:00 UTC
freakishlancer sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1455 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:01 UTC
No problem :+1:
Hello911
@Hello911
Feb 04 2017 23:01 UTC
var x=Boolean(expression);//A
var x=new Boolean(expression);//B
What is the difference between A and B? Well, I know in B, var x is created as an instance of Boolean(expression). And (I am assuming) Boolean(expression) returns true(?). But what does each mean?
Tony
@FreakishLancer
Feb 04 2017 23:02 UTC
Seems to work fine in the browsers I've checked, even without the vendor prefixes. Although I will probably get another headache if I try to get it to work for every IE version. @TylerMoeller
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:03 UTC
lol, true. I use it a lot and haven't hit any big problems. It's a copy/paste from Materialize CSS' .valign-wrapper class
Chase
@Athabasco
Feb 04 2017 23:04 UTC
I'm trying to finish the local weather project, but it won't connect to the API when I'm on https, but when I'm using http it doesn't get location. Help?
Tony
@FreakishLancer
Feb 04 2017 23:05 UTC
@Athabasco The Open Weather API doesn't accept https requests, I believe.
@TylerMoeller Thanks for the link. I hope it'll help me in the near future!
CamperBot
@camperbot
Feb 04 2017 23:05 UTC
freakishlancer sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: freakishlancer already gave tylermoeller points
Chase
@Athabasco
Feb 04 2017 23:05 UTC
@FreakishLancer And my browser prevents me from getting my own location on http?
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:05 UTC
@Athabasco That's a common problem unfortunately. You will need to use a different weather API or an IP-based location API. Some people use proxies, but I don't personally recommend those. Read here for background: FreeCodeCamp/FreeCodeCamp#7853
Tony
@FreakishLancer
Feb 04 2017 23:07 UTC
@Athabasco Some browsers don't respond well with Navigator.geolocation. For that project, I used IPInfo.io for geolocation and APIXU for the weather API.
Chase
@Athabasco
Feb 04 2017 23:08 UTC
IPinfo.io hmm
Tony
@FreakishLancer
Feb 04 2017 23:09 UTC
It's not as sketchy as it seems. Only you can see your IP, if that's what you're worried about.
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:09 UTC
Here's an example of trying navigator.geolocation first, then falling back to ipinfo.io if that fails: http://s.codepen.io/TylerMoeller/pen/XNvJzy
load it over HTTP/HTTPS and you'll see it works either way - but yeah, if you're using openweathermap, just don't use navigator.geolocation :)
Chase
@Athabasco
Feb 04 2017 23:10 UTC
I'll probably use ipinfo
Tony
@FreakishLancer
Feb 04 2017 23:11 UTC
You need a subscription plan to get https requests with Open Weather though.
Chase
@Athabasco
Feb 04 2017 23:12 UTC
yeah thanks @FreakishLancer @TylerMoeller
CamperBot
@camperbot
Feb 04 2017 23:12 UTC
athabasco sends brownie points to @freakishlancer and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
:star2: 1456 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Robin
@LuckyRabbits
Feb 04 2017 23:21 UTC
Question. Can you link bootstrap buttons to a section within the same page? I'm able to get it to work with a Fixed Navbar but not on Bootstrap buttons.
Nikki L.R.
@nikkilr88
Feb 04 2017 23:24 UTC
Could anyone tell me why this isn't working? The navbar is supposed to collapse on smaller screens and a button pops up opening the menu. The button doesn't seem to work. http://codepen.io/nikkilr88/pen/ygEJMQ
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:27 UTC
@LuckyRabbits Yes, it should be possible. If you have a codepen link, we can take a closer look
@nikkilr88 Make sure you have jQuery and bootstrap.min.js (v3.3.7) not v4.0 loaded in your codepen settings
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:27 UTC
blob
@LuckyRabbits The <a> tag can't go inside a <button> or vice-versa.

Instead of this:

<button><a target="_blank" href="#portfolio"></a>Portfolio</button>

Just do:

<a class="btn btn-default" href="#portfolio">Portfolio</a>
Robin
@LuckyRabbits
Feb 04 2017 23:30 UTC
Well, if they cannot be nested within one another than were?
@TylerMoeller lol
Oh..ok. I'll try that.
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:32 UTC
Don't forget to add bootstrap to your project: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Nikki L.R.
@nikkilr88
Feb 04 2017 23:32 UTC
@TylerMoeller Ok, I think I got it, but it is still not working.
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:32 UTC
Otherwise, you'll have to style your <a> tag like a button
@nikkilr88 You have the .css not the .js added: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js
^^ Use that link in your codepen JS settings
Nikki L.R.
@nikkilr88
Feb 04 2017 23:34 UTC
Got it! Thanks!
Robin
@LuckyRabbits
Feb 04 2017 23:37 UTC
Humm @TylerMoeller When I use that line of code: <a class="btn btn-default" target="_blank" href="#portfolio">Portfolio</a> it opens in a new tab :(
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:37 UTC
@LuckyRabbits I was just going to say - I didn't catch that and edited the code above. Only use target="_blank" if you want the link to open in a new tab
So, remove that from in-page links
Like this:
  <a target="_blank" class="btn btn-default" href="https://twitter.com/queensedeen">
    <i class="fa fa-twitter-square"></i> Twitter
  </a>
  <a target="_blank" class="btn btn-default" href="https://www.linkedin.com/in/robin-kovzelove-b51b3515/">
    <i class="fa fa-linkedin-square"></i> LinkedIn
  </a>
  <a class="btn btn-default" href="#about">About</a>
  <a class="btn btn-default" href="#portfolio">Portfolio</a>
Robin
@LuckyRabbits
Feb 04 2017 23:39 UTC
@TylerMoeller Thank you so much for taking the time to explain that. :)
CamperBot
@camperbot
Feb 04 2017 23:39 UTC
luckyrabbits sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1457 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:40 UTC
@LuckyRabbits No problem. To save you some headaches, it looks like you added an alpha version of bootstrap to your project. We don't learn that at Free Code Camp, so you might want to replace it with v3.3.7: https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
ptarus
@ptarus
Feb 04 2017 23:40 UTC
hey everyone, having trouble centering an image on my tribute page.
I got all my text where it needs to be with center-text, but I just can't seem to figure out how to move my image to the center
Rav404
@Rav404
Feb 04 2017 23:40 UTC
@ptarus link
Robin
@LuckyRabbits
Feb 04 2017 23:40 UTC
Done and done.
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:41 UTC
<div class="text-center"><img></div>
or
<img class="center-block">
ptarus
@ptarus
Feb 04 2017 23:41 UTC
omg class! derp. thanks!
img*
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:42 UTC
lol, no traumatizing cats with cucumbers please :)
ptarus
@ptarus
Feb 04 2017 23:46 UTC

oh I would never :P haha

also I have no idea how to send brownie points for the help. This is my first time on the chat

Rav404
@Rav404
Feb 04 2017 23:48 UTC
@ptarus you tag the person by clicking on their name and say the word "thanks"
Na-Ya
@Na-Ya
Feb 04 2017 23:50 UTC
Hi, I just started my portfolio page on codepen and I added a bootstrap navbar but it doesn't seem to look right...any ideas what I am doing wrong? http://codepen.io/Na-Ya/pen/ygEadg
ptarus
@ptarus
Feb 04 2017 23:50 UTC
@TylerMoeller thanks
CamperBot
@camperbot
Feb 04 2017 23:50 UTC
ptarus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1458 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ptarus
@ptarus
Feb 04 2017 23:51 UTC
also, @Rav404 thanks
lol
CamperBot
@camperbot
Feb 04 2017 23:51 UTC
ptarus sends brownie points to @rav404 :sparkles: :thumbsup: :sparkles:
:cookie: 306 | @rav404 |http://www.freecodecamp.com/rav404
Rav404
@Rav404
Feb 04 2017 23:51 UTC
@Na-Ya whats wrong with it?
Na-Ya
@Na-Ya
Feb 04 2017 23:52 UTC
It looks like a few links stacked vertically
Rav404
@Rav404
Feb 04 2017 23:53 UTC
yeah thats cause it is xD
Im guessing you want a horizontally aligned nav bar?
Na-Ya
@Na-Ya
Feb 04 2017 23:53 UTC
Yeah
Rav404
@Rav404
Feb 04 2017 23:54 UTC
class="pull-right"
try that
Na-Ya
@Na-Ya
Feb 04 2017 23:54 UTC
I thought thats what it was from the examples on w3schools
LemuelReyes
@LemuelReyes
Feb 04 2017 23:54 UTC
Hello fellow campers, I am having trouble getting my navbar to work in mobile version. I've been at it for an hour trying to fix it, I ran the code through html/css validators, looked at my commits in github, and more but nothing. could I get some assistance as to why it is? this is my page https://lemuelreyes.github.io/Portfolio/
Na-Ya
@Na-Ya
Feb 04 2017 23:55 UTC
@Rav404 on the nav element?
Rav404
@Rav404
Feb 04 2017 23:56 UTC
on the li
Na-Ya
@Na-Ya
Feb 04 2017 23:57 UTC
no luck
I'm not sure whats up, I tried the same navbar from here http://www.w3schools.com/bootstrap/bootstrap_navbar.asp
Rav404
@Rav404
Feb 04 2017 23:59 UTC
you shouldn't copy nav bars you should try make them yourself
Tyler Moeller
@TylerMoeller
Feb 04 2017 23:59 UTC
@Rav404 @Na-Ya Check the bootstrap version - looks like you have v4 alpha instead of v3.3.7