Step 14

Let's add some styling to our app!

Create the following files in the src folder:

/* index.css */
body {
  margin: 0;
  background-color: #282c34;
  color: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* App.css */
.App {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

button {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 900;
  padding: 1.25rem 2rem;
  font-size: 1rem;
  border-radius: 3.5rem / 100%;
  position: relative;
  min-width: 15rem;
  max-width: 90vw;
  overflow: hidden;
  border: 0;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  -webkit-transition: all 330ms;
  transition: all 330ms;
}

/* Output.css */
ul {
  list-style-type: none;
}

One of the nice features of React is that you can create styling for each component, separately, and associate the component with the corresponding CSS file.

All you need to do, is to import the css file in the corresponding JavaScript file.

So make the following updates:

// index.js
+ import './index.css';

// App.js
+ import './App.css';

// Output.js
+ import './Output.css';

You must also assign a "class" attribute to the <div> element that wraps the entire app! Open the App.js file and update the return statement of the render method:

return (
- <div>
+ <div className="App">
    <p>If you go to bed NOW, you should wake up at...</p>
    <button onClick={this.calcCycles.bind(this)}>zzz</button>
    <Output cycles={this.state.cycles} showOutput={this.state.showOutput} />
  </div>
);

Notice, in JSX, to assign class attribute, you must use the attribute name of className instead of class because class is a keyword in JavaScript!.

Save the files and reload the app:

And after clicking on the zzz button, you will get: