diff --git a/Assets/gameMusic.mp3 b/Assets/gameMusic.mp3 index b85cc7c..b0565d6 100644 Binary files a/Assets/gameMusic.mp3 and b/Assets/gameMusic.mp3 differ 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/CSS-CheatSheet.md b/CheatSheets/CSS Grid-CheatSheet.md similarity index 60% rename from CSS-CheatSheet.md rename to CheatSheets/CSS Grid-CheatSheet.md index 4ac3a1e..e0bf0b6 100644 --- a/CSS-CheatSheet.md +++ b/CheatSheets/CSS Grid-CheatSheet.md @@ -1,154 +1,141 @@ -# 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") +![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 + +## 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-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/CheatSheets/JavaScript DOM-Cheatsheet.md b/CheatSheets/JavaScript DOM-Cheatsheet.md index b3bb9d0..d5b4f9d 100644 --- a/CheatSheets/JavaScript DOM-Cheatsheet.md +++ b/CheatSheets/JavaScript DOM-Cheatsheet.md @@ -1,3 +1,5 @@ +![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 ### 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") 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 @@
- +