added css-grid & Js-DOM cheatSheet

Author: rahulraj22

Assets/gameMusic.mp3

@@ -126,4 +126,5 @@
 
 ## Learn More about CSS Flexbox from here:
 
-https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+https://css-tricks.com/snippets/css/a-guide-to-flexbox/
+[![Learn More about CSS Flexbox from here:](https://css-tricks.com/wp-json/social-image-generator/v1/image/21059)](https://youtu.be/3nLglJtUHjA "CSS Flexbox Tutorial for Beginners")

CheatSheets/CSS Flexbox-Cheatsheet.md

@@ -0,0 +1,141 @@
+![JavaScript DOM Tutorial for Beginners](https://vishal-raj-1.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F381724cd-61ee-4dda-9317-da3c96afc9c6%2Fcss-3.png?table=block&id=e3ef2276-f491-476f-bbc5-e17bc16074c5&spaceId=2119cbee-b8d9-4533-9b59-63ea95d76e4e&width=250&userId=&cache=v2)
+
+# CSS Grid Cheatsheet
+## 1. Grid container properties
+
+## Display
+```css
+/* Sets the element to a grid container. */
+.container {
+  display: grid;
+}
+```
+
+## Grid Template Columns
+```css
+/* Defines the columns of the grid. */
+.container {
+  grid-template-columns: 100px 100px 100px;
+}
+```
+
+## Grid Template Rows
+```css
+/* Defines the rows of the grid. */
+.container {
+  grid-template-rows: 100px 100px;
+}
+```
+
+## Grid Template Areas
+```css
+/* Defines the areas of the grid. */
+.container {
+  grid-template-areas: 
+    "header header"
+    "sidebar content"
+    "footer footer";
+}
+```
+
+## Gap
+```css
+/* Specifies the size of the gap between grid items. */
+.container {
+  gap: 10px;
+}
+```
+
+## Justify Items
+```css
+/* Aligns items along the inline (row) axis. */
+.container {
+  justify-items: center;
+}
+```
+
+# Align Items
+```css
+/* Aligns items along the block (column) axis. */
+.container {
+  align-items: center;
+}
+```
+
+# Justify Content
+```css
+/* Aligns the grid along the inline (row) axis. */
+.container {
+  justify-content: center;
+}
+```
+
+# Align Content
+```css
+/* Aligns the grid along the block (column) axis. */
+.container {
+  align-content: center;
+}
+```
+
+## 2. Grid Item Properties
+## Grid Column Start
+
+```css
+/* Specifies the start position of a grid item along the inline (row) axis. */
+.item {
+  grid-column-start: 1;
+}
+```
+
+## Grid Column End
+```css 
+/* Specifies the start position of a grid item along the inline (row) axis. */
+.item {
+  grid-column-start: 1;
+}
+```
+
+## Grid Row Start
+```css
+/* Specifies the start position of a grid item along the block (column) axis. */
+.item {
+  grid-row-start: 1;
+}
+```
+
+## Grid Row End
+```css
+/* Specifies the end position of a grid item along the block (column) axis. */
+.item {
+  grid-row-end: 3;
+}
+```
+
+## Grid Area
+```css
+/* Specifies both the start and end positions of a grid item. */
+.item {
+  grid-area: 1 / 1 / 3 / 3;
+}
+```
+
+## Justify Self
+```css
+/* Aligns a grid item along the inline (row) axis. */
+.item {
+  justify-self: center;
+}
+```
+
+## Align Self
+```css
+/* Aligns a grid item along the block (column) axis. */
+.item {
+  align-self: center;
+}
+```
+
+## Learn More about CSS Grid from here:
+https://css-tricks.com/snippets/css/complete-guide-grid/
+[![CSS Grid Tutorial for Beginners](https://i.ytimg.com/vi/ULp7wPJ-rzQ/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLAF_KnaTkQYj55zEN0fDGX-74JVKQ)](https://www.youtube.com/watch?v=ULp7wPJ-rzQ&ab_channel=VishalRajput "CSS Grid Tutorial for Beginners")

CheatSheets/CSS Grid-CheatSheet.md

@@ -8,11 +8,11 @@
 | `git config --global user.email "youremail@example.com"` | Set your email for Git.                  |
 | `git config --global color.ui true`                      | Enable color output.                               |
 | `git init`                                               | Initialize a new Git repository.                   |
-| `git clone <repository url>`                             | Clone an existing repository to your local machine.|
+| `git clone <repository url>`                             | Clone an existing repository to your local machine.[either using https or SSH(when you have linked github with your computer using SSH keys) link]                 |
 | `git status`                                             | Show the status of your working directory and staging area.|
 | `git add <file>`                                         | Add a file to the staging area.                     |
 | `git commit -m "Commit message"`                         | Commit changes in the staging area with a message.  |
-| `git branch`                                             | Show a list of all branches in the repository.      |
+| `git branch`                                             | Show a list of all branches in the repository.[your current working branch will be green coloured with * mark before it]      |
 | `git branch <branch name>`                               | Create a new branch with the given name.            |
 | `git checkout <branch name>`                             | Switch to the branch with the given name.           |
 | `git merge <branch name>`                                | Merge changes from the specified branch into the current branch.|

CheatSheets/Git-Cheatsheet.md

@@ -183,7 +183,7 @@
 
 ```html
 
-<audio src="audio_file.mp3" controls></audio>
+<video src="video_file.mp4" controls></video>
 
 ```
 

CheatSheets/HTML-CheatSheet.md

@@ -0,0 +1,68 @@
+![JavaScript DOM Tutorial for Beginners](https://vishal-raj-1.notion.site/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F2ce8ae32-c03f-42db-9865-9a8abc50aa83%2Fjs.png?table=block&id=408271f3-22a5-4395-8ee8-755bc459674e&spaceId=2119cbee-b8d9-4533-9b59-63ea95d76e4e&width=250&userId=&cache=v2)
+
+# JavaScript DOM Cheatsheet
+
+## What is DOM?
+
+The Document Object Model (DOM) is a programming interface for HTML documents. It represents the page so that programs can change the document structure, style, and content.
+
+## DOM Methods to find HTML elements:
+
+### Get Element by Id
+Returns the element that has the ID attribute with the specified value.
+```jsx
+let element = document.getElementById("myElement");
+```
+
+### Get Element by Class Name
+Returns a collection of all elements in the document with the specified class name.
+```jsx
+let elements = document.getElementsByClassName("myClass");
+```
+
+### Get Elements By Tag Name
+Returns a collection of all elements in the document with the specified tag name.
+```jsx
+let elements = document.getElementsByTagName("p");
+```
+
+### Query Selector All
+Returns all elements that matches a specified CSS selector(s) in the document
+```jsx
+let elements = document.querySelectorAll(".myClass");
+```
+
+### InnerHTML
+Gets or sets the HTML content within an element.
+```jsx
+element.innerHTML = "<p>New HTML content</p>";
+```
+
+### InnerText
+Gets or sets the text content within an element.
+```jsx
+element.innerText = "New text content";
+```
+
+### Add Class
+Adds one or more class names to an element.
+```jsx
+element.classList.add("newClass");
+```
+
+### Remove Class
+Removes one or more class names from an element.
+```jsx
+element.classList.remove("oldClass");
+```
+
+### Add Event Listener
+Attaches an event handler to the specified element.
+```jsx
+const myButton = document.getElementById("myButton");
+
+myButton.addEventListener("click", function() {
+  console.log("Button clicked!");
+});
+```
+

CheatSheets/JS DOM-CheatSheet.md

@@ -210,6 +210,12 @@ const fruits = ['apple', 'banana', 'orange'];
 for (let fruit of fruits) {
   console.log(fruit);
 }
+// There is difference b/w for(let fruit in fruits) vs as shown above
+// `for...in` is used to iterate over properties of objects whereas `for...of` will iterate over values
+
+for(let fruit in fruits){
+  console.log(fruit); // O/P: 0 1 2 
+}
 
 // forEach method for iterating over arrays
 fruits.forEach((fruit, index) => {
@@ -301,6 +307,11 @@ console.log(even); // [2]
 ### Reduce method
 
 **`reduce()`** applies a function to each element of an array, resulting in a single output value.
+```jsx
+const numbers = [1, 2, 3];
+const sum = numbers.reduce((total, num) => total + num, 0);
+console.log(sum); // 6
+```
 
 Learn More about JS from here:
 [![JavaScript Tutorial for Beginners](https://img.youtube.com/vi/9Shi7sbrHqY/sddefault.jpg)](https://www.youtube.com/watch?v=9Shi7sbrHqY&ab_channel=VishalRajput "JavaScript Tutorial for Beginners")

CheatSheets/JS-CheatSheet.md

@@ -12,7 +12,7 @@
         <div id="input-box">
             <input type="text" id="addTitle" placeholder="Title">
             <textarea name="" id="addText" cols="30" rows="10" placeholder="Take a note.."></textarea>
-
+            
             <button id="addNote">Add</button>
         </div>