Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/theamnabb/javascript

Repository containing my journey of JavaScript practice, from basic concepts to advanced techniques.
https://github.com/theamnabb/javascript

html-css-javascript

Last synced: 10 months ago
JSON representation

Repository containing my journey of JavaScript practice, from basic concepts to advanced techniques.

Awesome Lists containing this project

README 

          
# JavaScript

# A Coding Practice Repository



## Folder Structure



### 01_basics



#### 01_variables.js

- Added variable declaration examples for better understanding.



#### 02_data-types.js

- Introduced various JavaScript data types with practical examples.



#### 03_conversion-operations.js

- Demonstrated type conversion operations in JavaScript.



#### 04_data-types-summary.js

- Summarized key points about JavaScript data types.



#### 05_string.js

- Added string manipulation examples and exercises.



#### 06_nums_and_math.js

- Explained numeric data types and basic math operations.



#### 07_dates_in_JS.js

- Covered Date object and all date related operations in JS.



  ---

  



### 02_basics



#### 01_arrays.js

- Illustrated array creation and manipulation examples.



#### 02_arrays.js

- Introduced advanced array operations and methods.

#### 03_objects.js

- Explained object creation and manipulation in JavaScript.



#### 04_objects.js

- Added advanced object-related examples and use cases.



---

### 03_basics



#### 01_functions.js

- Added examples illustrating JavaScript functions and their usage.



#### 02_scopes.js

- Introduced concepts of variable scopes in JavaScript.



#### 03_arrow.js

- Added examples showcasing arrow functions and their advantages.



#### 04_IIFE.js

- Implemented Immediately Invoked Function Expressions (IIFE) for encapsulation.



---



### 04_control_flow



#### one.js

- Added examples demonstrating the use of control flow statements in JavaScript.



#### switch.js

- Illustrated the implementation of switch statements for better code organization.



#### truthy_and_falsy.js

- Explained truthy and falsy values in JavaScript, showcasing their impact on control flow.



---

### 05_iterations_or_loops



#### 01_one.js

- Added examples illustrating the use of the 'for' loop in JavaScript.



#### 02_two.js

- Introduced the 'while' loop with practical code examples.



#### 03_three.js

- Demonstrated the versatility of the 'do-while' loop in various scenarios.



#### 04_four.js

- Added examples showcasing the 'for...in' loop for iterating over object properties.



#### 05_five.js

- Implemented the 'for...of' loop for iterating over iterable objects like arrays.



#### 06_six.js

- Showcased the use of the 'forEach' loop for iterating over arrays.



#### 07_seven.js

- Illustrated the 'map' function for transforming elements in an array.



#### 08_eight.js

- Added examples demonstrating the use of the 'filter' function for array filtering.



#### summary_loop_practice.js

- Consolidated all loop types, including 'for', 'while', 'do-while', 'for...in', 'for...of', 'forEach', 'map', and 'filter' for comprehensive loop practice.



---



### 06_DOM



#### 01_one.html

- Added the initial HTML structure for practicing DOM manipulation.



#### 02_two.html

- Created a new HTML file to explore additional DOM manipulation scenarios.



#### 03_three.html

- Implemented HTML code for further DOM manipulation exercises.



#### 04_four.html

- Added HTML content to extend the practice of working with the Document Object Model (DOM).



#### DOM Diagram.png

- Included a visual representation of the DOM structure for reference and learning.



#### DOM1.PNG & DOM2.PNG

- Output 

---



### 07_projects



#### 01_project1

- **Name:** Color Switcher

- **Description:** Implement a color switcher that allows users to change the background color dynamically.



---



#### 02_project2

- **Name:** BMI Calculator

- **Description:** Develop a BMI (Body Mass Index) calculator to help users calculate their BMI based on input height and weight.



  BMICalculator




---



#### 03_project3

- **Name:** Digital Clock

- **Description:** Create a digital clock that displays the current time and updates in real-time.



  DigitalCalculator




---



#### 04_project4

- **Name:** Number Guessing Game

- **Description:** Build a number guessing game where users try to guess a randomly generated number within a specified range.



  GuessNumber




---



#### 05_project5

- **Name:** Background Color Changer

- **Description:** Implement a feature where clicking a "Start" button changes the background color of the body each time.



  BgTimer




---



#### 06_project6

- **Name:** Key Magic

- **Description:** Create a project that prints the name and key code of a pressed key when any key is pressed on the keyboard.



  KeyMagic




---



### 08_events



#### event_basics.js

- **Name:** Event Basics JavaScript

- **Description:** Basic JavaScript file for practicing event handling.



#### 01_one.html

- **Name:** Event Practice 1

- **Description:** HTML file for practicing JavaScript events.



#### 02_two.html

- **Name:** Cena Event

- **Description:** HTML file featuring an image of John Cena, linked to an event in the JavaScript file.



#### 03_three.html

- **Name:** Lesnar Event

- **Description:** HTML file featuring an image of Brock Lesnar, linked to an event in the JavaScript file.



#### Images:

- **cena.png:** Image of John Cena used in Cena Event.

- **lesnar.png:** Image of Brock Lesnar used in Lesnar Event.

- **masha.png:** Image of masha (description needed).

- **masha2.png:** Image of masha (description needed).



---



### 09_API



#### apiRequest.html

- **Name:** API Request

- **Description:** HTML file demonstrating the usage of XHR for making asynchronous requests to an API.



#### apiRequestAssignment.html

- **Name:** API Request Assignment

- **Description:** HTML file showcasing an assignment or project related to making asynchronous requests using XHR.



---



### 10_promises



#### 01_promises.js

- **Name:** Promises Implementation

- **Description:** JavaScript file implementing promise functionality in depth.



---

### 11_classes_and_OOP



#### OOP.js

- **Name:** OOP JavaScript

- **Description:** General overview of Object-Oriented Programming (OOP) in JavaScript.



#### bind.html

- **Name:** Binding HTML

- **Description:** HTML file related to binding in JavaScript.



#### call.js

- **Name:** Call JavaScript

- **Description:** JavaScript file demonstrating the use of the `call` method.



#### inheritance.js

- **Name:** Inheritance JavaScript

- **Description:** Illustration of inheritance in JavaScript.



#### mathPi.js

- **Name:** Math.PI JavaScript

- **Description:** Usage of the `Math.PI` constant.



#### myClass.js

- **Name:** MyClass JavaScript

- **Description:** Implementation of a custom class.



#### notes.md

- **Name:** Notes Markdown

- **Description:** Documentation notes covering the topics in this folder.



#### staticProp.js

- **Name:** Static Property JavaScript

- **Description:** Usage of static properties in classes.

---



### 12_localStorage





  LocalStorage




---



## Getting Started



To make the most out of this repository, follow these steps:



1. Clone the repository to your local machine:



   ```bash

   git clone https://github.com/aamna-ansari/JavaScript.git