$japaneseIndigo: rgba(35, 61, 77, 1);
$babyPowder: rgba(255, 255, 250, 1);
$princetonOrange: rgba(254, 127, 45, 1);
$yankeesBlue: rgba(28, 48, 65, 1);
$mediumSpringGreen: rgba(24, 242, 178, 1);
/*Apply styles*/
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: $yankeesBlue;
}
text-align: center
for whichever element needs the text center @zamora88
messiahack sends brownie points to @mzedlach :sparkles: :thumbsup: :sparkles:
:cookie: 279 | @mzedlach |http://www.freecodecamp.com/mzedlach
messiahack sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1085 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
http://codepen.io/artoo/pen/ZBbYyM?editors=1000
hello is there a way that i could separate my tables? tried using cellspacing but it is being ignore because of the bootstrap. tried over riding it nothing happens. thank you!
.json
? Those are the latitude and longitude
@mzedlach Yes, try this:
var api = 'https://api.wunderground.com/api/<<KEY>>/conditions/q/autoip.json';
$.getJSON(api).done(function(data) {
$('body').append(JSON.stringify(data))
});
You can then copy/paste the output into a tool like this to make it easier to read: http://codebeautify.org/jsonviewer
$.getJSON( "example.json", function() {
console.log( "success" );
})
.done(function() {
console.log( "second success" );
})
.fail(function() {
console.log( "error" );
})
.always(function() {
console.log( "complete" );
});
/geolookup/
in your URL to /conditions/
and then added $('body').append(JSON.stringify(data))
so the data would print to the page
/conditions/
with /geolookup/
and see how the data prints differently
$.getJSON(api, function(data) {
});
Let's start with this above ^^ then, do you see the function(data)
?
data
data
variable
$('body').append(JSON.stringify(data))
$.getJSON(api, function(data) {
// do something with the information stored in the data variable
});
So
$('body').append(JSON.stringify(data))
is the same as
$.getJSON(api, function(data) {
console.log(data)
});
in terms of.... it will print all the info in "data"
position.coords.latitude
and position.coords.longitude
data
variable, you got latitude and longitude in a position
variable.
mzedlach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1086 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
mzedlach sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mzedlach already gave tylermoeller points
zamora88 sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1087 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
http://codepen.io/artoo/pen/ZBbYyM?editors=1000#0
hello need help guys. i have a form by default theyre displayed on column and since i need to customize them to look clean i position them absoluty and gave them a top and left specific position. the problem is when i switched to landscape from portrait it jumbled my work. you have experienced this before??
106ch213 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1577 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
csims20 sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1579 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
artoodeeto sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2032 | @khaduch |http://www.freecodecamp.com/khaduch
106ch213 sends brownie points to @khaduch :sparkles: :thumbsup: :sparkles:
:star2: 2033 | @khaduch |http://www.freecodecamp.com/khaduch
var jsonArray = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}, {
"tagValueName": "ABC",
"tagValueId": 2,
"priorityAlertsCount": 100,
"investigationAlertsCount": 60,
"incidentAlertsCount": 20,
"otherAlertsCount": 20
}];
How to write a function that will accept the above Json as input and will output the below formatted json
var jsonData = [{
"tagValueName" : "PCI",
"type": "priorityAlertsCount",
"count": "20",
},
{
"tagValueName" : "PCI",
"type": "investigationAlertsCount",
"count": "140",
},
{
"tagValueName" : "PCI",
"type": "incidentAlertsCount",
"count": "100",
},
{
"tagValueName" : "PCI",
"type": "otherAlertsCount",
"count": "40",
},{
"tagValueName" : "ABC",
"type": "priorityAlertsCount",
"count": "100",
},{
"tagValueName" : "ABC",
"type": "investigationAlertsCount",
"count": "60",
}];
jsonArray[0]
var jsonArray = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}, {
"tagValueName": "ABC",
"tagValueId": 2,
"priorityAlertsCount": 100,
"investigationAlertsCount": 60,
"incidentAlertsCount": 20,
"otherAlertsCount": 20
}];
@JackEdwardLyons
var jsonInputArray = [{
"tagValueName": "PCI",
"tagValueId": 1,
"priorityAlertsCount": 20,
"investigationAlertsCount": 140,
"incidentAlertsCount": 100,
"otherAlertsCount": 40
}, {
"tagValueName": "ABC",
"tagValueId": 2,
"priorityAlertsCount": 100,
"investigationAlertsCount": 60,
"incidentAlertsCount": 20,
"otherAlertsCount": 20
}];
output should be
var jsonData = [{
"tagValueName" : "PCI",
"type": "priorityAlertsCount",
"count": "20",
},
{
"tagValueName" : "PCI",
"type": "investigationAlertsCount",
"count": "140",
},
{
"tagValueName" : "PCI",
"type": "incidentAlertsCount",
"count": "100",
},
{
"tagValueName" : "PCI",
"type": "otherAlertsCount",
"count": "40",
},{
"tagValueName" : "ABC",
"type": "priorityAlertsCount",
"count": "100",
},{
"tagValueName" : "ABC",
"type": "investigationAlertsCount",
"count": "60",
}];
var jsonData = [];
var keysToDrop = ['tagValueName', 'tagValueId'];
jsonArray.forEach(function(json){
Object.keys(json).forEach(function(key){
if(keysToDrop.indexOf(key) === -1){
jsonData.push({
tagValueName : json.tagValueName,
type : key,
count : json[key]
})
}
});
});
$("h3 a").on("click", function() {
counter += 1;
console.log(counter % 2);
/*
switch(counter % 2) {
case 0:
$("h3").html(Math.round(data.main.temp * 1.8 + 32) + "<a href='#'>°F</a>");
case 1:
$("h3").html(Math.round(data.main.temp) + "<a id='temp' href='#'>°C</a>");
}
*/
});
$("h3 a").on("click", function() {
counter += 1;
console.log(counter % 2);
/*
switch(counter % 2) {
case 0:
$("h3").html(Math.round(data.main.temp * 1.8 + 32) + "<a href='#'>°F</a>");
case 1:
$("h3").html(Math.round(data.main.temp) + "<a id='temp' href='#'>°C</a>");
}
*/
});
break;
after switch
cases ??
break;
after switch cases ??
swatbone85 sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 413 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
regStreamers.map(function(val) {
$.getJSON(twitchAPI + streams + val + callback, function(data1) {
if (data1.status === 404) {
$(".wrap").append("<div class='streamers offline delete'><span class='i-fix'><i class='ion-close'></i><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'></span><div class='info'><span>" + val + " </span><span>does not exist</span></div></div>");
$(".offline i").click(function() {
$(this.closest(".delete")).remove();
});
} else if (data1.status === null) {
$.getJSON(twitchAPI + channels + val + callback, function(data2) {
$(".wrap").append("<a href=" + data2.url + "><div class='streamers offline'><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'><div class='info'><span>" + val + " </span><span>is currently offline</span></div></div></a>");
});
} else {
$(".wrap").append("<a href=" + data1.stream.channel.url + "><div class='streamers online'><img src=" + valData.stream.channel.logo + "><div class='info'><span>" + val + " </span><span class='game'>streaming " + valData.stream.game + "</span><span>" + valData.stream.viewers + " viewers</span></div></div></a>");
} //ELSE
}); //data1
});//map
swatbone85 sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:warning: swatbone85 already gave mr-kumar-abhishek points
<h3><a>your text</a></h3>
no texts between h3
and a
regStreamers.map(function(val) {
$.getJSON(twitchAPI + streams + val + callback, function(data1) {
if (data1.status === 404) {
$(".wrap").append("<div class='streamers offline delete'><span class='i-fix'><i class='ion-close'></i><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'></span><div class='info'><span>" + val + " </span><span>does not exist</span></div></div>");
$(".offline i").click(function() {
$(this.closest(".delete")).remove();
});
} else if (data1.status === null) {
$.getJSON(twitchAPI + channels + val + callback, function(data2) {
$(".wrap").append("<a href=" + data2.url + "><div class='streamers offline'><img src='https://68.media.tumblr.com/2bab580406f69a3ff294bd0782d83c5a/tumblr_ohkte1EwLM1sj6gx1o1_540.png'><div class='info'><span>" + val + " </span><span>is currently offline</span></div></div></a>");
});//data2
} else {
$(".wrap").append("<a href=" + data1.stream.channel.url + "><div class='streamers online'><img src=" + data1.stream.channel.logo + "><div class='info'><span>" + val + " </span><span class='game'>streaming " + data1.stream.game + "</span><span>" + data1.stream.viewers + " viewers</span></div></div></a>");
} //ELSE
}); //data1
}); //map
samudabamu sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 414 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
http://codepen.io/Waqas909/pen/yVooZE
Why doesnt the Search Box and Random Article transition?
waqas909 sends brownie points to @johnnybizzel :sparkles: :thumbsup: :sparkles:
:cookie: 929 | @johnnybizzel |http://www.freecodecamp.com/johnnybizzel
lawfets sends brownie points to @thetessamurphy :sparkles: :thumbsup: :sparkles:
:cookie: 261 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
$(document).ready(function(){
$("#testWeer").on("click", function(){
var data = $.getJSON("http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0", function(data){
$("arrayWeather").html(JSON.stringify(data));
});
});
});
arrayWeather
are you missing a #
http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
https://crossorigin.me/http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
<p id="#test> </p> // close the id tag
@lawfets User Story: I can see the weather in my current location.
https://openweathermap.org/current#geo
See the example Api call
{"coord":{"lon":139,"lat":35},
"sys":{"country":"JP","sunrise":1369769524,"sunset":1369821049},
"weather":[{"id":804,"main":"clouds","description":"overcast clouds","icon":"04n"}],
"main":{"temp":289.5,"humidity":89,"pressure":1013,"temp_min":287.04,"temp_max":292.04},
"wind":{"speed":7.31,"deg":187.002},
"rain":{"3h":0},
"clouds":{"all":92},
"dt":1369824698,
"id":1851632,
"name":"Shuzenji",
"cod":200}
https://crossorigin.me/http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
~~~
$(document).ready(function(){
$("#testWeer").on("click", function(){
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=", function(data){
});
});
});
$(document).ready(function(){
$("#testWeer").on("click", function(){
$.getJSON("https://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=", function(data){
});
});
});
@lawfets Like I said add
https://crossorigin.me/http://api.openweathermap.org/data/2.5/forecast/city?id=3029799&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?
instead of
https://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback="
var data = $.getJSON("https://crossorigin.me/http://api.openweathermap.org/data/2.5/weather?q=Bruges&APPID=88b75e0f51b809b601a2e4f76955cdf0&callback=?", function(data){return $(".arrayWeather").html(data);})
&callback=?
from the url and try again
lawfets sends brownie points to @alpox and @sorinr and @waqas909 :sparkles: :thumbsup: :sparkles:
:cookie: 274 | @waqas909 |http://www.freecodecamp.com/waqas909
:cookie: 674 | @alpox |http://www.freecodecamp.com/alpox
:cookie: 895 | @sorinr |http://www.freecodecamp.com/sorinr
callback=?
and without crossorigin.me
@lawfets The difference was probably that part:
function(data){html(JSON.stringify(data));
});
the function html
doesn't exist. there should have been some jquery selector before it
$("#getMessage").on("click", function(){
// Only change code below this line.
$.getJSON("/json/cats.json", function(json) {
$(".message").html(JSON.stringify(json));
});
input:-
var data = [
{
"name": "HTTP: IIS newdsn.exe File Creation",
"score": "100.0"
},
{
"name": "HTTP: Guestbook Execute Command Attempt",
"score": "45.0"
}
];
output:-
var transformedData = [
["HTTP: IIS newdsn.exe File Creation" , 100.0],
["HTTP: Guestbook Execute Command Attempt" , 45.0]
]
this is my js code//////RUN JQUERY
$(document).ready(function(){
//STATUS AND API CALL FOR FREE CODE CAMP
var url='https://wind-bow.hyperdev.space/twitch-api/streams/?callback=?';
$.getJSON(url, function(data1){
if(data1.stream===null){
$("#fccStatus").html("Free Code Camp is OFFLINE");
}
else{
$("#fccStatus").html("Free Code Camp is ONLINE");
}
});
var followerURL="https://wind-bow.hyperdev.space/twitch-api/channels/freecodecamp/follows/";
$.getJSON(followerURL, function(data2){
for(var i=0;i<data2.follows.length;i++){
var displayName=data2.follows[i].channel.display_name;
console.log(displayName);
}
});
});
#message {
background-color:rgba(255,255,255,0);
border: none;
}
background: transparent;
background: transparent;
background-color: transparent;
border: none;
border-bottom: 1px solid #9e9e9e;
http://codepen.io/moohibrahim/pen/MbJEVm
need help pls
box-shadow: none;
function inIframe () { try { return window.self !== window.top; } catch (e) { return true; } }
:cookie: 896 | @sorinr |http://www.freecodecamp.com/sorinr
lawfets sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
messiahack sends brownie points to @kirbyedy and @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1616 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:star2: 1088 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
messiahack sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 897 | @sorinr |http://www.freecodecamp.com/sorinr
<main>
<!-- My logo image here-->
<div class="container">
<div class="row">
<a href="#">
<img class="img-responsive smaller-logo col-xs-12" src="http://i.imgsafe.org/5ba22bc802.png">
</a>
</div>
</div>
<!--My background image here-->
<div class="container">
<div class="row">
<seaction id="About">
<img class="img-responsive col-xs-12" src="http://i.imgsafe.org/5af5e14134.jpg">
</div>
</div>
</main>
<div class="col-xs-4 port-col">
something like `<div class="col-xs-12 col-md-4 port-col"> because now when you shrink the display you still have 3 pics on a row that have the class img-responsive so they get smaller and smaller
Hi again all! Thank you so much for your previous help. I am on the build a tribute page challenge. I have been searching for answers both in the forum and around the interwebs and everything I find says I should be using CSS with HTML.
I thought for this challenge we were to use only HTML. Can we also use CSS?
mcrobbah sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1089 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
tylermoeller sends brownie points to @marianissimus :sparkles: :thumbsup: :sparkles:
:cookie: 148 | @marianissimus |http://www.freecodecamp.com/marianissimus
marianissimus sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1090 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
Oh my gawd!!! I finally finished my calculator project. need some feedback:
http://codepen.io/emmanuelamador/full/bBLvgo/
It works well on mobile it's just that if you go smaller than that it gets messed up but who's gonna do that. lol
float
while arranging boxes
https://wind-bow.hyperdev.space
to https://wind-bow.gomix.me
mr-kumar-abhishek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1091 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
[link text](http://url)
@Robertb4 i had a similar issue with my calculator. But i had the opposite issue. every time i removed text from a div and it was empty it would add a bottom margin to the div. so i ended up placing the html entity code
which represents a space. kind of like a placeholder and it would go back to normal.
mr-kumar-abhishek sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: mr-kumar-abhishek already gave tylermoeller points
div
or any similar tags don't take css dimensions unless you put something in them ~
display
I suppose... whatever its default value is for the browser
jluboff sends brownie points to @mr-kumar-abhishek :sparkles: :thumbsup: :sparkles:
:cookie: 415 | @mr-kumar-abhishek |http://www.freecodecamp.com/mr-kumar-abhishek
rgb(102, 90, 88)
but find better ~
rgb(102, 90, 88)
doesn't matches with anchor link though ...
:cookie: 573 | @em-ant |http://www.freecodecamp.com/em-ant
tommygebru sends brownie points to @em-ant :sparkles: :thumbsup: :sparkles: