From e8e01cb06679d2bd78e645598547c40dff6ea10e Mon Sep 17 00:00:00 2001 From: Rahul Raj Date: Wed, 5 Apr 2023 03:28:05 +0530 Subject: [PATCH 1/5] added css-grid & Js-DOM cheatSheet --- Assets/gameMusic.mp3 | Bin 5005207 -> 5005207 bytes CheatSheets/CSS Flexbox-Cheatsheet.md | 3 +- CheatSheets/CSS Grid-CheatSheet.md | 141 ++++++++++++++++++++++++++ CheatSheets/Git-Cheatsheet.md | 4 +- CheatSheets/HTML-CheatSheet.md | 2 +- CheatSheets/JS DOM-CheatSheet.md | 68 +++++++++++++ CheatSheets/JS-CheatSheet.md | 11 ++ Projects/NotesApp/notesApp.html | 2 +- 8 files changed, 226 insertions(+), 5 deletions(-) create mode 100644 CheatSheets/CSS Grid-CheatSheet.md create mode 100644 CheatSheets/JS DOM-CheatSheet.md diff --git a/Assets/gameMusic.mp3 b/Assets/gameMusic.mp3 index b85cc7c99eb472e3e345f715158ddc4051255e10..b0565d61c7f543f854465b2002a95b533eae6912 100644 GIT binary patch delta 263 zcmWN=M@~Wk07cQz1f=;XDn&qgQ92?hAVsR|fWe!k J#rXN%Tmc)iY!(0j delta 263 zcmWN=M@~Wk07cQz1f=;XDn&qgQ92?hAVsQdfweGr2}@w)B1}jevMv~LPjU{YKl6b* znPiqlR@rnTyBu=rRxY{akyk$5$&ge!k J#rXN%Tmc<1Y#0Cl diff --git a/CheatSheets/CSS Flexbox-Cheatsheet.md b/CheatSheets/CSS Flexbox-Cheatsheet.md index 8ede811..99abe47 100644 --- a/CheatSheets/CSS Flexbox-Cheatsheet.md +++ b/CheatSheets/CSS Flexbox-Cheatsheet.md @@ -126,4 +126,5 @@ ## Learn More about CSS Flexbox from here: -https://css-tricks.com/snippets/css/a-guide-to-flexbox/ \ No newline at end of file +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") \ No newline at end of file diff --git a/CheatSheets/CSS Grid-CheatSheet.md b/CheatSheets/CSS Grid-CheatSheet.md new file mode 100644 index 0000000..3888896 --- /dev/null +++ b/CheatSheets/CSS Grid-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") \ No newline at end of file diff --git a/CheatSheets/Git-Cheatsheet.md b/CheatSheets/Git-Cheatsheet.md index 7b9f37e..da59af9 100644 --- a/CheatSheets/Git-Cheatsheet.md +++ b/CheatSheets/Git-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 ` | Clone an existing repository to your local machine.| +| `git clone ` | 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 ` | 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 ` | Create a new branch with the given name. | | `git checkout ` | Switch to the branch with the given name. | | `git merge ` | Merge changes from the specified branch into the current branch.| diff --git a/CheatSheets/HTML-CheatSheet.md b/CheatSheets/HTML-CheatSheet.md index e3d29e6..cd90396 100644 --- a/CheatSheets/HTML-CheatSheet.md +++ b/CheatSheets/HTML-CheatSheet.md @@ -183,7 +183,7 @@ ```html - + ``` diff --git a/CheatSheets/JS DOM-CheatSheet.md b/CheatSheets/JS DOM-CheatSheet.md new file mode 100644 index 0000000..956b0dd --- /dev/null +++ b/CheatSheets/JS DOM-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 = "

New HTML content

