JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<div id="maincontainer">
  <h3>
    My name is Chris
  </h3>

  <h4>
    This is an h4
  </h4>
  <div>
    <p>
      I am excited to teach another session of <a target="_blank" href="https://wagner.nyu.edu/education/courses/advanced-gis-interactive-web-mapping-and-spatial-data-visualization">Interactive Web Mapping</a>.
    </p>
    <p>
      Here is another paragraph
    </p>
  </div>

  <div class="logo-image-container">
    <img class="logo-image" src="https://hoopdirt.com/wp-content/uploads/2018/04/nyu-logo.jpg" />
  </div>


  <button id="hide-image">
    Click me to toggle the image
  </button>
</div>

CSS

html {
  background-color: Dodgerblue;
  font-family: sans-serif;
}

#maincontainer {
  background-color: #228B22;
  padding: 15px;
}

.logo-image {
  width: 200px;
}

.logo-image-container {
  text-align: center;
}

JavaScript

let visible = true

$('#hide-image').on('click', function() {
	if (visible === true) {
   	$('.logo-image').css('opacity', 0)
    visible = false
  } else {
    $('.logo-image').css('opacity', 1)
    visible = true
  }
})