AnastasiosMpoletis/index.html

## index.html
<body>
  <!-- The app is displayed inside this div -->
  <div id='app' style="font-family: 'Roboto', sans-serif;"></div>
</body>

## my-photo-gallery-react-js.markdown

      
    Raw
  

              my-photo-gallery-react-js.markdown
            
          
    My Photo Gallery React.js

A simple dropdown selection photo gallery with fancy style. My first attempt to develop a React.js app.
A Pen by Anastasios Mpoletis on CodePen.
License.

  
## photo-gallery-react-js.markdown

      
    Raw
  

              photo-gallery-react-js.markdown
            
          
    Photo Gallery React.js

A simple drop-down selection photo gallery with fancy style. My first attempt to develop a React.js app.
A Pen by Anastasios Mpoletis on CodePen.
License.

  
## react-app.markdown

      
    Raw
  

              react-app.markdown
            
          
    React App

A Pen by Anastasios Mpoletis on CodePen.
License.

  
## script.babel
//App main div styling
var styles = {
  textAlign: "center",
  borderRadius: 5
};

//Image div styling
var imgDiv = {
  marginBottom: "-35px"
};

//Image styling
var imgStyles = {
  marginTop: 10,
  marginBottom: 10,
  height: "auto",
  width: "100%",
  borderRadius: "10px 10px 0px 0px"
};

//Content div styling
var contentDiv = {
  color: "#333333",
  backgroundColor: "#e6e6e6",
  borderRadius: "0px 0px 10px 10px"
};

//Description div styling
var descriptionStyles = {
  textAlign: "left",
  backgroundColor: "#304ffe",
  borderRadius: "4px 4px 10px 10px",
  paddingLeft: 7,
  paddingBottom: 0.1,
  paddingTop: 0.1
};

//Description paragraph styling
var descriptionStylesPar = {
  fontSize: "20px",
  color: "#cccccc"
};

//Image links
var images = {
  stockholmImg: "https://dl.dropbox.com/s/te1bgv3xjt0ha3i/stockholm.JPG?dl=0",
  pragueImg: "https://dl.dropbox.com/s/7ytlzhjz551yvsk/prague.JPG?dl=0",
  nymphaioImg: "https://dl.dropbox.com/s/t8icz7iu1tntzky/nymphaio.jpg?dl=0"
};

//Main component to render
var App = React.createClass({
  getInitialState: function() {
    return { city: "Stockholm" };
  },

  changeCity: function(newCity) {
    this.setState({
      city: newCity
    });
  },

  //Render function
  render: function() {
    return (
      <div style={styles}>
        <DropDown onChange={this.changeCity} />
        <Content city={this.state.city} />
      </div>
    );
  }
});

//Dropdown content selection
var DropDown = React.createClass({
  handleChange: function(e) {
    var city = e.target.value;
    this.props.onChange(city);
  },

  //Render function
  render: function() {
    return (
      <div>
        <select id="cities-visited" onChange={this.handleChange}>
          <option value="Stockholm">Ducks</option>
          <option value="Prague">Bridges</option>
          <option value="Nymphaio">Mountains</option>
        </select>
      </div>
    );
  }
});

//Content contains all the additional information about each image
var Content = React.createClass({
  //propTypes check
  propTypes: {
    city: React.PropTypes.string.isRequired
  },

  //Render function
  render: function() {
    var city = this.props.city;

    //Image checking
    switch (city) {
      case "Stockholm":
        var image = <img src={images.stockholmImg} style={imgStyles} />;
        var date = <span>15/05/2016</span>;
        var description = (
          <span>
            What a peaceful city. Gamla Stan (The Old City) was my favorite.
          </span>
        );
        break;

      case "Prague":
        var image = <img src={images.pragueImg} style={imgStyles} />;
        var date = <span>12/04/2008</span>;
        var description = (
          <span>
            I visited Prague during my high-school trip. The Goth architecture is astonishing. Famous for the Astronomical Clock.
          </span>
        );
        break;

      case "Nymphaio":
        var image = <img src={images.nymphaioImg} style={imgStyles} />;
        var date = <span>23/11/2016</span>;
        var description = (
          <span>
            One of the coldest regions of the country. The mountainous scenery is breathtaking.
          </span>
        );
        break;
    }

    return (
      <div>
        <div style={imgDiv}>{image}</div>
        <div style={contentDiv}>
          <h1>From my trip to {city}!<br />{date}</h1>
          <div style={descriptionStyles}>
            <p style={descriptionStylesPar}>{description}</p>
          </div>
        </div>
      </div>
    );
  }
});

// Render function
ReactDOM.render(<App />, document.getElementById("app"));

## scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>

## style.css
/*
*  For more CSS check JS section.
*/

