React Sales App | Free Source Code

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow - #6 React Sales App</title>
  <link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet"><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<div id="root"></div>
<!-- partial -->
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

body {
  font-family: 'Oswald', sans-serif;
  background-color: #11131e;

}
#root {
  text-align:center;
  padding:15px
}
.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #0c0d15;
  height: 100px;
  padding: 20px;
  color: white;
}

.App-intro {
  font-size: large;
}


h1{
    font-size:18px;
    margin-bottom:20px;
}
span.duration {
  font-size:12px
}


#courses{
    list-style: none;
    display: inline-block;
    width: 500px;
    text-align: left;
}

#courses p{
    display: block;
    padding: 20px 20px;
    background-color: #11131e;
    border: 1px dotted whitesmoke; 
    color: white;
    position: relative;
    cursor: pointer;
    border-radius:8px;
    transition: 0.3s;
}

#courses p b{
    position: absolute;
    right: 30px;
    width: 100px;
    color: white;
    text-align: right;
}

#courses p:hover{
    background-color:#303656;
    color:#fff;
}

#courses p.active{
    color:#fff;
    background-color:#303656;
}

#courses p.active b{
    color: #fff;
}


#total{
    background: #11131e !important;
    cursor: default !important;
    padding-top: 10px !important;
    font-size: 20px;
}

#total b{
  color: lightblue !important;
}

// Sales component: App.js

class App extends React.Component {
  render() {
    var courses = [
    { name: 'Swimming', price: 99, duration: "One day a week for 1 month" },
    { name: 'Scuba Diving', price: 205, duration: "5 consecutive days" },
    { name: 'Surfing', price: 30, duration: "Daily drop-in sessions" },
    { name: 'Snorkelling', price: 150, duration: "Twice a week" }];


    return /*#__PURE__*/(
      React.createElement("div", { className: "App" }, /*#__PURE__*/
      React.createElement("div", { className: "App-header" }, /*#__PURE__*/
      React.createElement("h2", null, "Welcome to the Swim and Surf Shack"), /*#__PURE__*/
      React.createElement("p", null, "See our available courses below ")), /*#__PURE__*/

      React.createElement(CourseSales, { items: courses })));


  }}

class Course extends React.Component {

  clicker() {
    var active = !this.state.active;
    this.setState({ active: active });
    this.props.sumPrice(active ? this.props.price : -this.props.price);
  }
  constructor(props) {
    super(props);

    this.state = {
      active: false };

    this.clicker = this.clicker.bind(this);
  }
  render() {
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("p", { className: this.state.active ? 'active' : '', onClick: this.clicker }, this.props.name, " ", /*#__PURE__*/React.createElement("b", null, "\xA3", this.props.price), " - ", /*#__PURE__*/React.createElement("span", { className: "duration" }, this.props.duration))));




  }}

class CourseSales extends React.Component {
  sumPrice(price) {
    this.setState({ total: this.state.total + price });
  }


  constructor(props) {
    super(props);

    this.state = {
      total: 0 };


    this.sumPrice = this.sumPrice.bind(this);
  }

  render() {
    console.log(this.props.items);

    var courses = this.props.items.map((item, i) => {
      return /*#__PURE__*/React.createElement(Course, { name: item.name,
        price: item.price,
        duration: item.duration,
        key: i, sumPrice: this.sumPrice, active: item.active });

    });
    return /*#__PURE__*/(
      React.createElement("div", null, /*#__PURE__*/
      React.createElement("br", null), /*#__PURE__*/
      React.createElement("div", { id: "courses" },
      courses, /*#__PURE__*/
      React.createElement("p", { id: "total" }, "Total: ", /*#__PURE__*/React.createElement("b", null, "\xA3", this.state.total)))));



  }}


/*#__PURE__*/React.createElement(Course, null);

ReactDOM.render( /*#__PURE__*/React.createElement(App, null), document.getElementById('root'));