These are chat archives for FreeCodeCamp/HelpFrontEnd

30th
Dec 2016
Icah Banton
@remdata
Dec 30 2016 00:03
how do I add icons for twitter, github, linkedIn and freeCodeCamp to buttons?
Simon Cordova
@gbsimon87
Dec 30 2016 00:47
@remdata check out fa icons
Doneal Bercier
@donealbercier
Dec 30 2016 00:48
I need help understaning why my Wikipedia Api call doesn't work correctly. http://codepen.io/donealbercier/pen/PbQPqp?editors=1111
Simon Cordova
@gbsimon87
Dec 30 2016 00:51
@donealbercier lll take a look
c0d0er2
@c0d0er2
Dec 30 2016 00:52
Can some please help me with getting 2 images apart? https://codepen.io/c0d0er2/pen/oYrppg
Doneal Bercier
@donealbercier
Dec 30 2016 00:52
@gbsimon87 I would really appreciate that. It seems like it works fine outside of onClick function
Icah Banton
@remdata
Dec 30 2016 00:55
@gbsimon87 How do you refer to them in codepen?
Simon Cordova
@gbsimon87
Dec 30 2016 00:56
them?
Alessandro
@Riverino
Dec 30 2016 00:56
Hi guys, I'm completing my portfolio. In the contact section I have created three inline rounded button. Now, the problem is that they are not centred. I have tried several combinations but it seems like there is no way I can centred them. Any help will be much appreciated. Here is the link: https://codepen.io/Riverino/pen/ObdRYK
Jesse
@lookinahead13
Dec 30 2016 00:56
@c0d0er2 very cool!
Icah Banton
@remdata
Dec 30 2016 00:57
@gbsimon87 any icon in fontawesome
Simon Cordova
@gbsimon87
Dec 30 2016 00:57
usually fa fa-iconName
go to the site I sent you
Icah Banton
@remdata
Dec 30 2016 00:58
@gbsimon87 . Thanks, I will try it.
CamperBot
@camperbot
Dec 30 2016 00:58
remdata sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
c0d0er2
@c0d0er2
Dec 30 2016 00:59
@lookinahead13 Thanks!
CamperBot
@camperbot
Dec 30 2016 00:59
c0d0er2 sends brownie points to @lookinahead13 :sparkles: :thumbsup: :sparkles:
:cookie: 268 | @lookinahead13 |http://www.freecodecamp.com/lookinahead13
Simon Cordova
@gbsimon87
Dec 30 2016 00:59
@donealbercier you said it worked without the click function?
Jesse
@lookinahead13
Dec 30 2016 01:00
does anyone know if there is a way to use javascript in order to make a "contact form fully functionable"? Codepen does not support PHP and I thought it would be cool to make it work! Any Ideas?
Simon Cordova
@gbsimon87
Dec 30 2016 01:01

