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.
.footer a {
color: #777;
}
<ul>
and <li>
because it looks like that is where the style comes from.
:cookie: 176 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
benmhz sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
.navbar-nav > li > a
, so it has to be a similar structure for it to apply the style as they define it.
@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.)
float: right
is floating to the right. Are you trying to create the same page layout as that image? Is that the assignment?
@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.
rallph sends brownie points to @aarontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @aarontaylor |http://www.freecodecamp.com/aarontaylor
drbe4t sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1392 | @khaduch |http://www.freecodecamp.com/khaduch
id="syntax"
attributes from the radio inputs looks like it make the syntax highlighting area better.
@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.
@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 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: drbe4t already gave khaduch points
@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.
drbe4t sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:warning: drbe4t already gave khaduch points
please take a look if you have a moment
chaddean82 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1162 | @dhcodes |http://www.freecodecamp.com/dhcodes
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?
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
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"
hoxtygen sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 381 | @jwoo92 |http://www.freecodecamp.com/jwoo92
hoxtygen sends brownie points to @bbajcetic :sparkles: :thumbsup: :sparkles:
:cookie: 122 | @bbajcetic |http://www.freecodecamp.com/bbajcetic
hoxtygen sends brownie points to @bbajcetic :sparkles: :thumbsup: :sparkles:
:warning: hoxtygen already gave bbajcetic points
var URL = "https://api.twitch.tv/kraken/users/"+usernames[i]+"/follows/channels/?callback=?";
$.getJSON(URL).done(function(data){
console.log(URL);
});```
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.
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);
});
}
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.
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.
str = str.replace(/[\W_]/g,'').toUpperCase();
a-y-u-s-h sends brownie points to @benalron :sparkles: :thumbsup: :sparkles:
:cookie: 345 | @benalron |http://www.freecodecamp.com/benalron
@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;
}
aarontaylor sends brownie points to @rallph :sparkles: :thumbsup: :sparkles:
:cookie: 133 | @rallph |http://www.freecodecamp.com/rallph
thejamiecrawford sends brownie points to @uolcano :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @uolcano |http://www.freecodecamp.com/uolcano
(function(i) { })(i);
inside loop. reference:stackOverflow
microcyberz sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 427 | @sorinr |http://www.freecodecamp.com/sorinr
<input class="button" type="submit" name="" value="Save All Settings">
did I set up this input submit button correctly?
rallph sends brownie points to @bgeraci714 :sparkles: :thumbsup: :sparkles:
:cookie: 124 | @bgeraci714 |http://www.freecodecamp.com/bgeraci714
rallph sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 350 | @joshbivens |http://www.freecodecamp.com/joshbivens
rallph sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:warning: rallph already gave joshbivens points
joshbivens sends brownie points to @jer244 :sparkles: :thumbsup: :sparkles:
:cookie: 331 | @jer244 |http://www.freecodecamp.com/jer244
joshbivens sends brownie points to @jer244 :sparkles: :thumbsup: :sparkles:
:warning: joshbivens already gave jer244 points
var data = "https://ip-api.com/json";
$.get(data, function(r) {
this.latitude = r.lat;
this.longitude = r.lon;
});
jer244 sends brownie points to @joshbivens :sparkles: :thumbsup: :sparkles:
:cookie: 351 | @joshbivens |http://www.freecodecamp.com/joshbivens
vue-resource
(which is essentially AJAX for Vue). This is going to take a while.
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);
}
http://
in front of it? (Or https://
)?
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
joshbivens sends brownie points to @jer244 :sparkles: :thumbsup: :sparkles:
:warning: joshbivens already gave jer244 points
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!
font-awesome
, it will suggest a URL, click that. (That one I DO know... :) )
@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());
});
tweet button should look something like this
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"/>
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
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 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
$document.ready(function() {
$("#generate").click(function() {
$("div").html("hi")
});
});
does anyone know why this isnt working?
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
$.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?
'
after ?
in url and try
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 + '"' );
});
});
can anyone figure out why this isnt working? ill make it work with a button after i figure out how to make a quote actually.. appear first
http://
to your url?
http://
flindip sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:warning: flindip already gave vinaypuppal points
'https://jsonp.afeld.me/?callback=?&url=http://quotes.stormconsultancy.co.uk/random.json';
(I think that is the correct terminology...)
$.getJSON("https://crossorigin.me/http://quotes.stormconsultancy.co.uk/random.json", function(wow) {
console.log(wow);
});
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
@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:
rallph sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 382 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
rallph sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 1396 | @khaduch |http://www.freecodecamp.com/khaduch
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
bgeraci714 sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1164 | @dhcodes |http://www.freecodecamp.com/dhcodes
margin-top: 20%;
from your .contact-box
min-height: 100vh
instead of height: 100vh
pkrueck sends brownie points to @dhcodes :sparkles: :thumbsup: :sparkles:
:star2: 1165 | @dhcodes |http://www.freecodecamp.com/dhcodes
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
.title {position: relative; top: 100px}
pkrueck sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:cookie: 596 | @dagman |http://www.freecodecamp.com/dagman
betterman77 sends brownie points to @uniforlyff :sparkles: :thumbsup: :sparkles:
:cookie: 372 | @uniforlyff |http://www.freecodecamp.com/uniforlyff
pkrueck sends brownie points to @dagman :sparkles: :thumbsup: :sparkles:
:warning: pkrueck already gave dagman points
pkrueck sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 834 | @ndburrus |http://www.freecodecamp.com/ndburrus
betterman77 sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 835 | @ndburrus |http://www.freecodecamp.com/ndburrus
hristijankiko sends brownie points to @harry97 :sparkles: :thumbsup: :sparkles:
:warning: could not find receiver for harry97
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
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?
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...
harry97 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 329 | @nawrockp |http://www.freecodecamp.com/nawrockp
jcssll sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:cookie: 838 | @ndburrus |http://www.freecodecamp.com/ndburrus
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 :'(
[skycon]
jcssll sends brownie points to @ndburrus :sparkles: :thumbsup: :sparkles:
:warning: jcssll already gave ndburrus points
octopinky sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 330 | @nawrockp |http://www.freecodecamp.com/nawrockp
@jcssll did you get that last link - i accidently deleted the comment. if not...
and good luck with the project...
:cookie: 331 | @nawrockp |http://www.freecodecamp.com/nawrockp
tbc13315 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
#octopinky-navbar.navbar-collapse.collapse{width:100%;}
#octopinky-navbar.navbar-collapse.collapse.in{width:90%;}
@nawrockp here, I saved the changes. If you refresh you will see it
octopinky sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:warning: octopinky already gave nawrockp points
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
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];
}
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);
@kevinkuehler
```.quote-author {
position:absolute;
bottom:0;
left:0;
padding-right:13px;
margin-bottom:26px;
}```
seems to do the trick