Ecosyste.ms: Awesome

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

https://github.com/labex-labs/practice-javascript-programming-projects

[Practice JavaScript Programming Projects] This repository collects 105 of programming projects for JavaScript
https://github.com/labex-labs/practice-javascript-programming-projects

List: practice-javascript-programming-projects

awesome awesome-list education hands-on javascript labex programming projects

Last synced: 17 days ago
JSON representation

[Practice JavaScript Programming Projects] This repository collects 105 of programming projects for JavaScript

Lists

README

        

# Practice JavaScript Programming Projects



JavaScript is a programming language that can be used to create interactive web pages. Every modern web browser has built-in support for JavaScript, so it's easy to get started with this skill tree.

| Index | Name | Level | Project Link |
|---------|-------------------------------------------------------|---------|---------------------------------------------------------------------------------------------------------|
| 001 | Building a Christmas Wish List Builder in React | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-building-a-christmas-wish-list-builder-in-react) |
| 002 | Build a Simple Markdown Editor With Live Preview | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-build-a-simple-markdown-editor-with-live-preview) |
| 003 | Implement a Magnifying Glass Effect Using Canvas | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-implement-a-magnifying-glass-effect-using-canvas) |
| 004 | Build an VSCode Extension With ChatGPT | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-build-an-vscode-extension-with-chatgpt) |
| 005 | Monty Hall Simulation Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-monty-hall-problem-simulation-web-app) |
| 006 | Build a Tic-Tac-Toe Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-build-a-tic-tac-toe-web-app) |
| 007 | Creating a Whack-a-Mole Web Game | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-creating-a-whack-a-mole-web-game) |
| 008 | Building a Web Avoiding Block Game | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-building-a-web-avoiding-block-game) |
| 009 | Build an Image Cropping Tool Using HTML5 | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-build-an-image-cropping-tool-using-html5) |
| 010 | Deploying MobileNet With TensorFlow.js and Flask | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-deploying-mobilenet-with-tensorflowjs-and-flask) |
| 011 | 2048 Web Game Using jQuery | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-2048-web-game-using-jquery) |
| 012 | Create a Notes App Using React | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-create-a-notes-app-using-react) |
| 013 | Building a Modern Expense Splitter Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-building-a-expense-splitter-web-app) |
| 014 | Creating a Drawing Board Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-creating-a-drawing-board-web-app) |
| 015 | Creating a Task Timer Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-creating-a-task-timer-web-app) |
| 016 | Build a Sliding Puzzle Game With JavaScript | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-build-a-sliding-puzzle-game-with-javascript) |
| 017 | Create a Pixel Art Animator With React | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-create-a-pixel-art-animator-with-react) |
| 018 | jQuery Flip Puzzle Game | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-jquery-flip-puzzle-game) |
| 019 | Don't Step on the White Tile | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-dont-step-on-the-white-tile) |
| 020 | Build a Scratch Card Web Game | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-scratch-card-game) |
| 021 | Building a React Drag-and-Drop Puzzle Game | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-building-a-react-drag-and-drop-puzzle-game) |
| 022 | Building a React GitHub Heatmap Contributions | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-building-a-react-github-heatmap-contributions) |
| 023 | Create a Swiper Carousel Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-create-a-swiper-carousel-web-app) |
| 024 | Creating a Minesweeper Game With JavaScript | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-creating-a-minesweeper-game-with-javascript) |
| 025 | Build a Simple URL Shortener With Flask and MySQL | β˜…β˜…β˜… | [πŸš€ Start Building](https://labex.io/courses/project-build-a-simple-url-shortener-with-flask-and-mysql) |
| 026 | Vue.js Search Functionality Development | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-do-a-search) |
| 027 | Product List with Layout Switching | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-layout-switch) |
| 028 | Build a Vue.js E-book Reader | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-read-it) |
| 029 | Correctly Warn Incorrect v-Slot Usage | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-correctly-warn-incorrect-v-slot-usage) |
| 030 | Adding Deprecation Warning to Vue Router | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-deprecated-addroutes) |
| 031 | Real-Time Sentence Search with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-beautiful-sentences) |
| 032 | The Boundless Sea of Learning | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-the-boundless-sea-of-learning) |
| 033 | A Good Review for the Takeout | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-a-good-review-for-the-takeout) |
| 034 | Address Management Web Application | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-add-new-address) |
| 035 | Bing Dwen Dwen Mood Scale | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-bing-dwen-dwen-mood-scale) |
| 036 | Building a Traffic Lights System with JavaScript | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-colour-changeable-light) |
| 037 | Building a Simple Search Functionality | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-confusing-this) |
| 038 | Pagination Implementation with Axios | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-course-list) |
| 039 | Escape From the Dual Vector Foil | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-escape-from-the-dual-vector-foil) |
| 040 | Build a Guess the Coin Game | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-guess-the-coin) |
| 041 | Random Greeting Card Generator | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-holiday-greeting-card) |
| 042 | Movie Ticket Reservation System | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-movie-ticket-reservation) |
| 043 | Axios-Driven Incantation Treasure Hunt | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-mysterious-incantation) |
| 044 | Create Responsive Modal Boxes | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-naughty-modal-box) |
| 045 | Building Reusable Pagination Component | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-pagination-component) |
| 046 | Spell Out a Future | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-spell-out-a-future) |
| 047 | Manage MySQL User Permissions | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-user-permission-management) |
| 048 | Web-based HTML Presentation Builder | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-web-ppt) |
| 049 | Custom Form Validation with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-custom-form-validator) |
| 050 | Empty pathMatch for Correct Path Calculation | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-empty-pathmatch-for-correct-path-calculation) |
| 051 | Vue.js Shopping Cart with Drag and Drop | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-fun-shopping) |
| 052 | Implement Search Suggestions with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-input-search-suggestions) |
| 053 | Vue.js Buttons and Value Updating | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-magic-failure) |
| 054 | Building Dynamic Menu Tree Search with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-menu-tree-search) |
| 055 | Fixing Vue Router's cleanPath Function | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-multiple-slashes) |
| 056 | Retrieving Object Parameters From Query | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-retrieving-object-parameters-from-query) |
| 057 | Building a Vue.js Shopping Cart | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-shopping-cart) |
| 058 | Building a Vue.js Store Status Switcher | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-switch-business-status) |
| 059 | Implement Efficient Virtual Scrolling with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-virtual-scroll-list) |
| 060 | Depth of Field in Images | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-depth-of-field-in-images) |
| 061 | Responsive Navigation with Custom React Hook | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-browser-window-size) |
| 062 | React Theme Switcher Application | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-change-page-theme) |
| 063 | React Colour Filter Application | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-colour-filter) |
| 064 | Implementing React Navigation Features | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-navigation-features) |
| 065 | Create Responsive Business Card with React | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-personal-card-generator) |
| 066 | Build Interactive React Components | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-show-and-hide) |
| 067 | Mobile Phone Number Verification | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-account-verification) |
| 068 | Dynamization of Homepage Data | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-dynamization-of-homepage-data) |
| 069 | Fix the Test in async.spec.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-fix-the-test-in-asyncspecjs) |
| 070 | Data Visualization with Echarts and JSON | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-food-protein-revealed) |
| 071 | Handling Null Values Correctly | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-handling-null-values-correctly) |
| 072 | Let’s Have a Meeting Together | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-lets-have-a-meeting-together) |
| 073 | Building Login with Vue.js and Vuex | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-missing-token) |
| 074 | Remove the Warning Generated by pathMatch | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-remove-the-warning-generated-by-pathmatch) |
| 075 | Revisit Route Triggers Too Early | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-revisit-route-triggers-too-early) |
| 076 | Router Query Value Changed | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-router-query-value-changed) |
| 077 | Building Flexible Skeleton Screens | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-skeleton-screen) |
| 078 | Time Conversion Tool with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-time-conversion-tool) |
| 079 | Build a Vue.js Task Manager | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-time-management-master) |
| 080 | Interactive Film Collection Web App | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-collection-of-films) |
| 081 | Building Responsive Accordion Interfaces | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-folding-accordion) |
| 082 | Fruit Matching Game with HTML, CSS, JavaScript | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-fruit-for-fun) |
| 083 | Fruit Stacking Game with HTML, CSS, JavaScript | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-fruit-stacker) |
| 084 | Simple Prize Draw Application | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-prize-draw) |
| 085 | Building a Voting Application | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-valuable-vote) |
| 086 | Weekly Weather Forecast Application Development | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-weather-forecast-query) |
| 087 | Hard Work Pays Off | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-hard-work-pays-off) |
| 088 | Real-Time Sales Dashboard with Echarts | β˜…β˜…β˜† | [πŸš€ Start Building](https://labex.io/courses/project-sales-dashboard) |
| 089 | Creating Interactive Bar Charts with ECharts | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-student-achievement-statistics) |
| 090 | Weather Trend Chart with Vue and Echarts | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-weather-trend) |
| 091 | Course Schedule CRUD With MyBatis | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-course-schedule-crud-with-mybatis) |
| 092 | Configuring Logging and Batch Aliasing in MyBatis | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-course-schedule-logging) |
| 093 | Extending Entity with Custom Properties | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-custom-type-handler) |
| 094 | Implementation of AJAX Requests Using JS | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-implementation-of-ajax-requests-using-js) |
| 095 | JSON Data Transfer With AJAX | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-json-data-transfer-with-ajax) |
| 096 | Logging Project Information With Log4j2 | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-logging-project-information-with-log4j2) |
| 097 | Operate the Course Table | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-operate-the-course-table) |
| 098 | Practical Use of resultMap | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-practical-use-of-resultmap) |
| 099 | User Permission Management System with JavaScript | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-permission-management) |
| 100 | Promisifying Callback-based Asynchronous Functions | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-encapsulate-promisify-function) |
| 101 | Building a News API with Node.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-news-api) |
| 102 | Building a User Management RESTful API with Node.j... | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-restful-api-development) |
| 103 | Building a Node.js Reverse Proxy | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-reverse-proxy) |
| 104 | Data Formatting and Visualization with Vue.js | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-table-data-conversion) |
| 105 | Time With Your Phone | β˜…β˜†β˜† | [πŸš€ Start Building](https://labex.io/courses/project-time-with-your-phone) |

## More Projects

- [Linux Programming Projects](https://github.com/labex-labs/practice-linux-programming-projects)
- [Python Programming Projects](https://github.com/labex-labs/practice-python-programming-projects)
- [DevOps Programming Projects](https://github.com/labex-labs/practice-devops-programming-projects)
- [Web Development Programming Projects](https://github.com/labex-labs/practice-web-development-programming-projects)
- [Data Science Programming Projects](https://github.com/labex-labs/practice-data-science-programming-projects)
- [Big Data Programming Projects](https://github.com/labex-labs/practice-bigdata-programming-projects)
- [Cyber Security Programming Projects](https://github.com/labex-labs/practice-cysec-programming-projects)
- [Machine Learning Programming Projects](https://github.com/labex-labs/practice-ml-programming-projects)
- [Docker Programming Projects](https://github.com/labex-labs/practice-docker-programming-projects)
- [Kubernetes Programming Projects](https://github.com/labex-labs/practice-kubernetes-programming-projects)
- [Git Programming Projects](https://github.com/labex-labs/practice-git-programming-projects)
- [Ansible Programming Projects](https://github.com/labex-labs/practice-ansible-programming-projects)
- [Jenkins Programming Projects](https://github.com/labex-labs/practice-jenkins-programming-projects)
- [Shell Programming Projects](https://github.com/labex-labs/practice-shell-programming-projects)
- [Java Programming Projects](https://github.com/labex-labs/practice-java-programming-projects)
- [Hadoop Programming Projects](https://github.com/labex-labs/practice-hadoop-programming-projects)
- [C++ Programming Projects](https://github.com/labex-labs/practice-cpp-programming-projects)
- [C Programming Projects](https://github.com/labex-labs/practice-c-programming-projects)
- [MySQL Programming Projects](https://github.com/labex-labs/practice-mysql-programming-projects)
- [Go Programming Projects](https://github.com/labex-labs/practice-go-programming-projects)
- [Rust Programming Projects](https://github.com/labex-labs/practice-rust-programming-projects)
- [OpenCV Programming Projects](https://github.com/labex-labs/practice-opencv-programming-projects)
- [Django Programming Projects](https://github.com/labex-labs/practice-django-programming-projects)
- [Pandas Programming Projects](https://github.com/labex-labs/practice-pandas-programming-projects)
- [NumPy Programming Projects](https://github.com/labex-labs/practice-numpy-programming-projects)
- [scikit-learn Programming Projects](https://github.com/labex-labs/practice-sklearn-programming-projects)
- [Matplotlib Programming Projects](https://github.com/labex-labs/practice-matplotlib-programming-projects)
- [Algorithm Programming Projects](https://github.com/labex-labs/practice-algorithm-programming-projects)
- [HTML Programming Projects](https://github.com/labex-labs/practice-html-programming-projects)
- [CSS Programming Projects](https://github.com/labex-labs/practice-css-programming-projects)
- [JavaScript Programming Projects](https://github.com/labex-labs/practice-javascript-programming-projects)
- [React Programming Projects](https://github.com/labex-labs/practice-react-programming-projects)
- [jQuery Programming Projects](https://github.com/labex-labs/practice-jquery-programming-projects)

## Other Lists

- πŸ”— [JavaScript Free Tutorials](https://github.com/labex-labs/javascript-free-tutorials)
- πŸ”— [Awesome Programming Projects](https://github.com/labex-labs/awesome-programming-projects)
- πŸ”— [Awesome Programming Courses](https://github.com/labex-labs/awesome-programming-courses)