WE DID IT

Introducing Colurs

Final Screenshots

Light Mode

Dark Mode

Zen Mode

Figma Design

Light Mode Design

Dark Mode Design

Zen Mode Design

Wireframe Sketch

Overview

Overall, I had fun, I learned that I can rely on my problem solving skills and that I know more than I give myself credit for! I reached out to my community to see if others would like to join me. I partnered with two others, a dev whose been learning frontend development for a year and a designer that was just starting out. I was excited to work with people in varying stages of their learning journey.

Because I had design experience I wanted to help the designer learn more about the design process and the web dev process. I took time to send her resources that I used while learning and explained a devs workflow when creating websites. I was also able to flex my design muscles by acting as app interface designer. I created wireframes from different similar codepens, noted features from each and presented 6 wireframe sketches to the team and a list of features we could possibly implement.

With our dev, we worked more closely together using git, github, and live sharing code to communicate our processes. We were both very much team players and team builders and enjoyed sharing resources back and forth and co-solving problems when either of us got stuck.

Stand out Moments

Fixing the grid

We had an issue with getting the canvas to fit in a grid. This meant that the js for the canvas wasn't functioning properly and the interface looked off. My dev tried to get the canvas and the design to flow without grid but was having difficulties. So without writing over her code, I pulled her code into my local branch, made a copy of her code in my own folder. We started off working with branches but, as mentioned in my first post, setting up and getting comfy with git was more of a hassle than anything. I worked from my branch in the beginning, the we just made changes to the main by creating our own separate folders with copies of the code 😂 I first went through her HTML and divided the code with comments and made sections that closely matched the Figma design I created.

From there I used a resource called Grid Layout It that visualizes CSS Grid areas to help me create the proper grid areas. I used the grid areas and grid template columns that was given and it looked like my design. Success, right? Wrong. The canvas was overflowing from the grid area and I didn't allow for the grid to grow. So I knew I had to do a few things.

1. Make the canvas resize with the parent div
2. Make the grid flexible

I searched youtube on a refresher on making CSS Grid responsive. From that I used grid template columns with auto-fit and a minmax to allow for more flexible sizing. So I could check that off this list.

Then one to issue number one. Getting the canvas to resize with the parent div.

Off to a stuck dev's haven: stackoverflow.

I read of some javascript libraries and jquery. That wasn't what I wanted, I just needed a plain js solution. I tested two solutions: one using CSS to set the canvas and parent div absolute and relative, respectively.

The CSS worked but introduced another bug, the mousedown wasn't calculating the canvas correctly anymore. I was also clued in to the behavior that an overflow would also cause the same offset in mousedown events.

The second setting the innerHeight to the body. JS, I set a variable defining the parent div, changed up the code to set the canvas to the parent div.

After removing the css positions, I noticed the bug was still there. I then searched for ways to track mouse positions in JS. I found a solution that subtracted the parent div and the client window to get a more accurate mousedown drawing.

Zen Mode Implementation

This felt like our hail Mary moment because it was implemented after the due date during the extension time. We had gotten Colurs working with the grid interface. Yay! Dark Mode worked "out the box" sort to speak and we already wrote and coded up our site with zen/distraction free mode as an example!

I revisited the interactive.js from the Day 3 log. It worked! But it worked a lil too well.

So off to google! "How to minimize and maximize divs js." I came across a medium article called Mimicking Bootstrap’s Collapse with Vanilla Javascript.

After compiling the codepen, I crossed my fingers and plugged in the code to our js file and added the collapse title to the divs I wanted to minimize. I put the button with the colors and it worked! I went to see if I could add more buttons and :insert buzzer sounds: the code did not like that. For whatever reason, the button only
worked in that one spot. So without being choosey I left it in and let that be that. I would love to know why the js only worked in that one spot reliably lol But I'm glad we were able to deliver that feature.

Known Issues

• Canvas controls: work only in firefox.
• Firefox custom color picker: To use, click color. Close color picker completely. Click to activate the window. Then the custom color will work.
• Zen mode button: It sticks at times, click out side of button area before re-clicking button.

Features I'd Like to Add

• More brush controls
• More Preset colors
• More reliable zen mode
• Canvas Texture
• Build off of this post to create a realistic painting experience.
  • (Mixing paints, brush loading and texture, mineral spirits, paint splatter lol I was really inspired)

Resources

• Codepen for Mimicking Bootstrap’s Collapse with Vanilla Javascript
• Mimicking Bootstrap’s Collapse with Vanilla Javascript
• Grid Layout It
• The Magic of CSS Grid AUTO-FIT vs AUTO-FILL