guicheffer / shape-of-yours

🔷⭕️ As Ed Sheeran always sang: Shape of YOURS

Shape of YOURS

🔷⭕️ Draws geometrical shapes based on user's action click

Please have a demo version right here: https://guicheffer.github.io/shape-of-yours/

How to

The goal of Shape of YOURS is to create a parallelogram with an inner circle on it.

• Click in 3 different points inside the Shape of YOURS's squared board, each click will generate a 🔴   and a number;
• After the 3 points appear on the squared board, an parallelogram will be shown and the inner circle will be added on it;
• Move the dots anytime you want to!
• Position and sizes about your movement will be on the left;
• Reset the board to start again! (click on the button below at the left)

How to run locally

This way is only if you don't want to access the relative path of this repository on your browser. So, please run make install and then make run to have it in localhost:3000

About

This is a web application developed using HTML5 Canvas, pure CSS and pure ES6 javascript (once you're in a Chrome Browser).

Preview

Considerations

NO THIRD PARTY CODE WERE USED ON THIS PROJECT! 🤘

Responsive way

This application is totally responsive on desktop, tablets and smartphones on landscape mode, however, only the board is shown on smartphone portrait mode.

Development process

• I used Atom as my code editor
• Repository is right here: https://github.com/guicheffer/shape-of-yours

What makes/made me happy on every project (including this code challenge)

• CSS Animations;
• Order attributes in CSS alphabetically;
• Atomic commits;
• Commit on master ... (kidding, in general...PRs, please 😜);
• Usage of caniuse.com (I really searched and still search for some attributes in CSS sometimes);
• Usage of new technologies, choice among frameworks and libraries;
  • Vue, React, Angular and Knockout...love 'em 🖤
• Usage of Mobile First designing and development;
• To Study in general;
• Usage of emojis ❤️   (I really LOVE this thingy, hope you realized);

Why this name?

Because of this:

⬆️ he sang the song called "Shape of you" and I decided to pun this project's alm

This is my way of developing code: always be funny, please