These are chat archives for FreeCodeCamp/HelpFrontEnd

3rd
Jan 2017
Ian Lee
@asparism
Jan 03 2017 00:28
does anyone know why none of the javascript click events are working in this codepen? https://codepen.io/Asparism/pen/ygBORr?editors=1010
uriznik
@uriznik
Jan 03 2017 00:36
@asparism seems to be the z-index on the selectScreen div
Ian Lee
@asparism
Jan 03 2017 00:39
thanks a ton @uriznik
CamperBot
@camperbot
Jan 03 2017 00:39
:cookie: 431 | @uriznik |http://www.freecodecamp.com/uriznik
asparism sends brownie points to @uriznik :sparkles: :thumbsup: :sparkles:
Bobby McCree III
@mccreeb2
Jan 03 2017 00:51
Anybody know how to get rid of white space on the right side of one's page? Using bootstrap's container-flyid class, and there rows, I encompassed some images within those two classes. My nav bar is at full width, stretching across the page, but my images are not. Any tips?
Christopher Ryder
@cryder9898
Jan 03 2017 00:57
Hello all, I need some help on the weather app
MIke
@chipotle298
Jan 03 2017 00:59
can someone tell me why my video is not playing (below)?
Christopher Ryder
@cryder9898
Jan 03 2017 01:02
I cannot use navigator to produce a valid location because of security reasons, apparently. What is the next best method to do this?
Matthew Bailin
@mdbailin
Jan 03 2017 01:08
@chipotle298 I would use a Youtube embed as Comedy Central's videos require a login and therefore can't be accessed publicly
MIke
@chipotle298
Jan 03 2017 01:08
@mdbailin k thanks
CamperBot
@camperbot
Jan 03 2017 01:08
:cookie: 305 | @mdbailin |http://www.freecodecamp.com/mdbailin
chipotle298 sends brownie points to @mdbailin :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Jan 03 2017 01:09
@cryder9898 you can use IP-based location if navigator.geolocation fails to get location. Here's an example: http://s.codepen.io/TylerMoeller/pen/XNvJzy?editors=1010
Bobby McCree III
@mccreeb2
Jan 03 2017 01:09
Can anyone help?
Tyler Moeller
@TylerMoeller
Jan 03 2017 01:09
@mccreeb2 Can you show us your code?
Hard to help without seeing what's going on
'''
CamperBot
@camperbot
Jan 03 2017 01:10
:bulb: to format code use backticks! ``` more info
Johnny
@JohnnyBizzel
Jan 03 2017 01:11
@mdbailin Good but not responsive.
Matthew Bailin
@mdbailin
Jan 03 2017 01:11
<iframe src="https://www.youtube.com/embed/3fvfsT3LNNM" width="640" height="360" frameborder="0" allowfullscreen></iframe>
@JohnnyBizzel what are you talking about?
Johnny
@JohnnyBizzel
Jan 03 2017 01:11
@mdbailin The image and the video
Matthew Bailin
@mdbailin
Jan 03 2017 01:11
The pen I posted is someone else's
I was helping them
Johnny
@JohnnyBizzel
Jan 03 2017 01:12
@mdbailin You didn't mention them so I assumed it was yours.
Matthew Bailin
@mdbailin
Jan 03 2017 01:12
@chipotle298 Try using that iframe in your code
haha it's ok bro
but actually I had a question on my simon game if you've gotten that far
Bobby McCree III
@mccreeb2
Jan 03 2017 01:12
<style>
@font-face {
font-family:abeezee;
src: url(ABeeZee-Regular.otf);
} / declares/introduces font /

body {
font-family: abeezee;
} / installs the font /

nav {
border-style: hidden !important;
border-radius: 0 !important;
font-size: 120%;
} / removes the navbar border /

.navbarcolor {
background-color: #63bc66;
} / deals with the nav color /

nav a {
color: rgba(77, 92, 80, 0.83) !important;
} / changes color of all nav text /

.navbar-header a:hover, ul li a:hover {
background-color: #2f6c31 !important;
color: aquamarine !important;
} / creates hover effect for nav links /

#logo {
font-weight: 900;
}

.navbar {
margin-bottom: 0!important; /This got rid of white space between bottom navbar and top div/
}

#bg1 {
background-image: url("chicago.jpg");
min-height: 400px;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
#bg2 {
background-image: url(chicago1.jpg);
min-height: 400px;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
#bg3 {
background-image: url(chicago2.jpg);
min-height: 400px;
background-size: cover;
background-position: center;
background-attachment: fixed;

}
#bg4 {
background-image: url(chicago3.jpeg);
min-height: 400px;
background-size: cover;
background-position: center;
background-attachment: fixed;
}

.cap {
position: relative;
top: 160px;
left: 30%;
text-align: center;
font-size: 400%;
}

.box {
background-color: black;
padding: 18px;
color: aquamarine;
letter-spacing: 10px;
border-radius: 6px;
}

</style>
</head>
<body>

    <nav class="navbar navbar-default navbarcolor navbar-fixed-top">
        <div class="container-fluid">
        <!--navbar header creates logo-->
            <div class="navbar-header">
                <a href="#home" class="navbar-brand"><span id="logo">RisingCoder</span></a>
            </div>
        <!--navbar header creates logo-->
        <!--menu items for navbar-->
        <div>
            <ul class="nav navbar-nav">
                <li class="active"><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
                <!--Sets up a dropdown menu for nav bar-->
                <li class="dropdown">
                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Social Media <span class="caret"></span></a>
                    <ul class="dropdown-menu">
                        <li><a href="#facebook">Facebook</a></li> 
                        <li><a href="#twitter">Twitter</a></li>
                        <li><a href="#instagram">Instagram</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        </div>
    </nav>
    <!--^^^^^^^Finished the navagation menu above^^^^^^-->
    <div class="container-fluid">
        <div class="row">
            <div id="bg1">
                <div class="cap"><span class="box">Home</span></div>
            </div>
        </div>
        <div class="row">
            <div id="bg2">
                <div class="cap"><span class="box">About</span></div>
            </div>
        </div>
        <div cl
Christopher Ryder
@cryder9898
Jan 03 2017 01:13
@TylerMoeller thank you, it worked!
CamperBot
@camperbot
Jan 03 2017 01:13
cryder9898 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1248 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Matthew Bailin
@mdbailin
Jan 03 2017 01:14
@JohnnyBizzel Can you help me with my simon game?
MIke
@chipotle298
Jan 03 2017 01:14
@mdbailin when i press play, it just loads. does it play for you?
Matthew Bailin
@mdbailin
Jan 03 2017 01:14
@chipotle298 I just tested it and it plays
show me your code
Johnny
@JohnnyBizzel
Jan 03 2017 01:14
@mdbailin I've not attempted that challenge yet.
Matthew Bailin
@mdbailin
Jan 03 2017 01:15
@JohnnyBizzel Ok then
Christopher Ryder
@cryder9898
Jan 03 2017 01:15
@TylerMoeller you should put that in the forum here Show the Local Weather: OpenWeatherMap Warning
MIke
@chipotle298
Jan 03 2017 01:15
@mdbailin wait a min..........
Tyler Moeller
@TylerMoeller
Jan 03 2017 01:17
@cryder9898 Happy that helped - this one is more robust, just in case one of the IP-based location APIs fails: http://s.codepen.io/TylerMoeller/pen/ZBBEGq
MIke
@chipotle298
Jan 03 2017 01:18
@mdbailin your the bomb!
@mdbailin thanks again
CamperBot
@camperbot
Jan 03 2017 01:18
chipotle298 sends brownie points to @mdbailin :sparkles: :thumbsup: :sparkles:
:warning: chipotle298 already gave mdbailin points
Matthew Bailin
@mdbailin
Jan 03 2017 01:18
@chipotle298 awesome glad I could help
Tyler Moeller
@TylerMoeller
Jan 03 2017 01:18
As for the forum post - it won't help with OpenWeatherMap - to get that working over HTTPS, you'll need to use a different API that supports HTTPS for free, like Weather Underground @cryder9898
Christopher Ryder
@cryder9898
Jan 03 2017 01:20
@TylerMoeller ugh, they need to update the project guidelines then.. so you're saying you cannot use openweathermap for this project?
Tyler Moeller
@TylerMoeller
Jan 03 2017 01:21
@cryder9898 You can use OpenWeatherMap, but your weather app will only work over HTTP. IMO, it's best to use a different API that supports both HTTP and HTTPS.
I agree though - they should update the project guidelines especially since in the forums they talk about how they take security seriously and only use HTTPS for the forums...
Christopher Ryder
@cryder9898
Jan 03 2017 01:27
@TylerMoeller I noticed that
Peter Phillips
@Cowboy59
Jan 03 2017 01:39
where do I get freecodecamp link for my portfolio ?
Peter Phillips
@Cowboy59
Jan 03 2017 01:51
anyone here that can help me ?
Christopher Ryder
@cryder9898
Jan 03 2017 01:52
@Cowboy59 the freecodecamp link?
@Cowboy59 do you mean the link you use to complete the challenge?
Peter Phillips
@Cowboy59
Jan 03 2017 02:07
sorry was afk for a min
no I am trying to insert icon into my button in portfolio for freecodecamp
<i class="fa fa-github" aria-hidden="true"></i>
but its not working
@Cryder9898 you still there?
Peter Phillips
@Cowboy59
Jan 03 2017 02:13
I ment gethub lol
Christopher Ryder
@cryder9898
Jan 03 2017 02:16
@Cowboy59 oh, the freecodecamp icon? use <i class="fa fa-free-code-camp">
@Cowboy59 github is <i class="fa fa-github"></i>
Peter Phillips
@Cowboy59
Jan 03 2017 02:18
<i class="fa fa-github" aria-hidden="true"></i> is what I tried inserted it after http
Christopher Ryder
@cryder9898
Jan 03 2017 02:19
you put that code inside the anchor element<a href="blah><i class="fa fa-github"></i></a>
sorry, <a href="blah.com"><i class="fa fa-github"></i></a>
if that doesnt work maybe you didnt add font awesome correctly in the settings of codepen.io
Peter Phillips
@Cowboy59
Jan 03 2017 02:22
that might be it how do I add it?
Christopher Ryder
@cryder9898
Jan 03 2017 02:23
the classes fa and fa-github are apart of FontAwesome library. you need to load it into your codepen.io in settings of your codepen. the link is //maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css
click on the gear next to the HTML section
Peter Phillips
@Cowboy59
Jan 03 2017 02:23
ok ty
Christopher Ryder
@cryder9898
Jan 03 2017 02:24
@Cowboy59 in settings -> CSS -> add external CSS -> enter the link for FA
Peter Phillips
@Cowboy59
Jan 03 2017 02:25
ok
that was it ty so much been pulling my hair out for over an hour now
Christopher Ryder
@cryder9898
Jan 03 2017 02:29
codepen.io requires a little getting used-to
@Cowboy59 its the same deal with bootstrap library, you have to set it up to use it
@Cowboy59 you can make a really nice website with font awesome and bootstrap together
Skyelar Habberfield
@habberfields
Jan 03 2017 02:56

hey guys! not sure if I'm in the right place... let me know if not? I'm putting together a project for a friend of mine, and am building out our idea with bootstrap. CSS and HTML are probably sloppy af, sorry, moving quick lol... Anyway... question 1: how can I lock the 'h1's' and 'form' in the 'container' in the 'body' in a centered position vertically on the background image? it is set to 100% height, and if the height is too small, my 'h1's' and 'form' slide and collide with other content

http://codepen.io/habberfields/pen/KaKKxK

Jack Lyons
@JackEdwardLyons
Jan 03 2017 02:59
set a width property perhaps @habberfields
form {
  margin-bottom: 5%;
  width: 50%;
  margin: 0 auto;
}
is that what you mean? @habberfields
form input {
  display: block;
  margin: 10px;
}

.btn {
  display: block;
  margin: 0 auto;
}
Skyelar Habberfield
@habberfields
Jan 03 2017 03:04
@JackEdwardLyons hey Jack, not quite... I'm struggling to describe it, but I want the people planet paint as well as the inline form, to remain in the center of the body, no matter the body's height
the body being the picture of the painted hands
Emily Sperry
@sperrye
Jan 03 2017 03:07
Hey, I'm back haha
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:08
ah ok, perhaps using flexbox @habberfields
@habberfields
sorry @sperrye
Emily Sperry
@sperrye
Jan 03 2017 03:11
you're fired!
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:19
ok bare with me, im tinkering with it @habberfields
Skyelar Habberfield
@habberfields
Jan 03 2017 03:20
@JackEdwardLyons me too lol, is flexbox integrated with bootstrap? I know it is in v4 alpha, but I don't believe codepen is using that atm
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:22
yeah, you can just use it right away
its just css
Emily Sperry
@sperrye
Jan 03 2017 03:23
Did anyone get to the quote machine and feel lost?
It's the APIs
Ken Haduch
@khaduch
Jan 03 2017 03:24
@sperrye - where have you been?
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:24
heres what i have so far @habberfields
still working tho..
Ken Haduch
@khaduch
Jan 03 2017 03:26
@sperrye - you might just want to try it, first, with a fixed array of quotes? I did only that because it used to be in the early series of projects before any API or JSON transactions were introduced. You could do that to get the design working, and then worry about adding API interactions?
@sperrye - dealing with the Twitter API is enough, in my opinion! :)
Coy Sanders
@coymeetsworld
Jan 03 2017 03:27
yeah there will be plenty of APIs to work with later on, I just used an array too @khaduch @sperrye
Ken Haduch
@khaduch
Jan 03 2017 03:28
@coymeetsworld :+1:
Skyelar Habberfield
@habberfields
Jan 03 2017 03:28
@JackEdwardLyons looks good... moved the form into the container2 div, and they now both have fairly consistent margins!
Ken Haduch
@khaduch
Jan 03 2017 03:29
although I've seen some really awesome quote machine projects - some people have experience with site design!
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:30
yeah, and I added a bootstrap "row" because that is really important too @habberfields
check it now
its a bit shitty on mpobile
i need to fix that
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:35
ok looks good now
refresh my fork @habberfields
Emily Sperry
@sperrye
Jan 03 2017 03:36
@khaduch @coymeetsworld thanks, I'll try that!
CamperBot
@camperbot
Jan 03 2017 03:36
sperrye sends brownie points to @khaduch and @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 2204 | @khaduch |http://www.freecodecamp.com/khaduch
:star2: 1715 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Ken Haduch
@khaduch
Jan 03 2017 03:36
@sperrye - you're welcome.... good luck with the project!
Peter Phillips
@Cowboy59
Jan 03 2017 03:41
can someone help me figureout what I did wrong trying to get link's to jump from page to page like "about" "portfolio" "contact"
Skyelar Habberfield
@habberfields
Jan 03 2017 03:41
thanks @JackEdwardLyons ... this is nearly spot on! I might try to move the h1 and form a bit closer, but that may not be possible... maybe with a media query? Just so I understand, you added flexbox attributes in the container 2 css, and some padding to the form elements?
CamperBot
@camperbot
Jan 03 2017 03:41
habberfields sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
Ken Haduch
@khaduch
Jan 03 2017 03:42
@Cowboy59 - try removing the # from your id="#p2" - that octothorpe should not be in the idattribute.
Peter Phillips
@Cowboy59
Jan 03 2017 03:42
ok let me try
that was it ty very much
Ken Haduch
@khaduch
Jan 03 2017 03:45
@Cowboy59 - you're welcome
Jack Lyons
@JackEdwardLyons
Jan 03 2017 03:52
hey @habberfields
no i didn't use flexbox
i just rearranged your html and used bootstrap rows and col-xs-12 for a full page column
oh sorry, haha yeah i used flexbox
and set the height to 100vh, which is 100% on any viewport
play around with the form margin or padding to move it up more @habberfields
Skyelar Habberfield
@habberfields
Jan 03 2017 03:59
@JackEdwardLyons awesome... yeah thanks for explaining the 100vh, I'll dig into view ports. good work!
CamperBot
@camperbot
Jan 03 2017 03:59
habberfields sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:warning: habberfields already gave jackedwardlyons points
jaasirn
@jaasirn
Jan 03 2017 04:27
any1 alive in here
C.A. Reis
@drcharlie98
Jan 03 2017 04:47
g'day :)
my challenge "tribute" page seems to work when I do on notepad and publish it to chrome, but not so well on the pencode. what do I do? tyvm
jaasirn
@jaasirn
Jan 03 2017 04:49
are you using any frameworks/libraries etc?
C.A. Reis
@drcharlie98
Jan 03 2017 05:06
@jaasirn , hi, I have only written the code and added the content, but nothing like libraries. I am only a newbie at this.
Josh
@joshfilippi
Jan 03 2017 05:10
@drcharlie98
what part of the page looks off on your pen? is it the image files? layout? etc? what looks different?
sorry wrong person @jaasirn
C.A. Reis
@drcharlie98
Jan 03 2017 05:11
@joshfilippi thanks for the reply, well the links do not open
CamperBot
@camperbot
Jan 03 2017 05:11
drcharlie98 sends brownie points to @joshfilippi :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @joshfilippi |http://www.freecodecamp.com/joshfilippi
Josh
@joshfilippi
Jan 03 2017 05:13
do you mean the <a> tags don't work when you open your pen? or nothing displays when you cope the code to codepen?
C.A. Reis
@drcharlie98
Jan 03 2017 05:14
it goes like this: when I click on the link to go to the source of the info I used, my pen goes blank
srspecv
@srspecv
Jan 03 2017 05:14
hi, im having trouble trying to figure out how to add this font to my tribute page on code pen. http://www.fontsaddict.com/font/jurassic-park.html i cant seem to get it to work.
C.A. Reis
@drcharlie98
Jan 03 2017 05:14
yet it works from notepad when running on chrome or mozilla
Josh
@joshfilippi
Jan 03 2017 05:15
@drcharlie98 can you send the pen with the code youre trying to run?
C.A. Reis
@drcharlie98
Jan 03 2017 05:16
sure, Josh. how do I do that? thanks mate
I've never sent any code before
Josh
@joshfilippi
Jan 03 2017 05:17
open your pen. copy the url, post it here
C.A. Reis
@drcharlie98
Jan 03 2017 05:19
Josh
@joshfilippi
Jan 03 2017 05:21
@drcharlie98 I see everything fine other than the image
C.A. Reis
@drcharlie98
Jan 03 2017 05:23
@joshfilippi thanks, mate. I can't figure why it would not run
CamperBot
@camperbot
Jan 03 2017 05:23
drcharlie98 sends brownie points to @joshfilippi :sparkles: :thumbsup: :sparkles:
:warning: drcharlie98 already gave joshfilippi points
C.A. Reis
@drcharlie98
Jan 03 2017 05:24
I thought the photo link was ok too, but it doesn't show here
Josh
@joshfilippi
Jan 03 2017 05:24
maybe I'm misunderstanding your problem. But to get the image to display the easiest way to do it it to host the file online. Go to cloudinary.com and create an acount to upload and host the image there. It will give you a url for each image. use that url in an image tag to display it
C.A. Reis
@drcharlie98
Jan 03 2017 05:25
cool... I just tried linking from a photo from flkr
Josh
@joshfilippi
Jan 03 2017 05:25
cool that would work too
DarylKnapp
@DarylKnapp
Jan 03 2017 05:26

How can I remove the white line down the left side of my page?

https://codepen.io/DarylKnapp/pen/ggYxop

Emily Sperry
@sperrye
Jan 03 2017 05:29
http://codepen.io/sperrye/pen/ZBbmNX
The button is changing the author but not the quote?
Coy Sanders
@coymeetsworld
Jan 03 2017 05:32
you have a typo in your jQuery selector for the quote @sperrye
Emily Sperry
@sperrye
Jan 03 2017 05:40
I'm still not seeing it
HA
THERE IT IS
Except now it isn't showing author at all
srspecv
@srspecv
Jan 03 2017 05:50
how do I add this font to my codepen tribute project? http://www.fontsaddict.com/font/jurassic-park.html
Emily Sperry
@sperrye
Jan 03 2017 05:52
I found it. extras.
No. It's still not working. Sorry, I'm not usually this annoying.
Emily Sperry
@sperrye
Jan 03 2017 05:57
@srspecv there's a text box right under the preview with the css
Once you paste that in you can use font-family: 'Jurassic Park'; anywhere
C.A. Reis
@drcharlie98
Jan 03 2017 06:01
you probably have to download the font and copy the link
hello guys, im having problems with the simon game
anyone please check and tell me where im getting it wrong
srspecv
@srspecv
Jan 03 2017 06:03
i still cant get it to work
Emily Sperry
@sperrye
Jan 03 2017 06:04
@coymeetsworld thanks for your help. My problem was actually in my CSS where I had #author nested inside of #quotetainer, so it was overwriting it
CamperBot
@camperbot
Jan 03 2017 06:04
sperrye sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1719 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Jan 03 2017 06:05
ah ok @sperrye sorry didn't see your responses till just now, nice work :thumbsup:
srspecv
@srspecv
Jan 03 2017 06:18
so I got the jurassic park font to work. but I honestly have no idea how I got it to work. can someone take a look at this and help me figure out what I did? https://codepen.io/srspecv/pen/xRNprK?editors=1100
Stuart
@SAHarris
Jan 03 2017 06:18
Oh my goodness. I am totally chasing my tail with "Show the Local Weather..." I feel like I have to fight constantly with Codepen and the API I'm using. Anyone else do this project with the OpenWeatherMap API? It's returning "cod: "502",
message: "Error: Not found city" and I'm not sure if the API can't find my city or if the HTTPS/Crossorigin is breaking my url.
Stuart
@SAHarris
Jan 03 2017 06:26
@srspecv It looks like the "Jurassic Park" font is pointed at your h1 tag in your CSS. The rest of the page is defaulting to a sans serif font. What were you wanting it to look like?
srspecv
@srspecv
Jan 03 2017 06:28
@SAHarris i want it only on the h1 i just dont understand how i got it to work. i remember i had to link the lobster font in the html to get that to work. i just dont understand why i wouldnt have to link this one as well
Stuart
@SAHarris
Jan 03 2017 06:32
@srspecv Ok. I'm seeing the h1 font in a Serif font, not a fancy Jurassic Park when I look at the pen.
srspecv
@srspecv
Jan 03 2017 06:33
@SAHarris ooh okay. how do i get it to where everyone else can see it?
uriznik
@uriznik
Jan 03 2017 06:33
@SAHarris the navigator position function is a callback so api is undefined at the time call getJSON since the callback hasn't fired yet
Stuart
@SAHarris
Jan 03 2017 06:37
@srspecv is this the font you're trying to use? : "http://www.fontspace.com/filmfonts/jurassic-park?text="
srspecv
@srspecv
Jan 03 2017 06:37
@SAHarris yes
@SAHarris same font style but i got it from this site originally http://www.fontsaddict.com/font/jurassic-park.html i
Stuart
@SAHarris
Jan 03 2017 06:42
@srspecv I think you'll need to add a link to the font location in the CSS where you're declaring it.
srspecv
@srspecv
Jan 03 2017 06:44
@SAHarris i added this in the css but it doesnt seem to work @font-face {
font-family: 'Jurassic Park';
src: url('http://www.fontsaddict.com/fontface/jurassic-park.ttf');
}
Stuart
@SAHarris
Jan 03 2017 06:47
@srspecv @font-face is used to point to a font file on the webserver. I think you want @import to pull it in from another location on the web.
srspecv
@srspecv
Jan 03 2017 06:48
@SAHarris okay thanks I'll try it
CamperBot
@camperbot
Jan 03 2017 06:48
srspecv sends brownie points to @saharris :sparkles: :thumbsup: :sparkles:
:cookie: 296 | @saharris |http://www.freecodecamp.com/saharris
srspecv
@srspecv
Jan 03 2017 06:49
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:09
how do you get these codepens in the chat like this?
srspecv
@srspecv
Jan 03 2017 07:10
@mirrortorrent just copy and paste the url
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:11
dose any know bootstrap?
Sorin Ruse
@sorinr
Jan 03 2017 07:15
@mirrortorrent whats the problem?
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:15
how do i add a margin around a paragraph so the border is not so up agents the fonts?
Sorin Ruse
@sorinr
Jan 03 2017 07:17
@mirrortorrent in css p{border: 1px solid red;}
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:20
not what i was looking for
see how the background and the words are so sharp? want to add some padding
Sorin Ruse
@sorinr
Jan 03 2017 07:22
@mirrortorrent yep. u r right. still not fully awake.
@mirrortorrent something like the paragraph in red? example
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:31
i did like the style tuch, i will use but not what i am looking for
Screenshot 2017-01-02 at 11.31.57 PM.png
i want padding here, like you would have with paper
Sorin Ruse
@sorinr
Jan 03 2017 07:37
@mirrortorrent do you mean only on left side?
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:39
all around
Sorin Ruse
@sorinr
Jan 03 2017 07:43
for the entire div holding the paragraphs?
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:44
yes
Sorin Ruse
@sorinr
Jan 03 2017 07:46
@mirrortorrent try to reload my example above and let me know
MirrorTorrent
@mirrortorrent
Jan 03 2017 07:47
YES! much better!
thank you
Sorin Ruse
@sorinr
Jan 03 2017 07:51
@mirrortorrent welcome
EmilBuszylo
@EmilBuszylo
Jan 03 2017 08:22
Hello everyone Today! I have some problem with jQuery on my portfolio, I want to use scrollTo function but does't work :(
Jack Lyons
@JackEdwardLyons
Jan 03 2017 08:24
scrollTop @EmilBuszylo ?
or scrollTo ?
EmilBuszylo
@EmilBuszylo
Jan 03 2017 08:26
scrollTo
Jack Lyons
@JackEdwardLyons
Jan 03 2017 08:29
have you read the error in the console
```
"jQuery.Deferred exception: $.scrollTo is not a function" "TypeError: $.scrollTo is not a function
at HTMLDocument.<anonymous> (pen.js:226:7)
at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29568)
at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882)" undefined
"jQuery.Deferred exception: $.scrollTo is not a function" "TypeError: $.scrollTo is not a function
    at HTMLDocument.<anonymous> (pen.js:226:7)
    at j (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29568)
    at k (https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882)" undefined
EmilBuszylo
@EmilBuszylo
Jan 03 2017 08:30
It's looks like page dosn't recoqnize scrollTo function, on my computer I used file Jquery.scrollTo.mi.js and it worked
ok but how I can nested this function ? I have to copy src to https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js:2:29882 and that's all ?
Darth Skywalker
@adityaparab
Jan 03 2017 08:32

@EmilBuszylo : There any many things wrong. First let's fix your markup

Change your

<ul class="nav ">
        <li><a href="#" class="btn" id="link1">About</a></li>
        <li><a href="#second-article" class="btn" >Portfolio</a></li>
        <li><a href="#form-section" class="btn">Contact</a></li>      
</ul>

to look like

<ul class="nav ">
        <li><a href="#first-article" class="btn link">About</a></li>
        <li><a href="#second-article" class="btn link" >Portfolio</a></li>
        <li><a href="#form-section" class="btn link">Contact</a></li>      
</ul>

Then in your $(document).ready change

$('#link1').click(function(){
  $.scrollTo($('#first-article'),500); });
});

to this

$('.link').click(function(){
  $.scrollTo($(this).attr('href'),500);
});
Kristine
@krstnschwpwr
Jan 03 2017 08:33
hi! anyone familiar with google charts? and formatting api data before passing to the data table?
EmilBuszylo
@EmilBuszylo
Jan 03 2017 08:35
ok Darth I fixed this
Darth Skywalker
@adityaparab
Jan 03 2017 08:43
@EmilBuszylo Did that work? and if yes, did you understand what went down?
@krstnschwpwr : Post your question
EmilBuszylo
@EmilBuszylo
Jan 03 2017 08:43
No didn't
Darth Skywalker
@adityaparab
Jan 03 2017 08:44
@EmilBuszylo it didn't work or you didn't understand? :laughing:
EmilBuszylo
@EmilBuszylo
Jan 03 2017 08:45
Didn't work, I know that page dosn't recognize this function
Darth Skywalker
@adityaparab
Jan 03 2017 08:46
@EmilBuszylo share your updated codepen
ups sorry i forgot "#" befor id name "first-article" but it still doesn't work
Darth Skywalker
@adityaparab
Jan 03 2017 08:55

@EmilBuszylo : First

Comment this part in your html section

<script src="//cdn.jsdelivr.net/jquery.scrollto/2.1.2/jquery.scrollTo.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js"></script>
and add //cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/2.1.0/jquery.scrollTo.min.js this url to your scripts section
where you added jquery and bootstrap js files
make sure you add this AFTER the jquery and bootstrap files
Take a look. I forked your pen

Then in document.ready instead of

$.scrollTo($(this).attr('#first-article'),500);

you need to do

$.scrollTo($(this).attr('href'), 500);
Ghulam Shabir
@ghulamshabir
Jan 03 2017 09:00
hello guys take a look on this Weather App. I used React to build this and it will show local image as background if flickr stores an image for that location https://s.codepen.io/ghulamshabir/debug/yVedRJ
EmilBuszylo
@EmilBuszylo
Jan 03 2017 09:01
Darth thx for all :)
Ghulam Shabir
@ghulamshabir
Jan 03 2017 09:04
@sorinr I updated weather api :smile: thanks again for letting me know the api, now I am using browser's geolocation and it shows almost correct location i think, take a look on it
CamperBot
@camperbot
Jan 03 2017 09:04
ghulamshabir sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1026 | @sorinr |http://www.freecodecamp.com/sorinr
Darth Skywalker
@adityaparab
Jan 03 2017 09:12
@ghulamshabir sweet
apparently according to flickr the place where I am at right now is above the clouds :D
Ghulam Shabir
@ghulamshabir
Jan 03 2017 09:14
@adityaparab oh where ? in a plane ?
Darth Skywalker
@adityaparab
Jan 03 2017 09:15
No. Bangalore, India
John Alcher
@alchermd
Jan 03 2017 09:46
js_calc_0.1.png
Hey fellas. What's the best way to make the = sign take up the remaining space below it?
fijeko
@fijeko
Jan 03 2017 10:32
@alchermd try this let = button float right and inrease size. Size of one button is line-height of text + top and bottom padding + top and bottom border , than double height will be height : calc(2*1em + 2*1.48 + 4*6px + 4*1px); bootstrap line height is cca 1.48
DarylKnapp
@DarylKnapp
Jan 03 2017 10:51

Can anyone explain to me how I can add a title to my Nav? Maybe I need sleep , and I'm gapping out ha ha ha

http://codepen.io/DarylKnapp/pen/vgYNXe?editors=1100

Sorin Ruse
@sorinr
Jan 03 2017 10:59
@DarylKnapp you need <a class="navbar-brand" href="#">Brand</a>
RakeshNerkar
@Rakesh18754
Jan 03 2017 11:01
var dummyJson = {
                "data": [{
                    "tagValueId": 7,
                    "xaxisValue": "Payment Process",
                    "count": 3,
                    "yaxisValue": 1
                }],
                "statusCode": 1
            };
for(key in dummyJson.data){

    for(keys in dummyJson.data[key]){
      console.log(keys , "  keys");

   }
}
console.log(keys , " keys"); // this logs only the key
how to access the values as well
DarylKnapp
@DarylKnapp
Jan 03 2017 11:07
@sorinr Thanks mate. to edit it should i make a new CSS for it? or add it to my ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
font-family: Oswald;
}
CamperBot
@camperbot
Jan 03 2017 11:07
darylknapp sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1027 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 03 2017 11:11
@DarylKnapp navbar-brand is a bootstrap class so as you r using bootstrap just try to use it as in their example:http://getbootstrap.com/components/#navbar
DarylKnapp
@DarylKnapp
Jan 03 2017 11:38
@sorinr it's not letting me change the font at all. Im doing something wrong?
Sorin Ruse
@sorinr
Jan 03 2017 11:42
@DarylKnapp just add in css a.navbar-brand { font-family: "Oswald"; }
Darth Skywalker
@adityaparab
Jan 03 2017 11:44
@Rakesh18754 like console.log(Key - ${keys} || Value - ${dummyJson.data[key][keys]});
DarylKnapp
@DarylKnapp
Jan 03 2017 11:55
Thanks again @sorinr
CamperBot
@camperbot
Jan 03 2017 11:55
darylknapp sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: darylknapp already gave sorinr points
Sorin Ruse
@sorinr
Jan 03 2017 11:56
@DarylKnapp welcome
DarylKnapp
@DarylKnapp
Jan 03 2017 11:56
@sorinr when you add thr a.navbar the A is singling out the anchor link tag correct?
Sorin Ruse
@sorinr
Jan 03 2017 11:58
@DarylKnapp yep its identifies the <a> tag having that class of navbar-brand
DarylKnapp
@DarylKnapp
Jan 03 2017 11:59
is that the right way to do that in anything when it comes to CSS?
Sorin Ruse
@sorinr
Jan 03 2017 12:02
@DarylKnapp you can also get rid of the a and leave only .navbar-brand. it will do the same. i used it that way coz if i'm looking only into css i would know that class is applied to an <a> element
Sorin Ruse
@sorinr
Jan 03 2017 12:10
@DarylKnapp here an example why its good to use that kind of notation: suppose you have a class myclass that you apply to different elements like (<a>,<p>,<div>, whatever). myclass will make my font-family: oswald for all elements and i could just declare it .myclass{my css props in here} but if i want only the <p class="myclass">'s to have a font size:24px i would have to do it like p.myclass{font-size: 24px;} . hope you get the idea
theClassicFreak
@theClassicFreak
Jan 03 2017 12:38
So I reached the Personal Portfolio challenge and when I browse the CodePen example, I see it's coded in a Pug/Jade HTML format which cannot be viewed on CodePen
anyone has a similar experience?
Sorin Ruse
@sorinr
Jan 03 2017 12:42
@theClassicFreak its just an example. just use plain html,css and javascript/jquery and you'll be fine
theClassicFreak
@theClassicFreak
Jan 03 2017 12:42
even then, why won't the preview work?
it's stuck at a loading screen
Sorin Ruse
@sorinr
Jan 03 2017 12:45
@theClassicFreak for me the page is loading fine
giovanniattina
@giovanniattina
Jan 03 2017 13:43
hi, i'm build the random quote machine and this is my code
my button dive is inside of the main dive but my button is outside of the area
how to fix it?
giovanniattina
@giovanniattina
Jan 03 2017 13:57
i fixed the problem
It was it the float left
Erd
@alboz1
Jan 03 2017 14:35
http://codepen.io/alboz/pen/oBvqOd?editors=0010
Hey guys can u help me populate the tweet box dont know why the code i have written doesnt work ?
Bogdan Gatej
@Bogdan2992
Jan 03 2017 14:42
how can you center a text by the size of a photo
in order to have that text exactly under the picture ?
Sorin Ruse
@sorinr
Jan 03 2017 14:44
@alboz1 here how you can do it example
Erd
@alboz1
Jan 03 2017 14:46
@sorinr ohh wow never though about that thanks
CamperBot
@camperbot
Jan 03 2017 14:46
alboz1 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1028 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Jan 03 2017 14:47
@alboz1 welcome. u just have to extract only the text from the quote coz now its placing in the tweet also the <p> tags. i was too lazy to do it :)
Erd
@alboz1
Jan 03 2017 14:49
@sorinr yeah i noticed that i'll fixed thank you
CamperBot
@camperbot
Jan 03 2017 14:49
alboz1 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: alboz1 already gave sorinr points
Sorin Ruse
@sorinr
Jan 03 2017 14:50
@alboz1 :+1:
Luke Sallmen
@LukeSallmen
Jan 03 2017 15:23
hey everyone! I'm trying to make a responsive navbar such as the one on http://froont.com/ where the Logo text is centered vertically, and so are the other anchors. I can't figure out how to center my elements though - I've tried using flexboxes, floats, and setting line-height, but I keep breaking things. Here's my pen: http://codepen.io/LukeSallmen/pen/jyNRgG
Nitin Chandran Nair
@NitinNair89
Jan 03 2017 15:34

Hello @LukeSallmen My guess is it is due to the fixed height you gave to your navbar. Please try this:

nav {
  background: grey;
  width: 100%;
  padding: 2.9% 2.9%;
  max-width: 81em;
  overflow: hidden;
  font-family: Raleway;
}

Removed the height and gave equal padding to all sides.

Luke Sallmen
@LukeSallmen
Jan 03 2017 15:36
Oh damn that was a much simpler fix than I was thinking
Thanks @NitinNair89
CamperBot
@camperbot
Jan 03 2017 15:36
lukesallmen sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 368 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
Nitin Chandran Nair
@NitinNair89
Jan 03 2017 15:41
Glad to be of help! Have a great year! @LukeSallmen :)
Sam Griffen
@ssgriffen
Jan 03 2017 15:44
Anyone know a better way to check if all my getJSON is done loading? I feel like my .done is applying to each round of the loop, I just want to check .done once if the getJSON is done loading. Any thoughts? http://codepen.io/ssgriffen/pen/VmOKEp
emamadordev
@emamadordev
Jan 03 2017 15:49
question: Which is better ReactJS or AngularJS? what's the difference? Which one should i learn first? any thoughts welcomed.
Sorin Ruse
@sorinr
Jan 03 2017 15:51
@ssgriffen first of all in pen settings change the libs loading order: first jquery, then jq-ui and after the rest. see that you hyave a btn on the left that lets you move them up and down. the loading order its important as jq-ui needs jq to be loaded first
@ssgriffen and why do you .done(function() { $(".offline").hide(); hide the offline channels right from the beginning ? and not show them all first time?
Sam Griffen
@ssgriffen
Jan 03 2017 15:56
@sorinr I was just trying to show the online channels first
Sorin Ruse
@sorinr
Jan 03 2017 15:58
@ssgriffen from an UX point of view its better to let me the user choose what i want to see, so showing all it seems the first logical thing. and then your online and offline btns will let me filter as i wish through them
Sam Griffen
@ssgriffen
Jan 03 2017 16:00
@sorinr Not a bad call
lol
Rahul Yedida
@yrahul3910
Jan 03 2017 16:21
I'm a little stuck on the Wikipedia viewer one. I've come to realize that you can get the required JSON results with the URL https://en.wikipedia.org/w/api.php? followed by the options, but I don't know where to find all the options
Sorin Ruse
@sorinr
Jan 03 2017 16:24
@yrahul3910 i would just take a look at the simple example in their docs. then just read more on documentation and experiment
Tom
@moT01
Jan 03 2017 16:24
i couldnt find all the available options in their api docs, ...so i played with the url for quite a while to get the results i wanted
Ankit Agarwal
@ankit-prgmr
Jan 03 2017 16:24
@moT01 Nice work. I played 5 times and defeated it 5 times lol
Aditi Roy
@AlluringAditi
Jan 03 2017 16:25

Hello Everyone, Can someone please help me with this.
http://codepen.io/AlluringAditi/pen/mRdwMX

In my Js I've made an array with quotes and their authors.
I just need to figure out a way to display one quote at a time

Tom
@moT01
Jan 03 2017 16:26
thanks @ankit-prgmr, yea the computer is playing at about a 5th grade level right now, ...might need to add some more brains
CamperBot
@camperbot
Jan 03 2017 16:26
mot01 sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
Aditi Roy
@AlluringAditi
Jan 03 2017 16:26
In my Js I've made an array with quotes and their authors.
I just need to figure out a way to display one quote at a time
CamperBot
@camperbot
Jan 03 2017 16:26
:cookie: 269 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
Tom
@moT01
Jan 03 2017 16:28
@AlluringAditi get a random number between 0 and 3 and and use it to grab the quote
Jason Luboff
@JLuboff
Jan 03 2017 16:28
@AlluringAditi Look into using jQuery. You can use an on click $("#buttonID").click(function(){ Do something} and then use either .text() or .html to replace the current text
Tom
@moT01
Jan 03 2017 16:28
quote[randomnumber].quote
Ghulam Shabir
@ghulamshabir
Jan 03 2017 16:28
@AlluringAditi try Math.random * array.length
Rahul Yedida
@yrahul3910
Jan 03 2017 16:29
Thanks @ghulamshabir :)
CamperBot
@camperbot
Jan 03 2017 16:29
yrahul3910 sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1610 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Jason Luboff
@JLuboff
Jan 03 2017 16:29
@AlluringAditi And as the other two mentioned, use Math.random to get a random quote each time on click
Ghulam Shabir
@ghulamshabir
Jan 03 2017 16:29
@yrahul3910 :+1:
Tom
@moT01
Jan 03 2017 16:29
i guess you could just cycle through them as well, ...start at 0, and add one each time
Aditi Roy
@AlluringAditi
Jan 03 2017 16:29
@ghulamshabir @JLuboff @moT01 I don't understand how
Ghulam Shabir
@ghulamshabir
Jan 03 2017 16:32
@AlluringAditi Math.random will give you random index number then use it get element from the variable as @JLuboff showed you. make sure conver the number into whole number using Math.floor
Jason Luboff
@JLuboff
Jan 03 2017 16:32
@AlluringAditi I recomend reading documentation on each thing. Here is click: http://api.jquery.com/click/ Here is .html(): http://api.jquery.com/html/ here is .text(): http://api.jquery.com/text/ here is for Math.random: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
Rahul Yedida
@yrahul3910
Jan 03 2017 16:32
@AlluringAditi As an alternative, you could use an online API. Storm Consulatancy has an easy to use API for quotes.
Ghulam Shabir
@ghulamshabir
Jan 03 2017 16:33
@JLuboff :smile: :clap: good efforts
Jason Luboff
@JLuboff
Jan 03 2017 16:34
@ghulamshabir :+1: Figured its an easy way to get my Microsoft points by using Bing search haha
Aditi Roy
@AlluringAditi
Jan 03 2017 16:35
@ghulamshabir @JLuboff @moT01 @yrahul3910 Okay working on it, if I get stuck I'll ping again thanks
CamperBot
@camperbot
Jan 03 2017 16:35
:cookie: 2 | @yrahul3910 |http://www.freecodecamp.com/yrahul3910
:cookie: 552 | @jluboff |http://www.freecodecamp.com/jluboff
alluringaditi sends brownie points to @ghulamshabir and @jluboff and @mot01 and @yrahul3910 :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @mot01 |http://www.freecodecamp.com/mot01
:star2: 1611 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Ghulam Shabir
@ghulamshabir
Jan 03 2017 16:35
@JLuboff oh really ? never heard of that besides fcc brownies
Jason Luboff
@JLuboff
Jan 03 2017 16:37
@ghulamshabir Microsoft has their rewards program. You earn points by searching via Bing (as long as your logged in) and also different challenges or through purchases. You can then use the points (which you get for free) to get actual products (like xbox stuff or computers, etc)
Ghulam Shabir
@ghulamshabir
Jan 03 2017 16:40
@JLuboff oh that's good and smart way of marketing :smile: by Mircrosoft
Ankit Agarwal
@ankit-prgmr
Jan 03 2017 16:45
@moT01 Yeah add more brain to it :smile:
Salomon
@zarruk
Jan 03 2017 16:59
Hello. I want to put the black bock of class "marco" in the center of the screen. How could I do that?
https://codepen.io/zarruk/pen/NbVxQe
Ankit Agarwal
@ankit-prgmr
Jan 03 2017 17:03
@zarruk change your .marco class to below code
.marco {
  background-color: black;
  margin: 20px 30px 20px 30px;
  text-align: center;
  height: 400px;
  width: 300px;
  display:block;
  margin:auto;
}
Salomon
@zarruk
Jan 03 2017 17:04
@ankit-prgmr thanks!
CamperBot
@camperbot
Jan 03 2017 17:04
zarruk sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
R
@rthwaites
Jan 03 2017 17:04

Hello everyone! I would really appreciate just a push in the right direction. Within the 'Contact' section of my portfolio, I have tried to add some <div class="col-md-4"> so that I can add some font-awesome buttons for my codepen, github, and one for FCC. However, whenever I add them <i class="fa fa-github fa-3"></i> they do no seem to show up.

http://codepen.io/r_t_/pen/pRzjJM

Salomon
@zarruk
Jan 03 2017 17:07
@ankit-prgmr what is ´display: block´ for? I just put ´margin: auto´ and it worked.
Ankit Agarwal
@ankit-prgmr
Jan 03 2017 17:07
making the class block element
Jason Luboff
@JLuboff
Jan 03 2017 17:08
@rthwaites Add font-awesome to your CSS settings (like you did bootstrap)
R
@rthwaites
Jan 03 2017 17:11

@JLuboff it was in quick add, haha

so, can I just add //netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css and it should work?

Ankit Agarwal
@ankit-prgmr
Jan 03 2017 17:12
@rthwaites No. It's not the right link. Add proper url
R
@rthwaites
Jan 03 2017 17:13
perfect. thanks @ankit-prgmr and @JLuboff !
CamperBot
@camperbot
Jan 03 2017 17:13
rthwaites sends brownie points to @ankit-prgmr and @jluboff :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
:cookie: 554 | @jluboff |http://www.freecodecamp.com/jluboff
M7mdz
@M7mdz
Jan 03 2017 17:19
guys i am doing the twitch tv challenge.. an i add if statement to check if the stream is null but still it shows only the on-line streamers
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:22
@M7mdz Does your dev console show any errors?
Tanner Kiser
@Kiser3613
Jan 03 2017 17:27
Hey guys! Can anybody help me with the Record Collection exercise?
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:28
We can try, but you might get better help over here: https://gitter.im/FreeCodeCamp/HelpJavaScript
Tanner Kiser
@Kiser3613
Jan 03 2017 17:29
Ok! Thanks
GabriRa
@GabriRa
Jan 03 2017 17:29
I am doing the random quote generator. The quotes have to be from and onlice source?
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:29
@GabriRa You can create your own set of quotes if you want. No need to use an API
GabriRa
@GabriRa
Jan 03 2017 17:29
okey, and just for knoe
how should i do it with and API?
Like, is there somewhere where it is expalined, because I dont remeber any part of that in the course
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:30
This is a basic intro into using APIs: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
Search for a quote API and try to get it running
GabriRa
@GabriRa
Jan 03 2017 17:31
Thanks @TylerMoeller
CamperBot
@camperbot
Jan 03 2017 17:31
gabrira sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1249 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:31
This API has some good sample code: https://quotesondesign.com/api-v4-0/
GabriRa
@GabriRa
Jan 03 2017 17:33
And one last question, my JavaScript code should go in the HTML part? or it does not matter at all?
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:36
@GabriRa It should go in the JS panel, if you're referring to codepen. Here's a tour: https://s.codepen.io/pen/tour/welcome/start
M7mdz
@M7mdz
Jan 03 2017 17:56
@TylerMoeller no .. i use if(data.status==null){ append the streamer's name}
Tyler Moeller
@TylerMoeller
Jan 03 2017 17:56
@M7mdz Can you link to your codepen?
@TylerMoeller i think i have to use streams for online and channels for offline streamers
Tyler Moeller
@TylerMoeller
Jan 03 2017 18:01
@M7mdz You have a lot of errors in your dev console:
blob
Be sure to check if data.stream === null first, then look up data.stream.channel.display_name
@M7mdz I think you use channels for closed accounts and then streams for offline/online accounts
M7mdz
@M7mdz
Jan 03 2017 18:06
@TylerMoeller i will try this solution
@TylerMoeller thanks man
CamperBot
@camperbot
Jan 03 2017 18:06
m7mdz sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1250 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
ehutchllew
@ehutchllew
Jan 03 2017 18:11
Hello everyone! Need a guru to help me understand what is going on in one of my functions. I solved the problems it had but not sure why the problems arose in the first place.
Ritvars
@RitvarsZ
Jan 03 2017 18:36
Hey guys!
I'm making the wikipedia viewer project, running into some problems with ajax. More specifically with CORS. But I can't figure out what I need. I tried reading Wikipedia's documentation on their API, but cant quite get anywhere...
Here's a link to my codepen: http://codepen.io/Ritvars/pen/ZBNQrZ
Sam Bateman
@Cyberdr8gon
Jan 03 2017 18:36
this guy has the same problem I have ^^
Ritvars
@RitvarsZ
Jan 03 2017 18:37
@RitvarsZ I know I can use a simple JSON request and that should work, but I've seen people do It with ajax, so I wan't to learn to do that too
Ghulam Shabir
@ghulamshabir
Jan 03 2017 18:38
@RitvarsZ @Cyberdr8gon add &origin=* to the url
Ritvars
@RitvarsZ
Jan 03 2017 18:40
@ghulamshabir Wow :D And the solution was soo god damn simple... Thanks man :D
CamperBot
@camperbot
Jan 03 2017 18:40
ritvarsz sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1613 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Sam Bateman
@Cyberdr8gon
Jan 03 2017 18:40
does that just say all origins are a allowed?
thanks Ghulam
Ghulam Shabir
@ghulamshabir
Jan 03 2017 18:40
@RitvarsZ :smile:
@Cyberdr8gon ye :smile:
Sam Bateman
@Cyberdr8gon
Jan 03 2017 18:41
thanks @ghulamshabir
CamperBot
@camperbot
Jan 03 2017 18:41
cyberdr8gon sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1614 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
Ghulam Shabir
@ghulamshabir
Jan 03 2017 18:41
@Cyberdr8gon :+1:
Sarah
@Shoyren
Jan 03 2017 18:45
@TylerMoeller Thanks for the heads up! I'll keep that in mind.
CamperBot
@camperbot
Jan 03 2017 18:45
shoyren sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1252 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Sarah
@Shoyren
Jan 03 2017 18:46
Hi, can anyone tell me how I can refer to the "result" variable I have in my JS in twttr.widgets.createShareButton? http://codepen.io/shoyren/pen/apbzGj
Tyler Moeller
@TylerMoeller
Jan 03 2017 18:55
@Shoyren You can put your twttr.widgets.creatShareButton code in your selectQuote() function, or create a new function with the twttr.widgets code in it and pass the 'result' variable to that function
Sarah
@Shoyren
Jan 03 2017 18:59
@TylerMoeller Thanks! I just threw the function into selectQuote() and it works!
CamperBot
@camperbot
Jan 03 2017 18:59
shoyren sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: shoyren already gave tylermoeller points
Aiden
@AidenMead
Jan 03 2017 18:59
Hey folks! Anyone willing to take a look at my personal site and give some feedback? www.aidenmead.com
Sarah
@Shoyren
Jan 03 2017 19:00
@TylerMoeller So this does seem to work, but it creates a new button everytime I generate a new quote. How would I delete the old button and replace it?
Aiden
@AidenMead
Jan 03 2017 19:02
@Shoyren create the button outside of the function that happens upon click.
Since it's inside the click event, it's telling the computer to create the button when the Get a Quote button it clicked.
(unless this is what you're trying to do, only show the button once a quote is displayed? in which case, you can empty the info then add the button after upon each click)
Ankit Agarwal
@ankit-prgmr
Jan 03 2017 19:04
@AidenMead I think you can disable horizontal scrolling, besides that great work
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:06
@Shoyren I'm not familiar with the twttr.widgets code, you can create a hyperlink instead, style it like the twitter button with CSS and just update the HREF attribute every time you generate a new quote. That's what most people do on this project.
Aiden
@AidenMead
Jan 03 2017 19:07
@ankit-prgmr good call, I didn't even think of that!
@ankit-prgmr thank you
CamperBot
@camperbot
Jan 03 2017 19:07
aidenmead sends brownie points to @ankit-prgmr :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @ankit-prgmr |http://www.freecodecamp.com/ankit-prgmr
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:07
@Shoyren But to answer your question - just use $('#share').empty(); to empty the contents of that div before creating another button
Sarah
@Shoyren
Jan 03 2017 19:14
@TylerMoeller @AidenMead Thanks guys! It seems to be working now. I just need to make it look a bit nicer and that's it.
CamperBot
@camperbot
Jan 03 2017 19:14
shoyren sends brownie points to @tylermoeller and @aidenmead :sparkles: :thumbsup: :sparkles:
:cookie: 317 | @aidenmead |http://www.freecodecamp.com/aidenmead
:warning: shoyren already gave tylermoeller points
Alan Sato
@Halfcreative
Jan 03 2017 19:32
Hey, i need a little help getting the tweet button to work, I'm looking at the twitter API and I'm having trouble generating a tweet button with the content of the quote
AV11D
@AV11D724
Jan 03 2017 19:33
@TylerMoeller Hi i am having troube on how to change the color of the top and bottom navigation bars.
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:35
@AV11D724 Can you post a link to a codepen with your code?
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:39
@AV11D724 It seems you already figured it out by making the navbar pink instead of the default gray
AV11D
@AV11D724
Jan 03 2017 19:39
@TylerMoeller How?? I dont even know how i did that. lol
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:40
@AV11D724 I'd recommend writing your own page from scratch rather than copy/pasting someone else's code :p
It'll help you figure out how to style the colors - one step at a time
Start here to learn about components like the navbar: http://getbootstrap.com/components/
Then read these documents to learn more about styling everything: http://getbootstrap.com/css/
AV11D
@AV11D724
Jan 03 2017 19:42
@TylerMoeller The reason why i did that is that it is easier for me to reverse engineer something than it is to start from scratch with a blank mind.
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:42
The sample portfolio page is written in Pug and postCSS - which aren't taught here at Free Code Camp, so it will be a big challenge to try and reverse engineer it.
AV11D
@AV11D724
Jan 03 2017 19:42
@TylerMoeller Really???
@TylerMoeller I didnt know that and i dont know what pug and sas even are. lol
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:43
I think some courses on SASS are in the works, but those are meant for after you get your front-end certificate
AV11D
@AV11D724
Jan 03 2017 19:46
@TylerMoeller So you recommend that i start from scratch??
@TylerMoeller And that website will teach me how to change the nav bar in the bootstrap language??
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:47
@AV11D724 Yes, use what you learned in all the challenges you have completed: https://www.freecodecamp.com/AV11D724
Go through the challenges again if you need a refresh, and then read the bootstrap docs to get into more detail
AV11D
@AV11D724
Jan 03 2017 19:50
@TylerMoeller Thank you so much!!!
CamperBot
@camperbot
Jan 03 2017 19:50
av11d724 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1253 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Jan 03 2017 19:50
yw :+1:
Alex Boose
@Alex-Boose
Jan 03 2017 20:02
Hello. I was building my tribute page using CodePen but I would like to start using an editor so I can be familiar with one. I just want to type my Html and have it update in realtime (like CodePen). Any suggestions?
Aiden
@AidenMead
Jan 03 2017 20:03
So, this isn't so much an issue with FreeCodeCamp as much as it is just general advice. I basically accidentally applied to a Sr Front End job (it didn't list Sr on the description) and actually passed the assessment that they give before anything else. So I'm to a point where they ask the applicant to make a simple project so that they can assess it, but I'm debating whether I really want to spend the time doing it if they ultimately are going to look at me, realize I don't have experience, and potentially boot me anyway?
Alex Boose
@Alex-Boose
Jan 03 2017 20:04
@AidenMead maybe just make a simple project and add it to your resume regardless what happens with the job
Rich Keyzor
@Web-Dev-Rich
Jan 03 2017 20:05
Just came back after Christmas and got this https://www.dropbox.com/s/geohdpsse5rq0ke/Screenshot%202017-01-03%2020.02.45.png?dl=0 Anyone any experience of it?
Aiden
@AidenMead
Jan 03 2017 20:10
@Alex-Boose Good point, that makes sense. Do the project as a resume builder, as long as they don't make me sign a NDA for it, lol. I haven't actually gotten any specifics about the project yet.
Tyler Moeller
@TylerMoeller
Jan 03 2017 20:14
@Alex-Boose I like Atom, but here's a great list of editors: https://github.com/showcases/text-editors
ehutchllew
@ehutchllew
Jan 03 2017 20:16
Can someone explain to me why every time the function runs it treats each click as plus one more click(ex: first click = 1 click, 2nd click = double click, 3rd click = triple click) of the same button:
function whosTurn() {
      //Function will call itself until spaces filled or winning condition fulfilled.
      if(humanTiles == [0,1,2] || humanTiles == [0,3,6]){
        alert('YOU WIN!');
      } else if(aiTiles == [0,1,2]){
        alert('AI wins :(');
      }

      if (openTiles.length > 0) {

        if (playerTurn == true) {
          $('.open').on('click', function() {

            tileNum = JSON.parse($(this).attr('id'));
            humanTiles.push(tileNum);
            console.log(humanTiles);
            if (openTiles.indexOf(tileNum) != -1) {
              $('#' + tileNum).removeClass('open').html(human);
              openTiles.splice(openTiles.indexOf(tileNum), 1);
              playerTurn = false;
              console.log("Human: ", tileNum, openTiles);
              whosTurn();
            }
          });
          //console.log('human');
        } else {

          //console.log('ai');
          setTimeout(function(){


          tileNum = JSON.parse(Math.floor(Math.random() * openTiles.length));
            $('.open#' + openTiles[tileNum]).removeClass('open').html(ai);
            openTiles.splice(tileNum, 1);
            playerTurn = true;
            console.log("AI: ", tileNum, openTiles);
                      whosTurn();

          }, 800);
        }

      } else {
        alert('DRAW');
        return;
      }

    };
    whosTurn();
Alex Boose
@Alex-Boose
Jan 03 2017 20:19
@TylerMoeller That works. How do I get Atom to preview the Html that I am working on (I'm building a tribute page) ?
Tyler Moeller
@TylerMoeller
Jan 03 2017 20:19
@Alex-Boose I use this plugin - works great: https://atom.io/packages/atom-html-preview
GabriRa
@GabriRa
Jan 03 2017 20:21
Hey, can anyone help me making a Twitter share button?
Alex Boose
@Alex-Boose
Jan 03 2017 20:22
@TylerMoeller thank you
CamperBot
@camperbot
Jan 03 2017 20:22
alex-boose sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1254 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
DarylKnapp
@DarylKnapp
Jan 03 2017 20:47

Good Morning everyone!

Can someone help me.. I want to add a line underneath my portfolio work to separate my work so i can make a contact me page underneath it.

http://codepen.io/DarylKnapp/pen/vgYNXe?editors=1100

Luke Sallmen
@LukeSallmen
Jan 03 2017 20:51
@DarylKnapp that looks really good!!! And could you make a <div> underneath your work and then add a width and a color?
@DarylKnapp I'm sure there is a more elegant/less bulky solution, but I think the div would work. Also, I think you made a typo in your nav bar! (LinkedIn, not LinkedLn)
tptynlr
@tptynlr
Jan 03 2017 20:55
Use <hr> tag for underline.
Venkatesh Thapan
@thenerdyouknow
Jan 03 2017 21:00
So in the Twitch API project we're supposed to use placeholders if channel has been deleted.
But when I try to replace part of the array it doesn't happen.
It doesn't break my program but I'm not able to change the name to a placeholder.
Rich Keyzor
@Web-Dev-Rich
Jan 03 2017 21:23

Just came back after Christmas and got this https://www.dropbox.com/s/geohdpsse5rq0ke/Screenshot%202017-01-03%2020.02.45.png?dl=0 Anyone any experience of it?

Fixed with xcode-select —install

No idea why suddenly lost command line tools
Emily Sperry
@sperrye
Jan 03 2017 21:33
Hey, for the Local Weather app, I can't use Chrome, right?
Phiggins567
@phiggins567
Jan 03 2017 21:38
@sperrye you can use chrome, but you won't be able to use geolocation as chrome requires https (open weather map requires you to pay to use https)
ehutchllew
@ehutchllew
Jan 03 2017 21:41
I have zero clue why my click handler is acting the way it is.
Phiggins567
@phiggins567
Jan 03 2017 21:43
@ehutchllew can you post your code?
ehutchllew
@ehutchllew
Jan 03 2017 21:44
@phiggins567 starts on line 91. Just seems like I can't ever exit the function, like it just stays in the click handler constantly. http://codepen.io/ehutchllew/pen/aBeeWa?editors=1111
Venkatesh Thapan
@thenerdyouknow
Jan 03 2017 21:50
I need help too.
Can't understand why global value won't update after going through a function.
Matthew Bailin
@mdbailin
Jan 03 2017 22:02
Hey Folks, I have a question on the simon game if anyone's gotten that far
dionisos
@dionisos2
Jan 03 2017 22:02
Hi
I am starting the first project "build-a-tribute-page", is it ok if i build a page identical to the example page ? I should i make something original ?
or should i make*
So I've been able to set up the frame of the layout and the JS needed to light the buttons. The trouble I'm having now is figuring out how to get the game to pause after 1 flash, 2 flashes, etc.
Jinnd319
@Jinnd319
Jan 03 2017 22:36
if(target.length){
  event.preventDefault();
  $('html, body').stop().animate({
    scrollTop: target.offset().top
  }, 1000);
  $(".nav-item").addclass("active");
  }
I think this jQuery code scrolls along and checks to see if variable target is equal to length. If that were true then my .addclass method would be working. What does this actually do?
@dionisos2 make something original. Basing the layout on the example page is fine.
dionisos
@dionisos2
Jan 03 2017 22:38
Ok thanks @Jinnd319
CamperBot
@camperbot
Jan 03 2017 22:38
dionisos2 sends brownie points to @jinnd319 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jinnd319 |http://www.freecodecamp.com/jinnd319
dionisos
@dionisos2
Jan 03 2017 22:40
@Jinnd319 target.length give you the length of the target object.
Jinnd319
@Jinnd319
Jan 03 2017 22:40
@dionisos2 How is that a conditional statement?
dionisos
@dionisos2
Jan 03 2017 22:41
What you would want is probably something like :
if(target.length == …) {
Hum, maybe it make reference to something i doesn’t know.
Jinnd319
@Jinnd319
Jan 03 2017 22:42
@dionisos2 everything above the line selecting the nav-item class works as is though.
actually on second thought I think that is just there to make sure target exists. I know target exists though so the nav-item selector should always add the class active to nav-item. I still don't understand why this isn't working
dionisos
@dionisos2
Jan 03 2017 22:44
Maybe it just check if target have a length property at all.
Jinnd319
@Jinnd319
Jan 03 2017 22:49
@dionisos2 Thank you
CamperBot
@camperbot
Jan 03 2017 22:49
jinnd319 sends brownie points to @dionisos2 :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @dionisos2 |http://www.freecodecamp.com/dionisos2
DarylKnapp
@DarylKnapp
Jan 03 2017 22:50
How do you use another font that you have imported? or maybe even 3rd font that you have imported.
Jinnd319
@Jinnd319
Jan 03 2017 22:51
if(target.length){
  event.preventDefault();
  $('html, body').stop().animate({
    scrollTop: target.offset().top
  }, 1000);
  $(".nav-item").addclass("active");
  }

Why doesn't ,

  $(".nav-item").addclass("active");
  }

work when the code about it works just fun?

dionisos
@dionisos2
Jan 03 2017 22:52
It is "addClass" not "addclass"
Jinnd319
@Jinnd319
Jan 03 2017 22:52
@dionisos2 Genius! Thanks for catching that.
CamperBot
@camperbot
Jan 03 2017 22:52
jinnd319 sends brownie points to @dionisos2 :sparkles: :thumbsup: :sparkles:
:warning: jinnd319 already gave dionisos2 points
dionisos
@dionisos2
Jan 03 2017 22:53
’’’
test markdown
’’’
oups
@Jinnd319 You are welcome :-)
test again
Sanjay Tailor
@sanjaykt
Jan 03 2017 23:00
@DarylKnapp you can use another font like google font like this….

‘’'

<link href="https://fonts.googleapis.com/css?family=Lato:400,900" rel="stylesheet">

Jinnd319
@Jinnd319
Jan 03 2017 23:01
@sanjaykt should be the button about the tab next to the 1. I just didn't format it and the chatroom did it for me though.
DarylKnapp
@DarylKnapp
Jan 03 2017 23:01
@sanjaykt Ive done this, and know that part. I fixed it thanks
CamperBot
@camperbot
Jan 03 2017 23:01
darylknapp sends brownie points to @sanjaykt :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @sanjaykt |http://www.freecodecamp.com/sanjaykt
Sanjay Tailor
@sanjaykt
Jan 03 2017 23:03
@camperbot Your are welcome!!!
Matthew Bailin
@mdbailin
Jan 03 2017 23:40
@mdbailin
http://codepen.io/mdbailin/pen/oYQKBd?editors=0001
So I've been able to set up the frame of the layout and the JS needed to light the buttons. The trouble I'm having now is figuring out how to get the game to pause after 1 flash, 2 flashes, etc.
ml3ha
@ml3ha
Jan 03 2017 23:55
Has anyone used Handlebars before or gulp? I am trying to figure out if gulp is the right tool to use to minify all my javascript into one file, including Handlebars scripts. I've got like 3 script tags in my index.php page now which are just handlebars scripts, as well as a few more external .js files that i'm importing into <script> tags.
max77p
@max77p
Jan 03 2017 23:55
@sanjaykt have you done the twitch app?
has anyone done the twitch app or know apis?
need help pulling the offline logos on mine