These are chat archives for FreeCodeCamp/HelpFrontEnd

20th
Apr 2016
Brendan Jackson
@BrendanJackson
Apr 20 2016 00:09

I'm on the last major hurdle of my portfolio page, I neglected to build it mobile 1st because I've been getting away with using container-fluid through bootstrap and things just worked out in the past. I'm unsure of what the reason is but here's what I've run into.

My nav bar is responsive but the rest of the page is not. The 1st thing I notice is that my text won't wrap, even using body{word-wrap: break-word; word-break:break-all;} div{word-wrap: break-word; word-break:break-all;} .
My pictures are also all over the place. Just for starters, how do I make my text mobile friendly?

Here is a link to my page: http://codepen.io/brendanjackson/full/VaMEwO/

Randy Goldsmith
@Dueldrawer8
Apr 20 2016 00:17
alright im confused.. just started twitch api project.. just need to get started. I have some code that I thought should print to the console but not working.. i hint would be nice :)
$.getJSON('https://api.twitch.tv/kraken/streams/search/freecodecamp?callback=?', function(data){
    console.log(JSON.stringify(data));
  })
Bruce Young
@mutantspore
Apr 20 2016 00:20
@Dueldrawer8 leave out the word search … make sure you have jQuery running :)
$.getJSON('https://api.twitch.tv/kraken/streams/freecodecamp?callback=?', function(data){ console.log(JSON.stringify(data)); })
Randy Goldsmith
@Dueldrawer8
Apr 20 2016 00:20
@mutantspore sounds good, thank you
CamperBot
@camperbot
Apr 20 2016 00:20
dueldrawer8 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1433 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 20 2016 00:21
@Dueldrawer8 you won’t get that much back as they are not streaming right now. try monstercat instead of free code camp to see one that’s currently streaming
$.getJSON('https://api.twitch.tv/kraken/streams/monstercat?callback=?', function(data){ console.log(JSON.stringify(data)); })
Randy Goldsmith
@Dueldrawer8
Apr 20 2016 00:23
@mutantspore i see.. plenty of data there
John Drevniok
@johndrevniok
Apr 20 2016 00:23
Hello campers. Did you use an API for the random quotes? If so, which one? I was thinking it would be more challenging to use an API rather than a hard coded array.
Islam Ibakaev
@dagman
Apr 20 2016 00:32
is there anyone who get certification on freecodecamp?
Juwdohr
@Juwdohr
Apr 20 2016 00:35
Hey wondering if I can get some help. Trying to get the Contact Social buttons to align like the Home social buttons. Please help.
https://codepen.io/juwdohr/pen/vGdMRW?editors=1100
Frank XC
@tenkdayz
Apr 20 2016 00:36
@Juwdohr use display inline-block
Juwdohr
@Juwdohr
Apr 20 2016 00:37
@tenkdayz where at?
Frank XC
@tenkdayz
Apr 20 2016 00:38
@Juwdohr give all the buttons a class then apply disp inlineblock on the css
Frank XC
@tenkdayz
Apr 20 2016 00:46
@Juwdohr I tried.. i dont know why the page is not responding.
Jayson Ash
@ScriptGeek
Apr 20 2016 00:49
I hate it when I break stuff and I can't figure out why it doesn't work anymore
Jonathan Coleman
@jondcoleman
Apr 20 2016 00:57
that's the life of a developer unfortunately @ScriptGeek
:(
nsloc22
@nsloc22
Apr 20 2016 01:06
anyone is doing react projects? http://codepen.io/nsloc22/full/KzoQEg/
Jayson Ash
@ScriptGeek
Apr 20 2016 01:09
@jondcoleman well, I figured it out... that only killed 30 minutes, so I guess it's not too bad this time. :p
mixu1308
@mixu1308
Apr 20 2016 01:41
Can someone help me? http://codepen.io/mixu1308/pen/MyGvVL I'm trying to put the picture to right of the text
Bruce Young
@mutantspore
Apr 20 2016 01:55
@mixu1308 have a look at Bootstrap media objects
http://getbootstrap.com/components/#media
cmf89
@cmf89
Apr 20 2016 01:55
@nsloc22 there is a channel HelpDataViz where you might get more help with the react projects... most of the traffic in this channel is for the front end development projects with html/css/js
Jayson Ash
@ScriptGeek
Apr 20 2016 01:56
@mixu1308 try removing the col-xs-offset-7 class from the parent div of the image
anthonygallina1
@anthonygallina1
Apr 20 2016 02:01
@mutantspore good link thank you
CamperBot
@camperbot
Apr 20 2016 02:01
anthonygallina1 sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1434 | @mutantspore | http://www.freecodecamp.com/mutantspore
MrDrBird
@MrDrBird
Apr 20 2016 02:03
Can anyone recommend a good api source for the random quote machine?
the api i am currently using doesnt allow me to access a random quote, only one they change every few minutes: http://codepen.io/MrDrBird/pen/XdYgXR
I personally used the Mashape one
MrDrBird
@MrDrBird
Apr 20 2016 02:06
@mutantspore Thank you. Ill check it out!
CamperBot
@camperbot
Apr 20 2016 02:06
mrdrbird sends brownie points to @mutantspore :sparkles: :thumbsup: :sparkles:
:star: 1435 | @mutantspore | http://www.freecodecamp.com/mutantspore
Bruce Young
@mutantspore
Apr 20 2016 02:07
@MrDrBird I think some have used the Wiki Quotes API
Alex Evans
@alex-evans
Apr 20 2016 02:11
Hi, I'm working on the React Project Markdown Previewer and I'm really struggling with wrapping my brain around how to bind the editor to the viewer. I've gone the through the React Tutorial but still struggling with it. Anyone able to point me to something that might make me grasp it a bit better. Here is my code so far, I know I need to have the MarkdownView bind to the editor but not catching how to do that. Any advice / reading / videos would be appreciated. Thanks.
http://codepen.io/alcatrats/pen/dMemrx?editors=1010
Bruce Young
@mutantspore
Apr 20 2016 02:12
help rooms
CamperBot
@camperbot
Apr 20 2016 02:12

:point_right: help rooms [wiki]

FreeCodeCamp Chat Rooms

Help Rooms

Chat Room Description Chat Room
HTML/CSS/Bootstrap FreeCodeCamp/Help
JavaScript/Algorithms FreeCodeCamp/HelpJavaScript
Front End FreeCodeCamp/HelpFrontEnd
Data Visualization FreeCodeCamp/HelpDataViz
Back End FreeCodeCamp/HelpBackEnd

Choose the right room for your questions!

See also: :earth_asia: Language Specific | :satellite: Technology | :crystal_ball: Miscellaneous

back to top

:pencil: read more about help rooms on the FCC Wiki

Bruce Young
@mutantspore
Apr 20 2016 02:12
@alex-evans try the DataViz room
Alex Evans
@alex-evans
Apr 20 2016 02:13
Thanks, didn't realize there was one. Appreciate it.
Casey Heath
@ExhibitArts
Apr 20 2016 03:28
Opinions on my blog website, please? - http://www.bernieblogger.byethost8.com/
icode9
@icode9
Apr 20 2016 03:40
how I can make navigate to different sections by clicking buttons like this ? https://codepen.io/hallaathrad/full/vNEPpL
Frank XC
@tenkdayz
Apr 20 2016 03:41
@icode9 you want it to snap or scroll?
icode9
@icode9
Apr 20 2016 03:42
@tenkdayz scroll
Rada
@Radascript
Apr 20 2016 04:07
how adorable is the tiny html frame of the calculator
:3
Brett Guillory
@kurzninja
Apr 20 2016 04:35
hey, is anyone using Pug with Express yet?
buiphuking
@buiphuking
Apr 20 2016 04:37
hi guys, why ?
 return 1.01 + 2.05;  // = 3.0599999999999996
Brett Guillory
@kurzninja
Apr 20 2016 04:38
It has to do with the way Javascript handles decimals
as floating point numbers
so there's always some rounding error
try multiplying both numbers by 10 or 100 first, add them, then divide by 10 or 100, whichever you used
Rada
@Radascript
Apr 20 2016 04:45
or you can also used "toFixed()" and "parseFloat()" that's what I did when I needed it for the change bonfire, although I heart there's something not good about it
buiphuking
@buiphuking
Apr 20 2016 04:45
i do Exact Change, i don't get the right result because of that thing, i'm tired
Rada
@Radascript
Apr 20 2016 04:46
@buiphuking yeah it took me a few days, it's a tough one. Play with those functions, you'll get there.
buiphuking
@buiphuking
Apr 20 2016 04:46
i have just did, i'm happy now
@Radascript thanks! @kurzninja
CamperBot
@camperbot
Apr 20 2016 04:46
buiphuking sends brownie points to @radascript and @kurzninja :sparkles: :thumbsup: :sparkles:
:star: 441 | @kurzninja | http://www.freecodecamp.com/kurzninja
:star: 317 | @radascript | http://www.freecodecamp.com/radascript
sterstar
@sterstar
Apr 20 2016 04:50
Guys! What is an id attribute and why is it used?
mostlind
@mostlind
Apr 20 2016 04:51
For the wikipedia viewer project, I keep getting a message saying "No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access." and I'm unsure of what to do about it.
@sterstar it allows you to give a name to an individual element, so you can style that specific element with #idYouChose in your css
sterstar
@sterstar
Apr 20 2016 04:57
@mostlind but why use id attribute instead of class? any difference in implementation?
Brett Guillory
@kurzninja
Apr 20 2016 04:57
@sterstar IDs are designed to be unique on a page, pointing to one specific element, and classes are designed to be mixed and reused over and over
You'd use IDs to select specific elements such as in a table of data or something like that
Say you had a table of record albums that had the album title, cover art, track list, etc
and you wanted to edit one of them
each album would have a unique ID so you could tell it apart from other albums
so if you had a table of this data, you'd use the ID to get to the row containing that album's data
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:00
Hi, quick question: Is there any reason the function .getJSON wouldn't be able to take variables?
sterstar
@sterstar
Apr 20 2016 05:00
@kurzninja Oh,now I get it. thank you
CamperBot
@camperbot
Apr 20 2016 05:00
sterstar sends brownie points to @kurzninja :sparkles: :thumbsup: :sparkles:
:star: 442 | @kurzninja | http://www.freecodecamp.com/kurzninja
Brett Guillory
@kurzninja
Apr 20 2016 05:01
what kind of variables @JacobHanawalt ?
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:01
A URL saved as a string
@kurzninja
Brett Guillory
@kurzninja
Apr 20 2016 05:01
that should work just fine, the URL should be the first argument passed into it
are you getting an error?
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:03
Yeah, I thought I was doing everything right but it never works. I'm not getting an error exactly, but everything inside of the second argument, a function, doesn't do anything
I put a console.log() in there to test it and nothing happens
Brett Guillory
@kurzninja
Apr 20 2016 05:04
can you show me your .getJSON() function?
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:05
 $.getJSON(apiCustom, function(data) {

          console.log("Success");
I can give you a link to the whole CodePen if you'd like
Brett Guillory
@kurzninja
Apr 20 2016 05:05
what's the value of your apiCustom variable
sure, let's see it
Brett Guillory
@kurzninja
Apr 20 2016 05:08
hmm
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:09
Even when I copy paste the url that should be assigned to apiCustom it takes me to the right place. Very confused haha
Greg Duncan
@GregatGit
Apr 20 2016 05:12
@JacobHanawalt what is your problem?
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:13
@GregatGit My .getJSON function doesn't seem to work and I can't figure out why
Brett Guillory
@kurzninja
Apr 20 2016 05:13
hmm
weird
I took your navigator function handler and closed it after assigning those variables
and now stuff happens
but the lat and long are undefined
as expected
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:14
So something in there might be messing it up further down?
Brett Guillory
@kurzninja
Apr 20 2016 05:15
I'm not sure
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:16
Maybe I should just start over
Brett Guillory
@kurzninja
Apr 20 2016 05:17
i don't see what would be holding anything up
you're changing some HTML insides
that's all
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:18
@kurzninja In my original code everything is inside of the location handler, could that be an issue?
Brett Guillory
@kurzninja
Apr 20 2016 05:20
i don't think so
i would almost say it could be an issue with the API not responding because there seems to be a once per 10 minutes limit on checking it
but that doesn't really explain your problem
Greg Duncan
@GregatGit
Apr 20 2016 05:21
I cut and pasted the url directly in and it worked
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:21
@GregatGit Same, it's really strange
I don't know how I messed this project up so bad it's unfixable haha
Brett Guillory
@kurzninja
Apr 20 2016 05:23
i can't see what's holding it up
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:23
What do you think I should do?
Brett Guillory
@kurzninja
Apr 20 2016 05:24
I'm not sure
FYI, you can use $('someelement').click() instead of .on('click', ...)
just some short hand sugar
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:25
@kurzninja Ah, thanks for the tip haha
CamperBot
@camperbot
Apr 20 2016 05:25
jacobhanawalt sends brownie points to @kurzninja :sparkles: :thumbsup: :sparkles:
:star: 443 | @kurzninja | http://www.freecodecamp.com/kurzninja
Javier
@sh1g
Apr 20 2016 05:25
@JacobHanawalt I'm getting Lat and Long on your codepen
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:26
@sh1g Sorry, what do you mean?
Javier
@sh1g
Apr 20 2016 05:27
I found the error
prepend your url with http://
I get a Success on the console
Brett Guillory
@kurzninja
Apr 20 2016 05:27
I tried that too
but it didn't change anything
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:28
@sh1g OH MY GOD
I think that did it for me
Javier
@sh1g
Apr 20 2016 05:28
I get an output on the console with all the data
Brett Guillory
@kurzninja
Apr 20 2016 05:28
that still doesn't work for me
I'm on Chrome
Javier
@sh1g
Apr 20 2016 05:29
same here. I changed the apiCustom variable
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:29
@sh1g Thank you so much, I've been trying to fix that for an ungodly amount of time
CamperBot
@camperbot
Apr 20 2016 05:29
jacobhanawalt sends brownie points to @sh1g :sparkles: :thumbsup: :sparkles:
:star: 295 | @sh1g | http://www.freecodecamp.com/sh1g
Brett Guillory
@kurzninja
Apr 20 2016 05:29
me too
no difference for me
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:29
@kurzninja It works for me, that's strange. Did you reload the page?
Brett Guillory
@kurzninja
Apr 20 2016 05:30
when I click the button it gives me the meesage about insecure origins
but that's it
Greg Duncan
@GregatGit
Apr 20 2016 05:31
try putting http: on the front @JacobHanawalt
Brett Guillory
@kurzninja
Apr 20 2016 05:31
still doesn't work for me
I even made sure that Codepen had always access to location data
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:32
@GregatGit That did it for me! thanks
CamperBot
@camperbot
Apr 20 2016 05:32
jacobhanawalt sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:star: 425 | @gregatgit | http://www.freecodecamp.com/gregatgit
Brett Guillory
@kurzninja
Apr 20 2016 05:32
well, at least it's working for you
weird
i'm off to bed now folks
see ya! :)
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:32
@kurzninja Yeah, thanks for sticking with me on it!
CamperBot
@camperbot
Apr 20 2016 05:32
jacobhanawalt sends brownie points to @kurzninja :sparkles: :thumbsup: :sparkles:
:warning: jacobhanawalt already gave kurzninja points
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:33
Goodnight!
Greg Duncan
@GregatGit
Apr 20 2016 05:33
Sweet!
@JacobHanawalt just a small thing - you have initialised apiCustom twice
Jacob Hanawalt
@JacobHanawalt
Apr 20 2016 05:34
Oop, thanks!
Javier
@sh1g
Apr 20 2016 05:36
btw if you all haven't heard. There's a free 3 month promotion on Codepen Pro following this link https://codepen.io/promo/net-mag
CJ
@kaduku21
Apr 20 2016 05:59
I'm having an issue with my codepen. For some reason, it seems my CSS style property isn't working. I have my <style> tags in the CSS box, and I have bootstrap enabled. Is there anything I'm missing?
kirbyedy
@kirbyedy
Apr 20 2016 06:01
@kaduku21 maybe, but we should see you code because your monitor is a bit far away from here :D
CJ
@kaduku21
Apr 20 2016 06:01
I guess that would make sense lol. Give me one second
'<h1 class="red-text"> Hello World!</h1>'
That's what's in my html box
<style>
h1 {
font-size: 30px;
}
</style>
This is what's in my CSS box. I pretty much have no clue why CSS isn't working.
kirbyedy
@kirbyedy
Apr 20 2016 06:04
are you working on codepen ?
CJ
@kaduku21
Apr 20 2016 06:04
Yes I am
kirbyedy
@kirbyedy
Apr 20 2016 06:04
can you give us the link to that pen
you dont have this in your css right ? <style>
only h1 {...
keep in mind that bootstrap can be pain to deal with sometimes
Stanley
@stanleyyylau
Apr 20 2016 06:05
thanks to @kirbyedy I finally finish my wiki viewer http://codepen.io/stanleyyylau/full/LNrOwa/
CamperBot
@camperbot
Apr 20 2016 06:05
stanleyyylau sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 893 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
kirbyedy
@kirbyedy
Apr 20 2016 06:05
ooops :)
Casey Heath
@ExhibitArts
Apr 20 2016 06:06
This message was deleted
kirbyedy
@kirbyedy
Apr 20 2016 06:06
well thats nice to hear :thumbsup: @stanleyyylau
CJ
@kaduku21
Apr 20 2016 06:06
I do have the <style> tags in there.
CJ
@kaduku21
Apr 20 2016 06:06
Oh my God, that was the issue the whole time
kirbyedy
@kirbyedy
Apr 20 2016 06:07
@kaduku21 yep
CJ
@kaduku21
Apr 20 2016 06:07
I took the <style> tags out. Thanks for your help!!!
kirbyedy
@kirbyedy
Apr 20 2016 06:07
:thumbsup:
@stanleyyylau heeeey... wanna improve it a bit ?
Stanley
@stanleyyylau
Apr 20 2016 06:09
@kirbyedy haha, yup, that's what i'm think about
kirbyedy
@kirbyedy
Apr 20 2016 06:09
how about this...
if some crazy user types in... aksdjhgfaksdjhfgaksd no results is given
so you might consider giving him an error message
like... no results or, we could not find anything for you...
just any kind of message
Stanley
@stanleyyylau
Apr 20 2016 06:10
i donno whether FCC will allow me to come back and polish my code after getting certification, there's still lots improvement in my code
@kirbyedy that's great idea
i'll try that
kirbyedy
@kirbyedy
Apr 20 2016 06:11
@stanleyyylau yes, you can add/change your project anytime
if you learn something new, you should improve your projects
Stanley
@stanleyyylau
Apr 20 2016 06:17
done, now type in something invalid will result in a alert box alert user to type something else
haha, cool, i think i will add some animation and other library to make it look better later on, now it looks a bit outdated
kirbyedy
@kirbyedy
Apr 20 2016 06:24
yes, some styling would be nice
oh just noticed... it says ramdon instead on random
Stanley
@stanleyyylau
Apr 20 2016 06:26
oh, thanks, i'll corret that
abhinav422
@abhinav422
Apr 20 2016 06:33
how to increase the width of a line??
Pete
@petegarvin1
Apr 20 2016 06:41
Anyone needing some algo practice I can't recommend codewars highly enough www.codewars.com/r/yfzYFQ
Javier
@sh1g
Apr 20 2016 06:54
@Spacecamel100 that looks fun!
sadlyj
@sadlyj
Apr 20 2016 07:01
if I wanted to post a block of my code in chat, how do I go about doing that?
kirbyedy
@kirbyedy
Apr 20 2016 07:06
help format
CamperBot
@camperbot
Apr 20 2016 07:06

:point_right: code formatting [wiki]

Multi line Code

```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)

<paste your code here>,
then press [shift + enter ⏎]

``` ⇦ Type 3 backticks, then press [enter ⏎]

Single line Code

This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.

See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics

:pencil: read more about code formatting on the FCC Wiki

sadlyj
@sadlyj
Apr 20 2016 07:12
<div class="formcontainer">
        <form class="searchform" action="#">
            <label class="hometype"><input type="radio" name="house-apartment">House</label>
            <label class="hometype"><input type="radio" name="house-apartment">Apartment</label>
            <label class="buyrent"><input type="radio" name="buy-rent">Buy</label>
            <label class="buyrent"><input type="radio" name="buy-rent">Rent</label>
            <input type="text" placeholder="Enter area code" required>
            <button type="submit">Search properties</button>

        </form>
I am just messing around pretending to make a real estate webpage (just started learning two days ago) and I wanted to make a form that gave options for choosing between buying and renting, and then whether you want a home or apartment, with an input text for your desired area code to search for properties. I wanted to make it where house & apartment are on the first line, buy or rent on the second, and the area code input on the third. Is my html okay for this? and then what would I have to add to the css to achieve this? I have been trying for awhile now and cant figure it out.
.formcontainer {
    background-color: cornflowerblue;
    text-align: center;
    font-family: Palatino serif;
}
.searchform {

}
.hometype {
    display: block;
}
.buyrent {
    display: inline-block;
}
Heres my css. Sorry if my coding is horrible... like I said I have just started :(
@kirbyedy thanks for the format help btw
CamperBot
@camperbot
Apr 20 2016 07:14
sadlyj sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 894 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Chad Kreutzer
@ChadKreutzer
Apr 20 2016 07:19
okay, I'm working on a practice project I decided to do on my own (a website for a friend). I'm trying to make a random testemonial show up in a particular div from a .json file. I haven't got to the point of coding the random part, I just want the damn thing to show up. Would anyone mind taking a look and if so, how do I share a cloud 9 project in here?
Nikolay Neykov
@shkurata
Apr 20 2016 07:22
Hello
I need some help with my Simon game app
Ravi Gupta
@meeravi007
Apr 20 2016 07:23
hello guys
i need help
James
@James129
Apr 20 2016 08:15
" Use whichever libraries you need. Give it your own personal style."
Where are the libraries?
???
Chad Kreutzer
@ChadKreutzer
Apr 20 2016 08:16
@James129 which project? they are referring to things like bootstrap, jquery, or any number of frameworks. heck, you could just do it with HTML and CSS if you wanted to, but that'd be a bit of a challenge--especially in making it responsive.
kirbyedy
@kirbyedy
Apr 20 2016 08:19
@James129 on the internet :D
they assume you will search for them and learn to use them
James
@James129
Apr 20 2016 08:20
lol
ok
kirbyedy
@kirbyedy
Apr 20 2016 08:22
@James129 what project are you on, tell us and we can give you a hint ;)
James
@James129
Apr 20 2016 08:31
@kirbyedy build a personal portfolio webpage
Which font is he using to point out?
kirbyedy
@kirbyedy
Apr 20 2016 08:44
comic sans maybe
please dont use that for your web site :)
check google fonts, there is lot to choose from, and they are pretty cool
RJsauce
@RJsauce
Apr 20 2016 09:28
Hey guys! I'm struggling with dropdown menus (the social media button) in my code. I think I did everything right but I'm not sure, could you please check ? http://codepen.io/rjsauce/pen/NNzXNj?editors=1100
kirbyedy
@kirbyedy
Apr 20 2016 09:36
@RJsauce you are missing a jquery
before the bootstrap
in the pen settings
RJsauce
@RJsauce
Apr 20 2016 09:38
@kirbyedy Thank you! so so so so much!
CamperBot
@camperbot
Apr 20 2016 09:38
rjsauce sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 898 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
RJsauce
@RJsauce
Apr 20 2016 09:39
@kirbyedy I'm new to code so why does it matter what order they go in? And also why is it that I needed to use jQuery and not JavaScript?
Marius
@rasmus1610
Apr 20 2016 09:39
@RJsauce jQuery IS javascript
but with some methods that make DOM manipulation much easier
RJsauce
@RJsauce
Apr 20 2016 09:40
@rasmus1610 Oh okay! Thank you
CamperBot
@camperbot
Apr 20 2016 09:40
rjsauce sends brownie points to @rasmus1610 :sparkles: :thumbsup: :sparkles:
Marius
@rasmus1610
Apr 20 2016 09:40
and bootstrap relies on jQUery
CamperBot
@camperbot
Apr 20 2016 09:40
:star: 65 | @rasmus1610 | http://www.freecodecamp.com/rasmus1610
Marius
@rasmus1610
Apr 20 2016 09:41
for most of their functionality
kirbyedy
@kirbyedy
Apr 20 2016 09:45
thanks for that clarification @rasmus1610
CamperBot
@camperbot
Apr 20 2016 09:45
kirbyedy sends brownie points to @rasmus1610 :sparkles: :thumbsup: :sparkles:
:star: 66 | @rasmus1610 | http://www.freecodecamp.com/rasmus1610
Rada
@Radascript
Apr 20 2016 09:53
hey guys, wrapped up my calculator, take a look if you'd like, let me know if you find something horribly wrong: http://codepen.io/RadaCodes/pen/LNrOLr?editors=1010
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 09:56
I am having trouble in making api calls could any one assist me with this on how to solve ?? http://codepen.io/Mr-Kumar-Abhishek/pen/aNKNEB
kirbyedy
@kirbyedy
Apr 20 2016 09:58
@Radascript looks a bit odd for me
set user select to none
Screen Shot 2016-04-20 at 12.57.46.png
Samuel Cupidon
@Zerazera
Apr 20 2016 09:58
@Radascript From a layout perspective I feel like the operator buttons should be grouped together.
Also your input isn't validated at all. I can put in numbers starting with 0 and with multiple decimals.
Rada
@Radascript
Apr 20 2016 09:59
@kirbyedy eek yes good catch thank you. Also equal button for you aren't expanding over two rows for some reason
CamperBot
@camperbot
Apr 20 2016 09:59
radascript sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
Samuel Cupidon
@Zerazera
Apr 20 2016 09:59
Starting with 0 is particularly a vexing issue because JS interprets those as octals
CamperBot
@camperbot
Apr 20 2016 09:59
:star: 899 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Samuel Cupidon
@Zerazera
Apr 20 2016 09:59
For example, type in '0123='
Rada
@Radascript
Apr 20 2016 10:00
@Zerazera oh I didn't know that. I checked 007+3 and it was 10 and I was like oh cool it just drops the front zeroes, I'll leave that be
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:00
@Radascript You should better it give in Code review room you will get more feedbacks :)
Rada
@Radascript
Apr 20 2016 10:01
@Mr-Kumar-Abhishek will do. Although I don't like havin a bunch of rooms open
for a code school chat, FCC chat has annoying design :D
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:02
It is better too keep the different rooms for different topics
@Radascript
Samuel Cupidon
@Zerazera
Apr 20 2016 10:03
The popups on the right side are annoying. But admittedly, I can't think of a better way of notification.
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:03
@Radascript it removes cluttering ..
@Radascript .. and you could always leave the room when you are done with it
I suppose most people prefer slack over gitter ..
Shivam Arora
@shivamarora13
Apr 20 2016 10:10
can anyone help?
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:11
Anyways.. I need some assistance with api call am I don't understand what I am doing wrong , it should work when I click on the the getquote button http://codepen.io/Mr-Kumar-Abhishek/pen/aNKNEB
@shivamarora13 help with what ?
Shivam Arora
@shivamarora13
Apr 20 2016 10:11
with the game
Simon says
@Mr-Kumar-Abhishek
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:12
@shivamarora13 state the problem and someone will take a look at it :)
Shivam Arora
@shivamarora13
Apr 20 2016 10:13
@Mr-Kumar-Abhishek Ok thanks for quoting this.
CamperBot
@camperbot
Apr 20 2016 10:13
shivamarora13 sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:star: 331 | @mr-kumar-abhishek | http://www.freecodecamp.com/mr-kumar-abhishek
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:14
@shivamarora13 hmm.. could you help me with my problem of making a api call ?
@shivamarora13 it should work, I suppose I don't know what I have done wrong in this ..
Shivam Arora
@shivamarora13
Apr 20 2016 10:15
@Mr-Kumar-Abhishek Looking at your problem only.
@shivamarora13 that's why didn't state my problem.
@Mr-Kumar-Abhishek let me take a look.
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:21
@shivamarora13 that's why didn't state my problem.
you are talking with yourself @shivamarora13 :p
read this, the api you are using, is not letting, the codepen use the data.
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:23
@shivamarora13 I see.. reading it between do you have a good API i could use ??
Shivam Arora
@shivamarora13
Apr 20 2016 10:24
yes sure, wait
see my pen, u need to provide header, with this api also, The one I am using.
U have not provided any header with ur api, thats why its creating problem. I hope my pen can help. :)
Abhishek Kumar
@Mr-Kumar-Abhishek
Apr 20 2016 10:30
@shivamarora13 hmm... thanks for giving an example :) I thought I will get them as I could get this simply by GET, (see here)[http://quotes.stormconsultancy.co.uk/random.json]
CamperBot
@camperbot
Apr 20 2016 10:30
mr-kumar-abhishek sends brownie points to @shivamarora13 :sparkles: :thumbsup: :sparkles:
:star: 295 | @shivamarora13 | http://www.freecodecamp.com/shivamarora13
Victoria Doiron
@victoriadoiron
Apr 20 2016 10:58
Can anyone help me with my Weather App and help me figure out why I can't get my background image to display?
LuciusR11
@LuciusR11
Apr 20 2016 11:09
("document").ready(function(){
("#systembtn").on("click", function(){
  (".buttonText").html("°F")
});
});
I'm using this code to try and change the button below
<span class ="number">#</span><button id ="systembtn"><div class = "buttonText">°C</div></button>
It won't work
kirbyedy
@kirbyedy
Apr 20 2016 11:18
@victoriadoiron try like this: $('myOjbect').css('background-image', 'url(' + imageUrl + ')');
Victoria Doiron
@victoriadoiron
Apr 20 2016 11:20
doesn't work e ither @kirbyedy
kirbyedy
@kirbyedy
Apr 20 2016 11:22
@victoriadoiron are you sure, because I just tried it and its working
Victoria Doiron
@victoriadoiron
Apr 20 2016 11:23
can you share with me your edit to the pen please? @kirbyedy
RJsauce
@RJsauce
Apr 20 2016 11:23
why aren't the boxes perfectly centered? http://codepen.io/rjsauce/pen/NNzXNj?editors=1100
kirbyedy
@kirbyedy
Apr 20 2016 11:25
@victoriadoiron
$('body').css('background-image', 'url(' + imgs[0] + ')');
vínαч puppαl
@vinaypuppal
Apr 20 2016 11:27
@victoriadoiron here is the fork of your pen i edited , its working as @kirbyedy mentioned http://codepen.io/vinaypuppal/pen/MyXVLv?editors=0010
Victoria Doiron
@victoriadoiron
Apr 20 2016 11:28
thanks! @vinaypuppal @kirbyedy there must've been something wrong with my syntax, so just copied that and replaced mine and it's working now
CamperBot
@camperbot
Apr 20 2016 11:28
victoriadoiron sends brownie points to @vinaypuppal and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 900 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:star: 321 | @vinaypuppal | http://www.freecodecamp.com/vinaypuppal
96street
@96street
Apr 20 2016 11:30
can someone please tell me why my nav-bar on the right is going outside the red container? http://codepen.io/anon/pen/NNzYQb
kirbyedy
@kirbyedy
Apr 20 2016 11:38
@96street did you try to float it left ?
96street
@96street
Apr 20 2016 11:39
yeah, but I want to know why it protrudes outside my container
because i've had similar problems in the past so i just wanna understand why it does it
Jackson Bates
@JacksonBates
Apr 20 2016 11:40
@96street It looks like your container starts after. Try moving the container up so it contains everything
96street
@96street
Apr 20 2016 11:41
@JacksonBates ?
.rightNav is inside the .container
Jackson Bates
@JacksonBates
Apr 20 2016 11:43
@96street oh, I'm confused. You have nav stuff quite far down in the html - i wasn't expecting that - I thought you meant the stuff in the #header
96street
@96street
Apr 20 2016 11:44
nah i've purposefully put the header outside the container so it's 100% width
kirbyedy
@kirbyedy
Apr 20 2016 11:44
@96street you might want to look into bootstrap, and responsive design
96street
@96street
Apr 20 2016 11:44
why?
@kirbyedy
Jackson Bates
@JacksonBates
Apr 20 2016 11:44
@96street got it. Didn't even see the zzz elements that are the real nav...
96street
@96street
Apr 20 2016 11:44
i have though
it's less flexible @kirbyedy
kirbyedy
@kirbyedy
Apr 20 2016 11:45
I dont see you use it here, and once you start resizing that window everything collapses
96street
@96street
Apr 20 2016 11:46
yeah I haven't done the responsive design yet @kirbyedy
I dont use bootstrap, i find it's not flexible
less control over design
kirbyedy
@kirbyedy
Apr 20 2016 11:48
bootstrap can be pain in the back, but you have to know how to handle it, and override default settings, once you learn it, it will be easy
Jackson Bates
@JacksonBates
Apr 20 2016 11:48
@96street yeah, but hard coding all those widths in is going to give you headaches. The bootstrap grid system lets you plan for different screen sizes really easily.
96street
@96street
Apr 20 2016 11:50
i will look into it @JacksonBates
kirbyedy
@kirbyedy
Apr 20 2016 11:50
there is a way of making responsive design without bootstrap, but as far as I can see, you are not implementing it in this project
96street
@96street
Apr 20 2016 11:51
no I just haven't done it yet.....designing the website first then responsive design at the end
@kirbyedy
kirbyedy
@kirbyedy
Apr 20 2016 11:51
you are using fixed widths on divs, which once you resize windows, fall apart
96street
@96street
Apr 20 2016 11:51
you suggest percentages for div width? @kirbyedy
kirbyedy
@kirbyedy
Apr 20 2016 11:51
ok, as you wish, I am trying to help you so you wont suffer, and do the double job
yes
96street
@96street
Apr 20 2016 11:52
but alot of the time percentages don't work @kirbyedy
yeah I appreciate it i'll look into bootstrap
is it possible to make every div %? @kirbyedy
kirbyedy
@kirbyedy
Apr 20 2016 11:55
yes but you dont have to
for example make that main red div 80%
96street
@96street
Apr 20 2016 11:56
already is @kirbyedy
90%*
kirbyedy
@kirbyedy
Apr 20 2016 11:57
12 column grid system is some kind of standard in web design
96street
@96street
Apr 20 2016 11:58
thanks that will be useful
so i probably don't need bootstrap
this should do
i'm failing to see how this grid system translates to my website though @kirbyedy
what would go under each column in the 12-column system?
because my content is scattered - not organized in columns
Jackson Bates
@JacksonBates
Apr 20 2016 12:03
@96street you don't need 1 thing per column, you span them. So your main story might be 5 columns, the right stories might be 3 columns and the nav the last 4 columns. Just for example, obviously you'd do slightly different things with the nav, as you likely want to keep it static - but that's the principle of the columns anyway.
96street
@96street
Apr 20 2016 12:04
oh right
makes sense
Jackson Bates
@JacksonBates
Apr 20 2016 12:04
@96street You may want to rethink a right nav bar, though. For desktop users that need to use the page scroll bar at the right hand side of the screen, they may accidentally click links that take them away from the page.
96street
@96street
Apr 20 2016 12:05
hmm didn't think of that
might try put it on the top then, cheers @JacksonBates
do you know the answer to my original question? @JacksonBates why the right nav bar is overlapping?
Jackson Bates
@JacksonBates
Apr 20 2016 12:05
@96street bootstrap has a pretty clean nav-bar component for the top of the screen :) more reasons to love BS
96street
@96street
Apr 20 2016 12:06
yes but don't they all look the same? @JacksonBates the nav bars
I want custom design
Jackson Bates
@JacksonBates
Apr 20 2016 12:08
@96street I think it's a conflict between the implicit margin on the container, and the float right for the navs. The fixed widths are causing odd behaviour, so that things are technically showing up outside of the body element of the html (I poked around in chrome's inspector to see the relationship between the various divs). I tend not to use vanilla css for layouts since it always gives me a headache :)
@96street You can style the nav bar however you want once it's implemented. Beyond fonts, colours and logos, there isn't much to customise anyway
RJsauce
@RJsauce
Apr 20 2016 12:10
Hi guys, how do I make the images come closer horizontally and spread apart more vertically? (The red is there for me so i can see padding and margins) http://codepen.io/rjsauce/pen/NNzXNj?editors=1100
96street
@96street
Apr 20 2016 12:10
sounds good, thanks for the help @JacksonBates
CamperBot
@camperbot
Apr 20 2016 12:10
96street sends brownie points to @jacksonbates :sparkles: :thumbsup: :sparkles:
96street
@96street
Apr 20 2016 12:10
off to try bootstrap now
CamperBot
@camperbot
Apr 20 2016 12:10
:star: 328 | @jacksonbates | http://www.freecodecamp.com/jacksonbates
96street
@96street
Apr 20 2016 12:10
thanks @kirbyedy
CamperBot
@camperbot
Apr 20 2016 12:10
96street sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 901 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Jackson Bates
@JacksonBates
Apr 20 2016 12:10
@96street no problem
Ken Haduch
@khaduch
Apr 20 2016 12:22
@RJsauce - you can add margin around the images to separate them - margin-top and margin-bottom to just affect the vertical separation. There are various things you can do to move them together horizontally, but what are you trying to achieve? Putting a max-height on the image to restrict their size might be helpful? It's hard to know without knowing what you want the final view to look like.
RJsauce
@RJsauce
Apr 20 2016 12:24
@khaduch I want to have the images to have an equal distance between each other horizontally and vertically and at the same time be centered under my .jumbotron
Jackson Bates
@JacksonBates
Apr 20 2016 12:27
@RJsauce I forked it and fixed it up the way I'd like it - Is this what you were after: http://codepen.io/Malgalin/pen/PNaeBm?editors=1100
Ken Haduch
@khaduch
Apr 20 2016 12:27
@RJsauce - putting the bootstrap class "text-center" on the div that encloses the images centers them horizontally. You can add top and bottom margin to separate them vertically. You have to see what it does to the responsive behavior.
RJsauce
@RJsauce
Apr 20 2016 12:29
@JacksonBates YES! Thank you, this is exactly what I was looking for! @khaduch Thank you, I will also try out your suggestion since it can't hurt to know more than one way of doing something :)
CamperBot
@camperbot
Apr 20 2016 12:29
rjsauce sends brownie points to @jacksonbates and @khaduch :sparkles: :thumbsup: :sparkles:
:star: 976 | @khaduch | http://www.freecodecamp.com/khaduch
:star: 329 | @jacksonbates | http://www.freecodecamp.com/jacksonbates
Jackson Bates
@JacksonBates
Apr 20 2016 12:29
@RJsauce I noticed you were using the class image-responsive, but the real name is img-responsive. I added a little padding around all img elements, and I also centered them using center-block.
@RJsauce Something else to be aware of, id attributes should only be used once. I know you were just using it for testing purposes, but the red and blue backgrounds should really be classes you want to reuse on the page :)
RJsauce
@RJsauce
Apr 20 2016 12:31
@JacksonBates I think the .image-responsive was a typo on my side. I'm new to coding so I still sort of say for what they are in my head and I guess saying image instead of img made me type that without realizing my mistake
@JacksonBates What do you mean should only be used once?
Jackson Bates
@JacksonBates
Apr 20 2016 12:31
@RJsauce I do stuff like that all the time. I googled it this time to check :)
@RJsauce An id is a specific thing on the page, like a form element you put your password in. There can only be one of those so things like javascript or php know where to look for the values they are expecting. Classes are used when we have a category of thing that might come up again and again
@RJsauce So on this gitter page, the search bar will have it's own id, naming it search-bar, or something, while our usernames likely have a class that keeps the font consistent
RJsauce
@RJsauce
Apr 20 2016 12:36
@JacksonBates I kind of understand it but I've only been coding for 2 days so I think I'll get a better grasp of it as time passes. But once again, thank you so much!
CamperBot
@camperbot
Apr 20 2016 12:36
rjsauce sends brownie points to @jacksonbates :sparkles: :thumbsup: :sparkles:
:warning: rjsauce already gave jacksonbates points
Jackson Bates
@JacksonBates
Apr 20 2016 12:37
@RJsauce you're doing well for two days in :) I noticed you implemented the bootstrap nav-bar well...It took me a while (and a fair bit of advice) the get mine working :)
RJsauce
@RJsauce
Apr 20 2016 12:38
@JacksonBates :smile: thank you
CamperBot
@camperbot
Apr 20 2016 12:38
rjsauce sends brownie points to @jacksonbates :sparkles: :thumbsup: :sparkles:
:warning: rjsauce already gave jacksonbates points
lorenbr
@lorenbr
Apr 20 2016 12:53
Hi guys... I'm having some difficulty implementing the .getJSON command in the Random Code Machine zipline
des anyone have a moment to assist?
does*
kirbyedy
@kirbyedy
Apr 20 2016 12:55
paste your link someone will help
lorenbr
@lorenbr
Apr 20 2016 12:56
I'm at the first step, basically, and I'm trying to just prove to myself that I am accessing the API JSON by stringify'ing it
$(document).ready(function() {
  $("#getQuote").on("click", function(){
    $.getJSON("https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous", function(json) {
      $(".quoteSpace").html(JSON.stringify(json));
    });
  });
});
I basically copied and altered that information from the JSON exercises in the previous section... and just modified it to meet the API I found online and the div that I'd created (id="quoteSpace")
Victoria Doiron
@victoriadoiron
Apr 20 2016 12:58
I need help creating a formula to convert my default C to F in the weather app
this is what i tried so far:
$("#F").on("click", function (){
     $("#temp").html(json.main.temp * 9 / 5 + 32);
   });
