<li></li>
have bullets? https://codepen.io/c0d0er2/pen/MbdqEz
:cookie: 387 | @lreynl |http://www.freecodecamp.com/lreynl
jamespayne sends brownie points to @lreynl :sparkles: :thumbsup: :sparkles:
jamespayne sends brownie points to @lreynl :sparkles: :thumbsup: :sparkles:
:warning: jamespayne already gave lreynl points
$.ajax({
url: url,
type: 'GET',
dataType:'json',
success: function(data) {do stuff}
brycemcdonald86 sends brownie points to @mot01 and @lreynl :sparkles: :thumbsup: :sparkles:
:cookie: 438 | @mot01 |http://www.freecodecamp.com/mot01
:cookie: 388 | @lreynl |http://www.freecodecamp.com/lreynl
danjp2016 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 806 | @gregatgit |http://www.freecodecamp.com/gregatgit
danjp2016 sends brownie points to @niconielsen :sparkles: :thumbsup: :sparkles:
:cookie: 266 | @niconielsen |http://www.freecodecamp.com/niconielsen
danjp2016 sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: danjp2016 already gave gregatgit points
<button class="btn btn-primary"><i class="fa fa-free-code-camp" aria-hidden="true"></i></button>
c0d0er sends brownie points to @jwoo92 :sparkles: :thumbsup: :sparkles:
:cookie: 416 | @jwoo92 |http://www.freecodecamp.com/jwoo92
@c0d0er another way to do it in css is:
#delBtn{
margin-top: 10px;
display: inline-block;
margin-right: 10px;
margin-left: 35%;
}
#myBtn{
margin-top: 10px;
display: inline-block;
}
but you have to deal with margin-left: 35% using media query for smaller screens
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:star2: 1010 | @sorinr |http://www.freecodecamp.com/sorinr
<ul>
<li><a href="https://www.facebook.com/jeffrey.egbadon" class="button social"><i class="fa fa-fw fa-facebook fa-3x"></i><a/></li>
<li><a href="https://www.freecodecamp.com/bene2dict" class="button social"><i class="fa fa-fw fa-freecodecamp"></i></a></li>
<li><a href="https://github.com/Bene2dict" class="button social"><i class="fa fa-fw fa-github"></i><a/></li>
please where i'm i going wrong
Hello fellow campers.
I've just implemented the functionality of my random quote generator using an API
Here is the API:
http://api.forismatic.com/api/1.0/?method=getQuote&lang=en&format=jsonp&jsonp=?
It works correctly and generates a new quote at the click of a button as it is programmed to do. However, once the pen is closed and reopened it no longer generates random quotes. To get it to work again I needed to create a new pen and copy and paste all code into it from the previous pen. It then works again until it is closed.
Has anyone else had this problem? Is it possible the API doesn't want to deal with my request the second time the pen is opened? Does anyone have a solution?
Thank you
Hi guys, maybe i can be helped here...
i've been on this since yesterday.. my ajax call is failing, any help please
my ajax call is failing
my code:
$(document).ready(function(e) {
e.preventDefault;
$("#submit").on("click", function() {
var title = $('#title').val();
var link = "https://en.wikipedia.org/w/api.php?action=query&list=search&srwhat=text&prop=links&origin=*&srsearch=" + title + "&format=json";
$.ajax({
url:link,
success: function (json) {
var resultArray = json.query.search[0].title;
alert(resultArray);
},
error: function(errorMessage) {
alert("failed");
}
});//end ajax call
});//end click
// function search(title) {
// }
});//end document ready
// function search(title) {
// }
// $.ajax( {
// url: "https://en.wikipedia.org/w/api.php?action=query&titles=Main%20Page&prop=revisions&rvprop=content&format=jsonfm",
// data: queryData,
// dataType: 'json',
// type: 'POST',
// headers: { 'Api-User-Agent': 'Example/1.0' },
// success: function(data) {
// // do something with data
// }
// });
my codepen link: http://codepen.io/purpose/pen/pNmmoB
please i need yur help guys, i'm tired, no error in the console
voidereles sends brownie points to @ritvarsz :sparkles: :thumbsup: :sparkles:
:cookie: 278 | @ritvarsz |http://www.freecodecamp.com/ritvarsz
<nav class="navbar fixed-header" role="navigation">
<a class="nav-brand"> <img style="width:200px;height:200;" src="logo.jpg"> </a>
<a class="facebook" target="_blank" title="follow me on facebook" href="http://www.facebook.com/PLACEHOLDER">
<img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/badgefacebook.png" border=0></a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Treats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galleries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</ul>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Lobster+Two" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Arima+Madurai" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<title>Thiên Hang Bakery</title>
<link rel="shortcut icon" href="icon.ico">
<style>
nav { width:95%;
font-size: 20px;
font-family: 'Lobster Two', cursive;
}
.nav{ float: right;
}
.nav-brand { float: left;
}
.wedding-background { position: relative;
width: 100%;
height: 852px;
}
p { position: absolute;
top: 550px;
left: 100px;
width: 100;
font-size: 60px;
font-family: 'Arima Madurai', cursive;
}
</style>
</head>
<body>
<nav class="navbar fixed-header" role="navigation">
<a class="nav-brand"> <img style="width:200px;height:200;" src="logo.jpg"> </a>
<a class="facebook" target="_blank" title="follow me on facebook" href="http://www.facebook.com/PLACEHOLDER">
<img alt="follow me on facebook" src="https://c866088.ssl.cf3.rackcdn.com/assets/badgefacebook.png" border=0></a>
<ul class="nav navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Treats</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Galleries</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#"> Contact Us </a>
</ul>
</nav>
<div>
<img class=" wedding-background" src="wedding-cake.jpg" alt="">
<p><span> Welcome to <strong> Thiên Hang Bakery</strong> <br/>
We serve the best,<i> how you like it</i></br> And <i> how you want it</i></span></p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" crossorigin="anonymous"></script>
</body>
</html>
<nav>
<ul>
<li><a href=“index.html”>Home</a></li>
<li><a href=“about.html”>About</a></li>
<li><a href=“some_folder/some_page.html”>...</a></li>
</ul>
</nav>
tranpatrick01 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 270 | @blockshot12 |http://www.freecodecamp.com/blockshot12
<nav>
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="about/index.html”>About</a></li>
<li><a href="some_page/index.html">Some Page</a></li>
</ul>
</nav>
.tic-tac-toe {
width: 320px;
height: 320px;
@media only screen and (min-device-width: 768px) {
width: 600px;
height: 600px;
}
@media only screen and (min-device-width: 992px) {
width: 800px;
height: 800px;
}
...
}
comradepup sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 271 | @blockshot12 |http://www.freecodecamp.com/blockshot12
tranpatrick01 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: tranpatrick01 already gave blockshot12 points
#
in front of target4
:$("#target4").html("<em>#target4</em>");
$("#mainContent").html("");
ssgriffen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1202 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
idahogurl sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1203 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
troutman21 sends brownie points to @einsteiniam :sparkles: :thumbsup: :sparkles:
:cookie: 126 | @einsteiniam |http://www.freecodecamp.com/einsteiniam
<div class="well well-sm”>
<ul class="list-group”>
<li class="list-group-item">
einsteiniam sends brownie points to @blockshot12 and @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 272 | @blockshot12 |http://www.freecodecamp.com/blockshot12
:star2: 1204 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
einsteiniam sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:warning: einsteiniam already gave blockshot12 points
.img-responsive
to make <img class=“img-responsive” src=“…” alt=“…” />
responsive.
<button class=“btn__calculator” value=“/“>÷</button>
charan1922 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 273 | @blockshot12 |http://www.freecodecamp.com/blockshot12
charan1922 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1205 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
offline-icon
class to all streamers instead of just the ones who are offline. Any thoughts?gdim85 sends brownie points to @hudsontaylor :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @hudsontaylor |http://www.freecodecamp.com/hudsontaylor
2016-12-27 12:03:24.168 http://s.codepen.io/boomerang/9033c8d27628f7fe9c78a7f2fa33421f1482869003889/images/img-header.jpg Failed to load resource: the server responded with a status of 404 (Not Found)
<div class="col-md-6 visible-md visible-lg">
<img src="images/img-header.jpg" alt="Blasting Off" title="Blasting off"/>
</div>
console.log(i)
to the first line of your getJSON function to get an idea of what's going on.
:cookie: 274 | @blockshot12 |http://www.freecodecamp.com/blockshot12
chipotle298 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:star2: 1206 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
<head>
<link rel='stylesheet prefetch' href='file_with_lightgrey_background_css_in_it.css'>
</head>
@TylerMoeller
Html code:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12">
<h1>Blasting Off With Bootstrap</h1>
</div>
</div>
<div class="row dff">
<div class="col-md-6">
<h2>The Fastest Way to Space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button>Take the Tour</button>
<button>Book Tickets Now</button>
</div>
<div class="col-md-6 visible-md visible-lg">
<img src="images/img-header.jpg" alt="Blasting Off" title="Blasting off"/>
</div>
</div>
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase" ></i>
<h3>Book Today!</h3>
<p>Even if you are Traveling tomorrow, you can still get tickets today. we Have a numeber of conveniently located ports around the globe to service evryone</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-random" ></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, Why not try out a transporter? Despite the claimd, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-send" ></i>
<h3>RocketBus®</h3>
<p>For cheapest fare, catch the next RocketBus® to the star, Cheaper on your wallet, and easiest way to make friends</p>
</div>
</div>
</div>
</body>
</html>
main.css code:
.features .glyphicon {
font-size: 32px;
}
.dff {
background-color: lightgrey;
}
@TylerMoeller I tried using .map() like you said, but I must be doing something wrong:
var users = ["freecodecamp", "trymacs"];
var links = users.map(function(val) {
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + val, function(data) {
return data.stream;
});
});
console.log(links);
Thanks!
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: hudsontaylor already gave tylermoeller points
css/main.css
. Your code works fine for me, I get a gray background.
data
from your anonymous .getJSON function. The only way to do that is to pass it to another function:var users = ["freecodecamp", "trymacs"];
var links = users.map(function(val) {
$.getJSON('https://wind-bow.gomix.me/twitch-api/streams/' + val, function(data) {
logTheData(data.stream);
});
});
function logTheData(data) {
console.log(data);
}
hudsontaylor sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: hudsontaylor already gave tylermoeller points
css/main.css
. i am getting the larger font also of 32px as in the main.css
. Even the whole page goes lightgrey if i replace the class.dff
with .row
. Can you please preview that page directly in your any browser (by clicking directly in the neelD.html
to open in your browser) because that's the only place (only browser) where i am geting the issue.
neeldvirus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1207 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
c0d0er2 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1208 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
http://localhost
after installing a webserver locally. But still the issue exist
:cookie: 276 | @blockshot12 |http://www.freecodecamp.com/blockshot12
gbsimon87 sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
@Blockshot12
my css code was behaving in an unexpected way, so i thought to put the page here through codepen but when put the code in codepen then it just worked completely fine in an expected way. i thought my firefox might hv bug so i tried to run that page in chrome IE and even safari but still in all the browser the page is shown in an unexpected way.
Html code and css file is given below:
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="css/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class='container'>
<div class="row">
<div class="col-md-12">
<h1>Blasting Off With Bootstrap</h1>
</div>
</div>
<div class="row dff">
<div class="col-md-6">
<h2>The Fastest Way to Space</h2>
<p class="lead">Make your way to space in the comfort of your own rocket, elevator or transporter.</p>
<button>Take the Tour</button>
<button>Book Tickets Now</button>
</div>
<div class="col-md-6 visible-md visible-lg">
<img src="images/img-header.jpg" alt="Blasting Off" title="Blasting off"/>
</div>
</div>
<div class="row text-center features">
<div class="col-sm-4 col-xs-10 col-xs-offset-1 col-sm-offset-0">
<i class="glyphicon glyphicon-briefcase" ></i>
<h3>Book Today!</h3>
<p>Even if you are Traveling tomorrow, you can still get tickets today. we Have a numeber of conveniently located ports around the globe to service evryone</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-random" ></i>
<h3>Go Anywhere</h3>
<p>If you need to get to space today, Why not try out a transporter? Despite the claimd, there are have been no deaths in the last 6weeks!</p>
</div>
<div class="col-sm-4 col-xs-6 ">
<i class="glyphicon glyphicon-send" ></i>
<h3>RocketBus®</h3>
<p>For cheapest fare, catch the next RocketBus® to the star, Cheaper on your wallet, and easiest way to make friends</p>
</div>
</div>
</div>
</body>
</html>
.features .glyphicon {
font-size: 32px;
}
.dff {
background-color: lightgrey;
}
If i run this code directly in web browser then i dont see the lightgrey background as expected, but the lightgrey background color can be seen in codepen(link given below) as expected
http://codepen.io/neel111/pen/ObevZJ
Can anyone help me center an image inside of a div? I tried <div style="margin: auto"> on the parent div and <img href="#" style="margin: auto"> on the image itself... here is the link to my project:
background-color:lightgrey
of .dff
class being executed (the expected way), but i dont see lightgrey executing (which is unexpected)
<div class=“dff" style=“background-color: lightgrey”>…</div>
neeldvirus sends brownie points to @blockshot12 :sparkles: :thumbsup: :sparkles:
:cookie: 277 | @blockshot12 |http://www.freecodecamp.com/blockshot12
:cookie: 83 | @neeldvirus |http://www.freecodecamp.com/neeldvirus
remdata sends brownie points to @neeldvirus :sparkles: :thumbsup: :sparkles: