These are chat archives for FreeCodeCamp/HelpFrontEnd

13th
Feb 2017
Chelsea Scott
@chelseas9210
Feb 13 2017 00:02
could some one pm me about my second project and why one of my pictures isn't aligned anymore?
i don't really want to share my project with everyone...self conscious and not ready for that yet
joopt
@joopt
Feb 13 2017 00:12
hey guys im having trouble with my buttons how do i make it so that when I click betweeen online and offline it doesn't remove everything?
Jake
@Jaketh
Feb 13 2017 00:20
@joopt it looks like you're just using jquery's hide method, to hide everything on click... so I guess what you're looking for is a way to detect if its already hidden, and then to show it if it is already hidden.
Easiest way, is to use jQuery's toggle method.
long way, is to use a conditional logic to detect if its hidden, and if it is, show it
kikykindagirl
@kikykindagirl
Feb 13 2017 01:02
Hi there! I'm having trouble with .fa-github Can't get it in the correct position. Here's the codepen link : http://codepen.io/kikykindagirl/pen/zNdGqw
I don't get what am i doing wrong :S
taltmann42
@taltmann42
Feb 13 2017 01:08
@kikykindagirl when you add vertical-align:middle to all icons, they're at least vertically centered
@kikykindagirl when you then add padding-left:0 to the fa-github class it should be fine - don't know why that happens though
kikykindagirl
@kikykindagirl
Feb 13 2017 01:13
@taltmann42 yay!! That was it! :D Thank you so much!! Made me happy :D
CamperBot
@camperbot
Feb 13 2017 01:13
kikykindagirl sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 13 2017 01:14
@kikykindagirl :thumbsup:
Aaron
@aaronedwarda
Feb 13 2017 01:45
anyone awake?
taltmann42
@taltmann42
Feb 13 2017 01:49
@aaronedwarda i could have some time for the simon game if you have some problems
Aaron
@aaronedwarda
Feb 13 2017 01:51
@taltmann42 thanks, I have mine designed and such. Now trying to tackle making the game work. I am thinking using an array with numbers assigned to each color and selecting them at random
CamperBot
@camperbot
Feb 13 2017 01:51
aaronedwarda sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Aaron
@aaronedwarda
Feb 13 2017 01:51
but trying to work out in my brain of how to do that in steps, with a check to see if the user has clicked the same
Tom
@moT01
Feb 13 2017 01:53
@aaronedwarda break it down into pieces
taltmann42
@taltmann42
Feb 13 2017 01:53
@aaronedwarda guess that could work yes. and after each correct sequence of clicks, add one element to that array.
In a function playRound or something you can keep track of the progress from the user which reflects the index of the array of correct colors
Aaron
@aaronedwarda
Feb 13 2017 01:54
thats what I’m thinking anyway. is there a better way to approach it?
taltmann42
@taltmann42
Feb 13 2017 01:54

basically something like

var currentRound = [3,2,4,4,1];
var currentStep = 0;

then listen on the clicks on the game and check if the color clicked is the one at currentRound[currentStep]

wait a sec I'll take a look at how i did it
Aaron
@aaronedwarda
Feb 13 2017 01:55
k thanks for the help
bill zhang
@likefatboy
Feb 13 2017 01:56
please~i want to askwhat can i do to make the "img" become center
Aaron
@aaronedwarda
Feb 13 2017 01:56
@likefatboy to make an image centered?
bill zhang
@likefatboy
Feb 13 2017 01:56
yes
taltmann42
@taltmann42
Feb 13 2017 01:57
yep something like this. you should also have some variables that reflect if the user can even click (has the game started? did it stop because he made a mistake? is the game currently viewing the next sequence?) @aaronedwarda
Aaron
@aaronedwarda
Feb 13 2017 01:57
@likefatboy you can adjust the margins in css
bill zhang
@likefatboy
Feb 13 2017 01:57
i try but ~~cannot
Aaron
@aaronedwarda
Feb 13 2017 01:58
@likefatboy you working in codeine?
code pen*
@taltmann42 I hadn’t thought of making sure the game was started yet. :+1:
@taltmann42 is using something like if($(‘#x’).data(‘clicked’)a good method for that?
Gulsvi
@gulsvi
Feb 13 2017 02:00
Please review my Twitch app - thanks! https://codepen.io/skycoder/pen/XpyrYN
Aaron
@aaronedwarda
Feb 13 2017 02:00
as far as checking if the user has clicked that is
taltmann42
@taltmann42
Feb 13 2017 02:00
@aaronedwarda you can add a click-event listener $("#x").on("click", function(){ //check if clickable, if yes check if correct or not });
when you want to use data you'd have to add the clicked data anyways when the user clicks on a field, which would also be done with a click event listener
Tom
@moT01
Feb 13 2017 02:02
@SkyCoder01 turned out real good
nice hover effects
Aaron
@aaronedwarda
Feb 13 2017 02:02
@taltmann42 ahh thanks for that as well. I still have a lot of learning to do. I had assumed to add the clicked.. sounds like click-event listener is a better way. Take a step out
CamperBot
@camperbot
Feb 13 2017 02:02
aaronedwarda sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: aaronedwarda already gave taltmann42 points
Aaron
@aaronedwarda
Feb 13 2017 02:03
@SkyCoder01 looks sweet!
Tom
@moT01
Feb 13 2017 02:03
could use a smaller margin when you shrink the window down
it cuts it off a bit
@aaronedwarda i made a boolean variable
Aaron
@aaronedwarda
Feb 13 2017 02:04
@moT01 for checking if the correct color has been clicked?
Gulsvi
@gulsvi
Feb 13 2017 02:04
Thanks for taking a look @moT01 and @aaronedwarda !
CamperBot
@camperbot
Feb 13 2017 02:04
skycoder01 sends brownie points to @mot01 and @aaronedwarda :sparkles: :thumbsup: :sparkles:
:cookie: 308 | @aaronedwarda |http://www.freecodecamp.com/aaronedwarda
:cookie: 509 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Feb 13 2017 02:04
oh, my bad, ...no i thought you meant for checking if the buttons should be available to click
like if the computer was playing
Aaron
@aaronedwarda
Feb 13 2017 02:05
@SkyCoder01 no prob
!
@moT01 oh I got you, thanks for the info though! I havn’t got much done outside of the design and brainstorming
CamperBot
@camperbot
Feb 13 2017 02:06
aaronedwarda sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 510 | @mot01 |http://www.freecodecamp.com/mot01
Aaron
@aaronedwarda
Feb 13 2017 02:07
thats my tinkering so far
and my silly hand background lol
Tom
@moT01
Feb 13 2017 02:07
simon mini
Aaron
@aaronedwarda
Feb 13 2017 02:07
lol yea, apparently thats a thing
I had where the buttons lit up on click, but it kinda annoyed me how it wasn’t super visable which was lit. So I went with color appropriate dots
Tom
@moT01
Feb 13 2017 02:10
i turned the opacity way down, then back up on a click
http://codepen.io/moT01/full/jyqrNr you can check out mine for some ideas if you want, ...i think its one of my better projects
Aaron
@aaronedwarda
Feb 13 2017 02:11
I originally had a box shadow with a pretty wide pixel range, your’s sounds like a better idea though lol
Chase
@Athabasco
Feb 13 2017 02:13
Why am I getting an error??
http://codepen.io/Athabasco/pen/wgRGJX
Aaron
@aaronedwarda
Feb 13 2017 02:13
@moT01 thats great!
Tom
@moT01
Feb 13 2017 02:15
@aaronedwarda thanks, i was pretty happy with it
CamperBot
@camperbot
Feb 13 2017 02:15
mot01 sends brownie points to @aaronedwarda :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @aaronedwarda |http://www.freecodecamp.com/aaronedwarda
Tom
@moT01
Feb 13 2017 02:16
@Athabasco im taking a loook
Chase
@Athabasco
Feb 13 2017 02:16
@moT01 alright!
Aaron
@aaronedwarda
Feb 13 2017 02:16
@moT01 yea I would be too. Really stoked about completing front end myself
Tom
@moT01
Feb 13 2017 02:17
@Athabasco i think its your query
maybe
Chase
@Athabasco
Feb 13 2017 02:17
@moT01 i know its coming from js... console says line 7 which is the start of my $.ajax call
Tom
@moT01
Feb 13 2017 02:18
yea that's not it
Chase
@Athabasco
Feb 13 2017 02:19
and try commenting the ajax out... it works fine them
then
@moT01
Tom
@moT01
Feb 13 2017 02:23
yea its in the ajax call somewhere
i can get a .getjson call to work
Chase
@Athabasco
Feb 13 2017 02:28
hmm
taltmann42
@taltmann42
Feb 13 2017 02:31

@Athabasco from the API documentation: (https://www.mediawiki.org/wiki/API:Main_page)

When you make HTTP requests to the MediaWiki web service API, be sure to specify a User-Agent header that properly identifies your client. Don't use the default User-Agent provided by your client library, but make up a custom header that identifies your script or service and provides some type of means of contacting you

Probably that's the problem

Ralph Nahra
@Rallph
Feb 13 2017 02:32

Hey, can someone help me find out why my twitch page is saying they're all playing league of legends when only one of them is? I can't seem to figure it out.

http://codepen.io/Rallph/pen/dNjVPK?editors=1111

Chase
@Athabasco
Feb 13 2017 02:33
@taltmann42 I don't know how that effects me
taltmann42
@taltmann42
Feb 13 2017 02:34
@Athabasco i don't see a user-agent header in your ajax
Tom
@moT01
Feb 13 2017 02:35
what does that mean
why would a .getjson work and a .ajax not, ...wouldn't you need that for both, ...or maybe its included in the .getjson or something
taltmann42
@taltmann42
Feb 13 2017 02:36
there is an example
// Using jQuery
$.ajax( {
    url: remoteUrlWithOrigin,
    data: queryData,
    dataType: 'json',
    type: 'POST',
    headers: { 'Api-User-Agent': 'Example/1.0' },
    success: function(data) {
       // do something with data
    }
} );
Chase
@Athabasco
Feb 13 2017 02:36
yeah i have no clue why
taltmann42
@taltmann42
Feb 13 2017 02:36
oh sorry, getjson worked?
didn't follow the complete discussion here
Chase
@Athabasco
Feb 13 2017 02:37
@moT01 what did you do for the getjson
Tom
@moT01
Feb 13 2017 02:37
i got the getjson to work, ...but that still might be why ajax isnt working
taltmann42
@taltmann42
Feb 13 2017 02:38
hmm probably.. but getJson uses ajax internally anyways as far as I know. Do you have a version with the working getJson?
Tom
@moT01
Feb 13 2017 02:39
i did
Chase
@Athabasco
Feb 13 2017 02:39
if you do have one that would be beautiful
Chase
@Athabasco
Feb 13 2017 02:40
@moT01 @taltmann42 thanks
CamperBot
@camperbot
Feb 13 2017 02:40
athabasco sends brownie points to @mot01 and @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 497 | @taltmann42 |http://www.freecodecamp.com/taltmann42
Andres Britto
@andresbritto
Feb 13 2017 02:41
hello everyone. I am doing the local weather challenge, I am using the Open weather API like suggested but just accept requests http but geolocation require https. any suggestions???
Tom
@moT01
Feb 13 2017 02:42
@Rallph you still having problems?
Ralph Nahra
@Rallph
Feb 13 2017 02:42
@moT01 yeah :/
Austin Tice
@AustinTice
Feb 13 2017 02:52
If you're new to coding and want to come hangout and get challenged by other beginners join us at Code Noobies! https://gitter.im/CodeNoobies/Lobby?utm_source=share-link&utm_medium=link&utm_campaign=share-link
Tom
@moT01
Feb 13 2017 02:55
@Rallph yea, it's like not resetting game back to offline or something
im still dissecting, any luck?
achudoz
@achudoz
Feb 13 2017 02:58
hi, i have a frustration that I would like to remove. When I use bootstrap with multiple columns in a row and I want to center the contents of both those column divs on both axes using pretty much any method from css-tricks, one of them always gets centered perfectly and the other becomes proportionally distorted and distorts the whole document. Had anyone had the same experience and if so, how did you overcome this sillyness?
Tom
@moT01
Feb 13 2017 02:59
@Rallph console.log your stream.stream test
pretty sure its the way you nested your .getjson calls
something like, the first one isnt finished when you try to call the second one
Ralph Nahra
@Rallph
Feb 13 2017 03:00
@moT01 but all the first one does is call the second one
Tom
@moT01
Feb 13 2017 03:01
the first one calls the channel url
@Rallph console.log your channel and you get the results from each channel
console.log your stream and its the same result over and over
Ralph Nahra
@Rallph
Feb 13 2017 03:04
any idea why?
Tom
@moT01
Feb 13 2017 03:06
im trying to think it through
i tried to explain it the best i think i can
the stream that logs is the last one in the array
Ralph Nahra
@Rallph
Feb 13 2017 03:08
I'm gonna try to put everything in the outer function and see how it works out
thanks for the effort @moT01 :)
CamperBot
@camperbot
Feb 13 2017 03:08
rallph sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @mot01 |http://www.freecodecamp.com/mot01
Gulsvi
@gulsvi
Feb 13 2017 03:09
@Rallph It seems it's because of your for() loop. Use a .forEach instead - async functions can't be called in a for loop
list.forEach(function(user, i) {
Ralph Nahra
@Rallph
Feb 13 2017 03:11
ok, I'll give that a try and let you guys know how it works out. thanks @SkyCoder01 :)
CamperBot
@camperbot
Feb 13 2017 03:11
rallph sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 183 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Josh Bivens
@joshbivens
Feb 13 2017 03:17
@isabellaliu77 Nice :)
Isabella lIU
@isabellaliu77
Feb 13 2017 03:18
@joshbivens Thx! :smile:
CamperBot
@camperbot
Feb 13 2017 03:18
isabellaliu77 sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @joshbivens |http://www.freecodecamp.com/joshbivens
Adam
@GoingAllTheWayUp
Feb 13 2017 04:46
string.prototype.split()???
anyone
I'm reading the MDN right now and I want to spit my string into an array of charactors
Gulsvi
@gulsvi
Feb 13 2017 04:48
var myString = 'hello'
var arrayOfCharacters = myString.split('');
console.log(arrayOfCharacters); // ['h', 'e', 'l', 'l', 'o']
@GoingAllTheWayUp
Adam
@GoingAllTheWayUp
Feb 13 2017 04:49
so you do need a separator?
It sound like you don't
Gulsvi
@gulsvi
Feb 13 2017 04:49
@GoingAllTheWayUp What do you mean by 'separator'?
the part inside the parentheses? ''
Adam
@GoingAllTheWayUp
Feb 13 2017 04:50
The split.protoype takes two arguments I guess, separator and limit
yes
Gulsvi
@gulsvi
Feb 13 2017 04:51
ahhh, yes, sorry:
var myString = 'hello'
var arrayOfCharacters = myString.split('', 3);
console.log(arrayOfCharacters); // ['h', 'e', 'l']
or without the separator:
var myString = 'hello'
var arrayOfCharacters = myString.split();
console.log(arrayOfCharacters); // ['hello']
Adam
@GoingAllTheWayUp
Feb 13 2017 04:52
ok so that would give me then and array of [h,e,l,l,o]
Gulsvi
@gulsvi
Feb 13 2017 04:52
only if you split it with ''
no space between those apostrophes
Adam
@GoingAllTheWayUp
Feb 13 2017 04:54
I see, but when you use myString.split() with no arguments the out come is going to be a new array or return an array?
im not makieng an array
what if I wanted to make it into a new Array
Gulsvi
@gulsvi
Feb 13 2017 04:55
Yes, it puts the whole string inside an array
Adam
@GoingAllTheWayUp
Feb 13 2017 04:56
How would I call this array to access and manipulate it is it called myString?
@SkyCoder01 thanks by the way
Gulsvi
@gulsvi
Feb 13 2017 04:57
In the examples above, it would called arrayOfCharacters
Adam
@GoingAllTheWayUp
Feb 13 2017 04:57
duh...
ok
Gulsvi
@gulsvi
Feb 13 2017 04:57
for example:
var myString = 'hello'
var arrayOfCharacters = myString.split('', 3);
console.log(arrayOfCharacters[0]); // "h"
Adam
@GoingAllTheWayUp
Feb 13 2017 04:57
nice
@SkyCoder01 tx!
CamperBot
@camperbot
Feb 13 2017 04:58
goingallthewayup sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 188 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Gulsvi
@gulsvi
Feb 13 2017 04:58
No problem :)
Adam
@GoingAllTheWayUp
Feb 13 2017 04:59
is it possible to sting along the array reverse and the string split into one line of code?
Gulsvi
@gulsvi
Feb 13 2017 05:00
Yes, it is possible :)
you can .reverse() an array
Suzanne Atkinson
@AdventureBear
Feb 13 2017 05:00
phew, my simon finally works after about a year of messing with it! It's not 100% perfect but it's playable. http://s.codepen.io/AdventureBear/debug/MJGLOV/jVkpojeGGXqA
Gulsvi
@gulsvi
Feb 13 2017 05:01
And you can .join() arrays back with the same separator you used to split them with
Adam
@GoingAllTheWayUp
Feb 13 2017 05:01
Hey @AdventureBear can you program the patterns or are they random? I know alot of tunes that are four notes!!!
lol
@SkyCoder01 How long have you been useing FCC?
Gulsvi
@gulsvi
Feb 13 2017 05:03
@AdventureBear wow, you are famous on codepen :) 30,526 views on your quote machine!!
@GoingAllTheWayUp Maybe 3 weeks now?
Adam
@GoingAllTheWayUp
Feb 13 2017 05:04
Nice, im about one week right now
Suzanne Atkinson
@AdventureBear
Feb 13 2017 05:04
@SkyCoder01 super cool!! thanks.:)
CamperBot
@camperbot
Feb 13 2017 05:04
adventurebear sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 189 | @skycoder01 |http://www.freecodecamp.com/skycoder01
Suzanne Atkinson
@AdventureBear
Feb 13 2017 05:04
@GoingAllTheWayUp they are random, but you could program it easily
Adam
@GoingAllTheWayUp
Feb 13 2017 05:04
neat!
can't wait to get there
Gulsvi
@gulsvi
Feb 13 2017 05:06
It's really fun, but I did some bootstrap classes before doing free code camp
and I go to javascript meetups on the weekends
Adam
@GoingAllTheWayUp
Feb 13 2017 05:07
cool, through FCC local?
Gulsvi
@gulsvi
Feb 13 2017 05:07
yeah
Adam
@GoingAllTheWayUp
Feb 13 2017 05:07
cool, I would like to also
did you do the course in order?
Gulsvi
@gulsvi
Feb 13 2017 05:08
No, I've been skipping challenges and skipped a lot of the bootstrap ones because I already knew how to do it
Adam
@GoingAllTheWayUp
Feb 13 2017 05:08
I am going to try too, but peek ahead just to get a lay of the land you know?
ok
Gulsvi
@gulsvi
Feb 13 2017 05:09
I will come back and finish them all though
Adam
@GoingAllTheWayUp
Feb 13 2017 05:09
good to hear
Could you say you surpassed the initial learning curve of programming before FCC? @SkyCoder01
Gulsvi
@gulsvi
Feb 13 2017 05:11
With HTML and CSS, yes, but not with javascript
I knew some basic stuff like for loops, but that was it
Adam
@GoingAllTheWayUp
Feb 13 2017 05:12
good
when do you think you'll have the front-end completed ?
if you don't mind
Gulsvi
@gulsvi
Feb 13 2017 05:13
Maybe by march if I can find the time? I'm not sure how long the algorithms will take me
Adam
@GoingAllTheWayUp
Feb 13 2017 05:13
I feel the same way about the algorithms
Gulsvi
@gulsvi
Feb 13 2017 05:13
It might be April, but we'll see
Adam
@GoingAllTheWayUp
Feb 13 2017 05:14
thats whats UP!!
Gulsvi
@gulsvi
Feb 13 2017 05:14
:)
joopt
@joopt
Feb 13 2017 05:51
hi guys is there a way to get the json from https://wind-bow.gomix.me/twitch-api/streams/freecodecamp and https://wind-bow.gomix.me/twitch-api/users/freecodecamp without having to write two ajax functions?
Rory Wagner
@rorywag
Feb 13 2017 05:55
does this look correct? .green-box {
background-color: green;
padding: 40px, 20px, 20px, 40px;
}
its for the "Use Clockwise Notation to Specify the Padding of an Element"
' .green-box {
background-color: green;
padding: 40px, 20px, 20px, 40px;
}'
.green-box { background-color: green; padding: 40px, 20px, 20px, 40px; }
joopt
@joopt
Feb 13 2017 05:57
@rorywag yes that looks fine
@rorywag without the commas
Rory Wagner
@rorywag
Feb 13 2017 05:57
ahhh thank you :)
Cheers @joopt
Lawanu Borthakur
@Lawanu
Feb 13 2017 06:28

can anyone help me to find out why it is not working in code pen.But it working fine when i used xampp server.challenge:random quote
JS code:
document.getElementById("btn").addEventListener("click",function(){
var counter=Math.floor(Math.random()10);
var ourRequest=new XMLHttpRequest();
//ourRequest.withCredentials = false;
ourRequest.open('GET','http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]='+counter+'&callback=');
ourRequest.onload=function(){
var ourData=JSON.parse(ourRequest.responseText);
console.log(ourData[0]);
/
var t=[];
t=(ourData[0].content).split('');
t.html();
alert(t);*/
}
ourRequest.send();
});
HTML Code:

<button id="btn">Quote</button>

