INM420-SAA-LAB4-FL

In this example below you will see how to do a INM420-SAA-LAB4-FL with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Federicola, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Federicola ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>INM420-SAA-LAB4-FL</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head></head>
  <body>
    <div id="app"></div>
    
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
    <script src="https://www.gstatic.com/firebasejs/3.6.7/firebase.js"></script>
    <link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">
    
  </body>
</html>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Federicola/inm420-saa-lab4-fl-YNaGdm */
Body{
  Background-Color: Hotpink;
   font-size: 20px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: oblique;
  color: purple;
}

/*Downloaded from https://www.codeseek.co/Federicola/inm420-saa-lab4-fl-YNaGdm */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

/*Lab 4
We get your app pulling data from your own Firebase account.
We revisit Lab 2 to show rendering of multiple items. Additional topics covered include conditional classes, and data attributes*/

var config = {
  apiKey: "AIzaSyBYYqz5NKltJ4cUK95JLsP9dOYEADoj9dM",
  authDomain: "inm420first.firebaseapp.com",
  databaseURL: "https://inm420first.firebaseio.com",
  storageBucket: "inm420first.appspot.com",
  messagingSenderId: "117257275726"
};
firebase.initializeApp(config);

//Step 1: Get your DataLoader loading in YOUR data
/////a class-based component

var DataLoader = function (_React$Component) {
  _inherits(DataLoader, _React$Component);

  function DataLoader() {
    _classCallCheck(this, DataLoader);

    var _this = _possibleConstructorReturn(this, (DataLoader.__proto__ || Object.getPrototypeOf(DataLoader)).call(this));

    _this.state = {};
    return _this;
  }

  _createClass(DataLoader, [{
    key: "render",
    value: function render() {
      if (!this.state.data) {
        return React.createElement(
          "h3",
          null,
          "Loading Data..."
        );
      } else {
        return React.createElement(
          "div",
          null,
          React.createElement(ArticleNav, { data: this.state.data, callBack: this.navigate.bind(this) }),
          React.createElement(ArticleRenderer, { title: this.state.currentTitle, description: this.state.currentDescription })
        );
      }
    }

    ////talk to firebase and open up the data connection

  }, {
    key: "loadData",
    value: function loadData() {
      var _this2 = this;

      firebase.database().ref('articles').on('value', function (snapshot) {
        console.log(snapshot.val());
        _this2.setState({ data: snapshot.val() });
        if (!_this2.state.currentNavItem) {
          _this2.navigate("uid1");
        }
      });
    }
  }, {
    key: "navigate",
    value: function navigate(id) {
      console.log("We should go to page " + id);
      this.setState({ currentNavItem: id,
        currentTitle: this.state.data[id].dummyTitle,
        currentDescription: this.state.data[id].description

      });
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadData();
    }
  }]);

  return DataLoader;
}(React.Component);

//Step 2: Fake user clicking to get the state being set in DataLoader

//Step 3: Send data, and info about currently selected article to the navigation component


var ArticleNav = function ArticleNav(props) {
  var articleChosen = function articleChosen(id) {
    console.log("I should navigate to " + id);
    props.callBack(id);
  };
  return React.createElement(
    "div",
    { className: "left" },
    React.createElement(
      "h1",
      null,
      "PapuDeliNene's Corner"
    ),
    Object.keys(props.data).map(function (key) {
      return React.createElement(Article, { title: props.data[key].dummyTitle, uid: key, callBack: articleChosen });
    })
  );
};

var Article = function Article(props) {
  var clickHandler = function clickHandler(evt) {
    console.log("Clicked on " + evt.target.dataset.id);
    props.callBack(evt.target.dataset.id);
  };
  return React.createElement(
    "h3",
    { onClick: clickHandler, "data-id": props.uid },
    props.title
  );
};

var ArticleRenderer = function ArticleRenderer(props) {
  return React.createElement(
    "div",
    null,
    React.createElement(
      "h1",
      null,
      props.title
    ),
    React.createElement(
      "p",
      null,
      props.description
    )
  );
};

ReactDOM.render(React.createElement(DataLoader, null), document.querySelector('#app'));

Comments