@donealbercier

    $.getJSON(wikiApi, function(wikiSearch) {

That worked on my end...

@lookinahead13 as far as I know, no
Doneal Bercier
@donealbercier
Dec 30 2016 01:01
@gbsimon87 Yes it works when I used it outside of the click function. I think I figured out what the problem was. I needed to ad an onSubmit function as well. Thank you for your help
CamperBot
@camperbot
Dec 30 2016 01:01
donealbercier sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Jesse
@lookinahead13
Dec 30 2016 01:02
@gbsimon87 Thanks! That's what I was thinking too.. Was just hoping there was an alternative I didn't know about!! (NOOB :smile: )
CamperBot
@camperbot
Dec 30 2016 01:02
lookinahead13 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Simon Cordova
@gbsimon87
Dec 30 2016 01:03
@donealbercier if it works out that's great, but I don't find it necessary to add an onsubmit function
your onclick on the button should suffice
c0d0er2
@c0d0er2
Dec 30 2016 01:04
Can some please help me with getting 2 images apart? https://codepen.io/c0d0er2/pen/oYrppg
Doneal Bercier
@donealbercier
Dec 30 2016 01:04
@gbsimon87 Okay yea I see now. That was definitly redundant. Working great now though
Simon Cordova
@gbsimon87
Dec 30 2016 01:05

@donealbercier good stuff :)

@c0d0er2 what exactly would you like done?

c0d0er2
@c0d0er2
Dec 30 2016 01:06
@gbsimon87 I want to get 2 images apart
Simon Cordova
@gbsimon87
Dec 30 2016 01:06
github and freecodecamp?
@c0d0er2 do you still require help?
c0d0er2
@c0d0er2
Dec 30 2016 01:08
@gbsimon87 Yes
Simon Cordova
@gbsimon87
Dec 30 2016 01:09
Which two images exactly are you referring to?
@c0d0er2
c0d0er2
@c0d0er2
Dec 30 2016 01:10
@gbsimon87 The dinosaur picture and the yellow and blue picture.
Simon Cordova
@gbsimon87
Dec 30 2016 01:12
@c0d0er2 I'm sorry I don't see a dinosaur picture anywhere...
Send me a small snippet of the code where it is located
@c0d0er2 it seems that you're ok, nonetheless, for the blue and yellow background image, you can change its background-size to 'inherit' and it'll separate it a bit
PS...HTML5 now has 'section' tags, I'd use those for your sections
salut
c0d0er2
@c0d0er2
Dec 30 2016 01:20
@gbsimon87 I am sorry that I am late, but here is it again it should have the pictures now. https://codepen.io/c0d0er2/pen/oYrppg
Simon Cordova
@gbsimon87
Dec 30 2016 01:22
@c0d0er2 I think the problem is how you're outling the row and the divs inside
Try something like this...
c0d0er2
@c0d0er2
Dec 30 2016 01:22
@gbsimon87 Can you please tell me what code is to doing that?
Simon Cordova
@gbsimon87
Dec 30 2016 01:24
<div class='container'>
<div class='row'
<div class='col-xs-12 col-md-4'

<first image>  <second image>  <third image>

</div>
</div><!--close 'row'-->
</div><!-- close container -->
c0d0er2
@c0d0er2
Dec 30 2016 01:25
@gbsimon87 Thanks!
CamperBot
@camperbot
Dec 30 2016 01:25
c0d0er2 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:cookie: 375 | @gbsimon87 |http://www.freecodecamp.com/gbsimon87
Simon Cordova
@gbsimon87
Dec 30 2016 01:25
This basically tells it...if the scren is extra small, use the entire row, or if it's medium, use just 4 out of the 12 possible columns

@c0d0er2 www.w3schools.com/bootstrap/bootstrap_grid_basic.asp

That should clarify things for you

c0d0er2
@c0d0er2
Dec 30 2016 01:26
@gbsimon87 Thanks for the imformation!
CamperBot
@camperbot
Dec 30 2016 01:26
c0d0er2 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: c0d0er2 already gave gbsimon87 points
Simon Cordova
@gbsimon87
Dec 30 2016 01:26
Also, since you're using bootstrap, remember to give each image a class of 'img-responsive' so that they size well when expanding and collapsing
cheers buds!
c0d0er2
@c0d0er2
Dec 30 2016 01:26
@gbsimon87 Ok, thanks!
CamperBot
@camperbot
Dec 30 2016 01:26
c0d0er2 sends brownie points to @gbsimon87 :sparkles: :thumbsup: :sparkles:
:warning: c0d0er2 already gave gbsimon87 points
Doneal Bercier
@donealbercier
Dec 30 2016 01:32
I'm not sure why my page resets every time I submit the search request. https://codepen.io/donealbercier/pen/BQXOgZ?editors=1111
Icah Banton
@remdata
Dec 30 2016 01:35
Do I need to download anything to use Font awesome icons in a pen?
Jack Lyons
@JackEdwardLyons
Dec 30 2016 02:21
hey guys im having a weird issue, wondering why this function isn't getting called on mouseclick.... here is my code..
let handlers =  {

  onTileClick() {
    this.animateTiles();
  },

  animateTiles(e) {
    const tile = e.target;
    // add playing class to animate the tile
    tile.classList.add("playing");
    // play audio on click
    const audio = tile.children[0];
    // reset audio play on each click
    audio.currentTime = 0;
    audio.play();
    // remove playing class to maintain original state
    tile.addEventListener("transitionend", () => { tile.classList.remove("playing"); });
  }
};


document.addEventListener('DOMContentLoaded', function() {
  const tiles = document.querySelectorAll('button.quarter').forEach(tile => tile.addEventListener('click', handlers.onTileClick));

});
and here is the error message
Uncaught TypeError: this.animateTiles is not a function
    at HTMLButtonElement.onTileClick (client.js:9)
onTileClick @ client.js:9
Matt Richards
@mattjrichards
Dec 30 2016 02:22
I don't even know where to begin with my next challenege. It's building a personal portfolio page. The tribute page alone took me a long time. Can anyone point me in the right direction?
Jack Lyons
@JackEdwardLyons
Dec 30 2016 02:23
hey @kilocycle how about searching a nice template to copy/emulate?
google "bootstrap website themes"
just to get an idea
Matt Richards
@mattjrichards
Dec 30 2016 02:26
@JackEdwardLyons Quincy doesn't want us to look at the code of examples. I can't do it though without. I just don't have the experience. It's so unbelievably frustrating. I will Google "bootstrap website themes."
Jack Lyons
@JackEdwardLyons
Dec 30 2016 02:27
no not code examples
theme examples
dont look at the code
look at the themes @kilocycle
and think about what elements you like
Matt Richards
@mattjrichards
Dec 30 2016 02:30
I can't figure out how to code it though without looking at how someone has done it before. It's just way too hard. I was getting nowhere with the tribute page until I looked at how others were coding theirs.
Matt Richards
@mattjrichards
Dec 30 2016 02:39
...I finished the tribute page, but it's not really as good as I wanted it to be. But I wanted to submit it because it was taking forever to complete. I need more practice. Really frustrated right now. @JackEdwardLyons thank you
CamperBot
@camperbot
Dec 30 2016 02:39
kilocycle sends brownie points to @jackedwardlyons :sparkles: :thumbsup: :sparkles:
:cookie: 335 | @jackedwardlyons |http://www.freecodecamp.com/jackedwardlyons
quackidy
@quackidy
Dec 30 2016 02:41
Hey guys! So, I'm trying to figure out how to fulfill the user story of "navigate to different sections of the webpage by clicking buttons in the navigation". I have buttons, but I have no idea what to do with them. I don't even know how to google this
Jack Lyons
@JackEdwardLyons
Dec 30 2016 02:46
want me to take a look @kilocycle ?
Tom
@moT01
Dec 30 2016 02:46
<a href="link here to different part of page">
Jack Lyons
@JackEdwardLyons
Dec 30 2016 02:46
hey @quackidy google anchor tags and href
Tom
@moT01
Dec 30 2016 02:46
should work
@kilocycle nothing wrong with finishing up and moving on, ...as you go on to other projects you will learn more, and can go back and more easily make things better and more how you want them
also nothing wrong with looking at other code to help yourself learn
Daniel
@DanJP2016
Dec 30 2016 02:49
can anybody recommend a good book on JSON and using API's ?
Matt Richards
@mattjrichards
Dec 30 2016 02:50
quackidy
@quackidy
Dec 30 2016 02:50
ah! anchor tags! thank you!
what do you guys think?
Tom
@moT01
Dec 30 2016 02:50
see if theres a 'for dummies' book on it
@DanJP2016
Matt Richards
@mattjrichards
Dec 30 2016 02:52
@quackidy very nice, although I don't have enough experience in coding to tell you anything more in that respect.
Tom
@moT01
Dec 30 2016 02:55
@quackidy looks good
Daniel
@DanJP2016
Dec 30 2016 02:55
@moT01 good idea, there is one but I don't think it covers using API's
Tom
@moT01
Dec 30 2016 02:55
it must
Daniel
@DanJP2016
Dec 30 2016 02:56
or is that all combined together?
Tom
@moT01
Dec 30 2016 02:56
whats the title?
Matt Richards
@mattjrichards
Dec 30 2016 02:56
@JackEdwardLyons stepping out for a bit to grab a bite to eat. I'll be back.
Daniel
@DanJP2016
Dec 30 2016 02:57
how to use javascript object notation for html5 and css3 programming
Raju
@rajulamsal124
Dec 30 2016 03:00
Please givee me reference of tribute page
Tom
@moT01
Dec 30 2016 03:01
yea it doesn't say anything about api's on the page for that book
Daniel
@DanJP2016
Dec 30 2016 03:03
hmm, maybe i can find a video series on youtube about using them.
Tom
@moT01
Dec 30 2016 03:04
im sure you can, the api section on this site didn't give you a whole lot to go on, ...i did a decent amount of reading to figure some things out
jayisray
@jayisray
Dec 30 2016 03:06
Let’s say you have a single row div at the top of your page and you want your text to always be as large as possible so that the text doesn’t overflow over a single line. What is the best way to accomplish this?
Daniel
@DanJP2016
Dec 30 2016 03:06
yeah, the api section on codeCademy usese python, i don't know python yet though.
Raju
@rajulamsal124
Dec 30 2016 03:08
Guys! how to create bootstrap full hight and width jumbotorn
Daniel
@DanJP2016
Dec 30 2016 03:08
@jayisray i think you would use text-overflow to accomplish that. not 100% sure though
@rajulamsal124 you put the jumbotron div outside the container div
Christine Lim
@limchr15
Dec 30 2016 03:10
Hello! Does anyone know how to write "texts" on images?
^^ do I have to do some <div class= "parent"> thing??
Tom
@moT01
Dec 30 2016 03:11
you want some text on top of your image i take it, ...not on like a mouse over
yea i would put an <img> and maybe a <p> inside a div and use relative positioning on the <p>
i think that would work
shreyas23sk
@shreyas23sk
Dec 30 2016 03:26
is there any react developer here
if so please look in the HelpJavascript section
Raju
@rajulamsal124
Dec 30 2016 03:28
How to insert image in codepen
Rene Torres Hernandez
@Deltaspectro
Dec 30 2016 03:30
src="you url imagen"
@rajulamsal124
Lorrie Pearson
@Lorrie01
Dec 30 2016 03:31
Is there anyone online who can help me understand 'use strict' and how to write code with a local variable but no global variable.
A resource link will be invaluable and appreciated.
Matt Richards
@mattjrichards
Dec 30 2016 03:38
@JackEdwardLyons did you get a chance to look at my pen?
Idowu Wasiu
@Hoxtygen
Dec 30 2016 03:41
morning guys
need some help here
Matt Richards
@mattjrichards
Dec 30 2016 03:42
@Hoxtygen good morning...although it's 10:41pm where i am at.
Idowu Wasiu
@Hoxtygen
Dec 30 2016 03:42
@kilocycle 4:42 am here
I'm on the random quote generator and my html and css are ready to go, not on codepen yet though... I want some nice effect like i want the color to change with every quote. is that a function of css or jquery?
Phillip Sturgeon
@pmsturgeon
Dec 30 2016 03:44
Hello! I am currently doing the portfolio page... the example given was super intense (for me, a super beginner). Did he use more than html and css?
Idowu Wasiu
@Hoxtygen
Dec 30 2016 03:46
@pmsturgeon nope, just those two.... you don't have to build something as impressive as that as a beginner, just make do with your ability
Tom
@moT01
Dec 30 2016 03:46
@Hoxtygen jquery, i dont think its possible with just css
Raju
@rajulamsal124
Dec 30 2016 03:47
How to insert image form my pc to codepen
to make tribute webite
Idowu Wasiu
@Hoxtygen
Dec 30 2016 03:47
@moT01 was thinking the same, thought i should ask those better than me
Phillip Sturgeon
@pmsturgeon
Dec 30 2016 03:47
thanks @Hoxtygen okay, will do.
CamperBot
@camperbot
Dec 30 2016 03:47
pmsturgeon sends brownie points to @hoxtygen :sparkles: :thumbsup: :sparkles:
:cookie: 301 | @hoxtygen |http://www.freecodecamp.com/hoxtygen
Raju
@rajulamsal124
Dec 30 2016 03:48
http://url is not working
Idowu Wasiu
@Hoxtygen
Dec 30 2016 03:48
@rajulamsal124 you can't . image has to be hosted somwhere onine where it can be readily available
@rajulamsal124 try uploading your image to photobucket and use the url to upload your image to codepen
Raju
@rajulamsal124
Dec 30 2016 03:49
then how to insert provide the url to the src attribute of img tag but is'nt working
Idowu Wasiu
@Hoxtygen
Dec 30 2016 03:49
@rajulamsal124 which image hosting site are you using?
Raju
@rajulamsal124
Dec 30 2016 04:09
i dont knw
i want to just to insert by my computer
Idowu Wasiu
@Hoxtygen
Dec 30 2016 04:11
@rajulamsal124 and i'm saying you cant do that because it won't work..... Any image you're going to use on codepen have to be online hosted somewhere
@rajulamsal124 And don't even attempt to use google
@rajulamsal124 head now to photobucket and create a free account then upload the image from your computer to your account then create a url link for it which you will use on codepen
Raju
@rajulamsal124
Dec 30 2016 04:18
How much it will cost for the host ?
Idowu Wasiu
@Hoxtygen
Dec 30 2016 04:19
@rajulamsal124 you can create a free account
@rajulamsal124 as long as you can deal with the ads screaming at you
Tyler Moeller
@TylerMoeller
Dec 30 2016 04:21
@Lorrie01 'use strict' is strict mode - at a high level, you have to declare variables before using them - i.e. use var, const, let before the variable name. http://www.w3schools.com/js/js_strict.asp
Raju
@rajulamsal124
Dec 30 2016 04:22
Idowu Wasiu,did you finish your porfolio?
How to start Working with portfolio
Tyler Moeller
@TylerMoeller
Dec 30 2016 04:23
@Lorrie01 "global" depends on the context - typically you declare a variable inside a function and it is available to that function along with any functions inside that function. http://www.w3schools.com/js/js_scope.asp
Lorrie Pearson
@Lorrie01
Dec 30 2016 04:25
@TylerMoeller thank you!
CamperBot
@camperbot
Dec 30 2016 04:25
lorrie01 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1227 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Idowu Wasiu
@Hoxtygen
Dec 30 2016 04:26
@rajulamsal124 half done.. I just needed to put something there to advance.......... And Moreover i dont much much to add to it... I plan on going back to it when i ahve enough projects to showcase
@rajulamsal124 have you tried using bootstrap?
Raju
@rajulamsal124
Dec 30 2016 04:30
Not yet, But planning to try bootstrap
can you me just reference that how to start it
i know how to make navigation bar and like that stuff but ave some problem just starting it.!
Idowu Wasiu
@Hoxtygen
Dec 30 2016 04:32
@rajulamsal124 get the bootstrap documentation on their website, you can save it or pdf it for offline use... that will get you started..............Oh youtube will help a lot too
@rajulamsal124 gotta go. goodluck
Raju
@rajulamsal124
Dec 30 2016 04:35
Cool!, Thanks a lot , You are so good and helping one!! I JUst Love it.
smile:
:-)
kevinliu6102
@kevinliu6102
Dec 30 2016 04:49
Hi all, I'm working on the random quote machine project right now, and for some reason my tweet button won't appear. Can anyone take a look at my code and let me know what's going wrong?
Tom
@moT01
Dec 30 2016 04:55
@kevinliu6102 looks like you got it?
kevinliu6102
@kevinliu6102
Dec 30 2016 04:57
okay i'm stupid lol
it's because i'm using an adblocker and blocking social media buttons
blocked my own button
Tyler Moeller
@TylerMoeller
Dec 30 2016 05:00
@kevinliu6102 Cool trick I learned, instead of https://twitter.com/.... for your URL to twitter, add a tab https://\ttwitter.com and adblocker won't catch it
kevinliu6102
@kevinliu6102
Dec 30 2016 05:02
oh cool, how does that work lol
Tyler Moeller
@TylerMoeller
Dec 30 2016 05:02
I think most adblockers just use a regular expression to check for the URL, and all browsers ignore whitespaces in URLs
kevinliu6102
@kevinliu6102
Dec 30 2016 05:03
@TylerMoeller hah well thanks i'll make use of that :D
CamperBot
@camperbot
Dec 30 2016 05:03
:star2: 1228 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
kevinliu6102 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
Tyler Moeller
@TylerMoeller
Dec 30 2016 05:04
I've been using that trick in my quote machine for a while now - works great. :)
Tom
@moT01
Dec 30 2016 05:16
that's a nifty trick
so why don't pop up ads do that
Ellie
@ellievo4
Dec 30 2016 05:27
I'm confused on this Codepen's issue. I have been making a scrolling navbar in CodePen. The editor view and debug gave the correct result that I wanted but when I switched to Detail View and Full Page, my result css style became very different. Can anyone explain this issue? thank you so much.
Tom
@moT01
Dec 30 2016 05:28
my browser is not ignoring spaces in my urls
Tyler Moeller
@TylerMoeller
Dec 30 2016 05:29
@ellievo4 If you add all your external JS and CSS resources to the codepen settings, that shouldn't happen. Maybe you can share the codepen URL so we can take a look?
Tom
@moT01
Dec 30 2016 05:29
link the pen
Raju
@rajulamsal124
Dec 30 2016 05:31
Inserting background image in css is not working on codepen
Tom
@moT01
Dec 30 2016 05:31
makes sense
Tyler Moeller
@TylerMoeller
Dec 30 2016 05:35
@ellievo4 I see the same navbar in detail/full page/debug views. What differences are you noticing? Maybe I'm missing something...
Tom
@moT01
Dec 30 2016 05:36
@ellievo4 yea, it all looks good for me
WVKING20
@WVKING20
Dec 30 2016 05:48
How do you make the numbers centered in an ordered list?
Walid Ashri
@walidashri
Dec 30 2016 06:05
@WVKING20 use list-style-position
Praveen Saraogi
@raviloop
Dec 30 2016 07:20
can anyone help me getting project for my final year
Ashish verma
@ashish1500616
Dec 30 2016 07:22
@raviloop what type of project??
Praveen Saraogi
@raviloop
Dec 30 2016 07:25
project in java(jsp and servlets) or in PHP
i needed a web based project to show at my college
and i have less than a month
it carries marks
200
Kshitiz Kumar Srivastava
@KSHITIZ92
Dec 30 2016 07:34
How do i align a pic in center in codepen?
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:00
@KSHITIZ92 Will depend on the context - is it in a div? Bootstrap?
@KSHITIZ92 I've not tried it much, but I believe using the text-center class on the element might work
Darth Skywalker
@adityaparab
Dec 30 2016 08:01
@KSHITIZ92 give certain width to your img and then set margin: 0 auto; on the img
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:01
@adityaparab @KSHITIZ92 Darth wins the day...
Darth Skywalker
@adityaparab
Dec 30 2016 08:02
:laughing:
If I'm to do this challenge I will blindly use flex :D
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:03
Anyone able to tell me what I've done wrong... this was just working and the API is still putting out data to the browser if I put in the URL, but I'm not having any luck getting my function fetchText() to even output a console.log() now
livonian-router
@livonian-router
Dec 30 2016 08:18
@DavidMinAZ Open your codepen using http instead of https
http://codepen.io/dmattiuz/pen/zogGeB?editors=1111
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:20
@livonian-router Nice! I had no idea I had opened it via https... not sure how I managed that
livonian-router
@livonian-router
Dec 30 2016 08:22
@DavidMinAZ The API uses http connection, so it must be matched with your site protocol too
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:22
@livonian-router Thanks! I had no idea, so you've officially taught me something! Really appreciate the assist!
CamperBot
@camperbot
Dec 30 2016 08:22
davidminaz sends brownie points to @livonian-router :sparkles: :thumbsup: :sparkles:
:cookie: 287 | @livonian-router |http://www.freecodecamp.com/livonian-router
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:24
@livonian-router Is there a way to test for a mismatch like that in JS and trigger an alert()?
livonian-router
@livonian-router
Dec 30 2016 08:26
@DavidMinAZ use $.ajaxsetup
$.ajaxSetup({
      "error":function() { alert("error");  }
});
before $.getJSON declaration
DavidMinAZ
@DavidMinAZ
Dec 30 2016 08:37
@livonian-router Fancy. Hadn't looked at the pure AJAX goodies as I should have and instead relied on the stupid $.getJSON or I might have known that one! Thanks, again!
CamperBot
@camperbot
Dec 30 2016 08:37
davidminaz sends brownie points to @livonian-router :sparkles: :thumbsup: :sparkles:
:warning: davidminaz already gave livonian-router points
karthik kashyap
@Karthik-Kashyap
Dec 30 2016 08:55
HELP!!!.....theres a function in javascript that is not being executed in codepen but works on my separate static website.I copied the same html,css and javascript codes from my personal files to codepen.Is there anything that Im missing?
Abhijeet Singh
@abhijeetps
Dec 30 2016 08:58
My Quote Machine is finally ready.
Visit: http://codepen.io/aps120797/full/NbZZvP
Data Detective
@WCoaster77
Dec 30 2016 09:00
@Karthik-Kashyap check the settings button and be sure you have added the appropriate scripts to your pen.
karthik kashyap
@Karthik-Kashyap
Dec 30 2016 09:01
@WCoaster77 i have added all the scripts necesary to run the website.
Ben Carp
@carpben
Dec 30 2016 09:02
Hi everyone, I would like some help with learning. Take a look at http://codepen.io/bencarp/pen/GNVrKB
karthik kashyap
@Karthik-Kashyap
Dec 30 2016 09:04
Ben Carp
@carpben
Dec 30 2016 09:04
Something doesn't work. I guess I it has to do with how I use the Container. What is the best way creating a container that is responsive, but reaches a maximum of 1100 PX as in https://codepen.io/FreeCodeCamp/full/YqLyXB/
karthik kashyap
@Karthik-Kashyap
Dec 30 2016 09:04
its not entering the navigator.geolocation.getCurrentPosition(function(location))... function
Data Detective
@WCoaster77
Dec 30 2016 09:09
@Karthik-Kashyap and your sure you copied everything over from your site and your site is working fine?
Coy Sanders
@coymeetsworld
Dec 30 2016 09:10
@carpben you should write the portfolio project on your own, instructions explicitly say not to look at the example code
containers were covered in HTML/CSS section too, did you complete that section?
Ben Carp
@carpben
Dec 30 2016 09:10
@coymeetsworld I hadn't
I did not look at the example code. I looked at the example design.
Coy Sanders
@coymeetsworld
Dec 30 2016 09:11
um, what's the difference?
you copy and pasted code, you shouldn't be doing that
Ben Carp
@carpben
Dec 30 2016 09:11
You are instructed to look at the design.
Coy Sanders
@coymeetsworld
Dec 30 2016 09:11
yeah but not the code
Data Detective
@WCoaster77
Dec 30 2016 09:11
@carpben maybe post a link to you code pen and not the example.
Coy Sanders
@coymeetsworld
Dec 30 2016 09:12
oh nvm you were just linking the example
Ben Carp
@carpben
Dec 30 2016 09:12
blob
Coy Sanders
@coymeetsworld
Dec 30 2016 09:12
usually people don't do that
Ben Carp
@carpben
Dec 30 2016 09:12
Hi everyone, I would like some help with learning. Take a look at http://codepen.io/bencarp/pen/GNVrKB
Coy Sanders
@coymeetsworld
Dec 30 2016 09:12
yeah ok i see it
container should encompass all your HTML code
including nav bar
Ben Carp
@carpben
Dec 30 2016 09:14
actually in snippet by bootstrap container should be nested inside the navbar.
Coy Sanders
@coymeetsworld
Dec 30 2016 09:14
also where does the class fluid-responsive come from?
Ben Carp
@carpben
Dec 30 2016 09:16
I think I read yesterday that everything should be under such a class. I can recheck it.
Coy Sanders
@coymeetsworld
Dec 30 2016 09:16
don't think that comes from Bootstrap
doesn't matter it shouldn't do anything, but I would remove it
i'm not too familiar with bootstrap but I don't know if its easy to set a max width on the container
with vanilla CSS you would use media queries, perhaps you can mix them
but i wouldn't worry about going into too much detail there with your portfolio, just try to do what you can and pass user stories
then move on to JS, you can always go back and improve the portfolio, thats what I did
Med Aduh
@ramidem
Dec 30 2016 09:20
does SVG count as image in the "Build a Tribute Page" exercise?
Ben Carp
@carpben
Dec 30 2016 09:22
@coymeetsworld thanks. You are right I searched Bootstrap and it didn't come from there. Thanks for your answer.
CamperBot
@camperbot
Dec 30 2016 09:22
carpben sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1697 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
Coy Sanders
@coymeetsworld
Dec 30 2016 09:23
np @carpben, also with codepen you don't have to specify the body tag
or html, and anything that would go in head you can put in the Settings section
just an FYI to simplify your code a bit
karthik kashyap
@Karthik-Kashyap
Dec 30 2016 09:28
@WCoaster77 yes im confident that i copied every source
Ben Carp
@carpben
Dec 30 2016 11:10
Hi, for the portfolio project how do I upload a file to use it online? Can I upload it to google drive and somehow use it a src="google.com/...."?
Raju
@rajulamsal124
Dec 30 2016 11:56
How to make separate page for the scrool
scroll
Raju
@rajulamsal124
Dec 30 2016 12:11
how to start portfolio
i have no idea about the project
i have just finish haeader of page
please help me for furthermore?
Phillip Troutman
@troutman21
Dec 30 2016 13:06
@rajulamsal124 just start creating ! lol I had the same struggle. Just add your pic and an "about me" section then build out from there. Little by little it will come together.
take a look at others just to get some general ideas
hey guys, Im trying to add a red border to my picture on one of my projects can anyone tell me why its not working? http://codepen.io/Troutman21/pen/PbrQqE?editors=1100
Santosh Kumar
@santosh
Dec 30 2016 13:24
Guys I have a CSS bug. :(
Patrick Tran
@tranpatrick01
Dec 30 2016 13:25
Im trying to make my webpage responsive...and i want to tell the webpage when a device is a small/medium i want this kind of font or size of image? Anyone mind helping
Santosh Kumar
@santosh
Dec 30 2016 13:27
Anybody up here?
Patrick Tran
@tranpatrick01
Dec 30 2016 13:29
@santosh whats up?
Santosh Kumar
@santosh
Dec 30 2016 13:34
I have made a navbar. When one hovers over the item, it opens a dropdown menu. But the problem is the area taken on screen when dropdown is open is malfunctioning. When I hover over that area (even when dropdown is not open), the dropdown is opened.
Evan Davis
@davisec52
Dec 30 2016 13:57
@santosh code?
Santosh Kumar
@santosh
Dec 30 2016 13:58
http://www.ajneffects.com/tutorials Just hover your mouse below the navbar. You'll understand.
@davisec52
Santosh Kumar
@santosh
Dec 30 2016 14:05
@davisec52 Did you get the root of the problem?
Ritvars
@RitvarsZ
Dec 30 2016 14:17
How do i access data from a search form in javascript ? (Dumb question, i know 😄)
Patrick Tran
@tranpatrick01
Dec 30 2016 14:18
@santosh i dont understand whats wrong
Ritvars
@RitvarsZ
Dec 30 2016 14:19
@tranpatrick01 Do some reading on the bootstrap framework
Patrick Tran
@tranpatrick01
Dec 30 2016 14:24
@RitvarsZ would you mind giving me a link
Ritvars
@RitvarsZ
Dec 30 2016 14:26
alexg1990
@alexg1990
Dec 30 2016 14:30

hey everyone, I am having problem getting a margin between my title <h2> and the top border of the div it's inside. When changing margin-top of my h2 element it creates a margin between the section it's nested in as well as the section, which is above it.

<main>
  <section id="about" class="page-two">
    <div id="text-me">
        Front-End Developer and UX/UI designer, with practical experience</br> in project management, branding strategy, and creative direction;</br> devoted to functional programming and information architecture.
      <div id="line">
      </div>
  <p style="font-size:1.1em">Web Developer - User Experience Designer - Graphic Artist</p>
    </div>
      <a href="#">
      <img id="me" src="https://pbs.twimg.com/profile_images/797179192655970305/rBM5KDUR.jpg">
      </a>
    </div>
  </section>
  <section id="portfolio" class="page-three">
    <h2 class="title">PORTFOLIO</h2>
  </section>
</main>

the relevant part is in the 3rd to last row

since I am guessing the relevant CSS is needed, here is the codepen: http://codepen.io/alexg1990/pen/oYmvKN?editors=1100
guddutopper
@guddutopper
Dec 30 2016 14:55
I am supposed to make an portfolio webpage , I looked at the sample page code ( not for cheating ) , there i see that a lot of Javascript is used , how am i supposed to do it if we would learn javascript after this page ( according to the freecodecamp schedule ) , I have done the basic HTML part of the page !
Ritvars
@RitvarsZ
Dec 30 2016 15:06
@guddutopper you are not obligated to use javascript, just make somethjng similar to the sample page with the knowledge yo have
guddutopper
@guddutopper
Dec 30 2016 15:08
But it will not look like sample page , it will look like the tribute page we made as it wont have the features of javascript
kenobijr
@kenobijr
Dec 30 2016 15:11

Hello everybody, I got following problem with my weather viewer.
My js works this way:

  • initiated with function get_location
  • get_location catches lat and lon and calls function get_weather (with lat and lon as arguments)
  • get_weather catches the json data from the api and stores it in my main_object at top
  • finally in get_weather the function update_ui_temp is called
  • update_ui_temp is called with the updated data from the main_object as arguments to update all DOM temperature units

But update_ui_temp doesn´t work. It only produces "undefinded" values, bot not the updated degree. And that although i generate the values before calling the update function :(
Anybody got an idea? Would be great and & thank you in advance!! ;)

Tom
@moT01
Dec 30 2016 15:26
@kenobijr works when you move the update_ui_temp inside your .getjson
Ritvars
@RitvarsZ
Dec 30 2016 15:31
@guddutopper The sample page is just a refrence, so you see what you are aiming for. It doesn't have to be identical to the sample. If you know js, you can use it for some animations or something, but for a portfolio page it's not really necessary. Here's my portfolio I made a while back: http://codepen.io/Ritvars/full/ZWqadW/
kenobijr
@kenobijr
Dec 30 2016 15:37
@moT01 I know, at first I had the code inside it. But i need the update ui outside, because I want to use it to update changes between F and C without catching all the json data from the api again and again. with this function, only the temperature units are updated and the other infos not
but it should work outside of these functions too, i don´t understand why not.....
Tom
@moT01
Dec 30 2016 16:16
@kenobijr yea, im not sure what the problem is, ...seems like those value should stay updated but they arent
kenobijr
@kenobijr
Dec 30 2016 16:44
@moT01 yes, it´s strange! thank you anyway :)
CamperBot
@camperbot
Dec 30 2016 16:44
kenobijr sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 444 | @mot01 |http://www.freecodecamp.com/mot01
c0d0er
@c0d0er
Dec 30 2016 17:13
could anybody explain the function of const handleAsync and the Redux.applyMiddleware(ReduxThunk.default) in the following code?
const REQUESTING_DATA = 'REQUESTING_DATA'
const RECEIVED_DATA = 'RECEIVED_DATA'

const requestingData = () => { return {type: REQUESTING_DATA} }
const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }

const handleAsync = () => {
    return function(dispatch) {
        dispatch(requestingData());
        setTimeout(function() {
            let data = {
                users: ['Jeff', 'William', 'Alice']
            }
            dispatch(receivedData(data));
        }, 2500);
    }
};

const defaultState = {
    fetching: false,
    users: []
};

const asyncDataReducer = (state = defaultState, action) => {
    switch(action.type) {
        case REQUESTING_DATA:
            return {
                fetching: true,
                users: []
            }
        case RECEIVED_DATA:
            return {
                fetching: false,
                users: action.users
            }
        default:
            return state;
    }
};

const store = Redux.createStore(
    asyncDataReducer,
    Redux.applyMiddleware(ReduxThunk.default)
);
nabinsademba
@nabinsademba
Dec 30 2016 17:14
wc reshma
Reshmaraayee
@Reshmaraayee
Dec 30 2016 17:15
Dhanyabaad sademba
😂😂😂
nabinsademba
@nabinsademba
Dec 30 2016 17:16
thankyou @Reshmaraayee
CamperBot
@camperbot
Dec 30 2016 17:16
nabins13 sends brownie points to @reshmaraayee :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @reshmaraayee |http://www.freecodecamp.com/reshmaraayee
Reshmaraayee
@Reshmaraayee
Dec 30 2016 17:20
Thank you @nabins13
CamperBot
@camperbot
Dec 30 2016 17:20
reshmaraayee sends brownie points to @nabins13 :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @nabins13 |http://www.freecodecamp.com/nabins13
Venkatesh Thapan
@thenerdyouknow
Dec 30 2016 18:03
I started the random quote machine and I'm completely lost on how to use an API. I found one http://forismatic.com/en/api/ but have no clue on how to implement it. Some help please?
ricky2412
@ricky2412
Dec 30 2016 18:20
how to navigate to different sections of the webpage by clicking buttons in the navigation
Idowu Wasiu
@Hoxtygen
Dec 30 2016 18:27
@thenerdyouknow thats what i used too,.... you still there?
@thenerdyouknow could show you how i implement it if you like
Venkatesh Thapan
@thenerdyouknow
Dec 30 2016 18:28
@Hoxtygen Yes please.
@thenerdyouknow sorry cos there are no comment cos i never intend to put it up on gist... just decided to do that now that you asked
Venkatesh Thapan
@thenerdyouknow
Dec 30 2016 18:32
@Hoxtygen Thanks.
CamperBot
@camperbot
Dec 30 2016 18:32
:cookie: 305 | @hoxtygen |http://www.freecodecamp.com/hoxtygen
thenerdyouknow sends brownie points to @hoxtygen :sparkles: :thumbsup: :sparkles:
c0d0er2
@c0d0er2
Dec 30 2016 18:48
Could anybody please help me get all the images the same size without stretching them? https://codepen.io/c0d0er2/pen/oYrppg
Abdelrahman
@ARhman
Dec 30 2016 19:27
guys does anyone know why this line is not working? am I typing it incorrectly?
$("#content").append("<div class='well'><h4><a target='_blank' href='https://en.wikipedia.org/?curid=" + id + "'>" + item.title + "</a></h4></div>");
Tyler Moeller
@TylerMoeller
Dec 30 2016 19:44
@c0d0er2 You might want to read more about the different ways to get your images the same size here: https://www.sitepoint.com/maintain-image-aspect-ratios-responsive-web-design/. Since there are only a few images, you may just want to resize them by hand so they all have the same aspect ratio.
c0d0er2
@c0d0er2
Dec 30 2016 19:47
@TylerMoeller Thanks!
CamperBot
@camperbot
Dec 30 2016 19:47
c0d0er2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1230 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Alan Sato
@Halfcreative
Dec 30 2016 20:01
I feel lost on the Random Quote Machine project, a lot of example code is using a lot of code that wasnt introduced in the JSON API section. The JSON API section is also labeled API and AJAX and i have no clue what AJAX is
I found an API to use but i can't even get simple code to work on codepen
Alan Sato
@Halfcreative
Dec 30 2016 20:06
Am i missing something? I feel like i wasn't introduced to any of the necessary concepts to properly use an api. just how to call one out of context
Tyler Moeller
@TylerMoeller
Dec 30 2016 20:11

