Sunday, November 3, 2019
Lab 4 Ninja Objects
In this lab, I created a webpage that used Javascript objects to create actions in the webpage. First I created a new HTML, CSS, and JavaScript document. Secondly, I typed in my HTML code. Dreamweaver already gave me <html>, <head>, <body>, <meta>, and <title> tags. I typed in <link> and <src> tags to link my CSS and JavaScript file to the HTML document. Inside the <body> tags, I typed <div> tags with id="header". The header id has text-align: center; for css to center the <h1>, <h2>, and <h3> tags which display the number of the lab, my name, and the date that it was first made. After the <div> tags with id="header", I created another <div> tags with id="content". The content id has min-width: 100%; min-height: 100%; and text-align: center; to center the content inside it and make it responsive. Inside the <div> tags with id="content", I have <div> tags with id="imageContainer". The id has width: 100%; height: auto; and text-align: center; to make the images inside the <div> tags center and responsive. Now to put the images inside the webpage, I used <img> tags with id="ninjaStanceNormal", "ninjaStanceSlice", "ninjaStanceKick", and "ninjaStanceDodge". The CSS for it was display: none; margin-left: auto; margin-right: auto; and various min and max width and height on the picture so that every image has similar proportions, centered, and weren't showing initially. I placed in a few <br> tags after <div> tags with id="imageContainer" to make a line break. Next, I typed in <button> tags to place a button that says "description". After that, I placed in multiple <br> and <p> tags that had ids and class="hiddenMessage" which had CSS to display: none;. Afterwords, I typed in <button>, <audio>, and <source> tags which created sounds when the button is pressed. Thirdly, I typed in code for my Javascript file which made the website functional. First, I typed in arrays which stored objects to use for my functions. In my functions, I displayed the pictures whenever a certain button is pressed. I displayed text whenever certain buttons were pressed. Also, I displayed prompts that the user must give to get a description for their ninja, whenever the user pressed the button that says, "description". Knowing how to use Javascript Objects is useful for a web designer since it can enable the web designer to make better functionality in their websites.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment