In this lab, lab 16, I had to make a web page about a teacher that inspires me and apply a j query to the text that applies to the text and centers the box/div. A teacher that inspires me is my junior year English teacher, Mrs. Hyde. I wrote two paragraphs about what I learned in her class and how meaningful the experience was for me. Another thing I wrote about was how what I learned will help me in the future. Now for the code that I used. This is the first piece of code that I used:
| <div class="box"> |
| <style> |
| body { |
| background-color: #33C; |
| } |
| |
| .box { |
| width: 500px; |
| background-color:#960; |
| padding: 2em; |
| position: relative; |
| } |
| |
| p { |
| font:"Comic Sans MS", cursive; |
| color: #99C; |
| } |
| |
| button { |
| background-color:#009; |
| color:#CC0; |
| display:compact; |
| width: 100px; |
| height: 100px; |
| } |
| |
| </style>
|
This code creates the box with the tag "<div class="box">", following that is my CSS. My CSS consists of a background color for the body, box width, background color for the box, relative position. The font color is #99C and the font for the text in the box is "Comic Sans MS". The CSS also contains background color, text color, display type, width and height size for the buttons.
Here is the next piece of code
| <body background="../../bookshelf background.jpg"> |
|
|
| <h1> Mrs. Hyde</h1> |
| <h2> My Inspiration</h2> |
|
|
| <p>Mrs. Hyde is one of the teachers in my life that has been a great inspiration to me. She has taught me many things, given me the chance to explore many different ways of thinking. In her class I had the opportunity to take part in a socratic seminar and voice my responses on questions she had given previously for homework. She made us follow the three A's: Add, Ask or Argue. Each person has to either add, ask or argue to what the previous person said. |
| </p> |
|
|
| <p> Furthermore, something that I took from this class was specfically the assignments. One assignment inn particular was a 10 page research paper on a topic of my choosing. My topic was regarding American Schools v. Asian and European schools, basically the concept of no child left behind. I wrote about how the US is behind other countries in education and how the statistics show the socio economic status of different families in the US makes a huge difference when it comes to showing how poverty contributes to how good of an education a student gets. |
| </p> |
|
|
|
|
|
|
| <table> |
| <tr> |
|
|
| <td> |
| <p> |
| <button id="inc"> |
| Increase Font Size |
| </button> |
| </p> |
| </td> |
|
|
|
|
| <td> |
| <p> |
| <button id="dec"> |
| Decrease Font Size |
| </button> |
| </p> |
| </td> |
|
|
| <td> |
| <p> |
| <button id="cen"> |
| Center the DIV |
| </button> |
| </p> |
| </td> |
|
|
|
|
| </tr> |
| </table> |
|
|
| <script src="../../jquery-2.1.1 (1).js"></script> |
This code starts with me adding a tag of adding a background of a book shelf, I thought this would appeal since she is an english teacher. Following that, I added two headings for her name and that she is my inspiration. After that, I used <p> tags to add the two paragraphs of content. Lastly I used the table tags for the buttons, within the tables I used <p> tags to organize the text inside and give each button id's so they will be given a specific task to complete. Lastly I connected the lab to the J query.
Here is my last piece of code, the java script
|
| <script> |
| (function() { |
| var box = $('div.box'); |
| w = $(window).width() / 2 - box.outerWidth() / 2, |
| h = $(window).height() / 2 - box.outerHeight() / 2; |
| |
| $('#cen').on('click', function() { |
| box.animate({ |
| 'left': w, |
| 'position' : 'absolute' |
| }) |
| .animate({ |
| 'top' : h |
| }, {duration: 2000, queue: false }); |
| }); |
| |
| |
| |
| |
| $('#inc').on('click', function() { |
| box.animate({ |
| 'font-size': '+=3', |
| 'width': '+=200' |
| }, 1000); |
| }); |
| |
| $('#dec').on('click', function() { |
| box.animate({ |
| 'font-size': '-=3', |
| 'width': '-=200' |
| }, 1000); |
| }); |
| |
| })(); |
| </script> |
| |
This Javascript contains the function for allowing the the lab to be interactive so that when I press the buttons, they actually change in width and height, and can move around the page. There are various tags here varying from window width, window height, outer width and outer height, as well as box. animate that allows the box to be animated. Each set of code applies to each distinct box, especially the code that shows the increase/decrease in font size as well as width. This can be applied to web design in the way that if one were to attempt to make their page interactive and want to add some form of animation using java script using j query this can be possible. I look forward to using these skills in the future.
No comments:
Post a Comment