<!-- This is an HTML comment. -->

<html>
<body>
<!-- 
  Next element will execute JavaScript code when is clicked. 
  setHot() -> JavaScript call to setHot function.
  this -> variable referring the current element.
-->
<div class="ball" onclick="setHot(this);">Ball A</div>
<div class="ball hot">Ball B</div>
<div class="ball cold">Ball C</div>
</body>
</html>
/* This is a CSS comment. */

body {
  width:100%;
  height:100%;
  
}

.ball { 
  position:absolute;  /* Element moves freely on the screen. */
  width:100px; 
  height:100px;
  margin-left:-50px;
  margin-top:-50px;
  top:50%; 
  left:25%;
  border-radius:50%; /* it makes the element rounded */
  background-color:green;
  text-align:center;
  line-height:230px;
  cursor:pointer;
}

.ball.hot {background-color:red; left:50%;}

.ball.cold {background-color:blue; left:75%;}


/*  This is a JavaScript comment. */

/*  Functions are a collection of statements to be processed   
    when they are called.
*/

function setHot(a) {
  /* Modifying CSS background-color. */
  a.style.backgroundColor="red";
}

/* Variables are data holders.
   Variable c will hold Ball C element. 
*/
var c=document.getElementsByClassName("cold")[0];

 /* Ball C will get hot after user clicks on it. */
c.addEventListener("click",function(e) {
   /* Calling setHot function and passing Ball C as argument. */ 
  setHot(c);
});


External CSS

  1. http://digitallearning.esc4.net/pixels4kids/codepen/css/basic.css

External JavaScript

This Pen doesn't use any external JavaScript resources.