cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              body {
  margin: 0;
  font-family: 'Open Sans', sans-serif;
}

.app {
  position: relative;
  height: 100vh;
  background-color: #041d3e;
  transition: all 0.3s linear;
}

.app--one {
    background-color: #0e4a54;
}

.app--two {
  background-color: #22695e;
}

.app--three {
  background-color: #9e964a;
}

.app--four {
  background-color: #9a6631;
}

.app--five {
  background-color: #814630;
}

.app__years {
  width: 80%;
  margin-left: 10%;
  text-align: center;
  z-index: 2;
  position: relative;
}

.app__years__item {
  display: inline-block;
  margin: 8px;
  padding: 5px 8px;
  color: white;
  border-radius: 15px;
  border: 2px solid transparent;
  transition: all 0.3s linear;
  cursor: pointer;
}

.app__years__item--active {
  border: 2px solid white;
}

.child__data {
  color: white;
  text-align: center;
  font-size: 30px;
  margin-top: 30px;
  line-height: 50px;
  z-index: 2;
  position: relative;
}

.child__pirates {
  width: 100%;
  background-repeat: repeat-x;
  background-position: center bottom;
  background-size: contain;
  background-attachment: fixed;
  position: fixed;
  min-height: 433px;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  z-index: 1;
}

@media screen and (min-width: 960px) {
  .child__pirates {
    min-height: 600px;
  }
}

@media screen and (min-width: 1400px) {
  .child__pirates {
    min-height: 900px;
  }
}

            
          
!
            
              const {Component} = React;

const DATA = {
  "1880": { pirates: 20000, temperature: 14.5 },
  "1920": { pirates: 15000, temperature: 15.0 },
  "1940": { pirates: 5000, temperature: 15.3 },
  "1980": { pirates: 400, temperature: 15.7 },
  "2000": { pirates: 17, temperature: 16 },
}

// immagini dei pirati
const URLS = {
  20000: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452510351/20000.png",
  15000: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678308/15000.png",
  5000: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678308/5000.png",
  400: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678307/400.png",
  17: "https://res.cloudinary.com/dusxjrqiu/image/upload/v1452678129/17.png"
}

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedYear: null
    }
  }
  
  handleClick(year, e) {
    e.preventDefault()
    this.setState({ selectedYear: year})
  }
  
  renderYearbuttons(year) {
    let appYearsItem = classNames(
      "app__years__item",
      { "app__years__item--active": year === this.state.selectedYear }
    )
    
    return (
      <div
        key={year}
        className={ appYearsItem }
        onClick={ this.handleClick.bind(this, year) }
        >
        { year }
      </div>
      )
  }

  render() {
    let app = classNames(
      "app",
      this.state.selectedYear ? DATA[this.state.selectedYear].className : ""
    )
    
    return (
      <div className={ app }>
        <div className="app__years">
          { Object.keys(DATA).map(this.renderYearbuttons.bind(this)) }
        </div>
        {
          // Un componente viene chiamato con la stessa sintassi di un tag html.
          // Le props e i loro contenuti vengono aggiunti in forma di attributi.
          // In questo caso, il contenuto delle props è lo stato del componente padre, App.
        }
        {
          // Se la condizione (in questo caso lo state) è true allora viene renderizzato il contenuto tra tonde
          this.state.selectedYear && (
            <Child
            pirates={ DATA[this.state.selectedYear].pirates }
            temperature={ DATA[this.state.selectedYear].temperature }
            />
          )
        }
      </div>
    );
  }
};


// Child ha soltanto il compito di mostrare un certo tipo di contenuto in funzione
// delle props che riceve da App. Le props vengono chiamate attraverso this.props.nomeProp

class Child extends Component {

  render() {
    let piratesStyle = {
      backgroundImage: 'url(' + URLS[this.props.pirates] + ')'
    }
    
    return (
      <div className="child">
        <div className="child__data">
          {
            (this.props.temperature) && (
              `${this.props.temperature}° C`
            )
          }
          <br />
          {
            (this.props.pirates) && (
              `${this.props.pirates} pirates`
            )
          }
        </div>
         {
          (this.props.pirates) && (
            <div
              className="child__pirates"
              style={ piratesStyle }
              >
            </div>
          )
        }
      </div>
    )
  }
}
 
ReactDOM.render(
  <App />, 
  document.getElementById('app'));
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console