ToDo APP

Tools: React

Here's a simple todo app implemented with React. The project has the following functions:

• add and delete task records;
• highlight important tasks with a color, crossing out completed tasks;
• search though the tasks;
• three types of filters, to display: all tasks, tasks to be performed and completed tasks;
• an information line that displays the number of uncompleted and completed tasks.

You can find the code here. Deploy is here or you can click on the image on the right.

TIC-TAC-TOE

Tools: React

This version of the game allows you to:

• play tic-tac-toe;
• shows when one of the players has won;
• stores the history of the game;
• allows players to view the history of the game and see past states of the playing field;

You can find the code here. Deploy is here or you can click on the image on the right.

Gem puzzle

Tools: pure HTML/CSS, CSS-Flexbox, CSS-Variables, DocumentFragment

Here is the well-known game Gem puzzle or Game of 15. There are 15 tiles on the field, moving which the player should get the picture shown in the sample on the left. When the page is loaded and reset is pressed, the state of the playing field is generated randomly. After the start of the game, a move counter and a timer are activated. The movement of the tiles and the end of the game are accompanied by sounds.

The index.html file is empty, all elements are generated via JavaScript. The application is displayed correctly both on desktop and on mobile devices.

You can find the code here. Deploy is here or you can click on the image on the right.

Virtual-keyboard

Tools: pure HTML/CSS, CSS-Flexbox, CSS-Variables, JS-Classes, JS-Destructuring

The index.html file is empty, all elements are generated via JavaScript. The keyboard consists: alphanumeric keys (A-Z, 0-9), constrol keys (Shift, Ctrl, Alt, Caps Lock), Enter and editing keys (Del and Backspase), navigation keys (four arrows). The keyboard responds to keystrokes on both real keyboards and virtual ones (that is with the mouse). In all cases they are accompanied by the animation of a key being pressed.

You can find the code here. Deploy is here or you can click on the image on the right.

JS Calculator

Tools: vanilla JS, pure HTML/CSS

Here is a classic calculator, created using Vanilla JS. It has basic functions (multiplication, division, addition, subtraction), as well as a decimal separator, root extraction (square, cube, and so on), exponentiation, the undoing of the last input and the ability to work with both positive and negative numbers.

You can find the code here. Deploy is here or you can click on the image below.

Willberries

Tools: vanilla JavaScript, Farebase, fetch API, pure HTML/CSS, Bootsrap

Here is an example of a marketplace.

The main page implements the receipt of data from the network, search and sorting by goods.

On the page with product categories you can add and process products in the shopping cart, implemented work with forms, and sending data from the shopping cart to the server.

You can find the code here. Deploy is here or you can click on the image on the right.

Figma layout

Relvise

Tools: vanilla JavaScript, pure HTML/CSS, BEM-metodology, CSS-Flexbox, CSS-Variables

Here is a responsive layout for a finance and consulting company.

You can find the code here. Deploy is here or you can click on the image on the right.

Figma layout

The Landing page about Bootstrap, created using Bootstrap 😆

Tools: pure HTML/CSS, Bootstrap CSS + JS

You can find the code here. Deploy is here or you can click on the image on the right.

Singolo

Tools: vanilla JS, pure HTML/CSS, Flexbox, CSS-Variables

It is a simple landing page.

You can find the code here. Deploy is here or you can click on the image below.

Figma layout

Shelter

Tools: pure HTML/CSS, Flexbox

It is a two-page website about an animal shelter in Boston.

You can find the code here. Deploy is here or you can click on the image below.

Figma layout

Clone-Monefy

Tools: Сhart.js, Bootstrap, Express.js, TypeScript, MongoDB, vanilla JavaScript, pure HTML/CSS, Flexbox

Details of the team's work can be read in the article on Medium

You can find the code here or you can click on the image on the right.

COVID-19

Tools: REST API, fetch API, vanilla JavaScript, pure HTML/CSS, Flexbox

Application for tracking the spread of COVID-19 in the world and in individual countries. The information is provided in the form of a table, list, graph and interactive map.

You can find the code here. Deploy is here or you can click on the image on the right.