JFF - Profile with Healthbar

by Kevin Pliester

HTML

<div class="container">

  <div class="profile">

    <div class="head">

      <div class="avatar">
        <span class="img"></span>
        <span class="txt">lebt</span>
      </div>

      <div class="info">

        <h1 class="name">Vorname Nachname</h1>

        <div class="health">
          <span class="bar"></span>
          <span class="num"></span>
        </div>

      </div>

    </div>

    <div class="body">
      <div class="lvl">26</div>
      <div class="exp">124</div>
    </div>


  </div>
</div>

<div class="result"></div>

SCSS

html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

body {
  font-family: arial;
  background-color: #353535;
  color: #939393;
}

.container {
  margin: 5% auto;
  max-width: 600px;
}

.profile {
  background-color: #151515;
  color: #fff;
  .head {
    display: flex;
    border-bottom: 1px solid #222;
    .avatar {
      flex: 1 25%;
      position: relative;
      min-height: 145px;
      &.hit {
        color: red;
      }
      .img {
        display: block;
        width: 100%;
        height: 145px;
        background-color: #111;
        position: absolute;
        z-index: 10;
      }
      .txt {
        position: absolute;
        z-index: 12;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
      }
    }
    .info {
      flex: 1 75%;
      border-left: 1px solid #222;
      .name {
        padding: 25px;
        font-size: 1.4em;
      }
      .health {
        margin: 0 25px 25px;
        padding: 5px;
        border: 1px solid #222;
        display: block;
        position: relative;
        .bar {
          display: inline-block;
          background-color: #330000;
          padding: 5px;
          width: 100%;
        }
        .num {
          position: absolute;
          top: 50%;
          left: 50%;
          font-size: .9em;
          transform: translateX(-50%) translateY(-50%);
        }
      }
    }
  }
  .body {
    display: flex;
    .lvl {
      flex: 1;
      padding: 15px;
    }
    .exp {
      flex: 1;
      padding: 15px;
      border-left: 1px solid #222;
    }
  }
}

JavaScript

(function($) {

  var maxAge = 76;
  var currentAge = $('.body').find('.lvl').text();
  var barNum = $('.health').find('.num');      
  var barWidth = $('.health').find('.bar');

  currentAge = parseInt(currentAge);

  var healthLoose = (maxAge / 100) * currentAge;
  var healthAvailable = Math.round(maxAge - healthLoose);
  
  var health = {
  	init : function() {          
      barNum.text(healthAvailable + '%');
      barWidth.css( 'width', healthAvailable+'%' );
    }
  }
  
  var hitHealth = {
  	init : function() {
    
      var avatar = $('.avatar');
      
    	$('.avatar').click(function(){
      
        $(this).addClass('hit');
      
      	healthAvailable = healthAvailable - 10;
        
        health.init();
        
      	setTimeout(function() {
        	avatar.removeClass('hit');
        }, 100 );      	
      });
    }
  }
  
  health.init();
  hitHealth.init();

})(jQuery)