after ourRequest.onload it is not working
kindly help me out.
Lawanu Borthakur
@Lawanu
Feb 13 2017 06:33
@camperbot
Joris Labie
@labiej
Feb 13 2017 06:41
have you looked at the developer tools?
Lawanu Borthakur
@Lawanu
Feb 13 2017 06:51
no
@labiej
Joris Labie
@labiej
Feb 13 2017 06:52
You should do so, I can guess what it says and it's an important learning opportunity
So fire them up on the page using F12 or ctrl + shift + i
joopt
@joopt
Feb 13 2017 06:53
does anyone know how to get the text to align properly on my last banner?
https://codepen.io/cckid/pen/ggQBRz
Lawanu Borthakur
@Lawanu
Feb 13 2017 06:56
@labiej can you please explain.I am a beginner.
Joris Labie
@labiej
Feb 13 2017 06:56
Open your codepen in a second tab, use the "full page" view
Lawanu Borthakur
@Lawanu
Feb 13 2017 06:57
ok then
Joris Labie
@labiej
Feb 13 2017 06:58
@joopt You mean the description? I'd wrap the description and image in separate divs where the image is in a div of 100% height.
That should fix it
@Lawanu Next you press f12 which should open the developer tools
Lawanu Borthakur
@Lawanu
Feb 13 2017 07:00
@labiej yeah in developer tool it is working but in code pen console it is not working.
Joris Labie
@labiej
Feb 13 2017 07:00
I don't know about codepen console. However you should refresh the page now and see what happens
I expect a very specific error
Lawanu Borthakur
@Lawanu
Feb 13 2017 07:04
@labiej i m getting the output like this:
Object {ID: 1616, title: "James Weaver", content: "<p>Web design is art wrapped in technology.
</p>↵", link: "https://quotesondesign.com/james-weaver/"}
pen.js:42 Object {ID: 1671, title: "Neville Brody", content: "<p>Design is more than just a few tricks to the eye. It&#8217;s a few tricks to the brain.</p>↵", link: "https://quotesondesign.com/neville-brody-2/"}
pen.js:42 Object {ID: 1395, title: "Stella Adler", content: "<p>Life beats down and crushes the soul, and art reminds you that you have one. </p>↵", link: "https://quotesondesign.com/stella-adler/"}
pen.js:42 Object {ID: 744, title: "Lowell Williams", content: "<p>I look for three things in a project: 1) Compel…hip. Actually, it&#8217;s time to move on. </p>↵", link: "https://quotesondesign.com/lowell-williams/"}
Joris Labie
@labiej
Feb 13 2017 07:05
Can you link the codepen?
Lawanu Borthakur
@Lawanu
Feb 13 2017 07:05
how to link?
@labiej tell me i will link
Joris Labie
@labiej
Feb 13 2017 07:05
just copy the codepen address and paste it here
Sorin Ruse
@sorinr
Feb 13 2017 07:07
@viorelfoamete do not make border-radius: 0px; its non sense. just comment it out or delete it. bootstrap on vavbar does not apply any border radius that u have to override. and yes i'm from ro
Jonathan Doron
@JonathanDn
Feb 13 2017 07:08
Anyone here is experienced with d3 and can reach out to help with a timeline in a pm?
viorelfoamete
@viorelfoamete
Feb 13 2017 07:09
@sorinr thanks. Salut :)
CamperBot
@camperbot
Feb 13 2017 07:09
viorelfoamete sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1173 | @sorinr |http://www.freecodecamp.com/sorinr
Joris Labie
@labiej
Feb 13 2017 07:10
@Lawanu now you use the object to put the info on the page somewhere. No idea what is wrong according to you?
Lawanu Borthakur
@Lawanu
Feb 13 2017 07:10
@labiej is it okay
@labiej i was not getting the output in my codepen console
Sorin Ruse
@sorinr
Feb 13 2017 07:11
@viorelfoamete welcome. you can pm me in ro if you want
Lawanu Borthakur
@Lawanu
Feb 13 2017 07:12
@labiej so,i thought there is a problem in my code.Thank you for your help.
Joris Labie
@labiej
Feb 13 2017 07:12
@Lawanu I don't use the codepen console myself so this is weird
It should work from what I could find
Lawanu Borthakur
@Lawanu
Feb 13 2017 07:18
@labiej thank you
CamperBot
@camperbot
Feb 13 2017 07:18
lawanu sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @labiej |http://www.freecodecamp.com/labiej
r2d2
@UsamaHameed
Feb 13 2017 07:26

Guys, whenever I have to make a form with some label and input to be placed next to each other, they never are vertically aligned. Code:

<form class="range-form">
          <label class="range-label" for="range-selector">Shadow scale: </label>
          <input type="range" id="range-selector" min="10" max="80" value="40">
</form>

The input is always a little towards the top. Why is this? I searched online and found a solution using tables.

Sorin Ruse
@sorinr
Feb 13 2017 07:41
@UsamaHameed can you show your css to understand whats going on in there?
r2d2
@UsamaHameed
Feb 13 2017 07:41
@sorinr give me a minute
Sorin Ruse
@sorinr
Feb 13 2017 07:43
@UsamaHameed btw. DO NOT USING TABLES for aligning your elements on page
But table is working @sorinr
The range input is a little off from its label @sorinr
Sorin Ruse
@sorinr
Feb 13 2017 07:49

@UsamaHameed you can use this:

.range-form {
  display: flex;
  align-items: center;
  position: absolute;
  top: 0;
  right: 0;

}

to get what you want

r2d2
@UsamaHameed
Feb 13 2017 07:50
Thank you @sorinr Don't know why I didn't go for flexbox in the first place
CamperBot
@camperbot
Feb 13 2017 07:51
usamahameed sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1174 | @sorinr |http://www.freecodecamp.com/sorinr
Sorin Ruse
@sorinr
Feb 13 2017 07:54
@UsamaHameed welcome
kirbyedy
@kirbyedy
Feb 13 2017 07:54
never too late to go for flexbox :D
Sorin Ruse
@sorinr
Feb 13 2017 07:56
@kirbyedy yep :)
r2d2
@UsamaHameed
Feb 13 2017 07:57
:hatching_chick:
playingwithinfinity
@playingwithinfinity
Feb 13 2017 08:12
Ugh... the Tic-Tac-Toe is so frustrating.
André
@pennyJack
Feb 13 2017 08:19
@playingwithinfinity Yeah but you can do it! I'll be there too in a few more days.
currently struggling with RegExp ;9
;)
playingwithinfinity
@playingwithinfinity
Feb 13 2017 08:19
@pennyJack I hope so too.
Jonathan Doron
@JonathanDn
Feb 13 2017 08:25
I built this horizontal timeline in D3 https://jsfiddle.net/8gnx5nns/182/ I placed some dates on the timeline but for some reason when I zoom they don't stick to the x Axis at where they were rendered, anyone can help?
Dan
@MindWhys
Feb 13 2017 09:19
Can someone please help me with my TwitchTV API. I have got all the different aspects to display but they are doing so over and over.
https://codepen.io/MindWhys/pen/vgzqQN?editors=1011
Erik Moore
@averagebeard
Feb 13 2017 09:38
Would someone be able to help me with my tic tac toe? I haven't added in all of the computer moves yet but I'm having trouble with what I currently have. The computer keeps deleting moves I make when I block it.
Alan
@alant90
Feb 13 2017 09:40
can someone help me with my weather app in Angular? I can't seem to get the injections with double brackets to work
Clyde Lobo
@oppiniated
Feb 13 2017 09:50
@alant90 link? I can take a look
Clyde Lobo
@oppiniated
Feb 13 2017 09:56
@alant90 no ng-app ?
Alan
@alant90
Feb 13 2017 09:56
i put it in the html classes
in the pen settings
c0d0er
@c0d0er
Feb 13 2017 09:59
@toianw thanks!
CamperBot
@camperbot
Feb 13 2017 09:59
c0d0er sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @toianw |http://www.freecodecamp.com/toianw
Alan
@alant90
Feb 13 2017 10:11
@oppiniated got anything?
Clyde Lobo
@oppiniated
Feb 13 2017 10:12
No. I do not see any ng-app
Alan
@alant90
Feb 13 2017 10:14
it's in the html classes when you click on pen settings
i typed in ng-app = "weatherMachine"
Alan
@alant90
Feb 13 2017 10:19
anyway @oppiniated it doesn't work either when i just put the html tag into the body
i mean outside of <body> but in the pen body
Clyde Lobo
@oppiniated
Feb 13 2017 10:20
@alant90 Did you check the console for errors? You had these ng-controller="" which caused errors
Dan
@MindWhys
Feb 13 2017 10:23
Could you help me with my Twitch API?
Alan
@alant90
Feb 13 2017 10:26
@oppiniated how to use the console? i was using Brackets to write the code and then I put it into codepen
Alan
@alant90
Feb 13 2017 10:27
@oppiniated thank you
CamperBot
@camperbot
Feb 13 2017 10:27
alant90 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 567 | @oppiniated |http://www.freecodecamp.com/oppiniated
Clyde Lobo
@oppiniated
Feb 13 2017 10:28
@MindWhys What is the issue?
Dan
@MindWhys
Feb 13 2017 10:29
the names of the twitch streamers appear multiple times each
johnnydemol
@johnnydemol
Feb 13 2017 10:43
Hey guys,
When I try to get geolocation in my weather app, it only works when I use https for my codepens url, but then the openweatherapi doesn't respond anymore..
Dan
@MindWhys
Feb 13 2017 10:44
@johnnydemol there is a problem with the openweatherapi
Jonathan Doron
@JonathanDn
Feb 13 2017 10:44
Anyone knows how to remove circles here on zoom d3? https://jsfiddle.net/8gnx5nns/205/
Dan
@MindWhys
Feb 13 2017 10:46
I used Dark Sky
https://darksky.net/poweredby/ @johnnydemol
alpox
@alpox
Feb 13 2017 10:47
@JonathanDn Remove
update
    .enter()
    .append("circle")
      .attr("r", 5)
      .attr("cx", function(d) {return xScale(new Date(d.CreationDateTime).getTime()); })
      .attr("cy", height)
      .style('fill', '#fff')
      .style('fill-opacity', .2)
      .style('stroke', 'black')
      .style('stroke-width', 2);
