├── .github ├── ISSUE_TEMPLATE │ ├── add-project---.md │ ├── docs-addition-template---.md │ └── reference-addition-template---.md ├── PULL_REQUEST_TEMPLATE.md ├── labels.json └── workflows │ └── issue-label.yml ├── CODE_OF_CONDUCT.md ├── Docs ├── 0 . References │ └── readme.md ├── 1. HTML │ ├── Attributes.md │ ├── Audio&Video.html │ ├── Forms.md │ ├── ISOCountryCode.md │ ├── ISOLanguageCodes.md │ ├── Sudoku_Solver.md │ ├── event.md │ ├── iframe.md │ ├── list.html │ ├── sample.md │ └── table.md ├── 2. CSS │ ├── CSS_Positioning.md │ ├── Sudoku_Solver.md │ ├── mediaQuery.md │ └── sample.md ├── 3. JAVASCRIPT │ ├── Sudoku_Solver.md │ └── sample.md └── readme.md ├── Projects ├── BMI Calculator │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ └── ss1.png │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── Calculator │ ├── Assets │ │ └── calculator.css │ ├── index.html │ └── script │ │ └── calculator.js ├── Coin Toss App │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ ├── heads.svg │ │ │ ├── ss1.png │ │ │ └── tails.svg │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── Covid Tracker App │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ └── ss1.png │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── Custom-Range-Slider │ ├── Assets │ │ └── CSS │ │ │ └── style.css │ ├── README.md │ ├── Scripts │ │ └── script.js │ └── index.html ├── Double-Vertical-Slider │ ├── README.md │ ├── assets │ │ └── css │ │ │ └── style.css │ ├── index.html │ └── scripts │ │ └── script.js ├── Gradient_Background_Generator │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── Demo-1.png │ │ │ └── Demo-2.png │ ├── Readme.md │ ├── index.html │ └── script │ │ └── script.js ├── Joke Generator │ ├── css │ │ └── styles.css │ ├── index.html │ └── js │ │ └── scripts.js ├── Joke-Telling-Robot │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── Joke Telling Robot.mp4 │ │ │ └── ss1.png │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── JumpingDinosaurGame │ ├── images │ │ ├── bg1.jpg │ │ ├── dino.png │ │ └── dragon.png │ ├── index.html │ ├── music │ │ ├── Jumping Game_gameover.mp3 │ │ └── Jumping Game_music.mp3 │ ├── script.js │ └── style.css ├── Lets practice │ ├── add.html │ ├── assets │ │ └── css │ │ │ ├── index.css │ │ │ └── page.css │ ├── div.html │ ├── index.html │ ├── mul.html │ ├── readme.md │ └── sub.html ├── Maths quiz game │ ├── README.md │ ├── assets │ │ └── quiz.css │ └── quiz.html ├── Memory_Card_Game │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── images │ │ │ ├── back.jpg │ │ │ ├── c++.png │ │ │ ├── css.png │ │ │ ├── html.png │ │ │ ├── java.jpg │ │ │ ├── javascript.png │ │ │ ├── kotlin.jpg │ │ │ ├── php.png │ │ │ └── python.jpg │ │ │ └── screenshots │ │ │ ├── back_to_original.png │ │ │ ├── matched.png │ │ │ └── not_matched.png │ ├── Pages │ │ └── mainGame.html │ ├── README.md │ └── Script │ │ └── index.js ├── Music App │ ├── README.md │ ├── assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── Music App Output.PNG │ │ │ ├── song1.mp3.mp3 │ │ │ ├── song2.mp3.mp3 │ │ │ ├── song3.mp3.mp3 │ │ │ ├── song4.mp3.mp3 │ │ │ ├── song5.mp3.mp3 │ │ │ └── song6.mp3.mp3 │ ├── index.html │ └── script │ │ └── script.js ├── Netflix UI Clone │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ ├── ss1.png │ │ │ ├── ss2.png │ │ │ └── ss3.png │ ├── index.html │ └── script │ │ └── script.js ├── Password Generator │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ └── ss1.png │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── Project_Structure │ ├── Assets │ │ ├── css │ │ │ ├── Sudoku_Solver.css │ │ │ └── style.css │ │ └── media │ │ │ ├── Sudoku_Solver.jpeg │ │ │ └── image.png │ ├── Pages │ │ ├── Sudoku_Solver.html │ │ └── page2.html │ ├── readme.md │ └── script │ │ ├── Sudoku _Solver.js │ │ └── script.js ├── QR-Code-Generator │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ ├── ss1.png │ │ │ └── ss2.png │ ├── README.md │ ├── index.html │ └── script │ │ └── script.js ├── Quote Generator │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ └── ss1.png │ ├── README.md │ ├── index.html │ └── script │ │ └── script.js ├── Simon Game │ ├── Assets │ │ ├── css │ │ │ └── styles.css │ │ └── media │ │ │ ├── blue.mp3 │ │ │ ├── green.mp3 │ │ │ ├── red.mp3 │ │ │ ├── wrong.mp3 │ │ │ └── yellow.mp3 │ ├── index.html │ ├── readme.md │ └── scripts │ │ └── game.js ├── Snake-Game │ ├── Readme.md │ ├── Scripts │ │ └── script.js │ ├── assets │ │ ├── CSS │ │ │ └── style.css │ │ └── media │ │ │ └── images │ │ │ ├── apple1.png │ │ │ ├── mango.png │ │ │ ├── pear.png │ │ │ └── wp2409705.jpg │ └── index.html ├── Sudoku_Solver.md ├── The Dice Game │ ├── Assets │ │ ├── css │ │ │ └── styles.css │ │ └── media │ │ │ ├── dice1.png │ │ │ ├── dice2.png │ │ │ ├── dice3.png │ │ │ ├── dice4.png │ │ │ ├── dice5.png │ │ │ └── dice6.png │ ├── index.html │ ├── readme.md │ └── scripts │ │ └── index.js ├── The Drum Kit │ ├── Assets │ │ ├── css │ │ │ └── styles.css │ │ └── media │ │ │ ├── images │ │ │ ├── crash.png │ │ │ ├── kick.png │ │ │ ├── snare.png │ │ │ ├── tom1.png │ │ │ ├── tom2.png │ │ │ ├── tom3.png │ │ │ └── tom4.png │ │ │ └── sounds │ │ │ ├── crash.mp3 │ │ │ ├── kick-bass.mp3 │ │ │ ├── snare.mp3 │ │ │ ├── tom-1.mp3 │ │ │ ├── tom-2.mp3 │ │ │ ├── tom-3.mp3 │ │ │ └── tom-4.mp3 │ ├── index.html │ ├── readme.md │ └── scripts │ │ └── index.js ├── Tic-Tac-Toe-Game │ ├── Assets │ │ └── CSS │ │ │ └── style.css │ ├── README.md │ ├── Scripts │ │ └── script.js │ └── index.html ├── TinDog │ ├── Assets │ │ ├── css │ │ │ └── styles.css │ │ └── media │ │ │ ├── TechCrunch.png │ │ │ ├── bizinsider.png │ │ │ ├── dog-img.jpg │ │ │ ├── iphone6.png │ │ │ ├── lady-img.jpg │ │ │ ├── mashable.png │ │ │ └── tnw.png │ ├── index.html │ └── readme.md ├── Tip Calculator │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ ├── demo.gif │ │ │ ├── ss1.png │ │ │ └── ss2.png │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── Weather Application │ ├── Assets │ │ └── css │ │ │ └── style.css │ ├── index.html │ ├── readme.md │ └── script │ │ └── script.js ├── Weather-App │ ├── Assets │ │ ├── css │ │ │ └── style.css │ │ └── media │ │ │ └── Weather-App.jpg │ ├── README.md │ ├── Script │ │ └── script.js │ └── index.html ├── Youtube-Clone │ ├── Assets │ │ ├── css │ │ │ └── styles.css │ │ └── media │ │ │ ├── favicon_32x32.png │ │ │ ├── youtube_logo.png │ │ │ └── youtube_logo.webp │ ├── README.md │ └── index.html ├── compound-interest-calculator │ ├── Assets │ │ └── style.css │ ├── README.md │ ├── index.html │ └── script │ │ └── script.js ├── tabla │ ├── assets │ │ ├── css │ │ │ └── index.css │ │ └── media │ │ │ ├── d.mp3 │ │ │ ├── t.mp3 │ │ │ ├── tap1.png │ │ │ └── tap2.png │ ├── index.html │ ├── readme.md │ └── script │ │ └── index.js ├── text to speech │ ├── README_txt_to_speech.md │ ├── assets │ │ └── text_to_speech.css │ └── text_to_speech.html ├── timer │ ├── README.md │ ├── index.html │ └── script │ │ └── index.js └── to do list │ ├── pages │ └── index.html │ ├── readme.md │ └── script │ └── sample.js ├── Tribute_To_Contributors.html ├── assets ├── css │ ├── Sudoku_Solver.css │ └── style.css └── media │ ├── Sudoku_Solver.jpeg │ ├── banner.png │ ├── sample │ └── tree-struct.PNG ├── contributionGuidelines.md ├── index.html ├── readme.md └── script.js /.github/ISSUE_TEMPLATE/add-project---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Add Project \U0001F4BB" 3 | about: If you want to add project of your idea feel free to open issue ✅ 4 | title: '' 5 | labels: Project Addition ✅ 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Checks 11 | [ ] Project uses HTML , CSS , JS 12 | [ ] Project can be hosted on GitHub 13 | 14 | ## **Describe the Project** 15 | 16 | - A clear and concise description of what the Project is. 17 | 18 | 19 | 20 | ## **Screenshots** 21 | 22 | - If applicable, add screenshots to help explain your project. 23 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/docs-addition-template---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Docs Addition Template \U0001F4BB" 3 | about: 'If you want to add notes in Docs Folder ' 4 | title: '' 5 | labels: Docs Addition ✅ 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Which Topic Notes will you like to add 11 | [ ] HTML 12 | [ ] CSS 13 | [ ] JS 14 | 15 | ## **Describe the Topic ** 16 | - A clear and concise description of what the topic is. 17 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/reference-addition-template---.md: -------------------------------------------------------------------------------- 1 | --- 2 | name: "Reference Addition Template \U0001F4BB" 3 | about: If you want to add References 4 | title: '' 5 | labels: Reference Addition ✅ 6 | assignees: '' 7 | 8 | --- 9 | 10 | ## Which Topic References will you like to add 11 | [ ] HTML 12 | [ ] CSS 13 | [ ] JS 14 | 15 | ## ** How the Reference helped you explain in short** 16 | - A clear and concise description of what the topic is. 17 | 18 | Mention reference here 👇🏻 19 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | # Description 2 | 3 | Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change. 4 | 5 | Fixes # (issue no.) 6 | 7 | 8 | ## Type of change 9 | 10 | 11 | 12 | - [ ] Bug fix (non-breaking change which fixes an issue) 13 | - [ ] New Project / Docs 14 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected) 15 | - [ ] This change requires a documentation update 16 | 17 | # Explain the Testing instructions 18 | 19 | **Test Configuration**: 20 | * Operating system: 21 | * Version: 22 | * Text-editors used: 23 | 24 | # Checklist: 25 | 26 | - [ ] My code follows the style guidelines of this project 27 | - [ ] I have performed a self-review of my own code 28 | - [ ] I have commented my code, particularly in hard-to-understand areas 29 | - [ ] I have made corresponding changes to the documentation 30 | - [ ] My changes generate no new warnings 31 | - [ ] I have added tests that prove my fix is effective or that my feature works 32 | - [ ] New and existing unit tests pass locally with my changes 33 | - [ ] Any dependent changes have been merged and published in downstream modules 34 | # ATTACH SCREEN-SHOTS / DEPLOYMENT LINK 35 | -------------------------------------------------------------------------------- /.github/labels.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "name": "good first issue", 4 | "description": "This issue is good for first timers", 5 | "color": "a9e3ff" 6 | }, 7 | { 8 | "name": "🆘 help wanted", 9 | "description": "This issue needs help ! Please help if possible !", 10 | "color": "ff00ff" 11 | }, 12 | { 13 | "name": "🟥 Level4 ", 14 | "description": "This issue will be considered as level 4 issue for LGM-SOC 21.Points will be 45.", 15 | "color": "b60205" 16 | }, 17 | { 18 | "name": "🟧 Level3 ", 19 | "description": "This issue will be considered as level 3 issue for LGM-SOC 21.Points will be 30.", 20 | "color": "ff9f1c" 21 | }, 22 | { 23 | "name": "🟨 Level2 ", 24 | "description": "This issue will be considered as level 2 issue for LGM-SOC 21.Points will be 15", 25 | "color": "ffcc00" 26 | }, 27 | { 28 | "name": "🟩 Level1 ", 29 | "description": "This issue will be considered as level 1 issue for LGM-SOC 21.Points will be 10", 30 | "color": "cfda2c" 31 | }, 32 | { 33 | "name": "🟪 Level0 ", 34 | "description": "This issue will be considered as level 0 issue for LGM-SOC 21.Points will be 5", 35 | "color": "aa00de" 36 | }, 37 | { 38 | "name": " LGMSOC21 ", 39 | "description": "This issue will be considered for LGM-SOC 21", 40 | "color": "d93f0b" 41 | }, 42 | { 43 | "name": " 🤩 Up for Grab ", 44 | "description": "This issue will is not assigned ! Grab It !", 45 | "color": "bf00ff" 46 | } 47 | ] 48 | -------------------------------------------------------------------------------- /.github/workflows/issue-label.yml: -------------------------------------------------------------------------------- 1 | name: Default 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | steps: 9 | - uses: actions/checkout@v1 10 | - name: Label Syncer 11 | uses: micnncim/action-label-syncer@v1.3.0 12 | env: 13 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 14 | GITHUB_REPOSITORY: ${{ github.repository }} 15 | with: 16 | manifest: .github/labels.json 17 | prune: false 18 | -------------------------------------------------------------------------------- /Docs/0 . References/readme.md: -------------------------------------------------------------------------------- 1 | In this file you can add references to Other documentation, videos , blog which you find helpfull which learning web development ! 2 | -------------------------------------------------------------------------------- /Docs/1. HTML/Audio&Video.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 15 |
16 | 17 | 18 | 22 |
23 | 24 | 25 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Docs/1. HTML/Forms.md: -------------------------------------------------------------------------------- 1 | # Forms in HTML 2 | 3 | * HTML forms are used to collect information from the user. Forms are defined using the
element, with its opening and closing tags: 4 | 5 | ``` html 6 | 7 |
8 | 9 | ``` 10 |
11 | 12 | * Use the action attribute to point to a webpage that will load after the user submits the form. 13 | 14 | ``` html 15 |
16 |
17 | ``` 18 | 19 |
20 | 21 | * The method attribute specifies the method (GET or POST) to be used when forms are submitted. When we use GET, the form data will be visible in the page address. We use POST if the form is updating data, or includes sensitive information, the submitted data is not visible in page address. 22 | 23 | ``` html 24 |
25 | 26 | ``` 27 | 28 |
29 | 30 | * To take in user input, you need the corresponding form elements, such as text fields. The element has many variations, depending on the type attribute. It can be a text, password, color, checkbox, radio, file, date, submit, etc. 31 | 32 | ``` html 33 | 34 | 35 | 36 |
37 | 38 | 39 |
40 | ``` 41 |
42 | 43 | * The submit button submits a form to its action attribute: 44 | 45 | ``` html 46 | 47 | ``` 48 | 49 |
50 | 51 | * HTML5 has introduced a new attribute called placeholder. On and 56 | ``` 57 | -------------------------------------------------------------------------------- /Docs/1. HTML/Sudoku_Solver.md: -------------------------------------------------------------------------------- 1 |

Sudoku Solver

2 | 3 |

An Sudoku Solver made using backtracking.

4 | 5 | ### Use of the Project: 6 | 7 |

It can be used to solve the Sudoku.

8 | 9 | 10 | 16 | 17 | 18 | 19 |

ScreenShot

20 | Sudoku Solver 21 | 22 | 23 |
24 | -------------------------------------------------------------------------------- /Docs/1. HTML/iframe.md: -------------------------------------------------------------------------------- 1 | # Iframes 2 | 3 | * The "iframe" tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document. The "iframe" tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders. 4 | 5 | 6 | * Syntax : 7 | 8 | ``` html 9 | 10 | 11 | 12 | 13 | 14 | ``` 15 | 16 | ## Attributes of iframe - 17 | 18 | ![iframe](https://user-images.githubusercontent.com/56999749/126905968-600d6556-b32f-48e7-aad6-53d6f7fcdfff.JPG) 19 | 20 |
21 | 22 | ### Iframe - Set Height and Width 23 | 24 |
25 | 26 | We can use the height and width attributes to specify the size of the iframe: 27 | ``` html 28 | 31 | ``` 32 | ### Output 33 |
34 | 35 | ![output-iframe](https://user-images.githubusercontent.com/56999749/126906306-9ae5a303-eac0-4b5c-805e-9388e0edecc1.JPG) 36 | 37 |
38 | 39 | Or we can add the style attribute and use the CSS height and width properties: 40 | 41 | 42 | ``` html 43 | 46 | ``` 47 | 48 | ### Iframe - Target for a Link 49 | 50 |
51 | 52 | An iframe can be used as the target frame for a link. 53 | 54 | The target attribute of the link must refer to the name attribute of the iframe: 55 | 56 | ``` html 57 | 58 | 59 |

Let's Grow More Summer of Code Website

