DEV Community

loading...

Day 1-5 of 100 Days of Code

misnina profile image Nina ・2 min read

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

Discussion (5)

pic
Editor guide
Collapse
nataliecodes profile image
natalie stroud

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

Collapse
xhan profile image
Xhan

These look really good!

Collapse
misnina profile image
Nina Author

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 Author

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