JSFiddle - React, Tailwind, and code Playground

by cwhong

HTML

<h1>
  Hello, World!
</h1>
<h3>
  Hello, World!
</h3>
<button class="green-button">
  Green
</button>

<button class="purple-button">
  Purple
</button>

<button class="pink-button">
  Pink
</button>
<!-- i can leave a note for future me about what I am doing here -->

<div id="welcome-message">
  <p>
    This is a p tag with no class!
  </p>
  <p class="green-text">
  Welcome to web mapping 2021! The instructor is <a href="https://chriswhong.com">Chris Whong</a>.
  </p>

  <img src="https://pbs.twimg.com/profile_images/1218247655597453313/UI4G4l9c_200x200.jpg" />
  <p class="green-text">
    Web Development is fun!
  </p>
</div>

CSS

h1 {
  font-family: sans-serif;
}

p {
  color: orange;
  font-size: 20px;
}

.green-text {
  color: green;
  font-size: 11px;
}

#welcome-message {
  background-color: #e3e3e3;
  padding: 15px;
}

img {
  display: block;
  margin-left: auto;
  margin-right: auto; 
}

/* selector {
  rulename: value;
} */

JavaScript

$('.green-button').on('click', function() {
	$('#welcome-message').css('background-color', 'green')
})

$('.purple-button').on('click', function() {
	$('#welcome-message').css('background-color', 'purple')
})

$('.pink-button').on('click', function() {
	$('#welcome-message').css('background-color', 'pink')
})