INM220-SAA-Lab5

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

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

Technologies

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

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

  
</head>

<body>

  <html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
  </head>
  <body>
    <div class="navbar">
      <div class="navName">
        <h3>Innovative.co</h3>
        <span>Hello, <span loggedInUser>Name</span>!</span>
      </div>
    </div>
  
      <div class="headerText">
      <h1 projectName>Project Name</h1>
        <h2 projectQuote>Project Quote</h2>
        <br>
        <h3><u>Creator:</u></h3>
        <h2 projectCreator>Project Creator</h2>
        <br>
        <h5><i>Help this project reaches its goal by:</i></h5><h4 projectEndDate>End Date</h4>
      </div>
  
 <div class="projectInfo">
   <div class="videoArea">
     <div class="video-container">
       <iframe src="https://www.youtube.com/embed/Z2U9WhAAroY?rel=0@amp;showinfo=0" frameborder="0" allowfullscreen></iframe>
     </div>
   </div>
   <div class="statsArea">
     <div class="backerStats">
       <div>
       <h1 numberOfBackers>Count</h1>
         <p>Total <span>Backers</span></p>
       </div>
       <div>
         <h1 fundsRaised>$$$$$</h1>
            <p>of <span>$15,000</span></p>
          </div>
          <div>
            <h1 countDown>Time</h1>
            <p>Remaining <span>Time</span></p>
          </div>
        </div>
      </div>
    </div>
    
    
  </body>
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ptle3/inm220-saa-lab5-VPNXNr */
body{
  font-family: "Courier New", Courier, monospace;
  margin: 0;
  background: #F6F6F6;
  background-image: url("https://s-media-cache-ak0.pinimg.com/736x/fa/9a/ba/fa9abaff0d85489d9e2b180560c45110.jpg");
   background-size: 150px 300px;
  background-repeat: repeat;
}
.navbar{
  height: 64px;
  width: 100%;
  background: #000000;
  /*box-shadow: 1px 6px 5px -2px rgba(0,0,0,0.1);*/
  border-bottom: 2px solid white;
  display: flex;
}
.navName{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.navName > h3{
  padding-left: 2em;
  font-family: "Courier";
  color: #FF007F;
}
.navName > span{
  padding-right: 2em;
  margin-top: 1.2em;
  font-style: italic;
  color: #ffffff;
  font-weight: 600;
}
/* Project Header text */
.headerText{
  display: flex;
  flex-direction: column;
  text-align: center;
    background: #ffffff;
  border-bottom: 3px solid black;
  /* border-bottom: 1px solid #efefef;
  -webkit-box-shadow: 1px 6px 5px -2px rgba(0,0,0,0.1);
-moz-box-shadow: 1px 6px 5px -2px rgba(0,0,0,0.1);
box-shadow: 1px 6px 5px -2px rgba(0,0,0,0.1); */
  width: 100%;
  margin: 0 auto;
}

.headerText > h1, h2, h3, h4, h5{
  padding-bottom: 0px;
  margin-bottom: 0px;
}

.headerText > h1{
  font-size: 3em;
  color: #FF007F;
  border: 4px solid #FF007F;
  margin: auto;
  width: 270px;
  margin-top: 50px;
}

.headerText > h2{
  padding-top: 0px;
  margin-top: 15px;
  color: #413444;
}

.headerText > h3{
  padding-top: 0px;
  margin-top: 15px;
  color: #413444;
}

.headerText > h4, span{
  font-weight: 400;
  padding-top: 0px;
  margin-top: 0px;
  margin-bottom: 30px;
  color: #FF007F;
}

.projectInfo{
  display: flex;
  flex-direction: row;
  width: 80%;
  border: 3px solid black;
  background: #ffffff;
  margin: 0 auto;
  max-width: 1500px;
  margin-top: 50px;
  margin-bottom: 30px;
}

.videoArea{
  width: 65%;
}

/* Responsive Video Embed time */
.video-container{
  position: relative;
  padding-bottom: 56.25%; /* based on 16:9 ratio */
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  /* top: 0;
  left: 0;
  width: 100%;
  height: 100%; */
  top: 30px;
  left: 30px;
  width: 90%;
  height: 90%;
}
/* End of Responsive Video */


/*Downloaded from https://www.codeseek.co/ptle3/inm220-saa-lab5-VPNXNr */
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"); } }

////////////////DATA//////////////////////
var Data = function () {
  function Data() {
    _classCallCheck(this, Data);

    this.backers = {
      "uid1": {
        firstName: "Lily",
        lastName: "Le"
      },
      "uid2": {
        firstName: "Lenny",
        lastName: "Minion"
      },
      "uid3": {
        firstName: "Tim",
        lastName: "Bot"
      },
      "uid4": {
        firstName: "J",
        lastName: "Marlo"
      },
      "uid5": {
        firstName: "Bobby",
        lastName: "G"
      }
    };
    this.pledges = {
      "uid1": {
        "Feb2": {
          "amount": 603
        },
        "Feb10": {
          "amount": 100
        }
      },
      "uid2": {
        "Feb1": {
          "amount": 10
        },
        "Feb12": {
          "amount": 28
        }
      },
      "uid3": {
        "Mar5": {
          "amount": 400
        },
        "Mar6": {
          "amount": 950
        }
      },
      "uid4": {
        "Feb15": {
          "amount": 50
        },
        "Jan30": {
          "amount": 10
        }
      },
      "uid5": {
        "Feb8": {
          "amount": 700
        },
        "Mar7": {
          "amount": 369
        }
      }
    };
    this.loggedInUser = {
      "id": "uid1",
      loggedIn: true
    };
    this.projectInfo = {
      projectName: "PLA-INK",
      projectQuote: "The world's first 3D ink made from  plastic.",
      projectCreator: "Smith LAB",
      projectStartDate: "29 Jan, 2017",
      projectEndDate: "1 Apr, 2017"
    };
  }

  _createClass(Data, [{
    key: "getAllBackers",
    ///end of constructor


    /////////////////API////////////////////
    value: function getAllBackers() {
      return this.backers;
    }
  }, {
    key: "getTotalNumberOfBackers",
    value: function getTotalNumberOfBackers() {
      return Object.keys(this.getAllBackers()).length;
    }
  }, {
    key: "getLoggedInBacker",
    value: function getLoggedInBacker() {
      return this.loggedInUser;
    }
  }, {
    key: "getLoggedInUserInfo",
    value: function getLoggedInUserInfo() {
      var allBackers = this.getAllBackers();
      var currentBackerId = this.getLoggedInBacker().id;
      return allBackers[currentBackerId];
    }
  }, {
    key: "getProjectInfo",
    value: function getProjectInfo() {
      return this.projectInfo;
    }
    ////////Pledge API

  }, {
    key: "getAllPledges",
    value: function getAllPledges() {
      return this.pledges;
    }
  }, {
    key: "getPledgesForBackerByUID",
    value: function getPledgesForBackerByUID(uid) {
      return this.getAllPledges()[uid];
    }
  }, {
    key: "getTotalPledgedForBackerByUID",
    value: function getTotalPledgedForBackerByUID(uid) {
      var pledges = this.getPledgesForBackerByUID(uid);
      var pledgesTotal = 0;
      Object.keys(pledges).forEach(function (key) {
        pledgesTotal += pledges[key].amount;
      });
      return pledgesTotal;
    }
  }, {
    key: "getTotalFundsRaised",
    value: function getTotalFundsRaised() {
      var _this = this;

      var backers = this.getAllBackers();
      var totalBacked = Object.keys(backers).reduce(function (prev, curr) {
        prev += Number(_this.getTotalPledgedForBackerByUID(curr));
        return Number(prev);
      }, 0);
      return totalBacked;
    }
    ///////////////////////////////////////////

  }]);

  return Data;
}();

var myAppData = new Data();

console.log(myAppData.getLoggedInUserInfo());
console.log(myAppData.getProjectInfo());

////////////////////HELPERS/////////////////////

var CurrencyConvert = function () {
  function CurrencyConvert() {
    _classCallCheck(this, CurrencyConvert);
  }

  _createClass(CurrencyConvert, null, [{
    key: "formatToCurrency",
    value: function formatToCurrency(money) {
      return '$' + money;
    }
  }]);

  return CurrencyConvert;
}();

////////////////////LOGIC/////////////////////

var Levels = function () {
  function Levels() {
    _classCallCheck(this, Levels);
  }

  _createClass(Levels, null, [{
    key: "starter",
    get: function get() {
      return {
        "description": "Starter",
        "url": "https:///somestarterimg.jpg",
        "link": "http://linktostarterpage",
        "amt": 0
      };
    }
  }, {
    key: "bronze",
    get: function get() {
      return {
        "description": "Bronze",
        "url": "https:///somebronzerimg.jpg",
        "link": "http://linktobronzepage",
        "amt": 100
      };
    }
  }, {
    key: "silver",
    get: function get() {
      return {
        "description": "Silver",
        "url": "https:///somesilverimg.jpg",
        "link": "http://linktosilverpage",
        "amt": 500
      };
    }
  }, {
    key: "gold",
    get: function get() {
      return {
        "description": "Gold",
        "url": "https:///someggoldimg.jpg",
        "link": "http://linktogoldpage",
        "amt": 1000
      };
    }
  }, {
    key: "diamond",
    get: function get() {
      return {
        "description": "Diamond",
        "url": "https:///somediamondimg.jpg",
        "link": "http://linktodiamondpage",
        "amt": 5000
      };
    }
  }]);

  return Levels;
}();

////Determine rewards for backers///


var BackerLevelLogic = function () {
  function BackerLevelLogic(data) {
    _classCallCheck(this, BackerLevelLogic);

    this.data = data; //to remember the data class
  }

  _createClass(BackerLevelLogic, [{
    key: "determineLevelOfBackerByUID",
    value: function determineLevelOfBackerByUID(uid) {
      var total = this.data.getTotalPledgedForBackerByUID(uid);
      //return total;

      ///higher value on top first///
      if (total >= Levels.diamond.amt) {
        ///check for diamond
        return Levels.diamond.description;
      }
      if (total >= Levels.gold.amt) {
        ///check for gold
        return Levels.gold.description;
      }
      if (total >= Levels.silver.amt) {
        ///check for silver
        return Levels.silver.description;
      }
      if (total >= Levels.bronze.amt) {
        ///check for bronze
        return Levels.bronze.description;
      }
      if (total >= Levels.starter.amt) {
        ///check for starter
        return Levels.starter.description;
      }
    }
  }]);

  return BackerLevelLogic;
}();

/////////////////////VIEW///////////////////////


var Renderer = function () {
  function Renderer() {
    _classCallCheck(this, Renderer);
  }

  _createClass(Renderer, [{
    key: "printLoggedInUser",
    value: function printLoggedInUser(loggedInUser) {
      //console.log(loggedInUser);
      document.querySelector('span[loggedInUser]').innerHTML = loggedInUser.firstName;
    }
  }, {
    key: "printProjectInfo",
    value: function printProjectInfo(projectInfo) {
      console.log(projectInfo);
      document.querySelector('h1[projectName]').innerHTML = projectInfo.projectName;document.querySelector('h2[projectQuote]').innerHTML = projectInfo.projectQuote;document.querySelector('h2[projectCreator]').innerHTML = projectInfo.projectCreator;
      document.querySelector('h4[projectEndDate]').innerHTML = projectInfo.projectEndDate;

      ////////Time countdown///////
      // Sets end date.
      var countDownDate = new Date(projectInfo.projectEndDate).getTime();

      // Updates the count down every 1 second.
      var x = setInterval(function () {

        // Get today's date and time.
        var now = new Date().getTime();

        // Find the distance between now an the count down date.
        var distance = countDownDate - now;

        // Time calculations for days, hours, minutes and seconds.
        var days = Math.floor(distance / (1000 * 60 * 60 * 24));
        var hours = Math.floor(distance % (1000 * 60 * 60 * 24) / (1000 * 60 * 60));
        var minutes = Math.floor(distance % (1000 * 60 * 60) / (1000 * 60));
        var seconds = Math.floor(distance % (1000 * 60) / 1000);

        // Output result.
        document.querySelector('h1[countdown]').innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";
      }, 1000);
    }
    ////////End of Time countdown///////

  }, {
    key: "printNumberOfBackers",
    value: function printNumberOfBackers(backers) {
      document.querySelector('h1[numberOfBackers]').innerHTML = backers;
    }
  }, {
    key: "printFundsRaised",
    value: function printFundsRaised(funds) {
      document.querySelector('h1[fundsRaised]').innerHTML = funds;
    }
  }]);

  return Renderer;
}();

//////initiate objects/////


var appRenderer = new Renderer();

//////render loop/////
appRenderer.printLoggedInUser(myAppData.getLoggedInUserInfo());
appRenderer.printProjectInfo(myAppData.getProjectInfo());
appRenderer.printNumberOfBackers(myAppData.getTotalNumberOfBackers());
appRenderer.printFundsRaised(myAppData.getTotalFundsRaised());
appRenderer.printFundsRaised(CurrencyConvert.formatToCurrency(myAppData.getTotalFundsRaised()));

var myLogic = new BackerLevelLogic(myAppData);

////
console.log(Levels.bronze.url);
console.log(Levels.gold.description);
console.log(myLogic.determineLevelOfBackerByUID("uid2"));

Comments