"jsonp"
?
jrandallhansen sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 813 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
class="caption"
to your text
718rogue sends brownie points to @jrandallhansen :sparkles: :thumbsup: :sparkles:
:cookie: 324 | @jrandallhansen |http://www.freecodecamp.com/jrandallhansen
div
perfectly. very easy
I logged the following:
console.log(io.nsps['/'].adapter.rooms[socket.room]);
and it returned the following:
Room { sockets: { '/#O6L2als5FU-VfHSoAAAA': true }, length: 1 }
How might I edit console.log so that it returns the length value? I tried .length, .sockets.length, I also added 1 to the end. These were all unsuccessful. This should be basic javascript but I cant get it :(
console.log(io.nsps['/'].adapter.rooms[socket.room].length)
<a href="#myContent">Go to myContent</a><div id="myContent"></div>
that's can do the work
id
s to your elements and tada
parent > *
:cookie: 693 | @adityaparab |http://www.freecodecamp.com/adityaparab
radascript sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
shamikk sends brownie points to @kirbyedy and @adityaparab :sparkles: :thumbsup: :sparkles:
:star2: 1367 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
:cookie: 694 | @adityaparab |http://www.freecodecamp.com/adityaparab
parent > *
is entirely pointless.
Hi guys! Anyone here has finished Intermediate Algorithm Scripting? :smile:
Intermediate Algorithm Scripting/Spinal Tap Case
Convert a string to spinal case. Spinal case is all-lowercase-words-joined-by-dashes.
I have created something like this:
function spinalCase(str) {
//The RegExp constructor creates a regular expression
// object for matching text with a pattern.
var pattern = /\s/g;
var toLowerCase = str.toLowerCase();
var newstr = toLowerCase.replace(pattern, '-');
return newstr;
}
spinalCase('This Is Spinal Tap');
But I don't have any idea how can I detect this spinalCase("thisIsSpinalTap") and change it to that "this-is-spinal-tap"? Any ideas?
@kirbyedy Thx, it worked!
But can you help me decode this RegEx?
function spinalCase(str) {
var test = str.split(/(?=[A-Z])/);
return test;
}
spinalCase("thisIsSpinalTap");
What does /(?=[A-Z])/ mean exactly?
elminsterrr sends brownie points to @kirbyedy :sparkles: :thumbsup: :sparkles:
:star2: 1368 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
function spinalCase(str) {
var test = str.split(/([A-Z])/);
return test;
}
spinalCase("thisIsSpinalTap");
=> [ 'this', 'I', 's', 'S', 'pinal', 'T', 'ap' ]
dm-nz sends brownie points to @kirbyedy and @gregatgit :sparkles: :thumbsup: :sparkles:
:cookie: 761 | @gregatgit |http://www.freecodecamp.com/gregatgit
:star2: 1369 | @kirbyedy |http://www.freecodecamp.com/kirbyedy
https://crossorigin.me/
http://ip-api.com/json
@sjames1958gm like this? $(document).ready(function(){
var latitude;
var longitude;
$.getJSON("http://ip-api.com/json",function(data2){
latitude=data2.lat;
longitude= data2.lon;
console.log(latitude);
});
});
jay-20 sends brownie points to @sjames1958gm :sparkles: :thumbsup: :sparkles:
:star2: 3175 | @sjames1958gm |http://www.freecodecamp.com/sjames1958gm
HTML :
<center><h1 id = "title">WeatherCaster</h1></center>
<div class="container">
<center><img src = "#" id = "testimg"></center>
<p id = "description"></p>
<center><p id = "temperature"></p></center>
</div>
CSS :
@import 'https://fonts.googleapis.com/css?family=Oswald';
body {
JavaScript :
$( document ).ready(function() {
$.ajax ({url : "http://ip-api.com/json"
}).done(function(data) {
Weather(data.lat,data.lon);
}).fail(function(err) {
console.log(err);
});
});
function Weather(latitude , longtitude){
console.log(latitude, longtitude);
var apiKey = "fffc77f90fb489748fe36ae1b79ac8b5";
$.ajax ({
dataType : "json",
url : "http://api.openweathermap.org/data/2.5/weather?lat=" + latitude + "&lon=" + longtitude + "&APPID=" + apiKey,
type : "GET"
}).done(function(json){
console.log(json);
var Location = json.name + " , " + json.sys.country;
var currentWeather = json.weather[0].description;
var timeGet = new Date();
var time = timeGet.getTime();
var sunrise = json.sys.sunrise;
var sunset = json.sys.sunset;
var ico;
// var Fahrenheit = Math.floor(json.main.temp);
// var Celsius = Math.floor((Fahrenheit * 9 / 5) - 32);
// var Temperature = Celsius;
// document.GetElementById("temperature").html(Temperature);
if(currentWeather == "clear sky"){
if(time > sunset || time < sunrise){
var ico = "https://s9.postimg.org/7ak2dla3f/Clear_Sky_Night.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image', 'url(https://s21.postimg.org/lfd9y978z/Clear_Sky_Night.jpg)');
}else{
var ico = "https://s9.postimg.org/asw29zazf/Clear_Sky.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/u38v1i3k7/Clear_Sky.jpg)');
}
}
if(currentWeather == "few clouds"){
if(time > sunset || time < sunrise){
var ico = "https://s9.postimg.org/xy6gvzg4b/Few_Clouds_Night.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s21.postimg.org/tm59ptxbn/Few_Clouds_Night.jpg)');
}else{
var ico = "https://s9.postimg.org/j0xzuz2vv/Few_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/y0w4qwqdj/Few_Clouds.jpg)' );
}
}
if(currentWeather == "scattered clouds"){
var ico = "https://s9.postimg.org/xpdhjsspn/Scattered_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/d7ybg8n7r/Scattered_Clouds.jpg)' );
}
if(currentWeather == "broken clouds"){
var ico = "https://s9.postimg.org/415n74lzv/Broken_Clouds.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/d1g0zeop3/Broken_Clouds.jpg)');
}
if(currentWeather == "shower rain"){
var ico = "https://s9.postimg.org/8kmh6dt97/Shower_Rain.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/yvn9qonlz/Shower_Rain.jpg)');
}
if(currentWeather == "rain"){
var ico = "https://s9.postimg.org/cr2q7z3h7/Rain.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/qnlc5ovpj/Rain.jpg)');
}
if(currentWeather == "thunderstorm"){
var ico = "https://s9.postimg.org/7kw6aoe3f/Thunderstorm.png";
document.getElementById("testimg").setAttribute("src" , ico);
$('body').css('background-image' , 'url(https://s15.postimg.org/lha6ungxz/Thunderstorm.jpg)' );
}
if(currentWeather == "snow"){
var ico = "https://s9.postimg.org/52ah9zsd7/Snow.png";
document.getElementById("testimg").setAttribute("src" , ico);
$(
@Bludfire
a{
color : "some color";
}
??
it doesn't work
?
body{
margin:0;
padding:0;
color:#666;
background:#888;
font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 20px;
font-color:white;
}
background-color:purple;
height:75px;
}
.img {
height:55px;
padding-top:15px;
}
padding-top:10px;
}
a {
color:white;
}
text-decoration: none;
border-bottom: 2px solid white;
text-decoration: underline;
a bit late though haha
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
faiz7412 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 445 | @labiej |http://www.freecodecamp.com/labiej
faiz7412 sends brownie points to @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 439 | @belax8 |http://www.freecodecamp.com/belax8
border-bottom: 1px solid black;
the border-bottom property you're using should work!miriam-z sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 446 | @labiej |http://www.freecodecamp.com/labiej
/public/src/assets/img
and my index.html is placed on the root. I have tried every variation of path and still nothing loads
123xylem sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 356 | @u-ways |http://www.freecodecamp.com/u-ways
<div class="container-fluid">
<h3 id="cards-title">Why choose our sightseeing bus tours?</h3>
<div id="home-tiles" class="row">
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-bus-md.jpg">
<div id="card-bus">Hop-on, Hop-off<span> As many times as you choose</span></div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-route-md.jpg">
<div id="card-route">Our Amazing Routes<span>See Paris by day and night</span></div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-cruise-md.jpg">
<div id="card-cruise">Free River Cruise<span>One ticket, two experiences</span></div>
</a>
</div>
<div class="col-lg-3 col-md-3 col-sm-12 col-xs-12">
<a href="public/src/assets/img/card-guide-md.jpg">
<div id="card-guide">Live Guides<span>With renowned local knowledge</span></div>
</a>
</div>
</div>
</div>
<a href="public/src/assets/img/card-route-md.jpg">
Use img tag instead of the a tag for images. one moment let me provide an example
img
tag and not an a
tag
<img src="public/src/assets/img/card-route-md.jpg">
miriam-z sends brownie points to @labiej and @u-ways and @belax8 :sparkles: :thumbsup: :sparkles:
:cookie: 357 | @u-ways |http://www.freecodecamp.com/u-ways
:warning: miriam-z already gave labiej points
:cookie: 440 | @belax8 |http://www.freecodecamp.com/belax8
<img src="./public/src/assets/img/card-route-md.jpg" >
, better to avoid possible ambiguities
@miriam-z
<a href="links goes here">
<img src="./public/src/assets/img/card-route-md.jpg">
<div id="card-route">Our Amazing Routes<span>See Paris by day and night</span></div>
</a>
Something like that perhaps? o:
( @labiej Thanks for the path tip haha)
u-ways sends brownie points to @miriam-z and @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 248 | @miriam-z |http://www.freecodecamp.com/miriam-z
:cookie: 447 | @labiej |http://www.freecodecamp.com/labiej
miriam-z sends brownie points to @labiej and @u-ways :sparkles: :thumbsup: :sparkles:
:warning: miriam-z already gave u-ways points
:warning: miriam-z already gave labiej points
<div class="border"></div>
use this empty div for a quick border!
./public/src/assets/img/card-route-md.jpg
did not work, try: public/src/assets/img/card-route-md.jpg
)
./
so it doesn't try to find the root directory. Like <img src="public/src/assets/img/card-route-md.jpg" >
<img src="src/assets/img/card-route-md.jpg" >
public/src/assets - css - img - js - stylesheets index.html
<img src="img/card-route-md.jpg" >
You have to think of the path from the HTML file not the full path
@jrandallhansen : Slight mistake. It will work for some people and won't work for others, depending on their browsers.
However, this is a generic way to make sure it works everywhere
if (e.which == 13) { //Enter key pressed
//$('#searchButton').click(); //Trigger search button click event
$('#searchButton').trigger('click',{}); //Trigger search button click event
}
.click
is meant to be used as .addEventListener
equivalent. So refrain from violating standards even though it seems to work in short run. It will help you avoid the likelihood of running into pretty nasty and ugly issues in the long run.
faiz7412 sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 448 | @labiej |http://www.freecodecamp.com/labiej
.click
should ONLY be used in place of .on('click',{})
essentially??
.click
and .on('click'
are equivalent. If you want to trigger the event on certain element then refrain from using .click
. Use .trigger
instead.
require
won't work directly in the browser. You will need some module loader to pull that off. Like Browserify or Webpack.
.click
as shorthand for .on('click')
right? or are there other uses ?
.on
syntax. for .click
sounds a little counter intuitive to me.
.click
since it is shorter lol
.click
accept a reference to a function?
.click
does sound like you're triggering a even as well :D
@MohammadHasham
var bar = new ProgressBar.Line('#container', {easing: 'easeInOut'});
bar.animate(1); // Value from 0.0 to 1.0
Same as explained in that tutorial
$("#yourButton").click(function(){});
is the format
npm install
ed progressbar.js
you can also set the src to node_modules/path/to/progressbarjs
depending on folder structure
$(document).ready(function(){
var bar = new ProgressBar.Line('.c100 p25', {easing: 'easeInOut'});
bar.animate(1);
});
@adityaparab nothing is there on the screen
console.log(ProgressBar);
and see if it's getting set properly?
I got it working here at this pen
mohammadhasham sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
:cookie: 695 | @adityaparab |http://www.freecodecamp.com/adityaparab
<a href="#contact">Contact</a>
target="_blank"
on links and let me check if any other issues
<h1 id="About" class="text-center"><u>About</u></h1>
you used id=#About
id=About
and on links it should be href=#About
torayx sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 486 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
Jquery.js
and then bootstrap.js
in JS panel of your pen
$("#celsius").on("click", function(){
Temperature = Celsius;
TemperatureString = Temperature.toString() + "°";
$("#temperature").html(TemperatureString);
});
$("#fahrenheit").on("click", function(){
Temperature = Fahrenheit;
TemperatureString = Temperature.toString() + "°";
$("#temperature").html(TemperatureString);
});
.form{
border: none;
border-bottom: 1px solid lightgrey;
background-color: #e6e6e6;
margin:10px;
padding-top: 20px;
padding-bottom: 20px;
font-size: 1.5em;
box-shadow:none;
outline:none;
}
*:focus {
outline:none;
outline-style:none;
box-shadow:none;
border-color:inherit;
-webkit-box-shadow: none;
}
border: none
outline: none
-webkit-box-shadow: none
-moz-box-shadow: none
box-shadow: none
#left textarea:focus
but that's because I wrote it in Sass
arvendragon sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
:cookie: 449 | @labiej |http://www.freecodecamp.com/labiej
.form-control:focus{
border: none;
outline: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
:warning: arvendragon already gave labiej points
arvendragon sends brownie points to @labiej :sparkles: :thumbsup: :sparkles:
@DavidDarius another comment, your navbar isn't collapsing properly. if you intended to have a giant fixed menu, i'd recommend against that.
your image links are also broken
Twitter widget
you cant access your twitter-share-button
from JS it will be replaced by iframe
you can verify that chrome dev tools. So use your own a
tag style it as button and change its href
in JS dynamically using http://twitter.com/share?text=your quote and author
.quotesquare
some min-height
so it won't flicker when quote text is small
tadalox sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 487 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
hello
arvendragon sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
:cookie: 488 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
function imgChk()
{
var allImg = document.querySelectorAll('.item > img');
console.log(allImg.length);
console.log(allImg[0]);
console.log(allImg[0].height);
console.log(allImg[5]);
console.log(allImg[5].height);
for (var i =0;i<allImg.length; i++)
{
if (allImg[i].height < 350)
{
$(allImg[i]).css('top', '120px')
/*#myCarousel.carousel.slide is the element I need to affect but I'm not certain how to target a specific image this way, :active doesn't work*/
}
}
}
div.row
using media queries and for PORTFOLIO images you can add links to those respective sites, so when we click on image it takes to that site .
light
class is not centered (or is it intentional?) 2) your GitHub icon is a bit off from the rest 3) well... overall pretty solid
<script>
$(document).ready(function() {
$("#target1").css("color", "red");
$("#target1").prop("disabled", true);
$("#target4").remove();
$("#target2").appendTo("#right-well");
$("#target5").clone().appendTo("#left-well");
$("#target1").parent().css("background-color", "red");
$("#right-well").children().css("color", "orange");
$("#left-well").children().css("color", "green");
$(".target:nth-child(2)").addClass("animated bounce");
$("target:even").addClass("animated shake");
});
</script>
the challenge is to target even numbered elements
line-height
so the text will be more reading-friendly
linnk99 sends brownie points to @qubkon :sparkles: :thumbsup: :sparkles:
:cookie: 108 | @qubkon |http://www.freecodecamp.com/qubkon
<ul class="nav nav-navbar">
it should be <ul class="nav navbar-nav">
:cookie: 489 | @vinaypuppal |http://www.freecodecamp.com/vinaypuppal
phuchle sends brownie points to @vinaypuppal :sparkles: :thumbsup: :sparkles:
$.ajax({
url: 'https://en.wikipedia.org/w/api.php',
data: {
action: 'query',
list: 'search',
srsearch: $("#search").val(),
format: 'json',
},
dataType: 'jsonp',
success: function(data) {
[some function]
}
},
error: console.log("error")
});
var search = $('#searchbox').val();
// API request to wikipedia
$.getJSON('https://en.wikipedia.org/w/api.php?action=opensearch&datatype=json&limit=8&search='+search+'&callback=?',
function(data) {
gabrielshaad sends brownie points to @garrusnapp :sparkles: :thumbsup: :sparkles:
:cookie: 310 | @garrusnapp |http://www.freecodecamp.com/garrusnapp
rosarend sends brownie points to @garrusnapp :sparkles: :thumbsup: :sparkles:
:cookie: 312 | @garrusnapp |http://www.freecodecamp.com/garrusnapp
rosarend sends brownie points to @zero2sixty :sparkles: :thumbsup: :sparkles:
:cookie: 140 | @zero2sixty |http://www.freecodecamp.com/zero2sixty
$("input").html("worked")
why doesn't it work guys? You can't change input label with jQuery?
<input id="wth" type="radio" name="choice"><label for="choice">WHATS</label>
$('label[for=choice]').html('worked');
garrusnapp sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:cookie: 814 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
gabrielshaad sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 374 | @u-ways |http://www.freecodecamp.com/u-ways