Fish JQ Practice

by vcchavez_uri

HTML

<div id="divmain">
  <h1> The Fish Web Site </h1>

  <h5 id="para1homepage"> Welcome to the Fish Web Site. Everything you want to know about fish is in this web site. </h5>

  <div>
    <a> <img id="barracuda" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Barracuda_laban.jpg/250px-Barracuda_laban.jpg"></a>
  </div>
  <button id="changePicBtn">
    Click me to change the picture above!
  </button>
</div>

<div id="divbass">

  <h2> This is a section on Bass fish </h2>

  <div class="center">
    <button id="changeTagsBtn">
      Click me to change the color of all paragraphs!
    </button>
  </div>

  <p class="paragraph center" id="tinyParagraph"> Bass fish live in lakes. The word for fish in Latin is <i>Pisces</i>
    <br><br>
    <button id="removeParagraphBtn">
      Click me to make this paragraph disappear!
    </button>
  </p>

  <p class="paragraph"> A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate
    animals that lack limbs with digits. Included in this definition are the living hagfish, lampreys, and cartilaginous and bony fish,
    as well as various extinct related groups. Most fish are ectothermic ("cold-blooded"), allowing their body temperatures to
    vary as ambient temperatures change, though some of the large active swimmers like white shark and tuna can hold a higher
    core temperature. Fish are abundant in most bodies of water. They can be found in nearly all aquatic environments, from high
    mountain streams (e.g., char and gudgeon) to the abyssal and even hadal depths of the deepest oceans (e.g., gulpers and
    anglerfish). At 32,000 species, fish exhibit greater species diversity than any other group of vertebrates. </p>

  <p id="para4homepage"> A fish is any member of a paraphyletic group of organisms that consist of all gill-bearing aquatic craniate
    animals that lack limbs with digits. Included in this definition are the living <span...

CSS

body {
  color: green;
  font-family: Verdana, Arial, Geneva;
  font-weight: normal;
  background-color: #ffcf79;
  font-size: 25px;
}

h1 {
  color: green;
  text-decoration: underline;
  font-size: 150%;
  text-align: center;
}

h2 {
  color: green;
  text-decoration: underline;
  font-size: 1.2em;
  text-align: center;
}

h3 {
  color: green;
  text-decoration: underline;
}

#para1homepage {
  color: blue;
  text-decoration: none;
}

.center {
  text-align: center;
}

p.paragraph {
  font-size: 15px;
  line-height: 1.5em;
  background-color: #e5e4d7;
  padding: 20px 20px 20px 20px;
  border: black 2px solid;
  background-image: url(clouds.gif);
  border-radius: 10px;
}

#para4homepage {
  font-size: 15px;
  line-height: 1.5em;
  background-color: #e5e4d7;
  padding: 20px;
  border-color: #296A64;
  border-width: thick;
  border-style: ridge;
  margin: 20px;
  margin-top: 50px;
  margin-left: 200px;
}

#divmain {
  color: black;
  text-align: center;
}

#divbass {
  color: black;
}

.divcontent {
  color: black;
}

.highlight {
  background-color: #ffff00;
}

a:link {
  color: blue;
}

a:visited {
  color: #8C8c9D;
}

a:hover {
  color: #F15A51;
}

JavaScript

$( document ).ready(function() {
 
	$( "#changePicBtn" ).click(function( event ) {
  	//write the code to change the picture to the one linked at:
  	//https://upload.wikimedia.org/wikipedia/commons/8/81/Great_Barracuda_off_the_Netherland_Antilles.jpg

		//change the width of the image to be 200px;
    
	});
  
  $( "#changeTagsBtn" ).click(function( event ) {
  	//write the code to change the color of all p tags to orange
    
	});
  
  $( "#removeParagraphBtn" ).click(function( event ) {
  	//write the code to remove the paragraph where this button is located
    
	});
 
});