Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ehsanshahbazii/31mini-projects-with-javascript

🚀Interesting and diverse projects to practice more JavaScript. To practice for the intermediate level with a variety of projects. (for JavaScript Skill)🚀
https://github.com/ehsanshahbazii/31mini-projects-with-javascript

background bmi-calculator card css front-end frontend html javascript mini-project slider style

Last synced: 5 days ago
JSON representation

🚀Interesting and diverse projects to practice more JavaScript. To practice for the intermediate level with a variety of projects. (for JavaScript Skill)🚀

Host: GitHub
URL: https://github.com/ehsanshahbazii/31mini-projects-with-javascript
Owner: EhsanShahbazii
Created: 2022-09-30T17:49:55.000Z (about 2 years ago)
Default Branch: main
Last Pushed: 2024-09-08T15:34:39.000Z (2 months ago)
Last Synced: 2024-09-08T17:38:03.434Z (2 months ago)
Topics: background, bmi-calculator, card, css, front-end, frontend, html, javascript, mini-project, slider, style
Language: CSS
Homepage: https://codepen.io/ehsanshahbazii
Size: 4.28 MB
Stars: 9
Watchers: 1
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md

Awesome Lists containing this project

README

        # Projects-MadeBy-JavaScript

### JavaScript Projects for Practice – Easy Ideas to Coding JS. 

