Event Object - JS Book

by Sydney Haggard

HTML

<body>
    <div id="page">
      <h1 id="header">List</h1>
      <h2>Buy groceries</h2>
      <ul>
        <li id="one" class="hot"><em>fresh</em> figs</li>
        <li id="two" class="hot">pine nuts</li>
        <li id="three" class="hot">honey</li>
        <li id="four">balsamic vinegar</li>
      </ul>
    </div>
    <script src="../jquery-3.2.1.min.js"></script>
    <script src="js/event-object.js"></script>
  </body>

CSS

@import url(http://fonts.googleapis.com/css?family=Oswald);

body {
  background-color: #000;
  font-family: 'Oswald', 'Futura', sans-serif;
  margin: 0; 
  padding: 0;}

#page {
  background-color: #403c3b;
  margin: 0 auto 0 auto;
  position: relative;
  text-align: center;}
  /* Responsive page rules at bottom of style sheet */

h1 {
  background-image: url(../images/kinglogo.png);
  background-repeat: no-repeat;
  background-position: center center;
  text-align: center;
  text-indent: -1000%;
  height: 75px;
  line-height: 75px;
  width: 117px;
  margin: 0 auto 0 auto;
  padding: 30px 10px 20px 10px;}

h2 {
  color: #fff;
  font-size: 24px;
  font-weight: normal;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .3em;
  display: inline-block;
  margin: 0 0 23px 0;}

h2 span {
  background-color: #fff;
  color: #000;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0;
  display: inline-block;
  position: relative;
  border-radius: 50%;
  top: -5px;
  height: 22px;
  width: 26px;
  padding: 4px 0 0 0;}

ul {
  border:none;
  padding: 0;
  margin: 0;}

li {
  background-color: #ec8b68;
  color: #fff;
  border-top: 1px solid #fe9772;
  border-bottom: 1px solid #9f593f;
  font-size: 24px;
  letter-spacing: .05em;
  list-style-type: none;
  text-shadow: 2px 2px 1px #9f593f;
  text-align: left;
  height: 50px;
  padding-left: 1em;
  padding-top: 10px;}

li a {
  color: #fff;
  background-image: url('../images/icon-link.png');
  background-position: right, center;
  background-repeat: no-repeat;
  text-decoration: none;
  padding-right: 36px;}

li.complete a {
  background-image: none;}

p {
  background-color: #fff;
  color: #666; 
  padding: 10px;
  display: inline-block;
  margin: 20px auto 20px auto;
  width: 80%;
  border-radius: 5px;
  text-align: center;}

.hot {
  background-color: #d7666b;
  color: #fff;
  text-shadow: 2px 2px 1px #914141;
  border-top: 1px solid #e99295;
  border-bottom: 1px solid #914141;}

.cool {
 ...

JavaScript

$(function(){
   
    $('li').on('click', function(e){
        $('li span').remove();
        var date = new Date();
        date.setTime(e.timeStamp);
        var clicked = date.toDateString();
        $(this).append('<span class="date">' + clicked + ' ' + e.type + '</span>');
    });
    
});