lab 11

In this example below you will see how to do a lab 11 with some HTML / CSS and Javascript

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>lab 11</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>Stylish Second Hand</h3>
        <span>Welcome,<span loggedInUser>Name</span>!</span>
      </div>
    </div>
  
      <div class="headerText">
        <h1 projectName>Project Name</h1>
        <h3 projectCreator>Project Creator</h3>
        <h4 projectDate>Date Created</h4>
    </div>
    
    <div class="projectInfo">
      <div class="videoArea">
        <div class="video-container">
          <iframe <iframe src="https://www.youtube.com/embed/FJHd81IHHGg" frameborder="0" allowfullscreen></iframe>/iframe>
        </div>
      </div>
      <div class="statsArea">
        <div class="backerStats">
          <div>
            <h1>Big</h1>
            <p>Sale</p>
          </div>
          <div>
            <h1 fundsRaised>$$$$$</h1>
            <p>of <span>$5000</span></p>
          </div>
          <div>
            <h1>20</h1>
            <p>days left</p>
          </div>
          
        </div>
   
            <button pledge class="pledgeButton">Buy Now</button>
     
      </div>
    </div>
    <div class="pledgeContainer">
      <div class="pledgeArea">
        <div pledge class="pledgeList">
          <p>Left Column</p>
          <p>Some more info</p>
        </div>
        <div class="pledgeTypes">
          <div>
            <p>You have pledged:</p>
         <p userPledgedAmount> $100 </p>
            
          <div class="pledgeContainer">
              <div class="pledgeArea"
                   <div backers class="pledgeList">
            </div>
           <div class="pledgeTypes">
      <div class="pledgeRightBox">
        <h3>A secondhand or used good is one that is being purchased by or otherwise transferred to a second or later end user.</h3>
       </div>
  <div class="pledgeRightBox">
    <h3>Secondhand goods can benefit the purchaser as the price paid is lower than the same items bought new. </h3>
     
     
    </div> 
          </div>
        </div>
      </div>
    </div>
    
    <div dialogContainer class="dialogContainer dialogHide">
      <div dialogOverlay class="dialogOverlay"></div>
      <div class="dialogBox">
        <h2>How Much Will You Buy</h2>
        <div class="pledgeChoices">
          <form>
            <div class="pledgeForm">
              <div class="pledgeRadios">
                <div class="pledgeSelect">
                  <input type="radio" name="pledge" value="20">$20 T-shirt<br />
                </div>
                <div class="pledgeSelect">
                  <input type="radio" name="pledge" value="100">$100 Dress<br />
                </div>
                <div class="pledgeSelect">
                  <input type="radio" name="pledge" value="150">$150 Jean<br />
                </div>
              </div>
            </div>
          </form>
        </div>
        <button pledgeSubmit class="pledgeSubmit disabledSubmit">Send it!</button>
      </div>
    </div>
  </body>
