Instant Search Bar: An instant search is a feature that allows you to display results as a user types in the search query. It improves user experience and the user does not need to wait. By building this you learn event listeners, API calls, CSS animation, some JS classes, and more.

Sticky Notes App: You can make sticky notes app with a movable feature like drag and drop anywhere on the board. You can also add user registration but you can also try with localstorage. By building this you learn HTML Drag and Drop API, events, JSON, CSS.

Voting App: If you want to also learn backend with JavaScript then this project help you with that. Backend with NodeJs and as the database you can use MongoDB and frontend with JavaScript. You will learn how the database works, NoSQL database, CSS, Dom manipulation obviously, Js classes, events, and more.

Habit Tracker: This is a productivity app idea. You can ask the user which habit you build or want to get rid of. The app will count days and store their progress. Also, you can add a journal feature where users can write logs. You need a backend for this to store the user’s data.

Image Editor: You can use HTML5 canvas to edit images with vanilla JavaScript. You can add features such as rotate, cropping, flip, filters, and more. You will learn how to manipulate images with canvas.

Meme generator: Start with a simple, with two inputs add text on top and bottom to the image with HTML5 canvas. You will learn how to draw text on image with HTML5 canvas and dimensions.

Virtual Keyboard: Virtual keyboard will reduce the risk of password theft. You can build a virtual keyboard just with HTML, CSS, and vanilla JavaScript. You’ll mostly use key events while building this project.

Browser extension: No it’s not complex. You can convert all the above projects with the browser extension. You will learn about manifest.json. This is where you determine your application’s data in a “manifest.json” file so the browser can perceive and acknowledge it.

Happy Coding :)