Build an app that lets people express their creativity in a visual format. You can build ANY application you'd like. Whether it's a blank canvas that you can paint on, a photo-editing app, a shared white board -- as long as it fulfills one OR both of the following requirements:
- As a user, I can drag my mouse across the screen to make free-form lines.
- As a user, I can click areas of the screen with my mouse to fill them with a color, texture or pattern.
- Visit the live site above.
- On the top navigation you can find a button labeled Squiggle Now.
- You can also find other call to action buttons to access the drawing app
- Once on the application, you will have your tool menu on the left. This can be toggled open or close.
- Now have fun and let your imagination run wild! (Use your mouse or touchpad, your cursor is your pen/pencil/brush)
Unfortunately we are not mobile friendly at this time. Our application works on desktop browsers only.
- You can either clone the files of this repository or download the files to your local files.
- Utilize VScode extension Live Server by Ritwick Dey to open the draw.html file.
- Must utilize the live server extension as opening the HTML directly to your browser encounters an issue loading the associated Javascript file.
- Now have fun and let your imagination run wild! (Use your mouse or touchpad, your cursor is your pen/pencil/brush)
- VScode Extensions used
- Live SASS compiler by Ritwick Dey for compiling SASS/SCSS to CSS.
- Live Server by Ritwick Dey for live reloading during development.
- Note that this is required to get the application running in development. Will encounter CORS issue when opening HTML file directly in browser.
- Free hand drawing.
- Draw shapes (Rectangles and Circles).
- Create straight lines.
- Erase parts of your drawing board and clear the entire board.
- Choose from four different stroke widths/weight.
- Pick from a wide range of colors using HEX / RGB / HSL.
- Undo your last action.
- Resize your canvas by resizing your browser window.
- Download your drawing to your computer.
We are both front-end developers at the time of this hackathon. Our team approached this by first discussing what technologies we should utilize based on our current technology experience. We then created a list of features we wanted to accomplish. We worked in one single repository and continuously branched from our main branch when building features out. Once completed, we would add, commit and push on to the current branch we were working on and review each other's code before merging. Although we were unable to fully reach our desired goal, we are happy with the final product as we were able to implement most of our planned features.
If you would like to know more about the application or have questions, please reach out to us through one of the following:
My motivation for participating in this hackathon was focused on the experience of working with another developer. I am grateful for the opportunity because it pushed me to learn and apply the knowledge I have gained thus far. The highlight for me was knowing that I can read and understand another developer's logic in approaching a problem and its solution. This also gave me really good practice in refactoring to get both of our codes working efficiently together.
My main motivation in participating was to gain more development experience outside of my projects. The knowledge I gained on working on a team, using Github and utilizing the Canvas API will be helpful for my future projects.