INM420-SAA-Lab7-FL

In this example below you will see how to do a INM420-SAA-Lab7-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-Lab7-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>
    <script src="https://unpkg.com/react-router-dom@4.0.0-beta.3/umd/react-router-dom.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-lab7-fl-ZeLOKJ */
a:link{
  Background-Color: #ff4d4d;
   font-size: 35px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: oblique;
  color: yellow;
  padding: 15px;
  border: 5px solid pink;
  text-decoration: none;
  text-shadow: 1px 1px blue;
}

Body{
  Background-Color:#ff6666;
   font-size: 25px;
   font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
  font-style: oblique;
  color: black
    
;
}

h1{
  text-shadow: 2px 2px white;
}
h3{
  color: #00b38f;
  text-shadow: 2px 2px #ff0000;
}

nav > ul > li{
  display: inline-block;
  margin-right: 10px;
}

p{
  color:#b30059;
  
}

nav{
  background-color: #ff4d4d;
  
}

label{
  background-color: #ff4d4d;
}
input{
    background-color: #ff4d4d;
    border: none;
}



/*Downloaded from https://www.codeseek.co/Federicola/inm420-saa-lab7-fl-ZeLOKJ */
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);

////end of firebase config//////

var _ReactRouterDOM = ReactRouterDOM,
    HashRouter = _ReactRouterDOM.HashRouter,
    Route = _ReactRouterDOM.Route,
    Link = _ReactRouterDOM.Link;

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

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

  function DataLoader(_ref) {
    var match = _ref.match;

    _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,
      "PPHANTOM TAPES"
    ),
    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
    )
  );
};

//////Global Navigation Components
var NavigationBar = function NavigationBar(props) {
  return React.createElement(
    "nav",
    null,
    React.createElement(
      "ul",
      null,
      React.createElement(
        "li",
        null,
        React.createElement(
          Link,
          { to: "/CASA" },
          "CASA"
        )
      ),
      React.createElement(
        "li",
        null,
        React.createElement(
          Link,
          { to: "/FutureSounds" },
          "Future Sounds"
        )
      ),
      React.createElement(
        "li",
        null,
        React.createElement(
          Link,
          { to: "/CurrentSounds" },
          "Current Sounds"
        )
      ),
      React.createElement(
        "li",
        null,
        React.createElement(
          Link,
          { to: "/PastSounds" },
          "Past Sounds"
        )
      ),
      React.createElement(
        "li",
        null,
        React.createElement(
          Link,
          { to: "/Login" },
          "Login"
        )
      )
    )
  );
};

var Footer = function Footer(props) {
  return React.createElement(
    "footer",
    null,
    React.createElement(
      "p",
      null,
      "FOREVER DROWNING IN SLACKER SH*T"
    )
  );
};

////CASA

var HomeLoader = function (_React$Component2) {
  _inherits(HomeLoader, _React$Component2);

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

    var _this3 = _possibleConstructorReturn(this, (HomeLoader.__proto__ || Object.getPrototypeOf(HomeLoader)).call(this));

    _this3.state = {};
    return _this3;
  }

  _createClass(HomeLoader, [{
    key: "render",
    value: function render() {
      //////check to see if the data is loaded, if not show a message about loading.....t.w.
      if (!this.state.data) {
        return React.createElement(
          "h3",
          null,
          "Loading Data..."
        );
      } else {
        return React.createElement(
          "section",
          null,
          React.createElement(
            "h1",
            null,
            "CASA"
          ),
          React.createElement(
            "h3",
            null,
            this.state.data.greeting
          ),
          React.createElement(
            "h3",
            null,
            this.state.data.content
          ),
          React.createElement(
            "h3",
            null,
            this.state.data.content2
          )
        );
      }
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {
      this.loadData();
    }
  }, {
    key: "loadData",
    value: function loadData() {
      var _this4 = this;

      firebase.database().ref('home').on('value', function (snapshot) {
        console.log("HOME LOADED DATA");
        console.log(snapshot.val());
        _this4.setState({ data: snapshot.val() });
      });
    }
  }]);

  return HomeLoader;
}(React.Component);

//login

var MahaloPage = function (_React$Component3) {
  _inherits(MahaloPage, _React$Component3);

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

    return _possibleConstructorReturn(this, (MahaloPage.__proto__ || Object.getPrototypeOf(MahaloPage)).apply(this, arguments));
  }

  _createClass(MahaloPage, [{
    key: "render",
    value: function render() {
      return React.createElement(
        "div",
        null,
        React.createElement(
          "h3",
          null,
          "\"WELCOME  ---  BIENVENIDO  ---  MAHALO  ---  \u3088\u3046\u3053\u305D\""
        ),
        React.createElement(LoginForm, null)
      );
    }
  }]);

  return MahaloPage;
}(React.Component);

/////Login Form Component


var LoginForm = function LoginForm(props) {
  var fields = void 0;
  fields = React.createElement(
    "div",
    null,
    React.createElement(
      "label",
      null,
      "Emial",
      React.createElement("input", { type: "email", name: "email" })
    ),
    React.createElement(
      "label",
      null,
      "Password",
      React.createElement("input", { type: "password", name: "password" })
    )
  );

  return React.createElement(
    "div",
    null,
    React.createElement(
      "h1",
      null,
      "Join The Community"
    ),
    React.createElement(
      "form",
      null,
      fields,
      React.createElement(RegisterButton, null),
      React.createElement(LoginButton, null)
    )
  );
};

var RegisterButton = function RegisterButton(props) {
  return React.createElement("input", { type: "submit", name: "register", onclick: props.login, value: "Register" });
};

var LoginButton = function LoginButton(props) {
  return React.createElement("input", { type: "submit", name: "login", value: "Login" });
};

var App = function (_React$Component4) {
  _inherits(App, _React$Component4);

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

    return _possibleConstructorReturn(this, (App.__proto__ || Object.getPrototypeOf(App)).apply(this, arguments));
  }

  _createClass(App, [{
    key: "render",
    value: function render() {
      return React.createElement(
        HashRouter,
        null,
        React.createElement(
          "div",
          null,
          React.createElement(Route, { path: "/", component: NavigationBar }),
          React.createElement(Route, { exact: true, path: "/CASA", component: HomeLoader }),
          React.createElement(Route, { exact: true, path: "/Login", component: MahaloPage }),
          React.createElement(Route, { exact: true, path: "/FutureSounds", component: DataLoader })
        )
      );
    }
  }]);

  return App;
}(React.Component);

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

Comments