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
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?
@aj-willi https://codepen.io/cckid/pen/ggQBRz
@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
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
@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
@taltmann42 yay!! That was it! :D Thank you so much!! Made me happy :D
kikykindagirl sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 492 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@kikykindagirl :thumbsup:
anyone awake?
@aaronedwarda i could have some time for the simon game if you have some problems
@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
aaronedwarda sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 495 | @taltmann42 |http://www.freecodecamp.com/taltmann42
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
@aaronedwarda break it down into pieces
@aaronedwarda guess that could work yes. and after each correct sequence of clicks, add one element to that array.
In a function
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
thats what I’m thinking anyway. is there a better way to approach it?
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
k thanks for the help
please~i want to askwhat can i do to make the "img" become center
@likefatboy to make an image centered?
yes
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
@likefatboy you can adjust the margins in css
i try but ~~cannot
@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?
Please review my Twitch app - thanks! https://codepen.io/skycoder/pen/XpyrYN
as far as checking if the user has clicked that is
@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
@SkyCoder01 turned out real good
nice hover effects
@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
aaronedwarda sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:warning: aaronedwarda already gave taltmann42 points
@SkyCoder01 looks sweet!
could use a smaller margin when you shrink the window down
it cuts it off a bit
@aaronedwarda i made a boolean variable
@moT01 for checking if the correct color has been clicked?
Thanks for taking a look @moT01 and @aaronedwarda !
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
oh, my bad, ...no i thought you meant for checking if the buttons should be available to click
like if the computer was playing
@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
aaronedwarda sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 510 | @mot01 |http://www.freecodecamp.com/mot01
thats my tinkering so far
and my silly hand background lol
simon mini
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
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
I originally had a box shadow with a pretty wide pixel range, your’s sounds like a better idea though lol
Why am I getting an error??
http://codepen.io/Athabasco/pen/wgRGJX
http://codepen.io/Athabasco/pen/wgRGJX
@moT01 thats great!
@aaronedwarda thanks, i was pretty happy with it
mot01 sends brownie points to @aaronedwarda :sparkles: :thumbsup: :sparkles:
:cookie: 309 | @aaronedwarda |http://www.freecodecamp.com/aaronedwarda
@Athabasco im taking a loook
@moT01 alright!
@moT01 yea I would be too. Really stoked about completing front end myself
@Athabasco i think its your query
maybe
@moT01 i know its coming from js... console says line 7 which is the start of my $.ajax call
yea that's not it
and try commenting the ajax out... it works fine them
then
@moT01
yea its in the ajax call somewhere
i can get a .getjson call to work
hmm
@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
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.
@taltmann42 I don't know how that effects me
@Athabasco i don't see a user-agent header in your ajax
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
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
}
} );
yeah i have no clue why
oh sorry, getjson worked?
didn't follow the complete discussion here
@moT01 what did you do for the getjson
i got the getjson to work, ...but that still might be why ajax isnt working
hmm probably.. but getJson uses ajax internally anyways as far as I know. Do you have a version with the working getJson?
i did
if you do have one that would be beautiful
@moT01 @taltmann42 thanks
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
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???
@Rallph you still having problems?
@moT01 yeah :/
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
@Rallph yea, it's like not resetting game back to offline or something
im still dissecting, any luck?
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?
@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
@moT01 but all the first one does is call the second one
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
any idea why?
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
I'm gonna try to put everything in the outer function and see how it works out
thanks for the effort @moT01 :)
rallph sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 512 | @mot01 |http://www.freecodecamp.com/mot01
@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) {
ok, I'll give that a try and let you guys know how it works out. thanks @SkyCoder01 :)
rallph sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 183 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@isabellaliu77 Nice :)
@joshbivens Thx! :smile:
isabellaliu77 sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @joshbivens |http://www.freecodecamp.com/joshbivens
string.prototype.split()???
anyone
I'm reading the MDN right now and I want to spit my string into an array of charactors
var myString = 'hello'
var arrayOfCharacters = myString.split('');
console.log(arrayOfCharacters); // ['h', 'e', 'l', 'l', 'o']
so you do need a separator?
It sound like you don't
@GoingAllTheWayUp What do you mean by 'separator'?
the part inside the parentheses?
''
The split.protoype takes two arguments I guess, separator and limit
yes
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']
ok so that would give me then and array of [h,e,l,l,o]
only if you split it with
''
no space between those apostrophes
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
Yes, it puts the whole string inside an array
How would I call this array to access and manipulate it is it called myString?
@SkyCoder01 thanks by the way
In the examples above, it would called
arrayOfCharacters
duh...
ok
for example:
var myString = 'hello'
var arrayOfCharacters = myString.split('', 3);
console.log(arrayOfCharacters[0]); // "h"
nice
@SkyCoder01 tx!
goingallthewayup sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 188 | @skycoder01 |http://www.freecodecamp.com/skycoder01
No problem :)
is it possible to sting along the array reverse and the string split into one line of code?
Yes, it is possible :)
you can .reverse() an array
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
And you can .join() arrays back with the same separator you used to split them with
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?
@AdventureBear wow, you are famous on codepen :) 30,526 views on your quote machine!!
@GoingAllTheWayUp Maybe 3 weeks now?
Nice, im about one week right now
@SkyCoder01 super cool!! thanks.:)
adventurebear sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 189 | @skycoder01 |http://www.freecodecamp.com/skycoder01
@GoingAllTheWayUp they are random, but you could program it easily
neat!
can't wait to get there
It's really fun, but I did some bootstrap classes before doing free code camp
and I go to javascript meetups on the weekends
cool, through FCC local?
yeah
cool, I would like to also
did you do the course in order?
No, I've been skipping challenges and skipped a lot of the bootstrap ones because I already knew how to do it
I am going to try too, but peek ahead just to get a lay of the land you know?
ok
I will come back and finish them all though
good to hear
Could you say you surpassed the initial learning curve of programming before FCC? @SkyCoder01
With HTML and CSS, yes, but not with javascript
I knew some basic stuff like for loops, but that was it
good
when do you think you'll have the front-end completed ?
if you don't mind
Maybe by march if I can find the time? I'm not sure how long the algorithms will take me
I feel the same way about the algorithms
It might be April, but we'll see
thats whats UP!!
:)
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?
does this look correct? .green-box {
background-color: green;
padding: 40px, 20px, 20px, 40px;
}
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;
}'
background-color: green;
padding: 40px, 20px, 20px, 40px;
}'
.green-box {
background-color: green;
padding: 40px, 20px, 20px, 40px;
}
@rorywag yes that looks fine
@rorywag without the commas
ahhh thank you :)
Cheers @joopt
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.
@camperbot
have you looked at the developer tools?
no
@labiej
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
does anyone know how to get the text to align properly on my last banner?
https://codepen.io/cckid/pen/ggQBRz
https://codepen.io/cckid/pen/ggQBRz
@labiej can you please explain.I am a beginner.
Open your codepen in a second tab, use the "full page" view
ok then
@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
@labiej yeah in developer tool it is working but in code pen console it is not working.
I don't know about codepen console. However you should refresh the page now and see what happens
I expect a very specific error
@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’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’s time to move on. </p>↵", link: "https://quotesondesign.com/lowell-williams/"}
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’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’s time to move on. </p>↵", link: "https://quotesondesign.com/lowell-williams/"}
Can you link the codepen?
how to link?
@labiej tell me i will link
just copy the codepen address and paste it here
@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
Anyone here is experienced with d3 and can reach out to help with a timeline in a pm?
@sorinr thanks. Salut :)
viorelfoamete sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1173 | @sorinr |http://www.freecodecamp.com/sorinr
@Lawanu now you use the object to put the info on the page somewhere. No idea what is wrong according to you?
@labiej is it okay
@labiej i was not getting the output in my codepen console
@viorelfoamete welcome. you can pm me in ro if you want
@labiej so,i thought there is a problem in my code.Thank you for your help.
@Lawanu I don't use the codepen console myself so this is weird
It should work from what I could find
@labiej thank you
lawanu sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 456 | @labiej |http://www.freecodecamp.com/labiej
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.
@UsamaHameed can you show your css to understand whats going on in there?
@sorinr give me a minute
@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
@UsamaHameed you can use this:
.range-form {
display: flex;
align-items: center;
position: absolute;
top: 0;
right: 0;
}to get what you want
Thank you @sorinr Don't know why I didn't go for flexbox in the first place
usamahameed sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1174 | @sorinr |http://www.freecodecamp.com/sorinr
@UsamaHameed welcome
never too late to go for flexbox :D
@kirbyedy yep :)
:hatching_chick:
Ugh... the Tic-Tac-Toe is so frustrating.
@playingwithinfinity Yeah but you can do it! I'll be there too in a few more days.
currently struggling with RegExp ;9
;)
@pennyJack I hope so too.
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?
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
https://codepen.io/MindWhys/pen/vgzqQN?editors=1011
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.
can someone help me with my weather app in Angular? I can't seem to get the injections with double brackets to work
@alant90 link? I can take a look
@alant90 no
ng-app ?
i put it in the html classes
in the pen settings
@toianw thanks!
c0d0er sends brownie points to @toianw :sparkles: :thumbsup: :sparkles:
:cookie: 493 | @toianw |http://www.freecodecamp.com/toianw
@oppiniated got anything?
No. I do not see any
ng-app
it's in the html classes when you click on pen settings
i typed in ng-app = "weatherMachine"
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
@alant90 This works... http://codepen.io/clydelobo/pen/JEwmvK
@alant90 Did you check the console for errors? You had these
ng-controller="" which caused errors
Could you help me with my Twitch API?
@oppiniated https://codepen.io/MindWhys/pen/vgzqQN
@oppiniated how to use the console? i was using Brackets to write the code and then I put it into codepen
@oppiniated thank you
alant90 sends brownie points to @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 567 | @oppiniated |http://www.freecodecamp.com/oppiniated
@MindWhys What is the issue?
the names of the twitch streamers appear multiple times each
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..
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..
@johnnydemol there is a problem with the openweatherapi
Anyone knows how to remove circles here on zoom d3? https://jsfiddle.net/8gnx5nns/205/
@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);
@alpox if I do so the circles don't get rendered in the first place
I'll look into it, thanks @MindWhys
johnnydemol sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @mindwhys |http://www.freecodecamp.com/mindwhys
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/
@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.
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?
@boredgamerz It is completely up to you, the content doesn't matter it is the code that counts :)
@MindWhys oke thanks :3
boredgamerz sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @mindwhys |http://www.freecodecamp.com/mindwhys
@MindWhys thanks a lot
viorelfoamete sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @mindwhys |http://www.freecodecamp.com/mindwhys
@viorelfoamete no problem, it was a pleasure looking at it.
<3
@JonathanDn yes, but isn't that the meaning of removing? :-/ what exactly did you want then? :D
@viorelfoamete I think I am going to borrow some of your ideas to help improve mine :)
@MindWhys no problem. good luck there ;) pm me when it's done. I'd love to see the results
@viorelfoamete ok
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
iam not getting proper tweeting output+there are random windows load:http://codepen.io/Lawanu/pen/PWaoOE?editors=1111
@Lawanu the href for your twitch button is just "#" you may need a more defined liink
@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
@viorelfoamete you could remove/change the scrolling bar so it fits in with the general design ^^
@viorelfoamete not sure how to PM but here is my profile page with the projects now added in
https://codepen.io/MindWhys/pen/oBLExY
https://codepen.io/MindWhys/pen/oBLExY
@Lawanu apologies for slow reply, just looking into it
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.
@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.
what method did you use?
@Lawanu I created my own array in Javascript and then used that, rather than calling an outside API
@MindWhys Hmmm okay then...let me struggle for some time.....:)
i am unable to append to the list
plss help...
@MindWhys i've send you some pms. check left side of the screen
<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
guys can you please check if this looks good? (css/html) http://codepen.io/EvanDCP18/pen/XpooEx
sorry, this link: http://codepen.io/EvanDCP18/full/XpooEx/
@EvanDCP Here's something quick you can change
.btn {
cursor: pointer;
}
@bd1887 awesome! thanks!
evandcp sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @bd1887 |http://www.freecodecamp.com/bd1887
does everything else look good and nicely-styled?
@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
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.
@Lorrie01 I used one like this: https://wind-bow.gomix.me/twitch-api/streams/freecodecamp
thanks @MindWhys I appreciate your help
lorrie01 sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @mindwhys |http://www.freecodecamp.com/mindwhys
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
http://codepen.io/Pettar94/pen/KabXpG?editors=0100
@bd1887 sorry what should I change? I didn't understand
@kshtzsharma48 you do not have a color property you only have a background-color property. color relates to text color
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
@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
got it lol
@MindWhys perfect! I will try that
@EvanDCP Copy and paste what I wrote for #calculator
Can anyone help? I am really struggling with this :/
I'm currently stuck on this project myself, I am displaying all the data but mulitple times
Any ideas how to position svgs relative to the container size?
Hey guys.
@Carbie222 Hello :)
Am totally new here and am very excited.
I have no idea where to start.I need your help
@Pettar94 I just put in "margin-top:15opx;
@WiseKodama You can set values as percentages
@Carbie222 Just work your way through the map of stuff :)
@MindWhys But I want it to be responsive, like the text. You know what I mean?
@Pettar94 hmmm, try margin-top: 50%; ?
Doesn't work, percentages are ignoring the size of the container for some reason @bd1887
Okay @MindWhys .Thenx
@WiseKodama Can you post the codepen?
@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
@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;
}
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
@MindWhys I found the way. Thanks so much
pettar94 sends brownie points to @mindwhys :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @mindwhys |http://www.freecodecamp.com/mindwhys
@Pettar94 I'm glad you worked it out :)
@MindWhys Yeah, it is similar to my solution. But your way of thinking was really helpful
@Pettar94 May I ask how you ended up doing it? I like finding out new ways of working :)
@MindWhys I put the margin-top: 30%; in the .prev, .next classes and in the .text too
@Pettar94 thanks for letting me know...I'll try that out myself :)
mindwhys sends brownie points to @pettar94 :sparkles: :thumbsup: :sparkles:
:cookie: 2 | @pettar94 |http://www.freecodecamp.com/pettar94
@WiseKodama I'm not sure SVGs are the way to go here. That's some pretty messy HTML
@bd1887 thanks I guess
wisekodama sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 339 | @bd1887 |http://www.freecodecamp.com/bd1887
@WiseKodama If you like the square quotation marks, you can try to change the font to one where they look more squared
@WiseKodama Did you ragequit before you could see my full answer?
You're welcome I guess.
You're welcome I guess.
@bd1887 can you try thanking me because I just changed my name and want to test if it still can receive brownies
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
@forMaximus Haha. Thanks.
bd1887 sends brownie points to @formaximus :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for formaximus
no :/
@bd1887 thank you
formaximus sends brownie points to @bd1887 :sparkles: :thumbsup: :sparkles:
:cookie: 340 | @bd1887 |http://www.freecodecamp.com/bd1887
guess I'm stuck with this name
You can try the admin channel for help
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
http://codepen.io/achudoz/pen/bgOZVJ?editors=1100#0
(the JS part is not done yet so clicking won't do anything)
@achudoz It seems to show up correctly in landscape on my iPad.
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!
achudoz sends brownie points to @freakishlancer :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @freakishlancer |http://www.freecodecamp.com/freakishlancer
@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
@achudoz Yeah, it seems like it is just enough of a threshold of max width that the page looks perfect on iPad landscape.
hey guys can you please check if my calculator is working? and if it looks nice? http://codepen.io/EvanDCP18/full/XpooEx/
@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
@achudoz I don't know how I can fix the alignment, they are already text-centered :S
nothing happens? omg :(
did you center them in each column?
grab the column class in CSS and add text-align:center;
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
@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
@achudoz thanks! like this? http://codepen.io/EvanDCP18/full/XpooEx/
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 264 | @achudoz |http://www.freecodecamp.com/achudoz
@EvanDCP yeah,just like that- now just re-align them
@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. :/
Hi! anyone know why bdi isn’t working in my code?
has this happened to anyone btw? that you can't see bootstrap on your computer?
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
@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
i don't know what is wrong with it but this is how it looks like from my pc :/
@EvanDCP that ir really weird. how come it does not show even colors
hey u ;)
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
How can I include weather-icons ?
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 :(
@EvanDCP i would first try opening it in a different browser. if that does not help, then I would google and ask anywhere
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?
@achudoz same problem on firefox and internet explorer
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
Hello I'm having trouble taking data from here:
http://ipinfo.io/json?callback=JSON_CALLBACK
http://ipinfo.io/json?callback=JSON_CALLBACK
I need to take my loc from this json!
@EvanDCP do other sites look normal? like facebook, youtube etc?
$.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!
@achudoz yup they do
@achudoz it's gotta be a problem of codepen.io I think
Can someone help me with this pls? :(
@Gentarozzo - maybe try
callback=? or just callback= - I think that it might be looking for a function named JSON_CALLBACK?
@khaduch if I try alert(data.loc) he game me "undefined"
gave*
WAIT... with just callback= it's working... is that magic?
@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.
@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
@Gentarozzo - check the documentation https://api.jquery.com/jquery.get/ there...
@EvanDCP that's weird. try messaging them and googling your problem. try viewing pens of others if they work properly etc.
@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
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
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.
@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?
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
@khaduch
anyone out there??
@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?
Hey campers. I want to share my first tribute page https://codepen.io/TomasAle/pen/dNjrYB
@tomasale :+1:
@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.
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.
hello World !Just joined looking forward to a great learning time.
hey @goodgoof seems like we are both new, you are here because of front end to? are you a beginner?
@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.
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."
im having some really weird styling behavior happening with react, anyone know whats thats all about? or wanna take a look?
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:
Hello everyone! I stuck on random quote machine. I couldn't find ani link to json api with random quotes. Any advices?
@zhann1982 quotesondesign.com has a nice api use explanation
nvm found it
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....
@cjrutherford What if you change col-md-4 to col-xs-4?
@SkyCoder01 that really shouldn't have done anything, but it did....
Your browser probably isn't wide enough to show md-4 side by side
@SkyCoder01 odd full screen on a MBP with Retina, but it's over, working with md again
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>
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;
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?
@SkyCoder01 its for the quotes challenge https://en.wikipedia.org/wiki/AFI's_100_Years...100_Movie_Quotes
hmmm, I'm not sure off the top of my head. I'll see if I can figure it out
thanks :)
I think this works?
$('.wikitable tr').length - it gives 101 if you do console.log($('.wikitable tr').length)
oh nice ill try that
This also seems to work, without jQuery:
document.getElementsByClassName('wikitable')[0].rows.length
you have to use [0] to select the first .wikitable class
oh I see thanks a lot
I got to learn something new, thank you
so that failed because there was other things with these classes?
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
Interesting
but I don't think there's an ID for that table, so you have to use className (if that makes sense)
@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");});
});
@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));
hmm so I cant just count the rows and not retrieve everything?
I think you can scrape the page instead with jquery $.get? I'm not sure :(
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
put it in a codepen @cjrutherford
alguém pode me ajudar?
@SkyCoder01 kk one moment
just finished the Wikipedia viewer. what do u guys think ? http://codepen.io/Nsoual/pen/ggQBVZ
actually i still want to be able to trigger the search with the enter key pressed. any suggestions ?
@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
@moT01 thanks ! is it not working for u ? because it does work when i click on it
nsoual sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @mot01 |http://www.freecodecamp.com/mot01
no, maybe my browser
anyone know why the blue box won't stick next to the red?
@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
@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.
@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
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
@AmitP88 the CarouselCell variable in the specials.js
put everything but the pic in its own div? and display block on em?
@moT01 oooh, display block facepalm I was using display flex. ok, lemme try that real quick
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
@moT01 that did it, thank you :)
amitp88 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 515 | @mot01 |http://www.freecodecamp.com/mot01
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?
yes, i am familiar with those facepalms @AmitP88
@moT01 lol yeah, I guess I still have a lot to learn
@trust20 maybe try
<a><button></a>
but you should really probly make the button a div or something else
@moT01 why a div?
like this?
<a href="#MyWork"><button class="navButton">
MyWork
</a>
</button>
?
@moT01
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
@moT01 ahhh let me try :D
i dunno, i use buttons like that i guess
@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
or you could maybe do the opposite, @trust20
<button><a></a></button>
<a><button class="navButton">href="#MyWork</button></a>
like this (or opposite) ?
@moT01
try it
see if either work
@moT01 not first one tho
you could maybe just do <a class="navButton" href="#mywork">label here</a>
@moT01 FYI, buttons can't go inside <a> or the other way around. Neither of those are valid html:
- <a><button></button></a>: http://stackoverflow.com/a/6393863
- <button><a></a></button>: http://stackoverflow.com/a/17253457
the href needs to be in the <a>
@moT01 YES! Thank You!
trust20 sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 516 | @mot01 |http://www.freecodecamp.com/mot01
I forget who told me that over on the help channel the other day
<a class="navButton" href="#MyWork">MyWork</a>
@moT01 @SkyCoder01 this did it
yea, it seems redundant, not sure why it wouldn't work though
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
if u miss a html closing tag, the browser will try to close it but by itself but not always as you want it
@moT01 @SkyCoder01 @trust20 @sorinr @taltmann42 ty
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
what tools do we need to write up the random quote machine? html, css, bootstrap (maybe) also we need JS & jQuery right? what else?
@philiplee15 thats all
@furball514 whew thought i was missing something. thanks dude :)
philiplee15 sends brownie points to @furball514 :sparkles: :thumbsup: :sparkles:
:cookie: 186 | @furball514 |http://www.freecodecamp.com/furball514
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 ();
}
@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
@philiplee15 inspiration & knowledge to use those 3 to get the results you want :)
@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
Oh no! I WANTED TO fire each item individually
One right after each other in the array
Thanks you @taltmann42
rebecca-acceber sends brownie points to @taltmann42 :sparkles: :thumbsup: :sparkles:
:cookie: 503 | @taltmann42 |http://www.freecodecamp.com/taltmann42
@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
@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
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
Hi, anybody knows how to call twitch tv api?
Can someone help me left-align a <p> that's within a centered <div>?
@ptrbates sure what do you need help with?
I've tried <p text-align="left"> and several others but it just stays centered..
@ptrbates do you have the name of the challenge?
I'm working on the Tribute Page
oh ok
@ptrbates can you send me the link to code pen?
Hm. I don't know how to do that. Is it just the URL?
yes it is.
@ptrbates
thanks
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/
@jfc246 I'm trying to left-align everything after the photo and caption.
@ptrbates what are trying to text align?
ok let me see.............
@jfc246 Could I just use more divs, and have some be centered and some not?
Here is my first Tribute Page - Colonization of Mars :)
http://codepen.io/gratianl/full/KarYXo/
http://codepen.io/gratianl/full/KarYXo/
@ptrbates you can just use text-align:start in hte div that wraps it
Ok, is that some kind of "reset" for the align?
Looks good, @gratianl , although your table headers are switched. :)
Kinda, is the default from left to right
ok, thank you @CodeMyCoffee
ptrbates sends brownie points to @codemycoffee :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @codemycoffee |http://www.freecodecamp.com/codemycoffee
@ptrbates Most css have some kind of "start" or "initial" value wich is the normalized default
@ptrbates You're welcome ^^
@ptrbates use instead
class="text-left"
@ptrbates thanks! I fix the problem with table headers
gratianl sends brownie points to @ptrbates :sparkles: :thumbsup: :sparkles:
:cookie: 119 | @ptrbates |http://www.freecodecamp.com/ptrbates
Thanks @jfc246
ptrbates sends brownie points to @jfc246 :sparkles: :thumbsup: :sparkles:
:cookie: 229 | @jfc246 |http://www.freecodecamp.com/jfc246
@ptrbates NP
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
@ptrbates maybe its in the settings?
@ptrbates go to Settings and click on behavior it should be there.
@jfc246 I'm seeing some options for how the code is indented, but nothing for displaying <blockquote>
please guys can't anyone take a look and tell me what's wrong with my calculator? http://codepen.io/EvanDCP18/full/XpooEx/
@ptrbates ok idk
@EvanDCP whats a matter with it?
@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
@jfc246 Thanks for trying.
ptrbates sends brownie points to @jfc246 :sparkles: :thumbsup: :sparkles:
:warning: ptrbates already gave jfc246 points
@CodeMyCoffee thanks! will try it out
@EvanDCP Np, if you need more guidelines, or a written code example feel free to ask
hey guys can somebody please explain to me this challenge ? https://www.freecodecamp.com/challenges/global-scope-and-functions#?solution=%0A%2F%2F%20Declare%20your%20variable%20here%0A%0A%0Afunction%20fun1()%20%7B%0A%20%20%2F%2F%20Assign%205%20to%20oopsGlobal%20Here%0A%20%20%0A%7D%0Avar%20myGlobal%3D%2210%22%3B%0A%2F%2F%20Only%20change%20code%20above%20this%20line%0Afunction%20fun2()%20%7B%0A%20%20var%20output%20%3D%20%22%22%3B%0A%20%20if%20(typeof%20myGlobal%20!%3D%20%22undefined%22)%20%7B%0A%20%20%20%20output%20%2B%3D%20%22myGlobal%3A%20%22%20%2B%20myGlobal%3B%0A%20%20%7D%0A%20%20if%20(typeof%20oopsGlobal%20!%3D%20%22undefined%22)%20%7B%0A%20%20%20%20output%20%2B%3D%20%22%20oopsGlobal%3A%20%22%20%2B%20oopsGlobal%3B%0A%20%20%7D%0A%20%20console.log(output)%3B%0A%7D%0A i didnt know what to do
@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
hello all
@markellllo1998 Welcome to Free Code Camp!
)
@jfc246 )
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);
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
Does anyone know how to align two p elements in one line?
Inside a div
@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
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? :/
Hey People! Need a Hand here!
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 !
$.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
anyone have knowledge about SEO/SEM?
@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
@fadySWHS multiple selectors are separated by a comma
$("h1, h2, h3, h4, h5, h6").addClass("text-uppercase");
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
@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
Hi everyone :)
Guys, do you think my calculator project is good enough for my portfolio?
http://codepen.io/AdamHJacks/full/dNQwGx/
http://codepen.io/AdamHJacks/full/dNQwGx/
@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
press 1 -> C -> 1 -> 2; the 2 doesn't show up no matter how often you click
@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
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/
@0livier1O1 put them in a class="row" div
@jtan3 Do I need to also add col-md-x if I use row?
@0livier1O1 not sure. Try it out and see what you get.
@jtan3 tried, doesn’t work, even with text-center http://codepen.io/0livier1O1/pen/zNyEvg
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
@MichaelScott50 go to the embed button on your codepen
Or take a screenhot :)
@MichaelScott50 copy/paste the link
well i am doing it in sublime text
do people take screen shots and use those?
or was that a joke?
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
i just wasnt sure it you where being sarcastic not harm inteneded
@MichaelScott50 if you have your projects on codepen there's a embed button on the bottom of your codepens projects
none taken, just wasn't sure if you were expecting a different answer
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?
click on one of your projects not the user page
toggle the tabs for results
in the preview page
cool thanks
margin: auto will not center my elements.. why? http://codepen.io/JaosnCodes/pen/vgQdjR