INM220-SAA-Lab11b

In this example below you will see how to do a INM220-SAA-Lab11b 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-Lab11b</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>
      <br>
      <font size="6" projectQuote>Project Quote</font>
      <br><br>
     <font size="5">Creator:</font>
     <font size="6" projectCreator>Project Creator</font>
      <br><br>
      <font size="3"><i>Help this project reaches its goal by</i></font>
      <font size="6" color="#FF0000" projectEndDate>End Date</font>
   </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>$30,000</span></p>
         </div>
         <div>
         <h1 countDown>Time</h1>
         <p>Remaining <span>Time</span></p>
         </div>
       
       </div>
       
       <button pledge class="pledgeButton">Pledge Now</button>
       
      </div>
   </div>
  
    
    
    
   <div class="pledgeContainer">
   <div class="pledgeArea">
     <div pledge class="pledgeList">
       <h2>Left Column</h2>
       <p>Left Column 2</p>
     </div>
     <div class="pledgeTypes">
      <div class="pledgeTypeLevelBox">
            <font size="6.5">Support this project!</font>
       <br><br>    
        <font size="5" color="#00FF00"><b>Starter level</b></font>
            <p>Your names will be mentioned on our website.</p>
            <p>Total Backers: <span starterLevel>10</span></p>
          </div>
       <div class="pledgeTypeLevelBox">
            <font size="5" color="#00FF00"><b>Bronze level</b></font>
            <p>This tier’s profits will be used for extra PLA-INK sets to donate to charities.On your behalf, they will be distributed amongst children in need. Your names will also be mentioned on our website.</p>
            <p>Total Backers: <span bronzeLevel>10</span></p>
          </div>
       <div class="pledgeTypeLevelBox">
            <font size="5" color="#00FF00"><b>Silver level</b></font>
            <p><b>FREE ChupaCut Bottle Shredder</b></p>
       <p>Includes:</p>
       <ul><li>ChupaCut Bottle Shredder</li>
       <li>Free Worldwide Shipping</li></ul>
            <p>Total Backers: <span silverLevel>10</span></p>
          </div>
       <div class="pledgeTypeLevelBox">
            <font size="5" color="#00FF00"><b>Gold level</b></font>
            <p><b>EARLY BIRD: PLA-INK 3D Ink</b></p>
       <p>Includes:</p>
       <ul><li>PLA-INK 3D Ink</li>
           <li>3D Pen with a Colorful Spool for Plastic Tapes</li>
           <li>3D Stencil Converter Access</li>
           <li>Free Worldwide Shipping</li></ul>
            <p>Total Backers: <span goldLevel>10</span></p>
          </div>
       <div class="pledgeTypeLevelBox">
            <font size="5" color="#00FF00"><b>Diamond level</b></font>
            <p><b>PLA-INK 3D Ink Premium Set</b></p>
       <p>Includes:</p>
       <ul><li>PLA-INK 3D Ink</li>
           <li>3D Pen with a Colorful Spool for Plastic Tapes</li>
           <li>ChupaCut Bottle Shredder</li>
           <li>3D Stencil Converter Access</li>
           <li>The Stand + 6 Spools with Colourful Strips</li>
           <li>Free Worldwide Shipping</li></ul>
            <p>Total Backers: <span diamondLevel>10</span></p>
          </div>
          </div>
     </div> 
   </div>
 </div>
    
   <div dialogContainer class="dialogContainer dialogHide">
     <div dialogOverlay class="dialogOverlay"></div>
       <div dialogBox class="dialogBox">
         <button close class="close">&times;</button>
         <br>
         <font size="8"><b>THANK YOU!</b></font>
         <p>How much would you like to pledge?</p>
         <div class="pledgeChoices">
           <form>
             <div class="pledgeRadios">
               <div class="pledgeSelect">
                 <input type="radio" name="pledge" value="50">$50<br />
               </div>
               <div class="pledgeSelect">
                 <input type="radio" name="pledge" value="100">$100<br />
               </div>
               <div class="pledgeSelect">
                 <input type="radio" name="pledge" value="500">$500<br />
               </div>
               <div class="pledgeSelect">
                 <input type="radio" name="pledge" value="1000">$1000<br />
               </div>
               <div class="pledgeselect">
                 <input type="radio" name="pledge" value="other">$<input type="number" class="number" name="other"></input></input>
              </div>
             </div>
           </form>
           <button pledgeSubmit class="pledgeSubmit disabledSubmit">OK</button>
       </div>
     </div>
   </div>
  </div> 
 </body>
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/ptle3/inm220-saa-lab11b-mmyVpx */
body{
  font-family: "Courier New";
  margin: 0;
  background: #F6F6F6;
  background-image: url("http://s-media-cache-ak0.pinimg.com/736x/fa/9a/ba/fa9abaff0d85489d9e2b180560c45110.jpg");
  background-size: 160px 239px;
  background-repeat: repeat;
}
.navbar{
  height: 64px;
  width: 100%;
  background: #000000;
  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: #FF0000;
;
}
.navName > span{
  padding-right: 2em;
  margin-top: 1.2em;
  font-style: italic;
  color: #ffffff;
  font-weight: 600;
}

.headerText{
  display: flex;
  flex-direction: column;
  text-align: center;
  background: #ffffff;
  border-bottom: 3px solid black;
  width: 100%;
  margin: 0 auto;
  padding-bottom: 45px;
}

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

.headerText > h1{
  font-size: 5em;
  color: #00FF00;
  border: 8.5px solid #00FF00;
  margin: auto;
  padding: 6px 35px;
  margin-top: 50px;
}

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

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

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

.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;
}

.statsArea{
  display: flex;
  width: 35%;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.backersStats{
  display: flex;
  flex-direction: column;
}

.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: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
/* End of Responsive Video */


/* Backer Area */
.pledgeContainer{
  width: 100%;
  background: transparent;
}

.pledgeButton{
  font-family: "Courier New";
  font-size: 1.4em;
  width: 190px;
  height: 70px;
  border: none;
  background: #FF0000;
  color: #FFFFFF;
  /*margin-left: 25px;*/
  box-shadow: 1px 2px 2px -2px #000000;
}

.pledgeButton:hover{
  background: #00FF00;
}

.pledgeArea{
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: 0 auto;
  max-width: 1500px;
  margin-bottom: 30px;
}

.pledgeList{
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  /*width: 50%;
  height: 70%;*/
}

.pledger{
  border: 3px solid black;
  padding: 2em;
  margin-right: 14px;
  margin-bottom: 15px;
  margin-top: none;
  background: white;
  width: 30%;
}

.pledgeTypes {
  width: 60%;
  border: 3px solid black;
  padding: 2em;
  background: white;
}

.dialogContainer{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  font-family: "Courier New";
  display: flex;
  align-content: center;
}

.dialogOverlay{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background-color: rgba(0,0,0,0.5);
  background-image: url("https://cdn.tutsplus.com/psd/uploads/legacy/0608_Heart_Box/diagonal-texture.png");
  background-size: 600px 600px;
  background-repeat: repeat;
  z-index: 100;
}

.dialogBox{
  width: 440px;
  margin: auto;
  background-color: #FFFFFF;
  border: 4px solid black;
  color: #000000;
  text-align: center;
  padding-top: 10px;
  padding-bottom: 30px;
  z-index: 110;
}

.close {
 background-color: transparent; 
 color: #000000;
 border: none;
 font-family: Arial;
 font-size: 1.6em;
 position: relative;
 top: -7px; 
 left: 47%;
}

.pledgeRadios{
  line-height: 100%;
  text-align: left;
  margin-left: 40%;
}

.number{
  font-family: "Courier New";
  font-size: 1em;
  padding: 3px 3px;
  box-sizing: border-box;
  width: 60px;
  border-bottom: 1px solid black;
  border-top: none;
  border-left: none;
  border-right: none;
  outline-style:none;
}

.pledgeSubmit{
 width: 50%;
 background-color:#FF0000;
 margin: 20px;
 color: #FFFFFF;
 border: none;
 font-family: Courier;
 font-size: 1.2em;
 padding: 4px 9px;
}

.disabledSubmit{
  background: rgba(0,0,0,0.15);
}

.dialogHide{
  display: none;
}

/*breakpoints*/
@media (max-width: 1200px){
  .projectInfo{
    width: 90%;
    /*border-left: none;
    border-right: none;*/
  }
  .statsArea{
    margin-left: 20px;
  }
  .pledgeButton{
    margin-bottom: 20px;
  }
  .pledgeArea{
    width: 100%;
    flex-direction: column;
    margin: 0 auto;
  }
  .pledgeTypes{
    order: -1;
    width: 83%;
    margin: auto;
  }
  .pledgeList{
    width: 90%;
    margin: auto;
    justify-content: center;
  }
  .pledger{
    width: 30%;
    margin-top: 20px;
    
  }
}

@media (max-width: 850px){
  .projectInfo{
    flex-direction: column;
    width: 100%;
    border-left: none;
    border-right: none;
  }
  .videoArea{
    width: 100%;
  }
  .statsArea{
    width:100%;
    margin-left: 0px;
  }
  .backerStats{
    flex-direction: row;
    margin: auto;
  }
  .pledgeButton{
    margin: auto;
    margin-bottom: 20px;
    width: 50%;
  }
  .pledgeTypes{
    margin: auto;
    margin-bottom: 30px;
  }
  .pledger{
    width: 100%;
    margin-top: 10px;
    margin-right: 0px;
  }
}

@media (max-width: 650px){
  .headerText > h1{
  width: 50%;
  }
  .statsArea{
    margin-left: 0px;
  }
  .dialogBox{
    width:90%;
    max-width:90%;
  }
  .pledgeTypes{
    width: 75%;
    margin-bottom: 30px;
  }
  .pledgeButton{
   margin: auto;
   margin-bottom: 20px;
   width: 80%;
  }
}

/*Downloaded from https://www.codeseek.co/ptle3/inm220-saa-lab11b-mmyVpx */
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.emitter = new EventEmitter();
    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"
      },
      "uid6": {
        firstName: "Michelle",
        lastName: "Ng"
      }
    };
    this.pledges = {
      "uid1": {
        "Feb2": {
          "amount": 4000
        },
        "Feb10": {
          "amount": 500
        }
      },
      "uid2": {
        "Feb1": {
          "amount": 10
        },
        "Feb12": {
          "amount": 20
        }
      },
      "uid3": {
        "Mar5": {
          "amount": 400
        },
        "Mar6": {
          "amount": 500
        }
      },
      "uid4": {
        "Feb15": {
          "amount": 50
        },
        "Jan30": {
          "amount": 10
        }
      },
      "uid5": {
        "Feb8": {
          "amount": 1000
        },
        "Mar7": {
          "amount": 800
        },
        "Mar15": {
          "amount": 3000
        }
      },
      "uid6": {
        "Feb9": {
          "amount": 100
        }
      }
    };
    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 May, 2017"
    };
  }

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


    /////////////////API////////////////////
    //////API for Listeners//////
    value: function addEventListener(event, cb) {
      this.emitter.addEventListener(event, cb);
    }
  }, {
    key: "removeEventListener",
    value: function removeEventListener(event) {
      this.emitter.removeEventListener(event);0;
    }
  }, {
    key: "getAllBackers",
    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;
    }
    ////get the total backers for one level

  }, {
    key: "getTotalBackerNumberByLevel",
    value: function getTotalBackerNumberByLevel(level) {
      var levelLogic = new BackerLevelLogic(this);
      var totalBacked = Object.keys(this.backers).reduce(function (prev, curr) {
        if (levelLogic.determineLevelOfBackerByUID(curr) == level) {
          prev += 1;
        }
        return Number(prev);
      }, 0);
      return totalBacked;
    }
  }, {
    key: "getAllBackerTotalsByLevel",
    value: function getAllBackerTotalsByLevel() {
      var levelsObject = {};
      levelsObject.starter = this.getTotalBackerNumberByLevel(Levels.starter.description);
      levelsObject.bronze = this.getTotalBackerNumberByLevel(Levels.bronze.description);
      levelsObject.silver = this.getTotalBackerNumberByLevel(Levels.silver.description);
      levelsObject.gold = this.getTotalBackerNumberByLevel(Levels.gold.description);
      levelsObject.diamond = this.getTotalBackerNumberByLevel(Levels.diamond.description);
      return levelsObject;
    }

    /////Create API

  }, {
    key: "newPledge",
    value: function newPledge(id, amount) {
      amount = Number(amount); ///cast to number type
      console.log("Making a pledge in the data...");
      console.log(id, amount);
      var today = new Date();
      this.pledges[id][today] = { "amount": amount };
      console.log("Pledge Complete!");
      console.log(myAppData.getPledgesForBackerByUID(id));
      this.emitter.dispatch('NEW_PLEDGE');
    }

    ///////////////////////////////////////////

  }]);

  return Data;
}();

