Skip to content

NithinSangsi/JavaScriptBasics

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

6 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸ“˜ JavaScript Learning by Nithin

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.


πŸ›  Prerequisites & Setup

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.

πŸ“ Folder Structure

πŸ“¦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.

πŸš€ How to Run

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.

🧠 What's Inside (index.js)

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

⚠️ Note to Learners: All code sections are well-commented for learning. Please remove the comments and try to write and understand the code yourself for best learning outcomes.

🎯 Learning Outcomes

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

πŸ’¬ Feedback or Suggestions

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

About

Know the basics of JavaScript !!!!

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published