does anyone know who to get this symbol in code?
sorry let me get the right picture.
This symbol?
@drbe4t - you can probably find it in the font-awesome icon set. If you are using CodePen, just add the font-awesome path to your CSS external elements. Just go to an empty one of those and type
font-awesome, it will pop up a link that you can select. They have icons of all types in there. Well, at least they have one question mark in a circle question-circle is the name.
@KoniKodes - you too! Enjoy dinner and fireworks...
Does anyone know what happened to the twitchtv sample project? It is not displaying correctly as I can only see the title "TWITCH STREAMERS" without all the channels when I open the codepen link. https://codepen.io/FreeCodeCamp/details/Myvqmo
@wangzheblue - I just tried it and it seems to work just fine, at least at this time for me. Using Chrome on windows 10.
@wangzheblue what browser are you on?
chrome 51 on windows 7
I will try another computer
@wangzheblue @dhcodes - also looks fine on firefox on windows 10
ya it works fine on another computer haha
weird
is javascript disabled?
I'm using a company laptop
so thats possible
I tried just appending "err" and it just gives me [Object object]. I'm sorry if I'm being redundant, just don't understand why I can access "status" but not the other parts of the JSON for inactive accounts...http://codepen.io/gphalen/pen/WxOZvZ
@gphalen do you mean inactive or offline?
@dhcodes inactive. Online/offline accounts work fine.
@gphalen there's nothing to return for inactive accounts because they are closed or non-existant
so there is no info to get
@dhcodes this is the JSON for an inactive account. If I type err.status in my fail function, it accurately writes 422, but it doesn't work for err. status. http://codebeautify.org/jsonviewer
*doesn't work for err.message
@gphalen I think you just write the message. So you write an if statement that modifies your html to say "Account closed or inactive" if the status is 422
at least that's what I did
@dhcodes but how do I get the name of the account without hard coding?
@gphalen make a global var and then assign it in your loop?
ex. var name;
first line of loop, before the json: name = arr[i]
?
maybe
idk
@khaduch sorry for the supe late response . is there not a code for that one?
@drbe4t - not a squared-off background, but one that looks like this:
^^^^^^^ @drbe4t - you can make the font-awesome version look similar, at least I did this above version with a little bit of tinkering:
Thanks!
@khaduch
If anyone is up for it, I am having a couple minor issues with my personal portfolio page
@jrandallhansen - what's your problem or two? Not sure if I can help, but what do you want to change?
Now I've noticed several more on the small screen but I'll stay focused for now on the issues I was having on a large screen lol. First my link to the 'about' section takes me to the second paragraph instead of the first
Second issue is that my thumbnail images are appearing different sizes when i thought the 'thumbnail' class should make them uniform
and finally my footer should have the same styling as the header but the link is appearing blue
bootstrap issues mostly
@jrandallhansen - I think that it's bringing you to the first one, but it's behind the navbar.
I think that the thumbnail class only does some styling with borders, etc. The size is basically dependent on the content, before you do any additional CSS settings.
I think that the thumbnail class only does some styling with borders, etc. The size is basically dependent on the content, before you do any additional CSS settings.
i agree. i tried changing the padding on the div containing the images but still covered by navbar
@jrandallhansen - you can just override the color of the text for the link in the footer - something like:
.footer a {
color: #777;
}
I'm having the same issue as @jrandallhansen , I can't get my thumbnails to be the same size
@khaduch i was looking to see if there was a fix that would implement matching styling from the navbar to the footer. i dont want to just manually override the color. any ideas? also any idea to get that navbar out of the way?
@jrandallhansen - well, the color settings for the navbar come from the navbar style settings. Maybe you could just make the footer be a navbar? Try structuring the link in the same way, with a
<ul> and <li> because it looks like that is where the style comes from.
G' Evening. Has anyone found a good weather API yet for the weather map challenge? I'm thinking of just making it local on my computer and pointing the challenge to a github page.
@khaduch thats's probably the best idea for that issue. alright looks like i just need to fix the other two problems. back to google lol
ok. thx @jrandallhansen
:cookie: 176 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
benmhz sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
haha! it does work.
https://codepen.io/drbe4t/pen/pbPqxz so this is a personal assigment for web dev class at my universty i’m stuck on a few things and I’d love some help figure out what i’m doing wrong. 1- my float isn’t working the way i want it too. my left side is fine it’s my right side that’s having issues. I’m not sure i’m understanding how to set it up properly.
@khaduch I tried stylings as UL and LI but ill need to make it a navbar as well
2- my radio buttons are spaced far away from it’s label.. not sure why. it was working but then something hapened and i’m not sure if it has to do with the flex.
This is what it’s suppose to look like
@jrandallhansen - yes, because the style selector for that is something like
.navbar-nav > li > a, so it has to be a similar structure for it to apply the style as they define it.
@jrandallhansen - and it might not be as straightforward as I think...
ill go down the rabbit hole and see. i need a break for now lol. @drbe4t that looks cool. im not sure anyone here right now has the level needed to help you with it unfortunately
it looks like to me that the float right should be more that 30% width. it might even be 50/50
with some padding or other styling between
@drbe4t - I'll take a look
@jrandallhansen - making the footer look like this:
<footer class="footer navbar navbar-default">
<ul class="nav navbar-nav"><li>
<a href="mailto:jrandallhansen@gmail.com"><i class="fa fa-envelope"></i>Email Me</a></li></ul>
</footer>Worked, I think - the link is now a grey color. (I took the well out of there.)
perfect. thanks man. the other issues are less straight forward lol. im surprised there isnt matching style for a footer specifically in bootstrap
@drbe4t - so your
float: right is floating to the right. Are you trying to create the same page layout as that image? Is that the assignment?
@khaduch yes he needs to mirror that image in his layout.
@drbe4t- okay - let's see about one thing at a time.
in your "Syntax Highlighting" panel, there is a problem. You have an ID of "syntax" which is assigned to all of the radio buttons (that's wrong in and of itself - ID values are supposed to be unique) but you are assigning a width: 50%; to that ID, so it is blowing the width of those input radio buttons way out, that ends up shoving them and the labels out to the right.
@aarontaylor lol sorry for seeing this 10 hours later, but I appreciate the help man. thanks
rallph sends brownie points to @aarontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @aarontaylor |http://www.freecodecamp.com/aarontaylor
@khaduch that's the issue with the labels for sure
@khaduch i thouugh i corected that but thanks! and yes that is the assignment.
drbe4t sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1392 | @khaduch |http://www.freecodecamp.com/khaduch
@drbe4t - removing those
id="syntax" attributes from the radio inputs looks like it make the syntax highlighting area better.
lol yup. haha that was easy. Okay so how am i mis understanding my float tag
@drbe4t - a similar thing with the width on the fonts side - I changed the first option label to this:
<label for="fontsOption">Code Font Family:<br/>
<select name="fonts" id="fontsOption">and the second you had the id set to "fonts", so I changed it to this:
<label for="fonts2">Code Font Size:<br/>
<select name="fonts" id="fonts2">And that cleared up the alignment of the labels and the option boxes. (Somehow it looks like your option font color is set to white? Haven't figured that out yet.)
@drbe4t - I removed the select from the CSS selector that you had with h3, input, select, that fixed the color of the font in the selectors.
Next, I made a new class ".topBoxes" and assigned that to the top four fieldsets, and made the CSS rule for it:
.topBoxes {
min-height: 200px;
}That made the top four boxes equal height.
so for the .topBoxes class you add that to the syntax bindings font and indentation box?
got it. that way i’m styling them but they hold the float value right?
@drbe4t -
so for the .topBoxes class you add that to the syntax bindings font and indentation box?
yes.
Remove the id="bindings" from the radio buttons in the "Key Bindings" section - that will fix the width and placement of the labels there.
@drbe4t - I'm still not sure about the float thing. I'm just working on the easy stuff right now... :)
@khaduch thanks for the help!! I don’t get much direction. I’ve figured out most of it. and the things you’ve helped fix just come with more practice coding.
drbe4t sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: drbe4t already gave khaduch points
Hi everyone, does the Data Visualization section require you to learn redux? I feel comfortable with React but not redux yet
@drbe4t - the "Preprocessor and library defaults" looks a little funky... I'm wondering if there should be a table-like setup there? Is there a "responsive" version of this image?
the bottom two fieldsets will need a different height setting, so I would make a .bottomBoxes class and set that min-height to something appropriate.
no lol he just gave us the png. I was thinking something similar. It looks like it suppose to have a Justify-content tag but everytime i tried it didnt’ work.
got the bottom boxes set up with a min-height of 350px
Hi Everybody. I'm trying to get started on the Pen part of the challenge & find Myself feeling like a goof again. I cant get past the tour where they want Me to "add some CSS to style our document". not sure what they want added? Any help please
@drbe4t - I almost have the preprocessor and library defaults set up - just wrestling with the last two checkboxes...
Thanks again @khaduch my professor like is never really available to answer questions.
drbe4t sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: drbe4t already gave khaduch points
@ChadDean82 what do you mean the "pen part of the challenge"
Build a Tribute Page
I am on a whole other website called codepen
I need help with navbar.
@ChadDean82 and you're doing the tour on codepen?
they are just showing you that you can add your CSS in the CSS box on codepen
on codepen there are 3 boxes, one for HTML, CSS, and Javascript
you can skip the tour if you want
please take a look if you have a moment
@dhcodes yes I am, that's what I was wondering. if it froze up on the second part cause it wont move from that screen.
@dhcodes Thank You
chaddean82 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @dhcodes |http://www.freecodecamp.com/dhcodes
@ChadDean82 just reload and skip the tour. Also if you want to use Bootstrap or jQuery, you need to enable them in the settings menu at the top of your pen
when you make a new pen
for bootstrap, go to settings at the top of your pen, then CSS, then quick-add bootstrap
not that you have to use it
have fun!
I was just curious, how did you guys go about getting a thumbnail for the unfinished project tab
and gals**
@Octopinky really good start
@bgeraci714 - I made one of my own in GIMP, and then put it out on my website and linked to it.
okay cool. Any ideas on how to ensure that all your thumbnails are the same size even if the image sizes are different?
(without causing very ugly formatting issues)
var Car = function(wheels,seats,engines) {
//Change this constructor
this.wheels = 4;
this.seats = 1;
this.engines = 1;
};
//Try it out here
var testCar = new Car (3, 1, 2);@drbe4t - here is a link to a pen that I forked from yours, as i was editing. I have to shutdown for the night. https://codepen.io/khaduch/pen/QEgEAa. I was working in the preprocessor section - I think that the part that I have in the lower section for the last four elements, using a table-based display, was going to work out fairly well for that section? It was a little more complicated to set up - I have the top of that section working out pretty well with using percentages, but I thought that the table work work better with those checkboxes?
I hate to leave off in the middle of this, but I hope that I helped you get some things squared away. I can potentially continue tomorrow, not sure what kind of timeframe you have for this?
This message was deleted
Hey everyone, so I'm working on the building blocks of my portfolio site. I'm kind of building infrastructure and making sure everything works before I add any real content.
So for my question. I'm using bootstrap's navbar-fixed-top and I've done the body {padding-top: 70px;} in css. I also have section {height: 93vh}. The problem is that when I click a link, while it scrolls to the right section, it ignores my padding rules. How can I fix this?
Here is a link to codepen so you can see what I've got so far. http://codepen.io/nymusicman/pen/dXWgQa
@nymusicman Not sure - you will just have to play around till you get it. But bootstrap requires jQuery.js - just make sure bootstrap.js is added after jQuery. The order is important.
And
And
class="col-sm-6 col-md-6 col-lg-6" - bootstrap aways defaults to the smallest setting - so if your screen was xs it would be 12. Because you have set sm to 6 all screen sizes above it default to 6 - so xl will also be 6. That means all you have to write is class="col-sm-6"
hi huys, need a question answered
i just get the jQuery part and i was thrown into the tribute page thing... will i be using javaScript? because i have not gone through it
@Hoxtygen you do not have to use javascript on the tribute page.
thanks @jwoo92
hoxtygen sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @jwoo92 |http://www.freecodecamp.com/jwoo92
@Hoxtygen there's a few things with bootstrap that you'll have to look online for to finish the tribute page, but you can finish pretty much the whole thing just using Bootstrap, with only one or two lines of css for the body margin
@bbajcetic so what do you suggest? like which one is better?
@Hoxtygen you are welcome.
@bbajcetic should i just use the two line css or the lookup online more bootstrap path?
bootstrap makes it a lot simpler
you just have to learn a bit more about aligning everything with columns using the div class=col-xs-# and that stuff @Hoxtygen
There's a good in depth additional explanation of column alignment that helped me a lot through this website: http://www.w3schools.com/bootstrap/bootstrap_grid_basic.asp
@bbajcetic thanks for the head up
hoxtygen sends brownie points to @bbajcetic :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @bbajcetic |http://www.freecodecamp.com/bbajcetic
@bbajcetic and thanks for the link
hoxtygen sends brownie points to @bbajcetic :sparkles: :thumbsup: :sparkles:
:warning: hoxtygen already gave bbajcetic points
https://codepen.io/quocanh261997/pen/RRVOyQ
Hey guys I'm doing a project birthday for my friend, it has many divs where I will put different features in, but when I added the fireflies with "20+1" it just couldn't roll down anymore and stay on the top of the page while it's actually in the 3rd big div, anyone know how to fix this?
Hey guys I'm doing a project birthday for my friend, it has many divs where I will put different features in, but when I added the fireflies with "20+1" it just couldn't roll down anymore and stay on the top of the page while it's actually in the 3rd big div, anyone know how to fix this?
hi world
welcome to FreeCodeCamp @Singhbalpreetarora!
please help me in html
I am stuck
Anybody there to help me???
Can I get some feedback on my portfolio project? http://codepen.io/seaofwhatremains/full/oLwXYd/
@Singhbalpreetarora What do you need help with?
@bgeraci714 looks pretty good. I like the colors. The "Blakes portfolio" is a little off center for me and hard to read with white font color on that background
@bgeraci714 and I would increase the <p> font size, theyre a little hard to read
Thank you for the feed back!
@Benalron For some reason, I cant get the page to load at all on mobile. Any ideas as to why that might be?
now it's done. no need @bgeraci714
```for(var i = 0; i < usernames.length ; i++){
var URL = "https://api.twitch.tv/kraken/users/"+usernames[i]+"/follows/channels/?callback=?";
$.getJSON(URL).done(function(data){
console.log(URL);
});```
Hello guys! What does this mean: "Note that CodePen.io overrides the Window.open() function, so if you want to open windows using jQuery, you will need to target invisible anchor elements like this one: <a target='_blank'>."
```
How can I make a window or an alert in CodePen in JavaScript?
@Avocado93 write alert(yourData);* in JS section and run
@microcyberz it doesn't work
what's the difference between user and channel when using the twitch API?
which one do i use to find who's online
anybody done with the portfolio project?
for(var i = 0; i < usernames.length ; i++){
var URL = "https://api.twitch.tv/kraken/users/"+usernames[i]+"/follows/channels/?callback=?";
$.getJSON(URL).done(function(data){
console.log(URL);
}); } I need help in this code, I have a list of usernames but inside getJSON, only last value of list executes in every iteration.
@96street Take example of fb page and people who like it, users like fb page, users are normal accounts and channels are like pages
@Avocado93 send me link of your pen
that makes sense
cheers
hi. I need help
in HTML
for(var i = 0; i < usernames.length ; i++){
var URL = "https://api.twitch.tv/kraken/users/"+usernames[i]+"/follows/channels/?callback=?";
$.getJSON(URL).done(function(data){
console.log(URL);
});
}
I need help in this code, I have a list of usernames but inside getJSON, only last value of list executes in every iteration.
i need help
hello
anyone worked with cordova?
Hey, I am on "Check for Palindrome" challenge in Basic Algorithm Scripting.
Here's my code :-
function palindrome(str) {
// Good luck!
str = str.split('');
var filtered = str.filter(function(a){
return a == /^[A-Z]+$/gi ;
});
if(filtered === filtered.reverse()){
return true;
}
else{
return false;
}
}
palindrome("LoL");Something is wrong, it's not giving out false for strings like "nope", etc, which aren't palindromes.
Changed the condition to this:
filtered.join('').toLowerCase() === filtered.reverse().join('').toLowerCase()the error remains same.
@a-y-u-s-h a good bit of advice is to check to see what filtered is
@a-y-u-s-h I can help you more if you need... but try putting return filtered right after you declare and filter it... that way you can see what it is.
@a-y-u-s-h if youre still stuck after troubleshooting with the new information, let me know
@microcyberz i have encountered same problem. take a look at the method (function) called "updatestreamers" in my js.here is my pen: http://codepen.io/sorinr/pen/EymkWr but see it fully working use this version http://codepen.io/sorinr/debug/EymkWr
@Benalron I tried doing that, but it gives a blank output.
@a-y-u-s-h thats an indicator that something is wrong with how youre declaring or filtering it. Do you want me to tell you what it is?
anyone know how to deal with this error? Just started FCC - doing the random quote machine project.
XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json&callback=?&format=json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access. The response had HTTP status code 406.
@Benalron Hold on, lemme try ._.
@yakschuss im not 100% sure on this one, so take it with a grain of salt, but I think you have to use https rather than http
I read into it a little, it has to do with the Internet expecting that Javascript only make's 'same-origin' requests, as opposed to requesting other resources. I can try that though
@yakschuss whats your API call code?
got this now
jquery-2.2.4.min.js:4 GET https://quotes.stormconsultancy.co.uk/random.json&callback=?&format=json net::ERR_INSECURE_RESPONSE
gtg!
thanks, leave a DM for me if you can
@a-y-u-s-h ive got to take off in a couple, so if you want me to tell you the issue with the .filter let me know
@a-y-u-s-h
@Benalron Yup, tell me pls ._.
Cannot figure it out.
@Benalron Yup, tell me pls ._.
Cannot figure it out.
copy pasted my own name -.-
Hey all! I need your help. I have a for loop in my code. At line 48 , why does it log only the last value of k: https://codepen.io/Antony-Ndungu/pen/xOdgKr?editors=1012
@a-y-u-s-h youre using 2 = signs in the filter... to assign something it's one equal sign
@a-y-u-s-h you can simplify it a bit by using .replace() instead of a filter too,
Sorry line 48 of my javascript code.
str = str.replace(/[\W_]/g,'').toUpperCase();
@Benalron I guess I should use replace instead.
@Benalron Thanks.
a-y-u-s-h sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @benalron |http://www.freecodecamp.com/benalron
@a-y-u-s-h either way works, but you just have to change the a == to a =, Good luck
@Benalron Didn't work after replacing a == to a = , filter iterates over the array and it requires a boolean statement in return, if it comes out to be false at some character then it removes that character. Replace statement may work better instead, I guess.
Hey, can anyone help me with me navigation bar? I want the background to by white, and full width of the screen and fixed like it currently is
@TheJamieCrawford
The .nav and .nav-fixed-top classes should be applied to a same element:
<div class="navbar navbar-fixed-top">And use this CSS:
body {
padding-top: 70px;
}
.navbar {
background: #fff;
}
@Rallph no problem! Thank you :-)
aarontaylor sends brownie points to @rallph :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @rallph |http://www.freecodecamp.com/rallph
@uolcano thats great, thanks! Fixed my problems
thejamiecrawford sends brownie points to @uolcano :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @uolcano |http://www.freecodecamp.com/uolcano
@uolcano One more question, how do I make the active (home) inactive upon scroll over?
@TheJamieCrawford I think it should be some behavior, so you need JS. You need to load jQuery and Bootstrap's JS by setting the codepen's javascript part: Settings->JavaScript->Quick-add(firstly jQuery.js, then Bootstrap.js).
Because i just completed reading the bootstrap docs today, i don't known how to help you by detail.
Hope this can help you:
http://getbootstrap.com/javascript/#scrollspy
Because i just completed reading the bootstrap docs today, i don't known how to help you by detail.
Hope this can help you:
http://getbootstrap.com/javascript/#scrollspy
@sorinr thank you bro, I used another technique of keeping i in whole scope of loop by adding
(function(i) { })(i); inside loop. reference:stackOverflow
microcyberz sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @sorinr |http://www.freecodecamp.com/sorinr
@microcyberz yep. glad u made it. Is my twitch app working well for you: http://s.codepen.io/sorinr/debug/EymkWr ?
Good day everyone! Happy 4th of July America!
Happy 4th @AdventureBear !
Any good projects today?
Finishing my Weather project. It just needs the F/C changeover working
Then I have a real App project I have to finish this week so need to work on that. Objective-C based so little more my alley than all the front end JavaScript.
Does the :focus pseudo class work only with "input" in HTML?
@oiver55 it's primarily used with input but I think you can put it on anything
It looks like if you make some elements clickable for instance you might be able to add this focus class to it as well and then be able to tab to it. I haven't tried it.
Thanks I ask because I am trying to change the bkg color of my li whenever I am on it's corresponding page I was think :focus would do just that but it didnt work
Ah, no I don't think that's the intended use of it
Do you know how I would go about doing that?
I haven't tried it, but I am thinking.
Like this
If you go to the menu you'll see that the menu color changes when your on the page
that is the effect I would like to recreate
Ah I see what you mean
I know you can just use JQuery to change the color of the element.
Such as in this article on StackOverflow
Okay thanks will look into it
Let me see what they are doing on that page
okay
my image is not getting rounded by "image-round"...can anybody help
?
"image-rounded"
Just looking at the page source, it looks like they have a custom class they just set to primary link whatever page they are on. The primary link uses CSS to stylize the link to the color it is
<input class="button" type="submit" name="" value="Save All Settings">
So basically thinking through this, each page (they are using ASP and using a template system that subs in different html when you click each link) and they change the navigation link to that color of the page they are on. Does this help help at all to think through it @oiver55 ?
Whats ASP
It's a different set of technology. You don't need it. Forget I mentioned it. Just explaining what they did. It doesn't matter. Have you looked into bootstrap at all?
I guess I don't know how far down the projects you are so I don't know your level of understanding. I am sory.
Nope I have seem that phrase alot But I havent the vaguest Idea what it actually is
This is my very first website
Ah OK. well it is taught as a part of free code camp, so it is a part of the different lessons. Did you do the lessons?
I am recreating that website I just linked to you and one of the only things left is figuring out how to get the color change feature working
No I did not do the bootstrap lessons
Where are they?
OK. Well Boostrap has a navbar class that actually helps you our here a lot.
I think the bootstrap is a part of all the lessons from the beginning to end. I mean it is incorporated into the lessons
So if you are working through the lessons you will pick up on it
Okay
I don't know the specific lesson it is on. What lesson are you up to? And that is a very ambitious first web page you are trying to recreate.
It took me soooomme timmmme! but I am pretty much there now after lots of tutorials
What is bootstrap?
I know html 5 and css
I suggest you go through the Free Code Camp lessons. Bootstrap is introduced throughout the lessons. It is a part of this course.
okay sure
But here is the main bootstrap page
It is a set of CSS classes that make your HTML come together very nicely for fomatting, layout, the effect you are looking for, for example, is built into the navbar I linked to
Liek a set of templates?
So you can include boostrap on your codepen or html page or whatever you are using.. and then actually use the navbar class and set it up and it will highlight on the page you want
like*
CSS templates
Please go to the page and read it and do the lessons here and it will make sense.
I see, definitely
Sccz
@drbe4t I think you need to name your button so you can reference it
@aarontaylor Ah got it. Now how do I change the size of button?
The button does look correct either way. I size them using CSS class for the button
And then just set it in there if you need to adjust size
@drbe4t maybe this will help get you on the right path
What are you trying to do exactly?
trying to create a form.
I mean as far as stylizing the button. Sorry.
Are you just trying to make it a certain size?
oh haha no basically what you sent me from w3schools. Change the sizze and color
Ah, that link has lots of cool properties for buttons from colors to sizes to box shadows and width.. it is pretty good reference. I hope it helps
yeah it’s actually what I have been looking for but i never specified the new css3 rules
Ah yeah. Some of this is glossed over in the lessons. It really helps to poor through the online documentation. There is a lot out there you can do
how would you distinguisn a boolean object from a boolena primitive
is there a property i should be testing
@St3ps i think both should evaluate to true or false. can you give an example of a boolean object you have in mind? for an object usually u can check his length. like Boolean.length for a primitive var there is no way to check that
@St3ps are you doing falsy bouncer algorithm challenge? If so, I had to check each special case. There's prbly an easier way, but I found all the conditions I needed in stack overflow. Just remember that NaN isn't even equal to itself, so you can check for that by seeing if the object is equal to itself
Can anyone help me figure out why my portfolio won't open up in a mobile browser properly? http://codepen.io/seaofwhatremains/pen/oLwXYd
@bgeraci714 this should help some: in the html gear, at the bottom, click include most common meta viewport tag
Looks good btw @bgeraci714 like the color scheme and background! :)
@coffeebeanzz no dice :(
thanks!! I made the background myself
Man, what a drag haha
hey guys i added a navbar to my portfolio page, but i have no idea how to make it go to different parts of my page
@Rallph You want to use <a> tags but instead of href being an external link, you want to use an css id instead. That way it just moves you page to that id.
hey guys,did you use the minimax algorithm for the tic-tac-toe game? or some other algorithm?
@bgeraci714 alright thanks man
rallph sends brownie points to @bgeraci714 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @bgeraci714 |http://www.freecodecamp.com/bgeraci714
http://coast-guard-ricky-54527.bitballoon.com/ "New quote" button stops working when i make by browser window smaller and bootstrap make it xs from sm? Anyone had similar problem?
Alright I'm done with my portfolio page. Opinions?
http://codepen.io/Rallph/full/jAwqqE/
I'll add in my social media links last
http://codepen.io/Rallph/full/jAwqqE/
I'll add in my social media links last
@Rallph That red is bright!
@joshbivens yeah, but i'm not sure what other colors would fit in with the scheme
@Rallph Check this out: http://colorhunt.co/
@joshbivens wow this is pretty cool, thanks man!
rallph sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @joshbivens |http://www.freecodecamp.com/joshbivens
There's also a blog post on A List Apart about color theory
@Rallph Sure thing!
Has anyone else had trouble with geolocation deprecation? Look at my pen: http://codepen.io/joshbivens/pen/xVXwjq?editors=0010
What can I do?
@Rallph This one is similar to yours: http://colorhunt.co/c/33743
@joshbivens yes. I ran into same thing. check this out https://developers.google.com/web/updates/2016/04/geolocation-on-secure-contexts-only?hl=en
@joshbivens thanks again dude, but i think I'm gonna go with http://colorhunt.co/c/19113 because i like the brighter colors
rallph sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:warning: rallph already gave joshbivens points
@Rallph Nice!
@joshbivens you can use ipinfo.io or http://ip-api.com/json to get around issue
@jer244 Cool. Thanks so much.
joshbivens sends brownie points to @jer244 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @jer244 |http://www.freecodecamp.com/jer244
@jer244 Oh cool. Alright thanks again!
joshbivens sends brownie points to @jer244 :sparkles: :thumbsup: :sparkles:
:warning: joshbivens already gave jer244 points
@jer244 That's awesome. How do I use that in place of the getCurrentPosition() though?
Not sure, Lol... I haven't gone back to change mine yet. I assume it's just like any other JSON api though, just have to look into the particulars of the one you pick.
@jer244 Ah ok :)
@jer244
var data = "https://ip-api.com/json";
$.get(data, function(r) {
this.latitude = r.lat;
this.longitude = r.lon;
});
Something like this maybe...
@joshbivens thanks, did that work?
jer244 sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @joshbivens |http://www.freecodecamp.com/joshbivens
No, not yet, but I assume that's how you'd interact with it with
vue-resource (which is essentially AJAX for Vue). This is going to take a while.
anyone know why my tweet method is also adding the codepen url?
Measuring programming progress by lines of code is like measuring aircraft building progress by weight. -Bill Gates http://s.codepen.io/boomerang/0303a43c8aad0d99409efb48002dafeb1467648195271/index.html?editors=1011
function tweetIt () {
var phrase = $('.quote-author').text();
var tweetUrl = 'https://twitter.com/share?text=' + phrase
window.open(tweetUrl);
}
@yakschuss - you might not have the
http:// in front of it? (Or https://)?
what do you mean?
it's in the tweetUrl
im saying the "phrase" has additional info
@yakschuss - sorry, I misread your info...
no worries
@yakschuss - can you post the URL to your project?
@yakschuss not sure if your tweet url is correct
well, it opens up a tweet window lol
@joshbivens just an FYI, when I put https:// in front of my codepen url, the geolocation works.
https://twitter.com/intent/tweet?text=%20%20%20%20%20%20%20%20%20Measuring%20programming%20progress%20by%20lines%20of%20code%20is%20like%20measuring%20aircraft%20building%20progress%20by%20weight.%20%20%20%20%20%20%20%20%20-Bill%20Gates&url=http%3A%2F%2Fs.codepen.io%2Fboomerang%2F0303a43c8aad0d99409efb48002dafeb1467648195271%2Findex.html%3Feditors%3D1011&original_referer=http%3A%2F%2Fs.codepen.io%2Fboomerang%2F0303a43c8aad0d99409efb48002dafeb1467648195271%2Findex.html%3Feditors%3D1011
@jer244 Ok thanks. Still wont work for me :)
joshbivens sends brownie points to @jer244 :sparkles: :thumbsup: :sparkles:
:warning: joshbivens already gave jer244 points
hey! i dont have any JS or jQuery in it yet, but does the html / css here look ok?
https://codepen.io/colonelsheep/full/rLmqvw/
https://codepen.io/colonelsheep/full/rLmqvw/
@colonelsheep looks cool! I'd probably be more specific with your class declarations. How did you get the Font Awesome in there? I'm trying to do the same.
@colonelsheep :thumbsup:
@yakschuss get the link and put it in the codepen settings
fontawesome doesnt deliver via cdn
you need to download the minified
Using CSS
Copy the entire font-awesome directory into your project.
In the <head> of your html, reference the location to your font-awesome.min.css.
<link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css">
Check out the examples to start using Font Awesome!
ah thats better
I am pretty sure that link will work
@yakschuss - somehow, when you open that twitter URL, it is getting the source URL of your project, but I don't know how that happens, so I cannot explain it.
haha yeah im not sure whats going on with that
its appending &url
@yakschuss - go to your CodePen CSS config, in an external resource slot, type
font-awesome, it will suggest a URL, click that. (That one I DO know... :) )
i got it, thanks!!
@yakschuss - I did find a different problem with your code - I changed this line:
var phrase = $('#quote-target').text();So now it at least gets your quote text in there, too.
$("#btn").on("click", function() {
window.open("http://twitter.com/home/?status=" + $("#quote").text());
});
the quote text was in there
kirbyedy, that's what i did, just with jquery instead of JS
@khaduch quote-author denotes both the quote and the author
quote-target is just the quote
that was where i wanted the json data to go
@yakschuss - well, I wasn't seeing any quote at all - just a blank, or "undefined"... I'll have to reload your project and look again...
hmm.. if you dont have a quote in the div, it won't work.
generate a quote first by hitting "quote"
@yakschuss your tweet link is wrong, check the one I gave you
@yakschuss if youre trying to figure out how to put it in, it goes in the HTML head, which you can find in the pen settings. heres the code i used:
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
ah ok ill change that
thanks!
done!
thanks @khaduch @kirbyedy
yakschuss sends brownie points to @khaduch and @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1393 | @khaduch |http://www.freecodecamp.com/khaduch
:star2: 1188 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
as you can see, I suck at centering divs.
but thank you!
i like the fact that its CS quotes! :D
Hi people
@yakschuss remove width atribute in .header-border and it will center it
Would anyone like to help me with a UX project. Its a simple survey for people who have had a missing pet?
Hi people I started my protfolio project, I am using bootstrap and want my body to strech full screen, but my body leaves white space in both sides. Can any one help me?
@MitulIslam the problem is in the padding of class container-fluid that is set to 15px in both right and left
@MitulIslam you shouldn't need two container-fluids. It looks like you're not quite using bootstrap right; I made a really similar mistake and it took a few hours of reading over the bootstrap documentation and refactoring to make proper rows and columns
I would take the container-fluid out of the navbar entirely (it shouldn't be there, regardless of their example in the docs) and try to refactor the page to use rows and cols like bootstrap wants
docs on the grid: http://getbootstrap.com/css/#grid
another good article: http://www.helloerik.com/the-subtle-magic-behind-why-the-bootstrap-3-grid-works
thanks @fjoglar , I did not use container-fluid in css, is that bootstrap default rule? @quisling thank you for clearing that , I did not know about how grid system works
mitulislam sends brownie points to @fjoglar and @quisling :sparkles: :thumbsup: :sparkles:
:cookie: 267 | @quisling |http://www.freecodecamp.com/quisling
:cookie: 53 | @fjoglar |http://www.freecodecamp.com/fjoglar
yeah so by default the container-fluid will add 15px padding to each element; the other article I linked talks about that in-depth and explains why it does that and how to use it to help instead of hurt :)
$document.ready(function() {
$("#generate").click(function() {
$("div").html("hi")
});
});
GOD im a fool.. ok wait
when u forget the parentheses... nvm
hey guys i'm having a problem where my navbar won't expand when it's collapsed
http://codepen.io/Rallph/full/jAwqqE/
http://codepen.io/Rallph/full/jAwqqE/
@quisling dude your article is great :thumbsup: @ndburrus thank you :smile:
mitulislam sends brownie points to @quisling and @ndburrus :sparkles: :thumbsup: :sparkles:
:warning: mitulislam already gave quisling points
:cookie: 827 | @ndburrus |http://www.freecodecamp.com/ndburrus
@MitulIslam ...just curious - working with a mobile device app? i guess they all are, but the issue....
@ndburrus no did not use mobile device for test, my bootstrap grid and div positioning sucks :smile: trying to fix that
hey everyone =)
Hi @OrkaAethyr
Hi guys i know i said this earlier but i'm still having problems with my navbar. when the page size is reduced it won't expand
http://codepen.io/Rallph/pen/jAwqqE
http://codepen.io/Rallph/pen/jAwqqE
also when i view the page on my phone all the image links are broken
i'm a bit stuck on th lookUp challenge so i'm searching ^^
@Rallph you did not add link to bootstrap.min.js and jquery.js . bootstrap navbar does not work without it.
@MitulIslam you'll be an expert in no time! :paperclip:
- Mixins - scroll down to Mixins
- Bootstrap 3: Change Stacking Order
- Create a sleek custom page with Bootstrap
- Bootstrap Grid System - fastest method
- Understanding Bootstrap’s Grid System
- Bootstrap 3 Tips and Tricks You Might Not Know
- Creating Your Own CSS Grid System
- Bootstrap: Advanced Grid Tricks,
You really should be defining your own classes - The Subtle Magic Behind Why the Bootstrap 3 Grid Works
- How the Bootstrap Grid Really Works
in the lookup challenge I don't understand why using a if in a if and not a &&
@ndburrus great :+1:
@MitulIslam I added bootstrap.min.js and jquery but it's still not working
@Rallph - make sure you put jquery first, and bootstrap.js second... the ordering is necessary because bootstrap uses jquery, so jquery has to be loaded first.
how can i add the text below the border of the image into the border...as an overlay
and how can i get it responsive in a right way...
I'm working on the Twitch.TV API. I'm just testing out the api and seeing what the return is so I can see how I want to approach the project. I'm getting "unexpected end of script" when using this in developer console:
$.getJSON("https://api.twitch.tv/kraken/streams/freecodecamp?callback=?'", function(data){
JSON.parse(JSON.stringify(data));
console.log(data);
});@flindip - are you able to load jquery in the console? I'm just wondering if you are doing that some special way? I'm not sure I know of a way to do that, so it's a question of how do you do it?
I would just throw this into a codepen project and load jquery and then let it run?
@flindip remove
' after ? in url and try
@khaduch no, I mean the developer console in codepen. Jquery is loaded
@flindip - ah, okay...
@Rallph you need to add jquery first then bootstrap.min.js , I forgot to mention this serial
@khaduch should I wrap the code in another function or something?
@vinaypuppal oh I see
thanks @vinaypuppal @khaduch
flindip sends brownie points to @vinaypuppal and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 1394 | @khaduch |http://www.freecodecamp.com/khaduch
$(document).ready(function() {
$.getJSON("quotes.stormconsultancy.co.uk/random.json", function(wow) {
$("#word").html('"' + wow.quote + '"' );
});
});
@colonelsheep - try adding
http:// to your url?
@colonelsheep add protocol in url
http://
@vinaypuppal yeah, now I can see the object. Thanks again....
flindip sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave vinaypuppal points
still doesnt work :(
@colonelsheep check chrome console for any errors
@flindip :smile:
@khaduch when i try to add jquery and bootstrap using codepen bootstrap keeps going first
gahh i think its related to it not being https
@Rallph - you can just drag the boxes around on the JS config panel to move jquery on top.
@colonelsheep what error u got ??
'https://codepen.io/colonelsheep/pen/rLmqvw' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://quotes.stormconsultancy.co.uk/random.json'. This request has been blocked; the content must be served over HTTPS.send @ VM2331 jquery-2.2.4.min.js:4ajax @ VM2331 jquery-2.2.4.min.js:4n.(anonymous function) @ VM2331 jquery-2.2.4.min.js:4getJSON @ VM2331 jquery-2.2.4.min.js:4(anonymous function) @ VM2332 pen.js:2i @ VM2331 jquery-2.2.4.min.js:2fireWith @ VM2331 jquery-2.2.4.min.js:2ready @ VM2331 jquery-2.2.4.min.js:2J @ VM2331 jquery-2.2.4.min.js:2
VM2331 jquery-2.2.4.min.js:4 XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json. Failed to start loading.
VM2331 jquery-2.2.4.min.js:4 XMLHttpRequest cannot load http://quotes.stormconsultancy.co.uk/random.json. Failed to start loading.
@colonelsheep - you might need to use one of the proxy sites, like this:
'https://jsonp.afeld.me/?callback=?&url=http://quotes.stormconsultancy.co.uk/random.json'; (I think that is the correct terminology...)
@khaduch I'm doing that but every time i refresh the page it resets so botstrap is at the top
@colonelsheep yes as @khaduch suggested you must use proxy site like this
$.getJSON("https://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json", function(wow) {
console.log(wow);
});
@Rallph - can you post a link to your page, please?
@vinaypuppal @khaduch
there we go!! thanks
there we go!! thanks
colonelsheep sends brownie points to @vinaypuppal and @khaduch :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
:star2: 1395 | @khaduch |http://www.freecodecamp.com/khaduch
@khaduch http://codepen.io/Rallph/pen/jAwqqE
@Rallph - I have to run - I'll be back in 20 minutes or so... There might be another problem in your code, because I reordered them, and it is still not collapsing... Back ASAP...
@colonelsheep Futher if you want to understand why you got that error read this post http://forum.freecodecamp.com/t/cross-domain-error-i-thought-im-using-jsonp-so-whats-wrong/11012/6?u=jaytsecan
@Rallph you have to first add jquery and then bootstrap
@UtkarshShukla7 I did that but its still not working
@Rallph oh i found it
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#myNav">you wrote data-toggle="collapsed" a small typo :smile:
@vinaypuppal man oh man thank you! I was about to just start over from scratch
rallph sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
this typo has taken away hours of my life
@Rallph np :smile:
@Rallph - just checking back in - good that you and @vinaypuppal found it! Good luck!
@khaduch thanks man
rallph sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1396 | @khaduch |http://www.freecodecamp.com/khaduch
Alright guys just one more thing. On my page i have images hosted from imgur but firefox is giving me "mixed (insecure) display content" errors
@Rallph if u want placeholder images try http://placehold.it/ instead of imgur
@Rallph or use dropbox
to upload any picture and use it
@Rallph I find Cloudinary really good for hosting images for projects - www.cloudinary.com
@Rallph if u want host your own images try http://www.cloudinary.com instead of dropbox because you can Manipulate your images dynamically to fit any graphics design
@vinaypuppal @JamesRiall @UtkarshShukla7 ok thanks guys I think I'm just gonna use placehold.it for now but i'll keep cloudinary in mind
rallph sends brownie points to @vinaypuppal and @jamesriall and @utkarshshukla7 :sparkles: :thumbsup: :sparkles:
:warning: rallph already gave vinaypuppal points
:cookie: 766 | @utkarshshukla7 |http://www.freecodecamp.com/utkarshshukla7
:cookie: 320 | @jamesriall |http://www.freecodecamp.com/jamesriall
@Rallph np :+1:
Okay, I've got my nav bar working on mobile but i still can't get any of my rows to load up below my welcome area
The rows from my page still aren't loading which is utterly confounding http://codepen.io/seaofwhatremains/pen/oLwXYd
@bgeraci714 which rows? I see a div with a bunch of stuff in it
everything below the jumbotron
heck, everything even loads perfectly in chrome's dev tools too
(where it emulates a mobile device)
hmm.. I'm seeing your stuff
like your thumbnails and about etc.
on mobile?
do you mean on an actual mobile device or on the chrome tools?
let me load it up
it shows up on a desktop, and in chrome's mobile emulation (through the dev tools), but not on my phone when i try to look at it
i've changed the meta data so it knows to look for the viewport
Thanks @dhcodes for taking a look.
bgeraci714 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1164 | @dhcodes |http://www.freecodecamp.com/dhcodes
how do i get rid of the white blank space between my third and fourth scroll page ? http://codepen.io/pkrueck/pen/WxozOP
@bgeraci714 loads on my android phone
hm, that's so weird
@pkrueck remove this line
margin-top: 20%; from your .contact-box
@pkrueck also, for full screen views, you want to use
min-height: 100vh instead of height: 100vh
thank you :) @dhcodes
pkrueck sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1165 | @dhcodes |http://www.freecodecamp.com/dhcodes
you're welcome
Hi all.
I have a really frustrating problem with headers that i've now been on with for hours.
I've attached a codepen link.
If I put some text into section, it works.
As soon as I try to do more it doesn't want to scroll properly and I really can't get my head around why?
The scrolling part overlaps my header
Can anybody help, please!
I want to add a lot more to this page but cannot get past the basics
I think your row might need a "container" class
Without that, it's just a floating row
Hello Guys how are u??
<div class="container">
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
<div class="col-sm-4">
One of three columns
</div>
</div>
</div>
in the bootstrap website's example, you need to place your rows inside their own container for proper content management
@damianpcollier Tell me if that works
on with it now Blake. will let you know soon
@bgeraci714 no good i'm afraid. It looks like it is something to do with row but I just can't see what. http://codepen.io/collierd/pen/BzkdbG
how do i move my h1 down? it's at the top of the page.
http://codepen.io/pkrueck/pen/WxozOP
http://codepen.io/pkrueck/pen/WxozOP
@pkrueck add to
.title {position: relative; top: 100px}
thanks @dagman
pkrueck sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:cookie: 596 | @dagman |http://www.freecodecamp.com/dagman
why doesn't it work with percent though ?
@pkrueck let me think about it
thanks
Hey guys can some one tell me if it's possible to center a <ul> vertically?
Hey guys! I just finished my second project the Portfolio,please take a quick look, i need your feedback.Thanks again guys! http://codepen.io/M33x0/full/JKjZrx/
@betterman77 you can
@pkrueck i think the catch is % values works if position is absolute cos in this case you position element relatively his parent height but when position of element is relative you position element relative himself
@M33x0 looks nice but i think you should try something else instead of bold when the nav text is hovered :)
@uniforlyff any clues please?I've tried a few things I found online but couldn't get it to work
you can use display: flex
@betterman77
looks awesom @M33x0
Nice one @M33x0 . Looks really good. I'm just on with mine at the moment
@betterman77 and set align-items to center
there ya go :)
Thanks @uniforlyff I'll give that a go
betterman77 sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
:)
thanks @dagman
pkrueck sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:warning: pkrueck already gave dagman points
@pkrueck you may enjoy these: :sparkles:
thank you @ndburrus
pkrueck sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 834 | @ndburrus |http://www.freecodecamp.com/ndburrus
@pkrueck you're welcome! enjoy :paperclip:
Guys, I'm currently having a trouble with local weather app challenger, so is this the place to ask for help ?
@betterman77 these may be helpful :paperclip: :
@Harry97 this is the place, do you have a link ?
yeah, here it's : http://codepen.io/Hadouken/pen/BKjBKd
Looks like z-index:1 fixes my issues as it gives precedence to the header!
My problem is being unable to convert the temperature from celsius to fahrenheit and back properly
@Harry97 this is a common problem with geolocation
oh , it is working for you? I get this error: 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 let me change the codepen url to https to get it to work...
oh that error I still get it
Thanks @ndburrus
betterman77 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 835 | @ndburrus |http://www.freecodecamp.com/ndburrus
I just use internet explorer to view my project
@betterman77 you're welcome :) enjoy...
Codepen isn't okay I suppose with me putting my API key out there @nawrockp
even tho I've enabled geo location detection in chrome
welll I think everyone has to do it that way
not really a way to hide your api keys
at least not in front end javascript
hold on, still getting
errors in chrome
fixing
Can't you open up internet explorer or firefox ?
chrome has a pretty strict security measures
yeah , let me see but it seems to be the api that is refusing the connection
How do you like my wikipedia viewer guys http://codepen.io/hristijankiko/full/begqzV/
@Harry97 yeah says its -112 degrees
I am in Argentina, but its not that cold here!
lets see
:D
@hristijankiko It seems to be working great
@Harry97 Thanks :D
hristijankiko sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
I guess my only complain about it is how it looks regarding aesthetic view and what not
but other that that I wish I can code like you :D
You will code like me xD
@Harry97 I don't see that the api is returning anything, which might be a security issue. And as far as the f/c conversion it seems the code only subtracks 56 from the temperature when its clicked on.
@nawrockp yup and there lies my problem I only want it to subtract once and then disable the celsius button then if the fahrenheit button is clicked it shall add 56 or in other words set it back
as it displays temperature in fahrenheit in the first place
I've created an if statement to organize this procedure through setting a variable but it just seems not to be working and I believe I did something wrong regarding whether to use html or text or val
well I think in this case html and text will do the same thing
@pkrueck Thank you very much :) @damianpcollier :) thanks ,okay happy coding @uniforlyff :) thank you i will try to change that
m33x0 sends brownie points to @pkrueck and @damianpcollier and @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @damianpcollier |http://www.freecodecamp.com/damianpcollier
:cookie: 121 | @pkrueck |http://www.freecodecamp.com/pkrueck
:cookie: 374 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
but you cant just add or subtract 56 to convert from f to C and vice-versa
that's what I've tried to do with fahrenhiet button but it doesn't simply add just in the celsius button it concatenates
you can try to replicate it and add +56 at the end of the fahrenhiet button and you shall see for yourself
also the problem of allowing the subtraction or addition to only fire once then be disabled to allow for the other button to be clicked if needed
ok, so let me try this, adding the formula to convert
then lets see how to disable that button
anyone think they could help me with the sizing of my thumbnail images in bootstrap?
I thought the thumbnail class should inherently make the images a uniform size. i tried setting the images to the exact same size and they became closer but one of the thumbnail boxes is clearly a bit larger than the others
@jrandallhansen which box are you talking about specifically ?
All of your thumbnails seem to be of the same size
the one on the far left is slightly larger
and if you remove the class that i added to the images to size them then you can really see the difference. i thought the bootstrap thumbnail class made them the same size by default?
classes do inherit their properties to any element it's attached to
let me take a look
they'are*
i had thought bootstrap's thumbnail class instantly made them all the same size. once i realized that didnt happen i sized the images. i'm thinking i should have applied the style to a different element instead of the actual images
Hi. I'm a bit confused about structuring a javascript project code in codepen. I ended up using object literals (eg view, game), with "instance variables" (eg obj.status) and "methods" without arguments (eg getStatus(), updateStatus()).
But I read that it's good to use "pure functions" in JS, for easy testing (I'd like to try out TDD later on). So am I doing it all wrong? (since my methods are not pure functions). Should I have used an all-functional approach to the code structure?
Needing help......Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.
@Harry97 are you still there?
I'm using JSfiddle as a console to test code: Its not really returning me anything when I run this:
$(document).ready(function(){
var userArr=["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
function displayUsers(){
for(var i=0; i<userArr.length; i++){
console.log(userArr[i]);
}
}
});I'm basically just testing the array...
@nawrockp Yeah
yeah firefox really bogging down for me, not sure why but I forked your pen and here is what I think you were trying to achieve
how to nest div class within a button class?
@jrandallhansen Adding bootstrap thumbnail class would only grant them four pixels of padding and a gray border and an on hover, an animated glow outlines the image.
but it won't really do anything regarding the size of them
Ok thank you. I wonder why applying that to images I sized exactly the same would come up different sizes. so frustrating lol
that's why adding a separate class to customize them was the way to go
you did great
thanks man! still it's not exactly right. ill read more on that link
@harry, there is some obvious floating point issues there. It might be better to do the math first and save the celcius temp as a data attribute
that link answered it right away!
@jrandallhansen glad it worked for ya ^^
@Harry97 it is because i need to add the class "thumbnail" to the div instead of the a tag since i added extra content. finally have a fix for the issue!
if you add a header, button or other content then apply the class to the div instead of the a tag :)
@nawrockp I'm trying to view your forked version
@Harry97 you cant? let me try saving it again
when I click change view I only have editor view and cross broswer testing view
It's ok tho I copying the code into my project to see what effect it has on it
hm, hold on trying to login with ff and its slow
@nawrockp In the celsius click function, could you please elaborate on this line ! <if (isFaren === false) return;>
what's the role of return ?
and in the fahrenheit click function too
is it some sort of a shortcut so as to not write "{}" ?
ok, if farenheight is already being shown, just exit the function
also note that that conditional is inside the function, the way you had it it was outside the function, so it would always be set to true
I think it was true, hold on....
ok, it seems you changed the code but it was something like this
var boolean=true;
if(boolean == true ){ ... / do something
if(boolean == true ){ ... / do something
yeah
you want it inside the function
@Shawn405 these may be useful :sparkles: :sparkles:
I've changed the code was trying out different solutions
ok, and as I mentioned, coverting the temperature every time probablly isnt' the most efficient way to do it
perhaps when you get the api temp back you could calculate the temp in celcius and then add it as an attribute somewhere
or even put it in a separate container and just hide it
when they click on celcuis, unhide it and then hide farenheight
you could hide them easily using jquery toggle
I'm not the that good with api in general that's why I opted for a javascript solution and tried to convert it on my own
yeah, well everyone seems to have issues with these apis, and the geolocation
but you got the temperature out of it, thats the important part. And at least where I am the api does not return the temp in celcius, so you would have to calculate it
and if you want to round those numbers to integers you could use this: http://www.w3schools.com/jsref/jsref_round.asp
although I think if you start rounding numbers and re-calculating the numbers will become inaccurate
@nawrockp so I'd calculate them first then round if needed, correct ?
Hi all, I've sort of struggled through this wikipedia view challenge and I can't figure out what's wrong with this code
yeah, let me see if I can restart firefox to see if it speeds up any...
Here is the link if anybody could help me figure out what's wrong. Thanks in advance!
@Harry97 there is one solution using jquery attr
@nawrockp Thank you so much dude for you time and effort
harry97 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @nawrockp |http://www.freecodecamp.com/nawrockp
@Harry97 np. @tbc13315 I am getting these errors in the console
jquery-ui.min.js:6 Uncaught ReferenceError: jQuery is not defined
VM2832 pen.js:2Uncaught TypeError: Cannot read property 'val' of null
VM2832 pen.js:2Uncaught TypeError: Cannot read property 'val' of null
@tbc13315 perhaps loading jquery before jquery ui would work
@ndburrus those are great links. Thank you
jcssll sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 838 | @ndburrus |http://www.freecodecamp.com/ndburrus
@jcssll you're welcome! enjoy :paperclip:
hello! is it ok for me to ask how to insert... skycons into codepen?
i inserted this into the js: https://cdnjs.cloudflare.com/ajax/libs/skycons/1396634940/skycons.min.js
but i cant figure out how to actually access them :'(
@colonelsheep this may be useful:
File: skycons.js
Include any animated weather icon from Skycons
[skycon]File: skycons.js
Include any animated weather icon from Skycons
@ndburrus I will. Do you also have good references for node js by any chance
@jcssll what are you working on?
currently i am in school at Rutgers where we are working on a project using node.js to make jarvis which should be able to pull twitter feeds, imdb and I believe sound cloud
but I am working on my javascript now on this site to become better with node @ndburrus
I need help with navbar alignment. Please take a look and see if you can help https://codepen.io/Octopinky/pen/BzRXbv
@jcssll these may be helpful: :sparkles:
Great @ndburrus
Hey Peeps
@Octopinky what is wrong with it? I only see that it is not full width on desktop
This message was deleted
@nawrockp Yes, it is not full width. I would like it to be 90% width when it drops down from hamburger menu. So, if I set the width to 100% in the navbar setting, then the width of dropdown also changes. I am trying to get the result as close as possible to this menu https://codepen.io/FreeCodeCamp/full/YqLyXB/
Alright @ndburrus thanks again
jcssll sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:warning: jcssll already gave ndburrus points
@jcssll anytime! :ice_cream:
@ogla I am not any expert in Bootstrap menus, but I will take a look
@nawrockp also, the vertical alignment of name brand and hamburger menu is off. I have been looking at it for a loooong time now. I am getting there, though. Sometimes I get frustrated, and am just tempted to start from scratch... Oh, well. I can do this :) cheerleading
@nawrockp cool thanks
octopinky sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @nawrockp |http://www.freecodecamp.com/nawrockp
it seems that when the menu opens, it adds the .in class to the #octopinky-navbar. So if you wanted it to be 90% only when opened you could do this: #octopinky-navbar.in{width:90%}
seems like it should work, let me try
@jcssll did you get that last link - i accidently deleted the comment. if not...
and good luck with the project...
@ogla vertical aligning is always tough. You could use display table, and table-cell or Flex, but I don't recommend it.
but in your case the header seems to be the same height, at all but the smallest of screen sizes
@nawrockp ken, I just now figured out hot to vertically align using padding. I know its not the best solution, it will work for me for now I guess. I will try the width now
@Octopinky one way I use to vertical align text is setting the line height to the same as the parent container. So for example for the "Beautiful by design" text : .navbar-brand {
float: left;
height: 64px;
padding: 0px 15px;
font-size: 18px;
line-height: 64px;
}
float: left;
height: 64px;
padding: 0px 15px;
font-size: 18px;
line-height: 64px;
}
@nawrockp it you refresh, you will see the changes. Now the width is at 90%, however it goes through the transformation phase or something, where the dropped down menu starts at 100% width and then changes to 90%
ah, lets see
yup, I see it
Should I use bootstrap or just do it all on my own
@T-Leonard what task are you talking about?
When I start my portfolio page
@T-Leonard I have seen people go both ways: some use bootstrap, others do not. I personally am using bootstrap.
Really just in general doing projects cause I kinda feel like it's cheating lol.
@T-Leonard I think it is not cheating when you are doing it on your own. In the end - you want to learn, right? (At least those are the arguments that I tell myself, when I feel like just copy-pasting the answer and moving on)
@Octopinky yea that's what I kinda meant that if I'm trying to learn should I be using it.
@Octopinky sorry had to open the door for someone, back now. Yeah, I see what you mean and what I try does not work. Surely though someone has had the same issue.
Thanks @nawrockp!!!! Actually loading the jqery before jquery ui didnt work.
:cookie: 331 | @nawrockp |http://www.freecodecamp.com/nawrockp
tbc13315 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
@nawrockp lol. I have been playing around with it and found that this works ```#octopinky-navbar.navbar-collapse.collapse{width:100%;}
octopinky-navbar.navbar-collapse.collapse.in{width:90%;}```
```#octopinky-navbar.navbar-collapse.collapse{width:100%;}
octopinky-navbar.navbar-collapse.collapse.in{width:90%;}
ha ha. sorry. Still dont know how to paste code in here
#octopinky-navbar.navbar-collapse.collapse{width:100%;}
#octopinky-navbar.navbar-collapse.collapse.in{width:90%;}
omg, I somehow pasted the code.
@nawrockp thank you for your help
octopinky sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:warning: octopinky already gave nawrockp points
@Octopinky no problem, but really you did it on your own!
I'm trying to get the TwitchTV api project started and I've never used twitch before and honestly I'm not sure where to start, I made the ajax call and I have some data back but not sure how to interpret that data.
The data thats returned doesnt have a status to tell whether someone is currently streaming or not. can someone provide some clarity around this?
how do i get data from the twitch API with using just the base link?
to get streams i try to do this: var streams = data._links.channel + "/" + "freecodecamp"; butit just gives me the url, not data from that url
@MrPierre1 do you have a link?
@nawrockp http://codepen.io/MrPierre1/pen/jAwAJx
check the console logs
@MrPierre1 I never did the twitch tv challenge, just to let you know, but I might be able to help if its something javscript related
I'm thinking about skipping this challenge too, the directions are clear but I have no prior knowledge of twitch which makes it harder to do.
well I see that the object is returned correctly from the call
and there is something under .data
right, not sure what that data tells me and or how to use it for the first user story.
I was expect to see a status property in the data object
yeah, I gotcha, let me check out the example they give in the challenge
is this wrong for twitch challenge:
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "MedryBW", "comster404"];
var url = 'https://api.twitch.tv/kraken/';
for(var channel in channels) {
url += 'streams/' + channels[channel];
}
http://codepen.io/kevinkuehler/pen/bZREpr
Why can't I get temporary author at the bottom right of the div
Why can't I get temporary author at the bottom right of the div
it has to do with min height
@96street that should work, log url to console.
you are going to get a really long url string
`
for (...) { url = https://twitch/streams/channels[channel]; do_json_stuff_here(url); } might be more what you are aiming for.
for (...) { url = https://twitch/streams/channels[channel]; do_json_stuff_here(url); } might be more what you are aiming for.
console is showing a 'GET' error @calicode
var channels = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "MedryBW", "comster404"];
var url = 'https://api.twitch.tv/kraken/';
for(var channel in channels) {
url += 'streams' + channels[channel];
}
$.ajax({
url: url,
dataType: 'jsonp',
success: function(data) {
console.log(url);
console.log the url before your ajax call
u need to do 1 request per name....
"http://url1http://url2http://url3http://url4" wont work
@96street
"http://url1http://url2http://url3http://url4" wont work
@96street
i need to make a url for every channel?
still error @calicode
what does the console.log look like
and yes
you have to make a separate call for each one
so you can take a base url api.switch.tv/krakren/streams. and append the name on when you make a call
yeah that's what i doing
the way your doing it though, just keeps appending them all on
and then eventually tries to make an api call
with a giant url of every name appended
yep just like that
wait so i can't use the base url, i have to use the base url + streams?
thats not the problem
its that you are trying to call
@kevinkuehler let me take a look.
@kevinkuehler
```.quote-author {
position:absolute;
bottom:0;
left:0;
padding-right:13px;
margin-bottom:26px;
}```
seems to do the trick
instead of api.twitch.tv/kraken/streams/esl_sc2
This message was deleted
and then
ah right
Hi again everyone, I still cannot get this wikipedia viewer to work. I don't even think it's trying to get the info from wikipedia. If anyone that completed the challenge might know what I'm doing wrong, I'd appreciate it.
so my for in loop is putting every channel name on the end of the url?
yep
how do i make a seprerate call for each one? bit stuck