</html>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/momomilk/lab-11-EmVEZQ */
body{
  font-family: "Comic Sans MS";
  margin: 0;
  color: #F08080 ;
  background: #D3D3D3
}
.navbar{
  height: 64px;
  width: 100%;
  background: #FFE4C4;
  box-shadow: 2px 7px 6px -1px rgba(0,0,0,0.2);
  display: flex;
}
.navName{
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.navName > h3{
  padding-left: 5em;
  color: #F08080;
}
.navName > span{
  padding-right: 3em;
  margin-top: 1.3em;
  font-style: italic;
  color: #F08080 ;
  font-weight: 600;
}
/* Project Header text */
.headerText{
  display: flex;
  flex-direction: column;
  text-align: center;
  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, h3, h4{
  padding-bottom: 9px;
  margin-bottom: 0px;
  
}

.headerText> h1{
  font-size: 2.5em;
}

.headerText > h3{
  padding-top: 0px;
  margin-top: 19px;
  font-style: italic;
}

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

.projectInfo{
  display: flex;
  flex-direction: row;
  width: 90%;
  border: 19px solid pink;
  margin: 0 auto;
  max-width: 1500px;
  margin-top: 50px;
  color: #FF1493 ;
}
.statsArea.{  
  display:flex;
  width:35%;
  flex-direction: column;
  align-content: center;
  justify-content: center;
  }
  .backerStats{
    display:flex;
    flex-direction: column;
    padding: 25px;
  }
.videoArea{
  width: 65%;
}
/* Responsive Video Embed time*/
.video-container{
  position: relative;
  padding-bottom: 56.25%;
  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%;
}
/* End of responsive Video*/

/*Backer Area*/
.pledgeContainer{
  width: 90%;
 
}
.pledgeArea{
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: 0 auto;
  max-width: 1500px;
}
.pledgeList{
  width: 65%;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  padding-top: 40px;
}
.pledgeTypes{
  width: 55%;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  padding-top: 40px
  
}
.pledgeArea{
  display: flex;
  flex-direction: row;
  width: 80%;
  margin: 0 auto;
  max-width: 1500px;
}
.pledgeList{
  width: 65%;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  padding-top: 40px;
}
/*styling the pledgers*/
.pledger{
  border: 1px solid green;
  padding: 1em;
  margin-right: 5px;
  margin-bottom: 5px;
  background: yellow;
  width: 30%;
}

/*pledge button*/
.pledgeButton{
  font-size: 2em;
  width: 250px;
  height: 80px;
  border: none;
  background: #E80652;
  color: yellow;
  margin-left: 100px;
  box-shadow: 1px 6px 5px -2px rgba(0,0,0,0.16);
}

/*dialog work*/
.dialogContainer{
  width: 75%;
  height: 75%;
  top: 0;
  left: 0;
  position: fixed;
  display: flex;
  justify-content: right;
}
.dialogHide{
  display:none;
}
.dialogOverlay{
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  background: rgba(0,0,0, 0.5);
  z-index: 100;
}
.dialogBox{
  width: 40%;
  height: 400px;
  background: #9ACD32;
  position: relative;
  padding: 20px;
  text-align: center;
  z-index: 110;
}
.pledgeSelect{
  padding: 5px;
}
.pledgeSubmit{
  width: 80%;
  height: 54px;
  font-size: 1.3em;
  border: none;
  background: #FF00FF;
  color: yellow;
  box-shadow: 6px 7px 7px 0px rgba(0,0,0,0.16);
}
.disabledSubmit{
  background: #FF00FF;
}
.pledgeRightBox{
  
  border:4px solid grey ;
  color:yellow;
  padding:1em;
  text-align: center;
  margin-right: 5px;
  margin-bottom: 5px;
  position: relative;
  width:100%;
  background:rgba(0,0,0, 0.5);
  left:5%;

}
@media (max-width: 1200px){
  .projectInfo{
    width: 100%;
  }
  .pledgeArea{
    width: 100%;
    flex-direction: column
  }
  .pledgeTypes{
    order: -1;
    width: 90%;
    margin: 0 auto;
    
  }
  .pledgeList{
    width: 90%;
    margin: 0 auto;
  }
  .pledger{
    width: 40%;
    margin: 0 auto;
    
  }
}
@media (max-width: 850px){
  .projectInfo{
    flex-direction: column
  }
  .videoArea{
    width: 100%;
  }
  .statsArea{
    width: 100%;
  }
  .backerStats{
    flex-direction: row;
    justify-content: space-around;
  }
.pledger{
    width: 100%;
    margin: 0 auto;
    
  }
@media (max-width: 650px){
  .dialogbox{
    width: 90%;
    max-width:90%;
  }
}


/*Downloaded from https://www.codeseek.co/momomilk/lab-11-EmVEZQ */
class Data {
  constructor() {
    this.emitter = new EventEmitter();
    this.backers = {
      "uid1": {
        firstName: "Berna",
        lastName: "Sahin"
      },
      "uid2": {
        firstName: "Jansel",
        lastName: "Guler"
      },
      "uid3":{
        firstName: "Bob",
        lastName: "Guler"
      }
    }
    
    this.pledges={
      "uid1":{
        "Jan2":{
          "amount": 30
        },
        "Jan10":{
          "amount": 100
        }
      },
      "uid2":{
        "Jan1":{
          "amount": 10
        },
        "Jan12":{
          "amount": 5
        },
        "Jan20":{
          "amount": 5
        }
      },
      "uid3":{
        "Jan3":{
          "amount": 5
          
        }
      }
    }
    
    this.loggedInUser = {
      "id": "uid2",
      loggedIn: true
    }
    this.projectInfo = {
      projectName: "Second Hand Clothes",
      projectCreator: "Basak Keskintimur",
      projectDate: "Jan 27, 2017"
    }
  };
  
  ///api for listeners
  addEventListener(event, cb){
    this.emitter.addEventListener(event, cb);
  }
  removeEventListener(event){
    this.emitter.removeEventListener(event);
  }
 
  getAllBackers(){
    return this.backers;
  }
  getLoggedInBacker(){
    return this.loggedInUser;
  }
  getLoggedInUserInfo(){
    let allBackers = this.getAllBackers();
    let currentBackerId = this.getLoggedInBacker().id;
    return(allBackers[currentBackerId]);
  }
  getProjectInfo(){
    return this.projectInfo;
  }
  /////Pledge API
  getAllPledges(){
    return this.pledges;
  }
  getPledgesForBackerByUID(uid){
    return this.getAllPledges()[uid];
  }
  getTotalPledgedForBackerByUID(uid){
    let pledges = this.getPledgesForBackerByUID(uid);
    let pledgeTotal = 0;
    Object.keys(pledges).forEach(key =>{
      pledgeTotal += pledges[key].amount;
    })
    return pledgeTotal;
  }
  getTotalFundsRaised(){
    let backers = this.getAllBackers();
    let totalBacked = Object.keys(backers).reduce((prev, curr) =>{
      prev += Number(this.getTotalPledgedForBackerByUID(curr));
      return Number(prev);
    },0)
    return totalBacked;
  }
  ///////create API
  newPledge(id, amount){
    amount = Number(amount);///cast to number type
    console.log("Making a pledge in the data ");
    console.log(id, amount);
    let today = new Date();
    this.pledges[id][today] = { "amount" : amount};
    console.log("COMPLETE! ITS IN THE DATABASE!");
    console.log(myAppData.getPledgesForBackerByUID(id) );
    this.emitter.dispatch('NEW_PLEDGE');
    
  }
}
///////////////////////EMITTER START///////////////////////
class EventEmitter{
  constructor(){
    this.listeners = {};
  }
  addEventListener(event, fn){
    this.listeners[event] = this.listeners[event] || [];
    this.listeners[event].push(fn);
  }
  removeEventListener(event, fn){
    let handlers = this.listeners[event];
    handlers.splice(handlers.indexOf(fn), 1);
  }
  dispatch(event, ...args){
    const eventListeners = this.listeners[event];
    if(eventListeners){
      eventListeners.forEach(event =>{
        event.apply(null, args);
      })
    }
  }
  getEventHandlers(event){
    return this.listeners[event];
  }
  clearEventHandlers(event){
    if(event){
      listeners[event]=[];
    }
  }
}
////////////////////////////EVENT EMITTER END////////////////

////////////////////////////HELPERS//////////////////////////
class CurrencyConvert{
  static formatToCurrency(amt){
    return '$'+amt;
  }
}
class Levels{
  static get bronze(){
    return{
      "description": "Vintage",
      "url": "https:///someimagehere.jpg",
      "link": "http://linktobronzepage",
      "amt": 15
    }
  }
  
  static get silver(){
    return{
      "description": "Marketing",
      "url": "https:////somesilverimage.jpg",
      "link": "http://linktosilverpage",
      "amt": 50
    }
  }
  
  static get gold(){
    return{
      "description": "Communication",
      "url": "https:////somegoldimage.jpg",
      "link": "http://linktogoldpage",
      "amt": 150
    }
  }
  
  static get plat(){
    return{
      "description": "solar cell",
      "url": "https::///someplatimage.jpg",
      "link": "http://linktoplatinumpage",
      "amt": 200
    }
  }
  
}
///New for Lab 5
class BackerLevelLogic{
  constructor(data){
    this.data = data;//remember the data class
  }
  determineLevelOfBackerByUID(uid){
    let total = this.data.getTotalPledgedForBackerByUID(uid);
    //check for plat
    if(total >= Levels.plat.amt){
      return Levels.plat.description;
    }
    ///check for gold level
    if(total >= Levels.gold.amt){
      return Levels.gold.description;
    }
    
    //check for silver
    if(total >= Levels.silver.amt){
      return Levels.silver.description;
    }
    //check for bronze
    if(total >= Levels.bronze.amt){
      return Levels.bronze.description;
    }
  }
}

class PledgeLogic{
  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();
    })
    
    console.log("New pledge:::");
    console.log(pledge);
    if(pledge>0){
      console.log("Pledge is good to go!");
      let userID = myAppData.getLoggedInBacker();
      console.log(userID);
      myAppData.newPledge(userID.id, pledge);
    }
  }
}

