This repository had been dormant since December 2021, but on November 5, 2023, at 4:30 AM, it was reincarnated as next-gen-mini-projects.
This repository has all sorts of mini projects. Here the code is provided along with live demo or final outcomes.
See Wild West ? to know more about this repository.
All the code is present inside the directories for respective category. Presently the available categories are -
| Project | Code | Tags | Description | Difficulty | Live Demo |
|---|---|---|---|---|---|
01 |
dark mode | Dark Mode, Toggle Switch | Read Here | easy | Live Demo |
02 |
background gif on button and text glow | Button 1, Text glow, Gif Background | Read Here | tea time | Live Demo |
03 |
random image animation and anime images api | Random Animation, Anime Images Api | Read Here | moderate | Live Demo |
04 |
simple text analyzer | Email, word, letter detector, Bacon Ipsum Api | Read Here | easy to moderate | Live Demo |
05 |
edit image source and custom context menu | Image Source change, Custom Right Click Menu, Random Unsplash Image | Read Here | moderate | Live Demo |
06 |
particle js example | Particle Js Example, Canvas, Animation | Read Here | easy to moderate | Live Demo |
07 |
page scroll progress bar | Page Scroll, Progress Bar | Read Here | easy | Live Demo |
08 |
quiz in video | HTML video properties, HTML Media API | Read Here | challenging | Live Demo |
09 |
syntax highlighting in website | highlight.js, clipboard.js, copying text to clipboard | Read Here | easy to moderate | Live Demo |
10 |
page pre loader | text-animation | Read Here | easy | Live Demo |
11 |
three.js shaktimaan | three.js | Read Here | easy to moderate | Live Demo |
12 |
responsive navbar | responsiveness through css and js | Read Here | easy to moderate | Live Demo |
| Project | Code | Tags | Description | Difficulty | Live Demo |
|---|---|---|---|---|---|
01 |
add random colored div | useState, useEffect, useRef, conditional rendering | Read Here | easy to moderate | Live Demo |
02 |
variation in sum of first 30 natural numbers | Chart.js, dynamic component rendering | Read Here | moderate | Live Demo |
03 |
preloader and react router | preloader, react-spinners, react-router | Read Here | easy to moderate | Live Demo |
05 |
useState hook | useState Hook, react Hooks Series | Read Here | easy to moderate | Live Demo |
| Project | Code | Tags | Description | Difficulty | Outcome |
|---|---|---|---|---|---|
01 |
extracting top billionaires info with beautiful soup | Beautiful Soup, Web Scraping | Read Here | challenging | Extracted Data |
02 |
strong custom password generator | exception handling, random module, string module | Read Here | challenging | See Output |
03 |
simple quick url shortener | pyshorteners, tinyurl | Read Here | tea time | See Output |
Simple Dark Mode Page using HTML, CSS and JS.
Glowing text animation with CSS and using gif in button background.
Fetching data from Waifu Pics Api and using pics in carousel that gives random pic animation from any of the 4 sides of carousel.
Counting the number of words, letters and emails in the given text.
Giving an option to change the image source and making custom context menu on right click. The idea of making custom context menu can be very useful at times. Some of the interesting things we can do with it is making a custom menu for video player or context menus like we see in figma, g-slides, etc.
Particle JS is a lightweight JavaScript Library that enables us to create particles on HTML canvas and do some really cool stuff with particles without actually having us to deal with canvas. Using this, many cool interactive animations can be made on hovering or clicking some field in website. If interested then you can visit this website to see what more stuff it can do - Link
Live Progress Bar which indicates the percentage of page height scrolled.
This project involves interaction with html video. I got the idea of this project while i was watching a coursera video and suddenly a quiz appeared in between the video. This kind of quiz is helpful to checkout if the learner has learned from the video till a certain point or whether the learner needs a revision. I thought this functionality is cool so i tried to implement it using vanilla js. A lot more can be done with this project but for now only the question appearance functionality is implemented.
A lot of websites show code on their platform. So for making the code look clean and attractive, syntax highlighting is necessary. In this project highlight.js is used for syntax highlighting and clipboard.js is used for copying the code to clipboard. As an example i have highlighted only three languages in the project but highlight.js offers highlighting for many other languages. Using these libraries is simple and doesn't require much time.
A pre loader for website which can be set upto our desired time. But many times, we just need a pre loader which disappears after page has loaded completely, so i have provided the code for that here but it is commented out since i have taken the desired time loader as an instance for the project.
Three.js is a powerful javascript library for animation. Many websites use it to display very attractive animations. Some people use it for making their portfolio attractive(and they often use particles.js too !), in short it is used wildly. Shaktimaan is an Indian Superhero from a TV series during late 90s - early 2000s and he has the capability to fly by spinning himself. If you have seen the live demo you might be still laughing, i was laughing too when i thought of making this and honestly it turned out to be funny. As soon as i discover some more funny things i will update this project a bit.
A responsive navbar project.
Simple illustration of useState, useEffect, useRef hooks and conditional rendering.
In this project Chart.js is used in order to build charts which represent the variation in sum of first 30 natural numbers. Here i have dynamically implemented 6 different chart types namely Line, Bar, Pie, Doughnut, Polar Area Chart and Radar Chart.
In this project two libraries are used, namely react-spinners and react-router. react Spinners is used for the preloader whereas the react Router helps us with routing.
useState Hook project - react Hooks Series.
Using Beautiful Soup library to extract info of current top billionaires such as Name, Net Worth, Residence, Stake and Assets. Link to Final Outcome File.
In this project user gets an option to either set a custom password or to get a random strong password. There is proper exception handling in the project so unusual/invalid response won't make our program crash. This project is challenging, because it is a bit lengthier to be done in an hour by following along the given code. But irrespective of the time it can take, it is a good project for practice. See the Output here
A project to make aware about pyshorteners Library. Most of the projects that belong to tea time difficulty are like this.
Welcome to The Wild West of this repository. As the name implies this section is wild. There won't be any code or project description here. So what is inside this section is not certain and can be found here -
-
What do the
tagsimply ?
🖊️ The tags contain information about the library/framework/concepts/methods/tools used in the project. -
What is there in the description ?
🖊️ Description has more infomation about the projects. It explains the project and sometimes has some information about the essentials used in the project. -
What decides the
difficultylevel of a project ?
🖊️ The difficulty level is decided by assumptions. So it will differ for different people. The thumb rule to decide is by assuming the amount of effort it can take to make the project if it is done by someone who is beginner in working with the tools used in the project.The difficulty levels are -
- tea time - You can easily do these projects while you are having a break time, snack or tea/refreshment. These projects quickly introduces something new(i.e. never introduced here before).
- easy
- easy to moderate
- moderate
- moderate to challenging
- challenging.
- How are the
categoriesdecided ?
🖊️ Each programming language is separated as a category and have their own respective directories. If it seems like there will be multiple projects from some library/framework then it is also separated as a category.