🔷⭕️ Draws geometrical shapes based on user's action click
Please have a demo version right here: https://guicheffer.github.io/shape-of-yours/
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)
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
This is a web application developed using HTML5 Canvas, pure CSS and pure ES6 javascript (once you're in a Chrome Browser).
NO THIRD PARTY CODE WERE USED ON THIS PROJECT! 🤘
This application is totally responsive on desktop, tablets and smartphones on landscape mode, however, only the board is shown on smartphone portrait mode.
- I used Atom as my code editor
- Repository is right here: https://github.com/guicheffer/shape-of-yours
- 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);
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