Code is Broken - Not Sure How to Fix It?

html-css
jquery

#1

I’ve been trying for hours to fix this code. My assignment calls for making it look similar to another code, but no matter how many times I compare my code to the one it’s supposed to look like, it never fixes the problem. I don know what I’ve done wrong.

The main problems with this code are the words ‘Orange, Pink, Green’ are supposed to change to those colors, but they don’t. Also, the images don’t shrink or grow like they’re supposed to.

** HTML**

<!DOCTYPE html>
<html>
<head>
	<title>Boo The Dog</title>
	<!-- Latest compiled and minified CSS -->
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<!-- Linking CSS -->
	<link rel="stylesheet" type="text/css" href="style.css">
	<!-- Linking jQuery -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
	<!-- Linking Google Fonts -->
	<link href='https://fonts.googleapis.com/css?family=Montserrat|Roboto+Slab|Yellowtail' rel='stylesheet' type='text/css'>
</head>
<body>

<div class="container">

	<div class="jumbotron bg-primary text-center">
		<h1>Boo The Dog Fan Page!</h1>
	</div>

	<div class="row">
		
		<div class="col-sm-12">
			<div class="panel panel-primary">
				<div class="panel-heading">News</div>
				<div class="panel-body text-center">
					
					<h4>Never fear! The "Boo The Dog" fanpage has been saved!</h4>
					<p>
						It is vandalized no more! :)
					</p>
				</div>
			</div>
		</div>

		<div class="row">

			<div class="col-sm-6">
				<div class="panel panel-primary">
					<div class="panel-heading">About Boo</div>
					<div class="panel-body">
						<p>
							Boo the dog belongs to a San Francisco-based Facebook employee who created a Facebook page for the dog with a statement "My name is Boo. I am a dog. Life is good." He became popular in October 2010 after singer Ke$ha sent a tweet that she had a new boyfriend, linking to the page. 
						</p>
						<p>
							Chronicle Books, noticing that Boo had 5 million Facebook fans at the time, approached the owner to write a picture book. In August 2011, Boo: The Life of the World's Cutest Dog, written by his owner under pen name J.H. Lee, was published. The book was eventually published in ten languages. A second book followed, Boo: Little Dog in the Big City, as well as a calendar and plans for a cut-out book and additional children's books. He also has his own stuffed animal for kids. His merchandise includes a Gund stuffed animal. Boo was appointed a spokesdog for Virgin America airline, which featured photos of him in an airplane along with advice for people traveling with pets. 
						</p> 
						<p>
							In April 2012, Boo was the subject of a death hoax after #RIPBOO appeared on Facebook. Tweets followed as Gizmodo writer Sam Biddle tweeted Boo had died. 
						</p>
							
						<p>
							It was later confirmed by The Chronicle Book staff that Boo was alive and well. In July 2012, Boo was named the Official Pet Liaison of Virgin America.
						</p>
						<p>	
							Read more at <a href="https://en.wikipedia.org/wiki/Boo_(dog)">Boo's Wikipedia Page.</a>		
						</p>
					</div>
		        </div>
			</div>
		
		<div class="col-sm-6">
			<div class="well text-center">
				<div>
					<img class="img-responsive" src="https://img.buzzfeed.com/buzzfeed-static/static/2015-04/21/16/enhanced/webdr05/enhanced-31550-1429646952-7.jpg">
				</div>
			</div>
		</div>

	</div>

	<br><br>

	<div class="row text-center">

		<div class="col-sm-6">
			<button class="btn" id="boxGrow">Grow</button>
			<button class="btn" id="boxShrink">Shrink</button>
			<br>
			<br>
			<div class="well text-center">
				<img id="box" src="http://petradioshow.com/wp-content/uploads/2015/05/jiff1.jpg">
			</div>
		</div>

			<div class="col-sm-6 text-center">
				<button class="btn" id="textOrange">Orange</button>
				<button class="btn" id="textPink">Pink</button>
				<button class="btn" id="textGreen">Green</button>
				<br>
				<br>
				<div class="well text-center">
					<p id="funText">Boo Rules!</p>
				</div>
			</div>
			
		</div>

	<div class="row">

		<div class="col-sm-6 text-center">
			<button class="btn btn-primary form-control" id="factButton">Random Boo Fact</button>
			<div class="well text-center">
				<div>
					<p id="factText">Click the button for a random Boo fact!</p>
				</div>
			</div>
		</div>

		<div class="col-sm-6">
			<div class="panel panel-primary">
				<div class="panel-heading">List Of Boo's Favorite Things</div>
				<div class="panel-body">
					<ol>
						<li>Dressing Up</li>
						<li>Eating Grass</li>
						<li>Sleeping</li>
						<li>Swimming</li>
						<li>Hiking</li>
					</ol>
				</div>
			</div>
		</div>
	
	</div>

</div>

<!--Linking our JavaScript file -->
<script type="text/javascript" src="errors.js"></script>
</body>
</html>

JAVASCRIPT:

// When the factButton is clicked...
$("#factButton").on("click", function() {
	// We generate a random number between 0 and 5 (the number in the booFacts)
	var number = Math.floor((Math.random() * booFacts.length));
	// We display the fact from the booFacts that is in the random position we just generated.
	$("#factText").text(booFacts[number])
})

// This array holds all of our Boo the Dog facts!
var booFacts = ["Boo is a pomeranian", "Boo's best friend is another pomeranian named Buddy", "Boo the Pomeranian was born on March 16, making him a Pisces", "Boo's favourite food is grass", "Boo has released two books"]

// When the textPink button is pressed...
$("#textPink").on("click", function() {
	// Change funText to pink.
	$("#funText").css("color", "pink")
})

// When the textOrange button is pressed...
$("#textOrange").on("click", function() {
	// Change funText to orange.
	$("#funText").css("color", "orange")
})

// When the textGreen button is pressed...
$("#textGreen").on("click", function() {
	// Change funText to green.
	$("#funText").css("color", "green")
})


// When the boxGrow button is clicked...
$("#boxGrow").on("click", function() {
	// Increase the size of box.
	$("#box").animate({height:"+=35px", width:"+=35px"}, "fast");
})

// When the boxShrink button is clicked...
$("#boxShrink").on("click", function() {
	// Decrease the size of the box.
	$("#box").animate({height:"-=35px", width:"-=35px"}, "fast");
})

#2

I’ve tried your code and it works. I haven’t modified it.

The buttons Grow, Shrink, Orange, Pink and Green all work. Random boo facts also.

Are you sure that your html and js files are located in the same folder?

orange

green


#3

Thanks so much for testing. It’s incredibly embarrassing because I’ve been running it through my browser for hours and it never showed up correctly (thrilled about the nearly two hours of my life I’ll never get back :/) I ran it through Stack Overflow’s system and I saw everything working as it should. Thanks for the tip as well! I’m 100% sure I’ll need that for newer assignments.

I appreciate you taking the time to run my code!


#4

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.