Day 1-5 of 100 Days of Code

I started 100 days of code this Monday! I didn't get as much done as I wanted, as I was kind of sick, but I just wrapped up my second mini project. I started them both at the same time, but my first project is an interactive card!

I saw a challenge on Codier about doing a futuristic card, but decided I just wanted to make my own type of card in react instead. I will admit that CSS animations have been a bit foreign to me! I need to research and use them a lot more. It doesn't help that I dived head first into doing 3D perspective with it!

I have to say however, a failing so far is that I haven't made it mobile responsive. When I make it smaller the width breaks the layout, so I pretty much have to redesign the whole thing for mobile, which is not bad, just means that's another project for another day.

 #scene { width: 35rem; height: 20rem; perspective: 600px; #card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 1s; } .back { transform: rotateY(180deg) rotateX(0deg); backface-visibility: hidden; } .front { transform: rotateX(0deg); position: absolute; height: 100%; width: 100%; } } .isFlipped { transform: rotateY(-180deg); } 

The second project I did actually has a page you can visit! Using the Black and White assets from Pokemon, as well as various pokemon themed fonts, I made a little app that lets you save an html element as an image for a cute message.

It's a small app, but it's taught me a bit more about React states and state management. I still haven't gotten into Redux yet as it keeps going over my head, but I'll get there someday.

 grabMail() { domtoimage.toPng(document.getElementById('mail')) .then(dataURL => { download(dataURL, 'mail.png'); }) }