The final result
A few images of our website
The link to go to my website :
The link of the Github-Pages:
Description of the project
For our first practical assignment in "Reactive and Animated Web Interfaces," I worked with a classmate. The project involved developing an interactive task management application with a custom design.
The site included an input bar to add tasks to a list. Once a task was added, the user had two options: either mark the task as completed, changing its color to indicate its status, or delete it. At the bottom of the page, a text displayed the number of active tasks. We also added three filter buttons: "All," "Completed," and "Active." These buttons allowed the user to view only completed tasks or those that were still pending.
Another key feature was a button to delete all tasks at once. Finally, to meet course requirements, we ensured the site was responsive for both mobile and desktop views.
Publication date
This project was completed on April 8th 2024.
Role(s) in the project
In the "Interfaces web réactives et animées" course in Multimedia Integration Techniques, we had to complete a project either individually or in pairs on a task list application. I teamed up with a girl from my class.
Here were the roles of each team member:
- Alexander Rankov : I was mainly responsible for all the programming using React. I implemented various site functionalities, including the input bar for adding tasks and the options to check tasks as completed or delete them. I also coded the filter buttons: "all," "completed," and "active," which allow users to navigate between different task categories.
- Gabrielle Pelletier : She handled all the site design, managing the interface layout and color choices to ensure the site’s aesthetic aligned well with the application's functionalities.
Software used
For my first web project, I used Visual Studio Code. This software allowed me to code in three languages: HTML5, JSX, and SASS.
Programming languages used
The project was developed using React. We primarily used three languages to structure our site:
HTML5 : Used for the basic structure of the site, defining essential elements on the page such as the input bar, task list, and interaction buttons.
JSX : This enabled us to write React components that combine HTML and JavaScript in the same file, making it easier to manage the site's interactivity and keep the code more readable.
SASS : Used for more efficient styling, particularly with features like variables, which helped make the site adaptable to different devices.