@Halfcreative The closest instructions we got were in this challenge: https://www.freecodecamp.com/challenges/get-json-with-the-jquery-getjson-method
This is the code we had to write:

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

It will be the same when calling a quotes API, with some exceptions like crossorigin restrictions.
This Quotes API does a good job of explaining how to use it in more detail - you can take that knowledge and apply it to other APIs in the future: https://quotesondesign.com/api-v4-0/

Alan Sato
@Halfcreative
Dec 30 2016 20:13
@TylerMoeller i cant even get the basic code to change something in codepen to work lol. Even the example code from before the cat pictures of just changing the message
Tyler Moeller
@TylerMoeller
Dec 30 2016 20:13
@Halfcreative Show me your codepen and I'll see if I can help
Alan Sato
@Halfcreative
Dec 30 2016 20:15
It's literally the copy pasted code from the change text excercise cus i wanted to get that basic function working. but here: http://codepen.io/halfcreative/pen/Xprrwm
i dont understand why the message wont change
let alone move on to something where im storing api data
Tyler Moeller
@TylerMoeller
Dec 30 2016 20:17
@Halfcreative One of your most helpful tools when debugging will be the browser's dev tools console. Press Ctrl+Shift+J to see the errors you're getting (Command+Shift+J on Mac)
Alan Sato
@Halfcreative
Dec 30 2016 20:18
$ is not defined?
Tyler Moeller
@TylerMoeller
Dec 30 2016 20:18
Click the settings button and add jQuery, then your code will work
Alan Sato
@Halfcreative
Dec 30 2016 20:20
Ok, i see that codepen has a add jQuery quickadd button, how would i add jQuery to a site not on codePen
thank you @TylerMoeller btw
CamperBot
@camperbot
Dec 30 2016 20:20
halfcreative sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1231 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Tyler Moeller
@TylerMoeller
Dec 30 2016 20:21
No problem, to add jQuery, you typically add this as the very last line before your closing </body> tag:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
Alan Sato
@Halfcreative
Dec 30 2016 20:31
@TylerMoeller if you're still there, If i follow the walkthrough on JSON rest api by CSS tricks from the site you mentioned, will i need to also set up the wordpress api? or just the quote site's api
Tyler Moeller
@TylerMoeller
Dec 30 2016 20:33
@Halfcreative No need to set up the wordpress API, you can just copy and paste the code directly into your codepen to see how it works:
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
  $("body").append(a[0].content + "<p>— " + a[0].title + "</p>")
});
That code will return the same quote over and over again due to caching
Don Price
@KingHippo
Dec 30 2016 20:46
Could someone tell me how I can get two elements to be the same size regardless of content? Here is the example. https://jsfiddle.net/3e43ugdy/
jaasirn
@jaasirn
Dec 30 2016 20:49
Not the answer you're looking for, but a cheap fix is just use <br> tags to fill the content
you could also do padding-bottom in css
padding-bottom:216px; add that to aside css and viola
Don Price
@KingHippo
Dec 30 2016 20:55
@jaasirn I'll give that a try thanks!
CamperBot
@camperbot
Dec 30 2016 20:55
kinghippo sends brownie points to @jaasirn :sparkles: :thumbsup: :sparkles:
:cookie: 50 | @jaasirn |http://www.freecodecamp.com/jaasirn
Ian Lee
@asparism
Dec 30 2016 21:16
does anyone know why the sliders on this codepen disappear on full page view? https://codepen.io/Asparism/pen/ENNxBP
Camel_Actual
@Camel92
Dec 30 2016 21:31
Quick question for you guys, how can I img src a picture from my desktop to codepen?
Charan Teja
@charan1922
Dec 30 2016 21:40
@Camel92 not possible in code pen
@James-N-M nice
Camel_Actual
@Camel92
Dec 30 2016 21:44
@charan1922 that's what I thought, I just wanted to be sure though. Do you know of any way to use my personal pictures on codepen?
Bill Hefty
@bhefty
Dec 30 2016 21:48
@Camel92 I created a Cloudinary account for use with the projects and just use an img tag to reference the Cloudinary URL
Tyler Moeller
@TylerMoeller
Dec 30 2016 21:48

