CSS
/*heading style*/ h1 { text-align:center } /*ul style*/ ul { padding:20px; border:1px solid grey; box-shadow:0px 0px 10px rgba(50,50,50,.5); } /*li style*/ li { margin:10px; padding:10px; color:white; background:rgba(50,50,50,.4); width:150px; text-align:center; border:1px solid skyblue; box-shadow:0px 5px 5px rgba(50,50,50,.6); cursor:pointer; } li:hover { background:dodgerblue; border-radius:10px; } li:active { background:indianred; }
JavaScript
/*writes writes container for list*/ var mywriter="
"; var i = 0; var numberOfListBlocks = 3; while (i < numberOfListBlocks) { mywriter += "
Java Paragraph 0"+i+"
"; i++; } mywriter +="
"; /* writes the block of lists */ $('body').append(mywriter); /* edits the new list style */ $('.myAddedElements li').css('color','ivory'); if (i > 3) { $('.myAddedElements li').css('float','left'); $('.myAddedElements').css('height','100%'); } $('.myAddedElements li').on('click',clickFunction) /* hides the list on click */ function clickFunction () { $(this).hide(); }
My Web Page
Go
HTML
HEADING
PARAGRAPH 1
PARAGRAPH 2