{"id":19413164,"url":"https://github.com/ehsanshahbazii/31mini-projects-with-javascript","last_synced_at":"2025-04-24T12:31:23.002Z","repository":{"id":60938526,"uuid":"543722413","full_name":"EhsanShahbazii/31Mini-Projects-With-JavaScript","owner":"EhsanShahbazii","description":"🚀Interesting and diverse projects to practice more JavaScript. To practice for the intermediate level with a variety of projects. (for JavaScript Skill)🚀","archived":false,"fork":false,"pushed_at":"2024-09-08T15:34:39.000Z","size":4490,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-09-08T17:38:03.434Z","etag":null,"topics":["background","bmi-calculator","card","css","front-end","frontend","html","javascript","mini-project","slider","style"],"latest_commit_sha":null,"homepage":"https://codepen.io/ehsanshahbazii","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/EhsanShahbazii.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-30T17:49:55.000Z","updated_at":"2024-09-08T15:34:42.000Z","dependencies_parsed_at":"2024-08-24T15:54:49.320Z","dependency_job_id":null,"html_url":"https://github.com/EhsanShahbazii/31Mini-Projects-With-JavaScript","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EhsanShahbazii%2F31Mini-Projects-With-JavaScript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EhsanShahbazii%2F31Mini-Projects-With-JavaScript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EhsanShahbazii%2F31Mini-Projects-With-JavaScript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/EhsanShahbazii%2F31Mini-Projects-With-JavaScript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/EhsanShahbazii","download_url":"https://codeload.github.com/EhsanShahbazii/31Mini-Projects-With-JavaScript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":223952622,"owners_count":17230923,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["background","bmi-calculator","card","css","front-end","frontend","html","javascript","mini-project","slider","style"],"created_at":"2024-11-10T12:31:12.504Z","updated_at":"2024-11-10T12:31:40.035Z","avatar_url":"https://github.com/EhsanShahbazii.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Projects-MadeBy-JavaScript\n\n### JavaScript Projects for Practice – Easy Ideas to Coding JS. \n![preview](https://ehsan.storage.iran.liara.space/git-hub/31Mini-Projects-With-JavaScript/preview.jpeg)\n\n31 Mini Project.:fire:\n \n## List of Projects\n\n- #### Color Flipper [See in Codepen](https://codepen.io/ehsanshahbazii/pen/wvjmLoy) :white_check_mark:\n  - arrays\n  - getElementById()\n  - querySelector()\n  - addEventListener()\n  - body.style.backgroundColor\n  - Math.floor()\n  - Math.random()\n  - array.length\n- #### Counter [See in Codepen](https://codepen.io/ehsanshahbazii/pen/MWGGogq) :white_check_mark:\n  - querySelectorAll()\n  - forEach()\n  - addEventListener()\n  - currentTarget property\n  - classList\n  - textContent\n- #### Review Carousel [See in Codepen](https://codepen.io/ehsanshahbazii/pen/bGMKEGx) :white_check_mark:\n  - objects\n  - DOMContentLoaded\n  - addEventListener()\n  - array.length\n  - textContent\n- #### Responsive Navbar [See in Codepen](https://codepen.io/ehsanshahbazii/pen/dyeKYBN) :white_check_mark:\n  - querySelector()\n  - addEventListener()\n  - classList.toggle()\n- #### :fire:Sidebar [See in Codepen](https://codepen.io/ehsanshahbazii/pen/wvjXoaw) :white_check_mark:\n  - querySelector()\n  - addEventListener()\n  - classList.toggle()\n  - classList.remove()\n- #### Modal High [See in Codepen](https://codepen.io/ehsanshahbazii/pen/WNJyomj) :white_check_mark:\n  - querySelector()\n  - addEventListener()\n  - classList.add()\n  - classList.remove()\n- #### :fire:Modal [See in Codepen](https://codepen.io/ehsanshahbazii/pen/QWrJrJQ) :white_check_mark:\n  - addEventListener()\n  - classList.add()\n  - classList.remove()\n- #### FAQ Page [See in Codepen](https://codepen.io/ehsanshahbazii/pen/Poeaeey) :white_check_mark:\n  - querySelectorAll()\n  - addEventListener()\n  - forEach()\n  - classList.remove()\n  - classList.toggle()\n- #### :fire:Restaurant Menu Page [See in Codepen](https://codepen.io/ehsanshahbazii/pen/JjvBGKX) :white_check_mark:\n  - arrays\n  - objects\n  - forEach()\n  - DOMContentLoaded\n  - map, reduce, and filter\n  - innerHTML\n  - includes method\n- #### Video Background [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLjXBb) :white_check_mark:\n  - document.querySelector()\n  - addEventListener()\n  - classList.contains()\n  - classList.add()\n  - classList.remove()\n  - play()\n  - pause()\n- #### :fire:Form Validation [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLjXBb) :white_check_mark:\n  - querySelector()\n  - conditions\n  - querySelectorAll()\n- #### Color Change [See in Codepen](https://codepen.io/ehsanshahbazii/pen/VwxELxX) :white_check_mark:\n  - querySelector()\n  - Math.floor()\n  - Math.random()\n  - colors\n- #### :fire:Book A Ticket [See in Codepen](https://codepen.io/ehsanshahbazii/pen/GRdYJXw) :white_check_mark:\n  - querySelectorAll()\n  - querySelector()\n  - array\n  - options\n- #### Convert Temp [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLJXgO) :white_check_mark:\n  - querySelectorAll()\n  - querySelector()\n  - Math\n  - actions\n- #### :fire:Key Code [See in Codepen](https://codepen.io/ehsanshahbazii/pen/ZEoqGNB) :white_check_mark:\n  - querySelector()\n  - getElementById()\n  - keyboard event\n- #### Show Password [See in Codepen](https://codepen.io/ehsanshahbazii/pen/YzLRLEP) :white_check_mark:\n  - getElementByClassName()\n  - getElementById()\n  - class list\n  - querySelector()\n- #### Range Slider [See in Codepen](https://codepen.io/ehsanshahbazii/pen/qBYQKdO) :white_check_mark:\n  - range slider\n  - input\n  - querySelector()\n- #### Dynamic Theme [See in Codepen](https://codepen.io/ehsanshahbazii/pen/BaxGVRx) :white_check_mark:\n  - class list\n  - querySelector()\n- #### Custom Scroll Bar [See in Codepen](https://codepen.io/ehsanshahbazii/pen/jOxQKad) :white_check_mark:\n  - scroll\n  - events\n  - DOM\n  - querySelector()\n\n\n- #### Navigation Bar on Scroll [See in Codepen](https://codepen.io/ehsanshahbazii/pen/wvjYaqN) :white_check_mark:\n  - getElementById()\n  - getFullYear()\n  - getBoundingClientRect()\n  - slice method\n  - window.scrollTo()\n- #### :fire:Tabs that display different content [See in Codepen](https://codepen.io/ehsanshahbazii/pen/JjvBmBv) :white_check_mark:\n  - classList.add()\n  - classList.remove()\n  - forEach()\n  - addEventListener()\n- #### :fire:Countdown Clock [See in Codepen](https://codepen.io/ehsanshahbazii/pen/rNvZLxp) :white_check_mark:\n  - getFullYear()\n  - getMonth()\n  - getDate()\n  - Math.floor()\n  - setInterval()\n  - clearInterval()\n- #### Your Own Lorem ipsum [See in Codepen](https://codepen.io/ehsanshahbazii/pen/jOxvMmv) :white_check_mark:\n  - parseInt()\n  - Math.floor()\n  - Math.random()\n  - isNaN()\n  - slice method\n  - event.preventDefault()\n- #### Grocery List [See in Codepen](https://codepen.io/ehsanshahbazii/pen/poVOpKG) :white_check_mark:\n  - DOMContentLoaded\n  - new Date()\n  - createAttribute()\n  - setAttributeNode()\n  - appendChild()\n  - filter()\n  - map()\n- #### :fire:Custom Context Menu [See in Codepen](https://codepen.io/ehsanshahbazii/pen/PoexeQb) :white_check_mark:\n  - context menu\n  - pageX, pageY\n  - events\n  - querySelector()\n- #### Max Length input [See in Codepen](https://codepen.io/ehsanshahbazii/pen/ExLOLRM) :white_check_mark:\n  - input\n  - key events\n  - querySelector()\n- #### :fire:Todo List Local Storage [See in Codepen](https://codepen.io/ehsanshahbazii/pen/oNdQdVX) :white_check_mark:\n  - local storage\n  - key events\n  - arrays\n  - jsons\n  - splice\n- #### Image Slider [See in Codepen](https://codepen.io/ehsanshahbazii/pen/XWqyYdv) :white_check_mark:\n  - setInterval\n  - class list\n  - events\n  - addEventListener()\n  - querySelector()\n- #### :fire:BMI Calculator [See in Codepen](https://codepen.io/ehsanshahbazii/pen/xxjQzRw) :white_check_mark:\n  - events\n  - addEventListener()\n  - querySelector()\n- #### Animated Keyboard [See in Codepen](https://codepen.io/ehsanshahbazii/pen/rNvQKzB) :white_check_mark:\n  - events\n  - addEventListener()\n  - querySelector()\n- #### :fire:Pagination [See in Codepen](https://codepen.io/ehsanshahbazii/pen/PoexaJR) :white_check_mark:\n  - Math.ceil\n  - class list\n  - array\n  - appendChild()\n  - events\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsanshahbazii%2F31mini-projects-with-javascript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fehsanshahbazii%2F31mini-projects-with-javascript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fehsanshahbazii%2F31mini-projects-with-javascript/lists"}