Weekly Work
This one is a Automatic Ball Dispenser.
For week 2 project, I
create a page that has a container where all the 7 balls bounce
around. Ball 0 bounce freely. Balls 1 to 6 bounce in a periodic
cycle off 5 seconds. Each ball has their own turn to move. Also,
there is a cycle that changes the color, speed, size, and shape of
the balls.
Additionally, on the left, you can see a monitor that tells you
which ball has its turn to move.
Better Code Triple Bouncing Balls
Also, I have a cycle of colors implemented
This page shows an image of the famous PacMan displayed on a loop creating an animation effect. I learned that at the MIT Boot Camp Week 4. By myself, I change the code to allow the image to bounce on the limits of the page no matter the width of the page. That creates a reactive effect.
Also, (after 5 seconds) I add my own full CSS shape of a blue ghost. That also bounces to the limits of the page. He always looks toward the direction of his walking, plus, if is near Pacman will look at him.
Do you think that the ghost has bad intentions?
This time was requested to handle a large amount of data.
Look
for all employees that earn more than $100,000.00 and show the top
5.
To accomplish that, I take the code that was shown on the video. Then add my own twist to show the information.
I use a different picture but from the same place. I add a dynamic block that periodically shows the information about the picture. I show the full list of employees on the left, inside of a scrollable area. The code changes the background of every odd number of each name with an almost transparent blue shadow. In the center, I show the requested information.
PacMen Animation.
Here you can add as many pacmen that you want.
An image of a
Pacman is added each time you hit the button.
Then all of
them will bounce around.
The Eyes that fallow you.
Move the mouse around.
Try to escape if you can!
The Interactive Map
You can zoom or out the map.
Click
on any point.
The map will mark the best route to that the
point.