Skip to content

In this repository, I will try to build simple miniature projects using Vanilla JavaScript. I decided to enrich JS fundamentals and understand the core concepts for a better developer life experience ๐Ÿ˜€

Notifications You must be signed in to change notification settings

alnahian2003/100jsproject

Folders and files

NameName
Last commit message
Last commit date

Latest commit

ย 

History

56 Commits
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 
ย 

Repository files navigation

100JavaScriptProjects

I will try to build some simple miniature projects using Vanilla JavaScript. I decided to enrich my JS fundamentals and understand the core concepts for a better developer life experience ๐Ÿ˜€

Project 1: Live Search Filter

In this project, I tried to implement one of the most interesting JavaScript String Methods, named indexOf() to make a life search filter among the data.

Live Search Filter Live Demo

Project 2: Dark/Light Theme Changer

Here it's a very simple Dark/Light theme toggler-switcher-changer (whatever you call it ๐Ÿ˜„) with some extra cool localStorage integration, which let's us save your preferenced theme on the browsers local storage and use it whenever you visit the page again.

Dark/Light Theme Changer Live Demo

Project 3: Advanced Theme Changer

This is a newer and advanced version of the previous project. In this project, User Device default theme preference auto detect functionality added to improve accessibility.

Advanced Dark/Light Theme Changer Live Demo

Project 4: Simple Skeleton Screen Loading Animation

This is a beginner friendly project to learn how to implement skeleton animation on the page to improve accessibility. Note: This project will have an updated version later

Skeleton Loader Animation Live Demo

Project 5: Simple TODO List With LocalStorage

In this project, I tried implementing my basic understandings to build a very simple TODO list web app with the LocalStorage integration. [This app has a tiny little bug in it. For example, if you input some list items and then refresh the page, you will see the data remains. but again if you input some new list items, and then refresh the page again, you'll see that the older list items has been removed instead new list items showing as a list! I dunno what to call it, as a bug or a feature ๐Ÿ˜… You can name it whatever you want]

Simple TODO List Live Demo

Project 6: Playing With AJAX

I've learned to play with the basics of AJAX request in JavaScript. I will work more on this later.

Playing With Ajax Live Demo

Project 7: Playing With Fetch API

In this project, I did almost same stuffs as I did before on Project 6. But in this project I tried the Fetch API instead of xmlHttpRequest. I found it really smooth and more convenient!

Pico CSS is used in this project for base styles. I have plans to use this amazing CSS Framework on my further projects.

Playing With Fetch API Live Demo

About

In this repository, I will try to build simple miniature projects using Vanilla JavaScript. I decided to enrich JS fundamentals and understand the core concepts for a better developer life experience ๐Ÿ˜€

Topics

Resources

Stars

Watchers

Forks