Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="root"></div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Fira+Mono|Raleway:400,900');

/* define the values used throughout the project */
:root {
  --font-header: 'Raleway', sans-serif;
  --font-code: 'Fira Mono', monospace;
  --color-text: #f0f0f0;
  --color-background-l: #5D6AF3;
  --color-background: #4E5CE5;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-header);
  color: var(--color-text);
  /* include the chosen background */
  background: linear-gradient(to bottom right, var(--color-background-l), var(--color-background));
}


/* display the slideshow in the center of the viewport */
.App {
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}


.Slideshow {
  /* display the contents of the slideshow in a single column */
  display: flex;
  flex-direction: column;
}
/* style the different elements shown in the slides as wanted  */
.Slideshow h1 {
  /* title bold and centered */
  text-align: center;
  font-size: calc(4rem + 4vw);
  margin: 1rem 0;
  font-weight: 900;
}
.Slideshow h3 {
  /* subtitle thin and spreading a bit more than the title */
  text-transform: uppercase;
  font-weight: 300;
  font-size: 2rem;
  letter-spacing: 0.2rem;
  text-align: center;
}
.Slideshow h2 {
  /* header capitalized */
  text-transform: capitalize;
  font-size: 2.5rem;
}
.Slideshow p {
  /* paragraphs with a capped width  */
  width: 90vw;
  max-width: 500px;
  line-height: 2;
  margin: 1rem 0;
  font-size: 1.5rem;
  letter-spacing: 0.1rem;
}
.Slideshow code {
  /* code with the chosen font and a solid border-left */
  font-family: var(--font-code);
  font-size: 1.5rem;
  line-height: 2;
  border-left: 4px solid white;
  margin: 1rem 0;
  padding: 0 1rem;
}

/* for smaller viewports reduce the size of the paragraphs and of the code */
@media (max-width: 600px) {
  .Slideshow p, .Slideshow code {
    font-size: 1rem;
  }
}


.Controls {
  /* absolute position the buttons in the bottom center of the page */
  position: absolute;
  bottom: 1rem;
  /* -4rem to account for 1) the border-size and 1) the horizontal margin of the buttons */
  left: calc(50% - 4rem);
}
.Controls button {
  /* include arrows with border properties instead of normal buttons */
  width: 0;
  height: 0;
  background: none;
  border: none;
  margin: 0 1rem;
  color: rgba(255, 255, 255, 0.5);
  /* transition to smoothen the hover and active states */
  transition: all 0.2s ease-out;
}
/* on hover increase the opacity of the buttons */
.Controls button:hover {
  color: rgba(255, 255, 255, 1);
}
/* when active, resize the buttons */
.Controls button:active {
  transform: scale(1.15);
}
.Controls button:nth-of-type(1) {
  /* through currentColor, the buttons are styled with the same hue */
  border-right: 1rem solid currentColor;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid transparent;
  border-top: 1rem solid transparent;
}
.Controls button:nth-of-type(2) {
  border-right: 1rem solid transparent;
  border-bottom: 1rem solid transparent;
  border-left: 1rem solid currentColor;
  border-top: 1rem solid transparent;
}
              
            
!

JS

              
                const Component = React.Component;

// the slides are built as an array of objects, with different content defined in different fields
const slides  = [
  {
    title: 'React.js',
    subtitle: 'Exploring the popular library'
  },
  {
    header: 'What is it',
    text: [
      'React is a JavaScript library which allows to easily build web applications.'
    ]
  },
  {
    header: 'Setup',
    text: [
      'Browsers are not equipped to directly include React.js.',
      'The easiest way to get started is with the create-react-app utility'
    ]
  },
  {
    header: 'create-react-app',
    code: [
      'npm install -g create-react-app',
      'create-react-app nameofproject',
      'cd nameofproject',
      'npm start'
    ]
  },
  {
    header: 'Project structure',
    text: [
      'package.json: the packages currently being used.',
      'public: the manifest, index file and icon.',
      'src: the script and stylesheet files.'
    ]
  },
  {
    header: 'Components',
    text: [
      'Everyting in React is a component.',
      'In the create-react-app utility you can immediately find index.js and App.js.',
      'For any feature of the project, create a new JavaScript file.'
    ]
  },
  {
    header: 'Well...',
    text: [
      'This was meant to be a short demo, mostly to practice with React.js.',
      'Good job in getting so far :)'
    ]
  }
];



// for the slideshow CompositionEvent, render the elements, if present in the current slide
const Slideshow = (props) => {

  // title, subtitle, header refer all to a string, and are rendered in single elements
  // text and code relates to array of strings, and rendered with multiple elements, if needed
  let title = props.slide.title;
  let subtitle = props.slide.subtitle;
  let header = props.slide.header;
  let text = props.slide.text;
  let code = props.slide.code;

  return(
    <div className="Slideshow">
      {
        title &&
        <h1>{ title }</h1>
      }

      {
        subtitle &&
        <h3>{ subtitle }</h3>
      }
      {
        header &&
        <h2>{ header }</h2>
      }
      {
        text &&
        text.map((text, index) => <p key={index}>{text}</p>)
      }
      {
        code &&
        code.map((code, index) => <code key={index}>{code}</code>)
      }
    </div>
  );
  
}


// for the controls component, render the two buttons to move to the previous / following slide
const Controls = (props) => {

  return(
    <div className="Controls">
      <button onClick={props.prevSlide} />
      <button onClick={props.nextSlide} />
    </div>
  );

}


// in a stateful component render the components responsible for the application and manage its state
class App extends Component {
  // in the state, include a single field for the number of the slide
  // in the constructor still, bind two functions to increment and decrement the state variable respectively
  // bind one additional function to achieve the same feat with arrow keys instead of buttons
  constructor(props) {
    super(props);
    this.state = {
      slide: 0
    };
    this.prevSlide = this.prevSlide.bind(this);
    this.nextSlide = this.nextSlide.bind(this);
    this.handleStroke = this.handleStroke.bind(this);
  } 

  // add an event listener on the entire window once the components are included in the page
  // listen for a keydown event, at which point call a function to update the state, if need be
  componentDidMount() {
    window.addEventListener("keydown", this.handleStroke);
  }

  // create a function which updates the state if the key pressed matches one of the chosen one
  handleStroke(e) {
    // e.keycode is an integer
    // left facing arrow: 37
    // right facing arrow: 39
    let keyCode = e.keyCode;
    if(keyCode === 37) {
      this.prevSlide();
    }
    else if (keyCode === 39) {
      this.nextSlide();
    }
  }

  // for the two functions, retrieve the single field from the state and increment/ decrement its values
  // alter the value if within the chosen range (from 0 to the length of the slide array minus one (used to access the last element of the array))
  prevSlide() {
    let slide = this.state.slide;
    if(slide > 0) {
      this.setState({
        slide: slide - 1
      });
    }
  }
  nextSlide() {
    let slide = this.state.slide;
    if(slide < slides.length - 1) {
      this.setState({
        slide: slide + 1
      });
    }
  }

  /*
  render a component which displays a slide depending on the array item 
  together, render two buttons to change the number of the slide
  */

  render() {
    return (
      <div className="App">
        <Slideshow slide={slides[this.state.slide]}/>
        <Controls prevSlide={this.prevSlide} nextSlide={this.nextSlide}/>
      </div>
    );
  }
}


// render the single component responsible for the application
ReactDOM.render(<App />, document.getElementById('root'));
              
            
!
999px

Console