weather: [Object{
description: "haze",
icon: "50n",
}]
bananahavana sends brownie points to @valmassoi :sparkles: :thumbsup: :sparkles:
:star: 276 | @valmassoi | http://www.freecodecamp.com/valmassoi
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
reacorbett sends brownie points to @alexanderkopke :sparkles: :thumbsup: :sparkles:
:star: 482 | @alexanderkopke | http://www.freecodecamp.com/alexanderkopke
ahzuxramsey sends brownie points to @tommygebru :sparkles: :thumbsup: :sparkles:
:star: 635 | @tommygebru | http://www.freecodecamp.com/tommygebru
@bryarcole -- for some reason can't pull up your code at the moment ... but it SHOULD be something like this ...
$(".myClass").css("color","blue");
amirghafouri sends brownie points to @bitgrower :sparkles: :thumbsup: :sparkles:
:star: 582 | @bitgrower | http://www.freecodecamp.com/bitgrower
do be aware that if you try to iframe other websites, they can have frame breaker code which will prevent it ...
Some marketers like to iframe top websites ... and steal their traffic ... :)
Noted - thanks.
It doesn't really look how I imagined either though, so I might just go with screenshots hmmm
bkilrain sends brownie points to @reacorbett :sparkles: :thumbsup: :sparkles:
:star: 136 | @reacorbett | http://www.freecodecamp.com/reacorbett
@reacorbett yeah, using gradients. CSS:
#box-transition {
background: rgba(47,47,47,1);
background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(47,47,47,1)));
background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(47,47,47,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2f2f2f', endColorstr='#ffffff', GradientType=0 );
height: 50px;
width: 100%;
}
HTML:
<div id="box-transition"></div>
<div id="box">
... <!-- the rest of your code as it is, we're just adding the extra #box-transition div -->
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1441 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
it's because of the margin-top property on the <h3> inside your box. do this:
#box h3 {
margin-top: 0;
}
@reacorbett
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:warning: reacorbett already gave h4r1m4u points
:warning: reacorbett already gave h4r1m4u points
reacorbett sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
ansakoy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1442 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
antonwibowo sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1443 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
bitgrower sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1444 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
ansakoy sends brownie points to @pallavihegde1 :sparkles: :thumbsup: :sparkles:
:star: 228 | @pallavihegde1 | http://www.freecodecamp.com/pallavihegde1
urobert sends brownie points to @cla63 :sparkles: :thumbsup: :sparkles:
:star: 292 | @cla63 | http://www.freecodecamp.com/cla63
function mutation(arr) {
var contains = true;
arr[0] = arr[0].toLowerCase();
arr[1] = arr[1].toLowerCase();
for (var index=0; index < arr[0].length; index++){
console.log(arr[1].indexOf(arr[0][index]));
if (arr[1].indexOf(arr[0][index]) == -1){
contains = false;
}
}
return contains;
}
mutation(["Alien", "line"]);
contains
changes to false
it stays false throughout the loop.arr[1].indexOf(arr[0][0])
would be -1
(as A is not present in arr[1]
)false
arr[0]
and arr[1]
in your present code;
function mutation(arr) {
var contains = true;
arr[0] = arr[0].toLowerCase();
arr[1] = arr[1].toLowerCase();
for (var index=0; index < arr[1].length; index++){
console.log(arr[0].indexOf(arr[1][index]));
if (arr[0].indexOf(arr[1][index]) == -1){
contains = false;
}
}
return contains;
}
mutation(["Alien", "line"]);
hi all, I’m trying to do the random quote generator, and get an effect where the background color changes with the quote like in the example
I have the following code
function changeColor() {
var colorsIndex = Math.floor(Math.random() * colors.length);
$("body").css({
"background-color": colors[colorsIndex],
"color": colors[colorsIndex]
});
$(".button").css("background-color", colors[colorsIndex]);
}
which changes the colors as i hoped, but is too quick compared to the changing of the quote. Some googling has led me to try to animate the color change, but it’s not working with my code..
function changeColor() {
var colorsIndex = Math.floor(Math.random() * colors.length);
$("body").animate({
backgroundColor: colors[colorsIndex],
color: colors[colorsIndex]
}, 1000);
$(".button").animate({
backgroundColor: colors[colorsIndex]
}, 1000);
}
Does anybody know why? All help appreciated thanks!
backgroundColor=red
can't be changed.
gskll sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:star: 480 | @maulikdarji | http://www.freecodecamp.com/maulikdarji
transition:all 0.5s;
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
gskll sends brownie points to @maulikdarji :sparkles: :thumbsup: :sparkles:
:warning: gskll already gave maulikdarji points
urobert sends brownie points to @saintpeter :sparkles: :thumbsup: :sparkles:
:star: 2516 | @saintpeter | http://www.freecodecamp.com/saintpeter
<input type="submit
won't trigger the call`
heyjp sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 603 | @urobert | http://www.freecodecamp.com/urobert
reacorbett sends brownie points to @urobert :sparkles: :thumbsup: :sparkles:
:star: 604 | @urobert | http://www.freecodecamp.com/urobert
appid=
unlimiworks sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 896 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
unlimiworks sends brownie points to @maulikdarji and @mbrad26 :sparkles: :thumbsup: :sparkles:
:star: 484 | @maulikdarji | http://www.freecodecamp.com/maulikdarji
:star: 280 | @mbrad26 | http://www.freecodecamp.com/mbrad26
This an inline `<paste code here>
` code formatting with a single backtick(`) at start and end around the code
.
```js ⇦ Type 3 backticks and then press [shift + enter ⏎]
(type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]
``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
ghcarrolljr sends brownie points to @radheyindia :sparkles: :thumbsup: :sparkles:
:star: 267 | @radheyindia | http://www.freecodecamp.com/radheyindia
width: 375px; !important
fuzyon sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 508 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
$(document).ready(function(){
var updateWeather;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude =position.coords.latitude;
var longitude = position.coords.longitude;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+ latitude + "&lon=" + longitude + "&units=metric&APPID=71dc704300327b14eac3f2fbb6ba74ac")
});
}
This an inline `<paste code here>
` code formatting with a single backtick(`) at start and end around the code
.
```js ⇦ Type 3 backticks and then press [shift + enter ⏎]
(type js or html or css)
<paste your code here>,
then press [shift + enter ⏎]
``` ⇦ Type 3 backticks, then press [enter ⏎]
See also: ☛ How to type Backticks | ☯ Compose Mode | ❄ Gitter Formatting Basics
$(document).ready(function(){
var udateWeather;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position){
var latitude =position.coords.latitude;
var longitude = position.coords.longitude;
$.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+ latitude + "&lon=" + longitude + "&units=metric&APPID=71dc704300327b14eac3f2fbb6ba74ac", function(json){
updateWeather = json;
//alert(json)
presentWeather();
weatherIcon();
});
});
}})
conormack sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star: 509 | @kirbyedy | http://www.freecodecamp.com/kirbyedy
ansakoy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 901 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
ansakoy sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:warning: ansakoy already gave wearenotgroot points
ansakoy sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1446 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
$("#onlineButton").click(function(e){
var index1, len1;
$("#showOnline").empty(); // ADD THIS
for (index1 = 0, len1 = users.length; index1 < len1; ++index1) {
...
zeemax sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 344 | @cragsify | http://www.freecodecamp.com/cragsify
zeemax sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1447 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
zeemax sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:warning: zeemax already gave cragsify points
annaslab sends brownie points to @cragsify :sparkles: :thumbsup: :sparkles:
:star: 348 | @cragsify | http://www.freecodecamp.com/cragsify
$(document).ready(function(){
$(".myMenu").hide();
setTimeout(function(){
$(".myMenu").fadeIn(23000)
}, 1500 );
});
heyjp sends brownie points to @fuzyon :sparkles: :thumbsup: :sparkles:
:star: 182 | @fuzyon | http://www.freecodecamp.com/fuzyon
reacorbett sends brownie points to @livmaria7891 :sparkles: :thumbsup: :sparkles:
:star: 284 | @livmaria7891 | http://www.freecodecamp.com/livmaria7891
function mutation(arr) {
var contains = 0;
arr[0] = arr[0].toLowerCase();
arr[1] = arr[1].toLowerCase();
for (var index1=0; index1 < arr[0].length; index1++){
for (var index2=0; index2 < arr[1].length; index2++){
if (arr[0][index1] === arr[1][index2]){
contains++;
console.log(arr[0][index1] + ':' + arr[0][index2] + ':' + true);
} else {
console.log(arr[0][index1] + ':' + arr[0][index2]);
}
}
}
console.log(contains + ':' + arr[0].length + ':' + arr);
return contains >= arr[0].length - 2;
}
mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]);
@julianasobreira
Basic Usage
Place the 5 font files and the main weather-icons.min.css file in your project, with the assumption that the fonts are located up ../ from your CSS directory.
The icons are displayed by using an i element and adding the base class wi and then the icon class you want, such as day-sunny. This then looks like <i class="wi wi-day-sunny"></i>.
To add a modifier, include the class you want after the icon name, which looks like <i class="wi wi-day-sunny wi-flip-vertical"></i>. You can flip, rotate, or add a fixed with. See it all at http://weathericons.io.
julianasobreira sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 904 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
for (index1 = 0, len1 = users.length; index1 < len1; ++index1) {
(function(index1) { // NOTE THIS
$.getJSON("https://api.twitch.tv/kraken/streams/" + users[index1], function(channels) {
if (channels["stream"] != null) {
$("#showOnline").append('<div class="twitchUsers">' + '</span>' + "<img class='userImage' src= '" + channels.stream.channel.logo + "'>" + '<span class="userName">' + channels.stream.channel.name + "    " + "<span id ='onlineUser'>" + "OnLine" + "</span>" + '</div>');
}
});
})(index1); // NOTE THIS
}
valmassoi sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1448 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
function mutation(arr) {
arr[0] = arr[0].toLowerCase();
arr[1] = arr[1].toLowerCase();
for (var i=0; i < arr[0].length; i++){
if (arr[1].indexOf(arr[0][i]) == -1){
return false;
}
}
return true;
}
mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]);
shouldn’t this work
i
) that you use for the iteration, so it's correctly used inside the getJSON callback once you get the response from the API. the rest of the code after the forloop will execute immediately without waiting for the response from the API, just like if you didn't use the closure
function mutation(arr) {
arr[0] = arr[0].toLowerCase();
arr[1] = arr[1].toLowerCase();
for (var i=0; i < arr[1].length; i++){
if (arr[0].indexOf(arr[1][i]) == -1){
return false;
}
}
return true;
}
mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"]);
caleb272 sends brownie points to @h4r1m4u :sparkles: :thumbsup: :sparkles:
:star: 1449 | @h4r1m4u | http://www.freecodecamp.com/h4r1m4u
@caleb272 -- because you are looking for letters in the second array that are NOT in the first array ...
the other way, you were looking for letters in the first array which aren't in the second ... and there are quite a few of those ... LOL
``` (shift+enter for line break)
var code = "formatted";
```
function showOffline_Users() {
var index, len;
var newArray = [];
for (index = 0, len = t.length; index < len; ++index) {
$.getJSON(" https://api.twitch.tv/kraken/streams/" + t[index], function(channels) {
if (channels["stream"] == null) {
}
//newArray.push(channels.display_name);
});
}
}
[FreeCodeCamp/Help]
[FreeCodeCamp/HelpJavaScript]
[FreeCodeCamp/HelpFrontEnd]
[FreeCodeCamp/HelpDataViz]
[FreeCodeCamp/HelpBackEnd]
[FreeCodeCamp/NonprofitProjects]
[FreeCodeCamp/CodeReview]
[FreeCodeCamp/YouCanDoThis]
Choose the right room for your question!
```function addHTML (){
console.log(offlineUsers);
for (i=0; i<offlineUsers.count; i++){
console.log("ran addHTML for loop!")
$("#createOff").append("<div class='btn''>• " + offlineUsers[i] + "</div><br>");
}
}```
body{
min-height: 100%;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://source.unsplash.com/Kt5hRENuotI/1600x1000");
}
jackedwardlyons sends brownie points to @cla63 :sparkles: :thumbsup: :sparkles:
:star: 293 | @cla63 | http://www.freecodecamp.com/cla63
html,
body {
height: 100%;
margin: 0;
padding: 0;
overflow: auto;
}
.jumbotron
{
min-height:100%;
background-image: url("https://source.unsplash.com/Kt5hRENuotI/1600x1000");
background-size: cover;
background-repeat: no-repeat;
}
html,body{
height:100%;
}
body{
height:100%;
margin: 0;
padding: 0;
overflow: auto;
background-size: cover;
background-repeat: no-repeat;
background-image: url("https://source.unsplash.com/Kt5hRENuotI/1600x1000");
}
.jumbotron {
background:transparent!important;
}
#tempConverter {
display: none;
}
function showOffline_Users(){
for (i=0; i<users.length; i++){
(function(i) {
var user = users[i];
$.getJSON("https://api.twitch.tv/kraken/streams/" + user + "?callback=?", function(data1) {
if(data1.stream == null){//offline
offline_Users.push(user);
$.getJSON(" https://api.twitch.tv/kraken/users/" + user, function(data) {
$("#showOnline").append('<div class="twitchUsers">' + " <img class= 'userImage' src='" + data.logo + "'>" + '<span class ="userName">' + data.display_name + '</span>' + "<span id ='offlineUser'>" + "Offline" + "</span>" + '</div>');
//newArray.push(channels.display_name);
});
}
console.log(offline_Users)
/////////////////////////////////
});
/////////////////////////
})(i)
//console.log(offline_Users)
}
}
zeemax sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 908 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
loaded before
, and more interesting why do you need it?
annaslab sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
bananathief sends brownie points to @wearenotgroot :sparkles: :thumbsup: :sparkles:
:star: 909 | @wearenotgroot | http://www.freecodecamp.com/wearenotgroot
:star: 205 | @tvotyakov | http://www.freecodecamp.com/tvotyakov
$(document).ready()
do. It is wait while html will be loaded and only after that executes your code.
display: none;
using style tag. You can also add before or after that div another visible div with something like loading. please wait....
. And in your JS code you will be show first div and hide second.
annaslab sends brownie points to @tvotyakov :sparkles: :thumbsup: :sparkles:
:warning: annaslab already gave tvotyakov points
<p>
<a href=""> number one</a> - <a href=""> number two</a>
</p>
littlemahi sends brownie points to @astringham and @papigers :sparkles: :thumbsup: :sparkles:
:star: 131 | @papigers | http://www.freecodecamp.com/papigers
:star: 121 | @astringham | http://www.freecodecamp.com/astringham