Is anyone working on the React Recipe Box project? I am about 60% done, but I would appreciate it if someone was willing to assist me in completing the project.
It has come a long way from 24 hours ago.
http://codepen.io/reacorbett/full/EPzmqY/
http://codepen.io/reacorbett/full/EPzmqY/
I can't seem to figure out how to make the image that say richards portfolio to react to resizing of the browser.
add the img-responsive class @reacorbett
looks great, btw
@astringham thanks.
@astringham wow. i should have known that. Brain dead today.
@reacorbett no worries. I’ve worked on something I already knew for hours before figuring it out on more than one occasion
@reacorbett that looks so good!
@otmeek Thanks :). I've been working my but off on it.
reacorbett sends brownie points to @otmeek :sparkles: :thumbsup: :sparkles:
I thought the blurry effect was some css magic and then I realised you are using two images. That's so clever
:star: 353 | @otmeek | http://www.freecodecamp.com/otmeek
great graphic design skills!
@otmeek Made the graphics using gimp. Gimp is wonderful for these kind of things.
I think the graphics skills will impress and help you land jobs :+1:
@reacorbett it is nice but the fuzzy to clear sort of hurts my eyes and makes me ill
Hi, im trying to adjust the margins of a box which inside contains an image, I am attempting to make the sides of the box flush with the sides of pictures, and am able to do so on the right side, but when i try to change the right margin of the box, my image is moved.
How can I avoid this?
@thybean please share what code you have written so far
basic calculator: http://codepen.io/dshgna/full/PZXEMQ/
How can i copy the code i wrote in my code to this chat?
@thybean enclose your code within ``` and then post
.title {
font-family: Palatino;
font-size: 50px;
}
.heading-image {
height: 500px;
width: 800px;
position: relative;
left: 30px;
}
.surrounding-grey-box {
background-color: #E0E0E0;
padding: 30px;
margin: 45px;
}
.surround-white-box {
background-color: white;
margin-right: 28px;
margin-left:
}
</style>
<body>
<div class='box surrounding-grey-box'>
<h1 class='text-center title'> Sir Wintston Churchill</h1>
<h2 font-size: class='text-center'> <i> The British Bulldog</i> </h2>
<div class='box surround-white-box'>
<img src='http://megamind.ru/upload/medialibrary/076/0768c8fb308172019b3b3cc70e8ac26f.jpg' class='heading-image'></img>
<h5 class='text-center'> Sir Winston Churchill playing a quick game of "Rock, Paper, Scissors" in London.</h5>
</div>
<br>
<br>
<br>
<p class='text-center'> Here's a timeline of Sir Winston Churchills' life:</p>
<ul>
<li> 1943 bla bla bla </li>
</ul>
</div>
</body>
@thybean the requirement is to have the image in the middle of the box right?
Quick question, I'm trying to use a variable to insert a url into my jQuery css function without any luck. It seems to work when I copy and paste the url arguement directly, just not as a variable. Any suggestions?
backgroundUrl = "url(https://pixabay.com/static/uploads/photo/2015/08/28/18/25/seattle-912274_960_720.jpg)";
$("body").css("background-image","backgroundUrl")
The image is by default in the middle of the box, I just wanted the edges of the box essentially gone so that I can have a small box area above and below my image
And the problem is that when I change the margins of the box to "hide" them, the left margin forces my image to move
I also dont know how to make my list centered.
@thybean quick tip: you can essentially get the same thing done by having a padding to your box and then giving it a border without having a separate box.
can you share the codepen you are doing it in? It's rather hard to understand w/o seeing it.
can you share the codepen you are doing it in? It's rather hard to understand w/o seeing it.
@BLayman try
$("body").css("background-image", backgroundUrl)
$("body").css("background-image", backgroundUrl)
@dshgna I also do not know what you mean by giving my box a border?
@thybean: you should have all the css stylings within css not in a <style> element. Also you have set a fixed width for the image.
@thybean I only understood when I saw the pen. applying a border won't work here.
@thybean try using max-width instead of a fixed width and see. also add the img-responsive class
Is it really a big deal if I have styles in my html folder? Also what does a fixed width have to do with the image being moved when the left margin is shifted @dshgna
@thybean its a best practice to have the style, script and content separate. Think about the readability of your code for one thing.
mmk
@dshgna ah, good catch. It's always those little things. Thanks.
blayman sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 181 | @dshgna | http://www.freecodecamp.com/dshgna
@thybean give me a sec to get back on the margin issue.
@thybean the idea is to have html css and js all separated nice and well. this way, all your logic is split up into sensible components.
@thybean on the other extreme, you could write js inside html file as well
@thybean your image shifts because of this css element: position: relative;
Yea, I just noticed that setting the image as a block and giving it its own margins could help.
Im trying that atm
@thybean but these things make no sense. your file's name is blabla.html, but it contains css / js codes? Would you like your excel to contain powerpoints even though technincally you could?
@batilc1 Im just beginning to learn these things, I wasnt explained the importance.
@thybean i am not acting you :) just trying to make you understand by thinking bout the issue
@batilc1 its somewhat amusing how a person reacts to a man vs woman explaining the same thing lol.
@dshgna yeah!, people's response always vary according to gender though :)
@dshgna I changed my image to this
.heading-image {
height: 500px;
max-width: 800px;
display: block;
margin-left: auto;
margin-right: auto;
}
@batilc1 exactly! thanks for helping out :)
dshgna sends brownie points to @batilc1 :sparkles: :thumbsup: :sparkles:
:star: 211 | @batilc1 | http://www.freecodecamp.com/batilc1
.heading-image {
height: 500px;
max-width: 800px;
display: block;
margin-left: auto;
margin-right: auto;
}
cool
thanks to you too @dshgna
batilc1 sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 182 | @dshgna | http://www.freecodecamp.com/dshgna
So what would I have to do now to ensure that the box does not move the image?
@thybean you could make it an absolutely positioned element as a last resort
@batilc1 How do I go about that?
And why is it considered a last resort?
@thybean absolute positioning is, although very very useful, breaks down the size of the parent. For example suppose you have a
<div> <img/> </div> if you use relative position on img and have it size 300x300, div will be 300x300 as well. If you use absolute position, div will be 0x0
this is just one of the single issues.
basically,
position: absolute creates exceptions in your css that you will need to handle manually later on when you build bigger things
@batilc1 I will try this. Thanks
thybean sends brownie points to @batilc1 :sparkles: :thumbsup: :sparkles:
@thybean the problem with your original code was that you were using relative positioning. With relatvie positioning, because you are used the left attribute, it is shifted 30px left from where it originally should be. More on posiioning here;https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
:star: 212 | @batilc1 | http://www.freecodecamp.com/batilc1
@thybean wait, you can also do what you want with relative as well (i think)
@thybean if you only set
margin-left: auto and remove the margin-right, than your element will always be on the right-most side
@dshgna Yea I now know that it is better to make the image a block(?), but I am still having troubles with it shifting. Thanks!
thybean sends brownie points to @dshgna :sparkles: :thumbsup: :sparkles:
:star: 183 | @dshgna | http://www.freecodecamp.com/dshgna
@batilc1 Ill try both your solutions
@thybean good luck :thumbsup:
@batilc1 It seems that removing margin-right works well. :)
Feel I should know what to do next on this but am unsure. Care to set me off on a "next step"? Huge thanks in advance! http://codepen.io/PowersCoding/full/Goboeb/
hi everyone. does anyone know anything about Jade?
@PowersCoding I cant help you much with the coding aspect, but Im working on the same project and trying to allign my bullet points closer to the middle.
@thybean Yeah, not really sure what's up with those bullets!
@PowersCoding Im trying to find a solution for it right now.
@PowersCoding You still looking on how to align list to the middle?
@thybean That I am!
@PowersCoding Instead of Bullets you could have the years and you could try a different color shade background for each line
f anyone would like me to design buttons or other things for you, let me know. I will do it for free, as long as you credit me for it somewhere in your page.
http://codepen.io/reacorbett/full/EPzmqY/
http://codepen.io/reacorbett/full/EPzmqY/
@PowersCoding ive found that adding list-style-position: inside;
Makes the bullets stick to the centered text
Although I havent found a way to make all text in line with each other
This message was deleted
@thybean Where are you placing >> list-style-position: inside; ?
As a CSS style
You can write it inline or in your css folder,
Got it. Thanks!
@PowersCoding And instead of centering your text, you can use margin-left: 250px to "center" your text.
Nice. In one section (a quote used), I used both margin-left: 250px and margin-right: 250px ... Looks nice
Yea just tinker around with it to get your desired effect
hey guys idk why my on click event doesn't work after i clikc the first time :(
function rand_number() {
return (Math.round(Math.random() * 99));
}
function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}
var color = "blue";
var header = "#" + rand_color();
$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});
not sure why it doesnt come out formatted
I cant help you with this but you can use
[code here] to make your code appear nicely.
wiki format
:point_right: code formatting [wiki]
Inline code
This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.
Code Block
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
[function rand_number() {
return (Math.round(Math.random() * 99));
}
function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}
var color = "blue";
var header = "#" + rand_color();
$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});
]
'''js
function rand_number() {
return (Math.round(Math.random() * 99));
}
function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}
var color = "blue";
var header = "#" + rand_color();
$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});
'''
:bulb: to format code use backticks! ``` more info
function rand_number() {
return (Math.round(Math.random() * 99));
}
function rand_color() {
var color = [rand_number(), rand_number(), rand_number()];
var colors = color.join("");
colors = colors.toString();
return colors;
}
var color = "blue";
var header = "#" + rand_color();
$(document).ready(function() {
$("#new_quote").on("click", function() {
$("body").css("background-color", header);
});
});
there we go haha, thanks @thybean @MattYamamoto
paulmacovei sends brownie points to @thybean and @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 917 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
:star: 130 | @thybean | http://www.freecodecamp.com/thybean
@paulmacovei header is a fixed value, you assign it once. so in the click function there is nothing to change.
why not put what you have for
header inside the click function. That should work as intended
perfect, thank you :)
should have caught that haha
Hi all, I have just finish the weather app. Any feedback is welcome: http://s.codepen.io/CatalinScr/debug/yeZWNQ
@CatalinScr nice and simple, I like it. The weather icon gets pretty small at small screen widths, but that is pretty minor.
If anyone could review my first project, thatd be nice. :) http://codepen.io/thybean/full/eJwJdz/
<div class="container" id="quote_box">
<h1>Random Quote Machine </h1>
<p>Twitter Link</p>
<p>Tumblr Link</p>
<div class="row">
<div class="col-xs-12">
<button type="button" class="btn btn-primary" id="new_quote">
<p>Twitter</p></button>
</div>
<div class="col-xs-12">
<div class="button pull-right">
<button type="button" class="btn btn-primary" id="new_quote">
<p>New quote</p>
</div>
</div>
@MattYamamoto Thanks Matt for the feedback. The icons have just 50px from the weather Api and if I put them a little smaller they will be pixelate.
catalinscr sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 919 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
not sure why that doesn't do buttons on same row lol ^
@thybean looks good, the picture is a little large for my taste, but that is probably more of a personal thing. But, the image doesn't stay centered at small screen sizes. Try using a percent for the
margin-left for your .heading-image class
@MattYamamoto Thanks!
thybean sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 920 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
nvm i needed to modify col to 6 instead of 12
@CatalinScr I meant that at small screen sizes the image gets too small, but I think I understand where you're coming from. I think you could give that image it's own class and style it seperately from the FreeCodeCamp image to better control its size.
@MattYamamoto this part I haven't tested. The icon has separate properties in CSS than the image, but I will try to modify with media.
does anyone have a good guide of how i can use jquery / ajax to pull random quotes from an API or something like that?
don't know where to begin :S
@MattYamamoto see now: http://s.codepen.io/CatalinScr/debug/yeZWNQ
@CatalinScr better. When you say the image has it's own styles are you referring to the
weatherimgclass? I was just refering to the <img> tag itself, you have a width and height on the img tag of 25%.
yes
weatherimg is the class for the icon
@CatalinScr well the style for
img is intefering I believe.
@MattYamamoto I remove the image style and I added a class for that img tag. Now that class I'm styling
I think that works better. :+1:
great
@paulmacovei an easier way would be to use an array of quotes and select them randomly
Can anyone explain to me how this piece of code works to turn arguments into an array?
var args = Array.prototype.slice.call(arguments);
@paulmacovei - yes, I agree with @qualitymanifest - until you get the API section down, it's a lot easier to set up an array of quotes and use that with random selection. Make it a long enough list so that it's not too boring... :) You can always come back and do the quote API when you have time...
yeah and you'll learn how to use APIs a little later anyway. i wouldn't worry about that for the quotes challenge.
@livmaria7891 I can try... slice is a method of the Array object, so
Array.prototyp.slice get's that function and then you are using .call to feed that function the this value it is supposed to operate on. Normally, if you had an array you could just do arr.slice() which works becuase in arr, in my example, has the slice() method up its prototype chain. arguments is not an array, so you can't do arguments.slice(), so we just force javascript to use that method on the arguments array like object in the manner you posted Array.prototype.slice.call(arguments). And since the output of the slice() method is an array, you now have your arguments in a proper array.
anyone feel free to correct me because I'm like 80% on that. :smile:
I am having trouble getting my Twitter button to do what i want it to. I am trying to have the image change whenever you have over it. I dont know what I am doing wrong. The button is supposed to be in the bottom left corner of the page. Can someone look at my code and see what I am doing wrong?
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
@MattYamamoto Excellent explanation! Thank you!
livmaria7891 sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 921 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
@reacorbett you dont have an image defined for your twitter so it doesn't even appear
<div class="col-xs-3">
<a href="#" class="img-responsive" class="twitter"></a>
</div>it's currently just a link
@reacorbett the url idk if it works because the res might be too big idk
@reacorbett nevermind i figured it out, try this
.twitter{
display:block;
background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');
height: 132px;
width: 270px;
} <div class="col-xs-3">
<span class="twitter img-responsive"></span>
</div>
@reacorbett
sorry for spam but change the last one this and it works.
sorry for spam but change the last one this and it works.
<div class="col-xs-3">
<a href="#"><span class="twitter img-responsive"></span></a>
</div>
@idietmoran OMG! thank soo much. that works great.
reacorbett sends brownie points to @idietmoran :sparkles: :thumbsup: :sparkles:
:star: 306 | @idietmoran | http://www.freecodecamp.com/idietmoran
@idietmoran I got all of them to work but the fcc button. Another thing. they are no longer responsive to resizing. Is there a way around that?
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
http://codepen.io/reacorbett/pen/EPzmqY?editors=1100
@reacorbett one sec looking now
@reacorbett
heh i found the issue
heh i found the issue
.freecc:hover{
background-image:('http://i1155.photobucket.com/albums/p543/richard_corbett1/fccgraf_active_zpsmqx6ewqb.png');
}
@reacorbett you're missing one little word
@idietmoran url!! I stared at that for a while. I cant beleive i missed it.
@reacorbett :D
@idietmoran do you know why the images are no longer responsive to resizing?
Is this what is causing the images to stop responding to bootstrap img-response?
.twitter{
display:block;
background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');
height: 132px;
width: 270px;
}
.twitter{
display:block;
background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');
height: 132px;
width: 270px;
}
help format
:point_right: code formatting [wiki]
Inline code
This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.
Code Block
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
s this what is causing the images to stop responding to bootstrap img-response?
.twitter{
display:block;
background-image: url('http://i1155.photobucket.com/albums/p543/richard_corbett1/Twitter_graf_zpskmnep2bj.png');
height: 132px;
width: 270px;
}
@reacorbett because it's no longer an img element
Is there a way i can make it responsive to resizing of the browser window and still keep the image change on hover feature?
@idietmoran
@reacorbett hmmmmm
@reacorbett you have to make it an img element that change on hover with javascript
that's the only other way I can think of
Ah ok.
@reacorbett or media queries in CSS
I dont know anything about javascript yet. i will just hold out on that for a while
Hey guys, now this is how far I have gone with the Pomodoro clock, as usual it's a JSFiddle
please be kind to help check if am on track, how can I stop my plus and minus button from interfering with the countdown ?
My guess, a boolean but can't wrap my head around it yet....please help out thanks.
@Lumexralph
do something kind of like this i think
do something kind of like this i think
// variable to determine if clock is running
var clockLive = true;
$('#plus').click(function() {
// if clock is not running
if(!clockLive){
// do this
// your code
}
})
@idietmoran thanks man, would work on that and see our it goes, thanks for your time
lumexralph sends brownie points to @idietmoran :sparkles: :thumbsup: :sparkles:
:star: 310 | @idietmoran | http://www.freecodecamp.com/idietmoran
anyone want to test my half complete portfolio http://codepen.io/thecoder15/pen/EPJMEN?editors=1100
Hello folks...I was wondering if someone can help me with my ScrollSpy troubles. ..
This is my pen. The problem is not the auto scrolling, it is rather, that when I scroll manually, the icons on the top, do not change colour when activated.
@bohemian83 the hamburger wont open the menu... I think you have missed the bootstrap.js
That's strange. Bootstrap is loaded in my pen. Is there a setting I have to activate when sending the link?
if I look the pen in the js settings you have added only the jquery
@bohemian83 --------->https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js
just quick add ....
@bohemian83 also data-target should be selecting .class in nav
Ah, I am stupid. Thanks guys. That solved this problem. I have a new one now. xD When I scroll down, once I reach the second page, the glyphicon gets activated and stays activated even when I scroll to the 3rd and 4th pages.
@bohemian83 data-target=".navbar" for example <----------------------------should change the color or icon when you scroll
ciao... have a nice coder day bro ;)
@bohemian83 or #my-nav remember the selectors
@wearenotgroot I actually use .navbar-collapse for the glyphicon list. Shouldn't I target this one? #my-nav is having the same problem as above. The second icon stays activated when I scroll through to the 3rd section.
@bohemian83 try to adjust the data-offset and see if it helps
could someone tell me how to change the top buttons colors when you hover over them
@caleb272 use CSS
use the hover pseudoclass for the anchor tag
i know i have been trying li: hover and things like that but it doesn’t work
@wearenotgroot No, it doesn't, tried a few combinations.
code?
Spent 3 hours not getting anything from my API-call.
Figured out I had mixed id and class in HTML/CSS :worried:
Figured out I had mixed id and class in HTML/CSS :worried:
oh I see @caleb272 idk if you can apply hover to a class
@caleb272 try something like, just an example -------->li:hover, a:hover, li:focus, a:focus{color:blue;background:transparent!important;}, actually li is not needed
you should apply it to an element
don't think you can technically hover over a class
Hello. Can anyone advise me why my background photos are no longer showing on my portfolio task? http://codepen.io/jameswinfield/pen/xZNbxX Please!
@bohemian83 couldnt figure it out either :worried:
@jamesthemonkeh I can't access the image either, perhaps its a permission issue with dropbox?
.text-color {
color: $light-green;
}
.text-color:hover {
background-color: red;
}
should that wokr
work
try to use a hosting image site instead like imgur
@pialise what you working on?
@caleb272 no I don't think you can add a pseudoclass for a class
o ok
you need to add it to an HTML element, like an anchor tag
like a:hover, or li:hover
@wearenotgroot Show Local Weather-page
@wearenotgroot Really frustrating to find that it's all my fault. But I guess I learned a lot :)
@coymeetsworld Will do thanks
jamesthemonkeh sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 290 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
@pialise well, machine just do what we ask so :smile:, dont worry you'll get the hang of it
np
can someone look over the code i seem to be able to change the text color on hover but not the background color
@caleb272 just add background:value on a:hover
it still doesn’t work
@caleb272 your values are not right, there should be no $ sign
either a predefined name like red, or a hex color which precedes with a #, like #FFF;
ya there is a predefined orange
at the top
is there something im missing
ive never seen that before
what
are you sure that's valid CSS?
variable declarations like that
actually, any variable declarations
ya as you see i use them throught the project
even when i do orange instead of $orange it doesn’t work
yeah i guess so
@caleb272 add !important
@caleb272 to force it
to what
oh @caleb272 its background-color, not background
@caleb272 background:orange!important
thanks @wearenotgroot that worked
caleb272 sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 913 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@caleb272 :+1:
@coymeetsworld thanks
caleb272 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star: 291 | @coymeetsworld | http://www.freecodecamp.com/coymeetsworld
one more thing when you press on it how the color changes, how do i change that color
think it should be click
or active
click is JS
thanks it was visited
Hi, I am two challenges short of getting the FrontEnd Dev Certificate, so I naturally started tbinking about what’s next. I just noticed that Data Vizualization curriculum is incomplete for the moment. Should I start with backend and do Data visualization after it or should I do the proposed order?
^ congrats how long have you been working at it
@pedronfigueiredo
personally i would go to backend unless you like data visualization but then again I’m still working toward my fornt end certificate
*front
I started Friday the 22th of January :) @caleb272
@caleb272 can you give me your personal view of what are backend and data visualization respectively?
so about a month nice you have been kicking ass i started 6 days ago and im going into the 2 hour ajax once i get my portfolio done
and im not too sure what you use data visualization i know it would be in the realm of processing user data to find stuff out
but for backend thats like making forms, databases, login stuff its the stuff that runs on the server
i hope that answers your question
@pedronfigueiredo
@caleb272 thank you caleb!
pedronfigueiredo sends brownie points to @caleb272 :sparkles: :thumbsup: :sparkles:
:star: 272 | @caleb272 | http://www.freecodecamp.com/caleb272
Where does FCC suggest that we learn React from?
Gm, on wikipedia viewer (http://codepen.io/virtualmason/pen/dGBbba?editors=0010) am not sure how to read the response back from server to display anything. I can't seem to access info. how do I read this stuff?./*/jQuery11200017717666923999786_1456059964841({"batchcomplete":"","query":{"normalized":[{"from":"coding","to":"Coding"}],"pages":{"40892":{"pageid":40892,"ns":0,"title":"Coding","revisions":[{"contentformat":"text/x-wiki","contentmodel":"wikitext","":"{{wiktionary|coding}}\n'''Coding''' may refer to:\n [[Channel coding]], in coding theory\n [[Line coding]]\n [[Computer programming]], the process of designing, writing, testing, debugging / troubleshooting, and maintaining the source code of computer programs\n The process of [[Statistical classification]] of information\n [[Coding (social sciences)]], refers to an analytical process in which data, in both quantitative form (such as questionnaires results) or qualitative (such as interview transcripts) are categorised to facilitate analysis\n [[Coding (therapy)]], a controversial therapy used to treat addictions\n [[Legal coding]], the process of creating summary or keyword data from a document. It is widely used in the legal profession to create a fast-search index or database of documents for use in litigation\n A [[coding strand]] of DNA is translated into a protein product\n [[Code Blue (emergency code)]], which is a patient in Cardiac Arrest or Respiratory Arrest\n\n==See also==\n [[Code]], a rule for converting a piece of information into another form or representation \n [[Entropy encoding]], a lossless data compression scheme \n [[Source coding]]\n [[Medical coding]]\n [[Secret Coding]], Use to communicate secretly among the persons who knows the code\n\n{{disambiguation}}"}]}}}})
:bulb: to format code use backticks! ``` more info
@virtualmason that query, it's not a search query, is it?
@virtualmason once you've got a search query, you just access the title the way you'd access anything in an object
Thank you stormgrass. I'm taking a look at it
Basically it's what FCC tells us in the few API and JSON challenges.
Not much different than going through the openweathermap API result
Wiki Viewer: http://codepen.io/leprekon91/pen/qbzOjZ why cant i get the json object?
no wiki entry for:
viewer httpcodepenioleprekon91penqbzojz why cant i get the json object
@leprekon91 your json is missing a callback
callback=?
Hello world
welcome to FreeCodeCamp @mbrad26!
@kirbyedy thanks!!!
leprekon91 sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 513 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
Hi guys! I'm a bit stuck on my Weather app. I've dynamically created 2 anchor tags so the user has the possibility to choose between Celsius and Kelvin. The problem is that I can't manage to update the temperature display based on their selection. I can update the temperature on load or on search button but not on the anchor tags. http://codepen.io/mbrad26/pen/eJaGRL?editors=0011
I'm constantly having trouble trying to center elements. Can someone tell me how to center the social icons on my portfolio page?http://codepen.io/mikenaza/pen/yeWZZx?editors=1100
Did anyone try to combine smooth scroll and scrollspy for the portfolio page?
@mikenaza Try use the Bootstrap grid.
@mikenaza you have to center the ul
but keep in mind that it will affect your menu items as well, so maybe you should give it an id and then center it
Ok...now I've seen the problem. Wrappe the ul in a div
@kirbyedy do I use the "text-align" selector?
Ahh ok
yes, but on the <ul>
Put the ul in a div with class text-center.
It worked!
@mbrad26 @kirbyedy thanksguys
@mbrad26 @kirbyedy * thank you
mikenaza sends brownie points to @mbrad26 and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 514 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
:star: 281 | @mbrad26 | http://www.freecodecamp.com/mbrad26
You're welcome!
Hi guys! I'm a bit stuck on my Weather app. I've dynamically created 2 anchor tags so the user has the possibility to choose between Celsius and Kelvin. The problem is that I can't manage to update the temperature display based on their selection. I can update the temperature on load or on search button but not on the anchor tags. http://codepen.io/mbrad26/pen/eJaGRL?editors=0011
guys some feedback would be nice for my tic tac toe game :D, I will reconstruct the control panel but it will do for now
@KokoChris i see the simon game challenge not the tic tac toe one
yeah sorry gxenos :P
so guys i am doing the random quote machine challenge.does anyone know if i should get the quotes from an api or i should just have some quotes in an array?
@gxenos how ever you like
@KokoChris if i have the quotes in an array,i am thinking that every time someone hits the button to get a ney quote i should generate a random number that corresponds to a position in the array.is this right?
@mbrad26 the issue is that your click handler is set for an element that you're creating dynamically. (the .celsius class element does not exist in the DOM when the page is initially loaded). your solution is to slightly adjust the click handler:
// change
$(".celsius").on("click", function() {
// to this
$(".temperature").on("click", ".celsius", function() {more about the problem here, for example: http://stackoverflow.com/questions/6658752/click-event-doesnt-work-on-dynamically-generated-elements
@mbrad26 the above being said, your current approach is not ideal. when changing the temperature units, you're trying to poll the API again which is unnecessary. you've already called it once and have all the data needed available. during your first API call, save the retrieved weather object into a variable and inside the temperature changing click handler use the temperature from the weather object instead of calling the API again
i gotta run, but hopefully this will point you in the right direction
@gxenos this sounds about right:D
@h4r1m4u Thanks
mbrad26 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1450 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
That makes sense.
@KokoChris right,but when i generate the random quote how can i be sure that when someone clicks the button again they dont get the same quote?
Anyone able to glance at a codepen for me? I'm having some browser version issues. Some people are reporting seeing scrollbars and I want to make sure I've gotten rid of them. (they aren't appearing on mine.)
Here's the pen:
http://codepen.io/BenjaminDowns/full/xZoENj/
http://codepen.io/BenjaminDowns/full/xZoENj/
@gxenos you can store the previous quote temporarily and if the next quote is the same get another
@jnmorse good quick fix thanks!
gxenos sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 407 | @jnmorse | http://www.freecodecamp.com/jnmorse
Good evening all - I’m just about finished with my portfolio and there is one last feature I want to get on there: I want the navbar tab to become active depending on where the user has scrolled on my page. I’m pretty sure this is a jQuery maneuver… but I can’t figure out how to get it going. Here is my code: http://codepen.io/bkilrain/pen/eJXorr
@BenjaminDowns are you talking about where the results are getting displayed? if so if the result is long enough there are scroll bars probably cause of the max-height on the div. also I thought the goal was to display a list of articles?
@jnmorse
Cool. If you aren't seeing scroll bars except for within that one div, that's perfect. Somebody else mentioned scroll bars outside of that and along the bottom in their browser, so I tweaked some things.
Yes – I'm doing a modified version. Eventually I'll add the list of articles, but I wanted content to appear too.
Heya. For my weather app, it isn't asking me for location permission/showing the temperature on my laptop. However it is working fine on my girlfriend's iPhone.
How's it working for everyone else?
Did I do something wrong?
It finds my temp
maybe you previously denied your browser access to your location
@BenjaminDowns there isn't when I view it full screen, but if shrink the window there is. If you want to somehow constrain the content might look at trying use vh(view height) and vw(view width)
@mca62511 what browser are you using?
I'm using Chrome on a Chromebook
@jnmorse Perfect. I don't want to constrain it; I just didn't want scroll bars showing up unnecessarily right away.
@jettcrowson I thought of that, so I launched it in an incognito window. It didn't offer again.
hi guys!What does the maximum call stack exceeded error mean?
moves.push(new move());
moves[i-1].pos = temp[i];
if(winO())
moves[i-1].score = 10;
else if(winX())
moves[i-1].score = -10;
else {
var temp2 = temp.filter(function(val) {
return val !== temp[i];
});
return select(temp2, "O")
}
not this
@jnmorse thanks again for checking.
benjamindowns sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 408 | @jnmorse | http://www.freecodecamp.com/jnmorse
@pringon That means you got stuck in a recursive loop.
@mca62511 check if you have block the location in the past
@BenjaminDowns oh, ok thanks
pringon sends brownie points to @benjamindowns :sparkles: :thumbsup: :sparkles:
:star: 214 | @benjamindowns | http://www.freecodecamp.com/benjamindowns
@mca62511 If you have httpseverywhere extention, you may want to disable it or uncheck codepen from the drop down, on the extension, it was preventing the ajax call from happing for me some time ago
Could someone help me with a small problem on my codepen for the wikipedia viewer? The search seems to work when I'm in the small code view, but in the full view, it does not. http://codepen.io/jettc/pen/NxmEGO
@gxenos how can I check that?
@jnmorse I do not have that extension, but good thought, thanks.
mca62511 sends brownie points to @jnmorse :sparkles: :thumbsup: :sparkles:
:star: 409 | @jnmorse | http://www.freecodecamp.com/jnmorse
@mca62511 check on the right of the url
@jettcrowson That is strange indeed. I just took a look, but nothing stands out to me.
@gxenos Nothing unusual to the right or left of the url
@BenjaminDowns Yes I've looked it over a few times and I see no reason why it shouldn't work
@mca62511 i mean next to the bookmark star
@gxenos I figured, nothing there but the bookmark star
@mca62511 well,it works for me.do you have another browser to try it to?
@gxenos I'll boot up my old laptop and try it there. But even if it does work I still want to know why it won't work on my Chromebook
@mca62511 go to chrome settings and check the location settings
@mca62511 Settings > Show advanced settings> Content settings in the privacy section
I have it set to ask me
And when I checked exceptions, all the codepen.io exceptions were set to allow
I'll try checking the console and see if it is giving me any errors, sorry I should've checked that before asking
Well, Chrome is telling me this in the console,
getCurrentPosition() and watchPosition() are deprecated on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS. See https://goo.gl/rStTGz for more details.
But I saw that warning before back when it was working.
To be clear, it was working fine a few days ago.
@mca62511 i have no idea whats happening.sorry
@gxenos Working fine on Google Chrome on my Windows laptop.
@gxenos Well thanks for the effort at least
mca62511 sends brownie points to @gxenos :sparkles: :thumbsup: :sparkles:
:star: 282 | @gxenos | http://www.freecodecamp.com/gxenos
Just tried deleting local cached data, no dice
More weirdness, it doesn't work on my Android phone either
@mca62511 Hi. Can I get the link?
can someone help me figure out how to align the footer text left a bit so its in line with the container?
and the other left most texts above?
Question, is there a way in HTML to build an anchor link with text that is somewhere else in the page?
Oh, I can assign it through Javascript.. can't I?
nvm figured it out
@Zera99 what you referring to is a jump from one part to another, within the same page :smile: http://www.htmlgoodies.com/tutorials/getting_started/article.php/3479511
@max77p those are the best problems :wink2:
@tommygebru haha yea, love it
@tommygebru No no, I meant change the anchor's href attribute. Did it with Jquery and some string concatenation xP
@BenjaminDowns It works in debug mode though? http://s.codepen.io/jettc/debug/NxmEGO
indeed. strange.
(small tip - add target='_blank to your links so they open in a new tab.
oops -
target="blank"
(needed both quotation marks)
hi guys, i found that the first algorithm challenge (reverse a string) is already solved, is it normal?
@Orballo If you are using a computer that someone else has used, or if you have viewed someone else's solution, then yes.
@Orballo The solutions are saved in localStorage on your browser
@Orballo You can click the Reset button to clear it.
still can't get this to show on my Chromebook. Does anyone else have a Chromebook?
hey,does anyone know how to make a link open in a new tab in codepen?
@SaintPeter maybe I had view another solution, thank you!
orballo sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2533 | @saintpeter | http://www.freecodecamp.com/saintpeter
@gxenos <a href="url" target="_blank">Link</a>
the target="_blank" is what does it
@mca62511 thanks!
gxenos sends brownie points to @mca62511 :sparkles: :thumbsup: :sparkles:
:star: 337 | @mca62511 | http://www.freecodecamp.com/mca62511
can someone help me attach the toggle panel to the right of the picture or help me figure it out?
on the about page...the panel is not complete i just want to get the click to slide the panel thingy attached to the picture
flush with the picture
what do you guys think about my twitch.tv api template so far? :D http://codepen.io/Fuzyon/pen/eJwmVv
@Fuzyon looks great!
anyone please?
@otmeek thanks, now to the harder part: building the script, haha
fuzyon sends brownie points to @otmeek :sparkles: :thumbsup: :sparkles:
:star: 357 | @otmeek | http://www.freecodecamp.com/otmeek
@max77p seems like you figured it out?
@Fuzyon good luck! I really like that you're adding a search feature. Looking forward to seeing the completed version
hey all
I'm having the most unusual problem with a while loop
function myFunction() {
var result = "invalid";
while (result=="invalid")
{
var xoro = prompt("Do you want to play as X or O");
xoro = xoro.toLowerCase();
if (xoro == "x" || xoro == "o") {
document.getElementById("demo").innerHTML =
"You are playing as " + xoro;
result = "valid";
}
else
{
alert("Invalid input");
}
}
i basically want it so that if you enter x or o, cool
otherwise, nope! you need to try again
but when the while is there, it never even runs a prompt!
could anyone help me how to get apis. I am doing the weather app and am stuck. dont know how to proceed to get api's. I have managed to get the location and now I want to use the location to get the weather for that location.
@h4r1m4u only the sliding part, but i can't figure out how to make the toggle panel flush with the right side of the picture
so its attached to the picture
@gordondavidescu you're missing a closing brace to the function:
function myFunction() {
var result = "invalid";
while (result=="invalid")
{
var xoro = prompt("Do you want to play as X or O");
xoro = xoro.toLowerCase();
if (xoro == "x" || xoro == "o") {
document.getElementById("demo").innerHTML =
"You are playing as " + xoro;
result = "valid";
}
else
{
alert("Invalid input");
}
}
} // ADD THIS
@h4r1m4u wow thank you
gordondavidescu sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1451 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
that being said, don't use "invalid" and "valid". that's what boolean is for
use
true and false
oh right
heh
:)
here's me trying to REINVENT THE DAMN WHEEL
Just opened up the Personal Portfolio Webpage project. Have to be honest...feel that I don't even know where to start. Have the previous exercises up until now fully prepared one to dive into this project (which seems darn complex)? Maybe something I'm missing?
function myFunction() {
var result = false;
while (result===false)
{
var xoro = prompt("Do you want to play as X or O");
xoro = xoro.toLowerCase();
if (xoro == "x" || xoro == "o") {
document.getElementById("demo").innerHTML =
"You are playing as " + xoro;
result = true;
}
else
{
alert("Invalid input");
}
}
}
}
@PowersCoding start with the first < then continue :)
:smile: Thanks @wearenotgroot
powerscoding sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 917 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
@PowersCoding just take similar approach as the last one but this time more flashy(not too much though)
@PowersCoding read up and practice on bootstrap if you want to use it
@wearenotgroot But even the nav elements.. Has that been covered previously?
@PowersCoding ---------->http://getbootstrap.com/components/
@PowersCoding dont think so, but the example is easy enough to follow on the site
@wearenotgroot Thanks for the link to the components list.
powerscoding sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: powerscoding already gave wearenotgroot points
@PowersCoding remember you dont have to finish the portfolio page to do other project :smile: . you can constantly update it as you go
@wearenotgroot Good to know!
@max77p CSS:
#flip {
position: absolute;
transform: rotate(-90deg);
display: inline-block;
bottom: 135px;
left: 155px;
}
.picture {
padding-top: 150px;
position: relative;
}HTML
<div class="picture">
<img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
<div id="flip">
<h3>Click to slide the panel right</h3>
</div>
</div><!--end of picture-->(notice that #flip is nested inside .picture now)
@h4r1m4u thanks...so i actually kind of figured the alignment out
max77p sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1452 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
but the actual slide from left to right when user clicks on the panel...when you click, it kind of starts from bottom then comes to right
how do i make it so that it slides from the actual panel? @h4r1m4u
i'm not sure i fully understand. you want it to slide from the 'button' that you click?
what is going wrong here, trying to float the carousel so text wraps around it, but it doesn't even seem to be inside of the jumbotron div
@h4r1m4u yes, so right now i have it so that when user clicks the "click here to slide right", the content slides right
however, there is a small issue...even though the content slides right, it starts from the bottome then goes right
if you try it, you can see this...its kind of weird
Hi everyone, I joined freeCodeCamp couple of days back
just completed the Tribute Page
any feedback?
I couldn't get the image to completely fill without the white border, any suggestions?
I'm having trouble getting .json sources to work in my code... for example when I stringify a JSON URL, some work, some don't
This does NOT work
var jsonLink = "http://thoughtsoncoding.com/api/1.0/random.json";
$.getJSON(jsonLink, function(json) {
$(".quote-line").html(JSON.stringify(json));
});This does work
var jsonLink = "http://www.freecodecamp.com/json/cats.json";
$.getJSON(jsonLink, function(json) {
$(".quote-line").html(JSON.stringify(json));
});Any ideas?
@max77p add this. CSS
.title {
padding-top: 30px;
display: inline-block;
max-width: 70%;
position: absolute;
left: 346px;
top: 0px;
}and nest .title inside the .picture
<div class="picture">
<img class="img-circle img-responsive" src="http://a5.files.biography.com/image/upload/c_fill,cs_srgb,dpr_1.0,g_face,h_300,q_80,w_300/MTE5NTU2MzE2NjUyOTk2MTA3.jpg" class="art">
<div id="flip">
<h3>Click to slide the panel right</h3>
</div>
<div class="title">
<p class="lead">I'm a <a class="link" target='_blank' href='http://www.freecodecamp.com/map'>self taught</a> web designer, developer, co-founder and entrepreneur based in Finland.
<br> I'm currently part of a small web development
<br> team in an upcoming start-up, building web and
<br> mobile applications.
<br>My passion is to use technology based
<br> solutions, to help solve real world challenges.
<br> Competences:
<br> Languages and Frameworks:
<br> Javascript, HTML5, CSS3, jQuery, Bootstrap3,
<br> Angular.js, Meteor.js.
<br> Tools & expertise:
<br> Git, Responsive Web Design, Agile
<br> Methodologies.</p>
</div>
</div><!--end of picture-->
that said, this will be really problematic to get working properly on mobile
why is that?
because of all the absolute positioning
you can try to play with it and set the position in % instead of px, see how it comes out
but the rotated 'button' just makes the entire layout quite difficult
@hynso first is returning an object, second is an array of objects , i dont think you need to stringify the first, try it
@calicode nope... just passing
json to the html() function didn't work either
@hynso actually the first call fails because of the cross-domain request issue. change it to this:
var jsonLink = "http://thoughtsoncoding.com/api/1.0/random.json?callback=?";
$.getJSON(jsonLink, function(json) {
$(".quote-line").html(JSON.stringify(json));
});
ah yea you need to use jsonp right?
yep
@calicode as to your issue:
.jumbotron p {
margin-bottom: 15px;
font-size: 21px;
font-weight: 200;
float: left;
}
unless you float the p as well, it still takes 100% width of the jumbotron and hence the floated carousel gets positioned below it
yo guys how can i make the buttons in my pen repsonsive so they look good in any resolution?
@h4r1m4u @calicode Still nothing
@hynso see what your dev console says if anything then checkout json with padding, might need to refactor a lil bit more. Sorry i've only messed with very basic json.
Possibly stupid question, but I still haven't found a simple answer. How can I vertically align a block of text or a responsive image within a page (page being a <section> in my case)? There has to be a simple solution to this...
Hey guys, I'm planning to release a web application that connects creators with their target market. The MVP(minimal viable product) it's almost finished and I'm looking for a few testers for the app. You can be a programmer, web designer or game developer as long as you have something that you want to display to the world, you'll gain valued feedback on how to improve it. This is something I started off as a personal project and I'm not looking to initially make money off this or anything so please don't ask how I plan to monetize it. I created a brief landing page at http://www.siliconup.com and if you could sign up for the Beta program, I'd highly appreciate it. You could use it to display your freecodecamp work, however I'd hope it's for something more unique, rather than freecodecamp work, so more personal projects of yours. If you want to help me out by becoming a beta tester, I'll include a link at the bottom, you'll be updated weekly on everything and hopefully it turns out well. I need beta testers to help me determine the new features on the website, how it should look and feel and what necessary mechanisms are needed to make it run. If you could share this with your friends, it would be awesome. Also if you have any personal projects, it would be awesome for you to sign up, as once it's goes live (beta) I 'll need you to upload your projects so it can be shared. Link ----- http://www.siliconup.com
@hynso i can't get it to work either. typically you can grab the json file with the JSONP request (which is what the added callback=? does), but this site just gives me a '403 forbidden' error. i don't think it's quite ready for these requests. you could try to drop an email to the guy behind it and ask how you're supposed to grab the JSON file
@h4r1m4u so i got the look i kind of wanted, but regardless you were right about the mobile
how can i maintain same look as it is right now on desktop when i view it on mobile?
@AaronKazah no offense, but having only a mailchimp signup form for on the landing page is not exactly giving me confidence. it borders on spam/email harvesting to me. i'd suggest you update that page asap if you actually want to get some people sign up, ideally with screenshots and description of your MVP. a short video demonstrating how it works would be even better
@max77p you'll want to look up CSS media queries, so that you can apply different styles/rules to those elements on different screen resolutions
@h4r1m4u thanks
max77p sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: max77p already gave h4r1m4u points
hey all -- i feel a bit overwhelmed by tic tac toe
here's where I am
(aka not far)
I want to be able to make the tiles clickable?
@gordondavidescu give all tiles some common class, for example,
tile and use jquery to handle onclick event like this$('.tile').on('click', function() {
// your code
});
@gordondavidescu are you happy to use jquery? if so, import it into your codepen and then
$('#board div').on("click", function() {
// do something
});
lol, snap
@tvotyakov and @h4r1m4u you are both beautiful
:D
:)
ok check it
shouldn't it... make something happen when you click
like run the alert
in theory?
@gordondavidescu first, you need to actualy invoke the newGame() function. right now you only have it defined. so all the way at the bottom of your code add
newGame();
I call newgame from the button click
it's part of the button click action
you click new game, it asks if you want to be x or o, you answer correctly, it calls newgame()
oh, i'm sorry, i didn't see that
:)
@gordondavidescu you are not include jquery.
oh oops
yeah, @tvotyakov is right
but also, you don't want to nest the click handler inside the playerTurn function. you want it the other way round:
$('#board div').on("click", function() {
playerTurn();
});
function playerTurn() {
// do something
}
oh good point.
the game will be in a 'waiting state' until the player clicks the tile at which point the click handler will fire
Too right you are
I've seen a few people's codes and they are humongous
yeah, mine's about 200 or 300 lines i think
dang
After making my images(butons at bottom of my page) change on hover, I lost the ability to use bootstrap for responsiveness when resizing browser. Does anyoneknow a work around for this? Someone sudgested using media queries or javascript. But I am not familliar with either of those. Any information would be a great help.
http://codepen.io/reacorbett/pen/EPzmqY
http://codepen.io/reacorbett/pen/EPzmqY
@h4r1m4u thanks dude
aaronkazah sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1453 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
I appreciate it
I'll make the changes soon
:thumbsup:
and it's meant to be stealth, in terms of pictures I was wanted the Beta users to sign up first
and they get to ultimately determine how it looks
@h4r1m4u why mailchimp though, people can unsubscribe if they wish to, and it also requires them to verify their emails. So I don't get their emails if they don't verify it
it would be spam, if I continually send hundreds of emails no?
so now I can click anywhere and it pops nicely... but every single area clicked is considered equal, which is no good
hey i'm working on 'build a tribute page' how do i link to the image without looking at the example code?
to which image are you trying to link?
@Matt-HK I think the idea is for you to use your own image
yeah that as well
@Matt-HK ... because you're making the tribute to someone you admire
ah, makes sense thank you
For random quote generator, why doesn't my button retrieve NEW random quotes? It works the first time, but then stops retrieving new quotes...
http://codepen.io/hynso/pen/JGQbVg
http://codepen.io/hynso/pen/JGQbVg
@bohemian83 I don't know if someone answered your question already but I used the class "center-block" to align my picture in middle
hey guys when i shrink my window i can't seem to open my navbar
can someone tell me what i missed?
on full screen i can see all the links in my navbar, but when i shrink it, i can't access the links, clicking the navbar doesnt seem to work
I'm about to have a stroke
it suddenly stopped working
it should pop up an alert when you click
@max77p you aren't including bootstrap javascript anywhere
@Subalee ohhh i have to add that in javascript ic..damn such a simple mistake. thank you!
max77p sends brownie points to @subalee :sparkles: :thumbsup: :sparkles:
:star: 148 | @subalee | http://www.freecodecamp.com/subalee
I cant make my columns appearnext to each other instead of stacking on top. Any ideas
@bonchanm try bootstrap grids
Yeah thats what i mean
They stack on top
anyone
@gordondavidescu when I click the "New Game" button I get an alert box.
it was working like five minutes ago
@gordondavidescu same here
yes, which should then allow you to click on the grid
i get alert when i click the new game
anyone who can help me with bootstrap vertical alignment?
@gordondavidescu you may have clicked the box that prevents alerts from poping up.
I didn't tho
@bohemian83 try googling vertical align display: table-cell
you click new game, the alert pops
you type in x or o and it changes the status of turn to "player"
@gordondavidescu yeah the new game alert works, the grid alert doesn't work for me either
if turn = player, and you click in the grid, it should pop a different alert
@Subalee thanks, I think I tried that a couple of hours ago, but I will try again.
rather if turn = "player"
:star: 149 | @subalee | http://www.freecodecamp.com/subalee
bohemian83 sends brownie points to @subalee :sparkles: :thumbsup: :sparkles:
this is so ridiculous, it was JUST working
i took off the conditional, it STILL doesn't work
clicking in the grid should make it pop an alert
@bohemian83 I usually use that, requires some bit of hacking... there are other options but it all depends.. if you know the height a position aboslute might be an option, i think you can also use display: inline-block; and vertical-align: middle, or flexbox if you don't need to support older stuff
@gordondavidescu So i've tried adding an else to your if with different alert and that works, so i think what the problem is that after you start a game the turn is not set to player?
@gordondavidescu check your console, you have an error.
player needs to be global or passed into your playerturn() function
The thing is I could use absolutes, but then it would mess up my formatting in the bootstrap grid for smaller sizes.
@gordondavidescu as it is when
playerTurn() is called the var player is not defined.
oh you are so right
thanks @MattYamamoto
gordondavidescu sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 922 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
I used padding-top to bring the elements lower, but again, once I make the page smaller it messes up the whole ting
thing
shoot though
look now
alert("hi " +player);
AGGHGHHHH
I just removed everything conditional from the click
any click in the grid should make it work now
but it's not
@gordondavidescu I don't see a change regarding the scope of your
player variable (I'm not refering to the string "player"). At line 2 define player in the globla scope, var player;, then at line 5 get rid of the "var" so that you are setting the global variables's value instead player = "z"
yup
@gordondavidescu you have an issue, because you use global variable
player inside your onclick handler, which is not exists.
YES
I have a hard time with the console because I'm on a tiny chromebook
I just opened it
var turn = "nope";
var player = "z";
function newGame() {
var result = false;
turn = "player";
this is what the other guys mean
Yeah. I feel super silly now.
thanks @Subalee and @tvotyakov
gordondavidescu sends brownie points to @subalee and @tvotyakov :sparkles: :thumbsup: :sparkles:
:star: 151 | @subalee | http://www.freecodecamp.com/subalee
:star: 236 | @tvotyakov | http://www.freecodecamp.com/tvotyakov
guys do you use media queries to make your website more responsive to mobile?
time to return to full parenting attention so this baby doesn't fling herself off the high chair
@gordondavidescu (y)
@gordondavidescu that was supposed to be a thumbs up, doesn't seem to work here though
@max77p I use media queries. For some guidelines on what settings to use, twitter bootstrap is a good example.
Hey guys! I'm working on calculator project but I'm having a hard time. Does anyone knows why when I concat string + dot (.) the dot go to the first position instead of the last position? http://codepen.io/julianasobreira/pen/PZypGQ?editors=0010
Hello to all! Can anyone help me? I'm currently working on the "Campers Leaderboard" project. I'm trying to parse data from http://fcctop100.herokuapp.com/api/fccusers/top/recent using jQuery. Here is the code responsible for this part:
var fccUsersData = [];
$.getJSON("http://fcctop100.herokuapp.com/api/fccusers/top/recent", parseCampersData);
function parseCampersData(campersData){
for (var i = 0; i < campersData.length; i++){
fccUsersData.push({
camperId: i+1,
camperName: campersData[i].username,
camperPointsLast30Days: campersData[i].recent,
camperPointsTotal: campersData[i].alltime
});
}
}But it doesn't work. No result at all. What am I doing wrong? Here is link to my project on CodePen: http://codepen.io/skosterin88/pen/LGawaK
To be more precise: I want the
fccUsersData array to be filled with the data which I then will display in my app using ReactJS.
@julianasobreira you have direction set
rtl for the .visor class, which is a parent of your .operation div
@skosterin88 the code you posted is working fine, stick a
console.log(fccUsersData); at the end of your parseCampersData() function and you'll see it's all there. The issue you're having is an asynchronous one. I don't know anything about react, so I'm not sure I can help much as I'm not sure how they handle that. There may be a react method that you should use instead of jQuery's $.getJSON()
Like the code below? This is a part of my atual code css.
.visor {
margin: 10px;
height: 80px;
width: 290px;
background-color: #F0F2EB;
font-size: 34px;
line-height: 80px;
text-align: right;
padding: 0 10px;
vertical-Align: middle;
overflow: auto;
overflow-y: hidden;
direction:rtl;
}
@julianasobreira yeah, get rid of the
direction: rtl;
@MattYamamoto That worked! Thank you. :)
julianasobreira sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 923 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
@julianasobreira I assume you had that there for a reason at some point, but the
rtl is a bit strange in it's behavior, so if that effect ends up being something you need I recommend doing it your self by manipulating the array/string in question.
Good evening all
I have a question about the pomodoro I work on.
@skosterin88 maybe this will be helpful? http://stackoverflow.com/questions/32817442/how-to-bind-data-from-getjson-to-reactjs-state
I created an object for the countdown using one method to start the interval while another is supposed to execute the clearInterval
it seems though clearInterval requires a variable that the interval runs in. when I do that it doesn’t work.
@cpheimbach link to your pen?
var countdown = {
timer: new Date(0),
showMin: function() {
return addZero(countdown.timer.getMinutes());
},
showSec: function() {
return addZero(countdown.timer.getSeconds());
},
set: function(minutes) {
this.timer.setTime(minutes * 60 * 1000);
console.log("Time set: " + countdown.timer);
},
start: function() {
setInterval(function() {
countdown.timer.setTime(countdown.timer.getTime() - 1000);
}, 100);
},
stop: function() {
clearInterval(countdown.start);
}
};
@MattYamamoto It’s a bit messy outside the object as this is my test pen
already thank you in advance for having a look mate!
@MattYamamoto Yeah! I was using it because if the user include a really big number will appear a scroll on that direction. But when I type a dot it becomes really strange. I totally forgot about the rtl, haha! I will study a better approach. Again, thanks!
julianasobreira sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:warning: julianasobreira already gave mattyamamoto points
I guess the clearInterval(countdown.start); is not really addressing the variable that setinterval needs
sorry the variable that clearInterval needs
@cpheimbach correct, that's because countdown.start is the function that is holding the setInterval call. you'll need another object property to hold the ID returned by setInterval I think.
ok i tried a simple one and declared within the start function the variable “a” and made this the setInterval. When then using clearInterval(countdown.start.a); it didn’t work either.
@cpheimbach so you made the countdown.start an object holding a property
a and a method? It's hard to comment without seeing what you did. I think you could just create another propert on your countdown object, timerID, and initialize it to 0 or something. then in your start method you could just start: function() {
coundown.timerID = setInterval(function() {
countdown.timer.setTime(countdown.timer.getTime() - 1000);
}, 100);
},
stop: function() {
clearInterval(countdown.timerID);
}
ah that is interesting
hold on I work on it and send you an update shortly
@MattYamamoto thank you already for the input!
cpheimbach sends brownie points to @mattyamamoto :sparkles: :thumbsup: :sparkles:
:star: 924 | @mattyamamoto | http://www.freecodecamp.com/mattyamamoto
@MattYamamoto that did work.
I like your style. cheers!
This message was deleted
how do you made the code look nice again?
wiki format
:point_right: code formatting [wiki]
Inline code
This an inline `<paste code here>` code formatting with a single backtick(`) at start and end around the code.
Code Block
```js ⇦ Type 3 backticks and then press [shift + enter ⏎] (type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
Hi, I'm a little confused as to how to call an api and use it in javascript. Can anyone look at my code and tell me how I would make the ".city" class's html change to the city provided from the api I'm trying to call.
$(document).ready(function() {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var lat = position.coords.latitude;
var lon = position.coords.longitude;
lat.toString();
lon.toString();
var location = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon;
$getJSON(location, function(json) {
$(".city").html();
});
});
}
});
@narkeeta try and print to console------>console.log(json) and study the json you get
okay
@narkeeta another thing dont forget to add the api key on the url
@wearenotgroot what would that be? sorry I'm struggling with the api concept
@narkeeta didnt you register on openweather and get api key?
@narkeeta have a look here http://openweathermap.org/appid
@wearenotgroot Oh, okay thanks!
narkeeta sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 924 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
you need to sign up for an api key which you then use as part of your url in the request
the openweather site gives you examples of what a request url would look like with the key included
so i had initially created the quote generator using an array of quotes but i think with the realligned curriculum they want us to use twitter API or something to generate quotes..can anyone look at my code and see how i can do that? i have no idea..
http://codepen.io/pawan92/pen/zrPwbP
http://codepen.io/pawan92/pen/zrPwbP
@pawan92 edit the href of the <a> for the twitter button
When I run this code it gives me an input in the console saying getJSON isn't defined, what would be the problem here?
@pawan92 in the href you add the quotes you generated
var location = "api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +"=a8da1aa951cdecc4c121db10e2455ffd";
$getJSON(location, function(json) {
$(".city").html();
$console.log(json)
});
@narkeeta did you get the api key?
@narkeeta do you have Jquery loaded ?
@mutantspore yes
@narkeeta should be added like &appid=your api key
@wearenotgroot okay, thank you so much
narkeeta sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: narkeeta already gave wearenotgroot points
@narkeeta also the url should have http:// in front
a question about style
I declare an object countdown and in the methods I interact with it’s properties via countdown.etc
should I rather use “this”?
or is this only for object constructor?
@wearenotgroot what do you mean
@pawan92 oh nvm
var location = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon +"&appid=a8da1aa951cdecc4c121db10e2455ffd";
$getJSON(location, function(json) {
//$(".city").html();
$console.log(json)
@narkeeta your pen?
@narkeeta you forgot the . between the $ and getJSON
and console.log doesn’t need a $
@narkeeta also console.log without the $
merci!
thank you all so much, its functioning now
@pawan92 you already have the tweet button setup correctly :+1: so you are on the clear
@narkeeta YW
@wearenotgroot yea but right now its only cycling through 10 quotes i have manually input. i want to have it get a random new quote from the internet each time
@pawan92 just search for random quotes api and take your pick
Another thing that gets on my tits is when APIs don’t use the correct HTTP response codes!
I find it funny it will say there was a error, yet the status code is 200...
Grrr.
Just noticed I am in the wrong room.
:smile:
@Maakux it's ok, let the frustration out :smile:
:smile:
my z-index does not work and it's so frustrating
@mncode The element will need a particular positioning mode.
What do you guys think of it so far? It's not working just yet, so bear with me: http://codepen.io/DanStockham/pen/LGobvp?editors=1000
absolute, relative like ?
@mncode Yes.
@Maakux Depending on your situation, but one of those is needed to set the z-index of the element.
I just said that to myself...
FAIL.
@Maakux parent div must be absolute and child relative ? or what ?
@mncode It depends what you are trying to do.
@mncode If you just want to set the z-index of a element, make sure that element’s position is set to absolute or relative.
Ok. thanks you @Maakux
mncode sends brownie points to @maakux :sparkles: :thumbsup: :sparkles:
:star: 62 | @maakux | http://www.freecodecamp.com/maakux
You are welcome.
@Maakux Is it just you with supplyant or are you part of a team?
Part of a team.
I am one of the developers.
Hello, I am struggling to build the simple simon game, what I have so far is that when its simons turn the value of the button that needs to light up is pushed into an array but when i try to have that array repeat it lights up all of the values. Any help will be appreciated.
@Penthious Well, you will need some sort of function that cycles through that array, and replays the ‘light’ animation, right?
function binaryAgent(str) {
newArr = [];
var arr = str.split(" ");
//console.log(arr);
for (i = 0; i < arr.length; i++) {
console.log(String.fromCharCode(arr[i]));
newArr.push(String.fromCharCode(arr[i]));
// console.log(newArr);
}
str2 = newArr.join(" ");
return str2;
}
binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111");function cycle() {
for (var i = 0; i <= sequences.length; i++) {
// animation here
// maybe a brief pause here
}
}
That is terrible. :smile:
I am trying to get used to the formatting.
var a = 1;
Ah.
hey, does any of you know
why some anchors links don't work in firefox but works just fine in chrome?
why some anchors links don't work in firefox but works just fine in chrome?
function cycle() {
for (var i = 0; i <= sequences.length; i++) {
lightUp(sequences[i]);
// sleep
}
}
@Sami0 That shouldn’t be the case.
@Sami0 Are they links, or do you have an event listener attached to them?
@Sami0 it is too common question. try to watch your console. may be you can see answer there.
yes i tried to loop through it with a for loop but the out come is that all the lights flash at once.
@Penthious You need to have some kind of pause in there. :)
@Penthious If I knew what language you were using, I might be able to assist with that.
o sorry im on javascript
@Penthious Okay, in that case, you could look at
setInterval and setTimeout.
These are functions that allow you to specify a certain interval before the code is executed.
@Maakux no js , just html and css
The differences between the two are simply one is at least called once.
can you give me an example of how i would use them in my loop as I tried a setinteval but the lights would keep flashing in and out.
@tvotyakov ok , I will try
for (var sequence in sequences) {
var timer = setInterval(function(sequence) {
sequence.lightUp(); // call to run the animation
}, 1000)(sequence); // 1000ms = 1 second
clearInterval(timer); // next
}
Something like that maybe?
There is probably a better way to do this with animation queues in jQuery.
yes that helps alot! thanks maakux. now just need to find out how to intergrate that into my code lol
You might have issues with the closure that is created, but I am pretty sure you can inject variables like that into the local scope of the closure.
@Penthious Would be interested in seeing the end result. :)
once i finish it i will tag u to see my simple simon in action
<form class="form-control">
<input type="text" placeholder="cat photo URL" required>
</form>
<button class="btn btn-primary">
<button type="submit">Submit <i class="fa fa-paper-plane"></i></button>
</button>
</form>
</div>Give the submit button in your form the classes btn btn-primary.
Give the text input in your form the class form-control.
These task are still unchecked, what did I do wrong?
@Maakux it might take me a day or two to finish it though. Im about 60% done with it.
Hey everyone, can anyone help me out. I'm trying to make the button element with unit id #unit change my unit variable from "C" to "F" when it is clicked but this isnt working...
var unit = "C"
$("#unit").on("click", function(){
if (unit == "C") {
unit = "F"
};
if (unit == "F") {
unit = "C"
};
});
var temp = 0;
if (unit == "C") {
temp = json.main.temp - 274.1504;
temp = temp.toString().substring(0,4);
}
if (unit == "F") {
temp = json.main.temp - 255.928;
temp = temp.toString().substring(0,4);
}
$(".temp").html(temp + " " + unit);@narkeeta unit will bee always "C" here
if (unit == "C") {
unit = "F"
};
if (unit == "F") {
unit = "C"
};regardless of it equal "C" or "F" in the begining.
oh okay I see it now
Nice spot.
I would use a ternary operator there to clean it up a little.
@Maakux I agree, a ternary operator could clean it up.
I am pretty sure you could elimate that second group of control structures as well.
@Maakux what would the ternary operator be?
@narkeeta in your case it will looks like
unit = unit == 'C' ? 'F' : 'C'
@tvotyakov I think I understand that line of code but where would I put it in my code?
This message was deleted
@arendgb you only need one form element - it can wrap your text input and your submit button - make sure you have both an opening and closing tag!
@arendgb also, you currently seem to be trying to make two buttons, nested one inside the other! Try removing the outer button wrapper and instead adding the classes to the inner button.
@narkeeta instead of this
if (unit == "C") {
unit = "F"
};
if (unit == "F") {
unit = "C"
};
This is my code now, as per advice. However when I click the button in my pen it simple does nothing... is anything wrong?
var unit = "C";
$("#unit").on("click", function(){
unit = unit == 'C' ? 'F' : 'C';
});
var temp = 0;
if (unit == "C") {
temp = json.main.temp - 274.1504;
temp = temp.toString().substring(0,4);
}
if (unit == "F") {
temp = json.main.temp - 255.928;
temp = temp.toString().substring(0,4);
}
$(".temp").html(temp + " " + unit);
});
Here is my pen as of now http://codepen.io/narkeeta/pen/XXxrvY?editors=0010
you will need the rest of the code inside the on click function @narkeeta
otherwise it isn't updating the .temp html when you click the unit button
oh okay
i.e. it looks as though you have an extra function closing in there, just before var temp = 0
because you want all this stuff to happen when you click it
okay I changed that and the button works now but the temp only displays after you hit it....how would i make it show before
you can have the stuff which updates the temp units outside of the onclick as well
okay thank you @githesp
narkeeta sends brownie points to @githesp :sparkles: :thumbsup: :sparkles:
:star: 355 | @githesp | http://www.freecodecamp.com/githesp
as long as you set the default value outside of the onclick!
I would put the part which gets the temperature and updates the .temp html in a function, then you can call it once in your main code, and once inside the onclick
sorry, bad explanation! Hopefully it makes sense now I've edited it :P @narkeeta
Did any other non-USians out there struggle with the phone number validation?
@githesp Ive got it working :)
great!
@lsrus yes, oh my gosh that was frustrating
it seemed so arbitrary as to what was a legit US phone number :P
precisely! well, I feel better now