kirbyedy
@kirbyedy
Apr 20 2016 12:58
well if you paste that link in the browser it does not get the quote
Victoria Doiron
@victoriadoiron
Apr 20 2016 12:58
kirbyedy
@kirbyedy
Apr 20 2016 12:58
says: Missing Mashape application key. Go to http://docs.mashape.com/api-keys to learn how to get your API application key."
lorenbr
@lorenbr
Apr 20 2016 12:58
hmm... ok... didn't know I could do that
kirbyedy
@kirbyedy
Apr 20 2016 12:59
so I guess you need to register on the site and get the api key
in case its free
maybe you have to pay :worried:
lorenbr
@lorenbr
Apr 20 2016 13:00
it's supposedly free... and I did register with the site (mashape)
I'll take a look at the docs and come back
thanks
kirbyedy
@kirbyedy
Apr 20 2016 13:01
yea, check on their site, then, must be the api key provided somewhere
vínαч puppαl
@vinaypuppal
Apr 20 2016 13:03
@victoriadoiron your accessing json variable outside of its scope see i edited in this forked pen http://codepen.io/vinaypuppal/pen/RaJJwV?editors=1010#anon-login
lorenbr
@lorenbr
Apr 20 2016 13:03
ok... I have a key... now how do I add it to my code?
the doer
@ewathedoer
Apr 20 2016 13:04
I want to make toggle in players accessible from keyboard, any help? The documentation of bootstrap toggle does not talk about it. How can I fix it? http://codepen.io/thedoer/full/GZxdQO#page-header-section
Victoria Doiron
@victoriadoiron
Apr 20 2016 13:12
thanks! @vinaypuppal
CamperBot
@camperbot
Apr 20 2016 13:12
victoriadoiron sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:star: 324 | @vinaypuppal | http://www.freecodecamp.com/vinaypuppal
iigmir
@iigmir
Apr 20 2016 14:11

HI there I am building Wikipedia Viewer. Now I am stuck because I don't know what should I do next to result Wikipedia entries.

$(document).ready(function(){
    $("#wikisearch").click(function(){
        var wikiapi = "https://en.wikipedia.org/w/api.php?action=query&format=json&prop=revisions&titles=" +$('#wikivalue').val()+ "&rvprop=content&callback=?";
        var wikiapi2 = "https://en.wikipedia.org/w/api.php?action=query&prop=info&inprop=url&titles="+$('#wikivalue').val()+"&format=json&callback=?";
        $.getJSON( wikiapi2, function( data )
        {
            $("#wikiresult").text(data.query.pages);
            console.log(data.query.pages);
        });
    });
});

Should I getJSON to fullurl or canonicalurl or other?

Jeff
@adzam5
Apr 20 2016 14:20
I have a <ul>between a fixed height header and a fixed height footer. How can I make the height of the <ul> dynamically fill the space in between and add a scroll bar when needed? height: 100% does not add the scroll bar and a lesser percentage doesn't fill the space properly on all screen heights
Parminder Singh
@Trion129
Apr 20 2016 14:44
I want the button to turn black for 1 second and then come back to original color.
setTimeout is not working and the button turns back to its original color instantly
Please help!
function playCode() {
  var colortemp = $("#1").css("background-color");
  $("#1").css("background-color","black");
  setTimeout($("#1").css("background-color",colortemp),1000); //I want to delay this
}
vínαч puppαl
@vinaypuppal
Apr 20 2016 14:48
setTimeout(function(){ $("#1").css("background-color",colortemp) },1000); @Trion129 setTimeout takes callback function as first argument
Parminder Singh
@Trion129
Apr 20 2016 15:03
Thanks @vinaypuppal :smile: It worked and a new thing learnt :+1:
CamperBot
@camperbot
Apr 20 2016 15:03
trion129 sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:star: 328 | @vinaypuppal | http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Apr 20 2016 15:04
@Trion129 :smile:
Jesse Burns
@jessescottburns
Apr 20 2016 15:19
$('.form-insert').on('submit', function(e) {
  e.preventDefault();
  console.log('test1');
  searchText = $('input[name=search]').val();

  searchURL = "https://en.wikipedia.org//w/api.php?action=opensearch&format=json&search=" + searchText + "&limit=10";

  console.log('test2');
  updatePage()
})

