PROJECT MODULE 2: ADALAB TECH SUMMIT CARD CREATION WEB SITE

Summary

In the second module of the course we have to make a web page to create digital cards for the Adalab Tech Summit, the first convention for the Adalabers community.

On the website, you will be able to complete the accreditation process to get your place in this event that will unite all Adalab promotions and the best speakers of the moment. Once the accreditation form has been completed, users will be able to share the card on social networks, such as Twitter.

The registration website for this meeting, according to the client's request that our Product Owner told us, is composed of two pages, both interactive and with a responsive design that starts with a mobile first design.

How it works

The two parts of the page are as follows:

First, a welcome page, where the event is briefly presented and from which there is a button to access the accreditation form. From the footer icon you can access the page of the event organizer, Adalab.

The second page is the one that allows us to register, with the creation of a digital card, which as we mentioned before, can be shared on twitter or you will have a link to send it by email or share it on other social networks.

Inside the form we have 3 sections:

• DESIGN: To identify the different attendees of the event, we will have different color palettes, for organizers and teachers, guests and Adalabers, both Front-end Developers and Data Analitics, and a different one for speakers.

• FILL IN: In this part of the form, we have some mandatory fields, for which if they are not filled in, it will not allow us to create the card. We also have the email field, which if it does not have a correct pattern, it will not allow us to create the card thanks to a validation.

• SHARE: In this section, we have a button that allows us to create the digital ID card, as long as the required fields and the email validation is correct. In case it is not, we have an alert message for each of the situations.

In addition, in this section, we will have the link of the card that we have sent to the server.

We also have direct access to Twitter to share this link, including in this Twit a message and a predefined hashtag.

In addition, the information of the created card can be stored in the Local Storage.

At the same time you are filling the form, you can see how the card looks like in the preview section.

Team members: 👩🏻‍💻👩🏻‍💻👩🏼‍💻👩🏻‍💻👩🏻‍💻👩🏻‍💻

• Giselle Castro @Giselle-97
• Natalia Gañán @nataliaventura93
• Kathi Mansilla @kathimansilla
• Silvia Parada @silviaparadag
• Suelen Ranucci @SuelenGalhardo
• Irene Talavero @IreneTaPa

Tools: ⚒️

• HTML, CSS, SASS, JS
• Zeplin
• Vs Code
• GitHub GitHub Pages
• Adalab Web Starter Kit

This project has been supervised by:

• Dayana Romero @dayanare
• Iván Garrido @igarrido-adalab

• Yanelis Serrano @ytaylordev

  💫 y con eso... ¡Ya estaría! 💫

© Adalab 2023 | Trótula Promotion