60 | ``` 61 | 62 | ### Output 63 |
64 | 65 | When the target attribute of a link matches the name of an iframe, the link will open in the iframe. 66 |
67 | 68 | 69 | ![output-iframe2](https://user-images.githubusercontent.com/56999749/126906781-698afd88-3108-4ed1-8931-56bc1228e657.JPG) 70 | -------------------------------------------------------------------------------- /Docs/1. HTML/list.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

ordered list

12 |
    13 |
  1. Coffee
    2. 14 |
  2. Tea
    3. 15 |
  3. Milk
    4. 16 |
17 | 18 |

19 | 20 |

unordered list

21 | 26 | 27 |

28 | 29 |

description list

30 |
31 |
Coffee
32 |
- black hot drink
33 |
Milk
34 |
- white cold drink
35 |
36 | 37 |

38 | 39 | 40 |

nested lists

41 | 52 |



53 | 54 | 55 | -------------------------------------------------------------------------------- /Docs/1. HTML/sample.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Docs/1. HTML/sample.md -------------------------------------------------------------------------------- /Docs/1. HTML/table.md: -------------------------------------------------------------------------------- 1 | # Table Tag 2 | * Table tag is used to create tables in html.It's syntax is easy to remember.So let's jump into the syntax. 3 | ``` html 4 | 5 | 6 | 7 |
8 | ``` 9 | 10 | * Now these are not the only tags you need to use there is a whole structure which you have to use. 11 | ``` html 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 |
NameRoll number
Siddhi1
22 | ``` 23 | 24 | So,first let's discuss what all these tags indicate. 25 | * tr - This indicates table row. 26 | * th - This indicates table heading 27 | * td - This indicates Table data. 28 | 29 | So in table you are going to fill everything rowwise,therefore we are wrapping our content in 'tr' tag. 30 | Also many times we need a heading for our table, so for this we use th tag. Th tag basically makes our text bold so that we can differentiate between heading and actual data. 31 | And inorder to insert normal data we use td tag.So for every row there must be equal number of td or th tags. 32 | In the above example, using html we have tried to make a table with name and roll number as heading and siddhi and 1 as table data. 33 | 34 | # Example 35 | ![Screenshot_20210722-144911_Chrome](https://user-images.githubusercontent.com/69195262/126616796-c0039f31-dcb6-4c2b-bfff-8b4d0ab3f1e9.jpg) 36 | 37 | Here I have added some css as well just to show border of table. 38 | 39 | -------------------------------------------------------------------------------- /Docs/2. CSS/CSS_Positioning.md: -------------------------------------------------------------------------------- 1 | # CSS Positioning 2 |
3 | We use CSS positioning in order to position elements on the screen the way we want them to go instead of going with the default layout. Some of the ways to change position property- static, relative. absolute and fixed. 4 |
5 | 6 |
7 | 8 | * **Static**: All HTML elements are static by default and they go along with the HTML rules. 9 | 10 | * **Relative**: It positions the element that we have selected, relative to how it should be positioned if it was static. Eg. 11 | 12 | ``` css 13 | img{ 14 | position: relative; 15 | left: 30px: /* push image 30px left from previous one */ 16 | } 17 | ``` 18 |
19 | 20 | * **Absolute**: By using absolute positioning, we're taking element out of flow of document and is no longer considered a part of natural flow of document, that's why rest of the elements are shifted in place of that elememt we've positioned absolutely. Eg. 21 | 22 | ``` css 23 | div{ 24 | position: relative; 25 | } 26 | 27 | img{ 28 | position: absolute; 29 | right: 30px; /* we've added space of 30px between image and div */ 30 | } 31 | ``` 32 |
33 | 34 | * **Fixed**: The element will remain fixed on screen in its position even if we scroll. Eg. 35 | 36 | ``` css 37 | img{ 38 | position: fixed; 39 | top:0; 40 | } 41 | ``` 42 | -------------------------------------------------------------------------------- /Docs/2. CSS/Sudoku_Solver.md: -------------------------------------------------------------------------------- 1 |

Sudoku Solver

2 | 3 |

An Sudoku Solver made using backtracking.

4 | 5 | ### Use of the Project: 6 | 7 |

It can be used to solve the Sudoku.

8 | 9 | 10 |
  • CSS3
    • 11 | ## All the styling part ,the style and the colours added are done bty the css file 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

    ScreenShot

    20 | Sudoku Solver 21 | 22 | 23 |
    24 | -------------------------------------------------------------------------------- /Docs/2. CSS/mediaQuery.md: -------------------------------------------------------------------------------- 1 | # Media Query Breakpoints 2 |
    3 | We usually use media query breakpoints to make our website responsive,i.e. creating dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it. 4 |
    5 | 6 |
    7 | 8 | We can impose different conditions under different circumstances using media queries. Examples. 9 | 10 | * If media is screen and minimum width is 900px, change any style or property the way you want 11 | 12 | ``` css 13 | @media screen(min-width:900px){ 14 | /* change anything */ 15 | } 16 | ``` 17 | 18 | * If maximum width is 900px, change the colour of heading to red and increase font size 19 | 20 | ``` css 21 | @media (max-width:900px){ 22 | h1{ 23 | font-size: 60%; 24 | color: red; 25 | } 26 | } 27 | ``` 28 | 29 |
    30 | We can use more than 1 parameter to narrow down the range where we want breakpoint to occur, 31 | 32 | ``` css 33 | @media (min-width:900px) and (max-width: 1000px){ 34 | /* change anything */ 35 | } 36 | ``` 37 | -------------------------------------------------------------------------------- /Docs/2. CSS/sample.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Docs/2. CSS/sample.md -------------------------------------------------------------------------------- /Docs/3. JAVASCRIPT/Sudoku_Solver.md: -------------------------------------------------------------------------------- 1 |

    Sudoku Solver

    2 | 3 |

    An Sudoku Solver made using backtracking.

    4 | 5 | ### Use of the Project: 6 | 7 |

    It can be used to solve the Sudoku.

    8 | 9 | 10 |
  • JavaScript
    • 11 | 12 | All the action wor or the working of the project is done via the javascript 13 | 14 |

    ScreenShot

    15 | Sudoku Solver 16 | 17 | 18 |
    19 | -------------------------------------------------------------------------------- /Docs/3. JAVASCRIPT/sample.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Docs/3. JAVASCRIPT/sample.md -------------------------------------------------------------------------------- /Docs/readme.md: -------------------------------------------------------------------------------- 1 | # Docs Section 2 | 3 | In this section you can add docs or references which you like to add ! 4 | 5 | References will not given any points 6 | 7 | In Each folder every concept can be explained in .md file which will help in displaying the particular content for example you want to explain html elements then you can add one file html elements.md and explain in that 8 | -------------------------------------------------------------------------------- /Projects/BMI Calculator/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: 'Roboto', sans-serif; 3 | } 4 | 5 | body{ 6 | background-color: rgb(170, 255, 244); 7 | } 8 | 9 | .container{ 10 | width: 400px; 11 | background-color: black; 12 | position: absolute; 13 | top: 50%; 14 | left: 50%; 15 | transform: translateX(-50%) translateY(-50%); 16 | padding: 50px; 17 | box-shadow: 10px 10px 5px 0 rgba(0,0,0,0.75); 18 | } 19 | 20 | h1{ 21 | color: red; 22 | text-align: center; 23 | } 24 | 25 | p{ 26 | color: white; 27 | } 28 | 29 | #height, #weight{ 30 | width: 100%; 31 | height: 30px; 32 | outline: none; 33 | border-radius: 5px; 34 | border: none; 35 | padding: 0 10px; 36 | } 37 | 38 | button { 39 | width: 150px; 40 | height: 35px; 41 | margin-top: 20px; 42 | border-radius: 10px; 43 | border: none; 44 | font-size: 19px; 45 | background-color: red; 46 | color: white; 47 | } 48 | 49 | #result{ 50 | color: yellow; 51 | text-align: center; 52 | margin-top: 20px; 53 | font-size: 25px; 54 | font-weight: bold; 55 | } 56 | 57 | @media screen and (max-width: 400px){ 58 | 59 | .container{ 60 | width: 100%; 61 | margin: 30px; 62 | } 63 | 64 | } -------------------------------------------------------------------------------- /Projects/BMI Calculator/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/BMI Calculator/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/BMI Calculator/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/BMI Calculator/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/BMI Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | BMI CALCULATOR 16 | 17 | 18 | 19 | 20 |
    21 |

    BMI CALCULATOR

    22 | 23 |

    Height (in cm)

    24 | 25 | 26 |

    Weight (in kg)

    27 | 28 | 29 | 30 | 31 |
    32 | 33 |
    34 |
    35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Projects/BMI Calculator/readme.md: -------------------------------------------------------------------------------- 1 | # BMI Calculator 2 | ## Overview of BMI Calculator 3 | 4 | > _A simple website build using HTML, CSS & JavaScript._ 5 | 6 | This application will take two inputs from the user, height (in cm) and weight (in kg), and based on the input values BMI will be calculated and put that user into a specific category. 7 | 8 | This application has 4 categories: 9 | 10 | a. BMI < 18.5 -> Underweight 11 | 12 | b. BMI = 18.5 to 24.9 -> Normal 13 | 14 | c. BMI = 25 to 29.9 -> Overweight 15 | 16 | d. BMI >=30 -> Obesity 17 | 18 | ## Tech Stack 19 | 20 | 21 | 22 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 23 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 24 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 25 | 26 | 27 | 28 | 29 | ## ScreenShot 30 | 31 | 32 | 33 | ## Live Demo 34 | 35 | 36 | -------------------------------------------------------------------------------- /Projects/BMI Calculator/script/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector("#btn") 2 | btn.addEventListener('click', calculateBMI); 3 | 4 | function calculateBMI(){ 5 | const height = parseInt(document.querySelector("#height").value); 6 | const weight = parseInt(document.querySelector("#weight").value); 7 | const res = document.querySelector("#result"); 8 | 9 | if(height === '' || isNaN(height) || height<=0){ 10 | res.innerHTML = "Please provide a valid height!" 11 | }else if(weight === '' || isNaN(weight) || weight<=0){ 12 | res.innerHTML = "Please provide a valid weight!" 13 | } 14 | else{ 15 | const bmi = (weight / ((height*height)/10000)).toFixed(2); // bmi = weight/ height*height (kg/m^2) 16 | 17 | if(bmi<18.5){ 18 | res.innerHTML = `Underweight ${bmi}` 19 | }else if(bmi>=18.5 && bmi<=24.9){ 20 | res.innerHTML = `Normal ${bmi}` 21 | }else if(bmi>=25 && bmi<=29.9){ 22 | res.innerHTML = `Overweight ${bmi}` 23 | } 24 | else{ 25 | res.innerHTML = `Obesity ${bmi}` 26 | } 27 | } 28 | } -------------------------------------------------------------------------------- /Projects/Calculator/Assets/calculator.css: -------------------------------------------------------------------------------- 1 | @import url(https://fonts.googleapis.com/css?family=Share); 2 | @font-face { 3 | font-family: 'Digital'; 4 | src: url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.eot'); 5 | src: url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.eot?#iefix') format('embedded-opentype'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.woff') format('woff'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.ttf') format('truetype'), url('https://jonathanfelipe.com.br/css3-calculator/font/Digital.svg#https://jonathanfelipe.com.br/css3-calculator/font/Digital-7Italic') format('svg'); 6 | } 7 | 8 | body{ 9 | background:url('http://fc05.deviantart.net/fs32/f/2008/227/4/a/Ibex_Wallpaper_by_willwill100.png'); 10 | } 11 | .result{ 12 | background:#cecfac; 13 | color:#3b3b32; 14 | width:90%; 15 | margin:8px 0px 20px 10px; 16 | height:50px; 17 | overflow:hidden; 18 | font-family:Digital; 19 | text-align:right; 20 | line-height:46px; 21 | padding-right:10px; 22 | font-size:35px; 23 | box-shadow:inset 0 0px 8px rgba(0,0,0,0.5),inset 0px 2px 0 #a1a1a1; 24 | 25 | } 26 | .numbers { 27 | padding:0; 28 | margin:0; 29 | } 30 | .numbers > li { 31 | background:#efefef; 32 | padding:10px; 33 | font-family:Share; 34 | width:15%; 35 | list-style:none; 36 | float:left; 37 | margin:5px; 38 | cursor:pointer; 39 | border-radius: 5px; 40 | color: #737373; 41 | font-size: 20px; 42 | box-shadow: 0 5px 0 #a1a1a1, 0 2px 5px rgba(0, 0, 0, .75); 43 | text-align:center; 44 | transition: all .07s ease; 45 | -webkit-transition: all .07s ease; 46 | -moz-transition: all .07s ease; 47 | } 48 | .numbers > li:active { 49 | position: relative; 50 | top: 5px; 51 | box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); 52 | } 53 | .numbers > li:last-child{ 54 | width:65%; 55 | margin-top:-48px; 56 | } 57 | 58 | .numbers > li:nth-child(16) { 59 | height:75px; 60 | line-height:80px; 61 | } 62 | .calc{ 63 | background:#c2c2c2; 64 | width:300px; 65 | position:absolute; 66 | top:5%; 67 | left:50%; 68 | margin-left:-150px; 69 | padding:10px; 70 | border-radius:5px; 71 | height:340px; 72 | text-align:center; 73 | box-shadow: 0 6px 0 #a1a1a1, 0 8px 10px rgba(0, 0, 0, .75); 74 | } -------------------------------------------------------------------------------- /Projects/Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Calculator 8 | 9 | 10 | 11 | 12 | 13 |
    14 |
    0
    15 | 34 |
    35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /Projects/Calculator/script/calculator.js: -------------------------------------------------------------------------------- 1 | $(".numbers").on('click','li',function(e){ 2 | e.preventDefault(); 3 | $v = $(this).html(), 4 | $r = $('.result'); 5 | if($r.text()==0){$r.empty()} 6 | if($v==="=" ) { 7 | r = eval($r.text()); 8 | $r.empty().append(r); 9 | return true;} 10 | if($v==="c" ) {$r.empty().append(0);return true;} 11 | $r.append($v) 12 | }) 13 | -------------------------------------------------------------------------------- /Projects/Coin Toss App/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | height: 100%; 9 | background: url("https://img.wallpapersafari.com/desktop/728/410/81/18/rnAuiM.jpg"); 10 | background-repeat: no-repeat; 11 | background-size: cover; 12 | } 13 | 14 | .container{ 15 | background-color: #d4e7ff; 16 | width: 400px; 17 | padding: 50px; 18 | position: absolute; 19 | top: 50%; 20 | left: 50%; 21 | border: 1px solid #424ae0; 22 | transform: translate(-50%, -50%); 23 | box-shadow: 15px 30px 35px rgba(0,0,0,0.1); 24 | border-radius: 10px; 25 | -webkit-perspective: 300px; 26 | perspective: 300px; 27 | } 28 | 29 | .stats{ 30 | text-align: right; 31 | color: black; 32 | font-size: 25px; 33 | font-weight: 550; 34 | line-height: 25px; 35 | } 36 | 37 | #head-count{ 38 | margin-bottom: 12px; 39 | } 40 | 41 | .stats span{ 42 | color: rgb(6, 179, 49); 43 | } 44 | 45 | .coin{ 46 | height: 150px; 47 | width: 150px; 48 | position: relative; 49 | margin: 50px auto; 50 | -webkit-transform-style: preserve-3d; 51 | transform-style: preserve-3d; 52 | } 53 | 54 | .coin img{ 55 | width: 150px; 56 | } 57 | 58 | .heads, .tails { 59 | position: absolute; 60 | width: 100%; 61 | height: 100%; 62 | -webkit-backface-visibility: hidden; 63 | backface-visibility: hidden; 64 | } 65 | 66 | .tails{ 67 | transform: rotateX(180deg); 68 | } 69 | 70 | @keyframes spin-tails { 71 | 0%{ 72 | transform: rotateX(0); 73 | } 74 | 100%{ 75 | transform: rotateX(1980deg); 76 | } 77 | } 78 | 79 | @keyframes spin-heads { 80 | 0%{ 81 | transform: rotateX(0); 82 | } 83 | 100%{ 84 | transform: rotateX(2160deg); 85 | } 86 | } 87 | 88 | .buttons{ 89 | display: flex; 90 | justify-content: space-between; 91 | } 92 | 93 | button{ 94 | width: 120px; 95 | padding: 10px 0; 96 | border-radius: 5px; 97 | border: 2.5px solid #424ae0; 98 | cursor: pointer; 99 | } 100 | 101 | #flip-btn{ 102 | background-color: #424ae0; 103 | color: #ffffff; 104 | } 105 | 106 | #flip-btn:disabled{ 107 | background-color: #e1e0ee; 108 | border-color:#e1e0ee ; 109 | color: #101020; 110 | } 111 | 112 | #reset-btn{ 113 | background-color: #ffffff; 114 | color: #424ae0; 115 | } 116 | 117 | #reset-btn:hover{ 118 | background-color: #424ae0; 119 | color: white; 120 | } -------------------------------------------------------------------------------- /Projects/Coin Toss App/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Coin Toss App/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/Coin Toss App/Assets/media/heads.svg: -------------------------------------------------------------------------------- 1 | 2 | heads 3 | 4 | 5 | 6 | 7 | 8 | 9 | HEADS 10 | HEADS 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Projects/Coin Toss App/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Coin Toss App/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Coin Toss App/Assets/media/tails.svg: -------------------------------------------------------------------------------- 1 | 2 | heads 3 | 4 | 5 | 6 | 7 | 8 | 9 | TAILS 10 | TAILS 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Projects/Coin Toss App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Coin Toss App 9 | 10 | 11 | 12 |
    13 |
    14 |

    Heads: 0

    15 |

    Tails: 0

    16 |
    17 |
    18 |
    19 | 20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 | 28 |
    29 |
    30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Projects/Coin Toss App/readme.md: -------------------------------------------------------------------------------- 1 | # Coin Toss App 2 | 3 | ## About The Project 4 | 5 | It is a virtual coin toss app built using Javascript.This code simulates a coin flip that produces heads or tails with a cool 3D Animation. 6 | 7 | It also maintains the heads and tails count. We can also reset the count of heads and tails using reset button. 8 | 9 | ## Tech Stacks Used 10 | 11 | 12 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 13 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 14 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 15 | 16 | 17 | ## Screenshots 18 | 19 | 20 | 21 | 22 | ## Live Demo 23 | 24 | -------------------------------------------------------------------------------- /Projects/Coin Toss App/script/script.js: -------------------------------------------------------------------------------- 1 | let heads = 0; 2 | let tails = 0; 3 | 4 | let coin = document.querySelector(".coin"); 5 | let flipBtn = document.querySelector("#flip-btn"); 6 | let resetBtn = document.querySelector("#reset-btn"); 7 | let headCount = document.querySelector("#head-count"); 8 | let tailCount = document.querySelector("#tail-count"); 9 | 10 | flipBtn.addEventListener("click", ()=>{ 11 | let i = Math.floor(Math.random()*2); 12 | // console.log(i); 13 | coin.style.animation = "none"; 14 | 15 | if(i){ 16 | setTimeout( function(){ 17 | coin.style.animation = "spin-heads 3s forwards"; 18 | // console.log(coin.style.animation); 19 | }, 100); 20 | heads++; 21 | // console.log(heads); 22 | } 23 | else{ 24 | setTimeout( function(){ 25 | coin.style.animation = "spin-tails 3s forwards"; 26 | }, 100); 27 | tails++; 28 | // console.log(tails); 29 | } 30 | 31 | setTimeout(updateStats, 3000); 32 | disableBtn(); 33 | }) 34 | 35 | function updateStats(){ 36 | 37 | headCount.innerHTML = `Heads : ${heads}`; 38 | 39 | tailCount.innerHTML = `Tails : ${tails}`; 40 | } 41 | 42 | resetBtn.addEventListener("click", ()=>{ 43 | heads = 0; 44 | tails = 0; 45 | 46 | headCount.innerHTML = `Heads : ${heads}`; 47 | 48 | tailCount.innerHTML = `Tails : ${tails}`; 49 | }) 50 | 51 | function disableBtn(){ 52 | flipBtn.disabled = true; 53 | setTimeout( function(){ 54 | flipBtn.disabled = false; 55 | }, 3000) 56 | } -------------------------------------------------------------------------------- /Projects/Covid Tracker App/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Covid Tracker App/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/Covid Tracker App/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Covid Tracker App/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Covid Tracker App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Corona Tracker App 10 | 11 | 12 | 13 |
    14 | 15 |
    16 |

    0

    17 |

    Total Cases

    18 |
    19 | 20 |
    21 |

    0

    22 |

    Active Cases

    23 |
    24 | 25 |
    26 |

    0

    27 |

    Deaths

    28 |
    29 | 30 |
    31 |

    0

    32 |

    Recovered Cases

    33 |
    34 | 35 |
    36 | 39 | 40 | 41 | 45 |
    46 | 47 |
    48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Projects/Covid Tracker App/readme.md: -------------------------------------------------------------------------------- 1 | # Covid-Tracker-App-using-API 2 | 3 | ## Overview of the Application 4 | 5 | > _A simple API enabled website build using HTML, CSS & JavaScript._ 6 | 7 | Covid Tracker App will show the following information, total active cases, total cases till now, total recovered cases, total death cases and at last latest news related to Covid. 8 | 9 | ## Tech Stack 10 | 11 | **Client:** HTML, CSS , JavaScript 12 | 13 | **API:** 14 | 15 | For Covid Data: https://openweathermap.org/ 16 | 17 | For News : https://covid-19-news.p.rapidapi.com/v1/covid?q=covid&lang=en&media=True 18 | 19 | 20 | ## ScreenShot 21 | 22 | 23 | 24 | ## Live Demo 25 | 26 | 27 | -------------------------------------------------------------------------------- /Projects/Covid Tracker App/script/script.js: -------------------------------------------------------------------------------- 1 | fetch("https://api.covid19india.org/data.json" 2 | ) 3 | .then(response => 4 | response.json() 5 | ) 6 | .then( (data)=>{ 7 | getData = data.statewise[0]; 8 | console.log(getData); 9 | var numbers = document.querySelectorAll('.numbers'); 10 | numbers[0].innerHTML = getData.confirmed; 11 | numbers[1].innerHTML = getData.active; 12 | numbers[2].innerHTML = getData.deaths; 13 | numbers[3].innerHTML = getData.recovered; 14 | }) 15 | .catch(err => { 16 | console.error(err); 17 | }); 18 | 19 | fetch("https://covid-19-news.p.rapidapi.com/v1/covid?q=covid&lang=en&media=True", { 20 | "method": "GET", 21 | "headers": { 22 | "x-rapidapi-key": "2d2dea647fmsh577c57bb54abd69p13249djsn06827c6f1fe8", 23 | "x-rapidapi-host": "covid-19-news.p.rapidapi.com" 24 | 25 | } 26 | 27 | }) 28 | 29 | .then(response => response.json()) 30 | 31 | .then(data => { 32 | console.log(data); 33 | var news = document.querySelector('.news'); 34 | for (let i=0 ;i<20;i++) { 35 | var newsData = ` 36 |
    37 | news_image 38 |

    ${data.articles[i].title}

    39 |

    ${data.articles[i].topic}

    40 |

    ${data.articles[i].summary.substring(0,500)}...

    41 | 42 | 43 | 44 | 45 |
    `; 46 | news.innerHTML += newsData; 47 | } 48 | 49 | }) 50 | 51 | .catch(err => { 52 | 53 | console.error(err); 54 | 55 | }); -------------------------------------------------------------------------------- /Projects/Custom-Range-Slider/Assets/CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | padding: 0; 3 | margin: 0; 4 | height: 100vh; 5 | font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | background-color: #fff; 10 | } 11 | .slider-ui { 12 | position: relative; 13 | width: 500px; 14 | height: 50px; 15 | margin: 70px 0; 16 | } 17 | .slider-ui input { 18 | position: absolute; 19 | z-index: 10; 20 | top: 0; 21 | bottom: 0; 22 | width: 100%; 23 | cursor: pointer; 24 | opacity: 0; 25 | } 26 | .slider-ui .bar { 27 | position: absolute; 28 | z-index: 1; 29 | left: 0; 30 | right: 0; 31 | top: 0; 32 | bottom: 0; 33 | background-color: #000; 34 | border-radius: 50px; 35 | box-shadow: 0 5px 0 rgba(0,0,0,.1); 36 | } 37 | .slider-ui .min, 38 | .slider-ui .max { 39 | position: absolute; 40 | z-index: 2; 41 | top: 50%; 42 | transform: translateY(-50%); 43 | font-size: 14px; 44 | font-weight: 800; 45 | color: #fff; 46 | } 47 | .slider-ui .min { 48 | left: 2%; 49 | } 50 | .slider-ui .max { 51 | right: 2%; 52 | } 53 | .slider-ui .track { 54 | position: absolute; 55 | z-index: 3; 56 | left: 25px; 57 | right: 25px; 58 | top: 0; 59 | bottom: 0; 60 | } 61 | .slider-ui .value { 62 | position: absolute; 63 | left: 50%; 64 | top: 0; 65 | width: 50px; 66 | height: 50px; 67 | display: flex; 68 | justify-content: center; 69 | align-items: center; 70 | font-size: 14px; 71 | font-weight: 800; 72 | color: #000; 73 | background-color: #fff; 74 | border: 4px solid #000; 75 | border-radius: 100%; 76 | box-sizing: border-box; 77 | transform: translateX(-50%); 78 | transition: top .3s ease-in-out, color .3s ease-in-out; 79 | } 80 | .slider-ui .value.up { 81 | top: -110%; 82 | color: #000; 83 | } 84 | .slider-ui.color1 .bar { 85 | background-color: #00b894; 86 | } 87 | .slider-ui.color1 .value { 88 | border-color: #00b894; 89 | } 90 | .slider-ui.color2 .bar { 91 | background-color: #00cec9; 92 | } 93 | .slider-ui.color2 .value { 94 | border-color: #00cec9; 95 | } 96 | .slider-ui.color3 .bar { 97 | background-color: #0984e3; 98 | } 99 | .slider-ui.color3 .value { 100 | border-color: #0984e3; 101 | } 102 | 103 | .footer{ 104 | position: absolute; 105 | bottom: 0px; 106 | 107 | padding: 0.4rem !important;margin: 10px; 108 | border-color: inherit; 109 | border-style: solid; 110 | border-width: 0; 111 | background-color: #212529 !important; 112 | } 113 | .footer h4{ 114 | color: white; 115 | text-align: center; 116 | } -------------------------------------------------------------------------------- /Projects/Custom-Range-Slider/README.md: -------------------------------------------------------------------------------- 1 |

    Custom Range Slider

    2 | 3 |

    Simple Custom Range Slider written in HTML, CSS, and JavaScript .

    4 | 5 | #### WebPage Link : https://atif0604.github.io/WebDev-Playyard/Projects/Custom-Range-Slider/index.html 6 | 7 | 8 | ### Use of the Project: 9 | 10 |

    Range Sliders are used on web pages to allow the user specify a numeric value which must be no less than a given value, and no more than another given value. That is, it allows to choose value from a range which is represented as a slider.

    11 | 12 | 13 |

    Used Technologies

    14 | 19 | 20 | #### Steps to Use: 21 | 22 | - Go to the directory 23 | - Run the index.html file 24 | - Set the Range According to your wish 25 | 26 |

    ScreenShots

    27 | preview 28 | 29 |
    30 | -------------------------------------------------------------------------------- /Projects/Custom-Range-Slider/Scripts/script.js: -------------------------------------------------------------------------------- 1 | const sliders = document.querySelectorAll(".slider-ui"); 2 | 3 | sliders.forEach(slider => { 4 | let input = slider.querySelector("input[type=range]"); 5 | let min = input.getAttribute("min"); 6 | let max = input.getAttribute("max"); 7 | let valueElem = slider.querySelector(".value"); 8 | 9 | slider.querySelector(".min").innerText = min; 10 | slider.querySelector(".max").innerText = max; 11 | 12 | function setValueElem() { 13 | valueElem.innerText = input.value; 14 | let percent = (input.value - min) / (max - min) * 100; 15 | valueElem.style.left = percent + "%"; 16 | } 17 | setValueElem(); 18 | 19 | input.addEventListener("input", setValueElem); 20 | input.addEventListener("mousedown", () => { 21 | valueElem.classList.add("up"); 22 | }); 23 | input.addEventListener("mouseup", () => { 24 | valueElem.classList.remove("up"); 25 | }); 26 | }); -------------------------------------------------------------------------------- /Projects/Custom-Range-Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom Range Slider 8 | 9 | 10 | 11 |
    12 |
    13 | 14 |
    15 | 16 | 17 |
    18 |
    19 |
    20 |
    21 |
    22 | 23 |
    24 | 25 |
    26 | 27 | 28 |
    29 |
    30 |
    31 |
    32 |
    33 | 34 |
    35 | 36 |
    37 | 38 | 39 |
    40 |
    41 |
    42 |
    43 |
    44 |
    45 |
    46 |

    Designed & Developed with ❤️ by Atif

    47 |
    48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /Projects/Double-Vertical-Slider/README.md: -------------------------------------------------------------------------------- 1 |

    Double Vertical Slider App

    2 | 3 |

    A Simple Double Vertical Slider App written in HTML, CSS and JavaScript .

    4 | 5 | #### WebPage Link : https://atif0604.github.io/WebDev-Playyard/Projects/Double-Vertical-Slider/index.html 6 | 7 | 8 | ### Use of the Project: 9 | 10 |

    This App helps to Slide the two different parts of the webpage content at the same time

    11 | 12 |

    Used Technologies

    13 | 18 | 19 | #### Steps to Use: 20 | 21 | 22 | - Go to the directory 23 | - Run the index.html file 24 | - Start Scrolling!!! 25 | 26 |

    ScreenShots

    27 | 28 | Double-Vertical-Slider 29 | 30 |
    31 | 32 | -------------------------------------------------------------------------------- /Projects/Double-Vertical-Slider/assets/css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css?family=Open+Sans'); 2 | 3 | * { 4 | box-sizing: border-box; 5 | margin: 0; 6 | padding: 0; 7 | } 8 | 9 | body { 10 | font-family: 'Open Sans', sans-serif; 11 | height: 100vh; 12 | } 13 | 14 | .slider-container { 15 | position: relative; 16 | overflow: hidden; 17 | width: 100vw; 18 | height: 100vh; 19 | } 20 | 21 | .left-slide { 22 | height: 100%; 23 | width: 35%; 24 | position: absolute; 25 | top: 0; 26 | left: 0; 27 | transition: transform 0.5s ease-in-out; 28 | } 29 | 30 | .left-slide > div { 31 | height: 100%; 32 | width: 100%; 33 | display: flex; 34 | flex-direction: column; 35 | align-items: center; 36 | justify-content: center; 37 | color: #fff; 38 | } 39 | 40 | .left-slide h1 { 41 | font-size: 40px; 42 | margin-bottom: 10px; 43 | margin-top: -30px; 44 | } 45 | 46 | .right-slide { 47 | height: 100%; 48 | position: absolute; 49 | top: 0; 50 | left: 35%; 51 | width: 65%; 52 | transition: transform 0.5s ease-in-out; 53 | } 54 | 55 | .right-slide > div { 56 | background-repeat: no-repeat; 57 | background-size: cover; 58 | background-position: center center; 59 | height: 100%; 60 | width: 100%; 61 | } 62 | 63 | button { 64 | background-color: #fff; 65 | border: none; 66 | color: #aaa; 67 | cursor: pointer; 68 | font-size: 16px; 69 | padding: 15px; 70 | } 71 | 72 | button:hover { 73 | color: #222; 74 | } 75 | 76 | button:focus { 77 | outline: none; 78 | } 79 | 80 | .slider-container .action-buttons button { 81 | position: absolute; 82 | left: 35%; 83 | top: 50%; 84 | z-index: 100; 85 | } 86 | 87 | .slider-container .action-buttons .down-button { 88 | transform: translateX(-100%); 89 | border-top-left-radius: 5px; 90 | border-bottom-left-radius: 5px; 91 | } 92 | 93 | .slider-container .action-buttons .up-button { 94 | transform: translateY(-100%); 95 | border-top-right-radius: 5px; 96 | border-bottom-right-radius: 5px; 97 | } 98 | -------------------------------------------------------------------------------- /Projects/Double-Vertical-Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | Vertical Slider 12 | 13 | 14 |
    15 |
    16 |
    17 |

    Nature flower

    18 |

    all in pink

    19 |
    20 |
    21 |

    Blue Sky

    22 |

    with it's mountains

    23 |
    24 |
    25 |

    Lonely castle

    26 |

    in the wilderness

    27 |
    28 |
    29 |

    Flying eagle

    30 |

    in the sunset

    31 |
    32 |
    33 |
    34 |
    39 |
    44 |
    49 |
    54 |
    55 |
    56 | 59 | 62 |
    63 |
    64 | 65 | 66 | 67 | 68 | -------------------------------------------------------------------------------- /Projects/Double-Vertical-Slider/scripts/script.js: -------------------------------------------------------------------------------- 1 | const sliderContainer = document.querySelector('.slider-container'); 2 | const slideRight = document.querySelector('.right-slide'); 3 | const slideLeft = document.querySelector('.left-slide'); 4 | const upButton = document.querySelector('.up-button'); 5 | const downButton = document.querySelector('.down-button'); 6 | const slidesLength = slideRight.querySelectorAll('div').length; 7 | 8 | let activeSlideIndex = 0; 9 | 10 | slideLeft.style.top = `-${(slidesLength - 1) * 100}vh`; 11 | 12 | upButton.addEventListener('click', () => changeSlide('up')); 13 | downButton.addEventListener('click', () => changeSlide('down')); 14 | 15 | const changeSlide = (direction) => { 16 | const sliderHeight = sliderContainer.clientHeight; 17 | if (direction === 'up') { 18 | activeSlideIndex++; 19 | if (activeSlideIndex > slidesLength - 1) { 20 | activeSlideIndex = 0; 21 | } 22 | } else if (direction === 'down') { 23 | activeSlideIndex--; 24 | if (activeSlideIndex < 0) { 25 | activeSlideIndex = slidesLength - 1; 26 | } 27 | } 28 | 29 | slideRight.style.transform = `translateY(-${ 30 | activeSlideIndex * sliderHeight 31 | }px)`; 32 | slideLeft.style.transform = `translateY(${ 33 | activeSlideIndex * sliderHeight 34 | }px)`; 35 | }; 36 | -------------------------------------------------------------------------------- /Projects/Gradient_Background_Generator/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font: 'Raleway', sans-serif; 3 | color: rgba(0,0,0,.5); 4 | text-align: center; 5 | text-transform: uppercase; 6 | letter-spacing: .5em; 7 | top: 15%; 8 | background: linear-gradient(to right, red , yellow); /* Standard syntax */ 9 | } 10 | 11 | h1 { 12 | font: 600 3.5em 'Raleway', sans-serif; 13 | color: rgba(0,0,0,.5); 14 | text-align: center; 15 | text-transform: uppercase; 16 | letter-spacing: .5em; 17 | width: 100%; 18 | } 19 | 20 | h3 { 21 | font: 900 1em 'Raleway', sans-serif; 22 | color: rgba(0,0,0,.5); 23 | text-align: center; 24 | text-transform: none; 25 | letter-spacing: 0.01em; 26 | 27 | } 28 | -------------------------------------------------------------------------------- /Projects/Gradient_Background_Generator/Assets/media/Demo-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Gradient_Background_Generator/Assets/media/Demo-1.png -------------------------------------------------------------------------------- /Projects/Gradient_Background_Generator/Assets/media/Demo-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Gradient_Background_Generator/Assets/media/Demo-2.png -------------------------------------------------------------------------------- /Projects/Gradient_Background_Generator/Readme.md: -------------------------------------------------------------------------------- 1 |

    BASIC BACKGROUND GENERATOR

    2 | 3 |

    A basic gradient Background Generator which allows you to create a background by selecting your required colors. This will make up a gradient mix and provide you the code line so that you can use it in your Website

    4 |
    5 | 6 |

    Tech Stack Used

    7 |
    8 | 9 |

    HTML 10 | CSS 11 | JS

    12 | 13 |

    Use of the Project

    14 | 15 |

    16 | This project aims to find the best looking background gradient for your project. You just have to select the colors you want from the color picker and then copy the code displayed and paste into your code as background color. 17 | It's That Simple!! 18 |

    19 |

    20 | 21 |

    image 22 |

    23 | image

    24 | -------------------------------------------------------------------------------- /Projects/Gradient_Background_Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Gradient Background 5 | 6 | 7 | 8 |

    Background Generator

    9 | 10 | 11 |

    Current CSS Background

    12 |

    13 | 14 | 15 | -------------------------------------------------------------------------------- /Projects/Gradient_Background_Generator/script/script.js: -------------------------------------------------------------------------------- 1 | var css = document.querySelector("h3"); 2 | var color1 = document.querySelector(".color1"); 3 | var color2 = document.querySelector(".color2"); 4 | var body = document.getElementById("gradient"); 5 | 6 | function setGradient() { 7 | body.style.background = 8 | "linear-gradient(to right, " 9 | + color1.value 10 | + ", " 11 | + color2.value 12 | +")"; 13 | 14 | css.textContent = body.style.background + ";"; 15 | } 16 | 17 | color1.addEventListener("input", setGradient) 18 | 19 | color2.addEventListener("input", setGradient) 20 | -------------------------------------------------------------------------------- /Projects/Joke Generator/css/styles.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | font-family: "Rubik",sans-serif; 6 | } 7 | 8 | body { 9 | background-color: #0772a7; 10 | } 11 | 12 | .wrapper { 13 | width: 400px; 14 | padding: 50px 40px; 15 | background-color: #fafdfd; 16 | position: absolute; 17 | transform: translate(-50%, -50%); 18 | top: 50%; 19 | left: 50%; 20 | border-radius: 5px; 21 | box-shadow: 20px 20px 40px rgba(97,63,0,0.4); 22 | } 23 | 24 | span { 25 | display: block; 26 | text-align: center; 27 | margin-top: -30px; 28 | color:#063f63; 29 | font-size: 25px; 30 | font-family: sans-serif; 31 | font-weight: 500; 32 | } 33 | 34 | p { 35 | font-size: 16px; 36 | box-shadow: 0 0 20px rgba(0,139,253,0.28); 37 | font-weight: 400; 38 | text-align: center; 39 | word-wrap: break-word; 40 | line-height: 35px; 41 | margin: 30px 0; 42 | opacity: 0; 43 | } 44 | 45 | .fade { 46 | opacity: 1; 47 | transition: opacity 0.1s; 48 | } 49 | 50 | button { 51 | display: block; 52 | background-color: #0354ab; 53 | border: none; 54 | padding: 5px; 55 | font-size: 18px; 56 | color: #e7e7ec; 57 | font-weight: 500; 58 | padding: 12px 25px; 59 | margin: 0 auto; 60 | border-radius: 5px; 61 | cursor: pointer; 62 | outline: none; 63 | } 64 | -------------------------------------------------------------------------------- /Projects/Joke Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Random Joke Generator 6 | 7 | 8 | 9 | 10 | 11 |
    12 | 13 | 14 | Random Joke Generator 15 | 16 | 17 |

    18 | 19 | 22 |
    23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Projects/Joke Generator/js/scripts.js: -------------------------------------------------------------------------------- 1 | const jokeContainer = document.getElementById("joke"); 2 | const btn = document.getElementById("btn"); 3 | const url = "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single"; 4 | 5 | let getJoke = () => { 6 | jokeContainer.classList.remove("fade"); 7 | fetch(url) 8 | .then(data => data.json()) 9 | .then(item =>{ 10 | jokeContainer.textContent = `${item.joke}`; 11 | jokeContainer.classList.add("fade"); 12 | }); 13 | } 14 | btn.addEventListener("click",getJoke); 15 | getJoke(); -------------------------------------------------------------------------------- /Projects/Joke-Telling-Robot/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | min-height: 100vh; 13 | /* background-color: #FFBA0A; */ 14 | } 15 | 16 | button{ 17 | padding: 15px 60px; 18 | cursor: pointer; 19 | border: none; 20 | background-color: #0a98ff; 21 | color: #fff; 22 | font-size: 20px; 23 | font-weight: 600; 24 | border-radius: 5px; 25 | box-shadow: 0 2px 8px rgba(0,0,0,0.5); 26 | transition: all 0.2s linear; 27 | } 28 | 29 | button:hover{ 30 | transform: scale(1.1); 31 | } 32 | 33 | button:focus{ 34 | outline: none; 35 | } 36 | 37 | img{ 38 | height: 400px; 39 | width: 600px; 40 | margin-bottom: 20px; 41 | } 42 | 43 | h1{ 44 | color: rgb(4, 110, 110); 45 | margin-top: 20px; 46 | font-size: 20px; 47 | } -------------------------------------------------------------------------------- /Projects/Joke-Telling-Robot/Assets/media/Joke Telling Robot.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Joke-Telling-Robot/Assets/media/Joke Telling Robot.mp4 -------------------------------------------------------------------------------- /Projects/Joke-Telling-Robot/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Joke-Telling-Robot/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Joke-Telling-Robot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Joke Telling Robot 9 | 10 | 11 | 12 | 13 | robot 14 |

    Joke

    15 | 16 | 17 | -------------------------------------------------------------------------------- /Projects/Joke-Telling-Robot/readme.md: -------------------------------------------------------------------------------- 1 | # Joke Telling Robot 2 | 3 | ## About the Project 4 | It is a simple javascript which uses web speech api for telling a joke and for randomly creating a joke, another joke api used. 5 | 6 | Jokes are based on programming category. 7 | 8 | ## Tech Stacks Used 9 | 10 | 11 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 12 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 13 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 14 | 15 | ## API Used 16 | 17 | https://official-joke-api.appspot.com/jokes/programming/random 18 | 19 | ## Screenshots 20 | 21 | 22 | 23 | ## Live Demo 24 | 25 | https://user-images.githubusercontent.com/52875298/128720369-f464d934-8ed0-4f46-8cf7-1fb0030fa598.mp4 26 | 27 | 28 | -------------------------------------------------------------------------------- /Projects/Joke-Telling-Robot/script/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector('#btn'); 2 | const jokeHeading = document.querySelector('#joke'); 3 | 4 | function getJokes(){ 5 | fetch("https://official-joke-api.appspot.com/jokes/programming/random") 6 | .then( res => res.json()) 7 | .then( data =>{ 8 | const joke = data[0]; 9 | // console.log(joke); 10 | const setup = joke.setup; 11 | const punchline = joke.punchline; 12 | const finalJoke = setup + ' ' + punchline; 13 | jokeHeading.innerHTML = finalJoke; 14 | setTextMessage(finalJoke); 15 | speakText(); 16 | }) 17 | } 18 | 19 | // init speech 20 | 21 | const message = new SpeechSynthesisUtterance(); 22 | 23 | // set text 24 | 25 | function setTextMessage(text){ 26 | message.text = text; 27 | } 28 | 29 | function speakText(){ 30 | speechSynthesis.speak(message); 31 | } 32 | 33 | btn.addEventListener('click', getJokes); 34 | -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/images/bg1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/JumpingDinosaurGame/images/bg1.jpg -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/images/dino.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/JumpingDinosaurGame/images/dino.png -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/images/dragon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/JumpingDinosaurGame/images/dragon.png -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Jumping Game 7 | 8 | 9 | 10 | 11 | 12 |
    13 |
    Welcome to the Jumping Adventure
    14 |
    15 |
    Your Score: 0
    16 |
    17 |
    18 | 19 | -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/music/Jumping Game_gameover.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/JumpingDinosaurGame/music/Jumping Game_gameover.mp3 -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/music/Jumping Game_music.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/JumpingDinosaurGame/music/Jumping Game_music.mp3 -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/script.js: -------------------------------------------------------------------------------- 1 | score = 0; 2 | cross = true; 3 | 4 | audio = new Audio('/Projects/JumpingDinosaurGame/music/Jumping Game_music.mp3'); 5 | audiogo = new Audio('/Projects/JumpingDinosaurGame/music/Jumping Game_gameover.mp3'); 6 | setTimeout(() => { 7 | audio.play() 8 | }, 1000); 9 | document.onkeydown = function (e) { 10 | console.log("Key code is: ", e.keyCode) 11 | if (e.keyCode == 38) { 12 | dino = document.querySelector('.dino'); 13 | dino.classList.add('animateDino'); 14 | setTimeout(() => { 15 | dino.classList.remove('animateDino') 16 | }, 700); 17 | } 18 | if (e.keyCode == 39) { 19 | dino = document.querySelector('.dino'); 20 | dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left')); 21 | dino.style.left = dinoX + 112 + "px"; 22 | } 23 | if (e.keyCode == 37) { 24 | dino = document.querySelector('.dino'); 25 | dinoX = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left')); 26 | dino.style.left = (dinoX - 112) + "px"; 27 | } 28 | } 29 | 30 | setInterval(() => { 31 | dino = document.querySelector('.dino'); 32 | gameOver = document.querySelector('.gameOver'); 33 | obstacle = document.querySelector('.obstacle'); 34 | 35 | dx = parseInt(window.getComputedStyle(dino, null).getPropertyValue('left')); 36 | dy = parseInt(window.getComputedStyle(dino, null).getPropertyValue('top')); 37 | 38 | ox = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('left')); 39 | oy = parseInt(window.getComputedStyle(obstacle, null).getPropertyValue('top')); 40 | 41 | offsetX = Math.abs(dx - ox); 42 | offsetY = Math.abs(dy - oy); 43 | // console.log(offsetX, offsetY) 44 | if (offsetX < 73 && offsetY < 52) { 45 | gameOver.innerHTML = "Game Over - Reload to Play Again" 46 | obstacle.classList.remove('obstacleAni') 47 | audiogo.play(); 48 | setTimeout(() => { 49 | audiogo.pause(); 50 | audio.pause(); 51 | }, 1000); 52 | } 53 | else if (offsetX < 145 && cross) { 54 | score += 1; 55 | updateScore(score); 56 | cross = false; 57 | setTimeout(() => { 58 | cross = true; 59 | }, 1000); 60 | setTimeout(() => { 61 | aniDur = parseFloat(window.getComputedStyle(obstacle, null).getPropertyValue('animation-duration')); 62 | newDur = aniDur - 0.1; 63 | obstacle.style.animationDuration = newDur + 's'; 64 | console.log('New animation duration: ', newDur) 65 | }, 500); 66 | 67 | } 68 | 69 | }, 10); 70 | 71 | function updateScore(score) { 72 | scoreCont.innerHTML = "Your Score: " + score 73 | } -------------------------------------------------------------------------------- /Projects/JumpingDinosaurGame/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding:0; 4 | } 5 | body{ 6 | background-color: red; 7 | overflow: hidden; 8 | } 9 | .gameContainer{ 10 | background-image: url(/Projects/JumpingDinosaurGame/images/bg1.jpg); 11 | background-repeat: no-repeat; 12 | background-size: 100vw 100vh; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | 17 | .dino{ 18 | background-image: url(/Projects/JumpingDinosaurGame/images/dino.png); 19 | background-repeat: no-repeat; 20 | background-size: cover; 21 | width: 233px; 22 | height: 114px; 23 | position: absolute; 24 | bottom:0; 25 | left: 52px; 26 | } 27 | 28 | .obstacle{ 29 | width: 166px; 30 | height: 113px; 31 | background-image: url(/Projects/JumpingDinosaurGame/images/dragon.png); 32 | background-size: cover; 33 | position: absolute; 34 | bottom: 0; 35 | left: 44vw; 36 | } 37 | 38 | .animateDino{ 39 | animation: dino 0.6s linear; 40 | } 41 | 42 | .obstacleAni{ 43 | animation: obstacleAni 5s linear infinite; 44 | } 45 | 46 | .gameOver{ 47 | position: relative; 48 | top:63px; 49 | font-size: 53px; 50 | text-align: center; 51 | font-family: 'Ubuntu', sans-serif; 52 | } 53 | 54 | #scoreCont{ 55 | font-size: 25px; 56 | color: #54212f; 57 | font-weight: bold; 58 | position: absolute; 59 | right: 45px; 60 | top: 31px; 61 | border: 2px solid black; 62 | padding: 10px; 63 | font-family: 'Ubuntu', sans-serif; 64 | border-radius: 10px; 65 | } 66 | 67 | @keyframes dino{ 68 | 0%{ 69 | bottom: 0; 70 | } 71 | 50%{ 72 | bottom: 422px; 73 | } 74 | 100%{ 75 | bottom: 0; 76 | } 77 | } 78 | 79 | @keyframes obstacleAni{ 80 | 0%{ 81 | left: 100vw; 82 | } 83 | 100%{ 84 | left: -10vw; 85 | } 86 | } -------------------------------------------------------------------------------- /Projects/Lets practice/add.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lets practice 9 | 10 | 11 |
    12 |

    Addition

    13 |
    14 |
    15 |
    16 | 17 |
    18 |
    19 |

    +

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 | 34 | 35 | 59 | 60 | -------------------------------------------------------------------------------- /Projects/Lets practice/assets/css/index.css: -------------------------------------------------------------------------------- 1 | *{ 2 | font-family: 'Philosopher', sans-serif; 3 | } 4 | body{ 5 | background-image: radial-gradient(#104069,#000000); 6 | } 7 | 8 | .main{ 9 | padding:24px; 10 | margin-top: 40px; 11 | border-radius: 17px; 12 | padding:24px; 13 | height: auto; 14 | text-align: center; 15 | } 16 | .container{ 17 | display:flex; 18 | padding:24px; 19 | justify-content:space-evenly; 20 | flex-direction: row; 21 | flex-wrap: wrap; 22 | margin-top: 30px; 23 | } 24 | .content{ 25 | height:auto; 26 | width:40%; 27 | transition: 0.3s; 28 | border-radius: 17px; 29 | background: rgba( 141, 198, 255, 0.15 ); 30 | box-shadow: 0 8px 32px 0 rgba( 31, 38, 135, 0.37 ); 31 | backdrop-filter: blur( 6.0px ); 32 | -webkit-backdrop-filter: blur( 6.0px ); 33 | border-radius: 10px; 34 | margin-bottom: 60px; 35 | color: white; 36 | padding: 20px; 37 | margin-right: 35px; 38 | } 39 | .content>h1{ 40 | margin-top: 20px; 41 | } 42 | .content >h3{ 43 | font-size: 20px; 44 | color: white; 45 | font-family: 'Roboto', sans-serif; 46 | margin: 15px 10px; 47 | } 48 | .heading{ 49 | margin:auto; 50 | font-size: 4rem; 51 | color: #8DC6FF; 52 | } 53 | .content:hover{ 54 | box-shadow: 3px 3px 10px 0 rgba(119, 216, 243, 0.603); 55 | transition: 0.5s; 56 | } 57 | .btn{ 58 | font-weight: bold; 59 | border: 2px solid#031e36; 60 | color: white; 61 | padding: 10px 20px; 62 | text-align: center; 63 | text-decoration: none; 64 | display: inline-block; 65 | font-size: 20px; 66 | margin: 4px 2px; 67 | transition-duration: 0.5s; 68 | cursor: pointer; 69 | border-radius:15px; 70 | } 71 | .btn:hover{ 72 | background-color: white; 73 | color: #031e36; 74 | transform: scale(1.1); 75 | transition: 0.5s; 76 | } 77 | -------------------------------------------------------------------------------- /Projects/Lets practice/assets/css/page.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | 5 | } 6 | 7 | section{ 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background-image: radial-gradient(#104069,#000000); 14 | } 15 | section h1{ 16 | padding-bottom: 30px; 17 | font-size: 2rem; 18 | text-shadow: 1px 1px 2px white; 19 | } 20 | .centerdiv{ 21 | width: 500px; 22 | height: 400px; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | flex-direction: column; 27 | background-color: aquamarine; 28 | } 29 | .insertBox{ 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | height: 100px; 34 | } 35 | #v1, #v2{ 36 | text-align: center; 37 | padding: 20px 30px; 38 | width: 35px; 39 | font-size: 30px; 40 | box-shadow: 1px 1px 0px #999, 41 | 2px 2px 0px #999, 42 | 3px 3px 0px #999, 43 | 4px 4px 0px #999; 44 | } 45 | .box1 p{ 46 | font-size: 60px; 47 | margin: 1px 5px; 48 | } 49 | .middleBox #answer{ 50 | margin: 30px 0; 51 | padding: 5px 0; 52 | font-size: 30px; 53 | text-align: center; 54 | width: 80px; 55 | } 56 | .middleBox #q{ 57 | margin: 30px 0; 58 | padding: 5px 0; 59 | font-size: 30px; 60 | text-align: center; 61 | width: 100px; 62 | } 63 | .middleBox #r{ 64 | margin: 30px 0; 65 | padding: 5px 0; 66 | font-size: 30px; 67 | text-align: center; 68 | width: 100px; 69 | } 70 | .middleBox .bu{ 71 | color: rgb(255, 255, 255); 72 | border: none; 73 | background-color: #104069; 74 | width: 20px; 75 | } 76 | .sentBox button{ 77 | padding: 10px 20px; 78 | font-size: 0.8rem; 79 | color: white; 80 | border: none; 81 | background-color: rgb(1, 121, 81); 82 | border-radius: 2px; 83 | } -------------------------------------------------------------------------------- /Projects/Lets practice/div.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lets practice 9 | 10 | 11 |
    12 |

    Division

    13 |
    14 |
    15 |
    16 | 17 |
    18 |
    19 |

    %

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 | 28 | 29 | 30 |
    31 |
    32 | 33 |
    34 |
    35 |
    36 | 37 | 38 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /Projects/Lets practice/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Lets practice 13 | 14 | 15 |
    16 |
    Let's Play
    17 |
    18 |
    19 |

    Addition

    20 | 21 |

    22 |
    23 |
    24 |

    Subtraction

    25 | 26 |

    27 |
    28 |
    29 |

    Multiplication

    30 | 31 |

    32 |
    33 |
    34 |

    Division

    35 | 36 |

    37 |
    38 |
    39 |
    40 |
    41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/Lets practice/mul.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lets practice 9 | 10 | 11 |
    12 |

    Multiplication

    13 |
    14 |
    15 |
    16 | 17 |
    18 |
    19 |

    x

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 | 34 | 35 | 59 | 60 | -------------------------------------------------------------------------------- /Projects/Lets practice/readme.md: -------------------------------------------------------------------------------- 1 | # Welcome 🖐 to Lets Practice 2 | 3 | This webapp is basically for kids to practice addition, substraction, multiplication and division. 4 | 5 | ## 💻Tech Stack 6 |
    7 | 8 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 9 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 10 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 11 | 12 |
    13 | 14 | ### How to get the game on your local machine: 15 | 16 | --- 17 | 18 | - Download or clone the repository 19 | 20 | - Go to the directory 21 | - Run the index.html file 22 | - Check your addition solving capacity. 23 | 24 | the a 25 | 26 |
    27 | 28 | ### How to use 29 | 1. Select the option you want to practice. 30 | 1. Calculate and write your ans in the box and click check answer. 31 | 2. Alert will be given if the ans is write or wrong . 32 | 3. Click ok to continue the quiz. 33 | 34 | It somehow look like this. 35 | 36 | ![a](https://user-images.githubusercontent.com/76838660/128598434-f516f5dc-d37a-47d5-9cf3-2558687efeab.PNG) 37 | ![s](https://user-images.githubusercontent.com/76838660/128598436-15890da5-274c-4c72-b87a-648b93f1fb12.PNG) 38 | ![d](https://user-images.githubusercontent.com/76838660/128598437-d4a38186-9eba-4d61-9074-f429e6c1b8da.PNG) 39 | 40 | 41 | ## Happy Coding! 42 | -------------------------------------------------------------------------------- /Projects/Lets practice/sub.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Lets practice 9 | 10 | 11 |
    12 |

    Substraction

    13 |
    14 |
    15 |
    16 | 17 |
    18 |
    19 |

    -

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 | 34 | 35 | 61 | 62 | -------------------------------------------------------------------------------- /Projects/Maths quiz game/README.md: -------------------------------------------------------------------------------- 1 | # Welcome 🖐 to Maths Addition Quiz Game 2 | 3 | This webapp is basically for kids to practice addition. 4 | 5 | ## 💻Tech Stack 6 |
    7 | 8 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 9 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 10 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 11 | 12 |
    13 | 14 | ### How to get the game on your local machine: 15 | 16 | --- 17 | 18 | - Download or clone the repository 19 | 20 | - Go to the directory 21 | - Run the index.html file 22 | - Check your addition solving capacity. 23 | 24 | the a 25 | 26 |
    27 | 28 | ### How to use 29 | 1. Add and write your ans in the box and click check answer. 30 | 2. Alert will be given if the ans is write or wrong . 31 | 3. Click ok to continue the quiz. 32 | 33 | It somehow look like this. 34 | 35 | ![c2](https://user-images.githubusercontent.com/76838660/126802791-4ff8bdd6-423f-49e8-a075-8026f451c258.PNG) 36 | ![c1](https://user-images.githubusercontent.com/76838660/126802799-08661f02-807b-4e06-a718-4e8cea8c1c52.PNG) 37 | 38 | 39 | 40 | ## Happy Coding! 41 | -------------------------------------------------------------------------------- /Projects/Maths quiz game/assets/quiz.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | 5 | } 6 | 7 | section{ 8 | height: 100vh; 9 | display: flex; 10 | flex-direction: column; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: azure; 14 | } 15 | section h1{ 16 | padding-bottom: 30px; 17 | font-size: 2rem; 18 | text-shadow: 1px 1px 2px white; 19 | } 20 | .centerdiv{ 21 | width: 500px; 22 | height: 400px; 23 | display: flex; 24 | justify-content: center; 25 | align-items: center; 26 | flex-direction: column; 27 | background-color: aquamarine; 28 | } 29 | .insertBox{ 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | height: 100px; 34 | } 35 | #v1, #v2{ 36 | text-align: center; 37 | padding: 20px 30px; 38 | width: 35px; 39 | font-size: 30px; 40 | box-shadow: 1px 1px 0px #999, 41 | 2px 2px 0px #999, 42 | 3px 3px 0px #999, 43 | 4px 4px 0px #999; 44 | } 45 | .box1 p{ 46 | font-size: 60px; 47 | margin: 1px 5px; 48 | } 49 | .middleBox #answer{ 50 | margin: 30px 0; 51 | padding: 5px 0; 52 | font-size: 30px; 53 | text-align: center; 54 | width: 180px; 55 | } 56 | .sentBox button{ 57 | padding: 10px 20px; 58 | font-size: 0.8rem; 59 | color: white; 60 | border: none; 61 | background-color: rgb(1, 121, 81); 62 | border-radius: 2px; 63 | } -------------------------------------------------------------------------------- /Projects/Maths quiz game/quiz.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Math Game 9 | 10 | 11 |
    12 |

    Maths Quiz

    13 |
    14 |
    15 |
    16 | 17 |
    18 |
    19 |

    +

    20 |
    21 |
    22 | 23 |
    24 |
    25 |
    26 | 27 |
    28 |
    29 | 30 |
    31 |
    32 |
    33 | 34 | 35 | 59 | 60 | -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | height: 100vh; 8 | background-color:darkkhaki; 9 | display: flex; 10 | } 11 | h1{ 12 | width: 500px; 13 | padding-top: 10px; 14 | padding-bottom: 100; 15 | position: absolute; 16 | left:32%; 17 | text-align: center; 18 | } 19 | .container{ 20 | width: 500px; 21 | height: 500px; 22 | margin: auto; 23 | display: flex; 24 | flex-wrap: wrap; 25 | perspective: 1000px; 26 | } 27 | .card{ 28 | width: 23%; 29 | height: 23%; 30 | margin: 5px; 31 | position: relative; 32 | transform-style: preserve-3d; 33 | transition: transform 0.3s; 34 | cursor: pointer; 35 | } 36 | .card:active{ 37 | transform: scale(0.95); 38 | transition: transform 0.2s ease-in-out; 39 | } 40 | .card.flip{ 41 | transform: rotateY(180deg); 42 | cursor: pointer; 43 | } 44 | .frontSide, .backSide{ 45 | background-color:bisque; 46 | width: 100%; 47 | height: 100%; 48 | padding: 10px; 49 | border-radius: 10px; 50 | position: absolute; 51 | backface-visibility: hidden; 52 | } 53 | .frontSide{ 54 | transform: rotateY(180deg); 55 | } 56 | -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/back.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/back.jpg -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/c++.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/c++.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/css.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/css.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/html.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/html.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/java.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/java.jpg -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/javascript.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/javascript.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/kotlin.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/kotlin.jpg -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/php.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/php.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/images/python.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/images/python.jpg -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/screenshots/back_to_original.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/screenshots/back_to_original.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/screenshots/matched.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/screenshots/matched.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Assets/media/screenshots/not_matched.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Memory_Card_Game/Assets/media/screenshots/not_matched.png -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/README.md: -------------------------------------------------------------------------------- 1 | # Memory Card Game 2 | A basic memory game in which the trick is to remember which cards are where. 3 | 4 | # Stack Used 5 | - HTML5 6 | - CSS3 7 | - JavaScript 8 | 9 | # Set up required to run 10 | 1. Clone the repository. 11 | ``` 12 | git clone https://github.com/LetsGrowMoreCommunity/WebDev-Playyard.git 13 | ``` 14 | 2. Move to project directory. 15 | 16 | 3. Open mainGame.html with Chrome or any browser. 17 | 18 | 4. Start Playing. 19 | 20 | # Screenshots 21 | - When a player turns over two cards that match, those cards get fixed. 22 | ![](./Assets/media/screenshots/matched.png) 23 | 24 | - When a player turns over two cards that do not match, those cards are turned face down again (in the same position). 25 | ![](./Assets/media/screenshots/not_matched.png) 26 | ![](./Assets/media/screenshots/back_to_original.png) 27 | -------------------------------------------------------------------------------- /Projects/Memory_Card_Game/Script/index.js: -------------------------------------------------------------------------------- 1 | const cards = document.querySelectorAll(".card"); 2 | var firstCard, secondCard; 3 | var lock = false; 4 | var isFlipped = false; 5 | 6 | cards.forEach(card => 7 | card.addEventListener("click", flip)); 8 | 9 | function flip() { 10 | if (lock) 11 | return; 12 | 13 | if (this === firstCard) 14 | return; 15 | 16 | this.classList.add("flip"); 17 | if(!isFlipped){ 18 | isFlipped = true; 19 | firstCard = this; 20 | return; 21 | } 22 | secondCard = this; 23 | check(); 24 | } 25 | 26 | function check() { 27 | var isMatch = firstCard.dataset.image === 28 | secondCard.dataset.image; 29 | isMatch ? success() : failed(); 30 | } 31 | 32 | function success() { 33 | firstCard.removeEventListener("click", flip); 34 | secondCard.removeEventListener("click", flip); 35 | reset(); 36 | } 37 | 38 | function failed() { 39 | lock = true; 40 | setTimeout(() => { 41 | firstCard.classList.remove("flip"); 42 | secondCard.classList.remove("flip"); 43 | reset(); 44 | }, 1000); 45 | } 46 | 47 | function reset() { 48 | [isFlipped, lock] = [false, false]; 49 | [firstCard, secondCard] = [null, null]; 50 | } 51 | 52 | (function shuffle() { 53 | cards.forEach(card => { 54 | var position = Math.floor(Math.random() * 16); 55 | card.style.order = position; 56 | }); 57 | })(); 58 | -------------------------------------------------------------------------------- /Projects/Music App/README.md: -------------------------------------------------------------------------------- 1 |

    Music App

    2 |

    My music app deployment link: https://sulagna-dutta-roy.github.io/Music-App/

    3 | 4 | 5 |

    Music app using Javascript.User just tap once in the colors and song will played.You will see different kind of songs.There are 6 colors and 6 songs.I've made this project using pure javascript.

    6 | 7 |

    Tech Stacks Used:

    8 | 13 | 14 |

    Output

    15 | 16 | ![Music App Output](https://user-images.githubusercontent.com/72568715/128746213-dee16616-5b7a-4af7-b034-6d90617ddf1d.PNG) 17 | 18 | -------------------------------------------------------------------------------- /Projects/Music App/assets/css/style.css: -------------------------------------------------------------------------------- 1 | * 2 | { 3 | margin: 0; 4 | padding: 0; 5 | box-sizing: border-box; 6 | } 7 | body 8 | { 9 | font-family: 'Montserrat',sans-serif; 10 | } 11 | .app 12 | { 13 | height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | justify-content: space-around; 17 | align-items: center; 18 | } 19 | header h1 20 | { 21 | margin: 50px 0px 30px 0px; 22 | text-align: center; 23 | font-size: 40px; 24 | } 25 | header p 26 | { 27 | font-size: 20px; 28 | } 29 | .pads 30 | { 31 | background: lightblue; 32 | width: 100%; 33 | display: flex; 34 | } 35 | .pads>div 36 | { 37 | height: 100px; 38 | width: 100px; 39 | flex: 1; 40 | } 41 | .pad1 42 | { 43 | background: #604394; 44 | } 45 | .pad2 46 | { 47 | background: #d36060; 48 | } 49 | .pad3 50 | { 51 | background: #03fc88; 52 | } 53 | .pad4 54 | { 55 | background: #34ebe8; 56 | } 57 | .pad5 58 | { 59 | background: #4287f5; 60 | } 61 | .pad6 62 | { 63 | background: #f099e7; 64 | } 65 | .visual>div 66 | { 67 | position: absolute; 68 | height: 50px; 69 | width: 50px; 70 | border-radius: 50%; 71 | bottom: 0%; 72 | left: 20%; 73 | bottom: 0%; 74 | z-index: -1; 75 | } 76 | @keyframes jump 77 | { 78 | 0%{ 79 | bottom: 0%; 80 | left: 20%; 81 | } 82 | 50%{ 83 | bottom: 50%; 84 | left: 50%; 85 | } 86 | 100%{ 87 | bottom: 0%; 88 | left: 80%; 89 | } 90 | } 91 | 92 | .visual>div 93 | { 94 | position: absolute; 95 | height: 50px; 96 | width: 50px; 97 | border-radius: 50%; 98 | bottom: 0%; 99 | } -------------------------------------------------------------------------------- /Projects/Music App/assets/media/Music App Output.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/Music App Output.PNG -------------------------------------------------------------------------------- /Projects/Music App/assets/media/song1.mp3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/song1.mp3.mp3 -------------------------------------------------------------------------------- /Projects/Music App/assets/media/song2.mp3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/song2.mp3.mp3 -------------------------------------------------------------------------------- /Projects/Music App/assets/media/song3.mp3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/song3.mp3.mp3 -------------------------------------------------------------------------------- /Projects/Music App/assets/media/song4.mp3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/song4.mp3.mp3 -------------------------------------------------------------------------------- /Projects/Music App/assets/media/song5.mp3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/song5.mp3.mp3 -------------------------------------------------------------------------------- /Projects/Music App/assets/media/song6.mp3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Music App/assets/media/song6.mp3.mp3 -------------------------------------------------------------------------------- /Projects/Music App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Tap Music 14 | 15 | 16 |
    17 |
    18 |

    Tap Music

    19 |

    Make Music with only one tap

    20 |
    21 | 22 |
    23 |
    24 |
    25 | 26 |
    27 |
    28 | 29 |
    30 |
    31 | 32 |
    33 |
    34 | 35 |
    36 |
    37 | 38 |
    39 |
    40 | 41 |
    42 |
    43 |
    44 | 45 | 46 | 47 | 48 | 49 | -------------------------------------------------------------------------------- /Projects/Music App/script/script.js: -------------------------------------------------------------------------------- 1 | //for sounds and colors 2 | window.addEventListener('load', () => { 3 | const sounds = document.querySelectorAll(".sound"); 4 | const pads = document.querySelectorAll(".pads div"); 5 | const visual = document.querySelector(".visual"); 6 | const colors=[ 7 | "#604394", 8 | "#d36060", 9 | "#03fc88", 10 | "#34ebe8", 11 | "#4287f5", 12 | "#f099e7" 13 | ]; 14 | //lets get going with the sound here 15 | pads.forEach((pad,index) => { 16 | pad.addEventListener('click', function () { 17 | sounds[index].currentTime=0; 18 | sounds[index].play(); 19 | 20 | createBubbles(index); 21 | }); 22 | }); 23 | //create a function for bubbles 24 | const createBubbles = (index) => { 25 | const bubble=document.createElement("div"); 26 | visual.appendChild(bubble); 27 | bubble.style.backgroundColor = colors[index]; 28 | bubble.style.animation = "jump is ease"; 29 | bubble.addEventListener('animationed',function() { 30 | visual.removeChild(this); 31 | }); 32 | }; 33 | }); 34 | -------------------------------------------------------------------------------- /Projects/Netflix UI Clone/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Netflix UI Clone/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/Netflix UI Clone/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Netflix UI Clone/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Netflix UI Clone/Assets/media/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Netflix UI Clone/Assets/media/ss2.png -------------------------------------------------------------------------------- /Projects/Netflix UI Clone/Assets/media/ss3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Netflix UI Clone/Assets/media/ss3.png -------------------------------------------------------------------------------- /Projects/Netflix UI Clone/script/script.js: -------------------------------------------------------------------------------- 1 | let accordian = document.getElementsByClassName("FAQ__title"); 2 | 3 | for (let i = 0; i < accordian.length; i++) { 4 | accordian[i].addEventListener("click", function () { 5 | if (this.childNodes[1].classList.contains("fa-plus")) { 6 | this.childNodes[1].classList.remove("fa-plus"); 7 | this.childNodes[1].classList.add("fa-times"); 8 | } else { 9 | this.childNodes[1].classList.remove("fa-times"); 10 | this.childNodes[1].classList.add("fa-plus"); 11 | } 12 | 13 | let content = this.nextElementSibling; 14 | if (content.style.maxHeight) { 15 | content.style.maxHeight = null; 16 | } else { 17 | content.style.maxHeight = content.scrollHeight + "px"; 18 | } 19 | }); 20 | } -------------------------------------------------------------------------------- /Projects/Password Generator/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | /* background-color: #ffc1cc; */ 9 | background: url("https://touchpoint.brownadvisory.com/brown-web/resources/images/loginFullBackground.jpg"); 10 | background-size: cover; 11 | background-repeat: no-repeat; 12 | color: #fff; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | min-height: 100vh; 18 | padding: 10px; 19 | } 20 | 21 | h2{ 22 | font-size: 30px; 23 | margin: 10px 0 20px; 24 | text-align: center; 25 | } 26 | 27 | input[type='checkbox']{ 28 | margin-right: 0; 29 | } 30 | 31 | .container{ 32 | background-color: #0c636e; 33 | box-shadow: 0 2px 10px rgba(2555,255,255,0.2); 34 | padding: 20px; 35 | width: 350px; 36 | max-width: 100%; 37 | } 38 | 39 | .result-container{ 40 | background-color: rgba(0,0,0,0.4); 41 | display: flex; 42 | justify-content: flex-start; 43 | align-items: center; 44 | position: relative; 45 | font-size: 18px; 46 | letter-spacing: 1px; 47 | padding: 8px 10px; 48 | height: 45px; 49 | width: 100%; 50 | } 51 | 52 | .result-container #result{ 53 | word-wrap: break; 54 | max-width: calc(100% - 40px); 55 | } 56 | 57 | .result-container .btn{ 58 | font-size: 20px; 59 | position: absolute; 60 | top: 5px; 61 | right: 5px; 62 | height: 40px; 63 | width: 40px; 64 | } 65 | 66 | .btn{ 67 | border: none; 68 | color: #fff; 69 | cursor: pointer; 70 | font-size: 16px; 71 | padding: 8px 12px; 72 | background-color: transparent; 73 | } 74 | 75 | .btn-large{ 76 | background-color:#ef476f; 77 | display: block; 78 | width: 100%; 79 | } 80 | 81 | 82 | .setting{ 83 | display: flex; 84 | justify-content: space-between; 85 | align-items: center; 86 | margin: 15px 0; 87 | } 88 | 89 | input[type='number']::-webkit-inner-spin-button, 90 | input[type='number']::-webkit-outer-spin-button{ 91 | -webkit-appearance: none; 92 | 93 | } 94 | 95 | input[type='number']{ 96 | border: none; 97 | outline: none; 98 | padding: 2px; 99 | } 100 | 101 | @media screen and(max-width:400px){ 102 | .result-container{ 103 | font-size: 14px; 104 | } 105 | } -------------------------------------------------------------------------------- /Projects/Password Generator/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Password Generator/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/Password Generator/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Password Generator/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Password Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | Password Generator 13 | 14 | 15 |
    16 |

    Password Generator

    17 |
    18 | 19 | 22 |
    23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 | 30 | 31 | 32 |
    33 |
    34 | 35 | 36 |
    37 |
    38 | 39 | 40 |
    41 |
    42 | 43 | 44 |
    45 |
    46 | 47 | 50 |
    51 | 52 | 53 | 54 | -------------------------------------------------------------------------------- /Projects/Password Generator/readme.md: -------------------------------------------------------------------------------- 1 | # Password Generator 2 | 3 | ## About The Project 4 | It is a simple javascript project which geerates a random password according to the users need. 5 | 6 | There are many options to select like include only numbers, include only symbols, include only small letters or capital letters, combinations of theses are also allowed. 7 | 8 | We can choose the length of the password, minimum is 5 and maximum is 20. 9 | 10 | Another feature is to copy the password to clipboard. 11 | 12 | ## Tech Stacks Used 13 | 14 | 15 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 16 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 17 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 18 | 19 | 20 | ## Screenshots 21 | 22 | 23 | 24 | 25 | ## Live Demo 26 | 27 | -------------------------------------------------------------------------------- /Projects/Project_Structure/Assets/css/Sudoku_Solver.css: -------------------------------------------------------------------------------- 1 | #container { 2 | height: auto; 3 | width: 540px; 4 | background-color: white; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: space-evenly; 8 | align-content: space-evenly; 9 | margin: 0 auto; 10 | } 11 | 12 | #generate-sudoku { 13 | margin: auto; 14 | display: block; 15 | } 16 | 17 | #solve { 18 | margin: auto; 19 | display: block; 20 | } 21 | 22 | #container div { 23 | background-color: whitesmoke; 24 | height: 60px; 25 | width: 60px; 26 | box-sizing: border-box; 27 | font-family: sans-serif; 28 | text-align: center; 29 | vertical-align: middle; 30 | line-height: 60px; 31 | font-size: 30px; 32 | color: red; 33 | } 34 | 35 | #container div:hover { 36 | background-color: rgb(250, 250, 135); 37 | } 38 | 39 | .lsb { 40 | border-left: black 2px solid; 41 | } 42 | 43 | .bsb { 44 | border-bottom: black 2px solid; 45 | } 46 | 47 | .rsb { 48 | border-right: black 2px solid; 49 | } 50 | 51 | .tsb { 52 | border-top: black 2px solid; 53 | } 54 | 55 | .ldb { 56 | border-left: black 0.6px dashed; 57 | } 58 | 59 | .bdb { 60 | border-bottom: black 0.6px dashed; 61 | } 62 | 63 | .rdb { 64 | border-right: black 0.6px dashed; 65 | } 66 | 67 | .tdb { 68 | border-top: black 0.6px dashed; 69 | } -------------------------------------------------------------------------------- /Projects/Project_Structure/Assets/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Project_Structure/Assets/css/style.css -------------------------------------------------------------------------------- /Projects/Project_Structure/Assets/media/Sudoku_Solver.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Project_Structure/Assets/media/Sudoku_Solver.jpeg -------------------------------------------------------------------------------- /Projects/Project_Structure/Assets/media/image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Project_Structure/Assets/media/image.png -------------------------------------------------------------------------------- /Projects/Project_Structure/Pages/page2.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Project_Structure/Pages/page2.html -------------------------------------------------------------------------------- /Projects/Project_Structure/readme.md: -------------------------------------------------------------------------------- 1 |

    Sudoku Solver

    2 | 3 |

    An Sudoku Solver made using backtracking.

    4 | 5 | ### Use of the Project: 6 | 7 |

    It can be used to solve the Sudoku.

    8 | 9 |

    Used Technologies

    10 | 17 | 18 | #### Steps to Use: 19 | 20 | --- 21 | 22 | - Download or clone the repository 23 | 24 | ``` 25 | git clone https://github.com/soma2000-lang/WebDev-Playyard.git 26 | 27 | ``` 28 | 29 | - Go to the directory 30 | - Run the index.html file by copying the file path and pasting it in your browser 31 | -And there you play 32 | 33 | ## The project can be hosted in github pages via https://soma2000-lang.github.io/Sudoku-Solver/ 34 | 35 |

    ScreenShot

    36 | Sudoku Solver 37 | 38 | 39 |
    40 | -------------------------------------------------------------------------------- /Projects/Project_Structure/script/script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Project_Structure/script/script.js -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | width: 100%; 9 | height: 100vh; 10 | background: linear-gradient(to right top, #ff0f7b, #f89b29); 11 | display: flex; 12 | flex-direction: column; 13 | justify-content: center; 14 | align-items: center; 15 | } 16 | 17 | h1 { 18 | font-size: 55px; 19 | text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 20 | 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 21 | 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 22 | 0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.2), 23 | 0 20px 20px rgba(0, 0, 0, 0.15); 24 | } 25 | 26 | .main { 27 | width: 25%; 28 | height: 70%; 29 | padding: 50px 15px; 30 | display: flex; 31 | justify-content: center; 32 | align-items: center; 33 | flex-direction: column; 34 | background: #fff; 35 | box-shadow: 0 10px 25px -10px rgba(0, 0, 0, 0.5); 36 | border-radius: 5px; 37 | margin-top: 25px; 38 | margin-bottom: 40px; 39 | } 40 | 41 | .main .input { 42 | width: 90%; 43 | padding: 8px 25px; 44 | border: 3px solid #9e9e9e; 45 | outline: none; 46 | margin: 15px 0; 47 | } 48 | .main .input:focus { 49 | border: 3px solid #f89b29; 50 | } 51 | .btn, 52 | .input { 53 | font-size: 1.1rem; 54 | border-radius: 5px; 55 | } 56 | .main .btn { 57 | width: 90%; 58 | padding: 12px 0; 59 | outline: none; 60 | border: none; 61 | border-radius: 5px; 62 | background: #f89b29; 63 | color: #fff; 64 | transition: 0.3s; 65 | } 66 | .main .code { 67 | margin: 10px 0; 68 | } 69 | 70 | .main .btn:hover { 71 | box-shadow: 0 10px 25px -10px #f89b29; 72 | } 73 | 74 | #toast { 75 | position: absolute; 76 | bottom: 0; 77 | border-radius: 5px; 78 | padding: 10px 50px; 79 | background: #07f49e; 80 | opacity: 0; 81 | visibility: hidden; 82 | box-shadow: 0 10px 25px -10px #07f49e; 83 | transition: 0.3s; 84 | 85 | font-size: 20px; 86 | } 87 | 88 | #toast.show { 89 | visibility: visible; 90 | opacity: 1; 91 | bottom: 50px; 92 | } 93 | 94 | -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/QR-Code-Generator/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/QR-Code-Generator/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/Assets/media/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/QR-Code-Generator/Assets/media/ss2.png -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/README.md: -------------------------------------------------------------------------------- 1 | # QR Code Generator 2 | 3 | ## About The Project 4 | 5 | A simple web application which will generate a QR Code. 6 | 7 | ## Tech Stacks Used 8 | 9 | 10 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 11 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 12 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 13 | 14 | ## API Used 15 | 16 | Visit Website: https://goqr.me/api/ 17 | 18 | 19 | 20 | 21 | ## Screenshots 22 | 23 | 24 | 25 |

    26 | After clicking on Generate Button, UI looks like: 27 | 28 | 29 | 30 | 31 | ## Live Demo 32 | 33 | -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | QR Code Generator 10 | 11 | 12 | 13 |

    QR CODE GENERATOR

    14 |
    15 | 16 | qrcode 17 |

    Made with ♥ by Khushi

    18 |
    19 |
    Successfully Generated!!!
    20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /Projects/QR-Code-Generator/script/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector('.btn'); 2 | const code = document.querySelector('.code'); 3 | const input = document.querySelector('.input'); 4 | const toast = document.querySelector('#toast'); 5 | 6 | btn.addEventListener('click', generate); 7 | 8 | function generate() { 9 | const data = input.value; 10 | const URL = `https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=${data}`; 11 | code.src = URL; 12 | 13 | toastDiv(); 14 | } 15 | 16 | function toastDiv() { 17 | toast.className = "show"; 18 | setTimeout(function() { 19 | toast.className = toast.className.replace("show", ""); 20 | }, 2000) 21 | } 22 | -------------------------------------------------------------------------------- /Projects/Quote Generator/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | background: url("https://images.unsplash.com/photo-1490237251747-4557595144b4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxjb2xsZWN0aW9uLXBhZ2V8MXwxMDcxMTcwfHxlbnwwfHx8fA%3D%3D&w=1000&q=80"); 9 | background-size: cover; 10 | background-repeat: no-repeat; 11 | color: white; 12 | } 13 | 14 | 15 | h1 { 16 | text-align: center; 17 | font-size: 60px; 18 | color: #ffea00; 19 | text-shadow: 0 1px 0 #ccc, 20 | 0 2px 0 #c9c9c9, 21 | 0 3px 0 #bbb, 22 | 0 4px 0 #b9b9b9, 23 | 0 5px 0 #aaa, 24 | 0 6px 1px rgba(0,0,0,.1), 25 | 0 0 5px rgba(0,0,0,.1), 26 | 0 1px 3px rgba(0,0,0,.3), 27 | 0 3px 5px rgba(0,0,0,.2), 28 | 0 5px 10px rgba(0,0,0,.25), 29 | 0 10px 10px rgba(0,0,0,.2), 30 | 0 20px 20px rgba(0,0,0,.15); 31 | } 32 | 33 | .container{ 34 | width: 65%; 35 | height: 450px; 36 | border: 1px solid red; 37 | /* background-color: #30373b; */ 38 | border-radius: 10px; 39 | display: flex; 40 | flex-direction: column; 41 | justify-content: center; 42 | align-items: center; 43 | padding: 0 80px; 44 | margin: 30px auto; 45 | box-shadow: 0px 2px 8px rgba(0,0,0,0.6); 46 | } 47 | i{ 48 | font-size: 50px; 49 | margin-bottom: 10px; 50 | color: #2d00f7; 51 | } 52 | 53 | #quotes{ 54 | text-align: center; 55 | font-size: 40px; 56 | font-family: 'Lobster Two', cursive; 57 | color: #f20089; 58 | } 59 | 60 | hr{ 61 | width: 60%; 62 | /* border: 1px solid purple; */ 63 | margin: 10px 0; 64 | } 65 | 66 | #author{ 67 | font-family: 'Cormorant Garamond', serif; 68 | font-size: 20px; 69 | margin-bottom: 10px; 70 | color: rgb(7, 255, 7); 71 | } 72 | 73 | button { 74 | cursor: pointer; 75 | border: none; 76 | color: #ffe6a7; 77 | background: rgb(0, 179, 179); 78 | font-size: 20px; 79 | padding: 10px; 80 | border-radius: 4px; 81 | box-shadow: 0px 2px 8px rgba(0,0,0,0.6); 82 | bottom: 5px; 83 | font-weight: bold; 84 | } 85 | 86 | 87 | @media screen and (max-width:1180px) { 88 | .container{ 89 | height: 600px; 90 | width: 80%; 91 | } 92 | } 93 | 94 | @media screen and (max-width:800px) { 95 | .container{ 96 | height: 700px; 97 | width: 90%; 98 | } 99 | } 100 | -------------------------------------------------------------------------------- /Projects/Quote Generator/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Quote Generator/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Quote Generator/README.md: -------------------------------------------------------------------------------- 1 | # Random Quote Generator 2 | 3 | ## Description 4 | The Random Quote Generator randomly displays a quote when a button is clicked by user. 5 | 6 | ## Stacks Used 7 | * HTML 8 | * CSS 9 | * JavaScript Async & Await 10 | * API 11 | 12 | ## API Used 13 | https://type.fit/api/quotes 14 | 15 | ## Screenshot 16 | 17 | 18 | -------------------------------------------------------------------------------- /Projects/Quote Generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Quote Generator 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 | 24 | 25 | 26 | 27 | 28 |
    29 |

    Quote Generator

    30 |
    31 | 32 |
    Everything in life is luck.
    33 |
    34 |
    By Donald Trump
    35 | 36 |
    37 |
    38 | 39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Projects/Quote Generator/script/script.js: -------------------------------------------------------------------------------- 1 | const quotes = document.getElementById('quotes'); 2 | const author = document.getElementById('author'); 3 | let jsonData = " "; 4 | let quoteData = " "; 5 | 6 | const randomNo = () => { 7 | let randNum = Math.floor(Math.random() * 1680); 8 | // console.log(randNum); 9 | quoteData = jsonData[randNum]; 10 | quotes.innerText = `${quoteData.text}`; 11 | // author.innerText = `${quoteData.author}`; 12 | 13 | quoteData.author == null ? 14 | (author.innerText = "By unKnown") : 15 | (author.innerText = `By ${quoteData.author}`); 16 | 17 | } 18 | const getQuotes = async () => { 19 | const api = "https://type.fit/api/quotes"; 20 | try { 21 | let data = await fetch(api); 22 | jsonData = await data.json(); 23 | // console.log(jsonData[0]); 24 | randomNo(); 25 | } catch (error) { 26 | console.log(error.message); 27 | } 28 | 29 | } 30 | -------------------------------------------------------------------------------- /Projects/Simon Game/Assets/css/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #3E2C41; 4 | } 5 | 6 | #level-title { 7 | font-family: 'Press Start 2P', cursive; 8 | font-size: 3rem; 9 | margin: 5%; 10 | color: #FEF2BF; 11 | } 12 | 13 | .container { 14 | display: block; 15 | width: 50%; 16 | margin: auto; 17 | 18 | } 19 | 20 | .btn { 21 | margin: 25px; 22 | display: inline-block; 23 | height: 200px; 24 | width: 200px; 25 | border: 10px solid #FEF2BF; 26 | border-radius: 20%; 27 | } 28 | 29 | .game-over { 30 | background-color: red; 31 | opacity: 0.8; 32 | } 33 | 34 | .red { 35 | background-color: red; 36 | } 37 | 38 | .green { 39 | background-color: green; 40 | } 41 | 42 | .blue { 43 | background-color: blue; 44 | } 45 | 46 | .yellow { 47 | background-color: yellow; 48 | } 49 | 50 | .pressed { 51 | box-shadow: 0 0 20px white; 52 | background-color: grey; 53 | } 54 | -------------------------------------------------------------------------------- /Projects/Simon Game/Assets/media/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Simon Game/Assets/media/blue.mp3 -------------------------------------------------------------------------------- /Projects/Simon Game/Assets/media/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Simon Game/Assets/media/green.mp3 -------------------------------------------------------------------------------- /Projects/Simon Game/Assets/media/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Simon Game/Assets/media/red.mp3 -------------------------------------------------------------------------------- /Projects/Simon Game/Assets/media/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Simon Game/Assets/media/wrong.mp3 -------------------------------------------------------------------------------- /Projects/Simon Game/Assets/media/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Simon Game/Assets/media/yellow.mp3 -------------------------------------------------------------------------------- /Projects/Simon Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Simon 7 | 8 | 9 | 10 | 11 | 12 |

    Press A Key to Start

    13 |
    14 |
    15 | 16 |
    17 | 18 |
    19 | 20 |
    21 | 22 |
    23 |
    24 | 25 |
    26 | 27 |
    28 | 29 |
    30 |
    31 | 32 |
    33 | 34 |
    35 | 36 |
    37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Projects/Simon Game/readme.md: -------------------------------------------------------------------------------- 1 | # SIMON GAME :recycle: :beginner: 2 | Fun, interactive website that plays a game, beware, can keep you hooked to the screen for hours! :computer: :hourglass_flowing_sand: 3 | 4 | The user can play the simon game by remembering the sequence of the button pressesthat the browser shows and upgrade to greater levels.:chart: :round_pushpin: 5 | 6 |
    7 | 8 | ### About The Project: 9 | It is a fun, interactive and simple project that lets user play a game where the browser randomly chooses and presses one of the four colored buttons and the player has to 10 | remember the sequence in which the buttons were pressed, one mistake and you lose! After the user replicates the exact sequence, the level is advanced, but the trick here 11 | is that the browser doesn't show its previous button presses and the user has to remember all of them in addition with the new press, so as to be able to clear the level. 12 | 13 | 14 | #### Preview it here: https://ruheej1.github.io/WebDev-Playyard/Projects/Simon%20Game/ 15 | 16 |
    17 | 18 | ### Tech Stack: 💻 19 | * ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 20 | * ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 21 | * ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 22 | 23 |
    24 | 25 | #### Steps To Use: 26 | 27 | - Go to the directory 28 | - Run the index.html file 29 | - Have a look, play the game! 30 | 31 |
    32 | 33 | ## Screenshots 34 | ![Untitled (4)](https://user-images.githubusercontent.com/59756474/128717432-456eaa40-0258-427d-aff1-35e9b95f9fd4.png) 35 | 36 | -------------------------------------------------------------------------------- /Projects/Simon Game/scripts/game.js: -------------------------------------------------------------------------------- 1 | var buttonColors = ["red", "yellow", "blue", "green"]; 2 | 3 | var gamePattern = []; 4 | var userClickedPattern = []; 5 | 6 | var started = false; 7 | var level = 0; 8 | 9 | $(document).keypress(function() { 10 | if (!started) { 11 | $("#level-title").text("Level " + level); 12 | nextSequence(); 13 | started = true; 14 | } 15 | }); 16 | 17 | $(".btn").click(function() { 18 | var userChosenColor = $(this).attr("id"); 19 | userClickedPattern.push(userChosenColor); 20 | 21 | playSound(userChosenColor); 22 | animatePress(userChosenColor); 23 | checkAnswer(userClickedPattern.length - 1); 24 | }); 25 | 26 | function checkAnswer(currentLevel) { 27 | if (gamePattern[currentLevel] === userClickedPattern[currentLevel]) { 28 | 29 | if (userClickedPattern.length === gamePattern.length) { 30 | setTimeout(function() { 31 | nextSequence(); 32 | }, 1000); 33 | } 34 | 35 | } else { 36 | playSound("wrong"); 37 | $("body").addClass("game-over"); 38 | 39 | setTimeout(function() { 40 | $("body").removeClass("game-over"); 41 | }, 200); 42 | 43 | $("#level-title").text("Game Over, Press Any Key to Restart"); 44 | startOver(); 45 | } 46 | 47 | } 48 | 49 | function nextSequence() { 50 | userClickedPattern = []; 51 | level++; 52 | 53 | $("#level-title").text("Level " + level); 54 | 55 | var randomNumber = Math.floor(Math.random() * 4); 56 | var randomChosenColor = buttonColors[randomNumber]; 57 | 58 | gamePattern.push(randomChosenColor); 59 | $("#" + randomChosenColor).fadeIn(100).fadeOut(100).fadeIn(100); 60 | playSound(randomChosenColor); 61 | } 62 | 63 | function playSound(name) { 64 | var audio = new Audio("Assets/media/" + name + ".mp3"); 65 | audio.play(); 66 | } 67 | 68 | function animatePress(currentColor) { 69 | $("#" + currentColor).addClass("pressed") 70 | setTimeout(function() { 71 | $("#" + currentColor).removeClass("pressed"); 72 | }, 100); 73 | } 74 | 75 | function startOver() { 76 | level = 0; 77 | gamePattern = []; 78 | started = false; 79 | } 80 | -------------------------------------------------------------------------------- /Projects/Snake-Game/Readme.md: -------------------------------------------------------------------------------- 1 | ## Snake Game using Javascript 2 | The Snake game created using Javascript, HTML5. CSS3. 3 | #### WebPage Link : https://atif0604.github.io/WebDev-Playyard/Projects/Snake-Game/index.html 4 | ## Project Specification 5 | - A snake will start moving once the user starts the game. 6 | - The four arrow keys are used to turn the direction of the snake. 7 | - The motive of the game is to eat as many food as the snake can, without hitting the border walls. 8 | - If the snake hits the border walls the game gets over. 9 | - The score are displayed on the top left corner of the game board. 10 | - Whenever the snake eats a food score is added by 1. 11 | - Final score is displayed once the snake hits the wall. 12 | 13 | ## Screenshots 14 |

    15 | preview 16 | 17 |

    18 | -------------------------------------------------------------------------------- /Projects/Snake-Game/assets/CSS/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, Helvetica, sans - serif; 3 | margin:20px auto; 4 | text-align:center; 5 | font-size:150% ; 6 | background-color:green; 7 | height:800px; 8 | background-position:center; 9 | background-repeat: no-repeat; 10 | background-size:cover; 11 | height:60vh; 12 | width:100vw; 13 | overflow: hidden; 14 | } 15 | 16 | input { 17 | font-size: 100% ; 18 | text-align: center; 19 | padding:5px 7px; 20 | } 21 | 22 | canvas { 23 | background-color: white; 24 | border-radius: 20px; 25 | box-shadow: 3px 5px 6px black; 26 | margin-right: 40px; 27 | } 28 | 29 | -------------------------------------------------------------------------------- /Projects/Snake-Game/assets/media/images/apple1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Snake-Game/assets/media/images/apple1.png -------------------------------------------------------------------------------- /Projects/Snake-Game/assets/media/images/mango.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Snake-Game/assets/media/images/mango.png -------------------------------------------------------------------------------- /Projects/Snake-Game/assets/media/images/pear.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Snake-Game/assets/media/images/pear.png -------------------------------------------------------------------------------- /Projects/Snake-Game/assets/media/images/wp2409705.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Snake-Game/assets/media/images/wp2409705.jpg -------------------------------------------------------------------------------- /Projects/Snake-Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 12 | Speed: 13 | 14 | 15 | 16 |
    17 |
    18 | 19 |
    20 | 21 |
    22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Projects/Sudoku_Solver.md: -------------------------------------------------------------------------------- 1 |

    Sudoku Solver

    2 | 3 |

    An Sudoku Solver made using backtracking.

    4 | 5 | ### Use of the Project: 6 | 7 |

    It can be used to solve the Sudoku.

    8 | 9 |

    Used Technologies

    10 | 17 | 18 | #### Steps to Use: 19 | 20 | --- 21 | 22 | - Download or clone the repository 23 | 24 | ``` 25 | git clone https://github.com/soma2000-lang/WebDev-Playyard.git 26 | 27 | ``` 28 | 29 | - Go to the directory 30 | - Run the index.html file by copying the file path and pasting it in your browser 31 | -And there you play 32 | 33 | ## The project can be hosted in github pages via https://soma2000-lang.github.io/Sudoku-Solver/ 34 | 35 |

    ScreenShot

    36 | Sudoku Solver 37 | 38 | 39 |
    40 | -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/css/styles.css: -------------------------------------------------------------------------------- 1 | 2 | 3 | body { 4 | background-color: #393E46; 5 | } 6 | 7 | .container { 8 | width: 70%; 9 | margin: auto; 10 | text-align: center; 11 | } 12 | 13 | .dice { 14 | text-align: center; 15 | display: inline-block; 16 | } 17 | 18 | h1 { 19 | margin: 30px; 20 | font-family: 'Lobster', cursive; 21 | text-shadow: 5px 0 #232931; 22 | font-size: 8rem; 23 | color: #4ECCA3; 24 | } 25 | 26 | p { 27 | font-size: 2rem; 28 | color: #4ECCA3; 29 | font-family: 'Indie Flower', cursive; 30 | } 31 | 32 | img { 33 | width: 80%; 34 | } 35 | 36 | footer { 37 | margin-top: 15%; 38 | color: #EEEEEE; 39 | text-align: center; 40 | font-family: 'Indie Flower', cursive; 41 | } 42 | -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/media/dice1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Dice Game/Assets/media/dice1.png -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/media/dice2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Dice Game/Assets/media/dice2.png -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/media/dice3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Dice Game/Assets/media/dice3.png -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/media/dice4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Dice Game/Assets/media/dice4.png -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/media/dice5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Dice Game/Assets/media/dice5.png -------------------------------------------------------------------------------- /Projects/The Dice Game/Assets/media/dice6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Dice Game/Assets/media/dice6.png -------------------------------------------------------------------------------- /Projects/The Dice Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 🎲Dicee 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
    14 |

    Refresh Me

    15 | 16 |
    17 |

    Player 1

    18 | Dice-1 19 |
    20 | 21 |
    22 |

    Player 2

    23 | Dice-2 24 |
    25 | 26 |
    27 | 28 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /Projects/The Dice Game/readme.md: -------------------------------------------------------------------------------- 1 | # :game_die: THE DICE GAME :game_die: 2 | A website that settles your small arguemnts! 3 | The user can play a dice game along with a friend, the player that gets the highest number on dice roll, wins! 4 | 5 |
    6 | 7 | ### About The Project: 8 | It is a fun, interactive and simple project that lets user play a dice game by refreshing the webpage. The webpage contains two dices that roll and generate a 9 | random number from 1 to 6 each time the user refreshes the page, and the result of the game is displayed above. This could be used to settle disputes between friends 10 | by first randomly choosing the player number and then refreshing the page to get the result. A fun way to decide who's going to pay the bill next time! 11 | 12 | #### Preview it here: https://ruheej1.github.io/WebDev-Playyard/Projects/The%20Dice%20Game/ 13 | 14 |
    15 | 16 | ### Tech Stack: 💻 17 | * ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 18 | * ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 19 | * ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 20 | 21 |
    22 | 23 | #### Steps To Use: 24 | 25 | - Go to the directory 26 | - Run the index.html file 27 | - Have a look, play the game! 28 | 29 |
    30 | 31 | ## Screenshots 32 | ![image](https://user-images.githubusercontent.com/59756474/128145557-1656ea25-09e9-4a29-81c9-9c9a6f441176.png) 33 | 34 | -------------------------------------------------------------------------------- /Projects/The Dice Game/scripts/index.js: -------------------------------------------------------------------------------- 1 | //generates a random number from 1 to 6 2 | var randomNumber1 = Math.floor(Math.random() * 6) + 1; 3 | 4 | //selects a random image 5 | var randomDiceImage = "dice" + randomNumber1 + ".png"; 6 | 7 | //sets the source of img1 according to random img chosen 8 | var randomImageSource = "Assets/media/" + randomDiceImage; 9 | 10 | var image1 = document.querySelectorAll("img")[0]; 11 | 12 | image1.setAttribute("src", randomImageSource); 13 | 14 | var randomNumber2 = Math.floor(Math.random() * 6)+1; 15 | 16 | //sets the source of img2 according to random img chosen 17 | var randomImageSource2 = "Assets/media/dice" + randomNumber2 + ".png"; 18 | 19 | document.querySelectorAll("img")[1].setAttribute("src", randomImageSource2); 20 | 21 | if(randomNumber1 > randomNumber2){ 22 | document.querySelector("h1").innerHTML = "Player 1 Wins! 🚩"; 23 | } 24 | 25 | else if(randomNumber1 < randomNumber2){ 26 | document.querySelector("h1").innerHTML = "Player 2 Wins! 🚩"; 27 | } 28 | 29 | else{ 30 | document.querySelector("h1").innerHTML = "Draw!"; 31 | } 32 | -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | text-align: center; 3 | background-color: #283149; 4 | } 5 | 6 | h1 { 7 | font-size: 5rem; 8 | color: #DBEDF3; 9 | font-family: "Arvo", cursive; 10 | text-shadow: 3px 0 #DA0463; 11 | 12 | } 13 | 14 | footer { 15 | color: #DBEDF3; 16 | font-family: sans-serif; 17 | } 18 | 19 | .w { 20 | background-image: url("../../Assets/media/images/crash.png"); 21 | } 22 | 23 | .a { 24 | background-image: url("../../Assets/media/images/kick.png"); 25 | } 26 | 27 | .s { 28 | background-image: url("../../Assets/media/images/snare.png"); 29 | } 30 | 31 | .d { 32 | background-image: url("../../Assets/media/images/tom1.png"); 33 | } 34 | 35 | .j { 36 | background-image: url("../../Assets/media/images/tom2.png"); 37 | } 38 | 39 | .k { 40 | background-image: url("../../Assets/media/images/tom3.png"); 41 | } 42 | 43 | .l { 44 | background-image: url("../../Assets/media/images/tom4.png"); 45 | } 46 | 47 | .set { 48 | margin: 10% auto; 49 | } 50 | 51 | .game-over { 52 | background-color: red; 53 | opacity: 0.8; 54 | } 55 | 56 | .pressed { 57 | box-shadow: 0 3px 4px 0 #DBEDF3; 58 | opacity: 0.8; 59 | } 60 | 61 | .red { 62 | color: red; 63 | } 64 | 65 | .drum { 66 | outline: none; 67 | border: 10px solid #404B69; 68 | font-size: 5rem; 69 | font-family: 'Arvo', cursive; 70 | line-height: 2; 71 | font-weight: 900; 72 | color: #DA0463; 73 | text-shadow: 3px 0 #DBEDF3; 74 | border-radius: 15px; 75 | display: inline-block; 76 | width: 150px; 77 | height: 150px; 78 | text-align: center; 79 | margin: 10px; 80 | background-color: white; 81 | } 82 | 83 | -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/crash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/crash.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/kick.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/kick.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/snare.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/snare.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/tom1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/tom1.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/tom2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/tom2.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/tom3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/tom3.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/images/tom4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/images/tom4.png -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/crash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/crash.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/kick-bass.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/kick-bass.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/snare.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/snare.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/tom-1.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/tom-1.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/tom-2.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/tom-2.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/tom-3.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/tom-3.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/Assets/media/sounds/tom-4.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/The Drum Kit/Assets/media/sounds/tom-4.mp3 -------------------------------------------------------------------------------- /Projects/The Drum Kit/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Drum Kit 7 | 8 | 9 | 10 | 11 | 12 | 13 |

    Drum 🥁 Kit

    14 |
    15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
    23 | 24 | 25 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /Projects/The Drum Kit/readme.md: -------------------------------------------------------------------------------- 1 | # THE DRUM KIT 🥁 2 | Fun, interactive website that plays sounds! :notes: 3 | The user can play drum sounds! :headphones: 4 | 5 |
    6 | 7 | ### About The Project: 8 | It is a fun, interactive and simple project that lets user play drum sounds on mouseclick or keypress. 9 | 10 | #### Preview it here: https://ruheej1.github.io/WebDev-Playyard/Projects/The%20Drum%20Kit/ 11 | 12 |
    13 | 14 | ### Tech Stack: 💻 15 | * ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 16 | * ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 17 | * ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 18 | 19 |
    20 | 21 | #### Steps To Use: 22 | 23 | - Go to the directory 24 | - Run the index.html file 25 | - Have a look, play drums! 26 | 27 |
    28 | 29 | ## Screenshots 30 | ![image](https://user-images.githubusercontent.com/59756474/128562869-bb2fa9c8-e772-4666-a9b9-002737e13c64.png) 31 | 32 | -------------------------------------------------------------------------------- /Projects/The Drum Kit/scripts/index.js: -------------------------------------------------------------------------------- 1 | 2 | // Detecting Button Press 3 | var numberOfDrumButtons = document.querySelectorAll(".drum").length; 4 | 5 | for (var i = 0; i < numberOfDrumButtons; i++) { 6 | 7 | document.querySelectorAll(".drum")[i].addEventListener("click", function () { 8 | 9 | var buttonInnerHTML = this.innerHTML; 10 | 11 | makeSound(buttonInnerHTML); 12 | buttonAnimation(buttonInnerHTML); 13 | 14 | }); 15 | 16 | } 17 | 18 | // Detecting Keyboard Press 19 | 20 | document.addEventListener("keydown", function (event) { 21 | 22 | makeSound(event.key); 23 | buttonAnimation(event.key); 24 | 25 | }); 26 | 27 | function makeSound(key) { 28 | 29 | switch (key) { 30 | case "w": 31 | var crash = new Audio("Assets/media/sounds/crash.mp3"); 32 | crash.play(); 33 | break; 34 | 35 | case "a": 36 | var kick = new Audio("Assets/media/sounds/kick-bass.mp3"); 37 | kick.play(); 38 | break; 39 | 40 | case "s": 41 | var snare = new Audio("Assets/media/sounds/snare.mp3"); 42 | snare.play(); 43 | break; 44 | 45 | case "d": 46 | var tom1 = new Audio("Assets/media/sounds/tom-1.mp3"); 47 | tom1.play(); 48 | break; 49 | 50 | case "j": 51 | var tom2 = new Audio("Assets/media/sounds/tom-2.mp3"); 52 | tom2.play(); 53 | break; 54 | 55 | case "k": 56 | var tom3 = new Audio("Assets/media/sounds/tom-3.mp3"); 57 | tom3.play(); 58 | break; 59 | 60 | case "l": 61 | var tom4 = new Audio("Assets/media/sounds/tom-4.mp3"); 62 | tom4.play(); 63 | break; 64 | 65 | default: console.log(buttonInnerHTML); 66 | 67 | } 68 | 69 | } 70 | 71 | function buttonAnimation(currentKey) { 72 | var activeButton = document.querySelector("." + currentKey); 73 | activeButton.classList.add("pressed"); 74 | 75 | setTimeout(function () { 76 | activeButton.classList.remove("pressed"); 77 | }, 80); 78 | } 79 | -------------------------------------------------------------------------------- /Projects/Tic-Tac-Toe-Game/README.md: -------------------------------------------------------------------------------- 1 |

    Tic-Tac-Toe Game

    2 | 3 |

    Simple Tic-Tac-Toe Game written in HTML, CSS, and JavaScript .

    4 | 5 | #### WebPage Link : https://atif0604.github.io/WebDev-Playyard/Projects/Tic-Tac-Toe-Game/index.html 6 | 7 | 8 | ### Use of the Project: 9 | 10 |

    The Tic-Tac-Toe Game is to be played between two people (in this program between HUMAN and COMPUTER)

    11 | 12 |

    Used Technologies

    13 | 18 | 19 | #### Steps to Use: 20 | 21 | - Go to the directory 22 | - Run the index.html file 23 | - Start Playing!! 24 | 25 |

    ScreenShots

    26 | tictactoe-dark 27 | 28 |
    29 | tictactoe-light 30 | 31 |
    32 | 33 | -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/TechCrunch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/TechCrunch.png -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/bizinsider.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/bizinsider.png -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/dog-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/dog-img.jpg -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/iphone6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/iphone6.png -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/lady-img.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/lady-img.jpg -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/mashable.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/mashable.png -------------------------------------------------------------------------------- /Projects/TinDog/Assets/media/tnw.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/TinDog/Assets/media/tnw.png -------------------------------------------------------------------------------- /Projects/TinDog/readme.md: -------------------------------------------------------------------------------- 1 | # TINDOG 🐶 2 | Personal Project: Tinder for dogs 🦮 3 | 4 |
    5 | 6 | ### Use of the Project: 7 | Used by people to find the love ❤️ for their dogs 8 | 9 |
    10 | 11 | ### Tech Stack 🧑‍💻 12 | * HTML5 13 | * CSS3 14 | * BOOTSTRAP 15 | 16 |
    17 | 18 | #### Steps to Use: 19 | 20 | --- 21 | 22 | - Download or clone the repository 23 | 24 | ``` 25 | git clone https://github.com/gunjan-g/TINDOG.git 26 | ``` 27 | 28 | - Go to the directory 29 | - Run the index.html file 30 | - Have a look 31 | 32 | --- 33 | 34 |
    35 | 36 | ## Screenshots 37 | ![image](https://user-images.githubusercontent.com/81305824/125517278-e6dc9bb3-4db9-4d99-9efd-920447ed0513.png) 38 | -------------------------------------------------------------------------------- /Projects/Tip Calculator/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #03193a; 3 | } 4 | 5 | 6 | .container{ 7 | width: 350px; 8 | height: 500px; 9 | background-color: white; 10 | position: absolute; 11 | top: 54%; 12 | left: 50%; 13 | transform: translateX(-50%) translateY(-50%); 14 | border-radius: 20px; 15 | } 16 | 17 | h1{ 18 | position: absolute; 19 | top: -73px; 20 | left: 50%; 21 | width: 300px; 22 | transform: translateX(-50%); 23 | background-color: #FF851B; 24 | color: #fff; 25 | text-align: center; 26 | border-radius: 20px; 27 | font-weight: 100; 28 | padding: 4px; 29 | } 30 | 31 | .wrapper{ 32 | padding: 10px; 33 | padding-left: 50px; 34 | } 35 | 36 | input , select{ 37 | width: 80%; 38 | border: none; 39 | border-bottom: 1px solid #0074D9; 40 | padding:8px; 41 | } 42 | 43 | input:focus, select:focus{ 44 | border: 1px solid #0074D9; 45 | outline: none; 46 | } 47 | 48 | select{ 49 | width: 85% !important; 50 | background: none; 51 | } 52 | 53 | button{ 54 | margin: 20px auto; 55 | width: 150px; 56 | padding: 10px; 57 | background-color: #39CCCC; 58 | color: white; 59 | font-size: 18px; 60 | border: none; 61 | border-radius: 5px; 62 | cursor: pointer; 63 | } 64 | 65 | .tip{ 66 | text-align: center; 67 | font-size: 18px; 68 | display: none; 69 | font-size: 24px; 70 | } 71 | 72 | .tip p{ 73 | font-weight: bold; 74 | } 75 | 76 | .tip span{ 77 | color: rgb(85, 141, 1); 78 | font-weight: 800; 79 | } -------------------------------------------------------------------------------- /Projects/Tip Calculator/Assets/media/demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Tip Calculator/Assets/media/demo.gif -------------------------------------------------------------------------------- /Projects/Tip Calculator/Assets/media/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Tip Calculator/Assets/media/ss1.png -------------------------------------------------------------------------------- /Projects/Tip Calculator/Assets/media/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Tip Calculator/Assets/media/ss2.png -------------------------------------------------------------------------------- /Projects/Tip Calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Tip Calculator 9 | 10 | 11 |
    12 |

    Tip Calculator

    13 |
    14 |

    Bill Amount ?

    15 | ₹ 16 | 17 |

    How was the service ?

    18 | 26 | 27 |

    No of People ?

    28 | 29 | 30 | 31 |
    32 | 33 |
    34 |

    Tip Amount

    35 | 0 ₹ 36 | each 37 |
    38 |
    39 | 40 | 41 | 42 | -------------------------------------------------------------------------------- /Projects/Tip Calculator/readme.md: -------------------------------------------------------------------------------- 1 | # Tip Calculator 2 | 3 | ## Overview of Tip Calculator 4 | 5 | > _A simple website build using HTML, CSS & JavaScript to calculate the tip amount for the bill._ 6 | 7 | This application will take three inputs from the user, Bill Amount, tip(%) and no of persons sharing that bill. After user clicks on the calculate button , tip amount will be display on the screen. 8 | 9 | ## Tech Stack 10 | 11 | 12 | 13 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 14 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 15 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 16 | 17 | 18 | 19 | 20 | ## ScreenShot 21 | 22 | Initially, the UI looks like: 23 | 24 | 25 | 26 | After entering the values in the input box, UI lokks like: 27 | 28 | 29 | 30 | ## Live Demo 31 | 32 | 33 | -------------------------------------------------------------------------------- /Projects/Tip Calculator/script/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.querySelector("#btn"); 2 | btn.addEventListener('click', calculateTip); 3 | 4 | function calculateTip(){ 5 | const amount = parseInt(document.querySelector("#amount").value); 6 | const person = document.querySelector("#person").value; 7 | const service = document.querySelector("#services").value; 8 | 9 | if(amount === '' || service === 'Select Option' || person === ''){ 10 | alert("Please enter valid values!!!") 11 | return; 12 | } 13 | 14 | if(person === '1'){ 15 | document.querySelector("#each").style.display = "none" ; 16 | } 17 | else{ 18 | document.querySelector("#each").style.display = "block" ; 19 | } 20 | 21 | let total = (amount * service)/person; 22 | total = Math.round(total)/100; 23 | total = total.toFixed(2); 24 | 25 | document.querySelector(".tip").style.display = " block"; 26 | document.querySelector("#total").innerHTML = total; 27 | 28 | } 29 | -------------------------------------------------------------------------------- /Projects/Weather Application/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | 2 | *{ 3 | margin: 0px; 4 | padding: 0px; 5 | outline: 0px; 6 | } 7 | 8 | body { 9 | font-family: 'Times New Roman', Times, serif; 10 | text-align: center; 11 | color: black; 12 | } 13 | 14 | 15 | h1 { 16 | margin-top: 20px; 17 | color: rgb(0, 55, 128); 18 | font-size: 56px; 19 | text-shadow: 10px 4px 2px rgba(255, 230, 0, 0.2); 20 | } 21 | .search { 22 | margin: 38px auto; 23 | width: 28%; 24 | width: 25%; 25 | border: 2px solid rgb(145, 145, 145); 26 | border-radius: 20px; 27 | } 28 | 29 | input { 30 | border-radius: 20px; 31 | background-color: transparent; 32 | box-sizing: border-box; 33 | padding: 10px 15px; 34 | border: none; 35 | width: 100%; 36 | font-size: 20px; 37 | font-weight: 300; 38 | text-align: center; 39 | transition: 0.3s ease-in; 40 | } 41 | 42 | input:focus{ 43 | box-shadow: 10px 10px 20px 10px rgba(0, 60, 102, 0.1); 44 | } 45 | 46 | .weather_body { 47 | margin: 0px auto; 48 | width: 26%; 49 | padding: 1px; 50 | border-radius: 20px; 51 | height: 420px; 52 | box-shadow: 10px 10px 20px 10px rgba(112, 102, 102, 0.2); 53 | background-image: linear-gradient( to right, rgb(204, 213, 252) , rgb(201, 253, 203)); 54 | margin-bottom: 32px; 55 | } 56 | 57 | 58 | .city { 59 | margin-top: 10px; 60 | font-size: 35px; 61 | font-weight: 450; 62 | margin-bottom: 10px; 63 | } 64 | 65 | .date { 66 | font-size: 18px; 67 | } 68 | 69 | .tmp { 70 | font-size: 102px; 71 | font-weight: 900; 72 | margin-top: 15px; 73 | text-shadow: 5px 4px rgba(0, 0, 0, 0.2); 74 | } 75 | 76 | .tmp span { 77 | font-weight: 500; 78 | } 79 | 80 | .visiblity { 81 | margin-top: 10px; 82 | font-size: 30px; 83 | font-weight: 650; 84 | font-style: oblique; 85 | } 86 | 87 | .min_max{ 88 | margin-top: 10px; 89 | font-size: 24px; 90 | font-weight: 500; 91 | 92 | } 93 | -------------------------------------------------------------------------------- /Projects/Weather Application/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Weather App 10 | 11 | 12 | 13 | 14 |

    WEATHER APPLICATION

    15 |
    16 | 17 |
    18 | 19 |
    20 | 21 |
    22 |
    23 |
    Etawah, IN
    24 |
    Sunday 2 April 2021
    25 |
    26 | 27 |
    28 |
    21°C
    29 |
    Rainy
    30 |
    31 |
    19°C (min)/ 21°C (max)
    32 |
    33 | 34 |
    35 | 36 | 37 |
    38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Projects/Weather Application/readme.md: -------------------------------------------------------------------------------- 1 | # ☀️🌤⛈ Weather-Application-using-API 2 | ## Overview of Weather App 3 | 4 | > _A simple API enabled website build using HTML, CSS & JavaScript._ 5 | 6 | Weather app will show the following information, the user's city and country (Etawah, IN), day and date , the temperature value (21°C) in Celsius unit, the weather description (rainy), an Icon that shows the weather status, and then min and max temperature. 7 | 8 | ## Tech Stack 9 | 10 | **Client:** HTML, CSS , JavaScript 11 | 12 | **API:** [OpenWeatherMap](https://openweathermap.org/) 13 | 14 | 15 | ## ScreenShot 16 | 17 | ![image](https://user-images.githubusercontent.com/52875298/126892370-bf5d82d4-a1b1-4e02-a5cc-631dde55a8e3.png) 18 | -------------------------------------------------------------------------------- /Projects/Weather Application/script/script.js: -------------------------------------------------------------------------------- 1 | const inputBox = document.querySelector('.inp'); 2 | inputBox.addEventListener('keypress', (e) => { 3 | 4 | // getting city value 5 | 6 | if (e.keyCode === 13) { 7 | let cityName = inputBox.value; 8 | console.log(cityName); 9 | inputBox.value = ' '; 10 | // fetch the weather data 11 | 12 | fetch(`https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units=metric&APPID=a8165cfedf68087dedfb7dc0843a1e0d`) 13 | .then(fetchData => { 14 | return fetchData.json(); 15 | }).then((fetchedData) => { 16 | console.log(fetchedData); 17 | 18 | // dispaly weather information 19 | let city = document.querySelector('.city'); 20 | city.innerText = `${fetchedData.name}, ${fetchedData.sys.country}`; 21 | 22 | let now = new Date(); 23 | let date = document.querySelector('.date'); 24 | date.innerText = dateInfo(now); 25 | 26 | let temp = document.querySelector('.tmp'); 27 | temp.innerHTML = `${Math.round(fetchedData.main.temp)}°C`; 28 | 29 | let visiblity = document.querySelector('.visiblity'); 30 | visiblity.innerText = fetchedData.weather[0].main; 31 | 32 | let image = document.querySelector('.img'); 33 | let val = fetchedData.weather[0].icon; 34 | image.innerHTML = ` `; 35 | 36 | let min_max = document.querySelector('.min_max'); 37 | min_max.innerText = `${Math.round(fetchedData.main.temp_min)}°C (min) / ${Math.round(fetchedData.main.temp_max)}°C (max)`; 38 | 39 | } 40 | 41 | ) 42 | .catch(err => { 43 | console.log(err); 44 | alert("No Result Found!!! Please Enter Correct City Name.") 45 | 46 | }) 47 | } 48 | 49 | 50 | }); 51 | 52 | 53 | function dateInfo(d) { 54 | let months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]; 55 | let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; 56 | 57 | let day = days[d.getDay()]; 58 | let date = d.getDate(); 59 | let month = months[d.getMonth()]; 60 | let year = d.getFullYear(); 61 | 62 | return `${day} ${date} ${month} ${year}`; 63 | } 64 | -------------------------------------------------------------------------------- /Projects/Weather-App/Assets/css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | font-family: 'Open Sans', sans-serif; 8 | background: #222; 9 | background-image: url('https://source.unsplash.com/1600x900/?nature,water,landscape'); 10 | font-size: 120%; 11 | } 12 | 13 | .card { 14 | background: #000000d0; 15 | color: white; 16 | padding: 2em; 17 | border-radius: 30px; 18 | width: 100%; 19 | max-width: 420px; 20 | margin: 1em; 21 | } 22 | 23 | .search { 24 | display: flex; 25 | align-items: center; 26 | justify-content: center; 27 | } 28 | 29 | button { 30 | margin: 0.5em; 31 | border-radius: 50%; 32 | border: none; 33 | height: 44px; 34 | width: 44px; 35 | outline: none; 36 | background: #7c7c7c2b; 37 | color: white; 38 | cursor: pointer; 39 | transition: 0.2s ease-in-out; 40 | } 41 | 42 | input.search-bar { 43 | border: none; 44 | outline: none; 45 | padding: 0.4em 1em; 46 | border-radius: 24px; 47 | background: #7c7c7c2b; 48 | color: white; 49 | font-family: inherit; 50 | font-size: 105%; 51 | width: calc(100% - 100px); 52 | } 53 | 54 | button:hover { 55 | background: #7c7c7c6b; 56 | } 57 | 58 | h1.temp { 59 | margin: 0; 60 | margin-bottom: 0.4em; 61 | } 62 | 63 | .flex { 64 | display: flex; 65 | align-items: center; 66 | } 67 | 68 | .description { 69 | text-transform: capitalize; 70 | margin-left: 8px; 71 | } 72 | 73 | .weather.loading { 74 | visibility: hidden; 75 | max-height: 20px; 76 | position: relative; 77 | } 78 | 79 | .weather.loading:after { 80 | visibility: visible; 81 | content: "Loading..."; 82 | color: white; 83 | position: absolute; 84 | top: 0; 85 | left: 20px; 86 | } 87 | 88 | .footer{ 89 | position:absolute; padding: 0.4rem !important;margin: 10px; 90 | border-color: inherit; 91 | border-style: solid; 92 | border-width: 0; 93 | background-color: #212529 !important; 94 | } 95 | .footer h4{ 96 | color: white; 97 | text-align: center; 98 | } -------------------------------------------------------------------------------- /Projects/Weather-App/Assets/media/Weather-App.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Weather-App/Assets/media/Weather-App.jpg -------------------------------------------------------------------------------- /Projects/Weather-App/README.md: -------------------------------------------------------------------------------- 1 |

    Weather App

    2 | 3 |

    Simple Weather app written in HTML, CSS, and JavaScript using the APIs for fetching weather and geolocation information.

    4 | 5 |

    Used Technologies

    6 | 11 | 12 |

    Used APIs

    13 | 17 | 18 |

    ScreenShots

    19 | Weather-App 20 | 21 |
    22 | -------------------------------------------------------------------------------- /Projects/Weather-App/Script/script.js: -------------------------------------------------------------------------------- 1 | let weather = { 2 | apiKey: "67b92f0af5416edbfe58458f502b0a31", 3 | fetchWeather: function (city) { 4 | fetch( 5 | "https://api.openweathermap.org/data/2.5/weather?q=" + 6 | city + 7 | "&units=metric&appid=" + 8 | this.apiKey 9 | ) 10 | .then((response) => { 11 | if (!response.ok) { 12 | alert("No weather found."); 13 | throw new Error("No weather found."); 14 | } 15 | return response.json(); 16 | }) 17 | .then((data) => this.displayWeather(data)); 18 | }, 19 | displayWeather: function (data) { 20 | const { name } = data; 21 | const { icon, description } = data.weather[0]; 22 | const { temp, humidity } = data.main; 23 | const { speed } = data.wind; 24 | document.querySelector(".city").innerText = "Weather in " + name; 25 | document.querySelector(".icon").src = 26 | "https://openweathermap.org/img/wn/" + icon + ".png"; 27 | document.querySelector(".description").innerText = description; 28 | document.querySelector(".temp").innerText = temp + "°C"; 29 | document.querySelector(".humidity").innerText = 30 | "Humidity: " + humidity + "%"; 31 | document.querySelector(".wind").innerText = 32 | "Wind speed: " + speed + " km/h"; 33 | document.querySelector(".weather").classList.remove("loading"); 34 | document.body.style.backgroundImage = 35 | "url('https://source.unsplash.com/1600x900/?" + name + "')"; 36 | }, 37 | search: function () { 38 | this.fetchWeather(document.querySelector(".search-bar").value); 39 | }, 40 | }; 41 | 42 | document.querySelector(".search button").addEventListener("click", function () { 43 | weather.search(); 44 | }); 45 | 46 | document 47 | .querySelector(".search-bar") 48 | .addEventListener("keyup", function (event) { 49 | if (event.key == "Enter") { 50 | weather.search(); 51 | } 52 | }); 53 | 54 | weather.fetchWeather("Patna"); 55 | -------------------------------------------------------------------------------- /Projects/Weather-App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Weather App 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
    17 |
    18 |
    19 | 20 | 26 |
    27 |
    28 |

    Weather in Denver

    29 |

    51°C

    30 |
    31 | 32 |
    Cloudy
    33 |
    34 |
    Humidity: 60%
    35 |
    Wind speed: 6.2 km/h
    36 |
    37 |
    38 |
    39 |
    40 |
    41 |

    Designed & Developed with ❤️ by Atif

    42 |
    43 | 44 | 45 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /Projects/Youtube-Clone/Assets/media/favicon_32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Youtube-Clone/Assets/media/favicon_32x32.png -------------------------------------------------------------------------------- /Projects/Youtube-Clone/Assets/media/youtube_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Youtube-Clone/Assets/media/youtube_logo.png -------------------------------------------------------------------------------- /Projects/Youtube-Clone/Assets/media/youtube_logo.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/Youtube-Clone/Assets/media/youtube_logo.webp -------------------------------------------------------------------------------- /Projects/Youtube-Clone/README.md: -------------------------------------------------------------------------------- 1 |

    Youtube UI Clone using HTML and CSS

    2 | 3 |

    A project which aims to clone YouTube UI with responsiveness by using HTML & CSS.

    4 |
    5 | 6 |

    Tech Stack Used

    7 |
    8 | 9 |

    HTML 10 | CSS 11 | 12 |

    How to use:

    13 |
    14 | 15 | 25 | 26 | OR use this: https://mrkc2303.github.io/youtube-clone/ 27 | 28 | NOTE: I am constantly updating this project to enhance my skills, hence, website on the link may seem litte different from this file. 29 | 30 |

    Use of the Project

    31 | 32 |

    33 | By making this project, your skills will be enhanced and specially for CSS. This single project uses Flexbox, CSS Grid, Media Queries, etc. These are consider one of the most important concepts of CSS and these skills will be better after making this mini project. 34 | 35 | P.S. JavaScript will be added to this in Future updates!! 36 |

    37 |

    38 | 39 |

    40 | image 41 |

    42 | image 43 |

    44 | image 45 | 46 |

    47 | -------------------------------------------------------------------------------- /Projects/compound-interest-calculator/Assets/style.css: -------------------------------------------------------------------------------- 1 | .body{ 2 | background-color: rgb(6, 177, 207); 3 | } 4 | 5 | h1{ 6 | font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 7 | text-align: center; 8 | } 9 | 10 | h5{ 11 | text-align: center; 12 | } 13 | 14 | .card{ 15 | padding-top: 30px; 16 | margin-top: 50px; 17 | padding-bottom: 35px; 18 | margin-bottom: 90px; 19 | } 20 | 21 | #res{ 22 | color: rgb(85, 82, 82); 23 | } 24 | 25 | .name{ 26 | color: white; 27 | } 28 | 29 | #title{ 30 | color: teal; 31 | } -------------------------------------------------------------------------------- /Projects/compound-interest-calculator/README.md: -------------------------------------------------------------------------------- 1 |

    Compound Interest Calculato

    2 | 3 |

    A mini project that aims to calculate the Compound Interest by just adding the values to the webpage. This Project does complex calculations within few seconds, making user's work easier.

    4 |
    5 | 6 |

    Tech Stack Used

    7 |
    8 | 9 |

    HTML 10 | CSS 11 | JS

    12 | 13 |

    How to use:

    14 |
    15 | 16 | 26 | 27 | OR USE THIS LINK TO ACCESS THE SITE: 28 | https://mrkc2303.github.io/compound-interest-calculator/ 29 | 30 |

    Use of the Project

    31 | 32 |

    33 | This mini project helps you to calculate Compound Interest by just giving the values of Principal Amount, Interest Percentage (%), Duration & Number of times Interest is given in a particular year. 34 | Without even knowing the formula and doing math, you can now calculate Compound Interest 35 |

    36 |

    37 | 38 |

    39 | image 40 |

    41 | image 42 |

    43 | -------------------------------------------------------------------------------- /Projects/compound-interest-calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 |
    10 |
    11 |
    12 | 13 |
    14 |
    15 |
    16 |

    Compound Interest Calculator

    17 |
    18 |
    19 |
    20 | 21 |
    22 |
    23 |
    24 |
    25 | 26 | 27 |
    28 |
    29 | 30 | 32 |
    33 |
    34 | 35 | 37 |
    38 |
    39 | 40 | 42 |
    43 | 44 | 45 |
    46 |
    47 |
    48 |
    49 |
    Result
    50 | 51 |
    52 |
    53 |

    0

    54 |
    55 |
    56 |
    57 |
    58 |
    59 | 60 | 61 | -------------------------------------------------------------------------------- /Projects/compound-interest-calculator/script/script.js: -------------------------------------------------------------------------------- 1 | var btn = document.getElementById("btn"); 2 | var body = document.querySelector("body"); 3 | 4 | function calculate() { 5 | 6 | var CI = 0; 7 | var principal = document.getElementById("principal").value; 8 | var interest = document.getElementById("annual-interest-rate").value; 9 | var nyear = document.getElementById("number-of-year").value; 10 | var ntime = document.getElementById("number-of-times-in-year").value; 11 | 12 | if(principal > 0 && interest > 0 && nyear > 0 && ntime > 0) { 13 | CI = (principal* Math.pow((1 + (interest/(ntime*100))), (ntime*nyear))); 14 | CI = CI.toFixed(2); 15 | document.getElementById("res").innerHTML = CI; 16 | } 17 | else{ 18 | alert("Please Enter Valid Values!!") 19 | } 20 | 21 | } 22 | 23 | btn.addEventListener("click", calculate); 24 | body.addEventListener("keypress", function check(event) { 25 | if(event.keyCode === 13){ 26 | calculate(); 27 | } 28 | }); -------------------------------------------------------------------------------- /Projects/tabla/assets/css/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 10px; 3 | margin: 10px; 4 | box-sizing: border-box; 5 | } 6 | 7 | html{ 8 | scroll-behavior: smooth; 9 | } 10 | 11 | ::-webkit-scrollbar-track { 12 | -webkit-box-shadow: inset 0 0 6px rgba(238, 234, 234, 0.205); 13 | background-color: #1d1c1c; 14 | border-radius: 10px; 15 | } 16 | 17 | ::-webkit-scrollbar { 18 | width: 10px; 19 | background-color: #1d1c1c; 20 | } 21 | 22 | ::-webkit-scrollbar-thumb { 23 | border-radius: 10px; 24 | background-color: #fff; 25 | background-image: -webkit-gradient( linear, 40% 0%, 75% 84%, from(#96a9b4), to(#6c6c70), color-stop(0.6,#898b8f )); 26 | } 27 | 28 | body { 29 | font-family: 'Space Grotesk', sans-serif; 30 | background-color: black; 31 | } 32 | 33 | #title { 34 | margin: 5px 0px 0px 0px; 35 | text-align: center; 36 | font-size: 3.5rem; 37 | letter-spacing: 0.25rem; 38 | font-weight: 900; 39 | color: white; 40 | } 41 | p{ 42 | margin-top: 0; 43 | text-align: center; 44 | font-size: 1rem; 45 | color: #67db39 46 | } 47 | 48 | .set { 49 | margin-top: 0%; 50 | margin-left: 30%; 51 | } 52 | 53 | .t { 54 | background-image: url("../media/tap1.png"); 55 | } 56 | 57 | .d { 58 | background-image: url("../media/tap2.png"); 59 | } 60 | 61 | 62 | .tabla { 63 | display: inline-block; 64 | width: 270px; 65 | height: 250px; 66 | align-self: center; 67 | box-shadow: none; 68 | background-color: black; 69 | background-repeat: no-repeat; 70 | border: black; 71 | } 72 | 73 | button { 74 | border: none; 75 | border-radius: 20px; 76 | cursor: pointer; 77 | } 78 | -------------------------------------------------------------------------------- /Projects/tabla/assets/media/d.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/tabla/assets/media/d.mp3 -------------------------------------------------------------------------------- /Projects/tabla/assets/media/t.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/tabla/assets/media/t.mp3 -------------------------------------------------------------------------------- /Projects/tabla/assets/media/tap1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/tabla/assets/media/tap1.png -------------------------------------------------------------------------------- /Projects/tabla/assets/media/tap2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/Projects/tabla/assets/media/tap2.png -------------------------------------------------------------------------------- /Projects/tabla/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Tabla 7 | 8 | 9 | 10 | 11 | 12 |

    TABLA

    13 |

    Click on any images to listen tabla beats

    14 | 15 |
    16 | 17 | 18 |
    19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /Projects/tabla/readme.md: -------------------------------------------------------------------------------- 1 | # Lets play some tabla beats 🖐 2 | It is a webapp that plays tabla beats when clicked on tabla or pressed d or t. 3 | 4 | ## 💻Tech Stack 5 |
    6 | 7 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 8 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 9 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 10 | 11 |
    12 | 13 | ### How to get the wbapp on your local machine: 14 | 15 | - Download or clone the repository 16 | - Go to the directory 17 | - Run the index.html file 18 | - Click on the tabla or press t or d and enjoy the beats. 19 | 20 |
    21 | ### How to use 22 | - Click on the tabla or press t or d and enjoy the beats. 23 | ## Happy Coding! 24 | -------------------------------------------------------------------------------- /Projects/tabla/script/index.js: -------------------------------------------------------------------------------- 1 | 2 | document.querySelector(".t").addEventListener("click",function (){ 3 | var audio=new Audio("assets/media/t.mp3"); 4 | audio.play(); 5 | }) 6 | document.querySelector(".d").addEventListener("click",function (){ 7 | var audio=new Audio("assets/media/d.mp3"); 8 | audio.play(); 9 | }) 10 | 11 | var audioa = new Audio("assets/media/t.mp3"); 12 | var audiob = new Audio("assets/media/d.mp3"); 13 | 14 | window.addEventListener("keydown", checkKeyPress, false); 15 | 16 | function checkKeyPress(key) { 17 | if (key.keyCode == "84") { 18 | audioa.play(); 19 | } 20 | if(key.keyCode == "68"){ 21 | audiob.play(); 22 | } 23 | } -------------------------------------------------------------------------------- /Projects/text to speech/README_txt_to_speech.md: -------------------------------------------------------------------------------- 1 | # Welcome 🖐 to Text to Speech converter 2 | It a simple text to speech converter where you can write can listen to it.. 3 | 4 | 5 | ## 💻Tech Stack 6 |
    7 | 8 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 9 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 10 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 11 | 12 |
    13 | 14 | ### How to get the game on your local machine: 15 | 16 | - Download or clone the repository 17 | - Go to the directory 18 | - Run the index.html file 19 | - Write the text and then click on submit to listen to the audio. 20 | 21 |
    22 | 23 | ### How to use 24 | 1. Write the text which you want to listen in audio. 25 | 2. Click submit. 26 | 27 | 28 | ## Happy Coding! 29 | -------------------------------------------------------------------------------- /Projects/text to speech/assets/text_to_speech.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: rgb(212, 247, 235); 3 | } 4 | h1{ 5 | font-weight: 900; 6 | font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; 7 | margin: 7% 36% 3%; 8 | } 9 | #txt{ 10 | margin: 0% 27%; 11 | width: 600px; 12 | height: 350px; 13 | border: black; 14 | border-width: 6px; 15 | border-radius: 4px; 16 | } 17 | p{ 18 | color: red; 19 | font-size: x-small; 20 | margin-left: 40%; 21 | margin-top: 1%; 22 | } 23 | .btn{ 24 | background-color: #4CAF50; /* Green */ 25 | border: none; 26 | border-radius: 10px; 27 | color: white; 28 | padding: 15px 32px; 29 | margin-top: 1%; 30 | margin-left: 43%; 31 | text-align: center; 32 | text-decoration: none; 33 | display: inline-block; 34 | font-size: 16px; 35 | 36 | } -------------------------------------------------------------------------------- /Projects/text to speech/text_to_speech.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Text to speech 9 | 10 | 11 | 12 |

    13 | Text to speech converter 14 |

    15 | 16 |
    17 |

    *Takes few second to process. Have patience

    18 | 19 | 25 | 26 | -------------------------------------------------------------------------------- /Projects/timer/README.md: -------------------------------------------------------------------------------- 1 | # Welcome 🖐 Timer to count new year 2 | 3 | This webapp is Timer to count time left for new year 4 | 5 | ## 💻Tech Stack 6 |
    7 | 8 | ![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white) 9 | ![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white) 10 | ![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E) 11 | 12 |
    13 | 14 | ### How to get the game on your local machine: 15 | 16 | - Download or clone the repository 17 | 18 | 19 | - Go to the directory 20 | - Run the index.html file and see time left for new year. 21 | 22 |
    23 | 24 | ### How to use 25 | 1. Run the index.html file and see time left for new year. 26 | 27 | 28 | It somehow look like this. 29 | ![apture](https://user-images.githubusercontent.com/76838660/128675830-7d7eb82a-9464-4c6a-9a0d-9ca6cf61a38a.PNG) 30 | 31 | 32 | ## Happy Coding! 33 | -------------------------------------------------------------------------------- /Projects/timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Timer 5 | 24 | 25 | 26 |

    New year begins in

    27 |

    28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /Projects/timer/script/index.js: -------------------------------------------------------------------------------- 1 | var countDownDate = new Date("Jan 1, 2022 00:00:25").getTime(); 2 | var x = setInterval(function(){ 3 | var now = new Date().getTime(); 4 | var distance = countDownDate-now; 5 | var days = Math.floor(distance/(1000*60*60*24)); 6 | var hours = Math.floor((distance%(1000*60*60*24))/(1000*60*60)); 7 | var minutes = Math.floor((distance%(1000*60*60))/(1000*60)); 8 | var seconds = Math.floor((distance%(1000*60))/1000); 9 | document.getElementById("demo").innerHTML=days + " days " + hours + " hours " + minutes +" min " + seconds + " secs !! "; 10 | if(distance<0){ 11 | clearInterval(x); 12 | document.getElementById("demo").innerHTML="EXPIRED"; 13 | } 14 | }, 1000); -------------------------------------------------------------------------------- /Projects/to do list/readme.md: -------------------------------------------------------------------------------- 1 | # Project Section 2 | 3 | Projects will be added here 4 | 5 | Each project in seperate folder 6 | 7 | Each Folder should have the basic structure 8 | 9 | Check the folder `Project_Structure` for basic idea of how files can be arranged 10 | 11 | 12 | ☀️🌤⛈ A TO-DO LIST Website 13 | A basic to-do list website which is built using HTML, CSS & JavaScript. 14 | 15 | A basic To-Do List website would let you add ,filter and remove the tasks form the list in accorance to your convenience. 16 | Tech Stack 17 | Client: HTML, CSS , JavaScript 18 | 19 | ScreenShot 20 | image 21 | ![Screenshot (673)](https://user-images.githubusercontent.com/80565044/127768326-20c61ce4-4cf7-44de-8868-5a8b55b997f9.png) 22 | https://jainapoorva40.github.io/To-do-list/ 23 | 24 | 25 | -------------------------------------------------------------------------------- /Projects/to do list/script/sample.js: -------------------------------------------------------------------------------- 1 | const form=document.querySelector('#formm'); 2 | const tasklist=document.querySelector('.collection'); 3 | //const clearBtn=document.querySelector('.clear task'); 4 | const filter=document.querySelector('#filter'); 5 | const taskInput=document.querySelector('#task'); 6 | 7 | loadEventListener(); 8 | 9 | function loadEventListener(){ 10 | form.addEventListener('submit',add); 11 | tasklist.addEventListener('click',remove); 12 | filter.addEventListener('keyup',filterTask); 13 | 14 | } 15 | 16 | function add(e) 17 | { 18 | const li=document.createElement('li'); 19 | li.className='collection-item'; 20 | li.appendChild(document.createTextNode(taskInput.value)); 21 | 22 | const link=document.createElement('a'); 23 | //link.className="delete-item"; 24 | link.innerHTML='done' 25 | li.appendChild(link); 26 | tasklist.appendChild(li); 27 | e.preventDefault(); 28 | } 29 | 30 | function remove(e) 31 | { 32 | e.target.parentElement.parentElement.remove(); 33 | } 34 | 35 | function cleartask() 36 | { 37 | tasklist.innerHTML=" "; 38 | } 39 | //no need although 40 | 41 | function filterTask(e) 42 | { 43 | const text=e.target.value.toLowerCase(); 44 | document.querySelectorAll('.collection-item').forEach(function(task){ 45 | const item=task.firstChild.textContent; 46 | if(item.toLowerCase().indexOf(text)!=-1){ 47 | task.style.display='block'; 48 | } 49 | else 50 | { 51 | task.style.display='none'; 52 | } 53 | } 54 | ); 55 | } 56 | -------------------------------------------------------------------------------- /assets/css/Sudoku_Solver.css: -------------------------------------------------------------------------------- 1 | #container { 2 | height: auto; 3 | width: 540px; 4 | background-color: white; 5 | display: flex; 6 | flex-wrap: wrap; 7 | justify-content: space-evenly; 8 | align-content: space-evenly; 9 | margin: 0 auto; 10 | } 11 | 12 | #generate-sudoku { 13 | margin: auto; 14 | display: block; 15 | } 16 | 17 | #solve { 18 | margin: auto; 19 | display: block; 20 | } 21 | 22 | #container div { 23 | background-color: whitesmoke; 24 | height: 60px; 25 | width: 60px; 26 | box-sizing: border-box; 27 | font-family: sans-serif; 28 | text-align: center; 29 | vertical-align: middle; 30 | line-height: 60px; 31 | font-size: 30px; 32 | color: red; 33 | } 34 | 35 | #container div:hover { 36 | background-color: rgb(250, 250, 135); 37 | } 38 | 39 | .lsb { 40 | border-left: black 2px solid; 41 | } 42 | 43 | .bsb { 44 | border-bottom: black 2px solid; 45 | } 46 | 47 | .rsb { 48 | border-right: black 2px solid; 49 | } 50 | 51 | .tsb { 52 | border-top: black 2px solid; 53 | } 54 | 55 | .ldb { 56 | border-left: black 0.6px dashed; 57 | } 58 | 59 | .bdb { 60 | border-bottom: black 0.6px dashed; 61 | } 62 | 63 | .rdb { 64 | border-right: black 0.6px dashed; 65 | } 66 | 67 | .tdb { 68 | border-top: black 0.6px dashed; 69 | } -------------------------------------------------------------------------------- /assets/css/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/assets/css/style.css -------------------------------------------------------------------------------- /assets/media/Sudoku_Solver.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/assets/media/Sudoku_Solver.jpeg -------------------------------------------------------------------------------- /assets/media/banner.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/assets/media/banner.png -------------------------------------------------------------------------------- /assets/media/sample: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/assets/media/sample -------------------------------------------------------------------------------- /assets/media/tree-struct.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/assets/media/tree-struct.PNG -------------------------------------------------------------------------------- /script.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/LetsGrowMoreCommunity/WebDev-Playyard/635403e8f2631253d7a16af01fc854124996c68a/script.js --------------------------------------------------------------------------------