@KingHippo Use min-height

section,
aside {
  min-height: 225px;
}

Do not use <br>, it is not intended for creating space between lines: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br#Notes

Camel_Actual
@Camel92
Dec 30 2016 21:50
@bhefty You got an example? Is it just <img src=" whatevs "> ?
Tyler Moeller
@TylerMoeller
Dec 30 2016 21:50
@Camel92 Lots of people use https://postimage.org for this - upload your image from your desktop and you'll get a URL you can use after <img src=
jaasirn
@jaasirn
Dec 30 2016 21:51
@jaasirn
http://youarethevote.com can some1 go to my site and hit the left arrow and tell me what page it takes you to
Getting different results on computer and phone
Bill Hefty
@bhefty
Dec 30 2016 21:51
@Camel92 Yeah, just a normal tag like that. Cloudinary gives you a URL that links directly to the image. One of my tags from a project: <img src="http://res.cloudinary.com/bhefty/image/upload/v1473814994/nychead_rcjqkj.png" alt="Bill Hefty" class="img-thumbnail selfie-pic" />

@jaasirn `Not Found

The requested URL /104.html was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.`

jaasirn
@jaasirn
Dec 30 2016 21:53
@bhefty Thanks so much, it's been quite the hassle to get one person to test that
CamperBot
@camperbot
Dec 30 2016 21:53
jaasirn sends brownie points to @bhefty :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @bhefty |http://www.freecodecamp.com/bhefty
Bill Hefty
@bhefty
Dec 30 2016 21:53
@jaasirn No problem!
Good luck
Camel_Actual
@Camel92
Dec 30 2016 21:54
@bheftyg Good stuff. I tried to work around it with google pictures but it didnt work out, hopefully i'll get it with cloudinary. Thanks for the help.
CamperBot
@camperbot
Dec 30 2016 21:54
camel92 sends brownie points to @bheftyg :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for bheftyg
Camel_Actual
@Camel92
Dec 30 2016 21:54
@bhefty Good stuff. I tried to work around it with google pictures but it didnt work out, hopefully i'll get it with cloudinary. Thanks for the help.
CamperBot
@camperbot
Dec 30 2016 21:54
camel92 sends brownie points to @bhefty :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @bhefty |http://www.freecodecamp.com/bhefty
Bill Hefty
@bhefty
Dec 30 2016 21:54
@Camel92 Sure thing, good luck!
c0d0er2
@c0d0er2
Dec 30 2016 22:22
@TylerMoeller Thanks! My code looks awesome now!
CamperBot
@camperbot
Dec 30 2016 22:22
c0d0er2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1232 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Andrew Owino
@AndyCodez
Dec 30 2016 22:29
Hi guyz, anybody willing to share a link to their Random Quote Machine? I'm done with mine except that I am still in need of some design inspiration.
Purcea Robert
@RobertPurcea
Dec 30 2016 23:01
@AndyCodez not my project but I like this one XD http://codepen.io/miukimiu/pen/adJOQO
robdesautel
@robdesautel
Dec 30 2016 23:46
Hey everyone....I have a rather basic frontend question...I have seen on a lot of angularjs templates the devs use the index.html as the landing page for all the scripts and css with no data storage. They would use the ng-app ui-view to use ui.router to load templates and such. What I was wondering is how do I load a page thats not the index.html?
and use the styles and JS that was listed on the index.html