var EventEmitter = function () {
  function EventEmitter() {
    _classCallCheck(this, EventEmitter);

    this.listeners = {};
  }

  _createClass(EventEmitter, [{
    key: "addEventListener",
    value: function addEventListener(event, fn) {
      this.listeners[event] = this.listeners[event] || [];
      this.listeners[event].push(fn);
    }
  }, {
    key: "removeEventListener",
    value: function removeEventListener(event, fn) {
      var handlers = this.listeners[event];
      handlers.splice(handlers.indexOf(fn), 1);
    }
  }, {
    key: "dispatch",
    value: function dispatch(event) {
      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      var eventListeners = this.listeners[event];
      if (eventListeners) {
        eventListeners.forEach(function (event) {
          event.apply(null, args);
        });
      }
    }
  }, {
    key: "getEventHandlers",
    value: function getEventHandlers(event) {
      return this.listeners[event];
    }
  }, {
    key: "clearEventHandlers",
    value: function clearEventHandlers(event) {
      if (event) {
        listeners[event] = [];
      }
    }
  }]);

  return EventEmitter;
}();

/////////////////////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": "http://www.polyvore.com/cgi/img-thing?.out=jpg&size=l&tid=8985518",
        "link": "http://linktostarterpage",
        "amt": 0
      };
    }
  }, {
    key: "bronze",
    get: function get() {
      return {
        "description": "Bronze",
        "url": "http://www.stickylife.com/images/u/2ba802535b864cf9bd9e471196e18c6d-800.png",
        "link": "http://linktobronzepage",
        "amt": 100
      };
    }
  }, {
    key: "silver",
    get: function get() {
      return {
        "description": "Silver",
        "url": "https://upload.wikimedia.org/wikipedia/commons/thumb/8/84/Circle_Mahogany_Solid.svg/2000px-Circle_Mahogany_Solid.svg.png",
        "link": "http://linktosilverpage",
        "amt": 500
      };
    }
  }, {
    key: "gold",
    get: function get() {
      return {
        "description": "Gold",
        "url": "https://s3-us-west-2.amazonaws.com/s.cdpn.io/14179/circle.png",
        "link": "http://linktogoldpage",
        "amt": 1000
      };
    }
  }, {
    key: "diamond",
    get: function get() {
      return {
        "description": "Diamond",
        "url": "http://www.stickylife.com/images/u/899af2dd5d784aa09be5c21aaa470633-800.png",
        "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;
}();

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

  _createClass(PledgeLogic, [{
    key: "newPledge",
    value: function newPledge(pledge) {
      myAppData.addEventListener('NEW_PLEDGE', function (evt) {
        console.log("PledgeLogic knows the pledge is complete!");
        appRenderer.printFundsRaised(CurrencyConvert.formatToCurrency(myAppData.getTotalFundsRaised()));
        appRenderer.printBackers(myAppData.getAllBackers(), myLogic);
        appRenderer.closeDialog();
        appRenderer.printBackersForLevels(myAppData.getAllBackerTotalsByLevel());
      });

      console.log("New pledge:::");
      console.log(pledge);
      if (pledge > 0) {
        console.log("Pledge is good to go!");
        var userID = myAppData.getLoggedInBacker();
        console.log(userID);
        myAppData.newPledge(userID.id, pledge);
      }
    }
  }]);

  return PledgeLogic;
}();

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


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

  _createClass(Renderer, [{
    key: "closeDialog",
    value: function closeDialog() {
      var dialog = document.querySelector('div[dialogContainer]');
      dialog.classList.add('dialogHide');
    }
  }, {
    key: "printBackersForLevels",
    value: function printBackersForLevels(levelInfo) {
      console.log(levelInfo);
      document.querySelector('span[starterLevel]').innerHTML = levelInfo.starter;
      document.querySelector('span[bronzeLevel]').innerHTML = levelInfo.bronze;
      document.querySelector('span[silverLevel]').innerHTML = levelInfo.silver;
      document.querySelector('span[goldLevel]').innerHTML = levelInfo.gold;
      document.querySelector('span[diamondLevel]').innerHTML = levelInfo.diamond;
    }
  }, {
    key: "printLoggedInUser",
    value: function printLoggedInUser(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('font[projectQuote]').innerHTML = projectInfo.projectQuote;document.querySelector('font[projectCreator]').innerHTML = projectInfo.projectCreator;
      document.querySelector('font[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;
    }

    //NEW STUFF
    ///dependencies - the list of backers, the logic class to determine levels

  }, {
    key: "printBackers",
    value: function printBackers(backers, levelLogic) {
      var snip = "";
      //console.log("These are all the backers:");
      //console.log(backers);
      //console.log(levelLogic);
      Object.keys(backers).forEach(function (val, key) {
        console.log("Backer is " + val);

        //////ADD PHOTO + PLEDGER INFO
        var pArr = myAppData.pledges[val];
        var pTotal = 0;
        Object.keys(pArr).forEach(function (val, key) {
          pTotal += pArr[val].amount;
        });
        var lvl = Levels.starter;
        if (pTotal >= Levels.starter.amt) {
          lvl = Levels.bronze;
        };
        if (pTotal >= Levels.bronze.amt) {
          lvl = Levels.silver;
        };
        if (pTotal >= Levels.silver.amt) {
          lvl = Levels.gold;
        };
        if (pTotal >= Levels.gold.amt) {
          lvl = Levels.diamond;
        };
        var img = lvl.url;
        var compiled = "<div class=\"pledger\" align=\"center\">\n  <img src=\"" + img + "\" style=\"max-width:150px;\"/>\n  <h2 style=\"color:#00FF00\">" + backers[val].firstName + " " + backers[val].lastName + "</h2>\n  <p>Level:" + levelLogic.determineLevelOfBackerByUID(val) + "</p>\n                      </div>";
        ///////END OF ADD PHOTO + PLEDGER INFO

        snip += compiled;
      });
      console.log(snip);
      document.querySelector('div[pledge]').innerHTML = snip;
    }
  }]);

  return Renderer;
}();

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

  _createClass(ViewListener, [{
    key: "initialize",

    ///this function starts the ViewListener listening for user interactions
    value: function initialize(view) {
      console.log("I am listening!");
      ///find the dialogContainer
      var dialog = view.querySelector('div[dialogContainer]');
      var dialogOverlay = view.querySelector('div[dialogOverlay]');
      var dialogBox = view.querySelector('div[dialogBox]');

      view.querySelector('div[dialogOverlay]').addEventListener('click', function (evt) {
        console.log("You clicked on the overlay");
        dialog.classList.toggle('dialogHide');
      });

      ///listen for the pledge button
      view.querySelector('button[pledge]').addEventListener('click', function (evt) {
        console.log("Toggle the overlay");
        dialog.classList.toggle('dialogHide');
      });

      ////pledge submission events here
      var pledgeSubmitButton = view.querySelector('button[pledgeSubmit]');
      pledgeSubmitButton.addEventListener('click', function (evt) {
        console.log("You are pledging $" + currentPledgeValue);
        evt.preventDefault();
        if (currentPledgeValue > 0) {
          var logic = new PledgeLogic();
          logic.newPledge(currentPledgeValue);
        }
      });

      view.querySelector('button[pledgeSubmit]').addEventListener('click', function (evt) {
        console.log("You clicked on the submit button.");
        dialog.classList.remove('dialogBox');
      });

      //click on x to close box
      view.querySelector('button[close]').addEventListener('click', function (evt) {
        console.log("You clicked on the close button.");

        dialog.classList.toggle('dialogHide');
      });

      //step 1: select all radio buttons  
      var radios = view.querySelectorAll('[name="pledge"]');
      //step 2: loop through them one by one
      var _iteratorNormalCompletion = true;
      var _didIteratorError = false;
      var _iteratorError = undefined;

      try {
        for (var _iterator = radios[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
          var rad = _step.value;

          console.log("rad is:::");
          console.log(rad);
          rad.addEventListener('click', function (evt) {
            console.log("You clicked a radio button: " + evt.target.value);
            currentPledgeValue = evt.target.value;
            pledgeSubmitButton.classList.remove('disabledSubmit');
          });
        }
        //other option - input amount 
      } catch (err) {
        _didIteratorError = true;
        _iteratorError = err;
      } finally {
        try {
          if (!_iteratorNormalCompletion && _iterator.return) {
            _iterator.return();
          }
        } finally {
          if (_didIteratorError) {
            throw _iteratorError;
          }
        }
      }

      var other = view.querySelector('[name="other"]');
      other.addEventListener('input', function (evt) {
        console.log("You'd like to pledge: " + evt.target.value);
        currentPledgeValue = evt.target.value;
      });
    }
  }]);

  return ViewListener;
}();

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


var myAppData = new Data();
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);

//////get all backers and levels//////
appRenderer.printBackers(myAppData.getAllBackers(), myLogic);
appRenderer.printBackersForLevels(myAppData.getAllBackerTotalsByLevel());

var currentPledgeValue = 0;
var view = new ViewListener();
view.initialize(document);

console.log("here is my result: ");
console.log(CurrencyConvert.formatToCurrency(myAppData.getTotalPledgedForBackerByUID(myAppData.getLoggedInBacker().id)));

Comments