mmp310-assignment-03-shrink-and-enlarge-buttons

In this example below you will see how to do a mmp310-assignment-03-shrink-and-enlarge-buttons with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by dreamsniper, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright dreamsniper ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>mmp310-assignment-03-shrink-and-enlarge-buttons</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?</div>
   <p><button id="enlarge-div">Enlarge</button><button id="shrink-div">Shrink</button></p>
  
  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/dreamsniper/mmp310-assignment-03-shrink-and-enlarge-buttons-evpXpq */
body {
   font-family: sans-serif;
}

div {
   padding: 10px;
   width: 300px;
   height: 300px;
   border: 1px solid black;
   overflow: hidden;
}

p {
   position: fixed;
   top: 50%;
   right: 0;
}

button {
   font-size: 1.5rem;
   padding: 10px;
   margin: 10px;
}


/*Downloaded from https://www.codeseek.co/dreamsniper/mmp310-assignment-03-shrink-and-enlarge-buttons-evpXpq */
/*jslint browser, es6, single, for, devel, this */
/*global window */

var enlargeButton = document.getElementById('enlarge-div'),
    shrinkButton = document.getElementById('shrink-div');

// function showAlert() {
//     'use strict';

//     alert('You Clicked The ' + this.id);
// }

//To enlarve div box by 100 px
function enlargeBox() {
    var box = document.querySelector('div'); //selects the div in the Dom
    var boxWidth = window.getComputedStyle(box, null).getPropertyValue('width'); //get the width element
    var boxHeight = window.getComputedStyle(box, null).getPropertyValue('height');
    var newWidth = parseInt(boxWidth, 10); //gets rid of the px and leaves integer set to variable
    var newHeight = parseInt(boxHeight, 10);
    if(newWidth >= 500){
        alert("The box is too large");
    }else{
        newWidth += 100; //adds 100px to element
        newHeight += 100;
    }
    box.style.width = (newWidth) + "px"; //sets the style of the elemet
    box.style.height = (newHeight) + "px";
    //alert(box.style.width);
}

//To shrink div box by 100 px
function shrinkBox() {
  var box = document.querySelector('div'); //selects the div in the Dom
  var boxWidth = window.getComputedStyle(box, null).getPropertyValue('width'); //get the width element
  var boxHeight = window.getComputedStyle(box, null).getPropertyValue('height');
  var newWidth = parseInt(boxWidth, 10); //gets rid of the px and leaves integer
  var newHeight = parseInt(boxHeight, 10);
  if(newWidth <= 100){
    alert("The box is too small");
  }else{
    newWidth -= 100; //adds 100px to element
    newHeight -= 100;
  }
  box.style.width = (newWidth) + "px";
  box.style.height = (newHeight) + "px";
  //alert(box.style.width);
}

if (null !== enlargeButton) {
    enlargeButton.addEventListener('click', enlargeBox, false);
} else {
    console.error('No reference to ID %c enlarge-div established');
}
if (null !== shrinkButton) {
    shrinkButton.addEventListener('click', shrinkBox, false);
} else {
    console.error('No reference to ID %c shrink-div established');
}

Comments