MET Homework

Today on 11/24/2019, I went to the Metropolitan Museum of Art to find a piece of art to do this reflection journal about. The art I decided to choose was called the "Tea Bowl with Rising Sun and Crane" made by the artist Eiraku Hozen (Image Below). The art is a bowl with a crane flying behind the sun. It is made out of gold, silver, and polychrome enamels. The art piece was made during the mid-19th century in Japan. The colors used are red, white, black, yellow, and dark green. The use of negative space and lighting helps draw attention to the crane at the center top of the sun.

Metropolitan Museum of Art Website: https://www.metmuseum.org/

Image:

Tea Bowl with Rising Sun and Crane by Eiraku Hozen

Lab 6 JQ Stop

In this lab, I recreated Lab 5 and added stop buttons to stop the animations of the animated square. To do this, I copied the code from Lab 5 and pasted it into the files of Lab 6. After that, I typed in <button> tags in the HTML file inside the div with an id="secBack". I typed inside for the first <button> tags, Stop Current Animation with an id="stopCurrentAnimation". The second <button> tags had an id="stopAllAnimation" that said Stop All Animations. The last <button> tags had and id="skipAnimations" that read Skip Animations. In the CSS, I added cursor: pointer; inside the button CSS. In the JavaScript, I typed in code that makes the added buttons function successfully. For the Stop Current Animation button, I typed in $("#stopCurrentAnimation").click(function() { var square = $("#square"); square.stop(); });. This piece of code gets the blue square on the screen and makes the animation stop when the button is pressed. For the Stop All Animations button, I typed in $("#stopAllAnimation").click(function() { var square = $("#square"); square.stop(true, false); });. This piece of code gets the blue square on the screen and makes all animations stop animating when the button is clicked. The Skip Animations button lastly has the code,  $("#skipAnimations").click(function() { var square = $("#square"); square.stop(true, true); });. This piece of code get the square on screen and skips the animations of the square resulting in the end product of the animations. Knowing how to use Jquery stop allows the web designer to create better websites and animations for said websites.

Lab 6: http://techteach.us/Web2020/ZWeiJian/WCP/Labs/Lab_06/Lab_6.html

Fencing Tournament

Today on 11/17/2019 at Townsend Harris High School, Flushing NYC I competed in a fencing tournament. I went there by walking in the bitter cold because I thought the bus would take too long. When I arrived during 8:35 am, I got changed and got into my fencing gear. I went into the gymnasium of the school where about 100 foil and epee fencers combined were getting ready to participate in the tournament. I met with my team (consisting of 2 foil and 1 epee) and began to warm up and practice. After that, the tournament started the pools. All fencers looked at sheets on the walls to begin going to that assigned spot. My foil teammate went up first and fenced with speed and vigor. He won at least one bout. I was to fence later in foil. After a while, my epee teammate got called in to fence. From what I asked from him, he said he did an average performance for himself. Past 12:00 pm I got called up to fence. The first bout I lost in 1 point for me to 5 points for the opponent. I got a hand injury in the first bout because I placed my left hand (non-fencing hand) across on my back, so my opponent had hit my hand with his fencing blade during the attack. I got bandaged though and continued on with the tourney. The second bout I won with 5 points for me and 4 points for my opponent. The third bout I lost with 1 point for me and 5 points for the opponent The fourth bout I won with 5 points for me and 1 point for my opponent. In the end, I did not make it past pools as I did not place above 24th place. I did however place 32nd place out of probably 52 foil fencers. I left the tournament afterwords tired from this beautiful experience. Thank you to all in the tournament with me. It was a pleasure.

College Fair

Today on 11/12/2019 I went to a college fair to get my CTE credential done. It was called the NACAC - Performing and Visual Arts College Fair at Jacob K. Javits Convention Center
655 West 34th Street New York, NY 10001. I went by train and walked to there for the college fair. Inside the college fair, there were many colleges that had booths there. A few to name were The Cross, Full Sail University, University of Houston, and KEAN. I spoke with KEAN and got that they have a technological sector in their college. KEAN is mainly a performance arts college as well. Although the people at the booth said that I could major in technology based performance arts. I also gathered that they have a seminar coming soon near the Jacob K. Javits Convention Center
655 West 34th Street New York, NY 10001.

At the college fair standing at a spot

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.

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.