import React, { Component } from 'react';
import ChessConfigList from './components/ChessConfigList';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
const styles = {
container: {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
},
item: {
maxWidth: '50%',
}
};
class App extends Component {
render() {
return (
<MuiThemeProvider>
<div style={styles.container}>
<ChessConfigList />
</div>
</MuiThemeProvider>
);
}
}
export default App;
I'm using Material UI, and trying to style something with flex, "ChessConfigList" is just a Material UI table, according to my research of flexbox, this should get the table at the center, but instead, it's still aligned on the left (50% width is applying though)
into this: <script>
$(document).ready(function() {
});
</script>
<script>
$(document).ready(function() {
// your code goes here
});
</script>
i'm getting this error when trying to copy-paste the geolocation challenge code into my weather project :(
getCurrentPosition() and watchPosition() no longer work on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
I tried
document.getElementById('a').value = selectMe;
but it didn't work for some reason
<header>
<nav id="navigation" class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="col-md-3">
<div class="logo"></div>
</div>
<div class="col-md-6">
<div class="links">
</div>
</div>
<div class="col-md-3">
<div class="user">
</div>
</div>
</div>
</div>
</nav>
</header>
@TacoJoe
So it really just generates a number between 0 and 1?
Yes. That's it
tacojoe sends brownie points to @adityaparab :sparkles: :thumbsup: :sparkles:
<li ng-show="isAdmin()" ng-cloak ng-class="routeParameter('/')" class="dropdown"><a href="#/"><i class="fa fa-lock" aria-hidden="true"></i><span>Admin</span><span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li ng-class="routeParameter('/cities')" class="list-item"><a href="#/cities"><i class="fa fa-university"></i> <span>Cities</span></a></li>
<li ng-class="routeParameter('/facilities')" class="list-item"><a href="#/facilities"><i class="fa fa-briefcase "></i> <span>Facilities</span></a></li>
<li ng-class="routeParameter('/plans')" class="list-item"><a href="#/plans"><i class="fa fa-list"></i> <span>Plans</span></a></li>
</ul>
</li>
data-target: "#myNavbar"
instead of data-target: "#main-nav"
@winroy Bootstrap docs:
Then add the data-target attribute with the ID or class of the parent element of any Bootstrap .nav component.
<!-- a very small snippet -->
<div class="col-md-6 col-xs-6 ">column 1</div>
<div class="col-md-6 col-xs-3 col-xs-offset-3 ">column 2</div>
<!-- shouldn't this create 2 columns where the first one occupies 50%, and the other one is also 50%
BUT if the screen size is less than 420px, the second col will be pushed to the right,
and the content inside the div will occupy the remaining 25%. Correct? -->
Hi.. I am trying to build a random quote machine... I have pasted the script below..
$.ajax({
url: 'https://andruxnet-random-famous-quotes.p.mashape.com/',
headers: {
'X-Mashape-Key': 'omICRkQlhtmshdwPT0YLZkaojcAmp1sRWrvjsnKkKVLl1QvX06',
dataType: 'application/x-www-form-urlencoded',
Accept: 'application/json'
},
success: function(data) {
console.log(data.quote);
}
});
i am unable to access the quote... it shows undefined in the log.. Someone help please
@Muzaffarhssn5 - I think that it is a problem with your HTML structure. You have the HTML set up like this:
<div id="quote-display">
<span class="text"></span>
<footer class="author-name">- <span id="author"></span> </footer>
</div>
so when you do this: $('#quote-display').text(q.quote);
It is clobbering the structure of that div and removing your footer. You just need to change how you are updating that - maybe to use the span
that you have in there? Or restructure your code to get the footer out of there.
$('#quote-display').text(q.quote);
to $('.text').text(q.quote);
looks like it should work.
@Muzaffarhssn5 - I am getting both, using your current HTML structure and this change to the code:
$('.text').text(q.quote);
$('.author-name').text(q.author);
I also wrapped your $.ajax
call within a function, and added a .click
handler, and that seems to work, as well.
<div class="sign-up-htm">
<div class="group">
<label for="user" class="label">Username</label>
<input id="user" type="text" class="input" required>
</div>
<div class="group">
<label for="pass" class="label">Password</label>
<input id="pass" type="password" class="input" data-type="password" required>
</div>
<div class="group">
<label for="pass" class="label">Repeat Password</label>
<input id="pass" type="password" class="input" data-type="password" required>
</div>
<div class="group">
<label for="pass" class="label">Email Address</label>
<input id="pass" type="text" class="input" required>
</div>
<div class="group">
<label for="country">Category</label>
<select id="country" name="country">
<option value="australia">Australia</option>
<option value="canada">Canada</option>
<option value="usa">USA</option>
</select>
<input id="pass" type="text" class="input" required>
</div>
<div class="group">
<input type="submit" class="button" id="we1" value="Sign Up">
</div>
<div class="hr"></div>
<div class="foot-lnk">
<label for="tab-1">Already Member?</a>
</div>
</div>
body{
margin:0;
color:#6a6f8c;
background:#c8c8c8;
font:600 16px/18px 'Open Sans',sans-serif;
}
*,:after,:before{box-sizing:border-box}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}
a{color:inherit;text-decoration:none}
.login-wrap{
width:100%;
margin:auto;
max-width:525px;
min-height:670px;
position:relative;
background:url(https://raw.githubusercontent.com/khadkamhn/day-01-login-form/master/img/bg.jpg) no-repeat center;
box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19);
}
.login-html{
width:100%;
height:100%;
position:absolute;
padding:90px 70px 50px 70px;
background:rgba(40,57,101,.9);
}
.login-html .sign-in-htm,
.login-html .sign-up-htm{
top:0;
left:0;
right:0;
bottom:0;
position:absolute;
transform:rotateY(180deg);
backface-visibility:hidden;
transition:all .4s linear;
}
.login-html .sign-in,
.login-html .sign-up,
.login-form .group .check{
display:none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button{
text-transform:uppercase;
}
.login-html .tab{
font-size:22px;
margin-right:15px;
padding-bottom:5px;
margin:0 15px 10px 0;
display:inline-block;
border-bottom:2px solid transparent;
}
.login-html .sign-in:checked + .tab,
.login-html .sign-up:checked + .tab{
color:#fff;
border-color:#1161ee;
}
.login-form{
min-height:345px;
position:relative;
perspective:1000px;
transform-style:preserve-3d;
}
.login-form .group{
margin-bottom:15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button{
width:100%;
color:#fff;
display:block;
}
.login-form .group .input,
.login-form .group .button{
border:none;
padding:15px 20px;
border-radius:25px;
background:rgba(255,255,255,.1);
}
.login-form .group input[data-type="password"]{
text-security:circle;
-webkit-text-security:circle;
}
.login-form .group .label{
color:#aaa;
font-size:12px;
}
.login-form .group .button{
background:#1161ee;
}
.login-form .group label .icon{
width:15px;
height:15px;
border-radius:2px;
position:relative;
display:inline-block;
background:rgba(255,255,255,.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after{
content:'';
width:10px;
height:2px;
background:#fff;
position:absolute;
transition:all .2s ease-in-out 0s;
}
.login-form .group label .icon:before{
left:3px;
width:5px;
bottom:6px;
transform:scale(0) rotate(0);
}
.login-form .group label .icon:after{
top:6px;
right:0;
transform:scale(0) rotate(0);
}
.login-form .group .check:checked + label{
color:#fff;
}
.login-form .group .check:checked + label .icon{
background:#1161ee;
}
.login-form .group .check:checked + label .icon:before{
transform:scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after{
transform:scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{
transform:rotate(0);
}
.login-html .sign-up:checked + .tab + .login-form .sign-up-htm{
transform:rotate(0);
}
.hr{
height:2px;
margin:30px 0 50px 0;
background:rgba(255,255,255,.2);
}
.foot-lnk{
text-align:center;
}
.tab-1{
margin-top: -10px;
}
#we1{
margin-top: 20px;
}
input[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
<label for="tab-1">Already Member?</a>
should not have </a>
as the closing tag? Other than that, it seems to be working after I changed that to </label>
?
=
myVar = 5
in the example code. And they say Assignment always goes from right to left. Everything to the right of the = operator is resolved before the value is assigned to the variable to the left of the operator.
b =
something on line 8.
$(".test-btn").on("click", function() {
$.ajax({
url: 'api.openweathermap.org/data/2.5/weather',
datatype: 'jsonp',
data:{
lat: latitude,
lon: longitude,
APPID: '8a6805298d2c06c061f7d6518569fea8',
},
success: function(response) {
console.log(response);
}
});
});
var a = 7;
should not have the keyword var
there, because the variable is already declared. Then in the second line, the same thing var b
is already declared, so you just use b =
and it should be similar to the example that they show where they have myNum = myVar;
- you should have the variable a
on the right hand side of the =
.
http://
on your URL? I cannot recall, but I would try that first.
7 = a
- that is just wrong. Your editor is probably flagging an error for that? the variable a
should be on the left side, and the 7
on the right side, but you only need two lines there. The third is wrong. Two assignments - one to a
, and one to b
b = a;
Just like the example does - assigns a value to myVar
, then assigns the myVar
to myNum
with myNum = myVar
...
https://
? You have to load your page using http://
in your URL, because the free version of the openweather api only uses http://
. The problem with the geolocation is a real problem. Can you try firefox? That is not a good solution to require people to use firefox, but at least you can see if it works because geolocation on firefox doesn't need https://
(at least not yet)
b = 7;
line.
https://
problem. FreeCodeCamp/FreeCodeCamp#7853 And they discuss alternatives to using openweather.
function reverseString(str) {
str=[];
str.split("");
str.reverse();
str.join("");
return str;
}
reverseString("hello");
Why does the computer say Type error: str.split is not a function
? The correct result should be "olleh''.
str
to an array, and .split
is a string function. Get rid of the str = [];
because that is killing the value of your function argument, which is str
...
str.split("");
returns a new string, so you have to assign your value from that back to str
, the same thing all the way down the line. Watch for methods that modify the variable in place (there aren't too many) vs. those that return a modified value.
@khaduch ```
function reverseString(str) {
str=str.split("");
str.reverse();
str=str.join("");
return str;
}
reverseString("hello");
function factorialize(num) {
for(var i=1;i<num;i++){
num=num*i;
}
return num;
}
factorialize(5);
The computer says num=num*i;
is a potential infinite loop that will crash browser, and the function doesn't work. Any hint?
num
(or at least potentially changing it) and trying to use it as your loop control. Bad idea... Make a separate variable to do your multiplication with.
$(document).ready(function(){
$('body').attr({
'data-spy': 'scroll',
'data-target': '.navbar',
'data-offset': '50'
});
});
.reduce()
method, or somesuch, then you can do whatever works. I think that the helpful links list is good if you are a newbie, or if they are recommending functions or methods that you are not familiar with and they are trying to introduce to you, then that's fine. I've seen people using ES6, all sorts of higher-level functions, etc. just to do the basics. It depends on your level of expertise, to a large extent (and in my opinion.)
<section class="section1"></section>
<section class="section2"></section>
.section1 {
background: url(https://placehold.it/1200?text=section1) no-repeat center center;
background-size: cover;
border-bottom: 1px solid black;
min-height: 50vh;
}
.section2 {
background: url(https://placehold.it/1200?text=section2) no-repeat center center;
background-size: cover;
min-height: 50vh;
}
<div class ="imga"> // added a div class
<img src="https://i.imgsafe.org/fd6f339860.png" class="icons">
<img src="https://i.imgsafe.org/fdfb20fa8d.png" class="icons">
<img src="https://i.imgsafe.org/fdfcd6a234.png" class="icons">
<img src="https://i.imgsafe.org/fdfebb2d2b.png" class="icons">
</div>
.imga{
text-align: center;
}
function sumFibs(num) {
var a=1;var b=0; var temp=0; var i=0;
var arr = [];
var sum=0;
while(a<num){
temp = a;
arr[i] = a;
a = temp + b;
b = temp;
if(arr[i]/2!==0){
sum += arr[i];
}
i++;
}
return sum;
}
sumFibs(4);
function replacer(match, p1, p2, p3, offset, string) {
// p1 is nondigits, p2 digits, and p3 non-alphanumerics
return [p1, p2, p3].join(' - ');
}
var newString = 'abc12345#$*%'.replace(/([^\d]*)(\d*)([^\w]*)/, replacer);
I am trying to understand .replace() method. What does replacer do in the last line??
"hello".replace("l", "x")
----> "hexxo"
@Stevo99 This should be removed from your HTML:
<body background="https://wallpaperscraft.com/image/laptop_table_apple_macbook_pro_retina_window_73454_1920x1080.jpg"></body>
Use CSS to set background images, like in that code example I gave above. :point_up: January 27, 2017 8:20 AM
background-size
should be purple
<head>
<link href="https://fonts.googleapis.com/css?family=Open+Sans|Permanent+Marker|Raleway" rel="stylesheet">
</head>
<body>
<!--- builds basic static navbar --->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container-fluid">
<!--- Branding on left side --->
<div class="navbar-header navbar-left">
<a class="navbar-brand" href="#">TurdFurgeson</a>
</div>
<!--- Dropdown menu rightside --->
<div class="dropdown navbar-right">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"><i class="fa fa-bars 2x"> </i></button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">About</a>
<a class="dropdown-item" href="#">Projects</a>
<a class="dropdown-item" href="#">Let's Talk</a>
</div>
</div>
</nav>
</body>
//get the address from the IP Geolocation API
function getLocation() {
$.getJSON("http://ip-api.com/json", function(loc){
$("#cityName").text(loc.city + ', ' + loc.regionName + ', ' + loc.country)
getWeather(loc.lat, loc.lon);
})
.fail(function(err) {
getWeather()
});
}
getLocation();
//Retreive temperature details from openweathermap.org using longitude and latitude from previous API
function getWeather(lat, lon) {
var apiAddress = "http://api.openweathermap.org/data/2.5/weather?lat=" + lat + "&lon=" + lon + "&units=imperial&type=accurate&APPID=9d4a841a5b68f2cc43c97d5224e11086";
$.getJSON(apiAddress, function (weatherData){
tempF = weatherData.main.temp.toFixed(0);
tempC = ((tempF- 32)*(5/ 9)).toFixed(0);
weather = weatherData.weather[0].description;
weatherId = weatherData.weather[0].id ;
wind= weatherData.wind.speed;
$("#weather").text(weather + ', Wind speed: ' + wind + ' mph');
$("#temp").text(tempF + ' °F');
});
}
//to convert celcius into farenheit using data from earlier function.
$("#conversion").click(function() {
if($("#temp").text().indexOf('F') > -1) {
$("#temp").text(tempC + ' °C');
}
else {
$("#temp").text(tempF + ' °F');
}
})
//to change the background image according to weather.
var imageArray = [];
var png = ['01d', '01n', '02d', '02n', '03d', '03n', '04d', '04n', '09d', '09n', '10d', '10n', '11d', '11n', '13d', '13n', '50d', '50n'];
var bodyImages = [/*clear sky*/ 'https://media.giphy.com/media/l3vRoeR8KaNNs3g88/giphy.gif',
/* clear night*/
'https://media.giphy.com/media/SE5Qvze2QBpbq/source.gif',
/* few clouds*/
'https://media.giphy.com/media/o6qaN00DUo7x6/giphy.gif',
/*few clouds night*/
'https://media.giphy.com/media/R19AHAAwMnEpa/giphy.gif',
/*scattered clouds*/
'https://media.giphy.com/media/qZMonv0Jty1P2/giphy.gif',
/*night scattered clouds*/
'https://media.giphy.com/media/afuXKLnDHbb8I/giphy.gif',
/*broken clouds*/
'https://s-media-cache-ak0.pinimg.com/originals/58/25/32/58253287ef7d5f5bccc3490d64017ffd.jpg',
/*night brokenn clouds*/
'http://www.troyjohnstone.com/astrophotography/images/sky_clouds_night_moon_2006_09_09_04.jpg',
/*shower rain*/
'https://media.giphy.com/media/oaNFVNEcvWv5K/giphy.gif',
/*night shower rain*/
'https://s-media-cache-ak0.pinimg.com/originals/52/07/68/5207680e1eafd7233ab094b5f910e6af.gif',
/*rain*/
'https://media.giphy.com/media/BAD9hUGYZkqPe/giphy.gif',
/*night rain*/
'http://umad.com/img/2015/6/night-rain-gif-9410-9796-hd-wallpapers.jpg',
/*thunderstorm*/
'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
/*night thunderstorm*/
'https://media.giphy.com/media/8xY1YYpEZ4dws/giphy.gif',
/*snow*/
'https://media.giphy.com/media/OdOfTkw2uVADC/giphy.gif',
/*night snow*/
'https://media.giphy.com/media/Ok928ivi56clq/giphy.gif',
/*mist*/
'https://media.giphy.com/media/LmC5rpntvJPxe/giphy.gif',
/*night mist*/
'https://media.giphy.com/media/ofrQ8FYfTD8gE/giphy.gif'
];
var imageArray = [];
for (var i = 0; i < png.length; i++) {
for (var j = 0; j < bodyImages.length; j++){
if (png[i] == weatherId) {
imageArray.push(bodyImages[j]);
$("body").css('background-image', 'url('+ imageArray[i] +')');
}
}
}
==
"weather": [
{
"id": 500,
"main": "Rain",
"description": "light rain",
"icon": "10n"
}
var myGlobalVariable = 'hello';
myGetJsonFunction();
function myGetJsonFunction() {
setTimeout(function() {
myGlobalVariable = 'hello world';
console.log(myGlobalVariable); // hello world
}, 200);
console.log(myGlobalVariable); // hello
}
console.log(myGlobalVariable) // hello
dataType: 'html',
instead of dataType: 'json',
/\s{2,}/g
I know /\s/
targets space. And g
is global (which I don't exactly understand) But what is {2,}
?
settings
->javascript
-> quick add
then it will work
function palindrome(str) {
str=str.replace(/\s+/g,"");
str=str.replace(/[^w\s]|_/g,"");
var string="";
string=str.reverse();
if(string===str){
return true;
}else return false;
}
palindrome("eye");
Why does the error message say str.reverse is not a function?
anybody know why my query string variables are returning undefined?
@jdtdesigns
function palindrome(str) {
str=str.replace(/\s+/g,"");
str=str.replace(/[^w\s]|_/g,"");
var string="";
string=str.split("").reverse().join("");
if(string===str){
return true;
}else return false;
}
palindrome("eye");
This sorta work. But for ex, palindrome("1 eye for of 1 eye.") is returning false.
/[^w\s]|_/g
,""); this is not accurate
lon
and lat
, your code has already tried to set a value for your api
variable.
hello911 sends brownie points to @jdtdesigns :sparkles: :thumbsup: :sparkles:
:cookie: 892 | @jdtdesigns |http://www.freecodecamp.com/jdtdesigns
chriswingler sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1416 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
chriswingler sends brownie points to @sorinr and @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: chriswingler already gave tylermoeller points
:star2: 1145 | @sorinr |http://www.freecodecamp.com/sorinr
.jpg
Direct link:
next to it
tinatownes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1417 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
https://s24.postimg.org/5r9bv3jk5/27239392_coding_wallpapers.jpg
tinatownes sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: tinatownes already gave tylermoeller points
let userUrl = userA.link(https://freecodecamp.com/ + userA);
<td><a href={this.props.userUrl + this.props.user.username}>{this.props.user.username}</a></td>
target="_blank"
;)
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:star2: 1418 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
jessiw sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: jessiw already gave tylermoeller points
import Base from './components/Base.jsx';
import HomePage from './components/HomePage.jsx';
import LoginPage from './containers/LoginPage.jsx';
import SignUpPage from './containers/SignUpPage.jsx';
const routes = {
// base component (wrapper for the whole application).
component: Base,
childRoutes: [
{
path: '/',
component: HomePage
},
{
path: '/login',
component: LoginPage
},
{
path: '/signup',
component: SignUpPage
}
]
};
export default routes;
ReactDom.render((
<MuiThemeProvider muiTheme={getMuiTheme()}>
<Router history={browserHistory} routes={routes} />
</MuiThemeProvider>), document.getElementById('react-app'));
sharang108 sends brownie points to @designercoder123 :sparkles: :thumbsup: :sparkles:
:cookie: 282 | @designercoder123 |http://www.freecodecamp.com/designercoder123
<div id="menu">
<div id="registo">Registar-me</div>
<div id="registo1">Meu Vodacom</div>
<div id="registo2">Ajuda e Suporte</div>
</div>
margin: 0 auto;
navbar-right
class: http://getbootstrap.com/components/#navbar-component-alignment
chris10emery sends brownie points to @lorrie01 :sparkles: :thumbsup: :sparkles:
:cookie: 303 | @lorrie01 |http://www.freecodecamp.com/lorrie01
francodanussi sends brownie points to @tylermoeller and @lafisrap :sparkles: :thumbsup: :sparkles:
:cookie: 293 | @lafisrap |http://www.freecodecamp.com/lafisrap
:star2: 1419 | @tylermoeller |http://www.freecodecamp.com/tylermoeller
francodanussi sends brownie points to @tylermoeller :sparkles: :thumbsup: :sparkles:
:warning: francodanussi already gave tylermoeller points
francodanussi sends brownie points to @lafisrap :sparkles: :thumbsup: :sparkles:
:warning: francodanussi already gave lafisrap points
.splash-hi { margin-top: 0;}
turdfurgeson sends brownie points to @boardley :sparkles: :thumbsup: :sparkles:
:cookie: 281 | @boardley |http://www.freecodecamp.com/boardley
remdata sends brownie points to @mot01 :sparkles: :thumbsup: :sparkles:
:cookie: 477 | @mot01 |http://www.freecodecamp.com/mot01
object = {
'broken clouds' : 'url here'