function updatePage() {
  console.log(searchURL);
  console.log('test3');
  $.getJSON(searchURL, function(response) {
    console.log('test4');
  })

  console.log('test5');
}
Hi all, Does anybody see any reason why my getJSON success function won't run?
I've validated the JSON pull with JSONLint. The test logs before and after run.
The searchURL is populating the correct URL, but I can't get the console.log('test4') to run.
Thank you in advance for any info!
dryyyyy
@dryyyyy
Apr 20 2016 15:20
missing 'var' before the variable?
Jesse Burns
@jessescottburns
Apr 20 2016 15:22
@dryyyyy - When I put var in front of searchText and searchURL then it only runs test1 and test2. By not having var, I believe I make the variable global, but I could be wrong.
vínαч puppαl
@vinaypuppal
Apr 20 2016 15:25
@jessescottburns are you getting any errors in console
Jesse Burns
@jessescottburns
Apr 20 2016 15:25
No errors. It just shows test1, test2, the searchURL, test3, test5
vínαч puppαl
@vinaypuppal
Apr 20 2016 15:25
because when i run your code in my console i am getting this error
vendor-main-066508b245.js:4 Refused to connect to 'https://en.wikipedia.org//w/api.php?action=opensearch&format=json&search=HTML&limit=10' because it violates the following Content Security Policy directive: "connect-src vimeo.com 'self'".
Jesse Burns
@jessescottburns
Apr 20 2016 15:30
@vinaypuppal - I don't get anything. That's weird. I'll try using a different website to pull a request from to see if I can get anything
@vinaypuppal Thanks for the info though!
CamperBot
@camperbot
Apr 20 2016 15:30
jessescottburns sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:star: 329 | @vinaypuppal | http://www.freecodecamp.com/vinaypuppal
vínαч puppαl
@vinaypuppal
Apr 20 2016 15:30
@jessescottburns since its cross domain request u should form your request like this
$.ajax({
      url: wikiApiUrl,
      data: {
        action: 'opensearch',
        search: query,
        format: 'json'
      },
      dataType: 'jsonp',
success:function(res){console.log(res);}
});
wikiApiUrl = '//en.wikipedia.org/w/api.php';
dryyyyy
@dryyyyy
Apr 20 2016 15:32
Can anyone help me with my weather app?
RJsauce
@RJsauce
Apr 20 2016 15:32
This message was deleted
RJsauce
@RJsauce
Apr 20 2016 15:33
This message was deleted
Hi everyone, how do I move <h2>Portfolio</h2> down?http://codepen.io/rjsauce/pen/NNzXNj?editors=1100
Jesse Burns
@jessescottburns
Apr 20 2016 15:33
@vinaypuppal thank you - i'm going to read up so I can try to understand as I haven't used the .ajax yet.
CamperBot
@camperbot
Apr 20 2016 15:33
jessescottburns sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: jessescottburns already gave vinaypuppal points
dryyyyy
@dryyyyy
Apr 20 2016 15:33
I can't get the city variable.
vínαч puppαl
@vinaypuppal
Apr 20 2016 15:33
@jessescottburns :+1:
dryyyyy
@dryyyyy
Apr 20 2016 15:37
@RJsauce try to reduce padding-top of the .row bellow the Portfolio heading.
James Hall
@James-H33
Apr 20 2016 15:37
@RJsauce you gave your h2 the class of 'text-center' . So .text-center {padding-top: ?px } or .text-center {
iigmir
@iigmir
Apr 20 2016 15:37
@RJsauce Well, what does move <h2>Portfolio</h2> down mean? Look at your picture, <h2> tag is ON your picture. So I think what your problem is your picture size too big.
James Hall
@James-H33
Apr 20 2016 15:38
@RJsauce .text-center {margin-top: ?px } what works best for you
vínαч puppαl
@vinaypuppal
Apr 20 2016 15:38
@dryyyyy if i add http:// to yor request url then it seems to work and console log city name
RJsauce
@RJsauce
Apr 20 2016 15:39
Thanks everyone! I'll see what works
dryyyyy
@dryyyyy
Apr 20 2016 15:41
@vinaypuppal Thank you, that worked just great!
CamperBot
@camperbot
Apr 20 2016 15:41
dryyyyy sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:star: 330 | @vinaypuppal | http://www.freecodecamp.com/vinaypuppal
i donno why my code gets messed up when i try to add the function to detect if an twitch account has been closed or not exist
can some take a look into my code?
greg
@wearenotgroot
Apr 20 2016 15:47
@stanleyyylau if you detect the code status 422 means the account is closed
Stanley
@stanleyyylau
Apr 20 2016 15:47
yes?
i tried that before, but it didn't work
let me try it again
greg
@wearenotgroot
Apr 20 2016 15:50
@stanleyyylau you should probably do that in the error handling function and not in the success function
Stanley
@stanleyyylau
Apr 20 2016 15:51
oh, right
let me try again
RJsauce
@RJsauce
Apr 20 2016 15:51
Hello again, how would I go about creating a background for my images and heading? I want it to start just a bit above <h2>Portfolio</h2>. This is what I tried but it didn't work: http://codepen.io/rjsauce/pen/NNzXNj?editors=1100
Islam Ibakaev
@dagman
Apr 20 2016 15:51
what you think about tribute page? http://codepen.io/dagman/pen/wGXzJd
greg
@wearenotgroot
Apr 20 2016 15:54
@stanleyyylau another thing to remember is that /streams only give info about the channel that streams
@stanleyyylau if you want info on channels that are offline then you need to used /channels or /channel if i remember correctly
Stanley
@stanleyyylau
Apr 20 2016 15:55
@wearenotgroot oh, thanks a lot
CamperBot
@camperbot
Apr 20 2016 15:55
stanleyyylau sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 1033 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
greg
@wearenotgroot
Apr 20 2016 15:57
@stanleyyylau what you can do is make an api call using channel or channels first (this will cover the channels that are closed as well)
@stanleyyylau then make a another call for the channels that are currently streaming or online then you can update the channels status(displayed online or offline)
codercooooder
@codercooooder
Apr 20 2016 16:09
I shall now summon @alpox @iigmir and @iAmNawa , are any of you around?
iigmir
@iigmir
Apr 20 2016 16:09
@codercooooder Hi what's matter?
codercooooder
@codercooooder
Apr 20 2016 16:10
yyyassss, @iigmir
alpox
@alpox
Apr 20 2016 16:10
@codercooooder I am half around ^^
Paul Borawski
@iAmNawa
Apr 20 2016 16:10
I guess that makes all three of us haha
codercooooder
@codercooooder
Apr 20 2016 16:10
@iigmir, so I think im on the right track with my svg thing, i think javascript may do it.
yasss party!! @iAmNawa @alpox @iigmir
Islam Ibakaev
@dagman
Apr 20 2016 16:11
codercooooder
@codercooooder
Apr 20 2016 16:11
here you go guys, can you helpme @iigmir @iamnawa @alpox http://codepen.io/ihatecoding/pen/MyXBBm
Paul Borawski
@iAmNawa
Apr 20 2016 16:11
@dagman nice!
alpox
@alpox
Apr 20 2016 16:12
@codercooooder don't you want to make the footer just fixed size? would be easier too :D
Islam Ibakaev
@dagman
Apr 20 2016 16:12
@iAmNawa :smile:
alpox
@alpox
Apr 20 2016 16:12
@codercooooder I mean fixed 30% :P
codercooooder
@codercooooder
Apr 20 2016 16:13
@alpox I want it to have a max height of around 40, but for the svgs to be as big as they can without over running, and to take into account page height and width.
alpox
@alpox
Apr 20 2016 16:14
@codercooooder Well yeah max height, but max height makes problems. If you just let it at height: 40% them, it works better
codercooooder
@codercooooder
Apr 20 2016 16:16
fine but i am having trouble wtih my javascript...scaling things.. that's what i need help with.. i think this is the solution ..but Im struggling to come up with the right values. I want the svg to be at most one third of the height of the div.
i need to preserve the aspect ratio
im not sure if the javascript should rescale the height of the svg or the container.
btw, since the footer is 40% of the tottal page, and I want the svg to be a third of it, i want it to be maximum .4*.3 = .12 of the page.
(the svg to be a third of the footer height)
codercooooder
@codercooooder
Apr 20 2016 16:34
if you can't tell the dimension of the svg (inthe viewbox is 37 tall by 73 wide)
Daniel Gonzales
@choppd
Apr 20 2016 16:37
Hello! Can I get some feedback on my Quote Generator:
http://codepen.io/dgonzales/full/xVPaXL/
codercooooder
@codercooooder
Apr 20 2016 16:39
@choppd nice, what would you like advice on , the look?
@choppd maybe a bit more top padding above your buttons
Daniel Gonzales
@choppd
Apr 20 2016 16:40
@codercooooder Just anything you like/dislike. I think the functionality is there though haha.
@codercooooder Thanks for the input!
CamperBot
@camperbot
Apr 20 2016 16:41
choppd sends brownie points to @codercooooder :sparkles: :thumbsup: :sparkles:
:star: 14 | @codercooooder | http://www.freecodecamp.com/codercooooder
codercooooder
@codercooooder
Apr 20 2016 16:41
@choppd i think the distance between the tops of the buttons and the quote should be equal to the distance between the bottom of the buttons and the edge of the box.
Daniel Gonzales
@choppd
Apr 20 2016 16:53
@codercooooder Good point :smile:
codercooooder
@codercooooder
Apr 20 2016 17:00
@choppd you just add this; .col-xs-12{margin-top:8%;}
dryyyyy
@dryyyyy
Apr 20 2016 17:00
@choppd try to do something with the text if it exceeds 140 symbols (for tweeter).
@codercooooder Best solution i found yet...
codercooooder
@codercooooder
Apr 20 2016 17:07
@alpox amaaaaaaaaaaaaaaaaaaaaaaaazing
I need to try implementing it in context but it looks amazing
alpox
@alpox
Apr 20 2016 17:07
@codercooooder :-)
codercooooder
@codercooooder
Apr 20 2016 17:07
thank you @alpox thank you @alpox thank you @alpox thank you @alpox thank you @alpox thank you @alpox
CamperBot
@camperbot
Apr 20 2016 17:07
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 558 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 20 2016 17:08
@codercooooder You're welcome :-)
codercooooder
@codercooooder
Apr 20 2016 17:08
@alpox those are some hot svgs!!!!
alpox
@alpox
Apr 20 2016 17:09
Well you made them ^^
codercooooder
@codercooooder
Apr 20 2016 17:09
oh no@alpox, it is messed up at large widths
@alpox. we're not done
we're not done guys...
:(
alpox
@alpox
Apr 20 2016 17:10
@codercooooder Sry i was on my small screen lappy :D
codercooooder
@codercooooder
Apr 20 2016 17:10
it is ok
but i need to keep working @alpox
alpox
@alpox
Apr 20 2016 17:11
@codercooooder Ah you mean the links
codercooooder
@codercooooder
Apr 20 2016 17:12
Everything needs to visible...the svgs grow outside at large widths...they need to stop growing their height..that is why i calculate the which is smaller, the width or the height...and was using the smallest of the two - to prevent overflow
alpox
@alpox
Apr 20 2016 17:12
@codercooooder What big screen do you have? :D it doesnt overflow on mine and its huge ^^
codercooooder
@codercooooder
Apr 20 2016 17:14
they push the text out at 1068 width
also alpox, when the height gets small it pushes it out..it needs to recalculate based on which is smaller, height or width, while preserving the aspect ratio
@alpox read above
alpox
@alpox
Apr 20 2016 17:19
I will try that
codercooooder
@codercooooder
Apr 20 2016 17:19
so i should get a max-width calculation, then figure out what the height of the svg would be for that max-width given the aspect reatio... and then get do the same for the hieght- figure out waht the max height would be, and figure out whicch width would go with it...which ever actual is smaller than the hypothetical is the the one I would use as the asis for the final size.
as the basis...
Thats what i have so far
adityac0620
@adityac0620
Apr 20 2016 17:26
I this the right way to solve the challenge : Concatenating Strings with Plus Operator
worried:
// Example
var ourStr = "I come first. " + "I come second.";

// Only change code below this line

var myStr;
myStr='This is the start.'+'This is the end.';
codercooooder
@codercooooder
Apr 20 2016 17:27
@alpox, that overflows, just like before
alpox
@alpox
Apr 20 2016 17:27
@codercooooder Hmm what screen resolution do you have?
codercooooder
@codercooooder
Apr 20 2016 17:27
I want it to be universal, it shouldn't matter. @alpox, this needs to be responsive.
alpox
@alpox
Apr 20 2016 17:28
@codercooooder It works just fine for me :D
@codercooooder Oh noo
It didnt save so you couldnt see it
.<
codercooooder
@codercooooder
Apr 20 2016 17:29
@alpox oh !!! yes looking better let me try
alpox
@alpox
Apr 20 2016 17:29
@codercooooder No cannot :-/ its lost... i have to do it again
stupid codepen
codercooooder
@codercooooder
Apr 20 2016 17:30
@alpox stupid codepen indeed, i think you did it.
i think the nightmare is almost over @alpox!!!
thank you @alpox
CamperBot
@camperbot
Apr 20 2016 17:31
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave alpox points
codercooooder
@codercooooder
Apr 20 2016 17:34
@alpox the codepen footer seems to cover the bottom of the page links text at around width 1000-1300 does that mean that the bottom is overflowing or is that a codepen bug
Nick
@Nick-vr
Apr 20 2016 17:35
Hi guys, for my portfolio, the "work" section, i cant seem to get it aligned in the middle, all the other sections are no problem :s
codercooooder
@codercooooder
Apr 20 2016 17:35
@alpox when i make the height small, it starts to push out... even at small widths
if the media is short, it needs to use the height as the reference, not the width..@alpox
@alpox i mean (read above)
@alpos the height of the svgs should never exceed 12% of the window height
@alpox i meant
Okay...
I was not logged in before
that was the problem :-/
is that okay now?
codercooooder
@codercooooder
Apr 20 2016 17:41
i think we ar getting close, I need to look more, but I feel like it isn't growing as big as it should when it gets wide...@alpox
alpox
@alpox
Apr 20 2016 17:42
sry i set it to 30% from height for testing :D
But somehow its behaving a bit strange since it grows more when one pulls around the size a bit :-/
but it looks for me as if its working
at least on my browser
codercooooder
@codercooooder
Apr 20 2016 17:44
that is some hot stuff @alpox ,
thanks @alpox
CamperBot
@camperbot
Apr 20 2016 17:44
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave alpox points
alpox
@alpox
Apr 20 2016 17:44
@codercooooder Np
codercooooder
@codercooooder
Apr 20 2016 17:44
I am going to study this, and I'll post it on my stack @alpox
alpox
@alpox
Apr 20 2016 17:44
Okay :-)
Have a good day then
codercooooder
@codercooooder
Apr 20 2016 17:44
you have to admit, that is some cool stuff!!! @alpox
I hope you feel proud @alpox, resize that, it is so dope
alpox
@alpox
Apr 20 2016 17:45
@codercooooder I do a bit :-) but thats not the first problem like that i solved :D
That are the worst problems though...
Well no... it cannot get worse as trying to make a component in WPF which should align to its children which holds a scrollview :D
codercooooder
@codercooooder
Apr 20 2016 17:46
what is wpf @alpox, word press?
alpox
@alpox
Apr 20 2016 17:47
No, its the new desktop application design technology of the .NET framework
(C#)
codercooooder
@codercooooder
Apr 20 2016 17:48
well thanks, i felt like i had entered the ninth level of hell with these svgs, and didn't want to let go because i love my animations.
@alpox
i think i spent almost two weeks on these @alpox
alpox
@alpox
Apr 20 2016 17:49
@codercooooder :D okay
@codercooooder Nice that it works now then
Can i see one animation?
Well how to activate them? :D
codercooooder
@codercooooder
Apr 20 2016 17:50
it would take me a an hour
@alpox
alpox
@alpox
Apr 20 2016 17:50
Oh okay then let it ^^
codercooooder
@codercooooder
Apr 20 2016 17:50
to put the code into a codepen
im not a skilled programmer @alpox, and i have dyslexia
alpox
@alpox
Apr 20 2016 17:51
Its not urgent to see it :D i was just bit curious
codercooooder
@codercooooder
Apr 20 2016 17:52
maybe later.... i guess i just need the svg hover for the eye .....
@alpox
alpox
@alpox
Apr 20 2016 17:53
Oky
Well just don't do it just because of me in a codepen
You have surely other work to do
codercooooder
@codercooooder
Apr 20 2016 18:12
@alpox, it was not as hard as I thought.. this is just for the eye, i actually have three other svgs.
alpox
@alpox
Apr 20 2016 18:13
@codercooooder Ah okay, cool! :D
@codercooooder looks great, although only the one for the first eye works properly with zooming out of the iris
codercooooder
@codercooooder
Apr 20 2016 18:15
I fixed that, its just the codepen...@alpox
they aren't done, Im gonna make the graphics better, but the functionality is there @alpox
@alpox thanks, again, I'm gonna look at this...i didn't know you could do calc...this is probably not backwards compatible, I'll need good fallbacks, right? but i'll do that later
CamperBot
@camperbot
Apr 20 2016 18:18
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 559 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 20 2016 18:18
@codercooooder I think it is compatible
alpox
@alpox
Apr 20 2016 18:27
@codercooooder Hey i improved it:
function scaleSVG() {
  var scale = 0.9;
  var $eyCol = $(".ey-col-svg");
  var eyWidth = $eyCol.width();
  var eyHeight = $eyCol.height();
  var maxHeight = .4 * $(window).height();

  if(eyHeight < eyWidth && eyHeight < maxHeight)
    $(".areaSVG").height(maxHeight);

  var imageWidth = scale * $eyCol.width();
  var imageHeight = $eyCol.height();
  var tot = imageWidth > imageHeight ? imageHeight : imageWidth;
  //var imageHeight = 0.5*$(".ey-col-svg").height();

  $(".areaSVG").css("width", tot);
  $(".areaSVG").css("height", tot);
};
@codercooooder With this you don't have the problem with resizing anymore that it doesnt grow enough when you resize too fast
codercooooder
@codercooooder
Apr 20 2016 18:28
nice @alpox, i was worried about that text. thank you
CamperBot
@camperbot
Apr 20 2016 18:28
codercooooder sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: codercooooder already gave alpox points
alpox
@alpox
Apr 20 2016 18:30
Scales perfectly now :D
Jeff
@adzam5
Apr 20 2016 18:36
Any ideas on how I can pass a variable to a CSS file then append the CSS file to the head when a JS function is called? I tried making the CSS file a PHP file and using AJAX but that doesn't seem to be working
codercooooder
@codercooooder
Apr 20 2016 18:36
@alpox it is a beautiful thing.
alpox
@alpox
Apr 20 2016 18:36
@adzam5 That sounds the hell of complicated and bad design :D
@codercooooder :thumbsup:
Juwdohr
@Juwdohr
Apr 20 2016 18:37
is there a way to transform a link into a button?
codercooooder
@codercooooder
Apr 20 2016 18:37
@alpox, you seem smart but if you need any help in stats please message me.
alpox
@alpox
Apr 20 2016 18:37
@adzam5 Why do you want to do that? ^^
@codercooooder Stats? :D
codercooooder
@codercooooder
Apr 20 2016 18:38
@alpox i thought it was you who was taking stats...
@alpox wasn't it you who was messaging the chat from a stats lesson?
alpox
@alpox
Apr 20 2016 18:39
@Juwdohr Well you can treat a link like a button... or you make a button which has a javascript event which opens a website :D
I would go the first way.... Or you can even make a link which contains a div (or even a button)
@Juwdohr The question is what you exactly mean with transforming into a button. Visually?
@codercooooder Ahh statistics :D yeah
codercooooder
@codercooooder
Apr 20 2016 18:39
@alpox ahahahah you don't call it stats? hahaha
@alpox if you need help let me know.
Jeff
@adzam5
Apr 20 2016 18:40
@alpox I want to change the color based on the page called by the JS function. I figured I can store the color in the database, but I'm not sure how to pass it to a style sheet. I know I can just use JS to modify the CSS, but I need to make a lot of modifications
Juwdohr
@Juwdohr
Apr 20 2016 18:41
@alpox Yeah visually. So when it's a computer, laptop, or the veiwing window was large enough the email link was text but when the scree got, to say a phone or mobile device, it is a button.
alpox
@alpox
Apr 20 2016 18:41
@codercooooder Well i didnt quite understand when to use the central limit theorem :-/ but i think i just got messed up since one can use either bernoulli or if you want other distributions with it..
Jeff
@adzam5
Apr 20 2016 18:41
I can create a different stylesheet for each page, but as the number of pages grows so would my number of stylesheets
alpox
@alpox
Apr 20 2016 18:43
@adzam5 Just use JS to do that then. Don't pass it to a style sheet! Style sheets are nothing you write dynamically to.
$("body").css("background-color", "blue");
@Juwdohr you can do that with media queries:
@media screen and (max-width: 720px) { // Small screens
  a {
    display: block;
    background-color: <whatever you want>;
    padding: 5px 10px;
  }
}
Something like that
You can just use your selector inside there for the link and set the css properties you want to style it like a button
@codercooooder I'm german (swiss) and we call it "Statistik" :-)
stats just reminds me of the stats you have in a game or so :P
Juwdohr
@Juwdohr
Apr 20 2016 18:52
@alpox What do you mean your selector?
alpox
@alpox
Apr 20 2016 18:52
@Juwdohr Well if you speak about a specific link you can set it an id and use the selector for the id instead of a like in this css i posted
The css i posted selects all a elements and change them to buttons
Clark Arnold
@clarkarnold
Apr 20 2016 18:53
Hey all, I finally got my tic tac toe working, I think it meets all the user stories. My computer player just chooses any random open spot on the board.
Do i still need to make it "unbeatable", or can i just move on?
Juwdohr
@Juwdohr
Apr 20 2016 18:55
@alpox OK so if I actually wanted it to be a button not a link then what?
Marius
@rasmus1610
Apr 20 2016 18:57
building projects is actually by far the best way to learn
I'm now so confident in using react
and that after just 3 projects
and it's so much fun to crack a problem/error/bug you had
had a error for like 4h because I tried to use .map() on an object :D
so stupid
now I know why underscore.js rocks :D
alpox
@alpox
Apr 20 2016 19:00
@Juwdohr 100 what do you mean with button then :-) i thought you mean visually
Marius
@rasmus1610
Apr 20 2016 19:00
always thought that .map() and _.map() would be redundnat
alpox
@alpox
Apr 20 2016 19:01
@clarkarnold I don't know what the user stories says but that is so easy to win :D
@rasmus1610 Underscore defines a lot of methods on existing objects which are not there usually. You have to look out :-)
Clark Arnold
@clarkarnold
Apr 20 2016 19:02
@alpox Yeah it is just random.. the user story used to say something about MiniMax and making it impossible to beat, but it doesnt anymore... I am wondering if I need to take my time to make it better or not
Jeff
@adzam5
Apr 20 2016 19:02
@alpox I guess I was just over complicating things. Thank you for the suggestion
CamperBot
@camperbot
Apr 20 2016 19:02
adzam5 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 560 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 20 2016 19:02
@clarkarnold I guess MiniMax was too complicated for new learners :-)
@adzam5 Yup :-)
Marius
@rasmus1610
Apr 20 2016 19:03
@alpox yeah but they are super helpful if you want to program functionally
I love the easy way to generate lists with _.map()
for loops are so unstylish :D
Clark Arnold
@clarkarnold
Apr 20 2016 19:05
@alpox Yeah it was discouraging! I don't really have an interest in AI at this point, so the fact I got it functioning at a basic level feels good Hah
alpox
@alpox
Apr 20 2016 19:05
@rasmus1610 generate lists? ^^
@clarkarnold Thats nice :D yeah it works good like that
@clarkarnold Except that the reset button doesnt want to work :-/
Marius
@rasmus1610
Apr 20 2016 19:06
let resultNodes = _.map(this.props.searchResult, function(result, i) {
      return (
        <li key={i}>
          <h4><a href={"http://en.wikipedia.org/?curid=" + result.pageid} target="_blank">{result.title}</a></h4>
          <p>{result.extract.substring(0, 200) + "..."}</p>
        </li>
      )
    });
something like this
@alpox
Clark Arnold
@clarkarnold
Apr 20 2016 19:07
@alpox Ahh thanks, this is like my 10th version i didnt put that in there
CamperBot
@camperbot
Apr 20 2016 19:07
clarkarnold sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 561 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 20 2016 19:07
@rasmus1610 Yeah well you could do that in several ways with normal JS too :-)
Marius
@rasmus1610
Apr 20 2016 19:07
@alpox sure but I like this approach alot
alpox
@alpox
Apr 20 2016 19:07
@clarkarnold :D
Marius
@rasmus1610
Apr 20 2016 19:08
@alpox for ... in would be a vanilla js solution right?
or what are you thinking of?
alpox
@alpox
Apr 20 2016 19:08
This message was deleted
Mom my head is betraying me xD
Clark Arnold
@clarkarnold
Apr 20 2016 19:09
@alpox There got the reset working again
@alpox Thanks for the feedback!
CamperBot
@camperbot
Apr 20 2016 19:09
clarkarnold sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: clarkarnold already gave alpox points
alpox
@alpox
Apr 20 2016 19:09
let resultNodes = Object.keys(this.props.searchResult).map(function(key, i) {
      var result = this.props.searchResult[key];
      return (
        <li key={i}>
          <h4><a href={"http://en.wikipedia.org/?curid=" + result.pageid} target="_blank">{result.title}</a></h4>
          <p>{result.extract.substring(0, 200) + "..."}</p>
        </li>
      )
    });