"; +``` + +### 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!"); +}); +``` + diff --git a/CheatSheets/JS-CheatSheet.md b/CheatSheets/JS-CheatSheet.md index b1be3ee..823604a 100644 --- a/CheatSheets/JS-CheatSheet.md +++ b/CheatSheets/JS-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") \ No newline at end of file diff --git a/Projects/NotesApp/notesApp.html b/Projects/NotesApp/notesApp.html index 96829ad..3495879 100644 --- a/Projects/NotesApp/notesApp.html +++ b/Projects/NotesApp/notesApp.html @@ -12,7 +12,7 @@
- +
From 9bc565677c0aab62baa1b7980bc1ef25f512cdc5 Mon Sep 17 00:00:00 2001 From: Rahul Raj Date: Wed, 5 Apr 2023 13:17:27 +0530 Subject: [PATCH 2/5] updated css grid cheatsheet --- CheatSheets/CSS Grid-CheatSheet.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CheatSheets/CSS Grid-CheatSheet.md b/CheatSheets/CSS Grid-CheatSheet.md index 3888896..59abed2 100644 --- a/CheatSheets/CSS Grid-CheatSheet.md +++ b/CheatSheets/CSS Grid-CheatSheet.md @@ -1,4 +1,4 @@ -![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 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 From 80be01e01a542e4a7ae9cc1c979b86db09ebb6b2 Mon Sep 17 00:00:00 2001 From: Rahul Raj Date: Wed, 5 Apr 2023 13:43:52 +0530 Subject: [PATCH 3/5] removed css cheatshee in home directory --- CheatSheets/JS DOM-CheatSheet.md | 68 ------------------------ CheatSheets/JavaScript DOM-Cheatsheet.md | 6 ++- 2 files changed, 4 insertions(+), 70 deletions(-) delete mode 100644 CheatSheets/JS DOM-CheatSheet.md diff --git a/CheatSheets/JS DOM-CheatSheet.md b/CheatSheets/JS DOM-CheatSheet.md deleted file mode 100644 index 956b0dd..0000000 --- a/CheatSheets/JS DOM-CheatSheet.md +++ /dev/null @@ -1,68 +0,0 @@ -![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 = "

New HTML content

"; -``` - -### 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!"); -}); -``` - diff --git a/CheatSheets/JavaScript DOM-Cheatsheet.md b/CheatSheets/JavaScript DOM-Cheatsheet.md index b3bb9d0..4ccde1f 100644 --- a/CheatSheets/JavaScript DOM-Cheatsheet.md +++ b/CheatSheets/JavaScript DOM-Cheatsheet.md @@ -1,3 +1,5 @@ +![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? @@ -82,6 +84,6 @@ myButton.addEventListener("click", function() { }); ``` -# Learn More about JavaScript DOM from here: -https://youtu.be/85jzHRTVdsc \ No newline at end of file +## Learn More about JavaScript DOM from here: +[![JS DOM Tutorial for Beginners](https://i.ytimg.com/vi/85jzHRTVdsc/hq720.jpg?sqp=-oaymwEcCNAFEJQDSFXyq4qpAw4IARUAAIhCGAFwAcABBg==&rs=AOn4CLDs_B6goLnSFqU6x2aesa56jJmg_Q)](https://www.youtube.com/watch?v=85jzHRTVdsc&t=5s&ab_channel=VishalRajput "JS DOM Tutorial for Beginners") From f6f281939dd79a16ebd94b2c9d82cf3932292384 Mon Sep 17 00:00:00 2001 From: Rahul Raj Date: Wed, 5 Apr 2023 13:55:21 +0530 Subject: [PATCH 4/5] removed CSS cheatsheet in home directory --- CSS-CheatSheet.md | 154 ---------------------------------------------- 1 file changed, 154 deletions(-) delete mode 100644 CSS-CheatSheet.md diff --git a/CSS-CheatSheet.md b/CSS-CheatSheet.md deleted file mode 100644 index 4ac3a1e..0000000 --- a/CSS-CheatSheet.md +++ /dev/null @@ -1,154 +0,0 @@ -# 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 end position of a grid item along the inline (row) axis. */ -.item { - grid-column-end: 3; -} -``` - -### 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: -[![Learn CSS Grid in 35 minutes: The Ultimate Crash Course for Beginners]](https://www.youtube.com/embed/ULp7wPJ-rzQ "Learn CSS Grid in 35 minutes: The Ultimate Crash Course for Beginners") From a94c7f751266a0ff5d1901d5761a74889d2028be Mon Sep 17 00:00:00 2001 From: Rahul Raj Date: Thu, 6 Apr 2023 11:24:43 +0530 Subject: [PATCH 5/5] logo renamed --- CheatSheets/CSS Grid-CheatSheet.md | 2 +- CheatSheets/JavaScript DOM-Cheatsheet.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/CheatSheets/CSS Grid-CheatSheet.md b/CheatSheets/CSS Grid-CheatSheet.md index 59abed2..e0bf0b6 100644 --- a/CheatSheets/CSS Grid-CheatSheet.md +++ b/CheatSheets/CSS Grid-CheatSheet.md @@ -1,4 +1,4 @@ -![CSS Grid 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 logo](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 diff --git a/CheatSheets/JavaScript DOM-Cheatsheet.md b/CheatSheets/JavaScript DOM-Cheatsheet.md index 4ccde1f..d5b4f9d 100644 --- a/CheatSheets/JavaScript DOM-Cheatsheet.md +++ b/CheatSheets/JavaScript DOM-Cheatsheet.md @@ -1,4 +1,4 @@ -![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) +![JS logo](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