@AdventureBear - very nice tribute page!
Hello World!
welcome to FreeCodeCamp @priyankamalviya!
I am Priyanka,a graduate student at San Jose State University with keen interest in web development
My passion is getting bigger and I am excited to do the projects free code camp offers
Hello World,
I am Anya, I am a recent software engineering graduate student working at Juniper Networks. I am here because I love front end development and am fairly new to it and wish to learn more. I am very glad to be a part of code camp.
I am Anya, I am a recent software engineering graduate student working at Juniper Networks. I am here because I love front end development and am fairly new to it and wish to learn more. I am very glad to be a part of code camp.
welcome to FreeCodeCamp @sharanyavr585!
Hello @sharanyavr585
and hi @priyankamalviya
how would i best minimize the spacing applied after ah <h2> text element?
@Trayuk you could try and give the next element a low (possibly negative) padding or margin
kk, figured that but i was not sure if there was another way. Thanks @GregatGit
trayuk sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 656 | @gregatgit |http://www.freecodecamp.com/gregatgit
why is it caleed an app?
called
isn't it a page?
I tend to think web pages that are interactive in various ways are more apps.
A static site with less dynamic content I tend to call pages .. or informational at times tend to be pages.. but if it is dynamic, I tend to be app
It is a rather fine distinction at best TBH
what's dynamic in that page?
and the task is called "Build a tribute page"
Ah, I missed that part. Well nothing unless you add something
That is more page than app
Just curious. Does "banned" what I think it means on the "Activity" column to the right of this feed?
Why are they "banned"?
What is the easiest way to place thumbnail photos of the codepen projects onto my portfolio page? is there a way to do a screenshot or some other method? do they need to be hosted somewhere? kind of lost...any ideas?
@caep2015 you will have to host the images somewhere - if you have a codepen pro account ($10 a month) or you can check out amazon or many other sites
@GregatGit Thank you. Not what I wanted to hear, but was expecting. I used to do a lot of image hosting a few years back. Been out of the loop for a while. So was hoping things had changed a bit. I do see a lot of places that offer free stock photos and such for web designers and developers. That part is nice.
caep2015 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 657 | @gregatgit |http://www.freecodecamp.com/gregatgit
@GregatGit I don't have the pro account but I do have amazon hosting so now my question is how to get the screen shot or "box view" of the pens on code pen.
@caep2015 are you in windows
@GregatGit mac but I still have my pc
@caep2015 either is good - change the view of your pen to full page - then just make the window smaller - then take a edited screen shot
try to keep all your screen shots of projects the same size to make formatting easier
Press Command + Shift + 4 all at the same time. - for mac
@GregatGit Got it. Thanks so much : )
caep2015 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: caep2015 already gave gregatgit points
@khaduch thank you (re tribute page)
adventurebear sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1405 | @khaduch |http://www.freecodecamp.com/khaduch
Can i get a little feedback on my portfolio page?
I ended up hosting it in github as opposed to codepen because it wasn't working on mobile via codepen.
@bgeraci714 looks pretty good. The only issue i see is that on mobile it scrolls down too far when the Menu items are clicked on.
Thanks @nawrockp I'll see how to best change that. Do you mean with the nav bar moved down?
bgeraci714 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 332 | @nawrockp |http://www.freecodecamp.com/nawrockp
@bgeraci714 yes But also when closed. Let me see if i can attach a screenshot.
How do i get my <a> background-colour to take up the full size of it's parent? http://codepen.io/kingdezz/pen/zBzBaZ?editors=0110
@bgeraci714 yeah gitter doesnt seem to support pasting images, but here is a link: http://i.imgur.com/sqvaEuv.jpg
I know that is a common problem when scrolling to anchors. I think there is a good solution on stack exchange
@96street 0
I am on a phone so i cannot inspect your pen. But chances are the parent element has padding or the a element has a margin.
ahh yep you're right i replaced padding from <li> to <a> and it works now, thanks @nawrockp
96street sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 333 | @nawrockp |http://www.freecodecamp.com/nawrockp
Hi guys I’m pretty new to FreeCodeCamp and Bootstrap for that matter so I’m sorry if this is ridiculously basic. I’ve read the documentation from Bootstrap and searched aound on StackOverflow but I’m still stuck. I’m making my tribute page right now and have multiple rows of pictures. I am trying to center the pictures in each row and Bootstrap says to use the .center-block class on an image using the .image-responsive class. I’ve attempted using this on the img element and its parent div element but neither give me the result of centering the image. The only way I’ve been able to center them thus far is by creating a row and using Bootstrap’s grid system to place empty divs on the left and right of the div element containing the responsive img. Anyone know of how to use the .center-block class or a better method than this? Also, here is my CodePen: http://codepen.io/csteingraber/pen/AXrwra
trying to give a background color to the <div element can anyone help
@rico042002 <div style="background-color: blue;">
can i ask something guys,
when we use settimeout, when we use setinterval ??????????????
when we use settimeout, when we use setinterval ??????????????
@buiphuking settimeout runs once after the amount of time you set. setInterval runs repeatedly, once per amount of time you set
Pl
guys do check it and review it
@vvkgdm you have to work on the positioning, this looks very weird
postioning of what element @kirbyedy
@vvkgdm does this look ok to you ?
ok le mme change it
@kirbyedy look at it now
Hey folks, not related to a FCC challenge but I made a youtube API reader that works fine when i run it on my local drive but when i host it on github the fancybox plugin just opens a blank grey square. Anyone used fancybox? or could you think of an obvious reason it would launch properly when run from my computer but crash when run off a github hosted page?
wait disregard, i think it's a https/http combination issue.
confirmed, just had to change the API call to https:
@buiphuking - a quick answer before I run off -
setInterval for something repeating, like a timer (Pomodoro, for example). setTimeout for a one-time event, or possibly a short series of events such as the Simon game - although I would still use setInterval for that, myself. I hope that helps - gotta run!
Anyone knows how to properly implement bootstraps scrollspy? http://getbootstrap.com/javascript/#scrollspy
Im trying it here: http://codepen.io/zelite/full/zBzrXb/
but does not work =/
Hey, can anyone give me some quick advice on where I should even begin with the tribute page project?
@khaduch hey....!!!
hey guys, how can I change boxmodel?
I want to all my content to be on 50% size of my web.
width: 50% ?
how do you link the pen?
just copy paste the URL in here @Trayuk
perfect, thanks, if more people were on id ask for design advice.
thanks @Athaman
trayuk sends brownie points to @athaman :sparkles: :thumbsup: :sparkles:
:cookie: 511 | @athaman |http://www.freecodecamp.com/athaman
No problem :)
something is wonky with that link
or something is wrong with codepen
i'm guessing the latter
for(var i = 0; i < simon.length; i++) { // make each blink sequentially
(function(i) {
setTimeout(function() {
soundIndex = color.indexOf(simon[i]);
sounds[soundIndex].play();
$("#"+simon[i]).fadeOut(150).fadeIn(150); // make selected slice blink
}, i * 800);
})(i); // make it user's turn to play
}
Guys what is (i) in the snippet
in the end of the function
The i in the end is the index for the first for loop it appears
trying to see how this is being used. Walking through it because it is interesting to me too @Whiplash5057
Hi guys, is there anyone that would be willing to give me some help figuring out how to request an API for my quote machine? This is what I have for the call:
var forismatic = "http://api.forismatic.com/api/1.0/";
$.getJSON( forismatic, {
method:getQuote,
key:"",
lang:"en;",
format: "json"
})
Does this look remotely correct?
@aarontaylor IIFE
@wbac88 I gave up with forismatic as I kept running up against CORS, but your method : getQuotes needs quotes
loking for ONLY design advice on my tribute page. i have worked some issues with it. one of the issues was how it presents on multiple screens. i am not 100% happy with the repeating image but it seems the better of the solutions. Please let me know what you think and if you see any other ascetically unpleasing issues. Thanks in advance. http://codepen.io/Trayuk/pen/pbwBPq
@susangapper Did you find a better one to use?
And other than that, that section looks ok?
And other than that, that section looks ok?
@Trayuk The list dots seem a little far away from the centered text, but I like the concept!
yea, not sure about that, on my cellphone when i look at it they are far way, when i have it on my laptop they are close as they should be.
@Trayuk the don’t panic color is also a bit disturbing to the eye
given the background
what could cause the bullet points to shift to the far left on a smaller screen?
Thanks @wbac88 and @ajesamson
trayuk sends brownie points to @wbac88 and @ajesamson :sparkles: :thumbsup: :sparkles:
:cookie: 338 | @ajesamson |http://www.freecodecamp.com/ajesamson
:cookie: 275 | @wbac88 |http://www.freecodecamp.com/wbac88
@Trayuk for the repeating background image
you can add no-repeat to the body
style
@Trayuk Actually, it's not working at full screen on mine, too.
there is an option for stretching the background image
let me find out
@ajesamson what about #0099cc for dont panic?
@wbac88 Maybe because you've centered the text, and not the list itself.
@Trayuk Maybe because you've centered the text, and not the list itself.
nvm, too light, closer though
kk,m center list. thanks
@Trayuk Try putting the list in it's own div and going from there
@Trayuk the orange color does better
more readable than the #0099cc
for the background
last try, orange or #99e6ff
you can change contain to cover
in the background-size
to fill the screen instead of repeat in the css background
99e6ff is much better
thanks, i was think i did cover and had issues on my cellphone viewing it
nope, that seems better, Thanks again for the advice. i think it is coming along well. just need to solve the bullet points.
@Trayuk OK, got the list centered, just go back over the bootstrap section on columns, works great.
can anyone help me find the bug in my code
when i am changing properties of footer class..its changing properties of body element...
@wbac88 Thanks, i assume you are talking about revisiting the lessons. If so thank you for not spoon feeding.
trayuk sends brownie points to @wbac88 :sparkles: :thumbsup: :sparkles:
:warning: trayuk already gave wbac88 points
@Trayuk Ha, yes I was saying that. If you can use the rows and columns feature, that will make your life so much easier going forward!! Good luck!
@Gauravtolani i couldn’t replicate the issue
it works fine when i change
correct me if i am wrong but i would want to set it up for a small device something like col-xs-4, and it should scale just fine for larger devices?
the color of the footer to white
@Trayuk you’re right
xs means smaller device and devices bigger than that
OK, so trying a new API and got this:
$(document).ready(function(){
$("#getMessage").click(function(){
$.getJSON("GET http://quotes.rest/quote.json", function(result){
$.each(result, function(i, field){
$("#quote-block").append(field + " ");
});
});
});
});
Still nothing showing up when I click the button.
Any ideas?
you don't need that GET inside the url
@Expiratio Yep, missed that in the cut and paste, thanks, still nothing, though
wbac88 sends brownie points to @expiratio :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @expiratio |http://www.freecodecamp.com/expiratio
hmm
i think you should first test if you're actually receiving the json when you use getJSON
OK, that makes sense, what would be the way to do that?
let's see
i would create a test <span> to write the potential json to, and then i would attempt to get the json when the document is loaded, something like this
$(document).ready(function() {
$.getJSON("http://quotes.rest/quote.json", function(json) {
json = JSON.stringify(json);
$("#test-span").html(json);
});
});
let me edit that
if nothing happens to my test span then there was a problem
i have to go now, but i hope that was helpful
So using that, the quote should just appear within the span when the page loads, right?
i think so
OK, thanks for the help!
hey guys! I'm building the quote machine, and I'm a little miffed on how to call or link my JS to my HTML. I understand the CSS, but I'm trying to use the JQuery
$("ID").click(); function
it doesn't seem to trigger
@cjrutherford Hey man, I'm on the same one. Are you trying to link a button?
yeah.... I think I might have not gotten anything to my variables via a botched
Math.random() cal
call
Ah, got it. Have you gotten your API to work yet?
That's what's killing me.
That's what's killing me.
@cjrutherford make sure you enable jquery in your codepen settings
not yet, I went through laying out my page, now I'm building the functionality and first and foremost is getting the quote stuff, and thanks @dhcodes I have it imported.
cjrutherford sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1181 | @dhcodes |http://www.freecodecamp.com/dhcodes
@wbac88 paste your codepen, we can help
@cjrutherford same to you; paste your pen if you have a specific question
I've tried three different APIs and multiple ways of trying to get them
@wbac88 in your case, it's because you're loading codepen as https and your api is http resulting in a mixed content warning
check chrome dev tools console and you'll see it
@wbac88 i like to console.log the API result first to make sure it's working and then use it to modify the page
@wbac88 after you change your codepen to http in the address bar, you'll still get an Origin Header error. That's a codepen issue. To fix that prepend your api url with https://crossorigin.me/
then it looks like it will work
happy coding
Like this: $.getJSON("http://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json",?
yeah, but remove the , and ? at the end
and then close your parenthesis
Oh yeah, I just mis-copied and pasted.:
$.getJSON("http://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json", function(result)
$.getJSON("http://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json", function(result)
right
and then console.log(result) and you should see the objects returned in the console
I'm still getting "No 'Access-Control-Allow-Origin' header is present on the requested resource." in the dev tools
it's okay @dhcodes I think I just need to lookup the
math.random()
class before I move on
weird, it worked for me
Hey guys. I've a problem with eslint. It gives me no-undef error when I'm using functions and variable defined outside of my js file. say functions defined in a library that I require. How can I solve this?
@wbac88 crossorigin is iffy, maybe refresh it
@wbac88 make it https://crossorigin.me/
add an s
to the http
Oh man it logged! Thank you!!!!
@dhcodes Thanks!
wbac88 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1182 | @dhcodes |http://www.freecodecamp.com/dhcodes
I’m looking for suggestions for improvements on my tictactoe http://theonewhodo.es/tictactoe/
Hi I'm currently on the "Show the local weather" challenge and am very confused with the openWeather API, it says to call the API i need to use http://api.openweathermap.org/data/2.5/forecast/city?id=524901&APPID={key} where 'key' is the key I recieved upon signing up, but to 'Call by geographic location' i need to use api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}
@ewathedoer works well. I'd rephrase "you will play with baby or adult" to something like "skill level: beginner or advanced". Also, during the computer's turn it says "compiturn" when I think it should say "computer's turn"
good job @ewathedoer
Am i using both?
@dhcodes thanks, I will look to it :)
ewathedoer sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1183 | @dhcodes |http://www.freecodecamp.com/dhcodes
@peter1403 /weather is the current weather right now
@peter1403 you will append the key after the lat/lon
with &APPID={key}
@peter1403 you do need to append the key to the end of the call to make sure it will work
@peter1403 while forecast is weather in 3 hours and beyond
your lat/lon you get from the browser either via html5 (though it won't work in chrome) or via ip address @peter1403
@peter1403 and yes you need you api key on both
hello?
using chrome so i'll not bother with geographic then, thanks guys seems clearer now
hello
I am trying to do this but it is not working, some help would be appreceated
@jacobbogers which part
mmm
I cannot log in
i see the webapp of clemantine
nice page
click on github login button
and it crash (see big error message in web)
some kind of stacktrace
@jacobbogers are you logging into clementine on cloud9 or just logging into cloud9 or what
@jacobbogers I'm still on twitch... looks like something to look forward to.
@KoniKodes , haha, its a long road))
@dhcodes, if you have 5 min, we can walk me through this?
@jacobbogers Yes, but you've hung in there...
I am not familiar with passpoort github ect
@jacobbogers are you working on a particular project or just getting going?
@KoniKodes I am very tenecious
@dhcodes i am just following the FCC examples
@fhdhsni have you added the jquery to your settings>
clemantine is new for me, I normally use node and express
@jacobbogers what step are you on at the bottom?
ok let me go back to step one
can you see step 1 @dhcodes?
lets take it from the top
Later guys..
@KoniKodes later, nice to see you
yeah I see it @jacobbogers
have you made an account on cloud9?
yeah and a project,
ok lets see step one
i made account and I am logged into cloud9
and when you made the project you cloned in clementine?
yeah, from github
and did all the apt-get to install mongo etc
but lets do the steps ok? just to check i did everything ok
@jacobbogers but you cloned clementine by using the prompt on cloud9 when making a new project right?
I will make a new workspeace
that's step 2
I already did this, but I will make brand new workspace
paste that url they give you in the clone from git box
yeah
ok,
then click the gear at the top of your workspace and show files
hiden
I am goig to create new project and post screenshot here
k
yes, I did that
moment.....
this is my screen, looks good, I am pressing ok
agreed?
agreed
ok
its creating
ok , I am now in project, I go to next step on FCC
this step I hsow hidden files step 3/14
done
step 4/14 create file ".env"
done
what should I check if I get no response from my javascript in codepen?
step 5/15 put these keys int your .env file
@dhcodes, can we go to "HelpBackEnd" for this?
@jacobbogers sure
hmmm.... has anyone else had trouble with this?
Hi, everyone! Could anyone tell me how to replace uppercase letters with '-' and that letter (e.g. in thisIsSpinalTap)?
@cjrutherford It's
document.getElementById. Not ID.
@cjrutherford It helps to put the codepen in debug mode.
ah.... yeah, and I also need to turn off auto reload
http://codepen.io/dave1089/pen/WxNGqG , Can anyone help with fetching offline channel data?
@GarySiu thanks for the advice, but it still feels like the JS isn't running. I have an onLoad event handler that injects the quote, but I don't seem to see the results
cjrutherford sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:cookie: 110 | @garysiu |http://www.freecodecamp.com/garysiu
@cjrutherford On certain javascript errors, it will stop all other javascript from loading. Got to fix everything to a certain extent first.
@GarySiu I think I found what was causing issues. I was misusing the
Math.random() class again....
function generateQuote(){
var seed = Math.floor(Math.random() * qta.length);
quote.innerHTML = "' " + qta[seed].text + " '";
author.innerHTML = "--" + qta[seed]['author'];
}
I'm not sure why this isn't inserting the text into the page.....
it's pulling the right information and putting it into the right places.....
is there a way to have a background image be centered to the text so that with smaller screens the image cuts from the left and the right evenly?
@cjrutherford Your function works. You need to call it ;)
@cjrutherford You're calling it with window.onLoad before the DOM is ready so nothing happens.
oh! @GarySiu ! so where do I call it? I'm not sure how the html and the js interact in code pen....
@Trayuk You can use a media query to change which css is used with which screen size. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
@cjrutherford Actually window.onload should work... weird.
Hi @GarySiu ! http://codepen.io/dave1089/pen/WxNGqG Can you please help me with fetching offline data?
@cjrutherford Found your problem. You capitalized the L. Should be
window.onload
@GarySiu so I guess that's the only exception for camelCase.....
@cjrutherford JavaScript really isn't as consistent as it should be but if they 'fix' it then a lot of things would break
@Dave1089 Sorry but I have to run to an event IRL. Try asking someone else or PM me if you can't get help for a long time and I'll get back to you.
@GarySiu too bad though, it's still not loading on document load.... I'm calling the generateQuote() method inside the document.onload
@cjrutherford http://codepen.io/GarySiu/full/YWxwQp/
off to the gym then, maybe after I haven't looked at it for a while, it'll be better
guys, how can i give my text BOLD?
@GarySiu No worries
@SSaabbiirr strong tag
@GarySiu Thanks, don't know what was different from mine and what you had..... either way, now on to coding the get quote button and then the tweet and share buttons.
cjrutherford sends brownie points to @garysiu :sparkles: :thumbsup: :sparkles:
:warning: cjrutherford already gave garysiu points
My jQuery code doesn' seem to work. I want to scroll to certain anchor tags in my page
http://codepen.io/pkrueck/full/WxozOP/
http://codepen.io/pkrueck/full/WxozOP/
@pkrueck
thanks @Dave1089
pkrueck sends brownie points to @dave1089 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @dave1089 |http://www.freecodecamp.com/dave1089
@SSaabbiirr - or use the CSS
font-weight: bold; property, if you want to style a section of text. But <strong> works.
but it still doesn't work..... http://codepen.io/pkrueck/pen/WxozOP
@pkrueck I can still see the error.. why don't you use only one $(document).ready(function(){
$('a').click(function(event){
// event.preventDefault();
var hash = this.hash;
$('html, body').animate({
'scrollTop': $(hash).offset().top
},'800',function(){
window.location.hash = hash;
});
});
});
thanks
@pkrueck - I tried some change on your page and it looks like it made it work - it was getting some errors 2VM207 pen.js:14Uncaught TypeError: Cannot read property 'top' of undefined when I clicked on one of your navbar items. So I changed the sections to <a id="About">, etc. and the code in your scrolling functions to this:
$('a[href="#About"]').click(function(e) {
e.preventDefault();
var targetOffset = $('a[id="About"]').offset().top; /// <<< this is the key change, to "id" from "href"
$('body').animate({
scrollTop: targetOffset
},
1000
);
});and it seems to work.
@khaduch thanks
ssaabbiirr sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1406 | @khaduch |http://www.freecodecamp.com/khaduch
thankk you very much @khaduch
image in the well need to be aligned center , any help? http://codepen.io/rjvg/pen/LkLakr?editors=1100
@rjvgdm - try this:
<img id="sndpic" class="center-block" on your image.
it works thanks @khaduch
rjvgdm sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1407 | @khaduch |http://www.freecodecamp.com/khaduch
now I'm having trouble getting the .onClick to run....
nvm got it
hey guys...i'm having a couple issues with my tribute page. 1) On codepen, when i put my styles in the CSS section, it's the background-color class does not render...when i keep it in the body of the html, the body background color renders 2) I cannot figure out how to get the image caption to have a white background or be included in the border like the original website has it.
Can anyone see what i'm doing wrong?
<style>
body{
background-color: gray;
}
h1, h2{
color:black;
}
.photo-position{
width:1000px;
position:center;
}
.img-border{
border-color: white;
border-width: 20px;
border-style: solid;
}
</style>
<body>
<div class="container-fluid">
<p><h1 class="text-center" >Dr. Norman Bourlag</h1> </p><br>
<p><h2 class="text-center" style="font-style:italic">The Man who saved a billion lives</h2></p><br>
<div class="row text-center ">
<figure>
<img class="img-responsive center-block img-border " src="https://c2.staticflickr.com/4/3689/10613180113_fdf7bcd316_b.jpg">
<figcaption>Dr. Norman Borlaug, second from left, trains biologists in Mexico on how to increase wheat yields - part of his life-long war on hunger.</figcaption>
</figure>
</div>
</div>
</body>
Guys, How can i move to the center all my pictures side by sede? Not with
center-block
how can I align the project thumbnails in a horizontal line with an equal amount of space. I couldn't find solution online.
Hey campers! OMG I am gonna cry , I finally finish my last front-end project , if you're keen , you can play the simon game app , completely absolutely finally go thru it with my heart, let me know if you've got any opinions, suggestions and comments :), here's the link: http://codepen.io/mania7539/full/EyXLOK
@pkrueck u can use flexbox
anyone got chance ? http://codepen.io/dave1089/pen/WxNGqG second ajax call issue
not getting offline channel json
So, for some reason the first header in my pen is misaligned. I added it to the page with jquery
it doesn't show up unless you click the magnifying glass, search something, and the results are misaligned
i'm okay with debugging javascript errors, but css makes me want to throw my hands up in the air
@sentedelviento just use bootstrap to sort it out
@sentedelviento otherwise draw it out the wireframe, separate the components and start again
I'm not going to use bootstrap lmao
I guess I could just start over with the css and recreate the page again.
@sentedelviento u can write your own container
@sentedelviento just use the right html and css
Hey guys, any idea why this isn't even printing the string I am testing? Do I need some key for the API? http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
I can't seem to figure out how to work out the twitter button on the random quote generator....
how are you able to upload a link to your codepen?
@lukenetti3
@glowlo Just copy and paste the url in to the chat.
can anybody help me with the weather app please?
oh...hahah..thank you
@Deadpool37 Yeah I might be able to. What do you need help with?
@cjrutherford https://support.twitter.com/articles/81218 this might help
@lukenetti3 the api fcc recommended uses http while codepen uses https so how do i work that out
Hi I’m not sure if this is the correct place to ask this but I have a specific question; what language do you guys think would work best for a virtual pet website? (along the lines of flight rising, neopets, etc.)
I have the tribute page built...but need help working out a few things
- my photo caption should be contained with the photo and have a white background
- My <ul> is not aligning the text with the bullet point, nor will it center
- when I put my styles in the CSS section, they do not render for some reason, but they do fine in the body of the html
- I don't know how to get the last quoted statement and it's signature to align left
All suggestions apprectiated!
http://codepen.io/glowlo/pen/rLzZqr
@Deadpool37 I used http for my link to the open weather api. I used the lat and lon values and then my id for the api after that.
@Deadpool37 Not sure what you mean by code pen using https.
@lukenetti3 I think i have an idea
@Deadpool37 I can send you my codepen if that will help.
@lukenetti3 actually i already had that
:P
@glowlo set your li's to text-align: left
ok...thank you @uniforlyff
and set a width to your ul and margin: 0 auto
@Deadpool37 Did you figure it out?
that should get centered
@lukenetti3 no
@Deadpool37 Are you using the lat and lon values to calculate the location?
@lukenetti3 go to your pen and open console
@lukenetti3 yeah
@lukenetti3 do you get an error in the console?
@Deadpool37 What do you mean by open console? I'm not getting an error anywhere
@lukenetti3 ctrl+shift+J
@Deadpool37 I have a mac so thats probably not the shortcut.
thank you!
@lukenetti3
@lukenetti3 Command + Option + J for chrome mac
guys
@Deadpool37 Yeah I did that and opened the console and I'm not getting an error.
i need to put my image in center
@lukenetti3 nothing like the pic i posted?
@Deadpool37 No, I'm not getting anything. I have to go now. Sorry I couldn't help! Good luck!
@lukenetti3 thanks anyway
deadpool37 sends brownie points to @lukenetti3 :sparkles: :thumbsup: :sparkles:
:cookie: 280 | @lukenetti3 |http://www.freecodecamp.com/lukenetti3
@vvkgdm The image appears centered to me. Do you mean that you need extra space around the image so it isn't touching the menu?
Can someone familiar with the transform-origin css property please help me to center the 4 quarter circles inside the larger circle in this codepen, thank you http://codepen.io/Ryanwfile/pen/xOLkmV
@Ryanwfile
- create a container with 4 divs
- set container with an equal width and height
- the container should contain the overflow and set the border-radius to 50%
- the 4 divs within the container should have a width of 50% and floated to the left
- and set the divs heights half of the containers
lemme reword that
@Ryanwfile http://output.jsbin.com/zasofuhucu like this?
@uniforlyff yes just like that thank you, I just need to have black spaces around the quarter circles so they appear as separate buttons for the Simon game project
ryanwfile sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
@Ryanwfile you mean border?
@uniforlyff yes just like a border
@Ryanwfile then add a border :)
but make sure you add box-sizing to border box
@vvkgdm Try this:
#1: Add a class to the div that your image is contained in:
<div class="circle-padding">
<img class="img-responsive img r" src="https://scontent.fmaa1-1.fna.fbcdn.net/v/t1.0-9/12249604_1022118007856065_8433404923222012749_n.jpg?oh=f503c73a48db1bd30f5aba0711d5932f&oe=58336AD7" align="midddle" id="img1">
</div>#2: Use CSS to add padding to the class
.circle-padding {
padding-bottom: 75px;
}This will allow you to add padding to the image without changing the border. :)
Hey guys, any idea why this isn't even printing the string I am testing? Do I need some key for the API?http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
@uniforlyff When I add borders each div appears as squares instead of retaining the shape of the quarter circle, I am not too familiar with border boxing but experimenting with all of the possible values on MDN didn't get the desired behavior http://codepen.io/Ryanwfile/pen/kXoXEE
Guys, Why can't I clear the search box after pressing "Go!" button ? http://codepen.io/Hadouken/pen/akwEvo
@Ryanwfile http://output.jsbin.com/civuticuci
@uniforlyff wow that's perfect, thank you so much
ryanwfile sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:warning: ryanwfile already gave uniforlyff points
:+1:
Hey guys , do you know where can I learn about AngularJS ? is FCC here provides the course too?
@Harry97 within that codepen example, you are missing jquery and the id attributes are non-existent on each of the input elements
@mania7539 start at w3schools
it's great for starting
@seemly thank you , nice about that :)
mania7539 sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:cookie: 23 | @seemly |http://www.freecodecamp.com/seemly
@uniforlyff ok, I would also google around that, thank you :)
mania7539 sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
no problem, @mania7539 . I recently watched that video course and found it very good
and do you know why FCC don't have the React.js coding course? I just got my front end certification , but I don't know how can I proceed to the next level on it
@seemly I just look into the first course, and don't know why it uses .ts for scripting. is it a front end solution or backend solution?
frontend. ts is typescript. typescript is a superset of javascript. helps you to write strict (better) code and allows the use of "types"
the ts files get compiled to js files.
@mania7539 many ppl already finished all current FCC curriculum
u can search for external react resources to learn it.. like youtube etc...
https://github.com/markerikson/react-redux-links
https://github.com/enaqx/awesome-react
u can search for external react resources to learn it.. like youtube etc...
https://github.com/markerikson/react-redux-links
https://github.com/enaqx/awesome-react
I'm sending data into a chat app I created via AJAX and it only updates when I refresh the page. I would appreciate some advice I've been at this for awhile:
$(document).on('ready', function() {
var title = $('<h1>').text('Chat').addClass('title');
var chatDisplay = $('<div>').attr('id', 'chat-display');
var form = $('<form></form>');
$(form).append('<input type="text" name="your-message" id="your-message"><input type="submit" id="submit" value="Submit">')
$('body').append(title);
$('body').append(chatDisplay);
$('body').append(form);
function updateChat(data) {
data.forEach(function(obj) {
var name = '<span class="name">' + obj.created_by + '</span>';
var message = '<span class="message">' + obj.message + '</span>';
$(chatDisplay).append(name + ': '+ message + '<br />');
$(message).addClass('message');
})
}
$.ajax({
type: 'GET',
dataType: 'json',
url: 'URL',
success: function(response) {
updateChat(response);
},
error: function() {
console.log('Error! Trouble Receiving data!');
}
})
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
contentType: 'application/json',
url: 'SAME URL',
data: JSON.stringify({'created_by': 'SuperMario','message': $('#your-message').val()
}),
success: function(response) {
$('#your-message').val('');
$.get('SAME URL', function(response){
console.log('in func');
console.log(response);
updateChat(response)
})
},
error: function(error) {console.log(error)}
})
})
});
I'm trying for it to update right after I submit my message
without refreshing
@seemly ok thank you, I will learn more on that :D
mania7539 sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:warning: mania7539 already gave seemly points
@moigithub thanks for the nice tips, ok , I would manage to learn more, thank you for your encouraging :D
mania7539 sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 1659 | @moigithub |http://www.freecodecamp.com/moigithub
@Mashadim can you create a basic example in codepen (or any alternative)
@seemly I just did I posted it up there
nnnnever mind :)
Thank you anyway @seemly
mashadim sends brownie points to @seemly :sparkles: :thumbsup: :sparkles:
:cookie: 36 | @seemly |http://www.freecodecamp.com/seemly
Hey guys, why does this not go into the “success" part of my code? Is there something wrong with the url I am using. When I paste the url into a webpage it gives me json content, so I don’t understand why I can’t get anything from this url. http://codepen.io/lukenetti3/pen/akwEQk?editors=0010
@lukenetti3 Add
dataType: 'jsonp', to your .ajax call
$.ajax({
dataType: 'jsonp',
url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=cars",
success: function(data) {
And hint to get your random page to open, just assign an url to the button. No need for javascript: http://en.wikipedia.org/wiki/Special:Random
@TylerMoeller Thank you! Also, do I reference that json content with numbers? Like, cars[1][1]….something like that? And okay thanks! I was going to write a seperate function for that. That makes more sense though.
lukenetti3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 641 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@lukenetti3 you'll get a JSON object back, so you'll access it with dot or bracket notation. not sure if that answers your question.
@TylerMoeller Yeah I that makes sense! Another quick question, trying to be able to really understand all of it. How would I know that its of dataType jsonp?
@TylerMoeller The last time a used an api, I just needed a url.
hi all just a qucik question..hope i do this right:
Placed 2 pictures next to each other and they should fill the pages width, which they dont do but insted the DIVS they are in fill the page? any 1 got a hit on where i went wrong? thx
Placed 2 pictures next to each other and they should fill the pages width, which they dont do but insted the DIVS they are in fill the page? any 1 got a hit on where i went wrong? thx
@lukenetti3 If you look in your browser dev tools console, you'll typically get an error about cross-domain requests. This when you need to use jsonp instead of standard json
@TylerMoeller Okay, that makes sense. Thanks again!
lukenetti3 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: lukenetti3 already gave tylermoeller points
No problem. :)
Hello everyone - having some troublesome trouble on the weather checker and quotes projects
anyone able to lend me the handiest of hands?
@DanielSusser I've finished those two challenges. I'm not super good but post 'em and lets see if I can help you out.
@Harry97 thanks! Heres my codepen http://codepen.io/danielthespaniel/pen/BzzGXy
danielsusser sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
@Harry97 I keep getting an error about the XMLHTTP request
@Harry97 and the solutions im finding online don't seem to hack it!
@DanielSusser Did you make sure to quick add jQuery ?
Hey @DanielSusser, this is a cross origin request issue. Have you had a look at: https://www.sitepoint.com/jsonp-examples/ ?
Not sure if you allowed to with that challenge but if you use jQuery’s ajax call and define the dataType as “jsonp” you should be able to get around that.
and make sure you also define the callback “mycallback” you have in the request url.
@darrylblake thanks! Will check that out. It's also affect ma' weather checka
danielsusser sends brownie points to @darrylblake :sparkles: :thumbsup: :sparkles:
:cookie: 22 | @darrylblake |http://www.freecodecamp.com/darrylblake
I am working on my portfolio project. When i actually want to showcase my projects in codepen, how do i get the actual image of the poroject to to show up on my webpage?
http://codepen.io/duel_drawer8/pen/xOLErVhttp://codepen.io/duel_drawer8/pen/xOLErV
@DanielSusser YO HOMIE
I really hope you get this, It finally works.
First of all, there was some sort of an issue with a twitter link you shoved into the HTML code so I simply deleted all of the code containing that link and it seems that it was about getting twitter icon I suppose
@Harry97 Sweet! How did you stop the evils of the error message?
right now the issue is each time you press new quote they keep stacking on top of each other and with the same exact quote
also you seem to have added multiple libraries in your javascript tab so I simply removed all except for Jquery
and finally I copy pasted the code at this link : http://quotesondesign.com/api-v4-0/ and made it appened to h1
@DanielSusser Pardon me
@Harry97 yeah the difference between your url and mine was the callback= bit
what specific error message are you talking about ?
@Harry97 I was seeing errors in the console about the XMLHTTP request, but it's fixed by fixing the end of the url. I originially had something like 'mycallback=jsonp or some nonsense, but your url has just "&callback=" which does the trick beautifully
yeah so we dealt with that but now we gotta make sure those quotes don't stack nor be repeated
@Harry97 yeah that was another problem. So it returns the same one, even though I've asked for a random one in the URL with "filter[orderby]=rand&filter"
I guess converting append to text or html might solve the issue of stacking and regarding the repetition I'm trying to read the documentation to figure a solution
great, I'm going to pick this up tomorrow. Thanks Harry, you're a king and lifesaver and a gentleman
I'm having trouble with a few things with the Twitch API.
Can anyone help me with a few of my TODOs?
I'm having trouble searching for a user when I click on them,
and trouble displaying the tooltip as an image when the user hovers over the current game.
Here is my pen:
http://codepen.io/freekngdom/pen/rLzrJb
Thanks!
Can anyone help me with a few of my TODOs?
I'm having trouble searching for a user when I click on them,
and trouble displaying the tooltip as an image when the user hovers over the current game.
Here is my pen:
http://codepen.io/freekngdom/pen/rLzrJb
Thanks!
@DanielSusser LOL I'm none of that. I'mma keep working on a solution so make sure to recheck my forked version when you see this mention.
hy, i am doing the third react challenge, what is local storage on browser? anyone have some good tutorials? thx
Hey guys! Anyone know how to make an image stay where it is when you seem in and out? I made it responsive but it still moves if I zoom in far or close enough.
zoom in and out*
Anyone?
@DanielSusser turns out we need to add a changing variable to our call back function in order for it to pull a different quote each time to be honest I'm not sure why it's being done in such a way I simply found out the solution here : http://stackoverflow.com/questions/31440314/issue-with-codepen-and-jquery and like I suspected using html instead of append fixes the problem of repetition : http://s.codepen.io/Hadouken/debug/AXoLNB
@Eraofdiscord Hey man, I'm just a fellow camp with a very humble experience post ur code pen and let me see if I can help cuz you're not really specific
Yeah my bad haha
@Eraofdiscord Ok, so basically you want your portfolio image to be enlarged once it's clicked ?
No I want the the circle image to stay where it is when I zoom in and out
If you could also tell me how to keep everything centered when I zoom in and out I would appreciate that as well.
Hi everyone, I just got my wikipedia view to work after finagling it for a while and I have a question I just can't figure out.
This is a link to my codepen. My question is this:
@Eraofdiscord ok dude I'm working on it :D
Why does my code not work when I declare a variable- APICall (which basically is the url of the wikipedia api + the search term value) outside of the searchWiki function?
Thanks to anybody that can help explain that to me!
Thanks @Harry97 it means a lot!
eraofdiscord sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97