Lab 40

-

This lab is titled "Click and Drag". This lab has the click and drag characteristics. It consists of a bunch of tabs with numbers that go from the left or right to navigate through them. The website is shown in the screenshot above.To create the functionality on this website, I first made a bunch of div items in the HTML document. I added CSS to make the number displays look easy to see on any background they were on, which were also added in the CSS. The JavaScript has the click and drag feature, and does this by logging an event 'mousedown' which will allow you to click and drag the numbers across the screen to go forward or backward. 

Comments

Post a Comment

Popular posts from this blog

Difference between 300ppi and 72ppi

-
Image
   When you need to print a picture, you need a 300ppi resolution in order for it to have a high resolution and for it to look professional. When you are inserting a picture in a webpage, you need a 72ppi resolution so it doesn't look too bright. For example, when printing out the two pictures, the one with 300ppi resolution was a good picture because since it had a high resolution, you were able to see the picture clearly as if it was a regular picture and not something that was printed. Compared to the 72ppi resolution, which was too dim and you weren't able to distinguish things very clearly.
Read more

Lab 6 Reflection

-
Image
For lab 6 we had to use what we learned in lab 4 to animate a box in the same way. I t was basically like a redo of lab 5 but with a stop button included. Although, in this lab we had to include a “stop” button which, when pressed, will stop the animation currently in progress. For example, if you clicked on the move animation, originally, the box would move from its initial position to wherever it’s ending position is. With the stop button you can stop the animation halfway through so the box only moves halfway to were it was supposed to be. The set up for this is the same to the lab 4. First, we create the stop button in HTML whilst giving it an ID so that we can call it with a JQuery selector. In your javascript file you add an event listener to the stop button. Then if the button is pressed you use the built in JQuery function “.stop()” which stops the animations.
Read more

CTE Expo

-
Image
CTE expo is a way for communicating to the freshman. As well as to show the freshman what we do in the web design academy. To prepare, we created a board showing off the business cards which is one of the many projects that you do In the first year of the web design academy. I presented my board a few teachers and some students in order to receive their attention.  I was able to convince a few students into joining the web design academy. And I was able to present without surprisingly having a anxiety, hehe. In order to improve, I can include more information about what the academy is about and how it is based on my current experiences. I felt that it went very well and a bit as planned
Read more