Random Color Picker

Hey guys,

Had anyone else had any problems with the Random Color Picker project. Nothing is rendering in the project browser at all where the website should display. I have checked my code against the tutorial video and I haven’t done any of the steps wrong. There seems to be some code missing as there are empty files e.g. Random.compiled.js which is embedded into the index.html file. I’ve tried changing which file is linked in the index.html file but this has done nothing. So just curious if anyone else has had this problem?

(Link to the project) https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-components-interacting-u/projects/random-color

thanks!

1 Like

Without seeing any of your code, it is pretty much impossible to pinpoint anything. If nothing at all is rendering in the browser, you have an error in your javascript, most likely, that is causing the program to ‘hang’. Open the console, click Save, and see what the error is.

@yousef29 Yes. I have nothing rendering as well (other than https://localhost and a blank white page in the mock browser)

@midlindner I reset the project (alt + G) and followed the first step of the video walk through to the point where the above mentioned blank white page turns red for the instructor (Matt).
When I click save, I do not see any error message pop up indicating that I have a js error.
I have tried running the code using private browser (no extensions). It returns no error message, nothing but a white screen.

Here is the code:

import React from 'react';
import ReactDOM from 'react-dom';

class Random extends React.Component {

//only the following 6 lines have been added as per video instruction:

  constuctor(props) {
    super(props);
    this.state = {
      color: [255,0,0]
      }
  }

  componentDidMount() {
    this.applyColor();
  }

  componentDidUpdate(prevProps, prevState) {
    this.applyColor();
  }

  formatColor(ary) {
    return 'rgb(' + ary.join(', ') + ')';
  }

  isLight() {
    const rgb = this.state.color;
    return rgb.reduce((a,b) => a+b) < 127 * 3;
  }

  applyColor() {
    const color = this.formatColor(this.state.color);
    document.body.style.background = color;
  }

  chooseColor() {
    const random = [];
    for (let i = 0; i < 3; i++) {
      random.push(Math.floor(Math.random()*256));
    }
    return random;
  }

  render() {
    return (
      <div>
        <h1 className={this.isLight() ? 'white' : 'black'}>

        </h1>
      </div>
    );
  }
}

ReactDOM.render(
  <Random />, 
  document.getElementById('app')
);

Thanks

Hello, @eshriek, and welcome to the forums.

Your Random class needs a constructor method. :wink:

Hint

Yor Radom clas neds a constructor mehod. :wink:

Yep, I did not have a constructor in the code above. That’s why i use eshriek as a nym. eshriek = the sound of code smell.

What I think I need to do is cut and paste into MS code where I will get an error if I mistype.

Thanks @midlindner

by the way, I saw a post a few months ago (not sure exactly when) about a new web interface that was in beta. Is that still a thing? Can users get beta access??

After some digging I found out that what I was/am referring to is Monaco. I am assuming that Monaco is the default interface for CodeCademy at this time and it is already fully rolled out. I need to move on to other things but I am hopeful that I will be able to find more detail about interface options/improvements in the next week.

I believe that is the case. You can hit f1 on your keyboard, and see a drop down list of commands & their shortcuts.

1 Like

So, yousef29 has yet to follow up, but it might be helpful to assume that there was a typo in the code. This may cause the code to hang without giving an error.

We know that a typo in the code is a problem not only because it is an error, but also in that it does not give an error.

The only resolution is to modify the code editor (not possible by the end user, I think) or code in a separate editor and then cut and paste into the cc editor.

If these are the only options then I will look on the cc forums for a best way to setup the “Learn” section. So far I don’t know how to permanently hide the cc code editor. I have to drag the layout around every time there is a new scree :frowning:

I had the same issue and realised i spelt handleClick as ‘hendleClick’- 15 minutes of my life i wont get back lol.