To see this application live on the web go to: https://raimoncoding.github.io/animated_cars_webapp/
This web application allows you to animate cars on a canvas using JavaScript. You can control the animation of the cars, change their speed, and reset their positions. It's a fun and interactive way to play with animations.
- Start all cars simultaneously.
- Start cars one by one in sequence.
- Reset the cars to their initial positions.
- Adjust the speed of the cars using a slider.
To run this web application locally, follow these steps:
-
Clone this repository to your local machine.
git clone https://github.com/raimoncoding/animated_cars_webapp.git
Open the index.html file in your web browser.
Use the control buttons and the speed slider to interact with the animation.
Usage Click the "Start All Cars" button to start all cars simultaneously. Click the "Start Cars One by One" button to start cars one by one in sequence. Click the "Reset Cars" button to reset the cars to their initial positions. Use the "Cars Speed" slider to adjust the speed of the cars. Dependencies This web application does not have any external dependencies. It uses HTML, CSS, and JavaScript to create the animation.
Contributing If you'd like to contribute to this project, feel free to fork the repository and submit a pull request with your changes.
License This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments This project was inspired by a coding challenge and serves as a fun way to learn about animations in web development.
Main Topics Covered This project covers several key topics in web development:
HTML5 Canvas for drawing and animations. JavaScript for creating interactive animations. CSS for styling the web application. Event handling and DOM manipulation. Use of radio buttons and sliders for user interaction.