Yup @newtothat that's responsiveness, it can be done in many ways. There are some simple, some more complex depending on how you want to implement it. You can use media queries to change all of your CSS depending on the size of the screen, it's very cool
Anyone else notice that on new curriculum challenges, if you complete one and return to it, your answer is often not there?
Alright guys, I took the feedback I got from you yesterday. how is my portfolio looking now? https://germangamboa95.github.io/vue-portfolio.io/#/
the loading screen is there since the images where downloading slowly.
which I now realize its because I didn't optimize them -.-
@germangamboa95 good job
@germangamboa95 the feature projects cards didn't align correctly
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;
Wondering if there's another way to do this in CSS that's less convoluted? I just used conditional rendering to make it look red or green based on if above or below 85 degrees temperature.
@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.
Okay, that makes sense.
I'm in general staying clear of backticks :) haha
I know I can't really
but that's a lot cleaner looking than my monstrocity thanks @ezioda004
Template literals are great, especially with React. You can do great things with it but it can also get complex if overused and no problem! :thumbsup:
@ezioda004 Have you used styled components much then?
Hi, I don't know how to filter an array of number for return only the "Int"
@markclynch Yes, I use them but I prefer keeping styles separated and importing them instead. Styled components/CSS modules are cool and probably better practice but depending on project I dont mind either and mostly its personal preference.
@ezioda004 Could you point me in the right direction of how in react to control an animation? I have a spinning react logo that I want to add an onClick method to stop and start it.
The plan is if it is spinning it indicates the fan is on, if not it indicates fan off.
there will be several things manipulated when this happens, but my issues all seem to be making things look right, functions and math et. all I'm fine with.
@AlbertoGiambone First you need to figure the logic how to separate
@markclynch I have not used animations in React such way. Checking the animations section in official docs might help.
intand float (decimals). After that you can use that logic and use .filter() method.@markclynch I have not used animations in React such way. Checking the animations section in official docs might help.
That should help
@ezioda004 Didn't even know about that,that may be useful later, seems pretty cool you can basically have an animation pop up on load then disappear on unmounting. slightly different than what I'm looking for. I think my misunderstanding is I don't know how to complete this in vanilla JS even. I have huge problems manipulating css elements inside javascript and react.js :worried:
@ezioda004 Not sure if I should just setup state with an isOn boolean and then I could conditionally render a static image or a spinning one using a toggle method, but again that sounds like it wouldn't be quite right.
I'll definately need that method anyhow and the onClick function would toggle between true and false anyway.
@markclynch i would conditionally add or remove a class from the logo and make the logo spin with css if the class is set
@alpox Thanks, I'll do some googling as I didn't think that was something really doable.
conditionally adding or removing a class javascript sounds like a decent place to start googling
@markclynch have you looked into styled-components?
Or any other JS-in-CSS alternative?
Makes working with react (ie JS) super easy
I started looking at it
Just watched one video
@Marmiz I watched this one Glen Maddern - Styling React Apps with Styled Components
But I'm so new that these guys don't talk like I'm an idiot
so they don't show exactly how things are done, more high level concepts
@markclynch why watch a video. Read the docs and you're good to go :smile:
I usually use styled-components too. They are great
Yeah, it's funny, I watched like a million videos on React
and got next to no understanding
then read the docs haha, now I'm starting to get it
@Marmiz does the react team like styled components?
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:
@Marmiz yeah
Videos just dont really teach and are not good for references
@alpox Well, Dan Abrimov's Redux videos are pretty good
does the react team like styled components?
why should that matter?
Just curious.
I know they wont endorse many libraries that come about
anyway one of the creator is the one who made
react-router and parto of React. (not a FB employee tho :) )
I'm just a bit lost
I mean I literally just finally got conditional rendering using ES6 syntax today lol
@markclynch Heres a quick example of how you can do spin animation with react. Basically an implementation of what @alpox said.
by got I mean understand :)
`className="{ spin: isOn}
Ups my phone sent before i was done
className={ spin: isOn}
@ezioda004 cool, but is there a way to get it less choppy? Like just pause the spin, so it freezes frame then continues?
It's resetting to original placement on each render
maybe I can play and see if e.preventDefault would work :)
I'm sure theres a way, though CSS gives me midlife crisis.
@ezioda004 lol
actually I think i meant e.stopPropagation
but not sure lol
@markclynch they only help if the event bubbles and makes events trigger that you dont want - or in case of preventDefault to prevent the default action (ex form submit)
too much nonsense in my brain I always remember things that aren't helping
@alpox That looks like it may be helpful.
Is there any system resource concerns when running infinite loop animations at very high speeds?
Like if you rotated it at .00000000000000001 seconds a full 360 degrees
I dont think there is, i believe the framerate stays the same so you will never see all positions in between.
Damn, how long have you coded that you can just whip things like that up so fast?
Yo :wave:
hey i will work in a project and i will specialize to do the front end can anyone advise me from where i should start learning?
FCC as good a place as any
@1Droka_twitter https://www.freecodecamp.org Good luck :smile:
what is FCC?
I started programming with web-dev only, like 6-ish months ago. It gets easier with time, reading docs helps a lot.
@ezioda004 Yeah, I think I just need to keep grinding. I started a year ago part time just doing FCC, but I think building my own projects gives me a lot more learning, and need to stop watching so much youtube :)
just read the docs
man, didn't know I could conditionally set the pause function like that.
with ${
code} you can do magic
U @bjorno43 I signed in now
@markclynch Oh yes building projects is the best way to learn and watching YT vids has its own place but it cannot replace practical knowledge.
Real world projects certainly learn you a whole lot more than following a couple of courses and guides. However, make sure you're ready for them. Programming is like swimming. You can't dive into the ocean without getting your swimming certificates first
@bjorno43 Yeah, I just simplified my project I'm working on for my technical interview for internship
I tried to do way too much for me to handle
I barely knew ES6
@1Droka_twitter Great. Then start the curriculum. It's all completely free and by the time you're finished, you're well on your way :smile:
and wanted to code a working UI for a greenhouse control system that could monitor and report temperature, humidity, soil moisture content, control fans and dehumidifiers.
So I shortened it to just show temperature and fake fan control with this spin.
and have a background color change if temperature is within optimal range
@bjorno43 sorry but once i finish it i will be ready to work on the project as front end ?
@1Droka_twitter Yes. You'll definitely be ready for front end development
@markclynch It's a bold project. Interfacing with devises outside of the web is a challenge on its own. I hope you'll get there :)
@bjorno43 It'd be all node.js server side controlled through Internet of Things devices set up on wifi.
they aske me for the required i should learn are
HTML
CSS or sass
Bootstrap for responsive design
Jquery
HTML
CSS or sass
Bootstrap for responsive design
Jquery
with a React front end
there's an SDK that's not too complex to do controls and pull API data from monitors
that said, it's not my end goal. my tech interview is only asking me for 80 lines of code that I've iterated through a handful of times to optimize or improve so that I really understand it. Then he'll ask me to add something, change something and we'll go from there.
@1Droka_twitter By the time you're finished with the curriculum, I promise you'll be able to tackle all of those
he wants to know if I have the aptitude not that I'm all there. It's an internship
@1Droka_twitter Oh yeah, you finish FCC's front end and you'll get those things.
I could apply for those types of positions right now. I'm moving on to learning more to secure an even better job.
Should be 50 - 70k to start 150K $USD after 3-5 years if I'm good
for React
@bjorno43 @markclynch Thank you so so much , i hope
I'm a full stack dev myself. Though I prefer working on back end. I'm the kind of guy that fixes the engine. Let someone else worrrie about the design, haha
@bjorno43 I'd like to get more into back end eventually
I really like node.js, mongodb and express
I hate angular
I never really did any of those
@bjorno43 Relevant
@ezioda004 :joy:
Nah, I can do front-end. I just don't really like it :P
That's so funny
I think that's more like me now
I can make the engine work, but it's ugly as %$#^
I do mostly front but that does not mean I have to be good at design... there are designers for that! :smile:
But back in my learning days Node didn't exist yet. Back then it was all PHP. That's why I prefer it, haha
@Marmiz Yeah, but I can't even get most of my elements to be where I want them on the page lol. Thanks god for css-grid
I literally have to use that mapped out grid though to set things up the one like this ```
aaaabbbb
aaaabbbb
ccccccccc
ccccccccc
then spend 30 minutes editing everything so it looks sorta okay
Earlier someone was a bit mad that we refused to help him pass (cheat) on a test about CSS. He argued that he couldn't help it that the test was 10+ years old while his question was about CSS grid. Now it could be me, but I'm pretty sure 10 years ago CSS grid wasn't a thing :laughing:
lol, no it wasn't
10 years ago I'm pretty sure it was all about floats
float / clear
True, lol
I haven't coded in 20 years
and when I did it was only C++
I looked at Javascript briefly, but thought nah that's for losers who can't code for realz
Well if you know C++, todays languages should be quite the breeze, haha
I "knew" it sorta, theoretically.
I never used it a day in my life, learned it in Comp Scie
then got into finance instead
They are easier to learn.
but I'm not sure they're tougher to master
Oh ok. I only did C++ once. I was running a private World of Warcraft server and that was made in C++. So I started messing around with that
WHAT i completed 11 of 1408 coding challenges :ok_woman:
I'd like to re-learn C++ at some point and help my cryptocurrency's main dev doing stuff, but it's gonna take a lot
@1Droka_twitter There you go :smile: Brace yourself though. It'll get progressively harder
yeah, it'll start getting really annoying, get used to coming to this chat room :)
I've dropped C++ after that. Picked up C# and finished my master in software engineering with it last year
@bjorno43 You like C# that much better?
@markclynch It's a lot easier than C++ and OOP. So ye, I definitely prefer it
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?
@AlbertoGiambone You forgot the
() to call the function isInteger --> int.isInteger()
if I put () this is the message: int.isInteger is not a function. (In 'int.isInteger()', 'int.isInteger' is undefined)
@alpox if I put () this is the message: int.isInteger is not a function. (In 'int.isInteger()', 'int.isInteger' is undefined)
@AlbertoGiambone Right, i'm still half asleep it seems :D
@alpox ;)
The function is
Number.isInteger(int)
The function
isInteger exists only on the Number constructor
@alpox ok, now this is the output: squaredIntegers should be [16, 1764, 36]
Until now your output should be [4, 42, 6]
You still have to square them
Can any one tell how to test web app
@alpox ok, I wrote this:
function inter (int) {
return Number.isInteger();
};
const squaredIntegers = Math.pow(realNumberArray.filter(inter), 2);
but off course is not working ;)
function inter (int) {
return Number.isInteger();
};
const squaredIntegers = Math.pow(realNumberArray.filter(inter), 2);
but off course is not working ;)
@AlbertoGiambone Yea you cannot set an array to the power of 2 :D
You have to target each number
So what you are looking for is the method .map
@alpox thanks!
@AlbertoGiambone np
Hey guys, I'm trying to get radio buttons working on my survey form, but my input labels seem to be affected by my focus selectors that I used before. How can I get them to be below the title? I don't really want to use a <p> or heading element, or is that the only way? Here's the pen: https://codepen.io/Pixel123/pen/NzByep
I need to square one array, I try to use " const squaredIntegers = a.map(Math.pow(a, 2));
"
but is non working..
"
but is non working..
@AlbertoGiambone
.map() takes a callback function, so it should be const squaredIntegers = a.map(val => Math.pow(val, 2));
@ezioda004 this don't return the square of the array
@AlbertoGiambone Seems to be working
const a = [2, 3, 4];
const squaredIntegers = a.map(val => Math.pow(val, 2));
console.log(squaredIntegers) // [4, 9, 16]
@ezioda004 ahhh ok,
but in FCC don't
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
// change code below this line
function inter (int) {
return Number.isInteger();
};
const a = realNumberArray.filter(inter);
const squaredIntegers = a.map(val => Math.pow(val, 2));
// change code above this line
return squaredIntegers;
};
but in FCC don't
const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
const squareList = (arr) => {
"use strict";
// change code below this line
function inter (int) {
return Number.isInteger();
};
const a = realNumberArray.filter(inter);
const squaredIntegers = a.map(val => Math.pow(val, 2));
// change code above this line
return squaredIntegers;
};
@AlbertoGiambone seems like isInteger function missing something
which value u testing ?
which value u testing ?
@moigithub const realNumberArray = [4, 5.6, -9.8, 3.14, 42, 6, 8.34];
function inter (int) {
return Number.isInteger(); /// u not passing anything to that function
};
const a = realNumberArray.filter(inter);http://mdn.io/isinteger
https://www.w3schools.com/jsref/jsref_isinteger.asp
@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) //trueYou're passing array instead, also you should look up documentation of .filter() and what parameters the callback function takes.
@ezioda004 ahhh ok thank's
@padunk Yeah those have been giving my a hard time. I am going to throw CSS grid in there instead of using Materialize's grid since it still uses floats and that might be the cause of that.
@developer4eto thanks
Still struggling with my earlier pen, is there any way to only select certain <labels>? I've tried putting all the ones I want to have the same effect in a class, but it's still affecting a few that I don't want to be affected
I've figured it out, just had to add different classes to them, and change the focus selector to the relevant class instead of pointing at the label tag!
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>
Hi, I'm working on the Simon app and trying to toggle a class with jQuery
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?
@Feldbot the properties you put on the id are taking precedence
add
!important to your red indicator and it will work - background-color: rgb(255,0,0) !important;
@moT01 I tried changing
div#strict_indicator to a class, and changing the order of .red-indicator in the css and it still didn't work.
try removing the div from the selector
@moT01 Huh... removing div did the trick. Why did that work?
selectors give value to what properties get applied
for instance you had
div#strict_indicator
that has two selectors
which gives more value
than just
#strict_indicator
so we lowered the value by removing the
div which let the .red_indicator not get overridden
"css specificity"
something like that - adding
!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
@moT01 I think I am still confused with some of the basics of css selector specificity. I thought by writing div#strict_indicator, I was just targeting one selector with an ID applied to it. How/when does it become two selectors? How do you check the value?
@moT01 I guess I was also under the impression that in writing my CSS it was good to use compound selectors by way of legible semantics, that one could more clearly see what the selection applied to that general, shorter selectors.
im not sure if there's a way to check the value on the fly, but you could look it up - you used two selectors to target one element
im not sure what best practices are - i dont usually use more than one selector unless I need to
cause you could have put like 6 on there
body>div>div>div>div#strict_indicator
@Tom I think the !important addition is what is making it work, it doesn't seem to matter if it is preceded by div or not.
yes, like I said - adding that makes it have the most value possible I think
I do know its not something you want to be using all over the place though
as it can complicate things - but in this case it's not a bad spot to use it
so yea, you can fix it by adding that or the other way (removing div)
@Tom That is a good point about all the potential selectors I could have! I'd like to write it without !important, I always see how that is bad style and can cause conflicts. I'm not sure how to write this without it or how to make the specificity higher. I did try reordering in the css and it didn't seem to matter. If I remove div and !important both it doesn't work.
change it to a class instead of id
i think id's take over classes
@Tom Bingo! That has a lower value
:+1:
@Tom That is something else I find somewhat confusing about css basics. I thought if I was using something only once it was good to have an ID on it so it would have higher specificity, so I do that a lot, but I'm wondering if it isn't a better practice to just have classes for everything, and just use an ID similar to when you want something to be !important (and just used once).
@moT01 Thanks a bunch for the help, much appreciated!
ive heard it's bad practice or something to use ids but I dont see a problem with it - but I would still probly use class most of the time
@moT01 And you think better to write the css selectors sparingly too, by using the bare minimum selector? Here is an example I'm curious about... You have a button element with a class of green. In the css is it better to write .green only? For reading comprehension it seems like it is better to say button.green so I can see what it applies to quickly. But what I hear you saying is that it's then two selectors that then have a higher assigned specificity value. And you'd only use compound selectors because you need to target something very specifically, with higher specificity?
i think .green is just a bad name in this case - I always prefer readability - I would maybe name it
.btn_green or something
@moT01 Pure gold. That makes a lot of sense. Thanks!
sure thing
@sansae If you change your
<img id="logo0"> tag to <div id="logo0"> that displays the image. Somehow you were getting two image tags nested with one closing tag.