@clarkarnold Nice :-) you're welcome
Marius
@rasmus1610
Apr 20 2016 19:10
haha yeah but that's a bit hacky because you make an array out of an object just to loop over it with .map() :D
anyway it works :)
alpox
@alpox
Apr 20 2016 19:11
@rasmus1610 Well, _.map has to do that too :-)
So they are hacky too? :-)
Marius
@rasmus1610
Apr 20 2016 19:11
but it's abstracted
and so the code is somewhat easier to read
imo
alpox
@alpox
Apr 20 2016 19:11
Sure :-)
Islam Ibakaev
@dagman
Apr 20 2016 19:14
can u guys share with me your list of react tutorials? :smile:
Marius
@rasmus1610
Apr 20 2016 19:19
it may sound stupid but the tutorial on their site (https://facebook.github.io/react/docs/tutorial.html) + "thinking in react" should have you covered... if you then read the guides section you are more then ready to go
it's actually pretty logical how react is designed
alpox
@alpox
Apr 20 2016 19:19
@rasmus1610 Do you know which "addition" is best for react? (Redux/Flux...)
Marius
@rasmus1610
Apr 20 2016 19:20
@alpox well I actually never used any of it
looked a bit into redux
because there is a free course on it by dan abramov
the designer of redux
alpox
@alpox
Apr 20 2016 19:20
Okay :-) thanks anyway @rasmus1610
CamperBot
@camperbot
Apr 20 2016 19:20
alpox sends brownie points to @rasmus1610 :sparkles: :thumbsup: :sparkles:
:star: 68 | @rasmus1610 | http://www.freecodecamp.com/rasmus1610
alpox
@alpox
Apr 20 2016 19:20
I'm still wondering if Elm or Vue.js can replace it
Or even Angular 2 now
Marius
@rasmus1610
Apr 20 2016 19:21
well I think that with facebook as it's developer they are just to strong
and react native is the future for mobile development imo
alpox
@alpox
Apr 20 2016 19:21
I'm not so sure about that because a lot of apps are still done native
Tien Anh Nguyen
@tienanh2007
Apr 20 2016 19:21
Hi How do I add the sematic ui css library to codepen ?
Patrick
@pwcsquared
Apr 20 2016 19:22
Hey guys, I have a question about css. I want to change the border color of a div element based on a percentage value, so that the value translates into how much of the border is the new color vs original color. So at 20%, a fifth of the border will be the new color and the rest will be the original color. Does anyone know how I might go about doing that?
alpox
@alpox
Apr 20 2016 19:22
@tienanh2007 Add the link to the css section
Tien Anh Nguyen
@tienanh2007
Apr 20 2016 19:22
yes but how
I can't find the link
there is only js link
alpox
@alpox
Apr 20 2016 19:23
@tienanh2007 Copy paste? Well i don't know semantic ui so i don't know a link :D
there are plenty of links to it
alpox
@alpox
Apr 20 2016 19:24
@pwcsquared Hmm how can i understand that? you want a colorbreak inside the border? left to right? top to left?
Tien Anh Nguyen
@tienanh2007
Apr 20 2016 19:25
@rasmus1610 How do I find out which one I need
Marius
@rasmus1610
Apr 20 2016 19:25
are you only interested in the .css right now?
Patrick
@pwcsquared
Apr 20 2016 19:25
@alpox the border is a circle so ideally it would start at the top middle and go around clockwise
Tien Anh Nguyen
@tienanh2007
Apr 20 2016 19:26
how do you know ?
Marius
@rasmus1610
Apr 20 2016 19:26
well what else should it be?
Tien Anh Nguyen
@tienanh2007
Apr 20 2016 19:27
I don't know you making it seem like obvious but it's not to me
I'm a beginner so something seem so simple could not be obvious to me
Marius
@rasmus1610
Apr 20 2016 19:28
sorry that wasnt my intention
alpox
@alpox
Apr 20 2016 19:28
@tienanh2007 All others are special components for it. The min.js version is usually what you are looking for and if there is one with only the name of the package with .min.js, it must be the one which contains everything
Tien Anh Nguyen
@tienanh2007
Apr 20 2016 19:29
@alpox @rasmus1610 Thank you both for explaining that
CamperBot
@camperbot
Apr 20 2016 19:29
tienanh2007 sends brownie points to @alpox and @rasmus1610 :sparkles: :thumbsup: :sparkles:
:star: 562 | @alpox | http://www.freecodecamp.com/alpox
:star: 69 | @rasmus1610 | http://www.freecodecamp.com/rasmus1610
alpox
@alpox
Apr 20 2016 19:29
@pwcsquared You could try to go with an overlay and a circled incoming animation
@pwcsquared You can also draw 2 elements with canvas
One as background and one which draws itself over time above it
Patrick
@pwcsquared
Apr 20 2016 19:31
@alpox that plugin is nice but I'd feel like a cheater lol
alpox
@alpox
Apr 20 2016 19:31
@pwcsquared Hahah well idk :D
Patrick
@pwcsquared
Apr 20 2016 19:31
@alpox I think I can get canvas to work though, thanks!
CamperBot
@camperbot
Apr 20 2016 19:31
pwcsquared sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 563 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 20 2016 19:31
@pwcsquared You're welcome :-)
Mikail Bayram
@mikail1998
Apr 20 2016 20:00
This message was deleted
li a:visited
{
text-decoration: none;
}
I added this to my css so that when i click on one of my navbar elements(home, about etc.) there would be no underlined text. Im doing my project on codepen and am using boostrap when there is no boostrap the text isnt underlined after clicking when there is it is underlined. Please some help...
alpox
@alpox
Apr 20 2016 20:07
How exactly do you want to and can you post your codepen?
And also, i guess, bootstrap is overriding your css so i would try:
li a:visited
{
text-decoration: none !important;
}
it does not work with !important either :(
alpox
@alpox
Apr 20 2016 20:15
@mikail1998
li a:hover,
li a:visited,
li a:link,
li a:active {
  text-decoration: none;
  outline: 0 !important;
  outline-style: none;
}
João Alves
@JADSN
Apr 20 2016 20:16
How i change temperature Fahrenheit to Celsius when i click a button ?
alpox
@alpox
Apr 20 2016 20:16
@JADSN Calculate it :-) you find the formulas on the web
Islam Ibakaev
@dagman
Apr 20 2016 20:16
@mikail1998 add li a: focus
li a:visited, li a:focus
{
text-decoration: none !important;
}
Mikail Bayram
@mikail1998
Apr 20 2016 20:18
@alpox @dagman both of your suggestions worked, thank you!! Im really into learning this stuff, so could you explain why mine didnt work and yours did, i would appreciate it soo much :D
CamperBot
@camperbot
Apr 20 2016 20:18
mikail1998 sends brownie points to @alpox and @dagman :sparkles: :thumbsup: :sparkles:
:star: 427 | @dagman | http://www.freecodecamp.com/dagman
:star: 564 | @alpox | http://www.freecodecamp.com/alpox
João Alves
@JADSN
Apr 20 2016 20:18
I try this but doesn't work
This message was deleted
$(document).ready(function(){

   var longitude;
   var latitude;


   if (navigator.geolocation) {      

     navigator.geolocation.getCurrentPosition(function(position) {
     longitude = position.coords.longitude;   
     latitude = position.coords.latitude;

     $("#data").html("latitude: " + latitude + "<br>longitude: " + longitude);
    });
  }

  var myApi = "http://api.openweathermap.org/data/2.5/weather?lat="+ latitude +"&lon="+  longitude +"&appid=??????";

  $.getJSON(myApi, function(data){

    var weatherType = data.weather[0].description;
    var celsiusTemp;
    var fahrenheitTemp;
    var kelvinTemp = data.main.temp;
    var windSpeed = data.wind.speed;
    var changeTemp = true;

    // Storage Name Of City.
    var cityName = data.name;

    // Convert Kelvin to Fahrenheit.
    fahrenheitTemp = ((kelvinTemp) * (9/5) - 459.67).toFixed(1);

    // Convert Kelvin in Celsius.
    celsiusTemp = (kelvinTemp - 273).toFixed(1);

    // Convert ms per km/h.
    windSpeed = (2.237 * (windSpeed)).toFixed(1);

    // Show Contents.
    $("#cityName").html(cityName);
    $("#fahrenheitTemp").html(fahrenheitTemp);

    $("btn").click(function(){
      if(changeTemp === false){
        $("#fahrenheitTemp").html(celsiusTemp);
        changeTemp = true;
      }
      else{
        $("#fahrenheitTemp").html(fahrenheitTemp);
        changeTemp = false;
      }     
    });    
  });  
});
The button doesn't change value
alpox
@alpox
Apr 20 2016 20:19
@mikail1998 I added the outline too to remove the dotted line around the links (you can remove it but i usually dont like this dotted line :-) )
It just seems that the link also gets active when you click on it and that makes an underline too.
@JADSN I believe your selector for the button is wrong. How does the html of your button look like?
Mikail Bayram
@mikail1998
Apr 20 2016 20:21
@alpox Thank you so much !!
CamperBot
@camperbot
Apr 20 2016 20:21
mikail1998 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: mikail1998 already gave alpox points
Bruce Young
@mutantspore
Apr 20 2016 20:21
@JADSN as the weather api call and for that matter, the geolocate function, is asynchronous you don’t know when they wil return with data. Wrap your weather api call in a function and call it from within the geolocate function.
alpox
@alpox
Apr 20 2016 20:21
@dagman Wtf... who is gotham? :D
João Alves
@JADSN
Apr 20 2016 20:22
This message was deleted
alpox
@alpox
Apr 20 2016 20:22
@mutantspore Uh nice catch i totally overlooked his geolocation call and focused on the click function xD
@JADSN Listen to @mutantspore, he is wise
João Alves
@JADSN
Apr 20 2016 20:23
@mutantspore How can i do it?
Bruce Young
@mutantspore
Apr 20 2016 20:24
@JADSN can i see this as a pen?
Islam Ibakaev
@dagman
Apr 20 2016 20:25
@alpox city where batman lives :smile:
alpox
@alpox
Apr 20 2016 20:26
@dagman Hahah :D
Islam Ibakaev
@dagman
Apr 20 2016 20:26
@alpox just a fun :smile:
@alpox have u done portfolio page?
alpox
@alpox
Apr 20 2016 20:27
@dagman +
João Alves
@JADSN
Apr 20 2016 20:28
@mutantspore Some solution ?
Bruce Young
@mutantspore
Apr 20 2016 20:29
yes.. a few thing sto fix...
fixing teh temp button now
Holic
@Holic101
Apr 20 2016 20:34
Hey everybody, I'm trying to implement the twitter function to my Random Quote Machine app, but no success so far. Could you please take a look? Thx. http://codepen.io/Holic101/pen/EKRybQ
Bruce Young
@mutantspore
Apr 20 2016 20:36
@JADSN ok that’s fixed the current issues
Bruce Young
@mutantspore
Apr 20 2016 20:44
do you understand what I’ve done?
@JADSN
http://codepen.io/MutantSpore/pen/WwyLrp?editors=1010
João Alves
@JADSN
Apr 20 2016 20:47
@mutantspore Ok, but when i click the button, this show 0
ElvisTheStriker
@ElvisTheStriker
Apr 20 2016 20:50
Hi guys. I'm seeing some weird behaviour from my function tempToggle I use to toggle between degrees celcius and farenheit. it converts it ok from c to f but when i click the button to toggle it back it gives me a negative number .... then if I toggle it back it gives me the correct value for farenheit... wierd ... can someone have a look. http://codepen.io/ElvisTheStriker/pen/QNrjLN
Bruce Young
@mutantspore
Apr 20 2016 20:52
@JADSN well not for me. try a reload. It needs to be changed to a specific button also rather than any button as it is now. Perhaps you also shouldn’t put the city in a button. I’ve just tried to get it to work within the way you were going about it and not just rewrite the whole thing in a better way.
Christina
@cgraham74
Apr 20 2016 20:53
@ElvisTheStriker Your variables are outside your function
@ElvisTheStriker They only get the initial correct ones on the page load.
ElvisTheStriker
@ElvisTheStriker
Apr 20 2016 20:55
Ah ok I'll have a look at that . Thanks @cgraham74
CamperBot
@camperbot
Apr 20 2016 20:55
elvisthestriker sends brownie points to @cgraham74 :sparkles: :thumbsup: :sparkles:
:star: 289 | @cgraham74 | http://www.freecodecamp.com/cgraham74
Christina
@cgraham74
Apr 20 2016 20:56
@ElvisTheStriker nm about the variables. However, It is only working on initial page load. Still looking into why :)
Tyler Moeller
@TylerMoeller
Apr 20 2016 21:16
@ElvisTheStriker You can request Fahrenheit or Celsius from the API (http://openweathermap.org/current#data). That way, you don't have to worry about Kelvin. Just get the temp from the API, store it one variable, convert it, and then store the converted value in a second variable. When you click the button, you'll only need to display the data in the variable.
For example:
    tempF = weatherData.main.temp.toFixed(2);
    tempC = ((temp - 32) * (5 / 9)).toFixed(2);
...
$('#convert-button').click(function () {
  if ($('#temperature').text().indexOf('F') > -1) {
    $('#temperature').text(tempC + '° C');
  } else {
    $('#temperature').text(tempF + '° F');
  }
Christina
@cgraham74
Apr 20 2016 21:17
@ElvisTheStriker Ok you're if / else statement. The else portion doesn't return a temp
His TC variable has the correct celsius in it. Checked it through the console log.
ElvisTheStriker
@ElvisTheStriker
Apr 20 2016 21:31
@TylerMoeller and @cgraham74 I see what you mean. Thanks to you both for the help. :)
CamperBot
@camperbot
Apr 20 2016 21:31
elvisthestriker sends brownie points to @tylermoeller and @cgraham74 :sparkles: :thumbsup: :sparkles:
:warning: elvisthestriker already gave cgraham74 points
:star: 507 | @tylermoeller | http://www.freecodecamp.com/tylermoeller
alpox
@alpox
Apr 20 2016 21:32
@ElvisTheStriker
function tempToggle(temp) { //to use when C/F button clicked
    if (currentT === "c") { //check current temp type displayed
      temp = ((temp * 9 / 5) + 32).toFixed(2); // if cent the convert to farn
      currentT = "f"; // set flag
      $(".tempInfo").html("<h1>Temperature  " + temp + " &#x2109</h1>"); //change html page
    } else {// else if  farn the convert to cent
      currentT = "c"; // set flag
      $(".tempInfo").html("<h1>Temperature  " + temp + " &#x2103</h1>"); //change html page
    }
    return temp;
  }
I only removed one line... Since, as i told you, you don't have to convert celsius to celsius :-)
ElvisTheStriker
@ElvisTheStriker
Apr 20 2016 21:37
@alpox Genius. Thank you.
CamperBot
@camperbot
Apr 20 2016 21:37
elvisthestriker sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:warning: elvisthestriker already gave alpox points
alpox
@alpox
Apr 20 2016 21:38
@ElvisTheStriker You're welcome :-9
@ElvisTheStriker Btw. its not a good practice though, to set a global variable in a function and even use it as an input variable to another function.
Just to state that :-) even if its working now, its not "good code" yet
ElvisTheStriker
@ElvisTheStriker
Apr 20 2016 21:41
@alpox ... got you. :)
Chris Davis
@chrisdav6
Apr 20 2016 21:46
testing....
hmmm, wondering how to adjust settings to not show my name in chat?
alpox
@alpox
Apr 20 2016 21:47
@chrisdav6 Test successed
Chris Davis
@chrisdav6
Apr 20 2016 21:47
@alpox lols!
alpox
@alpox
Apr 20 2016 21:47
Okay failed :D
Brian
@sludge256
Apr 20 2016 21:48
@chrisdav6 It pulls from your GitHub display name.
alpox
@alpox
Apr 20 2016 21:48
I have no idea... that is a new feature that it shows that
Chris Davis
@chrisdav6
Apr 20 2016 21:48
This message was deleted
This message was deleted
This message was deleted
okay redo, test number 2!
dang it! someone say something so i can get a new text block! :)
ML164
@ML164
Apr 20 2016 21:52
something
Chris Davis
@chrisdav6
Apr 20 2016 21:53
thank you! okay, redo redo! test number 2!
alpox
@alpox
Apr 20 2016 21:53
else
Chris Davis
@chrisdav6
Apr 20 2016 21:53
dang!
didnt work!
Jeff
@adzam5
Apr 20 2016 21:53