///VIEW/////
class Renderer{
  closeDialog(){
    let dialog = document.querySelector('div[dialogContainer]');
    dialog.classList.add('dialogHide');
  }
  printLoggedInUser(loggedInUser){
    //console.log( loggedInUser );
    document.querySelector('span[loggedInUser]').innerHTML=loggedInUser.firstName;
  }
  printProjectInfo(projectInfo){
    console.log(projectInfo); document.querySelector('h1[projectName]').innerHTML=projectInfo.projectName;
    document.querySelector('h3[projectCreator]').innerHTML = projectInfo.projectCreator;
    document.querySelector('h4[projectDate]').innerHTML = projectInfo.projectDate;
  }
  printFundsRaised(funds){
    document.querySelector('h1[fundsRaised]').innerHTML = funds;
  }
  printTotalFundsOfLoggedInUser(total){document.querySelector('p[userPledgedAmount]').innerHTML=total;
    
  }
  printBackers(backers, levelLogic){
    let snip="";
    console.log("THESE ARE THE BACKERS!!!!!");
    console.log(backers);
    console.log(levelLogic);
    Object.keys(backers).forEach(function(val, key){
      console.log("The value is "+val);
      let compiled = `<div class="pledger">
                    <p>${backers[val].firstName} ${backers[val].lastName}</p>
                    <h2>${levelLogic.determineLevelOfBackerByUID(val)}</h2>
                    </div>`
      snip += compiled;
    })
    console.log(snip);
    document.querySelector('div[pledge]').innerHTML = snip;
  }
  
  
  
  
}

class ViewListener{
  initialize(view){
    console.log("I am listening!")
    ////find the dialogContainer
    let dialog = view.querySelector('div[dialogContainer]');
    let dialogOverlay = view.querySelector('div[dialogOverlay]'); 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("YOU CLICKED ON A BUTTON");
      console.log("Toggle the overlay");
      dialog.classList.toggle('dialogHide');
    })
    //////pledge submission events
    let pledgeSubmitButton = view.querySelector('button[pledgeSubmit]');
    pledgeSubmitButton.addEventListener('click', function(evt){
      console.log("You are pledging $"+currentPledgeValue);
      let logic = new PledgeLogic();
      logic.newPledge(currentPledgeValue);
      
    })
    let radios = view.querySelectorAll('[name="pledge"]');
    for(let rad of radios){
      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');
      })
    }
    
  }
}

  
  
  
  
  

////initiate objects
const myAppData = new Data();
const appRenderer = new Renderer();

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

let myLogic = new BackerLevelLogic(myAppData);
//NEW STUFF!!
appRenderer.printBackers(myAppData.getAllBackers(), myLogic);
console.log(myLogic.determineLevelOfBackerByUID("uid1"));

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

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

console.log(myAppData.getLoggedInBacker().id);
appRenderer.printTotalFundsOfLoggedInUser(CurrencyConvert.formatToCurrency(myAppData.getTotalPledgedForBackerByUID(myAppData.getLoggedInBacker().id)));

Comments