How to do it...

1. Navigate to app/recipe2.ejs and add the following code to it:

      <!-- Create Comment Areas Using Media Objects -->
      <div class="container mt-5">
       <h1>Chapter 3, Recipe 2:</h1>
       <p class="lead">Create Comment Sections Using Media Objects</p>
       <ul class="custom-media">
       <li class="media list-group-item media p-4">
       <img class="media-object mr-3 align-self-start rounded img- 
       thumbnail" src="http://placehold.it/80x80/bada55">

       <div class="media-body">
       <div class="media-heading"> 
       <p class="lead mb-1"><em>John Doe</em>
       <span class="float-right"><i class="fa fa-heart text-faded- 
       green"></i> <i class="fa fa-twitter text-faded-green"></i> <i  
       class="fa fa-facebook text-faded-green"></i></span>
       </p>
       <time class="badge badge-faded-green mb-1" datetime="2017-02-17  
       T10:10">7 am last week</time>
       </div>
       <p>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis  
       tempore culpa voluptate quos laborum laudantium, quas dolore  
       fuga temporibus inventore rerum aliquid voluptatum! Omnis minus  
       consequuntur mollitia impedit cumque aliquam porro expedita, nam  
       assumenda repellat!
       </p>
       <img class="media-body-inline-img img-fluid img-thumbnail mt-3  
       mb-4" src="http://placehold.it/800x400/eeeeee/aaaaaa/&text=►">
       <ul class="custom-media">
       <li class="media">
       <img class="media-object mr-3 align-self-start rounded"  
       src="http://placehold.it/60x60/bada55">
       <div class="media-body">
       <p class="lead-small"><em>Jane Doe</em>
       <span class="float-right">
       <a href="#" id="comment-3-like"><i class="fa fa-heart text- 
       faded-green"></i></a>
       <a href="#" id="comment-3-tweet"><i class="fa fa-twitter text- 
       faded-green"></i></a>
       <a href="#" id="comment-3-add-to-fb"><i class="fa fa-facebook  
       text-faded-green"></i></a>
       </span>
       </p>
       <time class="badge badge-faded-green mb-1" datetime="2017-02-17  
       T10:10">3 pm, two days ago</time>
       <div id="custom-alert-3-like"></div>
       <div id="custom-alert-3-tweet"></div>
       <div id="custom-alert-3-facebook"></div>
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut  
       placeat quas facilis labore, repellendus!</p>
       </div>
       </li>
       </ul>
       </div>
       </li>
       </ul>
      </div>

1. Paste the following code to main-03-02.scss:

      .bg-faded-green {
       background: rgba(80, 134, 67, 0.04);
      }
      .badge-faded-green {
       background: rgba(80, 134, 67, 0.14);
       color: #5cb85c!important;
       border: 1px solid rgba(80, 134, 67, 0.24);
      }
      .text-faded-green {
       color: rgba(80, 134, 67, 0.34);;
      }
      .text-faded-green:hover, .text-faded-green:focus {
       color: rgba(80, 134, 67, 0.64);
       cursor: pointer;
      }
      .lead-small {
       font-size: 1.14rem;
       margin-bottom: .25rem;
       font-weight: 300;
      }

      @media (min-width: 48em) {
       .container {
       max-width: 46rem;
       }
      }
      ul.custom-media {
       -webkit-padding-start: 4px;
       padding-left: 0 !important;
      }
      .alert-twitter {
       background-color: rgba(29, 161, 242, .25);
       border-color: rgba(29, 161, 242, .50);
       color: rgba(29, 161, 242, .90);
      }
      .alert-facebook {
       background-color: rgba(66, 103, 178, 0.25);
       border-color: rgba(66, 103, 178, 0.50);
       color: rgba(66, 103, 178, 0.90); 
      }

1. In main.scss, uncomment the @import "main-03-02.scss" line.
2. Add the following <script> at the bottom of app/partial/_js.ejs:

      <script>
       $('#comment-like').on("click", function (e) {
       e.preventDefault();
       $('#custom-alert-like').hide().html('<div class="alert alert- 
       success alert-dismissible fade show mt-3" role="alert"><button  
       type="button" class="close" data-dismiss="alert" aria- 
       label="Close"><span aria-hidden="true">&times;</span></button> 
       <strong>You have liked this comment!</strong> 
       </div>').fadeIn(800);
       });
       $('#comment-tweet').on("click", function (e) {
       e.preventDefault();
       $('#custom-alert-tweet').hide().html('<div class="alert alert-  
       twitter alert-dismissible fade show mt-3" role="alert"><button  
       type="button" class="close" data-dismiss="alert" aria- 
       label="Close"><span aria-hidden="true">&times;</span></button>  
       <strong>You have tweeted this comment!</strong> 
       </div>').fadeIn(800);
       });
       $('#comment-add-to-fb').on("click", function (e) {
       e.preventDefault();
       $('#custom-alert-facebook').hide().html('<div class="alert  
       alert-facebook alert-dismissible fade show mt-3" role="alert">     
       <button type="button" class="close" data-dismiss="alert" aria- 
       label="Close"><span aria-hidden="true">&times;</span></button> 
       <strong>You have shared this comment on Facebook!</strong> 
       </div>').fadeIn(800);
       });
      </script>

1. Run grunt sass and grunt copy. In your browser, navigate to localhost:9000/recipe2 and inspect the page. Click on the three icons on the right from Jane Doe's comment. You should see alerts popping up, powered by jquery code from step 4.