Jonathan Doron
@JonathanDn
Feb 13 2017 10:50
@alpox if I do so the circles don't get rendered in the first place
johnnydemol
@johnnydemol
Feb 13 2017 10:53
I'll look into it, thanks @MindWhys
CamperBot
@camperbot
Feb 13 2017 10:53
johnnydemol sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @mindwhys |http://www.freecodecamp.com/mindwhys
viorelfoamete
@viorelfoamete
Feb 13 2017 11:22
I finally finished my portfolio page. What do you guys think about it? Is there anything I should change ? Thanks http://codepen.io/viorelfoamete/full/wgRwvm/
Dan
@MindWhys
Feb 13 2017 11:28
@viorelfoamete everything is looking great. I have tried all the link buttons I can find and they seem to work. I love the way the background images transition and the placeholder images for your projects.
Cato Myhre
@Zalmez
Feb 13 2017 11:29
Hi, I'm working on my tribute page, but I wonder if it simply has to be a person or it could be a character from a series that has inspired you or something like that?
Dan
@MindWhys
Feb 13 2017 11:29
@boredgamerz It is completely up to you, the content doesn't matter it is the code that counts :)
Cato Myhre
@Zalmez
Feb 13 2017 11:30
@MindWhys oke thanks :3
CamperBot
@camperbot
Feb 13 2017 11:30
boredgamerz sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @mindwhys |http://www.freecodecamp.com/mindwhys
viorelfoamete
@viorelfoamete
Feb 13 2017 11:31
@MindWhys thanks a lot
CamperBot
@camperbot
Feb 13 2017 11:31
viorelfoamete sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @mindwhys |http://www.freecodecamp.com/mindwhys
Dan
@MindWhys
Feb 13 2017 11:31
@viorelfoamete no problem, it was a pleasure looking at it.
viorelfoamete
@viorelfoamete
Feb 13 2017 11:32
<3
alpox
@alpox
Feb 13 2017 11:33
@JonathanDn yes, but isn't that the meaning of removing? :-/ what exactly did you want then? :D
Dan
@MindWhys
Feb 13 2017 11:33
@viorelfoamete I think I am going to borrow some of your ideas to help improve mine :)
viorelfoamete
@viorelfoamete
Feb 13 2017 11:35
@MindWhys no problem. good luck there ;) pm me when it's done. I'd love to see the results
Dan
@MindWhys
Feb 13 2017 11:35
@viorelfoamete ok
Lawanu Borthakur
@Lawanu
Feb 13 2017 11:51
can anyone help me out?.challenge:quote machine.
iam not getting proper tweeting output+there are random windows load:http://codepen.io/Lawanu/pen/PWaoOE?editors=1111
Dan
@MindWhys
Feb 13 2017 11:55
@Lawanu the href for your twitch button is just "#" you may need a more defined liink
Lawanu Borthakur
@Lawanu
Feb 13 2017 12:00
@MindWhys okay,moreover how can i remove those html tags in tweet frame?
@MindWhys i mean it used to come like this:<p><strong>Everybody</strong> is a user experience designer. </p>Whitney Hess
Cato Myhre
@Zalmez
Feb 13 2017 12:04
@viorelfoamete you could remove/change the scrolling bar so it fits in with the general design ^^
Dan
@MindWhys
Feb 13 2017 12:16
@viorelfoamete not sure how to PM but here is my profile page with the projects now added in
https://codepen.io/MindWhys/pen/oBLExY
@Lawanu apologies for slow reply, just looking into it
Lawanu Borthakur
@Lawanu
Feb 13 2017 12:20
okay no worries....:)
@MindWhys i m also trying to figure out.Let me know if you find a solution.It will be of gr8 help to me.
Dan
@MindWhys
Feb 13 2017 12:25
@Lawanu I'm afraid I used a different method to complete this challenge so I can't seem to figure out what you need to change.
Lawanu Borthakur
@Lawanu
Feb 13 2017 12:26
what method did you use?
Dan
@MindWhys
Feb 13 2017 12:26
@Lawanu I created my own array in Javascript and then used that, rather than calling an outside API
Lawanu Borthakur
@Lawanu
Feb 13 2017 12:28
@MindWhys Hmmm okay then...let me struggle for some time.....:)
i am unable to append to the list
plss help...
viorelfoamete
@viorelfoamete
Feb 13 2017 12:33
@MindWhys i've send you some pms. check left side of the screen
Kshitiz
@kshtzsharma48
Feb 13 2017 12:44

<style>
body {
font-family: Monospace;
background-color: green;
}

</style>

<h1>Hello World</h1>

Give your body element the color property of green
Your h1 element should inherit the color green from your body element.
how can i solve this issue
is there anybody for help
Evan
@EvanDCP
Feb 13 2017 12:48
guys can you please check if this looks good? (css/html) http://codepen.io/EvanDCP18/pen/XpooEx
Brandon
@bd1887
Feb 13 2017 12:51
@EvanDCP Here's something quick you can change
.btn {
  cursor: pointer;
}
Evan
@EvanDCP
Feb 13 2017 12:52
@bd1887 awesome! thanks!
CamperBot
@camperbot
Feb 13 2017 12:52
evandcp sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @bd1887 |http://www.freecodecamp.com/bd1887
Evan
@EvanDCP
Feb 13 2017 12:52
does everything else look good and nicely-styled?
Brandon
@bd1887
Feb 13 2017 12:54
@EvanDCP You don't think the border radius looks better this way?
#calculator {
  background-color: gray;
  width: 250px;
  padding-top: 20px;
  padding-bottom: 30px;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
  margin-right: auto;
  margin-left: auto;
}
@EvanDCP It makes the display look like it's part of the calculator
Lorrie Pearson
@Lorrie01
Feb 13 2017 12:54
I'm working on the Twitch API project. Is there anyone here who has had success with the API key? Can you offer me help or assistance because I can't seem to get it to work.? Thanks.
Lorrie Pearson
@Lorrie01
Feb 13 2017 12:55
thanks @MindWhys I appreciate your help
CamperBot
@camperbot
Feb 13 2017 12:55
lorrie01 sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @mindwhys |http://www.freecodecamp.com/mindwhys
Petar Jankovic
@Pettar94
Feb 13 2017 12:56
Guys, can someone help me to get the next/prev buttons to be inline with the text?
http://codepen.io/Pettar94/pen/KabXpG?editors=0100
Evan
@EvanDCP
Feb 13 2017 12:56
@bd1887 sorry what should I change? I didn't understand
Dan
@MindWhys
Feb 13 2017 12:56
@kshtzsharma48 you do not have a color property you only have a background-color property. color relates to text color
Evan
@EvanDCP
Feb 13 2017 12:56
I do want it to look like it's part of the calculator. My pc can't see bootstrap that's why I'm asking because i don't actually know how this looks
Dan
@MindWhys
Feb 13 2017 12:58
@Lorrie01 no problem...look through all of the info on the fcc page about the project and watching this sequence of videos helps a lot https://www.youtube.com/watch?v=Nm2bXBlELZU
Evan
@EvanDCP
Feb 13 2017 12:58
got it lol
Lorrie Pearson
@Lorrie01
Feb 13 2017 12:58
@MindWhys perfect! I will try that
Brandon
@bd1887
Feb 13 2017 12:59
@EvanDCP Copy and paste what I wrote for #calculator
Petar Jankovic
@Pettar94
Feb 13 2017 12:59
Can anyone help? I am really struggling with this :/
Dan
@MindWhys
Feb 13 2017 12:59
I'm currently stuck on this project myself, I am displaying all the data but mulitple times
WiseKodama
@WiseKodama
Feb 13 2017 12:59
Any ideas how to position svgs relative to the container size?
Carbie
@Carbie222
Feb 13 2017 13:03
Hey guys.
Dan
@MindWhys
Feb 13 2017 13:03
@Carbie222 Hello :)
Carbie
@Carbie222
Feb 13 2017 13:04
Am totally new here and am very excited.
I have no idea where to start.I need your help
Dan
@MindWhys
Feb 13 2017 13:05
@Pettar94 I just put in "margin-top:15opx;
Brandon
@bd1887
Feb 13 2017 13:05
@WiseKodama You can set values as percentages
Dan
@MindWhys
Feb 13 2017 13:06
@Carbie222 Just work your way through the map of stuff :)
Petar Jankovic
@Pettar94
Feb 13 2017 13:07
@MindWhys But I want it to be responsive, like the text. You know what I mean?
Dan
@MindWhys
Feb 13 2017 13:07
@Pettar94 hmmm, try margin-top: 50%; ?
WiseKodama
@WiseKodama
Feb 13 2017 13:08
Doesn't work, percentages are ignoring the size of the container for some reason @bd1887
Carbie
@Carbie222
Feb 13 2017 13:09
Okay @MindWhys .Thenx
Brandon
@bd1887
Feb 13 2017 13:13
@WiseKodama Can you post the codepen?
Petar Jankovic
@Pettar94
Feb 13 2017 13:13
@MindWhys It doesn't work the way I want it to. It is responsive, but not correlated with the text. When changing the page size text and arrows are out of sync
Brandon
@bd1887
Feb 13 2017 13:15
@Pettar94
.prev, .next {
  cursor: pointer;
  position: absolute;
  width: auto;
  margin-top:45vh;
  padding: 16px;
  color: white !important;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
}
WiseKodama
@WiseKodama
Feb 13 2017 13:15
http://codepen.io/WiseKodama/pen/WRLPQJ @bd1887 I am trying to keep both quotes inside the white area but its not taking the parent percentage its taking its own size as a percentage
Petar Jankovic
@Pettar94
Feb 13 2017 13:15
@MindWhys I found the way. Thanks so much
CamperBot
@camperbot
Feb 13 2017 13:15
pettar94 sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @mindwhys |http://www.freecodecamp.com/mindwhys
Dan
@MindWhys
Feb 13 2017 13:16
@Pettar94 I'm glad you worked it out :)
Petar Jankovic
@Pettar94
Feb 13 2017 13:16
@MindWhys Yeah, it is similar to my solution. But your way of thinking was really helpful
Dan
@MindWhys
Feb 13 2017 13:18
@Pettar94 May I ask how you ended up doing it? I like finding out new ways of working :)
Petar Jankovic
@Pettar94
Feb 13 2017 13:21
@MindWhys I put the margin-top: 30%; in the .prev, .next classes and in the .text too
Dan
@MindWhys
Feb 13 2017 13:23
@Pettar94 thanks for letting me know...I'll try that out myself :)
CamperBot
@camperbot
Feb 13 2017 13:23
mindwhys sends brownie points to @pettar94 :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @pettar94 |http://www.freecodecamp.com/pettar94
Brandon
@bd1887
Feb 13 2017 13:24
@WiseKodama I'm not sure SVGs are the way to go here. That's some pretty messy HTML
WiseKodama
@WiseKodama
Feb 13 2017 13:25
@bd1887 thanks I guess
CamperBot
@camperbot
Feb 13 2017 13:25
wisekodama sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @bd1887 |http://www.freecodecamp.com/bd1887
Brandon
@bd1887
Feb 13 2017 13:25
@WiseKodama Maybe try doing it this way
http://jsfiddle.net/pz6kx0bw/
@WiseKodama If you like the square quotation marks, you can try to change the font to one where they look more squared
Brandon
@bd1887
Feb 13 2017 13:34
@WiseKodama Did you ragequit before you could see my full answer?
You're welcome I guess.
h1tag
@h1tag
Feb 13 2017 13:36
@bd1887 can you try thanking me because I just changed my name and want to test if it still can receive brownies
WiseKodama
@WiseKodama
Feb 13 2017 13:37
No Brandon, your comment was unnecessary however. I wouldn't have asked for help with SVG if I wanted it done another way. The text option is the easy way which I did not prefer. @bd1887
Brandon
@bd1887
Feb 13 2017 13:38
@forMaximus Haha. Thanks.
CamperBot
@camperbot
Feb 13 2017 13:38
bd1887 sends brownie points to @formaximus :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for formaximus
h1tag
@h1tag
Feb 13 2017 13:38
no :/
@bd1887 thank you
CamperBot
@camperbot
Feb 13 2017 13:38
formaximus sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @bd1887 |http://www.freecodecamp.com/bd1887
h1tag
@h1tag
Feb 13 2017 13:40
guess I'm stuck with this name
Joris Labie
@labiej
Feb 13 2017 13:42
You can try the admin channel for help
achudoz
@achudoz
Feb 13 2017 13:47
Hi, does anyone here have a reliable solution for vertical alignment of DIVs inside bootstrap columns?
my page aligns pretty well both on desktop and portrait-mobile, but not on landscape mobile:
http://codepen.io/achudoz/pen/bgOZVJ?editors=1100#0
(the JS part is not done yet so clicking won't do anything)
Tony
@FreakishLancer
Feb 13 2017 13:49
@achudoz It seems to show up correctly in landscape on my iPad.
achudoz
@achudoz
Feb 13 2017 13:51
well my media query is set to max-width 640px, so it probably understands the tablet as a large screen. does it look acceptable on the ipad? @FreakishLancer thanks for looking!
CamperBot
@camperbot
Feb 13 2017 13:51
achudoz sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
Brandon
@bd1887
Feb 13 2017 13:53

@WiseKodama In that case,

svg {
  width: 20%;
}

This does seem to be changing the size relative to the container that they're in. Your rows and columns aren't doing anything because you aren't using bootstrap. You need to go to "Settings", "CSS", "Add External CSS" and copy and paste this link:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css

Tony
@FreakishLancer
Feb 13 2017 13:54
@achudoz Yeah, it seems like it is just enough of a threshold of max width that the page looks perfect on iPad landscape.
Evan
@EvanDCP
Feb 13 2017 14:05
hey guys can you please check if my calculator is working? and if it looks nice? http://codepen.io/EvanDCP18/full/XpooEx/
achudoz
@achudoz
Feb 13 2017 14:06
@EvanDCP the umbers and signs in the buttons are rather off
especially the AC and CE are almost completely out of their buttons
and nothing happens for me when I push the buttons
Evan
@EvanDCP
Feb 13 2017 14:08
@achudoz I don't know how I can fix the alignment, they are already text-centered :S
nothing happens? omg :(
WiseKodama
@WiseKodama
Feb 13 2017 14:10
did you center them in each column?
grab the column class in CSS and add text-align:center;
Evan
@EvanDCP
Feb 13 2017 14:18
yeah I think I did, I don't know if it's centered now: http://codepen.io/EvanDCP18/full/XpooEx/
if not, what else can I do? i've put text-align: center basically everywhere lol
achudoz
@achudoz
Feb 13 2017 14:22
@EvanDCP I think it is not working properly because you have naked <a> elements
@EvanDCP put them like this: <button class="btn btn-danger"><a id="deleteAll">A</a></button>
it makes the buttons larger than they are now, but jus reduce padding or something and it should be ok

@EvanDCP yeah, I just created

.button-resizer {
  padding: 5px;
}

added it to the approriate buttons and it looks great

Evan
@EvanDCP
Feb 13 2017 14:28
@achudoz thanks! like this? http://codepen.io/EvanDCP18/full/XpooEx/
CamperBot
@camperbot
Feb 13 2017 14:28
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @achudoz |http://www.freecodecamp.com/achudoz
achudoz
@achudoz
Feb 13 2017 14:31
@EvanDCP yeah,just like that- now just re-align them
Evan
@EvanDCP
Feb 13 2017 14:33
@achudoz I can't see anything, my pc can't see bootstrap for some weird reason, so I have no idea how to re-align them? or how they look right now. :/
Aftab Parvez
@aftabparvez
Feb 13 2017 14:33
Hi! anyone know why bdi isn’t working in my code?
Evan
@EvanDCP
Feb 13 2017 14:34
has this happened to anyone btw? that you can't see bootstrap on your computer?
Aftab Parvez
@aftabparvez
Feb 13 2017 14:34
The output according to MDN reference is supposed to reverse the words “ARABIC_PLACEHOLDER” to "REDLOHECALP_CIBARA "
But that isn’t happening. Any help is appreciated
achudoz
@achudoz
Feb 13 2017 14:38
@EvanDCP I don't see any bootstrap in your code. it is just one central div with buttons in it
there are no rows and columns
Evan
@EvanDCP
Feb 13 2017 14:41
Untitled.png
i don't know what is wrong with it but this is how it looks like from my pc :/
achudoz
@achudoz
Feb 13 2017 14:42
@EvanDCP that ir really weird. how come it does not show even colors
Sonja
@sonjaSch
Feb 13 2017 14:42
hey u ;)
Evan
@EvanDCP
Feb 13 2017 14:42
it's like it can't see bootstrap nor text-align nor Fantasy font. And I just recently formatted the computer so it can't be a virus or anything like that
Sonja
@sonjaSch
Feb 13 2017 14:43
How can I include weather-icons ?
Evan
@EvanDCP
Feb 13 2017 14:44
should I ask on stackoverflow about this issue?
like, I honestly have no fucking clue. How the hell can I re-assign anything when it looks like THIS :(
achudoz
@achudoz
Feb 13 2017 14:45
@EvanDCP i would first try opening it in a different browser. if that does not help, then I would google and ask anywhere
elminsterrr
@elminsterrr
Feb 13 2017 14:46

Hi, guys!

In my project I’m using google fonts:

In html:

    <link href='http://fonts.googleapis.com/css?family=Open+Sans&subset=latin,latin-ext' rel='stylesheet' type='text/css'>

In css:

.navbar-nav {
  font-family: 'Open Sans', sans-serif;
  margin: 35px 0; /* tob & bottom, right & left */
}

But I want to use Open Sans Extra Bold. It is listed on Open Sans google site here:
https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans

How can I use it (that Open Sans Extra Bold) in my project? What should I type into css?

Evan
@EvanDCP
Feb 13 2017 14:47
@achudoz same problem on firefox and internet explorer
Jurasr
@Jurasr
Feb 13 2017 14:49
Hello all, when I try to create the nav bar using Bootstrap, the navbar elements go in a column, not in a row: http://codepen.io/Jurasr/pen/xgmejB how to fix that? Thank you
Fabio
@Gentarozzo
Feb 13 2017 14:49
Hello I'm having trouble taking data from here:
http://ipinfo.io/json?callback=JSON_CALLBACK
I need to take my loc from this json!
achudoz
@achudoz
Feb 13 2017 14:49
@EvanDCP do other sites look normal? like facebook, youtube etc?
Fabio
@Gentarozzo
Feb 13 2017 14:50

$.get("http://ipinfo.io/json?callback=JSON_CALLBACK",function(data){
alert(data)
});

I can alert the data... but I dunno how to take the loc out!

Evan
@EvanDCP
Feb 13 2017 14:51
@achudoz yup they do
@achudoz it's gotta be a problem of codepen.io I think
Fabio
@Gentarozzo
Feb 13 2017 14:54
Can someone help me with this pls? :(
Ken Haduch
@khaduch
Feb 13 2017 14:54
@Gentarozzo - maybe try callback=? or just callback= - I think that it might be looking for a function named JSON_CALLBACK?
Fabio
@Gentarozzo
Feb 13 2017 14:55
@khaduch if I try alert(data.loc) he game me "undefined"
gave*
WAIT... with just callback= it's working... is that magic?
Ken Haduch
@khaduch
Feb 13 2017 14:59
@Gentarozzo - I don't know the explanation for how that works. I guess that I should try to figure it out... but I think that it's just the way that $.get works - it has an optional success function, so that must just get called.
alpox
@alpox
Feb 13 2017 14:59
@Gentarozzo Thats just because jquery interprets callback= or callback=? as jsonp request while when you put there a value, it tries to call a javascript function you defined with that name JSON_CALLBACK
Ken Haduch
@khaduch
Feb 13 2017 14:59
@Gentarozzo - check the documentation https://api.jquery.com/jquery.get/ there...
achudoz
@achudoz
Feb 13 2017 15:00
@EvanDCP that's weird. try messaging them and googling your problem. try viewing pens of others if they work properly etc.
Fabio
@Gentarozzo
Feb 13 2017 15:00
@alpox @khaduch thanks ... I'll check for it... and now I've to save a value into a variable and use it in another function :S
CamperBot
@camperbot
Feb 13 2017 15:00
gentarozzo sends brownie points to @alpox and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 768 | @alpox |http://www.freecodecamp.com/alpox
:star2: 2472 | @khaduch |http://www.freecodecamp.com/khaduch
Christian Brassøe
@Brassoe
Feb 13 2017 15:03
Hey guys, I have a special request. It is my friends birthday and he is a programmer. So i thought what would i get him as BD gift, and i figured, i need my gift to say that he is a good friend, and i wanted it to be said in some sort of programming language. So if ANYONE in here is up for a challenge, could you perhaps produce some sort of JS code that says in some way. You're my best friend or you're a very good friend. His name is Anders.
Ken Haduch
@khaduch
Feb 13 2017 15:07
@Jurasr - It looks like you are using the new bootstrap version 4- I just switched your Bootstrap.css version (in a copy) to //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css and it works better. Maybe you just discovered that? Because I reloaded your page and it works now?
Lawanu Borthakur
@Lawanu
Feb 13 2017 15:32
HELP!! after clicking my tweet button it showing html elements.How to remove those elements? Moreover sometimes it is not showing the full data.http://codepen.io/Lawanu/pen/PWaoOE?editors=1111
challenge:quote machine
@camperbot
Lawanu Borthakur
@Lawanu
Feb 13 2017 15:44
@khaduch
Lawanu Borthakur
@Lawanu
Feb 13 2017 15:49
anyone out there??
OLGA
@OlgaCasian
Feb 13 2017 15:58
@Brassoe Do you want him just to run the code and find your wish or you want him to build some code to find out?
Tomas
@tomasale
Feb 13 2017 16:03
Hey campers. I want to share my first tribute page https://codepen.io/TomasAle/pen/dNjrYB
h1tag
@h1tag
Feb 13 2017 16:07
@tomasale :+1:
OLGA
@OlgaCasian
Feb 13 2017 16:08
@Lawanu html "<p>" tag comes from the quote source. Get a source that doesn't have html elements in it OR after get your quote write a piece of code that will search and removes all html element founded.
Also when you click on tweet btn, you didn't get all of your quote and didn't get the author. So look again what you are returning.
goodgoof
@goodgoof
Feb 13 2017 16:20
hello World !Just joined looking forward to a great learning time.
Maid Koric
@KoRaa97
Feb 13 2017 16:22
hey @goodgoof seems like we are both new, you are here because of front end to? are you a beginner?
Ken Haduch
@khaduch
Feb 13 2017 16:23
@Lawanu - I was just about to make a similar reply to @OlgaCasian - if you cannot get the data from the quote server without any HTML markup, just make a function to filter it out yourself. It looks like you also need to run the quote through an encoder, because a quote that has special characters in it like single quotes will not properly load into the twitter page. some function like encodeURI or similar.
Gulsvi
@gulsvi
Feb 13 2017 16:25
I found this answer very funny about trying to remove HTML on your own: http://stackoverflow.com/a/1732454
"Every time you attempt to parse HTML with regular expressions, the unholy child weeps the blood of virgins, and Russian hackers pwn your webapp."
Tom
@moT01
Feb 13 2017 16:28
im having some really weird styling behavior happening with react, anyone know whats thats all about? or wanna take a look?
OmarMoh
@OmarMoh
Feb 13 2017 16:30
Between the style tags, give the p elements font-size of 16px. Browser and Text zoom should be at 100%.
what do they mean by this?
I am stuck here :worried:
Zhanibek
@zhann1982
Feb 13 2017 16:30
Hello everyone! I stuck on random quote machine. I couldn't find ani link to json api with random quotes. Any advices?
Tom
@moT01
Feb 13 2017 16:31
@zhann1982 quotesondesign.com has a nice api use explanation
OmarMoh
@OmarMoh
Feb 13 2017 16:32
nvm found it
Chris Rutherford
@cjrutherford
Feb 13 2017 16:44

hey all, having trouble with my bootstrap and jquery imports, help?

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://use.fontawesome.com/4c474a4a9c.js"></script>
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="head-container container-fluid">
      <div class="outer">
        <div class="inner">
          <div class="row">
            <div class="col-md-4">
              <p>this is a test</p>
            </div>
            <div class="col-md-4">
              <p>this is another test</p>
            </div>
            <div class="col-md-4">
              <p>again? really?</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

the issue is that the divs show up stacked instead of in columns....

Gulsvi
@gulsvi
Feb 13 2017 16:48
@cjrutherford What if you change col-md-4 to col-xs-4?
Chris Rutherford
@cjrutherford
Feb 13 2017 16:49
@SkyCoder01 that really shouldn't have done anything, but it did....
Gulsvi
@gulsvi
Feb 13 2017 16:50
Your browser probably isn't wide enough to show md-4 side by side
Chris Rutherford
@cjrutherford
Feb 13 2017 16:52
@SkyCoder01 odd full screen on a MBP with Retina, but it's over, working with md again
Gulsvi
@gulsvi
Feb 13 2017 16:52
for the jQuery imports, put your <script> tags at the end:
<html>
  <head>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">    
    <link rel="stylesheet" href="css/main.css">
  </head>
  <body>
    <div class="head-container container-fluid">
      <div class="outer">
        <div class="inner">
          <div class="row">
            <div class="col-xs-4">
              <p>this is a test</p>
            </div>
            <div class="col-xs-4">
              <p>this is another test</p>
            </div>
            <div class="col-xs-4">
              <p>again? really?</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </body>
</html>
Jasmin Parent
@charlesdarkwind
Feb 13 2017 16:52
Hi, so im not sure how to got about this but Im trying to count the rows in a table via jquerry, the table is from wikipedia.
var rowNumber = document.getElementsByClassName('wikitable').rows.length;
Gulsvi
@gulsvi
Feb 13 2017 16:53
I've never seen a font awesome js file, used css in the example above
@charlesdarkwind Do you have an example of a page with the table html you are trying to count?
Jasmin Parent
@charlesdarkwind
Feb 13 2017 16:55
@SkyCoder01 its for the quotes challenge https://en.wikipedia.org/wiki/AFI's_100_Years...100_Movie_Quotes
Gulsvi
@gulsvi
Feb 13 2017 16:57
hmmm, I'm not sure off the top of my head. I'll see if I can figure it out
Jasmin Parent
@charlesdarkwind
Feb 13 2017 16:57
thanks :)
Gulsvi
@gulsvi
Feb 13 2017 16:58
I think this works? $('.wikitable tr').length - it gives 101 if you do console.log($('.wikitable tr').length)
Jasmin Parent
@charlesdarkwind
Feb 13 2017 16:59
oh nice ill try that
Gulsvi
@gulsvi
Feb 13 2017 17:00
This also seems to work, without jQuery: document.getElementsByClassName('wikitable')[0].rows.length
you have to use [0] to select the first .wikitable class
Jasmin Parent
@charlesdarkwind
Feb 13 2017 17:00
oh I see thanks a lot
Gulsvi
@gulsvi
Feb 13 2017 17:01
I got to learn something new, thank you
Jasmin Parent
@charlesdarkwind
Feb 13 2017 17:01
so that failed because there was other things with these classes?
Gulsvi
@gulsvi
Feb 13 2017 17:03
yeah, I think if you used document.getElementById it would have worked. But ClassName returns a collection of elements - even if there's only one
so, with ClassName, you have to treat it like an array
Jasmin Parent
@charlesdarkwind
Feb 13 2017 17:04
Interesting
Gulsvi
@gulsvi
Feb 13 2017 17:04
but I don't think there's an ID for that table, so you have to use className (if that makes sense)
Jasmin Parent
@charlesdarkwind
Feb 13 2017 17:07
@SkyCoder01 I cant have it to return a number
  $.getJSON('http://en.wikipedia.org/w/api.php?action=parse&page=AFI\'s_100_Years...100_Movie_Quotes&prop=text&format=json&callback=?', function(json) { 

    var quotes = new Quotes();
    //var rowNumber = document.getElementsByClassName('wikitable')[0].rows.length; 
    var rowNumber = $('.wikitable tr').length;
    console.log(rowNumber);

    //$('#quoteText').html(json.parse.text['*']); 
    $("#quoteText").find("a:not(.references a)").attr("href", function(){ return "http://www.wikipedia.org" + $(this).attr("href");});   
  });
Gulsvi
@gulsvi
Feb 13 2017 17:12
@charlesdarkwind It looks like you are getting a JSON object back, not the HTML page.
Delete var quotes = new Quotes(); and do this:
$('body').html(JSON.stringify(json.parse.text));
Jasmin Parent
@charlesdarkwind
Feb 13 2017 17:16
hmm so I cant just count the rows and not retrieve everything?
Gulsvi
@gulsvi
Feb 13 2017 17:17
I think you can scrape the page instead with jquery $.get? I'm not sure :(
Chris Rutherford
@cjrutherford
Feb 13 2017 17:46

ugh.... this stuff needs repetition to get it right. would someone look to tell me why this isn't working?
here's the html:


<div class="container-fluid" id="nav">
  <div class="nav navbar-inverse">
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-3">
          <h1 class="nav-element">Writer</h1>
        </div>
        <div class="col-md-3">
          <h1 class="nav-element">Designer</h1>
        </div>
        <div class="col-md-3">
          <h1 class="nav-element">Developer</h1>
        </div>
        <div class="col-md-2">
          <h1 class="nav-element">Manager</h1>
        </div>
        <div class="col-md-1"><span class="fa fa-bars" id="toggle"></span></div>
      </div>
      <div class="row">
        <div class="col-md-3">
          <h1 class="nav-element">Student</h1>
        </div>
        <div class="col-md-3">
          <h1 class="nav-element">Musician</h1>
        </div>
        <div class="col-md-3">
          <h1 class="nav-element">Entrepeneur</h1>
        </div>
        <div class="col-md-2">
          <h1 class="nav-element">Actor</h1>
        </div>
        <div class="col-md-1">
          <h1 id="name">CR</h1>
        </div>
      </div>
    </div>
  </div>
</div>

here's the CSS:

.nav {
  font-family: "Raleway";
  color: #fff;
  width: 90%;
  position: fixed;
  top: 0;
  left: 0;
  transform: translateX(-90%);
  transition: ease-in-out 0.8s;
  z-index: 1; }
  .nav .nav.toggle {
    transform: translateX(0); }
  .nav .nav.container {
    width: 100%; }
  .nav .fa-bars {
    font-size: 30pt;
    margin-left: 15px;
    margin-top: 20px; }

and the obligatory JS. Note Jquery and bootstrap are implemented elsewhere in code.

$('#toggle').on('click',function(){
  if(!$('.nav').hasClass('toggle')){
    $('.nav').addClass('toggle');
  }else{
    $('.nav').removeClass('toggle');
  }
});
what it's trying to do is click the bars icon to open the nav
Gulsvi
@gulsvi
Feb 13 2017 18:01
put it in a codepen @cjrutherford
Bruna
@Bruninha310
Feb 13 2017 18:16
alguém pode me ajudar?
Chris Rutherford
@cjrutherford
Feb 13 2017 18:25
@SkyCoder01 kk one moment
Nizar Soualhia
@nsoual
Feb 13 2017 18:40
just finished the Wikipedia viewer. what do u guys think ? http://codepen.io/Nsoual/pen/ggQBVZ
Nizar Soualhia
@nsoual
Feb 13 2017 18:46
actually i still want to be able to trigger the search with the enter key pressed. any suggestions ?
Tom
@moT01
Feb 13 2017 18:48
@nsoual i was going to mention that, ...theres a keyup() method that might be the way to go
i didnt look at your code, ...i had a form in mine and used a submit() which i think would only work if there's a form
the random button doesn't work, ...it looks really good
Nizar Soualhia
@nsoual
Feb 13 2017 18:55
@moT01 thanks ! is it not working for u ? because it does work when i click on it
CamperBot
@camperbot
Feb 13 2017 18:55
nsoual sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @mot01 |http://www.freecodecamp.com/mot01
Tom
@moT01
Feb 13 2017 18:55
no, maybe my browser
caseym94
@caseym94
Feb 13 2017 18:56
anyone know why the blue box won't stick next to the red?
Tom
@moT01
Feb 13 2017 18:56
@nsoual could maybe use some more info in the results too, ...that's up to you, just a thought
@nsoual yea, it's working on my other browser
Gulsvi
@gulsvi
Feb 13 2017 18:58
@nsoual It looks nice. I spent a couple of hours learning how to make my own animated search textbox for my wikipedia viewer and it was a lot of fun. I think you should try to make your own instead of copying one from another codepen project.
Nizar Soualhia
@nsoual
Feb 13 2017 18:59
@SkyCoder01 yeah true
@SkyCoder01 i thought maybe i needed to focus more on the user stories and try make my own design for the search box later on but you're right
Amit Patel
@AmitP88
Feb 13 2017 19:04
Hey guys, I need a little bit of help. On my website i'm trying to get some text aligned to stack on top of each other within a flickity carousel. I've used a JSON and html strings within JS variables to create & populate the carousel. I've tried putting the text elements within their own div within the carousel and apply text-wrap to the css, but it hasn't worked. I'm not sure what I'm missing to make this work. Demo: https://amitp88.github.io/Khmer-Family-Cafe/ Repo: https://github.com/AmitP88/Khmer-Family-Cafe/tree/gh-pages
carousel-text.png
Tom
@moT01
Feb 13 2017 19:12
@AmitP88 the CarouselCell variable in the specials.js
put everything but the pic in its own div? and display block on em?
Amit Patel
@AmitP88
Feb 13 2017 19:14
@moT01 oooh, display block facepalm I was using display flex. ok, lemme try that real quick
Tom
@moT01
Feb 13 2017 19:15
i guess im not sure on the result your looking for, but that might stack everything
...the pic and each text item
i thought you were looking to put the pic, then the text items stacked on the right of the pic
Amit Patel
@AmitP88
Feb 13 2017 19:16
@moT01 that did it, thank you :)
CamperBot
@camperbot
Feb 13 2017 19:16
amitp88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 515 | @mot01 |http://www.freecodecamp.com/mot01
Sindre Berge
@trust20
Feb 13 2017 19:16

hello :) i have this code for my buttons on my portfolio

