Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Jun 19 2020 20:09
    @krisb1220 banned @Gastony
  • May 14 2020 22:39
    @bjorno43 banned @minitechtips_twitter
  • May 14 2020 22:38
    @bjorno43 banned @real-action
  • Feb 01 2020 00:27
    @bjorno43 banned @Ndoua
  • Jan 07 2020 03:10
    @bjorno43 banned @doctor-sam
  • Aug 17 2019 09:32
    User @bjorno43 unbanned @linkin-park
  • Jun 20 2019 21:19
    @bjorno43 banned @shenerd140
  • Apr 25 2019 17:13
    @mstellaluna banned @cmal
  • Jan 08 2019 22:05
    @mstellaluna banned @dertiuss323
  • Nov 07 2018 04:42
    User @texas2010 unbanned @ows-ali
  • Nov 02 2018 16:25
    @texas2010 banned @ows-ali
  • Oct 12 2018 05:50
    @bjorno43 banned @NACH74
  • Oct 05 2018 23:02
    @mstellaluna banned @JomoPipi
  • Sep 16 2018 12:21
    @bjorno43 banned @yash-kedia
  • Sep 16 2018 12:16
    @bjorno43 banned @vnikifirov
  • Sep 05 2018 08:12
    User @bjorno43 unbanned @androuino
  • Sep 05 2018 07:38
    @bjorno43 banned @androuino
  • Aug 23 2018 16:57
    User @bjorno43 unbanned @rahuldkjain
  • Aug 23 2018 16:23
    @bjorno43 banned @rahuldkjain
  • Jul 29 2018 14:13
    User @bjorno43 unbanned @jkyereh
include*engine
@newtothat
@moigithub thanks it worked
why i could not figure it out myself?
Moisés Man
@moigithub
need more practice maybe :)
copycat some random websites (i need to start doing this too but im lazy)
include*engine
@newtothat
@PGFracing thanks for your help too.actually i gave red border around picture to see and position it
@moigithub you mean rebuilding a website?
copying is not good if you dont actually learn from them
Moisés Man
@moigithub
yep.. example.. go amazon.com (without seeing its source code) and try to implement the first page on ur own, u can use some random placeholder images
Bjorn
@bjorno43
"Expertly drawn screenshot" :joy:
include*engine
@newtothat
lol i am still taking it and pc courses
so for now I can only use paint lol
Bjorn
@bjorno43
Hahaha :P
include*engine
@newtothat
IT and pc courses beside coding**
markclynch
@markclynch
What's the best way to control background color of a div in React?
Should it be a toggle boolean in state to render based on the value?
include*engine
@newtothat
the way they teach as about responsiveness is by changing the way depending on device
but the way facebook it has at least its nav bar isit shrinks according to the size of browser?
how it works?
like what they teach us is depending on device it should change the view totally to something else
but facebook nav bar is cool it shrinks
Christopher McCormack
@cmccormack
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
Terry Reynolds
@terryjreynolds
Anyone else notice that on new curriculum challenges, if you complete one and return to it, your answer is often not there?
German Gamboa Gonzalez
@germangamboa95
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 -.-
Vladislav Ivanov
@developer4eto
@germangamboa95 good job
Abraham Anak Agung
@AbrahamAnakAgung
@germangamboa95 the feature projects cards didn't align correctly
markclynch
@markclynch
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.
Aditya
@ezioda004

@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.

markclynch
@markclynch
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
Aditya
@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:
markclynch
@markclynch
@ezioda004 Have you used styled components much then?
AlbertoGiambone
@AlbertoGiambone
Hi, I don't know how to filter an array of number for return only the "Int"
Aditya
@ezioda004
@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.
markclynch
@markclynch
@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.
Aditya
@ezioda004
@AlbertoGiambone First you need to figure the logic how to separate 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
markclynch
@markclynch
@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.
markclynch
@markclynch
I'll definately need that method anyhow and the onClick function would toggle between true and false anyway.
alpox
@alpox
@markclynch i would conditionally add or remove a class from the logo and make the logo spin with css if the class is set
markclynch
@markclynch
@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
Claudio Restifo
@Marmiz

@markclynch have you looked into styled-components?
Or any other JS-in-CSS alternative?

Makes working with react (ie JS) super easy