It Doesn't Do Anything


#1



https://www.codecademy.com/courses/web-beginner-en-v6phg/1/2?curriculum_id=50a3fad8c7a770b5fd0007a1


Both div's are constantly highlighted no matter what I do, but it still lets me pass. The first one div should always be highlighted and the second one alternate between highlighted and not when I click it, but clicking does nothing.


THE HTML
<!DOCTYPE html>
<html>
    <head>
		<title>Highlights</title>
        <link rel='stylesheet' type='text/css' href='stylesheet.css'/>
        <script type='text/javascript' src='script.js'></script>
	</head>
	<body>
        <div id="title" class="highlighted">I'm highlighted!</div>
        <div id="text">Highlight me, too!</div>
	</body>
</html>

THE CSS
#title {
    background-color: #C02942;
    border-radius: 5px;
    text-align: center;
    font-family: Verdana, Arial, Sans-Serif;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

#text {
    background-color: #0B486B;
    border-radius: 5px;
    text-align: center;
    font-family: Vivaldi, Cursive;
    color: #FFFFFF;
    width: 200px;
    height: 25px;
}

.highlighted {
    -webkit-box-shadow: 0 0 8px #FFD700;
    -moz-box-shadow: 0 0 8px #FFD700;
    box-shadow: 0 0 8px #FFD700;
    cursor:pointer;
}

THE JQUERY
$(document).ready(function() {
    $("#text").toggleClass("highlighted");
});


#2

There is your culprit. We need a click event handler.

$(document).ready(function() {
    $("#text").click(function() {
        $(this).toggleClass("highlighted");
    }
});

#5