Inspiration
I have a lot of plants in my room! Most of them are succulants but either way its hard to keep track of when I need to water them. So this was inspired by them.
What it does
This program is a little window into my dorm garden. It displays some of my plants and has infomation on when I need to water them. When I need to water them is displays a little drop above them. This also keeps track of their names so that if I forget, I can just hover over the plant.
How we built it
I used glitch because that the only way I know how to use javascript and probably my only foundation that I actually had for this project. I then started off by importing a past javascript file that I wrote as an example/ scelatin I could refer to becaus I forgot syntax for javascript. I then drew up a bunch of plants as well as the background on procreate. After I drew the plants I uploaded the images into the project assigning them asll to variables. I then did a lot of reasearch on how I could make this project easily changable without having dive into the code wach time. I also wanted these changes to be perminate. So with this I decided to use a csv file. I spent an unfathonable time trying to figure out how to import my csv file and actually integrate its data into the code. After I was sure all the data was uploaded, I started to create a class and other functions in parallel. This class was for all of the plants, so that I didn't have to display all of them seperatly. After I created this class I perfected my other functions which interacted with the class to displayed which plants need to be watered as well as there names.
Challenges we ran into
A challenge that I ran into is that I have only worked with javascript for a little less of month, and that was August. So it was hard to remember syntax and how a lot of the cammands worked. In general I didn't actually know a lot of the functions that javascript was capable of and so to overcome this I spend a lot of time relearning the language and looking at how different functions worked such as csv files into tables. Another challenge I ran into was time managment. Due to my weekend classes, I wasn't able to pour my time away onto this project. So managing my time was difficult from drawing up the images to learning how to code again. Somthing that made this even more challenging was how time consuming debigging is. I spend over three hours debugging various things and most of the time it was just simple mistakes like uncommenting something or forgeting to call a function.
Accomplishments that we're proud of
I wanted to make it so that this program could be generated from past data so that I wouldn't have to insert data every time I opened the program. So I learned how to use a csv file so that everything could be preuploaded and saved onto that file. I am also really proud of the art that I created for this project because it was made on a time crunch and all by hand. My top accomplishment was all that I was able to do in such a short amount of time. This was my very first hackathon and so I am so proud of all the small challenges that I had to overcome.
What we learned
I learned that I really like javascript becasue its a lot easier to create a user interface. All of the art was had drawn for this challenge which was really time consuming, but Im really glad that I did it. I also learned a lot about javascript that I had no known before, like the ways that it can interact with data. One really big thing that I learned is that it is very similar to both python and c++. This made it a bit easier. I am super happy that I dove into an uncharded zone for myself and chose javascript for this project.
What's next for My Little Garden
Whats next? I am planning on adding apon my little garden. I want to make it so that I can create a plant in the project itself and then save its data onto the csv file. I aslo want to make it so that the information on the csv file can all be displayed in the program, but in a different tab.
Built With
- glitch
- html5
- javascript
- procreate
Log in or sign up for Devpost to join the conversation.