<button class="navButton"> <a href="#MyWork">
MyWork
</a>

but when i click the button but its not working unless i click the buttons text, why?

Tom
@moT01
Feb 13 2017 19:17
yes, i am familiar with those facepalms @AmitP88
Amit Patel
@AmitP88
Feb 13 2017 19:17
@moT01 lol yeah, I guess I still have a lot to learn
carousel-text-fixed.png
Tom
@moT01
Feb 13 2017 19:18
@trust20 maybe try <a><button></a>
but you should really probly make the button a div or something else
taltmann42
@taltmann42
Feb 13 2017 19:18
@moT01 why a div?
Sindre Berge
@trust20
Feb 13 2017 19:19

like this?

<a href="#MyWork"><button class="navButton">
MyWork
</a>

</button>
?
@moT01
Tom
@moT01
Feb 13 2017 19:19
no put everything in the <a></a>
<a><button></button></a>
@taltmann42 im not sure why, buttons are for forms or something
but im pretty sure ive seen someone say that who i believed
Sindre Berge
@trust20
Feb 13 2017 19:20
@moT01 ahhh let me try :D
Tom
@moT01
Feb 13 2017 19:21
i dunno, i use buttons like that i guess
taltmann42
@taltmann42
Feb 13 2017 19:21
@moT01 they don't necessarily have to be in a form, it's a semantic thing, and when something is used to click on, button is perfectly reasonable in my opinion
Tom
@moT01
Feb 13 2017 19:21
or you could maybe do the opposite, @trust20 <button><a></a></button>
Sindre Berge
@trust20
Feb 13 2017 19:22

