Plus Minus

index.html

<div id="skill-change-value-container">
   <div id="qty-subtract" class="skill-change-value">    
      <a class="btn">-</a>
   </div>
   <div id="qty-addition" class="skill-change-value">    
      <a class="btn">+</a>
   </div>
</div>


<div id="skill" class="skill">
   <div class="skill-wrap lost">
      <div class="skill-value">
         <p></p>
         <div class="letter-holder">
            Off-side
         </div>
      </div>
   </div>
</div>  

plus-minus.markdown

Plus Minus

A Pen by Giuseppe Canale on CodePen.

License.

script.js

class Skill{
	constructor(){
		this.buttonSelected;
		this.updating = false;
		this.skillOpen = false;

		document.getElementsByClassName( "skill-value" )[0].getElementsByTagName( "p" )[0].innerText = 10;
		
		document.getElementById( "qty-subtract" ).addEventListener( "click", function() {
			this.buttonSelected.innerText = this.subtractQty( parseInt( this.buttonSelected.innerText ) );
			this.updating = true;
		}.bind( this ));

		document.getElementById( "qty-addition" ).addEventListener( "click", function() {
			this.buttonSelected.innerText = this.addQty( parseInt( this.buttonSelected.innerText ) );
			this.updating = true;
		}.bind( this ));

		document.getElementsByClassName( "skill-wrap" )[0].addEventListener( "click", function( event ) {
			if ( this.skillOpen == false ){
				this.skillOpen = true;
			} else {
				return;
			};

			this.buttonSelected = event.currentTarget.getElementsByTagName( "p" )[0];
			document.getElementById( "skill-change-value-container" ).style.opacity = 1;

			var outoClose = setInterval( function(){ 
				if ( this.updating == false ){
					document.getElementById( "skill-change-value-container" ).style.opacity = 0;
					clearInterval( outoClose );
					this.skillOpen = false;
				} else {
					this.updating = false;
				};
			}.bind( this ), 2000 );

		}.bind( this ));
	};
   
   addQty( val ) {
      if( isNaN( val ) ) {
         return 20;
      } else {
         if ( val < 20 ){
            return val+1;
         } else {
            return val;
         };
      };

   };

   subtractQty( val ) {
      if( isNaN( val ) ) {
         return 0;
      } else {  
         if( val > 0 && val <= 20 ) {
            return val-1;
         } else {
            return val;
         };
      };

   };
};

let skill = new Skill();

style.css

@import url('https://fonts.googleapis.com/css?family=Miriam+Libre');

.btn {
   text-align: center;
   line-height: 90px;
   color: #fff;
   cursor: pointer;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   font-size: 80px;
}

.skill-change-value {
   justify-content: center;
   margin: 10px;
   height: 100px;
   width: 100px;
   background-color: rgba( 78, 78, 78, 0.6 );
   border-radius: 15px;
   display: flex;
   font-size: 140px;
   font-weight: 500;
}

#skill-change-value-container {
   display: flex;
   position: absolute;
   justify-content: center;
   align-items: center;
   font-family: 'Miriam Libre', sans-serif;  
   width:100%;
   height:100%;
   opacity: 0;
   transition: opacity .5s;
}

.skill {
   position: absolute;
   left: 20px;
   bottom: 20px;
   padding: 15px;
   background-color: rgba( 78, 78, 78, 0.6 );
   animation: pop .55s;
   border-radius: 5px;
   display: flex;
   width: 890px;
   font-family: 'Miriam Libre', sans-serif;
   font-size: 20px;
   font-weight: 500;
   color: #777;
}

.skill-wrap {
   width: 80px;
   height: 90px;
   margin: 0 10px 0 0;
   border-radius: 5px;
   background-color: #d8d8d8;
   flex-shrink: 0;
   flex-grow: 0;
   cursor: pointer;
}

.skill-wrap p {
   margin: 0;
   text-align: center;
}

.skill-value {
   margin: 10px 0 0 0;
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.skill-wrap.lost {
   background-color: #f55d5d;
   background-image: linear-gradient( 45deg, #f55d5d 0%, #de4e38 100% );
   color: #eee;
}

.skill-wrap.gain {
   background-color: #85FFBD;
   background-image: linear-gradient( 45deg, #85FFBD 0%, #FFFB7D 100% );
   color: #111;
}

.letter-holder {
   font-size: 12px;
   text-align: center;
}

@keyframes shrink {
   0% {
      width: 890px;
   }
   100% {
      width: 10px;
   }
}

@keyframes expand {
   0% {
      width: 10px;
   }
   100% {
      width: 890px;
   }
}

@keyframes pop {
   0% {
      transform: scale( 0.8 );
   }
   80% {
      transform: scale( 1.1 );
   }
   90% {
      transform: scale( 0.95 );
   }
   100% {
      transform: scale( 1 );
   }
}

.cross-close {
   font-weight: bolder;
   font-size: 15px;
   border-radius: 50%;
   height: 30px;
   width: 30px;
   text-align: center;
   line-height: 32px;
   position: absolute;
   left: 900px;
   top: -15px;
   background-color: rgb( 78, 78, 78 );
   color: #ddd;
   transition: all .5s;
}

.cross-close:hover {
   color: #222;
   background-color: rgb( 255, 255, 255 );
   cursor: pointer;
}

@keyframes spin { 
   0% {
      transform:rotate( 0deg ); 
   } 
   100% {
      transform:rotate( 180deg ); 
   } 
}

@keyframes unspin { 
   0% {
      transform:rotate( 180deg ); 
   } 
   100% {
      transform:rotate( 0deg ); 
   } 
}