3-jQuery change content and css

3-jQuery change content and css.markdown

3-jQuery change content and css

Forked from glenda drew's Pen target practice complete.

A Pen by Spencer Mathews on CodePen.

License.

index.html

<section>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</section>

script.js

$(document).ready(function() {
  //console.log("ready");

  //change a css property
  $('body').css('background-color', '#65B6D6');

  //add text (cannot include any html)
  $('li:first-child').text('This is text from jQuery');

  //add html element that creates a paragraph with an id of 'listitem2'
  $('li:nth-child(2)').html('<p id="listitem2">This is listitem2</p>');
 
  //add padding for 'listitem2' 
  $('#listitem2').css('padding', '25px');

  //add html to 'listitem2' that includes a <strong> tag
  
  //comment out the above three tasks and use chaining functions to recreate the results

  //add text to the last <li> and then assign a css class of "large"

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

* {
	margin:0px;
	padding:0px;
}
body {
	background-color:white;
	font-family: 'Droid', arial, serif;
	font-size:20px;	
}
section{
	width:4in;
	margin:2in auto 0 auto;
}
ul {
	box-shadow:7px 7px 7px #444;
	border-radius:20px;
}
li {
	list-style-type:none;
	height:1in;
	background-color:#333;
	border-bottom:#CCC 1px solid;
	font-size:16px;
	color:#999;
	padding:12px;
}
li:first-child {
	border-top-left-radius:20px;
	border-top-right-radius:20px;
}
li:last-child {
	border-bottom-left-radius:20px;
	border-bottom-right-radius:20px;
	border-bottom:none;
}
strong {
	color:orange;
}
.large {
	color:magenta;
	font-weight:bold;
	padding:28px 15px;
}