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');
      })
  }

Comments

[natalie stroud]

When I tell you my jaw DROPPED looking at this. Great job!

[John Doe]

These look really good!

[Nina]

Thank you!

[Andrew Healey]

I love the Pokemon mail. Reminds me of nostalgic-css.github.io/NES.css/

[Nina]

Oh that's a really wonderful framework! Thanks for showing me!