<a><button class="navButton">href="#MyWork</button></a>

like this (or opposite) ?

@moT01
Tom
@moT01
Feb 13 2017 19:22
try it
see if either work
Sindre Berge
@trust20
Feb 13 2017 19:23
@moT01 not first one tho
Tom
@moT01
Feb 13 2017 19:24
you could maybe just do <a class="navButton" href="#mywork">label here</a>
Gulsvi
@gulsvi
Feb 13 2017 19:25
@moT01 FYI, buttons can't go inside <a> or the other way around. Neither of those are valid html:
Tom
@moT01
Feb 13 2017 19:25
the href needs to be in the <a>
Sindre Berge
@trust20
Feb 13 2017 19:26
@moT01 YES! Thank You!
CamperBot
@camperbot
Feb 13 2017 19:26
trust20 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 516 | @mot01 |http://www.freecodecamp.com/mot01
Gulsvi
@gulsvi
Feb 13 2017 19:26
I forget who told me that over on the help channel the other day
Sindre Berge
@trust20
Feb 13 2017 19:27

<a class="navButton" href="#MyWork">MyWork</a>

@moT01 @SkyCoder01 this did it

Tom
@moT01
Feb 13 2017 19:27
yea, it seems redundant, not sure why it wouldn't work though
Gulsvi
@gulsvi
Feb 13 2017 19:28
I think most browsers try to guess what you want and make it work even if it isn't valid
but in the end, buttons are for submitting information, links are for going places
Sorin Ruse
@sorinr
Feb 13 2017 19:35
if u miss a html closing tag, the browser will try to close it but by itself but not always as you want it
Karthik Nallasivan
@furball514
Feb 13 2017 19:36
@moT01 @SkyCoder01 @trust20 @sorinr @taltmann42 ty
CamperBot
@camperbot
Feb 13 2017 19:36
furball514 sends brownie points to @mot01 and @skycoder01 and @trust20 and @sorinr and @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 131 | @trust20 |http://www.freecodecamp.com/trust20
:cookie: 190 | @skycoder01 |http://www.freecodecamp.com/skycoder01
:star2: 1175 | @sorinr |http://www.freecodecamp.com/sorinr
:cookie: 502 | @taltmann42 |http://www.freecodecamp.com/taltmann42
:cookie: 517 | @mot01 |http://www.freecodecamp.com/mot01
philiplee15
@philiplee15
Feb 13 2017 19:37
what tools do we need to write up the random quote machine? html, css, bootstrap (maybe) also we need JS & jQuery right? what else?
Karthik Nallasivan
@furball514
Feb 13 2017 19:37
@philiplee15 thats all
philiplee15
@philiplee15
Feb 13 2017 19:37
@furball514 whew thought i was missing something. thanks dude :)
CamperBot
@camperbot
Feb 13 2017 19:37
philiplee15 sends brownie points to @furball514 :sparkles: :thumbsup: :sparkles:
:cookie: 186 | @furball514 |http://www.freecodecamp.com/furball514
rebecca-acceber
@rebecca-acceber
Feb 13 2017 19:37

I am trying to trigger an array of click events one at a time through my whole array and I am having trouble with something in my function...if anybody can explain to me how to fix It and why . I would be very greatful for any help. :-)
<!--(I added the previous function for reference) function sequence (){ simon.push(theoptions[Math.floor (Math.random ()*4 )]); blinkerBeats (); } -->

function blinkerBeats(){
var says= setInterval(function(){
if (var i=0,i>=simon.length,i++){
$(simon[i]).click();
clearInterval(says);
}
}
,1000);
blankStatePlayer ();
}

taltmann42
@taltmann42
Feb 13 2017 19:40
@rebecca-acceber i>= simon.length? probably you want to use i < simon.length. Also, you clear the interval every time in the loop. It works but it's unnecessary, you can either do that after the loop, or use setTimeout which only fires once
Sorin Ruse
@sorinr
Feb 13 2017 19:41
@philiplee15 inspiration & knowledge to use those 3 to get the results you want :)
taltmann42
@taltmann42
Feb 13 2017 19:42
@rebecca-acceber and it clicks all the fields as fast as it can, not one by one each second. You basically wait 1 second, then press all the buttons without delay
rebecca-acceber
@rebecca-acceber
Feb 13 2017 19:43
Oh no! I WANTED TO fire each item individually
One right after each other in the array
Thanks you @taltmann42
CamperBot
@camperbot
Feb 13 2017 19:45
rebecca-acceber sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 503 | @taltmann42 |http://www.freecodecamp.com/taltmann42
taltmann42
@taltmann42
Feb 13 2017 19:47
@rebecca-acceber then you have to create a timeout (better than interval) for each click in a loop, and scale the time for the function accordingly to i, like i*1000 that fires the first immediately because 0*1000 = 0, the next after 1 second and so on. But in the for-loop you should probably call a function with i as parameter which then creates the timeout. Otherwise, by the time the timeout fires, the loop has already finished and i will refer to the last index of the simon-array
Rebecca Vest
@idahogurl
Feb 13 2017 19:50
@idahogurl
With the Game of Life, do you think it's OK to use code from http://rosettacode.org/wiki/Conway%27s_Game_of_Life#JavaScript
As long as give attribution to it
Radek
@radekjohn
Feb 13 2017 19:52
Hi, anybody knows how to call twitch tv api?
Peter Bates
@ptrbates
Feb 13 2017 19:58
Can someone help me left-align a <p> that's within a centered <div>?
Joshua
@jfc246
Feb 13 2017 19:59
@ptrbates sure what do you need help with?
Peter Bates
@ptrbates
Feb 13 2017 19:59
I've tried <p text-align="left"> and several others but it just stays centered..
Joshua
@jfc246
Feb 13 2017 19:59
@ptrbates do you have the name of the challenge?
Peter Bates
@ptrbates
Feb 13 2017 20:00
I'm working on the Tribute Page
Joshua
@jfc246
Feb 13 2017 20:00
oh ok
@ptrbates can you send me the link to code pen?
Peter Bates
@ptrbates
Feb 13 2017 20:01
Hm. I don't know how to do that. Is it just the URL?
Joshua
@jfc246
Feb 13 2017 20:02
yes it is.
@ptrbates
Joshua
@jfc246
Feb 13 2017 20:02
thanks
Evan
@EvanDCP
Feb 13 2017 20:02
guys i've been trying all afternoon to fix my pc to no avail. Please guys help me out here, let me know how to re-align my calculator project. How can I make it look nice and finished? http://codepen.io/EvanDCP18/full/XpooEx/
Peter Bates
@ptrbates
Feb 13 2017 20:03
@jfc246 I'm trying to left-align everything after the photo and caption.
Joshua
@jfc246
Feb 13 2017 20:03
@ptrbates what are trying to text align?
ok let me see.............
Peter Bates
@ptrbates
Feb 13 2017 20:04
@jfc246 Could I just use more divs, and have some be centered and some not?
Lascu Gratian
@gratianl
Feb 13 2017 20:06
Here is my first Tribute Page - Colonization of Mars :)
http://codepen.io/gratianl/full/KarYXo/
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 20:07
@ptrbates you can just use text-align:start in hte div that wraps it
Peter Bates
@ptrbates
Feb 13 2017 20:08
Ok, is that some kind of "reset" for the align?
Looks good, @gratianl , although your table headers are switched. :)
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 20:09
Kinda, is the default from left to right
Peter Bates
@ptrbates
Feb 13 2017 20:09
ok, thank you @CodeMyCoffee
CamperBot
@camperbot
Feb 13 2017 20:09
ptrbates sends brownie points to @codemycoffee :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @codemycoffee |http://www.freecodecamp.com/codemycoffee
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 20:10
@ptrbates Most css have some kind of "start" or "initial" value wich is the normalized default
@ptrbates You're welcome ^^
Joshua
@jfc246
Feb 13 2017 20:10
@ptrbates use instead
class="text-left"
Lascu Gratian
@gratianl
Feb 13 2017 20:11
@ptrbates thanks! I fix the problem with table headers
CamperBot
@camperbot
Feb 13 2017 20:11
gratianl sends brownie points to @ptrbates :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @ptrbates |http://www.freecodecamp.com/ptrbates
Peter Bates
@ptrbates
Feb 13 2017 20:13
Thanks @jfc246
CamperBot
@camperbot
Feb 13 2017 20:13
ptrbates sends brownie points to @jfc246 :sparkles: :thumbsup: :sparkles:
:cookie: 229 | @jfc246 |http://www.freecodecamp.com/jfc246
Joshua
@jfc246
Feb 13 2017 20:13
@ptrbates NP
Peter Bates
@ptrbates
Feb 13 2017 20:13
Any ideas on how to indent a blockquote? From what I've read, the browser is supposed to indent it automatically, but I'm not seeing that on my Pen
Joshua
@jfc246
Feb 13 2017 20:15
@ptrbates maybe its in the settings?
@ptrbates go to Settings and click on behavior it should be there.
Peter Bates
@ptrbates
Feb 13 2017 20:17
@jfc246 I'm seeing some options for how the code is indented, but nothing for displaying <blockquote>
Evan
@EvanDCP
Feb 13 2017 20:18
please guys can't anyone take a look and tell me what's wrong with my calculator? http://codepen.io/EvanDCP18/full/XpooEx/
Joshua
@jfc246
Feb 13 2017 20:18
@ptrbates ok idk
@EvanDCP whats a matter with it?
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 20:18
@EvanDCP i guess you want to have all buttons nicely aligned, you can achive that using the grid system that boostrap provides you, wrap your buttons in rows and columns and change the span of then, you will get that nice clean grid. If you are feeling a bit more brave with CSS, try to do it with some flex box properties, is easier to use than it seems at first, but here is a nice link that explains it really good https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
Peter Bates
@ptrbates
Feb 13 2017 20:18
@jfc246 Thanks for trying.
CamperBot
@camperbot
Feb 13 2017 20:18
ptrbates sends brownie points to @jfc246 :sparkles: :thumbsup: :sparkles:
:warning: ptrbates already gave jfc246 points
Evan
@EvanDCP
Feb 13 2017 20:19
@CodeMyCoffee thanks! will try it out
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 20:21
@EvanDCP Np, if you need more guidelines, or a written code example feel free to ask
Tom
@moT01
Feb 13 2017 20:30
@mml3b its trying to show the difference between global variables and local variables, ...depending on where you declare them determines what type they are
var a = 5;

