import React, { Component } from 'react';
class Fan extends Component {
render() {
console.log(this.props.conditions.temp);
return (
<div>
{this.props.conditions.hotOrNot > 85 ? (
<button className="button" style={{backgroundColor:"red"}}>{this.props.conditions.temp}</button>
) : (
<button className="button" style={{backgroundColor:"green"}}>{this.props.conditions.temp}</button>
)}
</div>
);
}
}
export default Fan;
@markclynch Another way would be defining CSS classes say
.red {
background-color: "red";
}
.green {
background-color: "green";
}
import
this CSS file
import React, { Component } from 'react';
import "./style.css";
class Fan extends Component {
render() {
console.log(this.props.conditions.temp);
return (
<div>
<button className = {`button ${this.props.conditions.hotOrNot > 85 ? `red` : `green`}`}>{this.props.conditions.temp}</button>
</div>
);
}
}
export default Fan;
And conditionally rendering classes instead of whole element.
int
and float
(decimals). After that you can use that logic and use .filter()
method.@markclynch have you looked into styled-components
?
Or any other JS-in-CSS alternative?
Makes working with react (ie JS) super easy
never been fond of videos.
I generally consider docs and books the best resources to learn (at least for me).
With videos I ended up building something as they show, but unable to build what I wanted by myself :smile:
does the react team like styled components?
why should that matter?
react-router
and parto of React. (not a FB employee tho :) )
className={ spin: isOn}
code
} you can do magic
aaaabbbb
aaaabbbb
ccccccccc
ccccccccc
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
function inter (int) {
return int.isInteger;
};
const squaredIntegers = realNumberArray.filter(inter);
I don't know why this don't return an array of Int...
someone can help me?
()
to call the function isInteger
--> int.isInteger()
Number.isInteger(int)
isInteger
exists only on the Number
constructor
.map()
takes a callback function, so it should be const squaredIntegers = a.map(val => Math.pow(val, 2));
const a = [2, 3, 4];
const squaredIntegers = a.map(val => Math.pow(val, 2));
console.log(squaredIntegers) // [4, 9, 16]
function inter (int) {
return Number.isInteger(); /// u not passing anything to that function
};
const a = realNumberArray.filter(inter);
u can check syntaxis /examples here@moigithub 16:39
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
function inter (int) {
return Number.isInteger(realNumberArray);
};
const a = realNumberArray.filter(inter);
const squaredIntegers = a.map(val => Math.pow(val, 2));
return squaredIntegers;
};
now yes, but it's still the same
now
@AlbertoGiambone Number.isInteger(realNumberArray);
the argument passed is..wrong. The usage of isInteger
is Number.isInteger(num)
so for example
Number.isInteger(1.2) //false
Number.isInteger(3) //true
You're passing array instead, also you should look up documentation of .filter()
and what parameters the callback function takes.
Hello... can anyone help me understand why my image isn't displaying for my Twitch Viewer app?
I actually completed this challenge about a year ago and it was working fine, but when I checked on it last week, I noticed the stream logo/image was not displaying. Everything else does, but not the image. I can't figure out why. I thought that perhaps the link to the image was broken, but I created another pen to test it, and it worked perfectly fine.
Can anyone please help me figure out what's wrong?
The first challenge in SASS says to create a variable and assign it to the color property of the .blog-post class and h2 element, after doing this and getting the desired results on the screen the challenge says I need to "Your .blog-post element should have a </code>color</code> of red.
Your h2 elements should have a </code>color</code> of red."
Not sure what to do to make this work, here is the code
<style type='text/sass'>
$text-color:red;
.blog-post, h2 {
color: $text-color;
}
</style>
toggleClass
. If you turn the game on and hit Strict mode, you will see that the class is being toggled on and off, but nothing is actually happening to my indicator above the button, which should turn red or black alternately when the button is clicked. I have a general .red-indicator
css class that has a red background-color, but it isn't being applied. Any ideas why this isn't working?
!important
to your red indicator and it will work - background-color: rgb(255,0,0) !important;
div#strict_indicator
to a class, and changing the order of .red-indicator
in the css and it still didn't work.
div#strict_indicator
#strict_indicator
div
which let the .red_indicator
not get overridden
!important
makes it have the most value I think - so it's a good way to test if your properties are getting overridden by other properties
.btn_green
or something
<img id="logo0">
tag to <div id="logo0">
that displays the image. Somehow you were getting two image tags nested with one closing tag.