JavaScript Learning Repository

This repository contains structured JavaScript examples, exercises, and browser-based projects arranged by topic and complexity.

Overview

• sandbox/: Fundamental JavaScript concepts and syntax.
• advanced-js/: Deeper JavaScript behaviors, object-oriented programming, and asynchronous coding.
• dom-manipulation/: Browser DOM API usage, event handling, and page updates.
• mini-apps/: Small interactive applications and HTML demos.
• mini-project/: Larger project examples and styled browser projects.
• assets/: Supporting images and assets used by example projects.

Directory structure

Folder tree

Javascript/
├── advanced-js/
├── assets/
├── dom-manipulation/
├── mini-apps/
├── mini-project/
├── sandbox/
├── README.md
└── .gitignore

Show full folder and file tree

Javascript/
├── advanced-js/
│   ├── index.html
│   ├── async/
│   │   ├── async-await.js
│   │   ├── async-intro.js
│   │   ├── fetch-api.js
│   │   ├── modules.js
│   │   ├── promises.js
│   │   └── timeouts.js
│   ├── functional-programming/
│   │   ├── callback.js
│   │   ├── closures.js
│   │   ├── forEach.js
│   │   └── map-filter-reduce.js
│   └── oop/
│       ├── classes.js
│       ├── constructors.js
│       ├── getters-setters.js
│       ├── inheritance.js
│       ├── objects-and-this.js
│       ├── sorting.js
│       ├── static.js
│       └── super.js
├── assets/
│   ├── dices/
│   │   ├── die1.png
│   │   ├── die2.png
│   │   ├── die3.png
│   │   ├── die4.png
│   │   ├── die5.png
│   │   └── die6.png
│   └── nanikore.jpeg
├── dom-manipulation/
│   ├── index.html
│   ├── events/
│   │   ├── key-events.js
│   │   └── mouse-events.js
│   ├── manipulation/
│   │   ├── class-list.js
│   │   ├── dom-navigation.js
│   │   ├── modify-html.js
│   │   └── show-hide.js
│   └── selectors/
│       ├── element-selectors.js
│       └── nodelists.js
├── mini-apps/
│   ├── calculator.html
│   ├── counter.html
│   ├── diceRoller.html
│   ├── digitalclock.html
│   ├── image-slider.html
│   ├── random-password-generator.html
│   ├── rock-paper-scissor.html
│   └── stopwatch.html
├── mini-project/
│   ├── index.html
│   ├── style.css
│   └── weather-app.js
├── sandbox/
│   ├── app.js
│   ├── arrow-functions.js
│   ├── function-expressions.js
│   ├── index.html
│   ├── mathUtil.js
│   ├── restParameters.js
│   ├── spreadOperator.js
│   ├── style.css
│   ├── data-structures/
│   │   ├── array-objects.js
│   │   ├── array-shuffling.js
│   │   ├── destructuring.js
│   │   ├── json-basics.js
│   │   ├── names.json
│   │   ├── nested-objects.js
│   │   ├── people.json
│   │   └── person.json
│   └── utilities/
│       ├── dates.js
│       └── error-handling.js
├── README.md
└── .gitignore

sandbox/

Basic JavaScript building blocks.

• basic-ops/: variables, arithmetic, type conversion, constants, math methods, ternary logic, boolean operators.
• control-flow/: conditional statements and loops.
• data-structures/: strings, arrays, spread/rest, destructuring, nested objects, JSON basics, array transformations.
• functions-basics/: function declarations, scope, expressions, and arrow functions.
• utilities/: helper patterns for random values, dates, and error handling.

advanced-js/

Intermediate and advanced JavaScript topics.

• functional-programming/: callbacks, forEach, map, filter, reduce, closures.
• oop/: working with this, constructors, classes, inheritance, getters/setters, sorting, static behavior, and super.
• async/: timers, promises, async/await, Fetch API, and module examples.

dom-manipulation/

Browser-focused examples.

• selectors/: selecting DOM elements and working with node lists.
• events/: mouse and keyboard events.
• manipulation/: DOM traversal, updating HTML, showing/hiding elements, and class management.

mini-apps/

Interactive example demos.

• calculator.html
• counter.html
• diceRoller.html
• digitalclock.html
• image-slider.html
• random-password-generator.html
• rock-paper-scissor.html
• stopwatch.html

mini-project/

A larger, styled browser project with a complete UI example.

• index.html
• style.css
• weather-app.js

assets/

Supporting images and static assets used by the demos.

• dices/: images for dice roll examples.
• nanikore.jpeg: standalone asset file.

How to use

1. Open the folder in a code editor.
2. Explore sandbox/ for core syntax and language fundamentals.
3. Move into advanced-js/ to learn JavaScript-specific behaviors and async programming.
4. Run the HTML examples in dom-manipulation/ and mini-apps/ in a browser to see interactive behavior.

Notes

• The repository is organized for learning and experimentation.
• Each directory groups related examples so you can progress from basic concepts to complete interactive projects.