function () {
 var b = 10;
// a here = 5
//b here = 10
}

//a here = 5
//b here = undefined
b is local to that function, and only available there
Mark
@markellllo1998
Feb 13 2017 20:44
hello all
Joshua
@jfc246
Feb 13 2017 20:44
@markellllo1998 Welcome to Free Code Camp!
Mark
@markellllo1998
Feb 13 2017 20:45
)
@jfc246 )
Mostafa Masri
@thefakeweed
Feb 13 2017 20:48
guys im not knowing how to assign 5 to oopsGlobal without using the var word inside function fun1

// Declare your variable here

function fun1() {
// Assign 5 to oopsGlobal Here

}
var myGlobal=10;

// Only change code above this line
function fun2() {
var output = "";
if (typeof myGlobal != "undefined") {
output += "myGlobal: " + myGlobal;
}
if (typeof oopsGlobal != "undefined") {
output += " oopsGlobal: " + oopsGlobal;
}
console.log(output);

Adam
@GoingAllTheWayUp
Feb 13 2017 20:54
Is this proper Objects Property Bracket Notation? contactsArray[firstName][prop];
I don't want to use contacts.firstName.prop; becuase I want to use space's in my object name/value pairing
and I want to pass arguments and not the actual name or value
DarkoxD
@DarkoxD
Feb 13 2017 20:59
Does anyone know how to align two p elements in one line?
Inside a div
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 21:12
@DarkoxD the "dirty" way would using floats or widht:50% in each p, but it would be nicer if you used flexbox instead
@DarkoxD or play with the display property of the div can make it work too, there are tons of workarounds for CSS
Evan
@EvanDCP
Feb 13 2017 21:15
it's not working, tried it but it looked so shitty. Man i'm so tired of this calculator thing
does it look finished and nice enough right now? can I just send it as completed project already and get it over with? :/
Carlos Xavier
@Jack-BP
Feb 13 2017 21:24
Hey People! Need a Hand here!
Fady safwat
@fadySWHS
Feb 13 2017 21:25
hello , please I have a bug with the Jquery script
"$("h1 h2 h3 h4 h5 h6 ").addClass("text-uppercase");" this line doesn't work and I don't know why !
any help !
Carlos Xavier
@Jack-BP
Feb 13 2017 21:26
$.getJSON("http://ip-api.com/json", function(geoData) {
      latitude = String(geoData.lat);
      longitude = String(geoData.lon);
  });

  var urlAlt = "http://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&lon="+longitude+"&units=metric&APPID=b51ffb00809b0c668546058f4937a62d";
  $("#about").html(urlAlt);
This code is on this page:
latitude and longitude keeps returnning undefined
dont know why
harqada
@harqada
Feb 13 2017 21:28
anyone have knowledge about SEO/SEM?
Francisco Gutierrez
@CodeMyCoffee
Feb 13 2017 21:44

@DarkoxD this is a quick fix, but you can tweak it as you wish `<div id="calculator">
<div class="calcRow">
<button class="btn btn-danger"><a id="deleteAll">AC</a></button>
<button class="btn btn-danger"><a id="backOne">CE</a></button>
<button class="btn btn-primary"><a id="/">/</a></button>
<a class="btn btn-primary" id="*">*</a>
</div>
<div class="calcRow">
<button class="btn btn-primary"> <a id="7">7</a></button>
<button class="btn btn-primary"><a id="8">8</a></button>
<button class="btn btn-primary"><a id="9">9</a></button>
<button class="btn btn-primary"><a id="-">-</a></button>
</div>
<div class="calcRow">
<button class="btn btn-primary"><a id="4">4</a></button>
<button class="btn btn-primary"><a id="5">5</a></button>
<button class="btn btn-primary"><a id="6">6</a></button>
<button class="btn btn-primary"><a id="+">+</a></button>
</div>
<div class="calcRow">
<button class="btn btn-primary"><a id="1">1</a></button>
<button class="btn btn-primary"><a id="2">2</a></button>
<button class="btn btn-primary"><a id="3">3</a></button>
<button class="btn btn-primary"><a id=".">.</a></button>
</div>
<div class="calcRow">
<button class="btn btn-primary bigButton"><a id="0">0</a></button>
<button class="btn btn-primary bigButton col-md-4"><a id="total">=</a></button>
</div>
</div>

<style>

calculator {

background-color: gray;
width: 250px;
padding-top: 20px;
padding-bottom: 30px;
padding-left:1em;
padding-right:1em;
border-radius: 0 0 2em 2em;
margin-right: auto;
margin-left: auto;

}

.calcRow{
display:flex;
justify-content:space-around;
}

.btn-primary,btn-danger{
width:20%;
height:inherit;
}
</style>`

Ok that formatting didnt work as intended sry guys my bad
@DarkoxD http://codepen.io/CodeMyCoffee/pen/QdYEwR now this is cleaner
Gulsvi
@gulsvi
Feb 13 2017 22:08
@fadySWHS multiple selectors are separated by a comma $("h1, h2, h3, h4, h5, h6").addClass("text-uppercase");
Jason
@ICodeWateverIFeelLikeCoding
Feb 13 2017 22:10
i'm trying to set my document body to a random url selected from an array using js. it's not working..any clues why? http://codepen.io/JaosnCodes/pen/vgQdjR
Gulsvi
@gulsvi
Feb 13 2017 22:12
@ICodeWateverIFeelLikeCoding with document.body.style you have to tell it what to style. Read here for more info: http://www.w3schools.com/jsref/prop_style_background.asp
Ellen
@ellenkorbes
Feb 13 2017 22:27
Hi everyone :)
Adam Jacks
@AdamHJ123
Feb 13 2017 22:31
Guys, do you think my calculator project is good enough for my portfolio?
http://codepen.io/AdamHJacks/full/dNQwGx/
taltmann42
@taltmann42
Feb 13 2017 22:42
@AdamHJ123 Looks good but i think I found a bug
press 1 -> C -> 1 -> 2; the 2 doesn't show up no matter how often you click
Gulsvi
@gulsvi
Feb 13 2017 22:55
@AdamHJ123 I find it kind of hard to use because the numbers aren't where they should be. (7,8,9 at the top, +,-,/,* on the side). Either way, "good enough" depends on who you will show it to and what you want to learn from the project
0livier1O1
@0livier1O1
Feb 13 2017 23:03
Hey guys, quick question here, it should be easy for the ones good with CSS. I want the twitter button (link) and the « new quote » button next to each other. I’ve been playing around with display and floats but nothing does it… (I know it looks like the example I’m just practicing at trying to reproduce this kind of stuff cause I’m pretty bad with CSS :smile: ) Thanks in advance! http://codepen.io/0livier1O1/full/zNyEvg/
Johnny
@jtan3
Feb 13 2017 23:09
@0livier1O1 put them in a class="row" div
0livier1O1
@0livier1O1
Feb 13 2017 23:10
@jtan3 Do I need to also add col-md-x if I use row?
Johnny
@jtan3
Feb 13 2017 23:14
@0livier1O1 not sure. Try it out and see what you get.
0livier1O1
@0livier1O1
Feb 13 2017 23:14
@jtan3 tried, doesn’t work, even with text-center http://codepen.io/0livier1O1/pen/zNyEvg
Michael Scott
@MichaelScott50
Feb 13 2017 23:14
working on the portfolio page, how do I get a preview of the link to show up as a picture? for example I want to link to a code pen i have made, how do i get the picture to be a preview?
i understand how to put images in like if it was a photo portfolio and have it link to something but i dont understand how to get the picture to look like the link
Johnny
@jtan3
Feb 13 2017 23:16
@MichaelScott50 go to the embed button on your codepen
Gulsvi
@gulsvi
Feb 13 2017 23:16
Or take a screenhot :)
Johnny
@jtan3
Feb 13 2017 23:16
@MichaelScott50 copy/paste the link
Michael Scott
@MichaelScott50
Feb 13 2017 23:16
well i am doing it in sublime text
do people take screen shots and use those?
or was that a joke?
Gulsvi
@gulsvi
Feb 13 2017 23:17
Yes, people use screenshots
Look at the example project - they're all screenshots https://codepen.io/freeCodeCamp/full/YqLyXB
@MichaelScott50
Not sure why you'd think it's a joke?
Or what else you had in mind
Michael Scott
@MichaelScott50
Feb 13 2017 23:20
i just wasnt sure it you where being sarcastic not harm inteneded
Johnny
@jtan3
Feb 13 2017 23:21
@MichaelScott50 if you have your projects on codepen there's a embed button on the bottom of your codepens projects
Gulsvi
@gulsvi
Feb 13 2017 23:21
none taken, just wasn't sure if you were expecting a different answer
Michael Scott
@MichaelScott50
Feb 13 2017 23:21
using the embed html tag
looks like it is working well but it is showing the top of the codepen page with the 3 windows of code, not the actual page
any ideas there?
Johnny
@jtan3
Feb 13 2017 23:23
click on one of your projects not the user page
toggle the tabs for results
in the preview page
Michael Scott
@MichaelScott50
Feb 13 2017 23:28
cool thanks
Jason
@ICodeWateverIFeelLikeCoding
Feb 13 2017 23:51
margin: auto will not center my elements.. why? http://codepen.io/JaosnCodes/pen/vgQdjR