Welcome to my JavaScript learning repository!
This repo contains several beginner to intermediate JavaScript mini-projects that I developed while learning from platforms like YouTube, W3Schools, and various online resources.
💡 This repository is a great reference for learners looking to understand JS concepts through practical examples.
To run and edit the files smoothly, you should install:
✅ Install Visual Studio Code
- Download & Install VSCode.
- Install the following useful extensions:
- Live Server : Auto-refreshes HTML in the browser.
- Prettier: For consistent code formatting.
- JavaScript (ES6) code snippets: To speed up JS coding.
💡 Alternatively, you can use IntelliJ or WebStorm with JS plugins.
- Install IntelliJ IDEA (Community/Ultimate).
- Install the JavaScript and HTML/CSS plugins.
- Enable Live Edit or use the built-in web preview.
📦javascript/
├── index.html # HTML file containing references to different JavaScript components
├── index.js # Main JavaScript learning file (with detailed topics & examples)
├── index1.js # Calculator logic using vanilla JS
├── styles.css # CSS for styling the calculator and other components and thre dice images are in the dice images folder for the dice mini project.
1. Clone or download this repository:
git clone https://github.com/NithinSangsi/JavaScriptBasics.git
2. Navigate to the folder:
cd javascript
3. Open the folder in Visual Studio Code:
code .
4. Open index.html and:
Right-click → Open with Live Server (if installed)
//Or open it manually in your browser
5. Open Developer Tools (Ctrl + Shift + I) to view console outputs.
The index.js file includes numerous JavaScript concepts and practical examples, such as:
✅ Variables, Strings, Booleans, Constants
➕ Arithmetic Operations, Type Conversion
💬 User Input Handling (Prompt, DOM input)
📄 DOM Manipulation
🔄 Conditional Statements (if, else, switch)
🔁 Loops (for, while)
📚 Arrays, Spread & Rest Operators
🧠 Math Object & String Methods
🎲 Dice Game, Password Generator, Number Guessing Game
⚙️ Functions, Callback Functions
📦 Functional Programming: map, filter, reduce
🧑🎓 OOP: Classes, Constructors, Inheritance, Getters/Setters
By using this repository, you will:
Strengthen your JavaScript fundamentals
Practice real-world DOM manipulations
Develop logic-building skills through mini-projects
Learn functional and object-oriented programming in JS
Understand client-side browser interaction
Have ideas or improvements ? or any Corrections ?
Feel free to fork this repository and submit a pull request.
You can also open an issue if you find any bugs or have suggestions.
🙏 Special Thanks
Thanks to these amazing learning platforms:
W3Schools {in-depth knowledge for the basics of Js}
JavaScript YouTube Tutorials
Online articles and documentation that inspired these Mini projects
👨💻 Author
Meeeeeeeeeeeeeeeeeeeeeee
Frontend & JavaScript Enthusiast