moved these files to 5_effects file

code.html

-<script src = "jquery-3.1.1.js"></script>
-<script src = "code.js"></script>
-
-<div id="dropDown">Click to slide down the option buttons</div>
-<button id = "Move">Move the square!</button>
-<button id = "Hide">Hide the square!</button>
-<button id = "Show">Show the square!</button>
-<button id = "fadeIn">Fade in and out two more squares!</button><br><br><br>
-
-
-<style>
- #dropDown {
-    padding: 5px;
-    text-align: center;
-    background-color: #e5eecc;
-    border: solid 1px #c3c3c3;
-}
-
-#Move {
-    padding: 20px;
-    background-color: #e5eecc;
-    display: none;
-}
-#Hide {
-    padding: 20px;
-    background-color: #e5eecc;
-    display: none;
-}
-#Show {
-    padding: 20px;
-    background-color: #e5eecc;
-    display: none;
-}
-#fadeIn {
-    padding: 20px;
-    background-color: #e5eecc;
-    display: none;
-}
-</style>
-
-<div id = "Styles" style="background:red;height:80px;width:80px;position:absolute;"><br><br><br><br><br>
-<div id="Styles_1" style="width:80px;height:80px;display:none;background-color:blue;"></div><br>
-<div id="Styles_2" style="width:80px;height:80px;display:none;background-color:purple;"></div><br>

code.js

-
-//When the document is uploaded.
-$(document).ready(function(){
-
-  $("#dropDown").click(function(){
-    $("#Move").slideToggle("slow");
-    $("#Hide").slideToggle("slow");
-    $("#Show").slideToggle("slow");
-    $("#fadeIn").slideToggle("slow");
-  });
-
-  //Alligning the square so it would be 250px from the left.
-  $("#Move").click(function(){
-    $("#Styles").animate({
-      left : '250px'
-    });
-  });
-
-//Hiding the square.
-$("#Hide").click(function(){
-  $("#Styles").hide();
-});
-
-//Showing the hidden square
-$("#Show").click(function(){
-  $("#Styles").show();
-});
-
-//Switching two more square in and out
-$("#fadeIn").click(function(){
-  $("#Styles_1").fadeToggle(1000);
-  $("#Styles_2").fadeToggle(1000);
-});
-
-});