From the class Code as a Liberal Art · Spring 2022

Topic Filter Boxes

Unit 3, Tutorial 3

boxes.html

<!DOCTYPE html>
<html>
<head>
  <title>Adding interaction</title>
  <link rel="stylesheet" href="css/boxes-style.css">

  <script
   src="https://code.jquery.com/jquery-3.6.0.js"
   integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk="
    crossorigin="anonymous"></script><script src="js/boxes-interaction.js"></script>
</head>

<body>

  <div class="header">

  </div>
  Select a topic:
  <span class="select-theme1">theme 1</span>,
  <span class="select-theme2">theme 2</span>,
  <span class="select-theme3">theme 3</span>.
  <div>

    <div class="box theme1">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla
      sed turpis molestie sem blandit vehicula. Aliquam pellentesque
      elit orci, eget posuere purus cursus at. Maecenas ut est enim.
    </div>

    <div class="box theme2">
      Curabitur blandit diam ut magna porttitor imperdiet. Sed non
      lorem id massa varius tempus in at nisi. In consequat, ipsum vel
      commodo venenatis.
    </div>

    <div class="box theme3">
      Phasellus eros lacus, tristique at vehicula eu, tristique non
      justo. Sed et dignissim diam, nec congue diam. Fusce viverra
      quam pellentesque.
    </div>

    <div class="box theme3">
      Suspendisse blandit id odio quis venenatis. Aliquam fermentum
      turpis quis urna tristique finibus. Ut vitae metus ac sem
      bibendum dapibus eget vitae odio. Nam vel turpis libero.
    </div>

    <div class="box theme2">
      Proin augue ipsum, facilisis vitae eleifend at, dapibus at
      risus. Nullam fermentum dolor purus, sagittis tempus odio
      ultricies non.
    </div>

    <div class="box theme1">
      Sed pulvinar mauris eget odio elementum fringilla. Suspendisse
      felis tortor, egestas ac sapien quis, vulputate pharetra
      enim. Ut mattis lacus nec ornare condimentum.
    </div>

    <div class="box theme2">
      Integer viverra at urna vitae dictum. Aenean feugiat, metus in
      consequat dapibus, ligula turpis sagittis erat, blandit aliquam
      nibh lectus sed tellus.
    </div>

    <div class="box theme1">
      Vestibulum vel nibh nec nisl accumsan faucibus a ac
      ligula. Nullam non tortor at augue euismod aliquam. Donec magna
      metus, accumsan sed luctus eu, semper aliquet justo.
    </div>

    <div class="box theme3">
      In vestibulum arcu at hendrerit scelerisque. Ut orci urna,
      egestas in scelerisque in, euismod nec ex. In vel libero
      est. Nullam consequat, leo non faucibus sagittis, arcu est
      pellentesque erat.
    </div>

  </div>

</body>

</html>

css/boxes-style.css

body {
    width: 600px;
    margin: auto;
}

div {
    /* uncomment this to see all box borders */
    /* border: solid 1px red; */
}

.header {
    width: 100%;
    height: 100px;
}

.box {
    width: 150px;
    height: 150px;
    float: left;
    margin: 5px;
    padding: 5px;
}

js/boxes-interaction.js

$(document).ready(function(){

  $(".select-theme1").click(function(){
    $(".theme1").toggle();
  });

});

article.html

<!DOCTYPE html>
<html>
<head>
  <title>Adding interaction</title>
  <link rel="stylesheet" href="">
</head>

<body>

  <div>
  </div>

  <div>
  </div>
  
</body>

</html>