DEV Community

Cover image for I made a flipcard which has drawboard + todolist in it!?
Vinyas Hegde
Vinyas Hegde

Posted on

I made a flipcard which has drawboard + todolist in it!?

Yes,I made a flipcard which has drawboard + todolist in it!?

I made this for fun.I used a javascript library called drawingboard.js. Its really a very great library and is easy to use.

interact('.resize-drag')
  .draggable({
    onmove: window.dragMoveListener
  })
  .resizable({
    preserveAspectRatio: false,
    edges: { left: true, right: true, bottom: true, top: true }
  })
  .on('resizemove', function (event) {
    var target = event.target,
        x = (parseFloat(target.getAttribute('data-x')) || 0),
        y = (parseFloat(target.getAttribute('data-y')) || 0);

    // update the element's style
    target.style.width  = event.rect.width + 'px';
    target.style.height = event.rect.height + 'px';

    // translate when resizing from top or left edges
    x += event.deltaRect.left;
    y += event.deltaRect.top;

    target.style.webkitTransform = target.style.transform =
        'translate(' + x + 'px,' + y + 'px)';

    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
    target.textContent = event.rect.width + '×' + event.rect.height;
  });

function dragMoveListener (event) {
    var target = event.target,
        // keep the dragged position in the data-x/data-y attributes
        x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx,
        y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;

    // translate the element
    target.style.webkitTransform =
    target.style.transform =
      'translate(' + x + 'px, ' + y + 'px)';

    // update the posiion attributes
    target.setAttribute('data-x', x);
    target.setAttribute('data-y', y);
  }
Enter fullscreen mode Exit fullscreen mode

Here is image of the website -

Drawingboard.js

And for todo list i used this github project - Todo List Project

It was very fun to make this small project i hope i get to make more of types projects! I have made project open source you can contribute or make your own.There are currently some bugs that will be fixed in some days.If you want to contribute - Click here for the project

Here are the screenshots -

Front

Back

Link to the webpage - Here

Top comments (0)