How would I modify the following with JS?

.panel-default > .panel-heading {
...
}
$('.panel-default .panel-heading).css()

does not seem to work

alpox
@alpox
Apr 20 2016 21:53
@chrisdav6 I'm not sure if there is a way except removing the name from the github account
@adzam5 That is javascript already
@adzam5 Aha :D
@adzam5 you forgot a quote '
Chris Davis
@chrisdav6
Apr 20 2016 21:54
@alpox yeah, i updated to just my first name but its now showing yet. I bet i have to log out and back in to gitter. Be right back :)
alpox
@alpox
Apr 20 2016 21:54
@adzam5 and also you can do: $('.panel-default > .panel-heading').css();
Jeff
@adzam5
Apr 20 2016 21:55
@alpox The missing quote was jst a typo in chat
alpox
@alpox
Apr 20 2016 21:55
@adzam5 Okay ^^
Jeff
@adzam5
Apr 20 2016 21:56
@alpox It isn't working for me with or without the >
alpox
@alpox
Apr 20 2016 21:56
@adzam5 Maybe some other code of yours is wrong
I don't have a context to analyze :-9
Chris Davis
@chrisdav6
Apr 20 2016 21:56
test number 3! :)
Success!
alpox
@alpox
Apr 20 2016 21:56
@chrisdav6 :thumbsup:
Jeff
@adzam5
Apr 20 2016 21:59

This is the CSS

