Front-end Projects

Form Validator

I already have a set of tools that are meant to be used for Form-Validation but this time I wanted to start with something like this so I could practice CSS and more simple and scalable HTML+CSS+ES6.

Movie Seat Booking

In this project I practiced CSS on divs, different effects, on click, on hover...etc Also practiced to save data to the local storage using Javascript. And populate the page data with the saved data in local storage.

Custom Video Player

In this project practiced the custom controls on a Video, with CSS giving custom nice good look to the player. Javascript to change the appearance of the Play/Pause button, and also to calculate seconds and minutes, populate UI and be able to drag bar to a desired location of the video.

Exchange Rate Calculator

In this project as in all projects of this series practiced CSS, and mostly ES6 Javascript clean methods to Fetch Exchange API with Async/Await functions and JSON Data.

DOM Array Methods

Here worked with Array methods to modify the DOM, Fetch with Await/Async and generate random data which will be used to map,sort,filter and reduce.

Landing page with Modal

This is a typical landing page we see tons of times on a daily basis, but wanted to practice the CSS and Javascript needed to hide and show a Modal window, also the transitions when toggling the nav-bar and modal.

Hangman Game

This is a Hangman game, made only with HTML CSS and ES6 Javascript, learned more about styling and learned to work with SVG and Lines and Circle to draw the hanging man. Also used Fetch API to call an API to get random words.

Meal Finder App

This project is so far the one that I most like. Learned a ton of useful Front-End resources. Practiced more CSS media-queries, but the thing I practiced the most in this project is Vanilla Javascript. Used TheMealDB free API, Fetch API to get the data, and a LOT of DOM modifying because we want to create our items dynamically after getting the data from the API.

Expense Tracker App

With this project I practiced again the DOM array methods, and using JavaScript localStorage to store users input. User submit data and it get formatted and displayed in the DOM and also saved in the localStorage. CSS makes the app responsible and has a transition when hovering history items, a delete button appears.

The Cat Gallery

The Cat Gallery project is a project where I practice infinite scroll while calling the cat API fetching random images of cats, also while it loads has a cool animation with three dots.

Speed Typing Game

The Speed Typer project is a game where the user has to write the words in the screen, if he wrote the whole word well it will switch to another word and increment his score and timer. The game has 3 difficulties and finishes when the time is over. The preference for difficulty is saved in local storage.

Memory Cards App

The Memory Cards project is an application for learning, the idea is to store questions and answers in the form of cards, the user can then navigate through the cards and flip them to see the answer. Everything is saved in local storage and can be either deleted completely or just a single card.

Speech Text Reader App

The Speech Text Reader is a really special project for me, as I intend to bring it to kids and people with disabilities (non-verbal autism for example), where they can click on an image with a text and the text will be read thanks to Web Speech API. They can also change the voice/language and input custom text that can be read as well.