DEV Community

Nina
Nina

Posted on

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);
}
Enter fullscreen mode Exit fullscreen mode

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');
      })
  }
Enter fullscreen mode Exit fullscreen mode

Top comments (5)

Collapse
 
nataliecodes profile image
natalie stroud

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

Collapse
 
xhan profile image
John Doe

These look really good!

Collapse
 
misnina profile image
Nina

Thank you!

Collapse
 
healeycodes profile image
Andrew Healey

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

Collapse
 
misnina profile image
Nina

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