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