https://youtu.be/SWYqp7iY_Tc

#git #github

🗺 mapty

This project was created to practice Object-oriented programming with JavaScript under the course of Jonas Schmedtmann. The web application is designed to visually display cardiovascular workouts (running / cycling) on maps using the Leaflet API and Local Storage API.

Check it out!
Demo - https://mapty-mansur.netlify.app/
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mapty

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#1 formValidator

POV: Starting 20-projects with Vanilla JS challenge

Features: checking validation of email, required inputs, length of inputs, password matching.

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/formValidator

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#2 movieSeatBooking

This web application allows to purchase tickets for a selected movie session and stores the data in local storage.

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/movieSeatBooking

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#3 videoPlayer

This website was created to customize video player in better way, including timestamp, buttons, progress bar.

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/videoPlayer

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#4 exchangeRateCalculator

The website gets the exchange rate between specific currencies

Project Features:

- Display UI with 2 select lists for countries and 2 inputs for amounts
- Fetch exchange rates from API (https://api.exchangerate-api.com)
- Display the values for both countries
- Update values on amount change
- Swap country rates

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/exchangeRateCalculator

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#5 arrayMethods

The project was designed to practice high-order array methods and DOM manipulations.

Project Specifications

- Fetch random users from the randomuser.me API
- Use forEach() to loop and output user/wealth
- Use map() to double wealth
- Use filter() to filter only millionaires
- Use sort() to sort by wealth
- Use reduce() to add all wealth

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/arrayMethods

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#6 burgerMenu && modalForm

This simple landing page was created to have practice with burger menu (slide menu) and modal form.

Project Specifications:

- Create and style landing page
- Style side nav and modal
- Add functionality to make menu open/close on button click
- Add functionality to make modal open/close on button click

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/burgerMenu%26%26modalForm

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

The website created by a graphic designer, mainly functions as a portfolio.

Check this out:
https://nomonjondesigner.netlify.app

P.S. Rate the burger menu separately😉

P.S. vol2. Wait for 10-20 seconds to get loaded.

#7 hangmanGame

This is simple game in which the user should figure out a hidden word in a set amount of chances.


Project Specifications

- Display hangman pole and figure using SVG
- Generate a random word
- Display word in UI with correct letters
- Display wrong letters
- Show notification when select a letter twice
- Show popup on win or lose
- Play again button to reset game

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/hangmanGame

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#8 mealFinder

This web application allows to search and generate random meals from the themealdb.com API.

Project Specifications:

- Display UI with form to search and button to generate
- Connect to API and get meals
- Display meals in DOM with image and hover effect
- Click on meal and see the details
- Click on generate button and fetch & display a random meal

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/mealFinder

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#9 musicPlayer

This is demonstration of customizing audio player using the HTML5 audio API.

Project Specifications:

- Create UI for music player including spinning image and song detail popup
- Add play and pause functionality
- Switch songs
- Progress bar

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/musicPlayer

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#10 newYearCountdown

Landing page that counts down from the current date to the next new year.

Project Specifications:

- Create landing page with HTML/CSS
- Calculate the days, hours, mins and seconds to the new year
- Insert values into the DOM
- Show a spinner right before loading the countdown
- Show the coming year in the background

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/newYearCountdown

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#11 relaxerApp

A relaxing breathing app with a visual director to tell you when to breathe in, hold and breathe out

Project Specifications:

- Create circle and gradient circle with CSS
- Create and animate pointer (Small circle)
- Create grow and shrink animations
- Add JavaScript to create the breath animation effect

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/relaxerApp

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#12 expenseTracker

This web application keeps track of income and expenses. Adds and removes items and save to local storage.

Project Specifications:

- Create UI for project
- Display transaction items in DOM
- Show balance, expense and income totals
- Add new transation and reflect in total
- Delete items from DOM
- Persist to local storage

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/expenseTracker

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#13 infiniteScrollPosts

The website displays blog posts from jsonplaceholder and adds infinite scroll to fetch posts and also add filter box

Project Specifications:

- Create UI & custom CSS loader animation
- Fetch initial posts from API and display
- Scroll down, show loader and fetch next set of posts
- Add filtering for fetched posts

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/infiniteScrollPosts

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#14 numberGuessing

Number guessing game where you speak your guess into the microphone using the speech recognition API.

Project Specifications:

- Display UI directing user to speak guess
- Implement speech recognition to listen to mic
- Process user's guess and match
- Let user know higher, lower, match or not a number

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/numberGuessing

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#15 speechTextReader

A text to speech app for non-verbal people. Pre-made buttons and custom text speech. This project uses the Web Speech API.

Project Specifications:

- Create responsive UI (CSS Grid) with picture buttons
- Speaks the text when button clicked
- Drop down custom text to speech
- Speaks the text typed in
- Change voices and accents

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/speechTextReader

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

#16 typingGame

Game to beat the clock by typing random words.

Project Specifications:

- Create responsive UI (CSS Grid) with picture buttons
- Speaks the text when button clicked
- Drop down custom text to speech
- Speaks the text typed in
- Change voices and accents

Check it out!
Repo - https://github.com/MansurIsakov/small-projects/tree/main/mini-projects/typingGame

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project

📝 forkify

🥁 The biggest web application I've ever created.

Web application with custom recipe uploads.

Features:
- Babel
- Dynamic Style
- Parcel
- Asynchronous
- Responsive website
- DOM Manipulations
- OOP
- Modern JavaScript
- Additing function
- Bookmark function
- Servings function
- Local Storage
- Forkify API
- Using API Key
- Pagination
- MVC Architecture
- BEM Methodology
- SASS (GRID / FLEX)
- DRY Principles

You can:
- Search recipes using searching bar (Use keywords like "pizza" / "avocado")
- Add your own recipes by clicking on "ADD RECIPE"
- Bookmark recipes by clicking on icon
- Indicate how many ingredients you need for particular recipe

Check it out!
Demo - https://forkify-mansur.netlify.app/
Repo - https://github.com/MansurIsakov/forkify

Bugs? Leave a comment ⬇️

©️ Quartet's Untitled Project