/* Background styling */
body {
  background: url(https://dl.dropbox.com/s/7e20szsa1d6md2f/background-orange.jpg?dl=0) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

/* Dropdown styling */
select {
  width: 20vw;
  height: 5vh;
  font-weight: 600;
  color: white;
  background: transparent;
  background-color: #304ffe;
  margin-bottom: 5px;
  margin-top: 5px;
  border-radius: 7px;
  overflow: hidden;
  border: none;
  outline: none;
  user-select: none;
}
	<body>
	<!-- The app is displayed inside this div -->
	<div id='app' style="font-family: 'Roboto', sans-serif;"></div>
	</body>
	//App main div styling
	var styles = {
	textAlign: "center",
	borderRadius: 5
	};

	//Image div styling
	var imgDiv = {
	marginBottom: "-35px"
	};

	//Image styling
	var imgStyles = {
	marginTop: 10,
	marginBottom: 10,
	height: "auto",
	width: "100%",
	borderRadius: "10px 10px 0px 0px"
	};

	//Content div styling
	var contentDiv = {
	color: "#333333",
	backgroundColor: "#e6e6e6",
	borderRadius: "0px 0px 10px 10px"
	};

	//Description div styling
	var descriptionStyles = {
	textAlign: "left",
	backgroundColor: "#304ffe",
	borderRadius: "4px 4px 10px 10px",
	paddingLeft: 7,
	paddingBottom: 0.1,
	paddingTop: 0.1
	};

	//Description paragraph styling
	var descriptionStylesPar = {
	fontSize: "20px",
	color: "#cccccc"
	};

	//Image links
	var images = {
	stockholmImg: "https://dl.dropbox.com/s/te1bgv3xjt0ha3i/stockholm.JPG?dl=0",
	pragueImg: "https://dl.dropbox.com/s/7ytlzhjz551yvsk/prague.JPG?dl=0",
	nymphaioImg: "https://dl.dropbox.com/s/t8icz7iu1tntzky/nymphaio.jpg?dl=0"
	};

	//Main component to render
	var App = React.createClass({
	getInitialState: function() {
	return { city: "Stockholm" };
	},

	changeCity: function(newCity) {
	this.setState({
	city: newCity
	});
	},

	//Render function
	render: function() {
	return (
	<div style={styles}>
	<DropDown onChange={this.changeCity} />
	<Content city={this.state.city} />
	</div>
	);
	}
	});

	//Dropdown content selection
	var DropDown = React.createClass({
	handleChange: function(e) {
	var city = e.target.value;
	this.props.onChange(city);
	},

	//Render function
	render: function() {
	return (
	<div>
	<select id="cities-visited" onChange={this.handleChange}>
	<option value="Stockholm">Ducks</option>
	<option value="Prague">Bridges</option>
	<option value="Nymphaio">Mountains</option>
	</select>
	</div>
	);
	}
	});

	//Content contains all the additional information about each image
	var Content = React.createClass({
	//propTypes check
	propTypes: {
	city: React.PropTypes.string.isRequired
	},

	//Render function
	render: function() {
	var city = this.props.city;

	//Image checking
	switch (city) {
	case "Stockholm":
	var image = <img src={images.stockholmImg} style={imgStyles} />;
	var date = <span>15/05/2016</span>;
	var description = (
	<span>
	What a peaceful city. Gamla Stan (The Old City) was my favorite.
	</span>
	);
	break;

	case "Prague":
	var image = <img src={images.pragueImg} style={imgStyles} />;
	var date = <span>12/04/2008</span>;
	var description = (
	<span>
	I visited Prague during my high-school trip. The Goth architecture is astonishing. Famous for the Astronomical Clock.
	</span>
	);
	break;

	case "Nymphaio":
	var image = <img src={images.nymphaioImg} style={imgStyles} />;
	var date = <span>23/11/2016</span>;
	var description = (
	<span>
	One of the coldest regions of the country. The mountainous scenery is breathtaking.
	</span>
	);
	break;
	}

	return (
	<div>
	<div style={imgDiv}>{image}</div>
	<div style={contentDiv}>
	<h1>From my trip to {city}!<br />{date}</h1>
	<div style={descriptionStyles}>
	<p style={descriptionStylesPar}>{description}</p>
	</div>
	</div>
	</div>
	);
	}
	});

	// Render function
	ReactDOM.render(<App />, document.getElementById("app"));
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js"></script>
	/*
	* For more CSS check JS section.
	*/

	/* Background styling */
	body {
	background: url(https://dl.dropbox.com/s/7e20szsa1d6md2f/background-orange.jpg?dl=0) no-repeat center center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	}

	/* Dropdown styling */
	select {
	width: 20vw;
	height: 5vh;
	font-weight: 600;
	color: white;
	background: transparent;
	background-color: #304ffe;
	margin-bottom: 5px;
	margin-top: 5px;
	border-radius: 7px;
	overflow: hidden;
	border: none;
	outline: none;
	user-select: none;
	}