A Simple application requested by family member for easier classroom management. This App allows the user to create a interactble schedule ( usage designed for a Classroom ), also allowing them to import small pictures into the activity they are creating!
Here is a fun interactable web app that will allow the specific user to quickly create classrooms events with icons or small photos and will all save to local Storage. It uses a draggable Box feature to move around the created cards for the kids to move and interact with on a smart board!
• Start by going to the website => Click Here! • Enter in a Activity name in the first form box on the top right. • Enter in an estimated amount of time or a set time ( 30 minutes or 10:00am - 11:00am ). • Enter in if a staff member is on a break around this time. • The user can optionally choose a image ( about 1kb max in size) to associate the activity with, other it will default to hard-coded image. • Click Add Activity to generate a small card with all the details inputted from the form menu. • The user can have as many activites as they would like, the page will grow with the content. • The user can then drag around the Activity Card to place in "Current Activity" box, when approiate, as well as the "All Done" box. • The "Hide Menu" button will disable the form menu, keeping it hidden so the kids dont get distracted or play with it. • The "Delete All Activities" will remove all activities and photos from the browsers local storage. • The "Reset Positions" button will reset all the cards to the default position on the screen ( reverts them to the same order as they were created)
Decided to try out more react components and create a front-end application that was quick and easy to use and load. I also made this mobile responsive so that any other of the Para-educators or Subsitutes have an easy access to the generic schedule of the classroom.
Mainly used React and React-draggable component. I oringinally was attempting to get the Activity Cards to be craggable via CSS but react may posing some complications on how vanilla CSS works in react. Then it was Deployed to Github pages.
Deployed Website Link Click Here!
Using MIT License Check it here!
Creator- Kyle Feldman - LinkedIn Profile Link
- Functionality to add or remove Acitivity boxes ( both all and individuals )
- -( added 4/27/2023)
- Small little animation when button is moved into "All Done" section of the page
- Wanted to add hide button for create card component
- -(Done! 5/1/2023)
- Functionality to color code them?
- Client requested option for images option in activity card creation
- -( added 5/16/2023)