![preview](https://ehsan.storage.iran.liara.space/git-hub/31Mini-Projects-With-JavaScript/preview.jpeg)

31 Mini Project.:fire:

 

## List of Projects

- #### Color Flipper [See in Codepen](https://codepen.io/ehsanshahbazii/pen/wvjmLoy) :white_check_mark:

  - arrays

  - getElementById()

  - querySelector()

  - addEventListener()

  - body.style.backgroundColor

  - Math.floor()

  - Math.random()

  - array.length

- #### Counter [See in Codepen](https://codepen.io/ehsanshahbazii/pen/MWGGogq) :white_check_mark:

  - querySelectorAll()

  - forEach()

  - addEventListener()

  - currentTarget property

  - classList

  - textContent

- #### Review Carousel [See in Codepen](https://codepen.io/ehsanshahbazii/pen/bGMKEGx) :white_check_mark:

  - objects

  - DOMContentLoaded

  - addEventListener()

  - array.length

  - textContent

- #### Responsive Navbar [See in Codepen](https://codepen.io/ehsanshahbazii/pen/dyeKYBN) :white_check_mark:

  - querySelector()

  - addEventListener()

  - classList.toggle()

- #### :fire:Sidebar [See in Codepen](https://codepen.io/ehsanshahbazii/pen/wvjXoaw) :white_check_mark:

  - querySelector()

  - addEventListener()

  - classList.toggle()

  - classList.remove()

- #### Modal High [See in Codepen](https://codepen.io/ehsanshahbazii/pen/WNJyomj) :white_check_mark:

  - querySelector()

  - addEventListener()

  - classList.add()

  - classList.remove()

- #### :fire:Modal [See in Codepen](https://codepen.io/ehsanshahbazii/pen/QWrJrJQ) :white_check_mark:

  - addEventListener()

  - classList.add()

  - classList.remove()

- #### FAQ Page [See in Codepen](https://codepen.io/ehsanshahbazii/pen/Poeaeey) :white_check_mark:

  - querySelectorAll()

  - addEventListener()

  - forEach()

  - classList.remove()

  - classList.toggle()

- #### :fire:Restaurant Menu Page [See in Codepen](https://codepen.io/ehsanshahbazii/pen/JjvBGKX) :white_check_mark:

  - arrays

  - objects

  - forEach()

  - DOMContentLoaded

  - map, reduce, and filter

  - innerHTML

  - includes method

- #### Video Background [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLjXBb) :white_check_mark:

  - document.querySelector()

  - addEventListener()

  - classList.contains()

  - classList.add()

  - classList.remove()

  - play()

  - pause()

- #### :fire:Form Validation [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLjXBb) :white_check_mark:

  - querySelector()

  - conditions

  - querySelectorAll()

- #### Color Change [See in Codepen](https://codepen.io/ehsanshahbazii/pen/VwxELxX) :white_check_mark:

  - querySelector()

  - Math.floor()

  - Math.random()

  - colors

- #### :fire:Book A Ticket [See in Codepen](https://codepen.io/ehsanshahbazii/pen/GRdYJXw) :white_check_mark:

  - querySelectorAll()

  - querySelector()

  - array

  - options

- #### Convert Temp [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLJXgO) :white_check_mark:

  - querySelectorAll()

  - querySelector()

  - Math

  - actions

- #### :fire:Key Code [See in Codepen](https://codepen.io/ehsanshahbazii/pen/ZEoqGNB) :white_check_mark:

  - querySelector()

  - getElementById()

  - keyboard event

- #### Show Password [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLRLEP) :white_check_mark:

  - getElementByClassName()

  - getElementById()

  - class list

  - querySelector()

- #### Range Slider [See in Codepen](https://codepen.io/ehsanshahbazii/pen/qBYQKdO) :white_check_mark:

  - range slider

  - input

  - querySelector()

- #### Dynamic Theme [See in Codepen](https://codepen.io/ehsanshahbazii/pen/BaxGVRx) :white_check_mark:

  - class list

  - querySelector()

- #### Custom Scroll Bar [See in Codepen](https://codepen.io/ehsanshahbazii/pen/jOxQKad) :white_check_mark:

  - scroll

  - events

  - DOM

  - querySelector()

- #### Navigation Bar on Scroll [See in Codepen](https://codepen.io/ehsanshahbazii/pen/wvjYaqN) :white_check_mark:

  - getElementById()

  - getFullYear()

  - getBoundingClientRect()

  - slice method

  - window.scrollTo()

- #### :fire:Tabs that display different content [See in Codepen](https://codepen.io/ehsanshahbazii/pen/JjvBmBv) :white_check_mark:

  - classList.add()

  - classList.remove()

  - forEach()

  - addEventListener()

- #### :fire:Countdown Clock [See in Codepen](https://codepen.io/ehsanshahbazii/pen/rNvZLxp) :white_check_mark:

  - getFullYear()

  - getMonth()

  - getDate()

  - Math.floor()

  - setInterval()

  - clearInterval()

- #### Your Own Lorem ipsum [See in Codepen](https://codepen.io/ehsanshahbazii/pen/jOxvMmv) :white_check_mark:

  - parseInt()

  - Math.floor()

  - Math.random()

  - isNaN()

  - slice method

  - event.preventDefault()

- #### Grocery List [See in Codepen](https://codepen.io/ehsanshahbazii/pen/poVOpKG) :white_check_mark:

  - DOMContentLoaded

  - new Date()

  - createAttribute()

  - setAttributeNode()

  - appendChild()

  - filter()

  - map()

- #### :fire:Custom Context Menu [See in Codepen](https://codepen.io/ehsanshahbazii/pen/PoexeQb) :white_check_mark:

  - context menu

  - pageX, pageY

  - events

  - querySelector()

- #### Max Length input [See in Codepen](https://codepen.io/ehsanshahbazii/pen/ExLOLRM) :white_check_mark:

  - input

  - key events

  - querySelector()

- #### :fire:Todo List Local Storage [See in Codepen](https://codepen.io/ehsanshahbazii/pen/oNdQdVX) :white_check_mark:

  - local storage

  - key events

  - arrays

  - jsons

  - splice

- #### Image Slider [See in Codepen](https://codepen.io/ehsanshahbazii/pen/XWqyYdv) :white_check_mark:

  - setInterval

  - class list

  - events

  - addEventListener()

  - querySelector()

- #### :fire:BMI Calculator [See in Codepen](https://codepen.io/ehsanshahbazii/pen/xxjQzRw) :white_check_mark:

  - events

  - addEventListener()

  - querySelector()

- #### Animated Keyboard [See in Codepen](https://codepen.io/ehsanshahbazii/pen/rNvQKzB) :white_check_mark:

  - events

  - addEventListener()

  - querySelector()

- #### :fire:Pagination [See in Codepen](https://codepen.io/ehsanshahbazii/pen/PoexaJR) :white_check_mark:

  - Math.ceil

  - class list

  - array

  - appendChild()

  - events