Pixel Draw Day 17



To be honest, I wanted to kinda sorta skip today’s project, and just have an off day. So I started my currently binging show ‘Better Call Saul’. But I kept thinking about the project. So I thought, Hey why not just do the outline. once I finished it, I was like… huum I can add the functionality. And bit by bit I found myself actually finishing the project. Well, you look at that. And here I was, deciding to take a break, but no my brain craved doing it. Anywho, you don’t really care you just want to see the progress, so here goes.

For this day, I wanted to do a pixel drawing app. So I started with the outline, and in my head, I was aiming for a Moleskine notebook look.

So I had my outline all ready, now I need to add the pixels. I wanted to do something different [coding wise] not just manually create the containers, but dynamically. So I decided to try out that approach. I wrote the script and tested it out. And lord and behold it worked!

This approach saved me A LOT of time. [and kinda proud of myself for improving my coding flow]. I populated my paper with the pixels and it looks awesome. However… once I resize my screen

As you can see the pixels overflow. So with mobile first approach in mind, I tweak the code to fix the issue and

Yay! we’re getting somewhere. But the pixel sizes are a bit off on mobile view so after some adjustments, pixels look good.

Now, that the layout is ready. It’s time to work on drawing the pixels. So I start fixing the code to be able to draw. it looked fine and all then I tested it and…



ummm now everything disappeared. So to figure out what’s going on, I launch my trusty console and it seems that’s I’m setting things to something that wasn’t created yet. I wanted to make sure my event listener is working so I comment out my code and just leave a ‘hey’ message to the console. And it looks like the function works, and that the problem is in my code.

Once I realized my error [which was referencing the right element] I managed to get it to work!

Now, I want to have that bookmark look that comes with every Moleskine. Witch will also include a color picker for the user to chose their color. and boom! It’s all complete!

And it’s responsive!

You can check out the final product here. Honestly, I can see myself improving. The way I think about an issue, and how I approach it, and not freaking out whenever an error occurs. I’m glad I started this. Anyways, how are you guys? Any new projects you’ve been working on? well, see you tomorrow. And till then, Happy coding 🙂


0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *