//Temperature convert on toggle
var tempSwitch = function () {
$(".onoffswitch").change(
function tempSwitchHandler () {
if (this.checked) {
alert("this works");
}
})
}
<section id="nav-header">
<nav class="navbar navbar-dark navbar-nav navbar-full" id="navbar-top">
<div class="container">
<!--<p class="logo"><img src="images/bb-logo.png" alt="bigbus-logo" style="width:266px;height:33px;"></p>-->
<!--<p class="locator"><img src="images/locator.png" alt="locator" style="width:30px;height:30px;"></p>-->
<!--<p class="ticket"><img src="images/ticket.png" alt="ticket" style="width:30px;height:30px;"></p>-->
<ul id="top-nav-list">
<li class="nav-item logo"><img src="images/bb-logo.png" alt="bigbus-logo" style="width:266px;height:33px;"></li>
<li class="nav-item locator"><img src="images/locator.png" alt="locator" style="width:30px;height:30px;"></li>
<li class="nav-item ticket"><img src="images/ticket.png" alt="ticket" style="width:30px;height:30px;"></li>
<li class="nav-item hidden-md-down">Find a Bus Stop</li>
<li class="nav-item hidden-md-down">Eng / Gpb £</li>
</ul>
</div><!--end:container-->
</nav><!--end:nav-->
</section>
somehow its not working so well
do you have your code
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<title>Front-End Developer in Miami</title>
</head>
<body>
<div class="container-fluid">
<nav role="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse">
<ul class="navbar-left">
<li><img src=""></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li class="active"><a href="#">Home</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
</nav><!--Menu ends-->
<!--Main starts-->
<div class="jumbotron">
<div class="container">
<div class" row">
<div class="col-md-9">
<h1>Juan Angelogianopulos</h1>
<p>
<strong>Front-End Developer and graphic designer</strong>, with practical experience in digital marketing, branding strategy, and art direction; devoted to functional programming and information architecture.
</p>
</div>
<div class="col-md-3">
<img class="responsive" src="http://www.istockphoto.com/photo/responsive-design-mockup-gm516755340-89126979?st=_p_web%20designer">
</div>
</div>
</div>
</div>
<section id="portfolio">
<div class="container">
<h2>PORTFOLIO</h2>
<ul class="grid">
<li><img src=""></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</div>
<section id="contact">
<div class="container">
<h2>CONTACT</h2>
<form id="contactForm">
<div class="form-item">
<label for="name"></label>
<input id="name" type="text" placeholder="Name" required>
</div>
<div class="form-item">
<label for="email"></label>
<input id="email" type="text" placeholder="Email" required>
</div>
<div class="form-item">
<label for="phone"></label>
<input id="Phone" type="text" placeholder="Phone" required>
</div>
<div class="form-item">
<label for="message"></label>
<textarea id="message" rows="5" placeholder="Message" required></textarea>
</div>
<br>
<button type="submit">Send</button>
</form>
</div>
</div>
</div>
</section>
</bod
<p class="responsive"><img src="http://www.istockphoto.com/photo/responsive-design-mockup-gm516755340-89126979?st=_p_web%20designer"></p>
alt="image name" style="width:266px;height:33px;"
angelogianopulos sends brownie points to @miriam-z :sparkles: :thumbsup: :sparkles:
:cookie: 249 | @miriam-z |http://www.freecodecamp.com/miriam-z
c0d0er sends brownie points to @0x0936 :sparkles: :thumbsup: :sparkles:
:star2: 1812 | @0x0936 |http://www.freecodecamp.com/0x0936
.button:focus
. However, they're not changing color after implementing the automated system
walidashri sends brownie points to @thetessamurphy :sparkles: :thumbsup: :sparkles:
:cookie: 231 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
https://codepen.io/GrantKnaver/pen/pNvyZE
document.getElementsByTagName("body").style.backgroundColor = "green";
document.getElementsByTagName("body")[0].style.backgroundColor = "green";
grantknaver sends brownie points to @thetessamurphy and @jeremiahbiard :sparkles: :thumbsup: :sparkles:
:cookie: 232 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
:cookie: 346 | @jeremiahbiard |http://www.freecodecamp.com/jeremiahbiard
jax11000 sends brownie points to @thetessamurphy :sparkles: :thumbsup: :sparkles:
:cookie: 233 | @thetessamurphy |http://www.freecodecamp.com/thetessamurphy
thetessamurphy sends brownie points to @jax11000 :sparkles: :thumbsup: :sparkles:
:cookie: 121 | @jax11000 |http://www.freecodecamp.com/jax11000
var obj = {
"somestuff":"someotherstuff"
};
$(document).ready(function() {
$("#getQuotes").on("click", function(){
$.getJSON(obj, function(json){
$(".message").html(JSON.stringify(json));
});
});
});
aarya1302 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 820 | @sorinr |http://www.freecodecamp.com/sorinr
.timer
div include work and break 4 small buttons even timer div is behind the work and break buttons? code is very short, thanks, http://codepen.io/c0d0er/pen/eBmgQP?editors=1010
<div class='col-xs-12 col-sm-6 work'>
<h3>work</h3>
<button class='wo1 small'>-</button>
<span class='time2'>2</span>
<button class='wo2 small'>+</button>
</div>
<div class='timer'>// this div is under above tags, why this div include the above tags?
.break{
background-color:green;
}
why this div include the above tags?
should be why this timer div's background color include the above tags?
<div class='col-xs-12 col-sm-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
</div>
<div class="clearfix visible-xs-block"></div> <!-- Since xs has exhausted 12 columns -->
<div class='col-xs-12 col-sm-6 work'>
<h3>work</h3>
<button class='wo1 small'>-</button>
<span class='time2'>2</span>
<button class='wo2 small'>+</button>
</div>
<div class="clearfix visible-xs-block"></div> <!-- Since xs has again exhausted 12 columns -->
<div class='timer'>
...
...
<div class="clearfix visible-xs-block visible-sm-block"></div> <!-- xs and sm has exhausted 12 columns -->
c0d0er sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 344 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 821 | @sorinr |http://www.freecodecamp.com/sorinr
row
class of div which wrap the work break buttons and big circle area?
c0d0er sends brownie points to @nitinnair89 and @sorinr :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave nitinnair89 points
:warning: c0d0er already gave sorinr points
container > rows > columns
hiearchry
<div class="container">
<div class="row">
<div class="col-*-*"></div>
c0d0er sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave sorinr points
<div class="container">
before <div class='row'>
in the following code? <h1 class='title'>Pomodoro Clock</h1>
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
<h1 class='title'>Pomodoro Clock</h1>
<div class="container">
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
container-fluid
<div class='container-fluid text-center'>
<h1 class='title'>Pomodoro Clock</h1>
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<section>
tags and a common full width container to wrap every other containers you have in your code. :)
c0d0er sends brownie points to @sorinr and @nitinnair89 :sparkles: :thumbsup: :sparkles:
:warning: c0d0er already gave sorinr points
:warning: c0d0er already gave nitinnair89 points
<div class='container'>
before <div class='row'>
, my work and break buttons come closer each other, the distance of the work and break buttons getting shorter, why?<div class='container-fluid text-center'>
<h1 class='title'>Pomodoro Clock</h1>
<div class='container'>
<div class='row'>
<div class='col-xs-12 col-sm-6 col-md-6 col-lg-6 break'>
<h3>break</h3>
<button class='br1 small'>-</button>
<span class='time1'>1</span>
<button class='br2 small'>+</button>
</div>
margin:0
in your CSS
ricky11 sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 823 | @sorinr |http://www.freecodecamp.com/sorinr
absolute
position, the parent should have the position relative
so the absolute position can take effect within the parent content!
hristijankiko sends brownie points to @u-ways :sparkles: :thumbsup: :sparkles:
:cookie: 547 | @u-ways |http://www.freecodecamp.com/u-ways
@hristijankiko
Your parent element was too small :D Below are the changes made:
.switch
width: 100px /* increased width by 40px */
.slider
width: 50% /* decreased width by 50% */
top: 0
right: 0 /* Removed left so it will settle at the right */
bottom: 0
footer li { display: inline-block; }
angelogianopulos sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 361 | @otto-aa |http://www.freecodecamp.com/otto-aa
nitinnair89 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 362 | @otto-aa |http://www.freecodecamp.com/otto-aa
kolyambo sends brownie points to @nitinnair89 :sparkles: :thumbsup: :sparkles:
:cookie: 346 | @nitinnair89 |http://www.freecodecamp.com/nitinnair89
var obj ={ funcTwo: function(){console.log("funcTwo called.");}};
@atharvajava
function palindrome(str) {
// Good luck!
str=str.toLowerCase();
str=str.replace(/[^\Wa-z0-9]/gi," ");
str=str.replace(/[.,\s]/g, '');
str=str.replace(/\//g, "");
str=str.replace("(", "").replace(")", "").replace("-", "");
var a=str.split("");
a=a.reverse();
a=a.join("");
if(str===a){
return true;
}
else {
return a;
}
}
palindrome("0_0 (: /-\ :) 0-0");
hi guys any idea what i am doing wrong here
thetessamurphy sends brownie points to @sorinr :sparkles: :thumbsup: :sparkles:
:cookie: 824 | @sorinr |http://www.freecodecamp.com/sorinr
thetessamurphy sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 363 | @otto-aa |http://www.freecodecamp.com/otto-aa
Could someone tell me what I'm missing in this code? I'm not getting anything.
$("#btnWeather").on("click", function(){ $.getJSON("http://api.openweathermap.org/data/2.5/forecast/daily?q=api.openweathermap.org/data/2.5/weather?q=Bremerton&APPID=ee6596241130f193adf1ba90e625cc10",function(result){
alert("Weather: "+ result.main.temp);
});
});
{"cod":401, "message": "Invalid API key. Please see http://openweathermap.org/faq#error401 for more info."}
as a result
{
coord: {
lon: -122.63,
lat: 47.57
},
weather: [
{
id: 804,
main: "Clouds",
description: "overcast clouds",
icon: "04d"
}
],
base: "stations",
main: {
temp: 285.96,
pressure: 1017,
humidity: 87,
temp_min: 284.15,
temp_max: 288.15
},
visibility: 16093,
wind: {
speed: 4.6,
deg: 180
},
clouds: {
all: 90
},
dt: 1478456100,
sys: {
type: 1,
id: 2923,
message: 0.1609,
country: "US",
sunrise: 1478444650,
sunset: 1478479417
},
id: 5788054,
name: "Bremerton",
cod: 200
}
transition: background-color 1s ease-in-out
or something like that to the elements CSS
waqas909 sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 364 | @otto-aa |http://www.freecodecamp.com/otto-aa
thetessamurphy sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @segrooms |http://www.freecodecamp.com/segrooms
$.getJSON("http://ip-api.com/json").done(function(ipJson) {
console.log("done");
var url = "http://api.openweathermap.org/data/2.5/weather?q=" + ipJson.city + "&units=imperial&APPID=090df93fca915b0729df1d32d8d37595";
$("#data").html(url);
}).fail(function() {
console.log("fail")
});;
marcinkluska sends brownie points to @otto-aa :sparkles: :thumbsup: :sparkles:
:cookie: 365 | @otto-aa |http://www.freecodecamp.com/otto-aa
thetessamurphy sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: thetessamurphy already gave segrooms points
margin
to 0. Or to be specific margin-right
should be 0
.about
selector?
margin:0
in your .about
selector that would work.
nitinraghav sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 377 | @segrooms |http://www.freecodecamp.com/segrooms
nitinraghav sends brownie points to @danstockham :sparkles: :thumbsup: :sparkles:
:cookie: 514 | @danstockham |http://www.freecodecamp.com/danstockham
nitinraghav sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: nitinraghav already gave segrooms points
$.ajax({
dataType: "json",
url: 'https://wind-bow.hyperdev.space/twitch-api/users/tictac_hs',
success: function() {
console.log("wow!");
}
});
"{"error":"Unprocessable Entity","status":422,"message":"Channel 'channel is unavailable"}"
$.ajax({
dataType: 'json',
url: 'https://api.twitch.tv/kraken/streams/ESL_SC2',
headers: {
'Accept': 'application/vnd.twitchtv.v3+json',
'Client-ID': '1cif9hquapcfo1i4h9kcr5eubsrx5ek'
},
success: throw a dance part,
error: cry yourself to sleep
});
:cookie: 323 | @oppiniated |http://www.freecodecamp.com/oppiniated
bd1887 sends brownie points to @segrooms and @oppiniated :sparkles: :thumbsup: :sparkles:
:cookie: 378 | @segrooms |http://www.freecodecamp.com/segrooms
keskahjune sends brownie points to @coymeetsworld and @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 379 | @segrooms |http://www.freecodecamp.com/segrooms
:star2: 1492 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
keskahjune sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:warning: keskahjune already gave segrooms points
nitinraghav sends brownie points to @segrooms :sparkles: :thumbsup: :sparkles:
:cookie: 380 | @segrooms |http://www.freecodecamp.com/segrooms
nitinraghav sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:star2: 1493 | @coymeetsworld |http://www.freecodecamp.com/coymeetsworld
:cookie: 264 | @nitinraghav |http://www.freecodecamp.com/nitinraghav
segrooms sends brownie points to @nitinraghav :sparkles: :thumbsup: :sparkles:
nitinraghav sends brownie points to @coymeetsworld :sparkles: :thumbsup: :sparkles:
:warning: nitinraghav already gave coymeetsworld points
c0d0er sends brownie points to @nankeuriseu :sparkles: :thumbsup: :sparkles:
:cookie: 376 | @nankeuriseu |http://www.freecodecamp.com/nankeuriseu
Having trouble with the JS calculator. I made a function to add numbers to an array and another function to clear out the array. But the clear function only works sometimes and not other times. Any ideas?
http://codepen.io/tyl-er/pen/vyYbmV?editors=0011
var prob = [];
function clear(){
var prob = [];
console.log(prob);
}
function addOne(num) {
prob.push(num);
console.log(prob);
}
I know there are other ways to remove the items. I'm just curious why this isn't working
prob
is different than the one declared outside your functions
var streamArray = ["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "mfnmanifest", "RobotCaleb", "comster404"];
var list = "";
// var key = 'https://wind-bow.hyperdev.space/twitch-api/streams/' + streamArray[0 + i] + '?callback=?';
for (var i = 0; i < 3; i++) {
$.getJSON('https://wind-bow.hyperdev.space/twitch-api/streams/' + streamArray.slice(0,1) + '?callback=?', function(data) {
console.log(data);
streamArray += streamArray[i];
list += "<li class='list-group-item'> <span class='badge'>" + data.stream.viewers + "</span>" + streamArray +"</li>";
console.log(list);
$("#listId").html(list);
tyl-er sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 397 | @kat-mag |http://www.freecodecamp.com/kat-mag
streamArray += streamArray[i];
@kat-mag I changed it to this but it still only works once.
var prob = [];
function addOne(num) {
prob.push(num);
console.log(prob);
}
function clear(){
prob.splice(0, prob.length);
console.log(prob);
}
prob = [];
maybe... but c'mon. you're overdoing it ;D overthinking. It'd work without some 'not-so-fancy' arrays ;P
mitchwilkins sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:cookie: 398 | @kat-mag |http://www.freecodecamp.com/kat-mag
list += "<li class='list-group-item'> <span class='badge'>" + data.stream.viewers + "</span>" + streamArray[i] +"</li>";
it now just prints out the last iteration 4 times
tyl-er sends brownie points to @kat-mag :sparkles: :thumbsup: :sparkles:
:warning: tyl-er already gave kat-mag points