¡Hola mundo!

Have you ever been to an online event and wanted to share a little bit of yourself in order to improve your contact network?

We're sure you have, and if you haven't, now you are thinking you should.

As requested by our client "Adalab" we have developed a web application that allows any interested person to create and share a customized business card.

Here are our client's requirements:

• Users must start their journey in a simple but descriptive landing page.
• The app must allow the user to choose between three diferent color palettes.
• There must be a form to fill in, where all the fields are mandatory.
• While the user is completing the form, a preview of the card must be visible in the right side of the app.
• The user's information must be stored in a local storage so that if they leave the page, when they return they do not have to complete it again.
• On the preview area there must be a reset button in case that the user wants to start over. This button resets all content and local storage.
• When the user finishes the card he will be able to collect a link with the card.
• As the card is created, a new button to share the card on Twitter must be created.

Starring ⭐: Adalab Web Starter Kit - An amazing template that allowed us to use a local host, SASS, HTML Template Engines and gulp. For more information you may visit the Kit repository

_{Node.js and Gulp are required}

• Visual Code Studio: as code editor
• HTML
• SASS
• Javascript

For the development of this web application we started the layout and once it was completed we started developing all the needed functions.

We divided the functions according to their purposes. This allowed us to work in parallel so that the development was faster and thus we could be able to comply with the times proposed by our Scrum without compromising the requirements asked by the Product Owner.

All the functions were later refactored so they were clearer. For this we used some ternary operators and handling functions to trigger events.

👁️‍🗨️If you are curious this is how we divided our JS code 👁️‍🗨️

Please, do it! We believe that sharing is caring. Remember that for running this project you will need to:

1. Install dependencies. You will only have to do this once.

npm install

2. Start the project. This must be done every time you code and will open a local host that will update in real time

npm start

3. If in doubt, go check Adalab Web Starter Kit detailed instructions

MIT