Lab 3 Complete

Issue #1100

I feel really bad about this lab. I started with little bit of confidence on working on a different issue, which was Issue #1100. But I ended up not being able to solve the issue. I could not find out exactly what I needed to change in the code. I have used the browser inspection to figure it out, but due to lack of experience using it, I could not pin point the exact area in the code where I had to add or edit.

Issue #1722
Due to this, I decided to work on a different issue. This issue was about changing the html element's fade/refade transition time when a user hover overs an icon. To do this, I used the same approach I used for issue 1100. Used the inspector to locate the folders that contained the CSS code for each icon used in html. Then I tried to break the code by figuring out what each classes and elements did. I also had to understand what the CSS specific does did. Then I played around with the code by changing numbers, moving transition class to elements that may or may not require. After, I looked at the code carefully, and found part of the code that holds the actual transition time.

/* Transition time for hover effects */
@transitionTime: 0.15s;

.transition {
  -webkit-transition: @transitionTime;
  -moz-transition: @transitionTime;
  -ms-transition: @transitionTime;
  -o-transition: @transitionTime;
  transition: @transitionTime;
}

.transition-only-opacity {
  -webkit-transition: opacity @transitionTime ease-in-out;
  -moz-transition: opacity @transitionTime ease-in-out;
  -ms-transition: opacity @transitionTime ease-in-out;
  -o-transition: opacity @transitionTime ease-in-out;
  transition: opacity @transitionTime ease-in-out;
}

Then I came up with the idea to simply add the transition class into appropriate CSS element that required for the animation to occur. Now all I need to do in the end is to change the numbers on both CSS files to change the transition time to the developer's preference.