Action: A JavaScript demonstration

In this example below you will see how to do a Action: A JavaScript demonstration with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by fimara, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright fimara ©
  • HTML
  • CSS
  • JavaScript
    <!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/JavaScript -->

<!DOCTYPE html>
<html>

<head>
<title>Mozilla CSS Getting Started - JavaScript demonstration</title>
<link rel="stylesheet" type="text/css" href="style5.css" />
<script type="text/javascript" src="script5.js"></script>
</head>

<body>
<h1>JavaScript sample</h1>
<div id="square"></div>
<button>Click Me</button>

</body>
</html>


/*Downloaded from https://www.codeseek.co/fimara/action-a-javascript-demonstration-zBYQoj */
      #square {

      width: 120px;

      height: 120px;

      border: 2px inset gray;

      margin-bottom: 1em;

  }

  button {

      padding: .5em 2em;

  }


/*Downloaded from https://www.codeseek.co/fimara/action-a-javascript-demonstration-zBYQoj */
    // JavaScript demonstration
var changeBg = function (event) {
    console.log("method called");
    var me = event.target
    ,   square = document.getElementById("square");
    square.style.backgroundColor = "#ffaa44";
    me.setAttribute("disabled", "disabled");
    setTimeout(function () { clearDemo(me) }, 2000);
}

function clearDemo(button) {
    var square = document.getElementById("square");
    square.style.backgroundColor = "transparent";
    button.removeAttribute("disabled");
}

var button = document.querySelector("button"); 
button.addEventListener("click", changeBg); 
console.log(button);


Comments