Vanilla JavaScript projects carried out as part of learning. Main technologies used:

• HTML
• CSS
• JavaScript

Infinite scrolling which is a way to paginate. App fetch ten posts initially and as scroll you can see css loader and application is going to grab five more posts and so on. Posts are fetching from an API JSONPlaceholder.
I also implement search filter, we can type in a word and filter the posts we already have on page.

Sometimes on websites we can see pagination numbers at the bottom with arrows so we can click to go to next page of content. In this case I decided to deal with blog posts or application like Twitter where we keep scrolling and it is basically infinite scroll.

Regular page with each section is the full height of the page. When scrolling, the entrie section moves and shows the next one. The website also has navigation that allows you to go to the selected section without scrolling.

I have seen many websites uses that effect. This project also allowed me to better understand event scroll and the window methods used to do these types of effects.

The project consists of two forms - the first which we can add elements to document object model, and the second which we can search for elements and show information about them.

A reminder of what Document Object Model is. What methods can be performed on it, what elements can be created wit it and how to search for elements on the website and so on.

Simple game in which the player is assigned a starting value that can be increased by betting a given amount and pressing the spin button. If he loses, the bet amount is subtracted from the value before the button was pressed. The condition for winning is obtaining the same colors on three fields or diffrent colors on each square. The colors on the fields are randomized and are independent of each other.

Use of object-oriented design techniques using objects, classes and class instances.

Tabs used to show contents that is associated to the each tab. Project is accessible - we can switch tabs by using keyboard over the each of tabs.

Learn how to create accessible elements using loops and events.

The project contains an element similar to the terms and conditions document. The user cannot accept the regulations until they go to the very bottom of the document.

Learn how to deal with scroll events. Scroll to accept is pretty common thing across internet like for example terms and conditions forms.

Pressing the 'learn more' buttons opens the modal with random picture. Click outside or escape keyboard button couses it to close.

Learning a useful effect often used on websites.

Project where you can add tasks and remove them.

As simple as possible make a to-do list.

Simple stopwatch that can be reset with a button.

Creating a simple clock with the help of window object method setInterval.

A timing application for selected events.

Get acquainted with JavaScript Date objects represent a single moment in time.

An application that measures the length of time spen on the website.

Get acquainted with setInterval method.

A form that checks the age of the user and displays a message depending on the condition.

Learning how to capture values from input and how to use the conditional (ternary) operator.

Self-moving slider that can be controlled by the arrows on the keyboard.

Learning how to control setInterval method and how to use findIndex array method.

An application that imitates the effect of typing.

Application that draws random advice to the user.

Application that draws random number from a fixed range.

Application generating random 12-letter code.

Interactive elements on website moving under the influence of the mouse movement at diffrent speed.

Get familiar with mouse events and learn how to manipulate them to getting an intresting moving effect.

If the user wants to see the answer, he has to press button. As a result the answer slides out to bottom.

Frequently asked questions section on websites using this simple solution.

Application which counts down until the next year. The app is completely dynamic, meaning that even if the year changes it will still work. You can also see a spinner on page loads before start the countdown.

Get acquainted with dates and times in Javascript and also implement a little spinner that loads for one second and then it shows the countdown.

Landing page with menu slider and a modal. A little hamburger button expands menu slider from left and sign up button which if you click, you will open up a modal. Modal fade in and then you can close it with either closed button or by clickng anywhere outside of the modal.

Build landing page and do something that is useful, what I see all the time:

• menu slider
• modal

Expense tracker app where you are able to track your income and expenses. You can see your total balance and all this stuff are saving in localStorage.

Again use a lot of the high order array methods but this time used in a project that can be really useful to someone.

The application has functions such as generating the user and his wealth, doubling this wealth, sorting by richest users, displaying only millionaires and summarizing the assets of all users. User generation is done with fetch request to random user generator from randomuser.me API, which give me an array with single user informations.

Learn most common array methods:

• forEach()
• map()
• sort()
• filter()
• reduce()

Movie seat booking app where you can book a ticket for a movie. Each movie has a diffrent price, you have a little legend that shows which one seats are selected, occupied and open. Data is being saved in localStorage, so all information is saved when you exit the browser.

Build little UI which is something everyone would see in movie theater website where you pick your seats and the movie. Learn how save data in localStorage.

Client side form validator with specific functions for each validation.

Learn how to write and style form validators, as it is quite a common task in work of every developer.

https://eszczepan-form-validator.netlify.app