Pokémon pomodoro

Day 4 of working on my Pokémon pomodoro website.

Drew a Sylveon focus animation! She looks adorable… I also abandoned my idea of making full-on animations because I would like to focus more on the developer side of things rather than hours of animation and art ;w;.

I added some drop-shadows to make the todo list look nicer and stand out more.
The add-todo now works with hitting the enter key (yay!) instead having to manually press the submit button.
I also added a option for Mimikyu as someone requested.

Next up is coding the functionality for switching Pokemon, as well as drawing the break animation. To avoid myself from crashing out, the break animation will be a Pokeball regardless of the Pokemon picked.

I though some more about upcoming features:

• Adding ambience sounds?
• Drawing different backgrounds?
• Allowing the user to customize break and focus times
• Add a long break function… (I don’t know how to do this one, but I’ll figure it out)
• User notes function

Day 3 of my Pomodoro website centered around Pokémon!

Four hours already?! That’s crazy.. anyways, I did a LOT of styling. A huge trouble for me was layout, as I’m still weak at CSS positioning… but don’t worry flex was here to save the day! Love you, flex styling! It is such an easy tool to use to align items and put them into columns correctly. Also, I got the background working.

The background-blend-mode property, an AWESOME property I used for a previous personal project (not on Hack Club! </3) helped me out here. And this will be crucial in allowing different themes because I don’t need to switch thru JS a million different images! I just need to change colors. I accidentally created a… decent background with a checkered pattern and a background-blend-mode property.

Okay, two last cool things:

• I styled the select property! This is a recent development within CSS that’s AWESOME, and you can see this in Screenshot 1. Usually you were forced to the platform-default select… which was boring. But with this one I could add Pokémon icons!
• Next, I started drawing an animation, and the first one will be Sylveon. AS you can see in Screenshot 1, Mabosstiff is the next planned one. Pikachu and others will be next.

So, my final question to you: What Pokémon do you want to see in this website? Just want to see the most popular ones to add to the lineup. Probably, I will have around 6-7 (unintentional) to start off with. I don’t want to add too many, at least for my OWN sanity…

Day 2

Got a to-do list working! And styled it as well. I am learning JavaScript through this which I think is pretty neat. The to-do list took some time, and I struggled w/ styling it and making the check work. I figured it out using the :before element to place a checkmark.

Pikachu is serving as a placeholder until I draw in animations.

Next up is more styling…. which I’ve already been doing. Figuring out flexbox and block and all of the positioning methods are weird! I think I want to add in themes for each Pokémon animation I add.

Day 1! TLDR: created a pokemon pomodoro website and started w/ basic timer functionality

Thought of making this project… a Pokémon pomodoro website!

There are a lot of these out on the web, but I wanted my own. It’s meant to be very simple, with some cute animations that play for each one.

I hope to add a lot of different ones as time goes on. I had a separate cursor project… but that requires a lot of research, so I might as well do this as someone with a lot more HTML/CSS experience!

So, for now:

• I coded the timer functionality. I was fighting user input, but for now I’m going to go with a very simple 25/5 timer. User input time will most likely be later as I mess with JavaScript. When you reset the timer, it resets to 25 minutes even if you’re on a break. So… no trying to cheat the breaks… unintended feature but a welcome one. Yes I had to fidget w/ this a lot because I am weak at JavaScript (learned some of it WAY too long ago).