mix-blend-mode: difference;
or mix-blend-mode: color-dodge;
might be closer to the effect you are after.
please guys i dont know how to make function in simon game zipline which will wait for responce how to make wait to responce function
$('selector').on('click', function(){here the logic of the function});
mhdavis sends brownie points to @mosaic-greg :sparkles: :thumbsup: :sparkles:
:cookie: 412 | @mosaic-greg |http://www.freecodecamp.com/mosaic-greg
Hi, can I know how to use API with JSON? What's the address that I need to put in
$.getJSON("http://api.forismatic.com/api/1.0/",function(json){...
^I am guessing the above is incorrect. What should I insert after $.getJSON("...?
navbar-collapse .in
specifically , and there is another class which comes while the menu is being opened I suppose that is navbar-collapse .collapsing
which I am not sure of yet
$.getJSON("http://api.forismatic.com/api/1.0/",function(json){
vrsivananda sends brownie points to @sorinr and @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 407 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
:cookie: 871 | @sorinr |http://www.freecodecamp.com/sorinr
$(document).ready(function(){
$(#newQuoteButton).on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&key=457653&format=jsonp&lang=en&jsonp=?",function(json){
$(".theQuote").html(JSON.stringify(json));
});
});
});
$(#newQuoteButton).on("click", function(){
line
$.getJSON( url, function(){}, "jsonp");
$(document).ready(function(){
$("#newQuoteButton").on("click", function(){
$.getJSON("https://jsonp.afeld.me/",function(json){
$(".theQuote").html(JSON.stringify(json));
},"jsonp");
});
});
vrsivananda sends brownie points to @heroiczero and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: vrsivananda already gave sorinr points
:cookie: 447 | @heroiczero |http://www.freecodecamp.com/heroiczero
:warning: vrsivananda already gave heroiczero points
vrsivananda sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
!important
because I have other use of the same navbar menu classes
@heroiczero
Do you know why nothing happens here when I click my "New Quote" button?
In CodePen (HTML and JS):
$(document).ready(function(){
$("#newQuoteButton").on("click", function(){
$.getJSON("https://jsonp.afeld.me/",function(json){
$(".theQuote").html(JSON.stringify(json));
},"jsonp");
});
});
<body>
<div id="center">
<div class="theQuote">
</div>
<div id="buttonDiv">
<button id="newQuoteButton" class=".btn .btn-lg"> New Quote </button>
</div>
</div>
</body>
https://jsonp.afeld.me/
this website it offline
function change(){
function magShrink() {
for (var j = 9; j <= 0; --j) {
if(j === 0) {
iconLogo.style.display = "none";
}
else {
runitA(j);
}
}
function runitA(j) {
setTimeout(function(){
//MyFunc(i);
iconLogo.style.opacity = ".0" + j;
}, j * 1.5);
}
}
magShrink();
http://api.forismatic.com/
that site should theoretically work
mr-kumar-abhishek sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 872 | @sorinr |http://www.freecodecamp.com/sorinr
http://codepen.io
not https://codepen.io
or it will not access the api for your website
JSON.stringify(json)
that seems wrong try to find a way to access the quote and insert it into the html. probably something like function(data){console.log(data.quote);}
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
try your first website you had
@heroiczero
Still nothing :(
$(document).ready(function(){
$("#newQuoteButton").on("click", function(){
$.getJSON("http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?",function(json){
$(".theQuote").html(JSON.stringify(json));
},"jsonp");
});
});
<body>
<div id="center">
<div class="theQuote">
</div>
<div id="buttonDiv">
<button id="newQuoteButton" class=".btn .btn-lg"> New Quote </button>
</div>
</div>
</body>
function(data){console.log(data.quote);}
?
var url="http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?";
var getQuote=function(data){
console.log(data);
};
$(document).ready(function(){
$.getJSON(url,getQuote,'jsonp');
});
@heroiczero
I commented out all my previous JS and copy-pasted your code into it, but still does not seem to do anything. Strange :worried:
for (var j = 9; j == 0; j--) {
if(j === 0) {
iconLogo.style.display = "none";
}
else {
runitA(j);
}
}
grantknaver sends brownie points to @spieg :sparkles: :thumbsup: :sparkles:
:cookie: 247 | @spieg |http://www.freecodecamp.com/spieg
vrsivananda sends brownie points to @heroiczero :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @heroiczero |http://www.freecodecamp.com/heroiczero
.collapse .in
there is a delay in the change of the color
Hi everyone. I have a CSS question. I'm trying to make a shape that looks like this:
http://codepen.io/bd1887/pen/Rogzgq?editors=0110
Except I need to make it without using an overlap trick -- I need it to be a single div. I've tried using clip-path, but I can't figure out how to cut out a curved line like that.
Hi, What else do I have to do to use bootstrap in CodePen? I have added the bootstrap under settings, but it still does not seem to work. My button still looks very normal.
This is my button mark-up:
<button id="newQuoteButton" class="btn btn-block btn-primary"> New Quote </button>
#newQuoteButton{
position:relative;
float: right ;
clear: right;
margin-right:20px;
margin-bottom:20px;
margin-top: 20px;
}
vrsivananda sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 876 | @sorinr |http://www.freecodecamp.com/sorinr
How do I float a button to the bottom of a div without messing with the bootstrap?
Here is my markup for the button:
<div id="buttonDiv">
<button id="newQuoteButton" class="btn btn-primary center-block "> New Quote </button>
</div>
</div>
Here is my CSS:
#buttonDiv{
clear: both;
}
#newQuoteButton{
width: 250px;
}
vrsivananda sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 790 | @gregatgit |http://www.freecodecamp.com/gregatgit
#center{
width: 500px;
height:250px;
background-color:#6ae5ea;
margin-top: 30px;
position:relative;
padding: 10px;
border-radius: 5%;
//vertical-align: middle;
}
vrsivananda sends brownie points to @gregatgit :sparkles: :thumbsup: :sparkles:
:warning: vrsivananda already gave gregatgit points
#newQuoteButton{
margin-top: 25%;
clear: both;
}
seandoe sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2012 | @khaduch |http://www.freecodecamp.com/khaduch
mainGroup
class but it is not working cant fig out where i make the mistake$.fn
? If so, I have an example in my Tic Tac Toe app for rotating the board - line 180. It's called on lines 139 and 174.
chrislopresti sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @dna113p |http://www.freecodecamp.com/dna113p
chrislopresti sends brownie points to @dna113p :sparkles: :thumbsup: :sparkles:
:warning: chrislopresti already gave dna113p points
$.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/freecodecamp?callback=?')
.done(function(data) {
$('body').append(JSON.stringify(data))
});
var twitchAPI = "https://wind-bow.hyperdev.space/twitch-api";
var stream = "/streams/";
var callback = "?callback=?'";
// var clientID = "3fe05j8mavwd68cjoqwqs2e9oqsou02";
var regStreamers = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas", "brunofin", "comster404"];
$('body').append(twitchAPI + stream + regStreamers[0] + callback);
console.log(twitchAPI + stream + regStreamers[0] + callback)
progamers780 sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:cookie: 780 | @tommygebru |http://www.freecodecamp.com/tommygebru
tommygebru sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1044 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
phiggins567 sends brownie points to @ayoisaiah :sparkles: :thumbsup: :sparkles:
:cookie: 206 | @ayoisaiah |http://www.freecodecamp.com/ayoisaiah
@phiggins567 When you grab the longitude and latitude like this
var longitude = l.lon;
var latitude = l.lat;
You can make the request like this:
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longitude, function (res){});
"Possibly unhandled rejection: {}"
and I can't figure out why.
display: table-cell;
float:none;
And now it seems that it doesn't recognize the "col-xs-12" property
@TylerMoeller <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Navbar-->
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#nav">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://codepen.io/futuristicHat/full/MbrpGb/#top">ABC</a>
</div>
<div class="collapse navbar-collapse" id="nav">
<ul class="nav navbar-nav">
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#top">About</a></li>
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#portfolio">Portfolio</a></li>
<li class="active"><a href="http://codepen.io/futuristicHat/full/MbrpGb/#contact">Contact</a></li>
</ul>
</div>
</div>
</nav>
<!--About-->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
display: table-cell;
float:none;
And now it seems that it doesn't recognize the "col-xs-12" propertyzkruki sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1045 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
.external-link{
/* display: table-cell;
float:none;*/
padding-bottom: 50px;
}
let view = {
setupBoard: function() {
let gameBoard = document.createElement("table"),
tictactoe = document.getElementById("tictactoe"),
messageBox = document.createElement("div"),
playerButtons = document.createElement("div"),
restartButton = document.createElement("button");
// refactor ??
// setup restart button
restartButton.innerText = "Restart";
restartButton.setAttribute("onclick", "handlers.restartGame();");
// setup player buttons
playerButtons.innerHTML = this.createPlayerButtons();
// setup message box
messageBox.setAttribute("id", "message");
messageBox.setAttribute("class", "message-box");
this.createGameTable(gameBoard);
// this should be refactored -- see appendElementsToHTML() below
tictactoe.appendChild(gameBoard);
tictactoe.appendChild(messageBox);
tictactoe.appendChild(playerButtons);
tictactoe.appendChild(restartButton);
// set id's to each tile
let tds, k;
tds = gameBoard.getElementsByTagName("td");
for (k = 0; k < tds.length; k++) {
tds[k].setAttribute("id", k);
}
},
createGameTable(parentElement) {
let rows, tiles;
for (var i = 0; i < 3; i++) {
rows = document.createElement("tr");
parentElement.appendChild(rows);
for (var j = 0; j < 3; j++) {
tiles = document.createElement("td");
tiles.setAttribute("class", "tile");
tiles.setAttribute("onclick", "handlers.tileClick(event)");
rows.appendChild(tiles);
}
}
},
appendElementsToHTML() {
return Array.from(arguments).forEach(function(argument) {
console.log(argument);
return document.getElementById("tictactoe").innerHTML += argument;
});
},
createPlayerButtons: function() {
let playerButtonHTML = '';
playerButtonHTML += '<form id="switch">';
playerButtonHTML +=
'<input onclick="handlers.setStartingPlayer(event)" type="radio" name="pick-player" class="switch-input" value="X" id="playerX">';
playerButtonHTML += '<label for="X" class="">X</label>';
playerButtonHTML +=
'<input onclick="handlers.setStartingPlayer(event)" type="radio" name="pick-player" class="switch-input" value="O" id="playerO">';
playerButtonHTML += '<label for="O" class="">O</label>'
playerButtonHTML += '</form>'
return playerButtonHTML;
}
}
@Duruzicanyour
error: function(){
console.log(false)
}
add this after success:
duruzican sends brownie points to @gniewoszu :sparkles: :thumbsup: :sparkles:
:cookie: 302 | @gniewoszu |http://www.freecodecamp.com/gniewoszu
<h1>Hello World</h1>
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1046 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
* {
border: 1px solid black;
}
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nuria-gs already gave tylermoeller points
&jsonp=?
http://api.forismatic.com/api/1.0/?method=getQuote&format=jsonp&lang=en&jsonp=?
hey everyone, I'm working on the random quote maker. I have an array of quotes as well as the twitter button implemented but my javascript isn't changing the quote or the text for the twitter link
'''
$document.ready(function(){
$("#randQuote").on("click",function(){
var quoteIndex = Math.floor(Math.random()*rickyQuote.length);
if(rickyQuote[quoteIndex].length > 140){
document.getElementById("#quote").style.font-size = "14px";
}
document.getElementById("#quote").value = rickyQuote[quoteIndex];
var twitStr = encodeURIComponent(document.getElementById(rickyQuote[quoteIndex]).value);
document.getElementByID("#twitter-share").href = "https://twitter.com/intent/tweet?text=" + twitStr;
});
});
'''
:bulb: to format code use backticks! ``` more info
$document.ready(function(){
$("#randQuote").on("click",function(){
var quoteIndex = Math.floor(Math.random()*rickyQuote.length);
if(rickyQuote[quoteIndex].length > 140){
document.getElementById("#quote").style.font-size = "14px";
}
document.getElementById("#quote").value = rickyQuote[quoteIndex];
var twitStr = encodeURIComponent(document.getElementById(rickyQuote[quoteIndex]).value);
document.getElementByID("#twitter-share").href = "https://twitter.com/intent/tweet?text=" + twitStr;
});
});
document.getElementById
, don't use the # sharp
document.getElementById("quote")
document.getElementByID("#twitter-share")
$("#temperature-holder").on("click",function(){
if($(this).text().indexOf('F') > -1) {
$('#temperature-holder').html(tempC)
} else {
$('#temperature-holder').html(tempF)
}
});
element.value
works only for textboxes and some few other input elements. If your element, which should show the quote, is no input element, use element.innerHTML
http://codepen.io/.....
not https://codepen.io/.....
nuria-gs sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: nuria-gs already gave tylermoeller points
tron2097 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1047 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
@Tron2097 Try this:
.car {
text-align: center;
font-family: "Times New Roman", Times, serif;
font-size: 48px;
}
You need the .
in front of car
to signify it's a class name and font-sizes can't be in % sizes.
I have a question about the Simon Game. I want to create an array called "player" and push a number to it every time the player clicks a button. But when I console.log(player) outside the blueOn function it doesn't push anything to the array. Any thoughts on how to fix that?
$(document).ready(function(){
var simonAI = [];
var player = [];
//function to run Jquery
var blueOn = function(){
$('#blueAudio')[0].play();
//play audio
$(".bluels").addClass('blueon');
setTimeout( function() {
$(".bluels").removeClass('blueon');
},1000);
//hightlight ls for 1 second
player.push(1);
}
console.log(player);
$("#bluels").click(blueOn);
});
tron2097 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: tron2097 already gave tylermoeller points
var blueOn = function() {
//fx to play sound and flash ls
//play audio
$('#blueAudio')[0].play();
//hightlight ls for 1 second
$(".bluels").addClass('blueon').delay(1000).queue(function(next) {
$(".bluels").removeClass('blueon').dequeue();
});
player.push(1);
compare(player);
}
var compare = function() {
console.log(player);
}
duruzican sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1048 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
tyl-er sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1049 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
<section class="first-blue-section">
<p>Some content</p>
</section>
<section class="second-blue-section">
<p>Some content</p>
</section>
bestintown23 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1050 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
var url = 'https://URL to some api/?callback=?'
$.getJSON(url, function() {
console.log( "success" );
}).done(function() {
console.log( "second success" );
}).fail(function() {
console.log( "error" );
}).always(function() {
console.log( "complete" );
});
&callback=?
so you don't have to use that crossorigin.me server:"https://en.wikipedia.org/w/api.php?action=query&list=search&format=json&callback=?&srsearch="
Hi everyone, currently working on my wikipedia viewer. Having some trouble with my JQuery. When trying to reach the value written on my textarea/textbox by doing console.log, I get back "" every time. What have i missed?