Six tasks for the Front-End developer

1. Credit card form

Cool credit card shape with smooth and nice micro-interactions. Includes number formatting, validation, and automatic card type detection. It is built on Vue.js and is also fully responsive. (You can see here.)

credit card form

What you will learn:

• Process and validate forms
• Handle events (for example, when fields change)
• Understand how to display and place elements on the page, especially credit card information that is on top of the form

The article was translated with the support of EDISON Software, which takes care of the health of programmers and their breakfastand develops custom software.

2. Histogram

A bar chart is a chart or graph that represents categorical data with rectangular bars with heights or lengths proportional to the values ​​they represent.

They can be applied vertically or horizontally. A vertical bar chart is sometimes called a line chart.

What you will learn:

• Display data in a structured and understandable way
• Optional: Learn how to use the element canvas and how to draw elements with it

Here you can find world population data. They are sorted by year.

3. Twitter Heart Animation

Back in 2016, Twitter introduced this amazing animation for their tweets. As of 2019, it still looks decent, so why not create one yourself?

What you will learn:

• Work with CSS Attribute keyframes
• Manipulate and animate HTML elements
• Combine JavaScript, HTML and CSS

4. GitHub repositories with search function

There is nothing unusual here - the GitHub repositories are just a glorified list.
The goal is to display the repositories and allow the user to filter them. Use official GitHub API to get repositories for each user.

GitHub profile page github.com/indreklasn

What you will learn:

• Get data from API
• Display data from API
• Filter and show relevant data for each search
• Optional: If you are ready to accept the call, use API v4, created using GraphQL. If you want to learn GraphQL go to one of my previous articles.

5. Reddit-style chats

Chats are a popular way to communicate due to their simplicity and ease of use. But what actually powers modern chat rooms? web sockets!

What you will learn:

• Use WebSockets, apply real-time communication and data updates
• Work with user access levels (for example, the owner of a chat channel has the role adminand others in the room user)
• Process and validate forms - remember, the chat box for sending a message is input
• Create and join different chats
• Work with private messages. Users can communicate with other users privately. Essentially, you will be establishing a WebSocket connection between two users.

6. Stripe-style navigation

The uniqueness of this navigation is that the popover container transforms to fit the content. There is an elegance to this transition compared to the traditional behavior of opening and closing a new popover.

What you will learn:

• Combine CSS animations with transitions
• Shade content and apply active class to floating element

Try doing it yourself first, but if you need help, check out this walkthrough.

Source: habr.com