<div class = "">
<form style="display: inline" action="http:/facebook.com" method="get">
<button>Visit Website</button>
</form>
</div>
<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
https://facebook.com
, but I don't think that will work in an iFrame
defane-albaster sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 239 | @skycoder01 |http://www.freecodecamp.com/skycoder01
<div class = "">
<form style="display: inline" action="http:/facebook.com" method="get">
<button>Visit Website</button>
</form>
</div>
<h1>Webpage Design:</h1>
<h4>Showcasing What I Have Learned in FreeCodeCamp</h4>
what is the purpose of style= "display: inline"
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form style="display:inline"><button>inline form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<form><button>regular form</button></form>
<button>button</button>
<button>button</button>
<button>button</button>
zackrich12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 240 | @skycoder01 |http://www.freecodecamp.com/skycoder01
div
elements responsive, but that gives me a rectangle when I would like my game board to remain square at all times.
mattiheubner sends brownie points to @fattone225 :sparkles: :thumbsup: :sparkles:
:cookie: 408 | @fattone225 |http://www.freecodecamp.com/fattone225
isaaknazar sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1176 | @sorinr |http://www.freecodecamp.com/sorinr
.silver-background {
background-color:silver
}
this should go under style
erpriyanka sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 431 | @heydante |http://www.freecodecamp.com/heydante
:cookie: 156 | @arashdai |http://www.freecodecamp.com/arashdai
bookofbash sends brownie points to @arashdai :sparkles: :thumbsup: :sparkles:
judge2dt sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 432 | @heydante |http://www.freecodecamp.com/heydante
videogc sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 433 | @heydante |http://www.freecodecamp.com/heydante
<div class="thumbnail">
<img src="https://dfmonet.files.wordpress.com/2012/09/astral_14-sept-65daysofstatic.jpg" alt="65daysofstatic" class="img-responsive">
<div class="caption text-center">
They made really fantastic music.
</div>
</div>
Hi, guys. What's wrong with this thumbnails? It just don't work.
well from what I see that image should be responsive.. When you resize the browser ,does it decrease in size?
No, cause I am idiot that use img-responsive on image nested in <div class="container">
Hi, guys. What's wrong with this thumbnails? It just don't work.<div class="thumbnail"> <img src="https://dfmonet.files.wordpress.com/2012/09/astral_14-sept-65daysofstatic.jpg" alt="65daysofstatic" class="img-responsive"> <div class="caption text-center"> They made really fantastic music. </div> </div>
tr:nth-child(odd) { /* Replace this with 'even' to affect even rows (2,4,6,...) */
background-color:orange; /* Any color you wish */
}
davidespinoza sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 392 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
evaderei sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 393 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname)
danraybernard sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 394 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
background-size: cover;
stopped working. For no discernable reason...
width
not width-size
img{
width: 20px;
}
zeddmacharia sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 395 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
action
attribute
$("#formId").submit(function(e){
return false;
});
evaderei sends brownie points to @aboorde :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @aboorde |http://www.freecodecamp.com/aboorde
zhann1982 sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 396 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/", function(json) {
$(".quoteText").html(JSON.stringify(json));
}); }); });
myteststudy sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getQuote(" http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&jsonp=parseQuote", function(json) {
$(".quoteText").html(JSON.stringify(json));
}); }); });
lawfets sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 423 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
lawfets sends brownie points to @lazypterodactyl :sparkles: :thumbsup: :sparkles:
:cookie: 316 | @lazypterodactyl |http://www.freecodecamp.com/lazypterodactyl
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @achudoz |http://www.freecodecamp.com/achudoz
evandcp sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:warning: evandcp already gave achudoz points
achudoz sends brownie points to @nani554 :sparkles: :thumbsup: :sparkles:
:cookie: 262 | @nani554 |http://www.freecodecamp.com/nani554
can someone help me debug this scss?
$weights: 100,200,300,400,500,600,700,800;
$formats: 'opentype','opentype','opentype','truetype',
'opentype','truetype','opentype','opentype';
$fonts: 'Montserrat-Hairline.otf','Montserrat-UltraLight.otf','Montserrat-Light.otf',
'Montserrat-Regular.ttf','Montserrat-SemiBold.otf','Montserrat-Bold.ttf',
'Montserrat-ExtraBold.otf','Montserrat-Black.otf';
@mixin fontFace($weight) {
$i: index($weight, $weights);
@font-face {
font-family: "Montserrat";
src: url("static/fonts/" + nth($fonts, $i)) format(nth($formats, $i));
font-weight: $weight;
}
}
using it like this:
@import './montserrat.scss'
@include fontFace(600)
@include fontFace(400)
I get this error:
error in ./src/App.vue
Module build failed:
undefined
^
Media query expression must begin with '('
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en", function(json) {
$(".quoteText").html(json);
}); }); });
index(list, item)
not index(item, list)
, and semicolons after include and import statements :)
XMLHttpRequest cannot load http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=json&lang=en. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://s.codepen.io' is therefore not allowed access.
HTTP
and the tweet button uses HTTPS
response.15401469.extract
, I think
opensearch
action instead of query
, I believe it's better suited for this challenge
for..in
syntax ?? or Object.keys
??$(#"element-id").html();
var canali = ["freecodecamp","streamerhouse","monstercat","nintendo"];
$.each(canali, function(){
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i]+"?",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
i
?? where is declared ? what values it have? @Gentarozzo
wisekodama sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2705 | @moigithub |http://www.freecodecamp.com/moigithub
i =0
@moigithub var canali = ["freecodecamp","streamerhouse","monstercat","nintendo"];
$.each(canali, function(){
var i = 0;
i++;
$.ajax({
type: "GET",
url: "https://api.twitch.tv/kraken/streams/"+canali[i]+"",
contentType: "application/json; charset=utf-8",
async: false,
dataType: "json",
success: function (data){
var obj = data.stream;
$("#riga").append(obj.game)
}
})
})
@Gentarozzo
$.each([ 52, 97 ], function( index, value ) {
alert( index + ": " + value );
});
http://api.jquery.com/jquery.each/ << example from here
gentarozzo sends brownie points to @moigithub :sparkles: :thumbsup: :sparkles:
:star2: 2706 | @moigithub |http://www.freecodecamp.com/moigithub
myteststudy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 428 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
styrene sends brownie points to @ghulamshabir :sparkles: :thumbsup: :sparkles:
:star2: 1861 | @ghulamshabir |http://www.freecodecamp.com/ghulamshabir
deanhollstrom sends brownie points to @heydante :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @heydante |http://www.freecodecamp.com/heydante
tensax31 sends brownie points to @moi238 :sparkles: :thumbsup: :sparkles:
:cookie: 284 | @moi238 |http://www.freecodecamp.com/moi238
$(document).ready(function() {
$(".nextButton").on("click", function(){
$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(a) {
$(".quoteText").append(a[0].content + "<p>— " + a[0].title + "</p>")
}); }); });
append
, you need to use .html()
like you were doing before
append()
:
The append() method inserts specified content at the end of the selected elements.
html()
:
The html() method sets or returns the content (innerHTML) of the selected elements.
$.ajaxSetup({cache: false});
if (this.trim().length() > 0) {
console.log(this);
} else {
console.log("error");
}
myteststudy sends brownie points to @fortmaximus :sparkles: :thumbsup: :sparkles:
:cookie: 429 | @fortmaximus |http://www.freecodecamp.com/fortmaximus
charlesdarkwind sends brownie points to @lazydesigner :sparkles: :thumbsup: :sparkles:
:warning: @lazydesigner's account is not linked with freeCodeCamp. Please visit the settings and link your GitHub account.
myteststudy sends brownie points to @tylermoeller and @fortmaximus :sparkles: :thumbsup: :sparkles:
:warning: myteststudy already gave fortmaximus points
:star2: 1494 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
&_jsonp=?
at the end of the URL, instead of &callback=?
it works too
cache: false
in that second code example
filter[posts_per_page]=1
and then grab a random one.
myteststudy sends brownie points to @fortmaximus and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: myteststudy already gave fortmaximus points
:warning: myteststudy already gave tylermoeller points
var sure = {
first:"what",
second:2
}
data
if you do this:$.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1&callback=", function(data) {
console.log(data); // the data will be logged to the console
});
var currWeather = new Array();
currWeather['currTemp'] = Math.round(data.main.temp);
currWeather['description'] = data.weather[0].description;
currWeather['icon'] = "http://openweathermap.org/img/w/"+data.weather[0].icon+".png";
currWeather['cloudiness'] = data.clouds.all;
currWeather['city'] = data.name;
In that Quotes API, for example, they return this:
[{
"ID": 78,
"title": "Chris Bangle",
"content": "<p>Designers think everything done by someone else is awful, and that they could do it better themselves, which explains why I designed my own living room carpet, I suppose. <\/p>\n",
"link": "https:\/\/quotesondesign.com\/chris-bangle\/"
}]
If you set the data
variable equal to it, you would access the title as data[0].title
nani554 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1495 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
thrage1 sends brownie points to @nani554 :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @nani554 |http://www.freecodecamp.com/nani554
thrage1 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1496 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1497 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mohammadhasham sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mohammadhasham already gave tylermoeller points
Hey guys,
so this is pretty basic but can't seem to figure it out. I use a query .click() method to show some text when you click the button, but for some reason the text is already there once I load the page.
http://codepen.io/svenhendrikx/pen/qRgdvR
$("#buttonID").on("click", function() {
*do something you want the button to do*
});
johnnydemol sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @achudoz |http://www.freecodecamp.com/achudoz
row
col-5
col-2
img
col-5
/row
please help)
<style>
id
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
<h1 id="orange-text">
</style>
<h1 class="pink-text blue-text">Hello World!</h1>
Give your h1 element the id of orange-text.
what i missing ?
nrd89 sends brownie points to @jtan3 :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @jtan3 |http://www.freecodecamp.com/jtan3
<div class="row">
<img class="col-md-8 offset-md-2" src="....">
</div>
@iatomat <style>
body {
background-color: black;
font-family: Monospace;
color: green;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
johnnydemol sends brownie points to @achudoz :sparkles: :thumbsup: :sparkles:
:warning: johnnydemol already gave achudoz points
blackioo sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 373 | @nawrockp |http://www.freecodecamp.com/nawrockp
chelseas9210 sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @nawrockp |http://www.freecodecamp.com/nawrockp
zgarsh sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @nawrockp |http://www.freecodecamp.com/nawrockp
zgarsh sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:warning: zgarsh already gave nawrockp points
arashdai sends brownie points to @nawrockp :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @nawrockp |http://www.freecodecamp.com/nawrockp
.container-fluid
.container-fluid
that's not already styled will be blue
.container-fluid
were empty, then nothing would be blue
.container-fluid
mike93og93 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 437 | @augmt |http://www.freecodecamp.com/augmt
@mike93og93 you can add
body {
background-color: #4c90b1;
}
to your css but that won't do anything at the moment
Hi everybody, I have some css I am having trouble with.
<img src="https://media.giphy.com/media/wvS4BcmuoRqFi/giphy.gif" alt="">
<h1 id="mainHeader">Benedict Cumberbatch name generator</h1>
* {
font-family: verdana, sans-serif;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: auto;
}
#mainHeader {
font-size: 20px;
text-align: center;
position: relative;
top: 15%;
}
img:first-of-type {
width: 25%;
height: 300px;
position: relative;
left: 40%;
top: 20%;
}
I am trying to position img:first-of-type 20% from the top, for responsive reasons, I can move it 20px form top but not 20%, anybody have suggestions?
top
leeconnelly12 sends brownie points to @augmt :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @augmt |http://www.freecodecamp.com/augmt
leeconnelly12 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 241 | @skycoder01 |http://www.freecodecamp.com/skycoder01
var userName = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"];
for (i=0; i< userName.length;i++){
var url= 'https://wind-bow.gomix.me/twitch-api/streams/' + userName[i] + '/?callback=?';
console.log(url);
$.ajax({
url: url,
type: "GET",
dataType: "json",
success: function(twitch) {
if (twitch.stream === null) {
console.log(userName[i]);
}
else {
}
},
error: function(){
alert("Unable load page. Please try again later.");
}
});
};
var
before defining a variable i is not defined
is the error I'm seeing
VM201 pen.js:4 Uncaught ReferenceError: i is not defined
pull-right
class.
i is not defined
mike93og93 sends brownie points to @skycoder01 :sparkles: :thumbsup: :sparkles:
:cookie: 242 | @skycoder01 |http://www.freecodecamp.com/skycoder01
mike93og93 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1498 | @tylermoeller |http://www.freecodecamp.com/tylermoeller