bourbask/family-tree

Family tree using html, css and vanilla javascript

Family Tree

Hello! This is the repository of the Technical Assestment for the selection process of Ideati, a company with the scope of bringing a real and effective way for small enterprises to improve its digital presence .

• Ideati Website

About the test

The test consist in obtain the graph representation of a family tree for the list in a JSON file

• The code must be written in HTML5, CSS3 and plain Javascript (no frameworks nor libraries)
• The page must present the graph as SVG boxes or paths linked by lines

Tech

In this project, various tools and technologies were used, the purposes of which will be explained below:

• HTML - The standard markup language for documents designed to be displayed in a web browser.
• CSS - A stylesheet language used to describe the presentation of a document written in HTML
• Vanilla JavaScript - A prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative styles
• SVG - An Extensible Markup Language (XML)-based vector image format for two-dimensional graphics with support for interactivity and animation.

Installation

Clone this repo in your local terminal.

$ git clone [email protected]:Djkde01/family-tree.git

Now, go to the folder and open index.html

Development

The application was a huge and very interesting challenge, that allows various and complex solutions

It took almost 6 hours to develop the result that you can see in the main branch accord to WakaTime, and although it is a functional version, it does not meet all the requirements.

However, I want to continue developing the application until it is complete, so I'll keep uploading commits where I finish the challenge without libraries.

Todos

• Implement dinamic lecture of JSON
• Set family levels accord to JSON data

License

MIT

Djkde - 2021