.panel-default > .panel-heading {
    color: #FFFFFF;
    font-size: 18px;
    border-color: #000000;
    background-color: #404040;
    background-image: -moz-linear-gradient(top, #ff0000, #000000);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ff0000), to(#000000));
}

This is the JS

$('.panel-default .panel-heading').css({
    'background-image': '-moz-linear-gradient(top, ' + color + ', #000000)',
    'background-image': '-webkit-gradient(linear, 0 0, 0 100%, from(' + color + '), to(#000000))'
});
All my other JS, CSS modifications are working fine. This is the only one giving me an issue
alpox
@alpox
Apr 20 2016 22:01
@adzam5 Hmm do you call it in a function? Are you sure its called right?
Jeff
@adzam5
Apr 20 2016 22:02
@alpox Its within an ajax callback which is setting the color variable. All other css changes are working fine in the same callback
Brendan Jackson
@BrendanJackson
Apr 20 2016 22:03

Working on just the last few hurdles of my portfolio and I'm running into a wall on a few things. For whatever reason my navbar takes up the full width of the screen as it should however, the rest of my divs and even my footer are off by about 1em on both the left and right sides.

I have tried

*, html, body, {
margin:0;
padding:0;
border:0;
}

As well as some other CSS normalize options I found on the web, so what gives here?

html, body{
margin-left:-.85rem;
margin-right:-.85rem;
}

This filled the full width of the page but caused so many more problems to come along with it that I went back to how it was.

I'm not sure what sets my navbar apart from the rest of my page other than that its a bootstrap navbar. I have a feeling fixing this will also remove some of my mobile issues as well so help would be much appreciated, here's a link to my page: http://codepen.io/brendanjackson/full/VaMEwO

alpox
@alpox
Apr 20 2016 22:06
@adzam5 Do you have a codepen?
Bryan Hyshka
@hyshka
Apr 20 2016 22:06
Anybody else have problems getting any AJAX requests working in codepen.io?
Brendan Jackson
@BrendanJackson
Apr 20 2016 22:07
ya it should be at the bottom of the text
is it not showing up?
alpox
@alpox
Apr 20 2016 22:08
@adzam5 Though when i go read about this codes, it seems that you have to set background instead of background-image
@adzam5 But actually i think both works
Brendan Jackson
@BrendanJackson
Apr 20 2016 22:09
whoops...
alpox
@alpox
Apr 20 2016 22:14
@BrendanJackson
body, html{
  margin:-1em;
  padding:0 !important; // <--- added !important
  border:0;
}
Brendan Jackson
@BrendanJackson
Apr 20 2016 22:16
well it works, I wonder why it was necessary to use the !important option though
alpox
@alpox
Apr 20 2016 22:17
the container-fluid overwrote your padding
But i guess you wouldnt have to do it if your next element is a row
@BrendanJackson and you are not supposed to add multiple "container" classes inside everything. You should use container only once for the outermost element
also container-fluid
The only place where you use it inside is in the nav because the nav itself stays out of the context of the rest of the page
Bruce Young
@mutantspore
Apr 20 2016 22:20
@hyshka tell us more ..and can we see a pen?
Brendan Jackson
@BrendanJackson
Apr 20 2016 22:21
I see, I guess I'll edit out the rest of the containers then, maybe it will help my page become more responsive without making a ridiculous amount of media query changes
Bryan Hyshka
@hyshka
Apr 20 2016 22:21

https://codepen.io/hyshka/pen/dMKwOx

It seems to be related to the api urls. I've tried several but only the google books one worked.

alpox
@alpox
Apr 20 2016 22:23

@BrendanJackson You get a proper aligning with only bootstrap when you remove the padding from the body, put the css for your blocks like:

.blocks{
  max-width:120em;
  height: 50em;
  margin-top: -1.75em;
  margin-bottom: -1.75em;
  padding:0;
  border: 0;
}

and add the class row to all of the blocks

Then you have used the proper bootstrap setup
Components of bootstrap depend on each other and have to be in the right order (parent/children) for that they work properly
As a container wants you to add rows as its children, the rows want to have columns as their children
Bruce Young
@mutantspore
Apr 20 2016 22:25
@hyshka hmm that one .. yes .. ok a couple of things. you can’t use codepen as https and then from with in it call something insecure over http .. so pull your codepen up as http:// . secondly I think that api doesn’t return proper json objects. I’d find another one. such as Forismatic or the one from mashape
Bryan Hyshka
@hyshka
Apr 20 2016 22:26
Ok thanks Bruce
Jeff
@adzam5
Apr 20 2016 22:26
@alpox Sorry, had to step away from the computer for a minute. This is on my dev server, so no codepen. I will try background, although background-image is working in another place in the function
alpox
@alpox
Apr 20 2016 22:27
@adzam5 Yep, i guess they both work... I think your problem has to be somewhere in the context where you call the .css. I cannot say more ^^
Brendan Jackson
@BrendanJackson
Apr 20 2016 22:28
@alpox I'll try it out thanks for the advice
CamperBot
@camperbot
Apr 20 2016 22:28
brendanjackson sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 567 | @alpox | http://www.freecodecamp.com/alpox
Jeff
@adzam5
Apr 20 2016 22:52
@alpox Thanks for your help. I ended up creating a style element in the PHP file ajax is calling and appending it to the head upon success.
CamperBot
@camperbot
Apr 20 2016 22:52
adzam5 sends brownie points to @alpox :sparkles: :thumbsup: :sparkles:
:star: 569 | @alpox | http://www.freecodecamp.com/alpox
alpox
@alpox
Apr 20 2016 22:54
@adzam5 Still no good code :D but okay
RJsauce
@RJsauce
Apr 20 2016 22:55
Hey guys, how would I go about creating a background for my images and heading? I want it to start just a bit above <h2>Portfolio</h2>. This is what I tried but it didn't work: http://codepen.io/rjsauce/pen/NNzXNj?editors=1100
cmf89
@cmf89
Apr 20 2016 23:11
@RJsauce i'm not sure what exactly you are trying to do
Jeff
@adzam5
Apr 20 2016 23:11
@alpox I'm definitely open to suggestions if you have a better idea. I'm sure if I play with it I can get it to work in JS, but I know this would be an issue to change in JS
[type="radio"]:checked + label:after {
    border: 2px solid #ff0000;
}
cmf89
@cmf89
Apr 20 2016 23:12
@RJsauce you mean a background for everything from Portfolio down through your pictures below? Try putting them within a div and you can set a background color for that div
Jeff
@adzam5
Apr 20 2016 23:12
@alpox Do you think I am better off just having a bunch of different CSS files?
cmf89
@cmf89
Apr 20 2016 23:13
@RJsauce you kinda already have that for the top portion of the page due to jumbotron
Michael de Lima Alves
@elderalves
Apr 20 2016 23:14
Hello someone.
Who made this challenge "Exact Change"?
alpox
@alpox
Apr 20 2016 23:14
@adzam5 Why don't you just put that in a css file
Michael de Lima Alves
@elderalves
Apr 20 2016 23:14
Someone accomplished that?
Jeff
@adzam5
Apr 20 2016 23:15
@alpox I have it in a CSS file, but I need to be able to change the color depending on the content loaded onto the page
alpox
@alpox
Apr 20 2016 23:15
@adzam5 Well yeah, you can do that. or even keep things in one css file only.
If you want to have them seperated, you can load them all in the header with a tag.
If you want to hold them on your system in different files but load them as 1 file, use Gulp or Grunt to concatenate them
@adzam5 I wonder a bit for what the :after is
cmf89
@cmf89
Apr 20 2016 23:16
@suforoso yeah, it is a little tricky to think through the logic to start
do you need a hint?
Michael de Lima Alves
@elderalves
Apr 20 2016 23:16
@cmf89 please dude.
cmf89
@cmf89
Apr 20 2016 23:17
@suforoso so you have 3 inputs for your function... the price, how much money the customer gives, and an array of what you have in the register
alpox
@alpox
Apr 20 2016 23:17
@adzam5 Is there an after element? And yeah you can do it in js if its only the label which should get the border:
$("[type="radio"]:checked + label").css("border", "2px " + color + " #ff0000");
Jeff
@adzam5
Apr 20 2016 23:18
@alpox If I don't have the :after it puts a border around the radio circle and the lablel. The border just needs to be around the radio circle
cmf89
@cmf89
Apr 20 2016 23:18
@suforoso so the first step is to figure out how much change you have to give... say the price is 12.50 and the customer gives 20.00... then the change is 7.50
@suforoso next, think about how you would make 7.50 in change normally in real life
@suforoso instinctively you might say give 1 $5 bill, 2 $1 bills, and 2 quarters... but there is an algorithm you used to mentally select the right bills
alpox
@alpox
Apr 20 2016 23:20
@adzam5 Wouldn't you achieve that with only $("[type="radio"]:checked").css("border", "2px " + color + " #ff0000");
cmf89
@cmf89
Apr 20 2016 23:20
@suforoso think about that for a bit, and if you need more help i am around
Michael de Lima Alves
@elderalves
Apr 20 2016 23:20
@cmf89 allright it seems more clear now.
@cmf89 Thanks!!
CamperBot
@camperbot
Apr 20 2016 23:21
suforoso sends brownie points to @cmf89 :sparkles: :thumbsup: :sparkles:
:star: 365 | @cmf89 | http://www.freecodecamp.com/cmf89
cmf89
@cmf89
Apr 20 2016 23:21
no problem
good luck!
Ghost
@ghost~564bf69916b6c7089cbb1fef
Apr 20 2016 23:21
Hello, just half finished a portfolio page as my old one was a fork. Feedback very welcome http://andrewghc.github.io/
Michael de Lima Alves
@elderalves
Apr 20 2016 23:21
@cmf89 the big deal is about the register. I'll try now
Jeff
@adzam5
Apr 20 2016 23:26
@alpox
[type="radio"]:checked {
    border: 2px solid $color;
}
Clipboard02.jpg
vs
[type="radio"]:checked + label:after {
    border: 2px solid $color;
}
Clipboard01.jpg
Michael de Lima Alves
@elderalves
Apr 20 2016 23:26
@cmf89 Thanks dude. It's done.
CamperBot
@camperbot
Apr 20 2016 23:26
suforoso sends brownie points to @cmf89 :sparkles: :thumbsup: :sparkles:
:warning: suforoso already gave cmf89 points
alpox
@alpox
Apr 20 2016 23:27
@adzam5 Yeah i see... hmm quite dumb :-/ i see the problem
Jeff
@adzam5
Apr 20 2016 23:29
@alpox I guess it doesn't look bad the first way and it is easier to modify with JS unlike the second way. Although having nothing to do with the border, it looks like 2 different colors
Lane Goodman
@LanesGood
Apr 20 2016 23:29
hey folks, anyone have any luck centering text vertically relative to images?
alpox
@alpox
Apr 20 2016 23:36
@adzam5 Well, i wonder how your html looks. I'm quite sure one could work around it with js somehow
Philip
@philipd321
Apr 20 2016 23:42
Hello world
CamperBot
@camperbot
Apr 20 2016 23:42

welcome to FreeCodeCamp @philipd321!

Philip
@philipd321
Apr 20 2016 23:44
i need a little help please, I am trying to create an internal link in codepen, its not working.
<li><a href="#Contact">Contact</a></li>
trying to link to my contact on the same page
Frank XC
@tenkdayz
Apr 20 2016 23:47
@philipd321 you have another elem with the id of Contact ?
Bruce Young
@mutantspore
Apr 20 2016 23:47
@philipd321 and you have something with an ID of Contact further down?
lol
Frank XC
@tenkdayz
Apr 20 2016 23:48
@mutantspore you take it.
Bruce Young
@mutantspore
Apr 20 2016 23:48
no no you
lol
Frank XC
@tenkdayz
Apr 20 2016 23:48
@mutantspore ok lol
Bruce Young
@mutantspore
Apr 20 2016 23:49
actually really playing Counter Strike .. should be coding
João Alves
@JADSN
Apr 20 2016 23:50
This message was deleted
$("#body").css("background-img","https://goo.gl/HZmdxH");
How i set backgroun-img using .css in js
Michael de Lima Alves
@elderalves
Apr 20 2016 23:51
@JADSN $('body')
Bruce Young
@mutantspore
Apr 20 2016 23:51
@JADSN background-image
and what @suforoso said
Michael de Lima Alves
@elderalves
Apr 20 2016 23:52
body is an element and not a id
Philip
@philipd321
Apr 20 2016 23:52
@mutantspore no I dont.
I dont understand
Paul Manning
@paulmanning
Apr 20 2016 23:54
$(“body”).css(“background-image”, “https://goo.gl/HZmdxH");
@JADSN
Frank XC
@tenkdayz
Apr 20 2016 23:55

@philipd321 if you have

<a href="#elemID"></a>

there should be something like

<div id="elemID"></div>

for the link to snap to...

Philip
@philipd321
Apr 20 2016 23:56
@tenkdayz thank you
CamperBot
@camperbot
Apr 20 2016 23:56
philipd321 sends brownie points to @tenkdayz :sparkles: :thumbsup: :sparkles:
:star: 425 | @tenkdayz | http://www.freecodecamp.com/tenkdayz
Frank XC
@tenkdayz
Apr 20 2016 23:56
@philipd321 np
Lane Goodman
@LanesGood
Apr 20 2016 23:58
anyone want to look at the code here and help center the text vertically? I'm trying to make it responsive: http://codepen.io/LaneGoodman/pen/EKRrGg?editors=1100
Bruce Young
@mutantspore
Apr 20 2016 23:58
@JADSN $(‘body').css("background-image", "url(https://goo.gl/HZmdxH)”);