Before starting unit 6 I went back to do some JavaScript syntax reading and some more tutorials on w3schools website.

In unit 6 I learn about jQuery libraries, which is a breath of fresh air when you want to animate your webpages. You can create animation that makes your elements fly around in your page and it is quite fun to work with.

 I was able to understand more about UNIT 5 JavaScript syntax whilst using the libraries.

 I took the opportunity in this unit to learn more about the syntax in JavaScript and reimplemented my JavaScript code from unit 5 using a class and get/set methods by setting my variables name, email and message to element ID’s

I also added a hover effect for the the toggle menu in the header to make it more easy to identify when a user comes to the website.

 I reorganized my CSS commenting as well. Much easier to know what is where for later modifications.

 You can look at the jQuery API documentation if you want to learn more about those methods. All you need to do is to type jquery api in google and it should come as the first search result. Just type the name of the method you want in the search bar it pops out right away! At least it did for me.

 I learned that you can use jQuery to use CSS properties within the same line of code. It helps when creating effects like setting opacity for example or any other selector in your DOM.

 You can use basic selector to select any element in your document and manipulate it with your code. I also learned that you could manipulate all position of your elements using jQuery, but I left it as is. This is for another learning project.

 For example: $(‘.div’) if it’s a class or (‘#div’) if you use id or even just the element name but then you have to change the way you access specific elements in your DOM. It lets you manipulate your elements and use methods from the library. I personally used the hide/show method to create a box opening effect from left to rightdown for the “ recent reviews div” and right to leftdown for the “news div”. Sine the CSS files is set to “float=”left” to recent reviews div class and right for the news class. It naturally flows from left to right or right to left when using the method hide/show.

 In order to prevent text position distortion as the animation occur, I added the delay() and slideDown() method so once the content window and the text is completely load ,it starts to appear (slide down) at the box removing the weird effect I had before implementing that delay(). You can set the milliseconds you want the animation to take and adjust to your liking to create the right effect relationship between your animations.

 I added the same effect to my other pages that have those with visible green content boxes. Creating a better feel to the site. As for the box with static content (no scroll bar) I used the fadeIn() to make the text slowly appear. Same thing for the header with the menu it changes the feeling you get when you enter the site and fix some issues with text and image loading effect.

 I added the same type of coding effects for each page choosing different selectors with jQuery. It changed the site completely. It is like opening a gift now and uncovering a veil.

 I tried as much as possible to follow the unit1 personas in order to please them if they were to come to the website. I still have to work on the part where if it were a phone or a tablet the design of the site still lets you see the reviews. Things are still straight to the point, when you enter the site it grows on you and you get access to the specificity of the products through the reviews. There will not be any ads or pop pups to this site whatsoever.