{"id":23076713,"url":"https://github.com/alnahian2003/100jsproject","last_synced_at":"2026-03-20T00:29:29.802Z","repository":{"id":39913572,"uuid":"449168226","full_name":"alnahian2003/100jsproject","owner":"alnahian2003","description":"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 😀","archived":false,"fork":false,"pushed_at":"2022-06-25T20:47:51.000Z","size":229,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-03T12:17:00.843Z","etag":null,"topics":["100projects","100projectsofcode"],"latest_commit_sha":null,"homepage":"https://alnahian2003.github.io/100jsproject","language":"HTML","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/alnahian2003.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}},"created_at":"2022-01-18T06:32:28.000Z","updated_at":"2023-06-25T08:07:15.000Z","dependencies_parsed_at":"2022-09-21T05:01:18.696Z","dependency_job_id":null,"html_url":"https://github.com/alnahian2003/100jsproject","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/alnahian2003/100jsproject","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnahian2003%2F100jsproject","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnahian2003%2F100jsproject/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnahian2003%2F100jsproject/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnahian2003%2F100jsproject/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alnahian2003","download_url":"https://codeload.github.com/alnahian2003/100jsproject/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alnahian2003%2F100jsproject/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28571556,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T12:50:50.164Z","status":"ssl_error","status_checked_at":"2026-01-19T12:50:42.704Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["100projects","100projectsofcode"],"created_at":"2024-12-16T09:43:24.379Z","updated_at":"2026-01-19T14:01:24.147Z","avatar_url":"https://github.com/alnahian2003.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 100JavaScriptProjects\n\nI 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 😀\n\n## Project 1: Live Search Filter\n\nIn 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.\n\n![Live Search Filter](https://user-images.githubusercontent.com/61485238/149883852-27e8e4fb-7a45-4887-addb-d9436a037cf7.png)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/filter.html)**\n\n## Project 2: Dark/Light Theme Changer\n\nHere 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.\n\n![Dark/Light Theme Changer](https://user-images.githubusercontent.com/61485238/150562393-10cd67d5-5777-45c1-8b47-8ea780029b30.jpg)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/themechanger.html)**\n\n## Project 3: Advanced Theme Changer\n\nThis 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.\n\n![Advanced Dark/Light Theme Changer](https://user-images.githubusercontent.com/61485238/150644122-4c4f8265-b648-44c0-ad71-8a290d31c4f9.jpg)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/theme-changer-v2.html)**\n\n## Project 4: Simple Skeleton Screen Loading Animation\n\nThis 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\n\n![Skeleton Loader Animation](https://user-images.githubusercontent.com/61485238/150643977-c3bff747-bb2e-4ff0-9db2-00ff48aecc50.jpg)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/skeleton-loader)**\n\n## Project 5: Simple TODO List With LocalStorage\n\nIn this project, I tried implementing my basic understandings to build a very simple TODO list web app with the LocalStorage integration.\n[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]\n\n![Simple TODO List](https://user-images.githubusercontent.com/61485238/151235449-11ea5168-0532-4b9b-b328-ff52c2c92abd.jpg)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/todo.html)**\n\n## Project 6: Playing With AJAX\n\nI've learned to play with the basics of AJAX request in JavaScript. I will work more on this later.\n\n![Playing With Ajax](ajax/preview.png)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/ajax)**\n\n## Project 7: Playing With Fetch API\n\nIn 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!\n\n[Pico CSS](https://picocss.com) is used in this project for base styles. I have plans to use this amazing CSS Framework on my further projects.\n\n![Playing With Fetch API](fetch-api/preview.png)\n**[Live Demo](https://alnahian2003.github.io/100jsproject/fetch-api)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falnahian2003%2F100jsproject","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falnahian2003%2F100jsproject","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falnahian2003%2F100jsproject/lists"}