Sunday, November 3, 2019
lab 5 JQuery Animate
In this lab, I built a webpage that allowed the user to manipulate a square on screen. Firstly, I created new HTML, CSS, and Javascript files through Dreamweaver. Dreamweaver already gave my the basic code for my HTML document which had <html>, <head>, <body>, <meta>, and <title> tags. I inserted <script> and <link> tags to link the CSS and JavaScript files to the HTML file. Inside the <body> tags, I typed in <div> tags with id="content" which had CSS of width: 100%; height: auto; and text-align: center; to align the content inside center and make it responsive. Inside the <div> tags with id="content", I typed in 3 divs. The first <div> tags has an id="firstBack" which has <div> tags inside with id="square". After <div> tags with id="firstBack", I typed in <div> tags with id="secBack" with buttons with various ids inside. The CSS for "firstBack" and "secBack"are similar with width: 100%; height: 100%; position: absolute; and padding: 25px; "firstBack has a background color of blue while "secBack" has a background color of "black" and margin-top: 20%; "square" has the CSS of background-color: aqua; width: 200px; height: 200px; position: relative; border-width: thin; border-color: black; border-style: solid; border-radius: 0%; margin: 0 auto; left: 0; right: 0; opacity: 1; z-index: 2; For my Javascript File, I used Jquery to insert .animate to manipulate the square on the webpage and allow the user to command the square to do certain actions.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment