Hi, my name is Mykola Goral.

I'm a Front End Developer.

Browser Extension

View an image of the extension

This is my first extension that i created. When the user clicks the confirm button, I scheduled the code to run periodically in the future by using the chrome.alarms API to retrieve data from a website. Data is stored using localStorage.

P.S. This is a prototype

HTML CSS JS jQuery

Guess the Logo - view

GitHub - code

Plan to add so the logo name would be shown if the user didn’t guess it in after 3 times. Also delete letters when forming the name, if the user entered an incorrect letter.

HTML CSS JS

Sortable Table From Text File - view

GitHub - code

This is a page that i created to gain experience in working with data from a text file. Data in the text file consists of lines and each line has a word and 2 numbers.

name1 150905 2005

name2 188973 2263

name3 65699 1554

Two additional columns are added after processing the text file. I used a table sorter plugin to able to sort any of the columns that i want.

HTML CSS JS

Performance Line Graph - view

GitHub - code

I collected a lot of data from a specific amount in an android app by using Wireshark and they were all stored in a text file. I needed a way to graphically represent each user’s performance.
I used an open source graphing library plotly.js. In order to create the graph, I need an array of objects, each representing one user. Then I used a method that was provided by the library to make the graph.
To compare a user individually with some else, double click on the name and add other users by clicking their name.

HTML CSS JS

Battleship - view

GitHub - code

This was a project i did while reading a "Head First JavaScript Programming" and coding along with it.

HTML CSS JS

2 Types of Image Sliders - view

GitHub - code

First slider

In the 1st slider all the images 'dislpay' properties are set to 'none', except for the first image which needs to be displayed. Depending on the button pressed, the current images 'display' property is set to 'none', while setting the value of 'display: block' to the next or previous image.

Second slider

In the 2nd slider all images are displayed and lined up in one row. But the 'div' containg the images with its width fits only 1 image, the rest image are 'hidden' with the 'overflow' property. The whole row is being pushed left or right to display the necessary image.

HTML CSS JS

RGB Color Guess - view

GitHub - code

This was a project i did while coding along with a video.

HTML CSS JS

Tribute Page - view

GitHub - code

First project for Free Code Camp's Front-End Certification - a tribute page to someone you admire. This was my first experience to put a page together with Bootstrap.

HTML CSS Bootstrap

My First Website - view

GitHub - code

My first website that i created. I used slider plugin to make a simple image slideshow on my page.

HTML CSS

PSD to HTML github

View website in browser

Click the GIF to view an image of the actual page

Gif. Making a 2nd webpage from PSD template

PSD to HTML github

View website in browser

This a responsive website i built from a template. It has an automatic slider, with the ability to change the slide by dragging it. Added a slide animation for the products when they appear in the viewport.

Click the IMG to view an image of the actual page

Webpage from PSD template. Responsive, added animation and used a slider

PSD to HTML github

View website in browser

Another responsive website i built from a template. Added a progress bar animation when they appear in the viewport.

Click the IMG to view an image of the actual page

Webpage from PSD template. Responsive, added animation and used a slider

Original website is on the left. Recreated on the right.

Random website i picked from the internet and recreated the top part of it

First Recreation First Recreation

PSD to HTML

Watching a video tutorial in which i make a web page from a PSD file.
(Click the GIF to view an image of the actual page)

Gif. Making a webpage from PSD template