├── .github ├── ISSUE_TEMPLATE │ ├── Bug_report.yaml │ ├── Doc_issue.yaml │ ├── Enhancement_request.yaml │ └── Feature_request.yaml └── PULL_REQUEST_TEMPLATE.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── data.json ├── index.html ├── projects ├── 2048-game │ ├── game.js │ ├── index.html │ └── styles.css ├── 3d-distance-calculator │ ├── index.html │ ├── script.js │ └── style.css ├── Casio │ ├── Music_Note │ │ ├── A.wav │ │ ├── A_Drum.wav │ │ ├── B.wav │ │ ├── Bb_Drum.wav │ │ ├── C.wav │ │ ├── C1.wav │ │ ├── C1_Drum.wav │ │ ├── C_Drum.wav │ │ ├── C_s1.wav │ │ ├── D.wav │ │ ├── D1.wav │ │ ├── D1_Drum.wav │ │ ├── D_Drum.wav │ │ ├── D_s1.wav │ │ ├── Dq_Drum.wav │ │ ├── E.wav │ │ ├── E1.wav │ │ ├── E1_Drum.wav │ │ ├── F.wav │ │ ├── F1.wav │ │ ├── F_Drum.wav │ │ ├── G.wav │ │ ├── G_Drum.wav │ │ ├── G_s.wav │ │ └── f1.jpg │ ├── index.html │ ├── myscript.js │ └── mystyle.css ├── age-calculator │ ├── assets │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── atari-game │ ├── index.html │ ├── preview.jpg │ ├── script.js │ └── style.css ├── balloon-game │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── blackjack-game │ ├── Output_1.png │ ├── Output_2.png │ ├── Static │ │ ├── Images │ │ │ ├── 10.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── 4.png │ │ │ ├── 5.png │ │ │ ├── 6.png │ │ │ ├── 7.png │ │ │ ├── 8.png │ │ │ ├── 9.png │ │ │ ├── A.png │ │ │ ├── J.png │ │ │ ├── K.png │ │ │ ├── Q.png │ │ │ ├── blackjack.jpg │ │ │ └── download.jpg │ │ ├── index.css │ │ ├── index.js │ │ └── sounds │ │ │ ├── .DS_Store │ │ │ ├── aww.mp3 │ │ │ ├── cash.mp3 │ │ │ └── swish.m4a │ └── index.html ├── block-runner │ ├── index.html │ ├── preview.jpg │ ├── script.js │ └── style.css ├── body-mass-index-calculator │ ├── index.html │ └── script.js ├── bomb-throw-game │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── bubble-shooting-game │ ├── bubble-sprites.png │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── caesar-cipher │ ├── index.html │ ├── script.js │ └── style.css ├── calculator │ ├── assets │ │ └── calculator.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── calendar │ ├── assets │ │ └── calendar.png │ ├── dycalendar.css │ ├── dycalendar.js │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── main.js │ └── style.css ├── captcha-generator │ ├── assets │ │ ├── bg6.png │ │ └── favicon.ico │ ├── index.html │ ├── script.js │ └── style.css ├── car-game │ ├── app.js │ ├── assets │ │ ├── car.png │ │ └── enemycar.png │ ├── index.html │ └── style.css ├── casino-slot-machine-game │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── catch-me-if-you-can │ ├── README.md │ ├── img │ │ └── logo_1.png │ ├── index.html │ ├── script.js │ └── style.css ├── clock │ ├── assets │ │ ├── clock.png │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ └── style.css ├── coin-game │ ├── index.html │ ├── script.js │ └── style.css ├── color-choosing-game │ ├── index.html │ ├── script.js │ └── style.css ├── color-game │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── color-picker │ ├── assets │ │ └── color-picker.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── countdown-timer │ ├── assets │ │ └── hourglass.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── currency-converter │ ├── index.html │ ├── script.js │ └── style.css ├── custom-qr-code │ ├── assets │ │ ├── favicon.png │ │ └── img.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── decimal-to-binary │ ├── assests │ │ └── Binary icon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── dice-game │ ├── Capture.PNG │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── dice-roll │ ├── assets │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── dice-roll.gif │ │ └── dice.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── dictionary-app │ ├── index.html │ ├── script.js │ └── style.css ├── digital-clock │ ├── assets │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── dot-connect-game │ ├── index.html │ ├── script.js │ └── style.css ├── dot-target-game │ ├── index.html │ ├── preview.gif │ ├── readme.md │ ├── script.js │ └── style.css ├── drawing-pad │ ├── assets │ │ └── drawing-pad.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── drum-kit │ ├── assets │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── main.js │ ├── sounds │ │ ├── boom.wav │ │ ├── clap.wav │ │ ├── hihat.wav │ │ ├── kick.wav │ │ ├── openhat.wav │ │ ├── ride.wav │ │ ├── snare.wav │ │ ├── tink.wav │ │ └── tom.wav │ └── style.css ├── dynamic-form-field │ ├── assets │ │ └── form.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── eigen-value-and-vector-calculator │ ├── index.html │ ├── script.js │ └── style.css ├── emoji-switcher │ ├── assets │ │ └── cool.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── falling-ball-game │ ├── index.html │ ├── script.js │ └── style.css ├── favicon-fetcher │ ├── assets │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── flappy-bird │ ├── assets │ │ ├── Bird.png │ │ ├── background-img.png │ │ └── favicon.ico │ ├── index.html │ ├── script.js │ └── style.css ├── getting-started-with-apis │ ├── app.js │ ├── assets │ │ └── favicon.png │ ├── index.html │ └── styles.css ├── gradient-generator │ ├── assests │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── guess-the-country │ ├── assets │ │ └── favicon.png │ ├── index.html │ ├── script.js │ └── style.css ├── guess-the-number-game │ ├── index.html │ ├── script.js │ └── style.css ├── guess-the-shape │ ├── index.html │ ├── script.js │ └── style.css ├── hangman-game │ ├── images │ │ ├── hangman-0.svg │ │ ├── hangman-1.svg │ │ ├── hangman-2.svg │ │ ├── hangman-3.svg │ │ ├── hangman-4.svg │ │ ├── hangman-5.svg │ │ ├── hangman-6.svg │ │ ├── lost.gif │ │ └── victory.gif │ ├── index.html │ ├── scripts │ │ ├── script.js │ │ └── word-list.js │ └── style.css ├── hangman │ ├── assets │ │ └── hangman-game.png │ ├── index.html │ ├── scripts │ │ ├── app.js │ │ ├── hangman.js │ │ └── request.js │ └── styles.css ├── image-utility │ ├── images │ │ ├── demo1.png │ │ ├── demo2.png │ │ ├── edited.png │ │ ├── img-placeholder.png │ │ ├── ld-mode.svg │ │ ├── left.svg │ │ ├── original.jpg │ │ ├── preloader.gif │ │ ├── right.svg │ │ └── yt.png │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── insect-catching-game │ ├── Readme.md │ ├── index.html │ ├── script.js │ └── style.css ├── joke-generator │ ├── .DS_Store │ ├── assets │ │ └── joke.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── key-code │ ├── assets │ │ └── Keycode.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── levitate-board │ ├── assets │ │ └── levitation.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── lights-out │ ├── index.html │ ├── script.js │ └── styles.css ├── lorem-ipsum-generator │ ├── index.html │ ├── script.js │ └── style.css ├── luminosity-particle-js │ ├── app.js │ ├── index.html │ └── style.css ├── mancala-game │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── match-three │ ├── index.html │ ├── script.js │ └── style.css ├── math-game │ ├── index.html │ ├── preview.gif │ ├── readme.md │ ├── script.js │ └── style.css ├── maths-addition │ ├── README.md │ ├── app.js │ ├── index.html │ └── style.css ├── maze-game │ ├── GameScreenShot.png │ ├── cheese.png │ ├── index.html │ ├── jerry.png │ ├── script.js │ └── style.css ├── memory-matching-game │ ├── assets │ │ └── memory.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── minesweeper-game │ ├── app.js │ ├── index.html │ └── style.css ├── minesweeper │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── movie-guessing-game │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── movie-search-app │ ├── README.md │ ├── favicon.png │ ├── images │ │ ├── no-image-available.png │ │ ├── nothing-to-show.avif │ │ ├── sc1.png │ │ ├── sc2.png │ │ └── search.png │ ├── index.html │ ├── style.css │ ├── v1.js │ └── v2.js ├── movie-tv-series-quote-generator │ ├── index.html │ ├── script.js │ └── style.css ├── multiply-math-game │ ├── README.md │ ├── css │ │ └── style.css │ ├── img │ │ ├── add-readme.png │ │ ├── mathss(.1).png │ │ └── mathss(.2).png │ ├── index.html │ └── js │ │ └── script.js ├── music-player │ ├── Music.css │ ├── Music.js │ ├── Music │ │ ├── Alone.mp3 │ │ ├── Peaches.mp3 │ │ └── Sugar.mp3 │ ├── font │ │ └── sans.ttf │ ├── images │ │ ├── Alone.jpg │ │ ├── Peaches.jpg │ │ ├── Sugar.jpg │ │ └── favicon.png │ └── index.html ├── n-queen-visualizer │ ├── N Queens │ ├── Nqueen.zip │ ├── README.md │ ├── app.js │ ├── index.html │ ├── package-lock.json │ ├── style.css │ └── visualisation.gif ├── notes-taking-app │ ├── assets │ │ ├── deleteIcon.png │ │ └── favicon.png │ ├── index.html │ ├── script.js │ └── style.css ├── number-counter │ ├── assets │ │ └── number.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── number-facts │ ├── app.js │ ├── index.html │ ├── readme │ ├── ss1.png │ ├── ss2.png │ └── style.css ├── palindrome-checker │ ├── index.html │ ├── index.js │ └── style.css ├── particle-effect-animation │ ├── index.html │ ├── script.js │ └── style.css ├── pattern-generator │ ├── index.html │ ├── script.js │ └── style.css ├── ping-pong-game │ ├── index.html │ ├── index.js │ └── style.css ├── pixel-to-em-converter │ ├── index.html │ ├── script.js │ └── style.css ├── pixsort-studio │ ├── index.html │ ├── script.js │ └── style.css ├── pomodoro-clock │ ├── index.html │ ├── script.js │ └── styles.css ├── pop-balloons │ ├── assets │ │ └── Balloon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── postmaster-clone │ ├── Postman clone.js │ ├── index.html │ ├── logo.png │ ├── prism.css │ ├── prism.js │ └── style.css ├── projectile-motion-simulator │ ├── README.md │ ├── index.html │ └── pms.png ├── quiz-app │ ├── css │ │ ├── quiz.css │ │ ├── result.css │ │ └── styles.css │ ├── index.html │ ├── javaScript │ │ ├── index.js │ │ ├── question.js │ │ ├── quiz.js │ │ └── result.js │ ├── quiz.html │ └── result.html ├── random-color-generator │ ├── assets │ │ └── wheel.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── main.js │ └── style.css ├── random-password-generator │ ├── assets │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── main.js │ └── style.css ├── reaction-time │ ├── README.md │ ├── favicon.png │ ├── images │ │ ├── sc1.png │ │ └── sc2.png │ ├── index.html │ └── script.js ├── retro-mario-game │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── reverse-memory-game │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── rps-game │ ├── assets │ │ ├── images1.jpg │ │ ├── images2.jpg │ │ └── images3.jpg │ ├── font │ │ └── sans.ttf │ ├── fonts │ │ └── sans.ttf │ ├── index.html │ ├── start.js │ └── style.css ├── search-github-profile │ ├── Readme.md │ ├── images │ │ ├── github_logo.png │ │ ├── wokingimage1.png │ │ └── workingimage2.png │ ├── index.html │ ├── script.js │ └── style.css ├── shell-game │ ├── README.MD │ ├── bowl.png │ ├── index.html │ ├── script.js │ └── style.css ├── simon-game │ ├── game.js │ ├── index.html │ ├── sounds │ │ ├── blue.mp3 │ │ ├── green.mp3 │ │ ├── red.mp3 │ │ ├── wrong.mp3 │ │ └── yellow.mp3 │ └── styles.css ├── simple-form-validation │ ├── app.js │ ├── assets │ │ └── favicon.png │ ├── index.html │ └── styles.css ├── snake-game │ ├── assets │ │ └── favicon.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── snowy-particle-js │ ├── app.js │ ├── index.html │ └── style.css ├── sorting-visualizer │ ├── README.md │ ├── index.html │ ├── index.js │ └── styles.css ├── spin-the-wheel-game │ ├── button.png │ ├── index.html │ ├── marker.png │ ├── readme.md │ ├── script.js │ ├── styles.css │ └── wheel.png ├── stack-game │ ├── README.md │ ├── assets │ │ └── stack-demoo.gif │ ├── index.html │ ├── script.js │ └── style.css ├── steal-diamond-game │ ├── index.html │ ├── script.js │ └── style.css ├── stick-hero-game │ ├── app.js │ ├── index.html │ └── style.css ├── sticky-notes │ ├── README.md │ ├── css │ │ └── style.css │ ├── img │ │ ├── notes.png │ │ └── stickynote.png │ ├── index.html │ └── js │ │ └── script.js ├── stopwatch │ ├── assets │ │ └── stopwatch.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── sudoku │ ├── app.css │ ├── index.html │ └── static │ │ ├── images │ │ └── icon.jpg │ │ └── js │ │ ├── app.js │ │ ├── constant.js │ │ └── sudoku.js ├── taash-game │ ├── README.md │ ├── Taash Game.png │ ├── images │ │ ├── 10.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ ├── 7.png │ │ ├── 8.png │ │ ├── 9.png │ │ ├── A.png │ │ ├── J.png │ │ ├── K.png │ │ └── Q.png │ ├── index.html │ ├── script.js │ ├── sounds │ │ ├── aww.mp3 │ │ ├── cash.mp3 │ │ └── swish.m4a │ └── style.css ├── temperature-convertor │ ├── assets │ │ └── favicon.png │ ├── index.html │ ├── script.js │ └── style.css ├── tetris-game │ ├── assets │ │ ├── down.png │ │ ├── left-arrow.png │ │ ├── pause.jpg │ │ ├── pause.png │ │ ├── play.jpg │ │ ├── red-left-arrow.png │ │ ├── red-right-arrow.png │ │ ├── right-arrow.png │ │ └── rotate.png │ ├── index.html │ ├── index.js │ └── style.css ├── text-speed-control │ ├── assets │ │ └── speed.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── text-to-speech-converter │ ├── index.html │ ├── main.js │ └── styles.css ├── three-number │ ├── index.html │ ├── preview.gif │ ├── readme.md │ ├── script.js │ └── style.css ├── tic-tac-toe │ ├── assets │ │ └── tic-tac-toe.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── to-do-list │ ├── assets │ │ └── to-do-list.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── tower-of-hanoi │ ├── index.html │ ├── script.js │ └── style.css ├── traffic-lights │ ├── assets │ │ └── traffic-lights.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── transpose-matrix-calculator │ ├── index.html │ ├── script.js │ └── style.css ├── typer │ ├── README.md │ ├── canvas.js │ ├── index.html │ ├── particle.js │ ├── typer.css │ └── typer.js ├── typing-platform │ ├── Readme.txt │ ├── backend.json │ ├── file.txt │ ├── index.html │ ├── script.js │ └── style.css ├── wall-breaker-game │ ├── README.md │ ├── index.html │ ├── script.js │ └── style.css ├── wave-effect │ ├── assets │ │ └── wave.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── weather-app │ ├── Clear1.jpg │ ├── assets │ │ └── weather.png │ ├── clouds.jpg │ ├── font │ │ └── sans.ttf │ ├── gauge (1).png │ ├── icons8-humidity-64.png │ ├── icons8-wind-64.png │ ├── index.html │ ├── rain.jpg │ ├── script.js │ ├── search.png │ ├── snow.jpg │ ├── style.css │ ├── sunny.jpg │ └── thunder.jpg ├── weight-converter │ ├── index.html │ ├── readme.md │ ├── script.js │ └── style.css ├── whack-a-mole-game │ ├── dirt.svg │ ├── index.html │ ├── mole.svg │ ├── script.js │ └── style.css ├── word-counter │ ├── assets │ │ └── scrabble.png │ ├── font │ │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── word-guess │ ├── index.html │ ├── script.js │ └── style.css └── zoom-effect │ ├── assets │ ├── image.jpg │ └── zoom.png │ ├── font │ └── sans.ttf │ ├── index.html │ ├── script.js │ └── style.css ├── public ├── assets │ ├── 1.png │ ├── 10.png │ ├── 100.png │ ├── 101.png │ ├── 102.png │ ├── 103.png │ ├── 104.png │ ├── 105.png │ ├── 106.png │ ├── 107.png │ ├── 108.png │ ├── 109.png │ ├── 11.png │ ├── 110.png │ ├── 111.png │ ├── 112.png │ ├── 113.png │ ├── 114.png │ ├── 115.png │ ├── 116.png │ ├── 117.png │ ├── 118.png │ ├── 119.png │ ├── 12.png │ ├── 120.png │ ├── 121.png │ ├── 122.png │ ├── 123.png │ ├── 124.png │ ├── 125.png │ ├── 126.png │ ├── 13.png │ ├── 14.png │ ├── 15.png │ ├── 16.png │ ├── 17.png │ ├── 18.png │ ├── 19.png │ ├── 2.png │ ├── 20.png │ ├── 21.png │ ├── 22.png │ ├── 23.png │ ├── 24.png │ ├── 25.png │ ├── 26.png │ ├── 27.png │ ├── 28.png │ ├── 29.png │ ├── 3.png │ ├── 30.png │ ├── 31.png │ ├── 32.png │ ├── 33.png │ ├── 34.png │ ├── 35.png │ ├── 36.png │ ├── 37.png │ ├── 38.png │ ├── 39.png │ ├── 4.png │ ├── 40.png │ ├── 41.png │ ├── 42.png │ ├── 43.png │ ├── 44.png │ ├── 45.png │ ├── 46.png │ ├── 47.png │ ├── 48.png │ ├── 49.png │ ├── 5.png │ ├── 50.png │ ├── 51.png │ ├── 52.png │ ├── 53.png │ ├── 54.png │ ├── 55.png │ ├── 56.png │ ├── 57.png │ ├── 58.png │ ├── 59.png │ ├── 6.png │ ├── 60.png │ ├── 61.png │ ├── 62.png │ ├── 63.png │ ├── 64.png │ ├── 65.png │ ├── 66.png │ ├── 67.png │ ├── 68.png │ ├── 69.png │ ├── 7.png │ ├── 70.png │ ├── 71.png │ ├── 72.png │ ├── 73.png │ ├── 74.png │ ├── 75.png │ ├── 76.png │ ├── 77.png │ ├── 78.png │ ├── 79.png │ ├── 8.png │ ├── 80.png │ ├── 81.png │ ├── 82.png │ ├── 83.png │ ├── 84.png │ ├── 85.png │ ├── 86.png │ ├── 87.png │ ├── 88.png │ ├── 89.png │ ├── 9.png │ ├── 90.png │ ├── 91.png │ ├── 92.png │ ├── 93.png │ ├── 94.png │ ├── 95.png │ ├── 96.png │ ├── 97.png │ ├── 98.png │ ├── 99.png │ └── favicon.png └── font │ └── sans.ttf ├── script.js └── style.css /.github/ISSUE_TEMPLATE/Doc_issue.yaml: -------------------------------------------------------------------------------- 1 | name: 📄 Documentation issue 2 | description: Found an issue in the documentation? You can use this one! 3 | title: '[DOCS] ' 4 | labels: ['documentation'] 5 | body: 6 | - type: textarea 7 | id: description 8 | attributes: 9 | label: Description 10 | description: Description of the question or issue, also include what you tried and what didn't work 11 | validations: 12 | required: true 13 | - type: textarea 14 | id: screenshots 15 | attributes: 16 | label: Screenshots 17 | description: Screenshots if applicable 18 | validations: 19 | required: false 20 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | 2 | 3 | ### 🛠️ Fixes Issue (Number) 4 | 5 | 6 | 7 | ### 👨‍💻 Changes proposed and Brief Description 8 | 9 | 10 | 11 | ### ✅ Check List (Check all the applicable boxes) 12 | 13 | - [ ] My code doesn't break any part of the project 14 | - [ ] This PR does not contain plagiarized content. 15 | - [ ] My Addition/Changes works properly and matches the overall repo pattern. 16 | - [ ] The title of my pull request is a short description of the requested changes. 17 | 18 | ### 📄 Note to reviewers 19 | 20 | 21 | 22 | ### 📷 Screenshots 23 | 24 | 25 | -------------------------------------------------------------------------------- /projects/3d-distance-calculator/script.js: -------------------------------------------------------------------------------- 1 | function calculate() { 2 | // Get input values 3 | var x1 = parseFloat(document.getElementById('x1').value); 4 | var y1 = parseFloat(document.getElementById('y1').value); 5 | var z1 = parseFloat(document.getElementById('z1').value); 6 | var x2 = parseFloat(document.getElementById('x2').value); 7 | var y2 = parseFloat(document.getElementById('y2').value); 8 | var z2 = parseFloat(document.getElementById('z2').value); 9 | 10 | // Check if input values are valid 11 | if (isNaN(x1) || isNaN(y1) || isNaN(z1) || isNaN(x2) || isNaN(y2) || isNaN(z2)) { 12 | document.getElementById('result').innerHTML = 'Please enter valid numbers for both points.'; 13 | return; 14 | } 15 | 16 | // Calculate distance 17 | var distance = Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2) + Math.pow(z2 - z1, 2)); 18 | 19 | // Display the result 20 | document.getElementsByClassName('display')[0].innerHTML = '|AB| = ' + distance.toFixed(3); 21 | } -------------------------------------------------------------------------------- /projects/Casio/Music_Note/A.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/A.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/A_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/A_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/B.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/B.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/Bb_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/Bb_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/C.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/C.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/C1.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/C1.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/C1_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/C1_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/C_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/C_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/C_s1.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/C_s1.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/D.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/D.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/D1.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/D1.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/D1_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/D1_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/D_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/D_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/D_s1.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/D_s1.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/Dq_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/Dq_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/E.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/E.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/E1.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/E1.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/E1_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/E1_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/F.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/F.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/F1.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/F1.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/F_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/F_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/G.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/G.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/G_Drum.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/G_Drum.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/G_s.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/G_s.wav -------------------------------------------------------------------------------- /projects/Casio/Music_Note/f1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/Casio/Music_Note/f1.jpg -------------------------------------------------------------------------------- /projects/age-calculator/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/age-calculator/assets/favicon.png -------------------------------------------------------------------------------- /projects/age-calculator/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/age-calculator/font/sans.ttf -------------------------------------------------------------------------------- /projects/atari-game/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/atari-game/preview.jpg -------------------------------------------------------------------------------- /projects/balloon-game/README.md: -------------------------------------------------------------------------------- 1 | # Balloon Game 2 | 3 | ## Tech Used 4 | HTML ,CSS, JavaScript 5 | 6 | ## About Project 7 | - Hover the Mouse Over The Balloon And Burst it. 8 | - Burst More Score More 9 | -------------------------------------------------------------------------------- /projects/balloon-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Balloon Game 8 | 9 | 10 | 11 |

Balloon Game

12 | 13 | 14 | 15 | 28 |
29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /projects/blackjack-game/Output_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Output_1.png -------------------------------------------------------------------------------- /projects/blackjack-game/Output_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Output_2.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/10.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/2.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/3.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/4.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/5.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/6.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/7.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/8.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/9.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/A.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/J.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/J.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/K.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/K.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/Q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/Q.png -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/blackjack.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/blackjack.jpg -------------------------------------------------------------------------------- /projects/blackjack-game/Static/Images/download.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/Images/download.jpg -------------------------------------------------------------------------------- /projects/blackjack-game/Static/sounds/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/sounds/.DS_Store -------------------------------------------------------------------------------- /projects/blackjack-game/Static/sounds/aww.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/sounds/aww.mp3 -------------------------------------------------------------------------------- /projects/blackjack-game/Static/sounds/cash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/sounds/cash.mp3 -------------------------------------------------------------------------------- /projects/blackjack-game/Static/sounds/swish.m4a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/blackjack-game/Static/sounds/swish.m4a -------------------------------------------------------------------------------- /projects/block-runner/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Block Runner game 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 |
17 | 18 |
19 |

Jump: CLICK or SPACE or UP or W (Hold to jump higher)

20 |

21 |
22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/block-runner/preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/block-runner/preview.jpg -------------------------------------------------------------------------------- /projects/block-runner/style.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --background-light-color: #57ebd7; 3 | --background-dark-color: #24a88b; 4 | --main-background-gradient: linear-gradient(to right, var(--background-light-color) 0%, var(--background-dark-color) 100%); 5 | } 6 | 7 | 8 | body{ 9 | background: var(--main-background-gradient); 10 | overflow: hidden; 11 | margin: 0; 12 | padding: 0; 13 | text-align: center; 14 | } 15 | #container{ 16 | margin-top: 10%; 17 | display: inline-block; 18 | } 19 | canvas{ 20 | background: #cecece; 21 | border: 1px solid #181818; 22 | } -------------------------------------------------------------------------------- /projects/body-mass-index-calculator/script.js: -------------------------------------------------------------------------------- 1 | function fun() 2 | { 3 | var cm = document.getElementById("cm").value ; 4 | cm = cm/100; 5 | var w = document.getElementById("weight").value; 6 | var bmi = w/(cm*cm); 7 | document.getElementById("bmi").value = bmi; 8 | if(bmi<18.5) 9 | { 10 | document.querySelector("h4").innerHTML = 'Under weight'; 11 | } 12 | else if(bmi>=18.5 && bmi <=24.9) 13 | { 14 | document.querySelector("h4").innerHTML = 'Normal weight'; 15 | } 16 | else if(bmi>=25 && bmi <= 29.9) 17 | { 18 | document.querySelector("h4").innerHTML = 'Overweight'; 19 | } 20 | else if(bmi>=30) 21 | { 22 | document.querySelector("h4").innerHTML = 'Obesity'; 23 | } 24 | } -------------------------------------------------------------------------------- /projects/bomb-throw-game/readme.md: -------------------------------------------------------------------------------- 1 | # Bomb Throw Game 2 | 3 | You have 10 Second to Align the distance and the angle and it will automatically throw the bomb 4 | -------------------------------------------------------------------------------- /projects/bubble-shooting-game/bubble-sprites.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/bubble-shooting-game/bubble-sprites.png -------------------------------------------------------------------------------- /projects/bubble-shooting-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Bubble Shooter Game 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/bubble-shooting-game/readme.md: -------------------------------------------------------------------------------- 1 | # Bubble Shooter Game: 2 | >It's a **Bubble Shooter Game**, made using HTML,CSS,JS . The Code is Responsive and here Player has given some random balls and he/she has to shoot similar coloured balls to increase Score. 3 | ## Tech Stack : 4 | HTML,CSS,JS 5 | 6 | ## Screenshot: 7 | ![image](https://user-images.githubusercontent.com/77873383/167983029-f243afb2-db63-4700-ae35-f429e3f3c2de.png) 8 | 9 | 10 | 11 | ## Demo: 12 | 13 | 14 | 15 | https://user-images.githubusercontent.com/77873383/167983050-c76c0124-0c58-401e-b63c-0ad5d431e6c3.mp4 16 | -------------------------------------------------------------------------------- /projects/bubble-shooting-game/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | /* background-color: gray; */ 3 | background-image: linear-gradient(to right, rgb(184, 208, 217),rgb(247, 122, 122)); 4 | } 5 | 6 | div{ 7 | border-radius: 30px; 8 | } 9 | #viewport{ 10 | height: 628px; 11 | width: 628px; 12 | /* margin-left: 30%; */ 13 | padding-top: 100px; 14 | border-radius: 50px; 15 | border: 3px blue; 16 | box-shadow: 10px 10px 10px 0 blue; 17 | } 18 | 19 | 20 | -------------------------------------------------------------------------------- /projects/calculator/assets/calculator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/calculator/assets/calculator.png -------------------------------------------------------------------------------- /projects/calculator/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/calculator/font/sans.ttf -------------------------------------------------------------------------------- /projects/calendar/assets/calendar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/calendar/assets/calendar.png -------------------------------------------------------------------------------- /projects/calendar/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/calendar/font/sans.ttf -------------------------------------------------------------------------------- /projects/calendar/main.js: -------------------------------------------------------------------------------- 1 | dycalendar.draw({ 2 | target: '#dycalendar', 3 | type: 'month', 4 | dayformat : 'full', 5 | monthformat: 'full', 6 | highlighttargetdate: false, 7 | highlighttoday:true, 8 | prevnextbutton: 'show', 9 | todaybutton: 'show' 10 | }) 11 | -------------------------------------------------------------------------------- /projects/captcha-generator/assets/bg6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/captcha-generator/assets/bg6.png -------------------------------------------------------------------------------- /projects/captcha-generator/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/captcha-generator/assets/favicon.ico -------------------------------------------------------------------------------- /projects/car-game/assets/car.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/car-game/assets/car.png -------------------------------------------------------------------------------- /projects/car-game/assets/enemycar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/car-game/assets/enemycar.png -------------------------------------------------------------------------------- /projects/car-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Car Game 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 | 18 |
19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /projects/catch-me-if-you-can/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

5 |

Catch Me If You Can

6 | 7 |
8 | Catch Me If You Can is a game made through HTML,CSS and JAVASCRIPT 9 |
10 | 11 |
12 | 13 |
14 | 15 | 16 | Standard 18 | 19 |
20 | 21 | ## ⚡️ Introduction 22 | 23 | It box whose size changes dynamically according to viewport size. Now when you hover over the box, it should change its position randomly inside the viewport. 24 | 25 | ## ‎‍💻 Authors 26 | 27 | - [@iamrahulmahato](https://www.github.com/iamrahulmahato) 28 | 29 | ## ⭐️ Show your support 30 | 31 | Give a star if this project helped you 32 | -------------------------------------------------------------------------------- /projects/catch-me-if-you-can/img/logo_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/catch-me-if-you-can/img/logo_1.png -------------------------------------------------------------------------------- /projects/catch-me-if-you-can/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Catch Me If You Can 9 | 10 | 11 | 12 | 13 |
14 |

Catch Me

15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /projects/catch-me-if-you-can/style.css: -------------------------------------------------------------------------------- 1 | #box { 2 | width: 10vw; 3 | height: 10vw; 4 | background-color: #b916f4; 5 | cursor: pointer; 6 | position: absolute; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | } 11 | 12 | #box p { 13 | font-size: 1.7vw; 14 | color: white; 15 | } -------------------------------------------------------------------------------- /projects/clock/assets/clock.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/clock/assets/clock.png -------------------------------------------------------------------------------- /projects/clock/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/clock/assets/favicon.png -------------------------------------------------------------------------------- /projects/clock/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/clock/font/sans.ttf -------------------------------------------------------------------------------- /projects/color-game/readme.md: -------------------------------------------------------------------------------- 1 | # Color Game 2 | 3 | The Color Will Blink You have Memories and Click The Game. 4 | With Increasing Level The The number of Color blink will Increase. 5 | Reach The Highest Level 6 | 7 | ![preview](https://user-images.githubusercontent.com/72241207/169377031-0fe2ac54-3e3d-4779-b0b2-eca71b22fa7b.gif) 8 | -------------------------------------------------------------------------------- /projects/color-picker/assets/color-picker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/color-picker/assets/color-picker.png -------------------------------------------------------------------------------- /projects/color-picker/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/color-picker/font/sans.ttf -------------------------------------------------------------------------------- /projects/countdown-timer/assets/hourglass.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/countdown-timer/assets/hourglass.png -------------------------------------------------------------------------------- /projects/countdown-timer/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/countdown-timer/font/sans.ttf -------------------------------------------------------------------------------- /projects/custom-qr-code/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/custom-qr-code/assets/favicon.png -------------------------------------------------------------------------------- /projects/custom-qr-code/assets/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/custom-qr-code/assets/img.png -------------------------------------------------------------------------------- /projects/custom-qr-code/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/custom-qr-code/font/sans.ttf -------------------------------------------------------------------------------- /projects/custom-qr-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Custom QR Code 10 | 11 | 12 |

Custom QR Code

13 |
14 | 15 | 16 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/custom-qr-code/script.js: -------------------------------------------------------------------------------- 1 | const href = "https://swapnilsparsh.github.io/"; 2 | const size = 250; 3 | 4 | new QRCode(document.querySelector("#qr"), { 5 | text: href, 6 | width: size, 7 | height: size, 8 | 9 | colorDark: "black", 10 | colorLight: "white" 11 | }); 12 | -------------------------------------------------------------------------------- /projects/decimal-to-binary/assests/Binary icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/decimal-to-binary/assests/Binary icon.png -------------------------------------------------------------------------------- /projects/decimal-to-binary/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/decimal-to-binary/font/sans.ttf -------------------------------------------------------------------------------- /projects/decimal-to-binary/script.js: -------------------------------------------------------------------------------- 1 | function convert() { 2 | let to_convert = document.getElementById("to_convert").value; 3 | to_convert = parseFloat(to_convert); 4 | 5 | // Function to convert decimal to binary 6 | function decimalToBinary(number) { 7 | if (number === 0) { 8 | return "0"; 9 | } 10 | let binary = ""; 11 | while (number > 0) { 12 | binary = (number % 2).toString() + binary; 13 | number = Math.floor(number / 2); 14 | } 15 | return binary; 16 | } 17 | 18 | // Convert the number to binary 19 | let binaryResult = decimalToBinary(to_convert); 20 | 21 | // Visualizing results 22 | let final = document.getElementById("res"); 23 | final.value = binaryResult; 24 | } -------------------------------------------------------------------------------- /projects/dice-game/Capture.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-game/Capture.PNG -------------------------------------------------------------------------------- /projects/dice-game/README.md: -------------------------------------------------------------------------------- 1 | "# Dice-game" 2 | -------------------------------------------------------------------------------- /projects/dice-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Dice Game 5 | 6 | 7 |
8 |

Player 1 Turn

9 |
10 |
11 |

Score: 12 | 0 13 |

14 |
-
15 |
16 |
17 |

Score: 18 | 0 19 |

20 |
-
21 |
22 |
23 | 24 | 25 | 26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/dice-roll/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/1.png -------------------------------------------------------------------------------- /projects/dice-roll/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/2.png -------------------------------------------------------------------------------- /projects/dice-roll/assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/3.png -------------------------------------------------------------------------------- /projects/dice-roll/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/4.png -------------------------------------------------------------------------------- /projects/dice-roll/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/5.png -------------------------------------------------------------------------------- /projects/dice-roll/assets/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/6.png -------------------------------------------------------------------------------- /projects/dice-roll/assets/dice-roll.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/dice-roll.gif -------------------------------------------------------------------------------- /projects/dice-roll/assets/dice.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/assets/dice.png -------------------------------------------------------------------------------- /projects/dice-roll/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dice-roll/font/sans.ttf -------------------------------------------------------------------------------- /projects/dice-roll/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Dice Roller 10 | 11 | 12 |
13 |

Dice Roller

14 | 15 |
Shuffle
16 |
17 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/dice-roll/script.js: -------------------------------------------------------------------------------- 1 | function shuffle(){ 2 | const img = document.getElementById("img"); 3 | let random = Math.floor(Math.random() * 6) + 1; 4 | img.setAttribute("src", `assets/${random}.png`); 5 | } 6 | 7 | function anim(){ 8 | setTimeout(shuffle, 500); 9 | const img = document.getElementById("img"); 10 | img.setAttribute("src", "assets/dice-roll.gif"); 11 | } -------------------------------------------------------------------------------- /projects/digital-clock/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/digital-clock/assets/favicon.png -------------------------------------------------------------------------------- /projects/digital-clock/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/digital-clock/font/sans.ttf -------------------------------------------------------------------------------- /projects/digital-clock/script.js: -------------------------------------------------------------------------------- 1 | const hour = document.getElementById("hour"); 2 | const minute = document.getElementById("minute"); 3 | const seconds = document.getElementById("seconds"); 4 | const ampm = document.getElementById("ampm"); 5 | 6 | // Add 0 to the beginning of number if less than 10 7 | function formatTime(time) { 8 | return time.toString().padStart(2, "0"); 9 | } 10 | 11 | function isAmPm(hours) { 12 | return hours >= 12 ? "PM" : "AM"; 13 | } 14 | 15 | function clock() { 16 | const date = new Date(); 17 | 18 | let h = date.getHours(); 19 | let m = date.getMinutes(); 20 | let s = date.getSeconds(); 21 | 22 | hour.textContent = formatTime(h); 23 | minute.textContent = formatTime(m); 24 | seconds.textContent = formatTime(s); 25 | ampm.textContent = isAmPm(h); 26 | } 27 | 28 | setInterval(clock, 1000); 29 | -------------------------------------------------------------------------------- /projects/dot-connect-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dot Connect Four 6 | 7 | 8 | 9 | 10 | 11 | 14 |
15 |
16 |
17 |
18 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /projects/dot-target-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Dot Target game 6 | 7 | 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 | Points: 33 | 34 | 35 | 36 | 0 37 | 38 |
39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /projects/dot-target-game/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dot-target-game/preview.gif -------------------------------------------------------------------------------- /projects/dot-target-game/readme.md: -------------------------------------------------------------------------------- 1 | # Dot Target Game 2 | ## Clisk on the Dots That are Moving to Get The Points 3 | 4 | ![](./preview.gif) -------------------------------------------------------------------------------- /projects/dot-target-game/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | 3 | let totalPoints = 0; 4 | let points = 0; 5 | 6 | $('[class$="-circle"]').on('click', 'span', function(e) { 7 | 8 | e.stopPropagation(); 9 | $(this).parent().hasClass('first-circle') ? points = 10 : ''; 10 | $(this).parent().hasClass('second-circle') ? points = 5 : ''; 11 | $(this).parent().hasClass('third-circle') ? points = 3 : ''; 12 | $(this).parent().hasClass('fourth-circle') ? points = 1 : ''; 13 | totalPoints += points; 14 | showParcial(); 15 | 16 | }); 17 | 18 | function showParcial() { 19 | $('.parcial').text(points); 20 | $('.parcial').fadeIn('fast').fadeOut('slow'); 21 | $('#points').text(totalPoints); 22 | } 23 | 24 | }); -------------------------------------------------------------------------------- /projects/drawing-pad/assets/drawing-pad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drawing-pad/assets/drawing-pad.png -------------------------------------------------------------------------------- /projects/drawing-pad/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drawing-pad/font/sans.ttf -------------------------------------------------------------------------------- /projects/drum-kit/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/assets/favicon.png -------------------------------------------------------------------------------- /projects/drum-kit/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/font/sans.ttf -------------------------------------------------------------------------------- /projects/drum-kit/sounds/boom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/boom.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/clap.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/hihat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/hihat.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/kick.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/kick.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/openhat.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/openhat.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/ride.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/ride.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/snare.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/snare.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/tink.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/tink.wav -------------------------------------------------------------------------------- /projects/drum-kit/sounds/tom.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/drum-kit/sounds/tom.wav -------------------------------------------------------------------------------- /projects/dynamic-form-field/assets/form.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dynamic-form-field/assets/form.png -------------------------------------------------------------------------------- /projects/dynamic-form-field/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/dynamic-form-field/font/sans.ttf -------------------------------------------------------------------------------- /projects/eigen-value-and-vector-calculator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Eigenvalue and Eigenvector Calculator 7 | 8 | 9 | 10 |
11 |

Largest Eigen Value and Eigen Vector Calculator

12 |
13 | 14 | 15 | 18 |
19 |
20 | 23 |
24 |
25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/emoji-switcher/assets/cool.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/emoji-switcher/assets/cool.png -------------------------------------------------------------------------------- /projects/emoji-switcher/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/emoji-switcher/font/sans.ttf -------------------------------------------------------------------------------- /projects/emoji-switcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Emoji Switcher 10 | 11 | 12 |

Emoji Switcher

13 |
14 | 15 |
16 | 17 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /projects/emoji-switcher/script.js: -------------------------------------------------------------------------------- 1 | const btn = document.getElementById('emoji-btn'); 2 | 3 | const emojis = []; 4 | 5 | 6 | const emojiAddFunction = async () => { 7 | 8 | let res = await fetch('https://emoji-api.com/emojis?access_key=1ce9b701f975ba7b63dd065ab1e09f26e3d1e83d') 9 | res = await res.json() 10 | 11 | for(let i=0 ; i { 19 | btn.innerText = emojis[Math.floor(Math.random() * emojis.length)]; 20 | }) 21 | 22 | btn.addEventListener('click', () => { 23 | btn.innerText = emojis[Math.floor(Math.random() * emojis.length)]; 24 | }) 25 | -------------------------------------------------------------------------------- /projects/falling-ball-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Falling Ball Game 7 | 8 | 9 | 10 | 11 |
12 |
13 |
14 |

Use arrows keys to play game

15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /projects/falling-ball-game/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | } 5 | #game { 6 | width: 400px; 7 | height: 500px; 8 | border: 1px solid rgb(28, 121, 67); 9 | margin: auto; 10 | overflow: hidden; 11 | } 12 | #character { 13 | width: 20px; 14 | height: 20px; 15 | background-color: rgba(8, 144, 255, 0.979); 16 | border-radius: 50%; 17 | position: relative; 18 | top: 400px; 19 | left: 190px; 20 | z-index: 1000000; 21 | } 22 | .block { 23 | width: 400px; 24 | height: 20px; 25 | background-color: rgb(70, 65, 65); 26 | position: relative; 27 | top: 100px; 28 | margin-top: -20px; 29 | } 30 | .hole { 31 | width: 40px; 32 | height: 20px; 33 | background-color: white; 34 | position: relative; 35 | top: 100px; 36 | margin-top: -20px; 37 | } -------------------------------------------------------------------------------- /projects/favicon-fetcher/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/favicon-fetcher/assets/favicon.png -------------------------------------------------------------------------------- /projects/favicon-fetcher/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/favicon-fetcher/font/sans.ttf -------------------------------------------------------------------------------- /projects/favicon-fetcher/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Favicon Fetcher 10 | 11 | 12 |

Favicon Fetcher

13 | 14 |
15 | 16 | 20 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /projects/favicon-fetcher/script.js: -------------------------------------------------------------------------------- 1 | const img = document.querySelector('img'); 2 | const input = document.querySelector('input'); 3 | 4 | input.addEventListener('keydown', () =>{ 5 | const favicon = `https://www.google.com/s2/favicons?sz=32&domain_url=${input.value}`; 6 | img.src = favicon; 7 | }) -------------------------------------------------------------------------------- /projects/flappy-bird/assets/Bird.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/flappy-bird/assets/Bird.png -------------------------------------------------------------------------------- /projects/flappy-bird/assets/background-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/flappy-bird/assets/background-img.png -------------------------------------------------------------------------------- /projects/flappy-bird/assets/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/flappy-bird/assets/favicon.ico -------------------------------------------------------------------------------- /projects/flappy-bird/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Flappy Bird 9 | 10 | 11 | 12 | 13 |
14 | bird-img 15 |
16 | Press Any Key to Start Playing 17 |
18 |
19 | 20 | 21 |
22 | 23 | 24 | -------------------------------------------------------------------------------- /projects/getting-started-with-apis/app.js: -------------------------------------------------------------------------------- 1 | const cat_result = document.getElementById("gallery"); 2 | const errorData = document.getElementById("errorBox"); 3 | 4 | 5 | btn_generate.addEventListener("click", function () { 6 | const nums = document.getElementById("inp-box").value; 7 | 8 | errorData.innerHTML = ""; 9 | 10 | if(!nums.match(/^[0-9]+$/)){ 11 | return errorData.innerHTML = "Enter a valid number"; 12 | } 13 | if(parseInt(nums) > 100){ 14 | return errorData.innerHTML = "Number should be less than or equal to 100"; 15 | } 16 | 17 | allimages = ""; 18 | fetch( 19 | `https://api.thecatapi.com/v1/images/search?limit=${nums}&page=10&order=Desc` 20 | ) 21 | .then((res) => res.json()) 22 | .then((res) => { 23 | for (let i = 0; i < nums; i++) { 24 | allimages += ` 25 | cat 26 | `; 27 | } 28 | cat_result.innerHTML = allimages; 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /projects/getting-started-with-apis/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/getting-started-with-apis/assets/favicon.png -------------------------------------------------------------------------------- /projects/getting-started-with-apis/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Getting Started with APIs 10 | 11 | 12 | 13 | 14 |
15 |

Getting Started with APIs

16 | 17 |

Enter the number of kitties

18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 31 | 32 | 33 | 34 | 35 | 36 | -------------------------------------------------------------------------------- /projects/gradient-generator/assests/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/gradient-generator/assests/favicon.png -------------------------------------------------------------------------------- /projects/gradient-generator/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/gradient-generator/font/sans.ttf -------------------------------------------------------------------------------- /projects/gradient-generator/script.js: -------------------------------------------------------------------------------- 1 | let colorOne = document.getElementById('color_one'); 2 | let colorTwo = document.getElementById('color_two'); 3 | let currentdir = "to top"; 4 | let outputcode = document.getElementById('code'); 5 | 6 | function setdirection(value, _this) { 7 | let direction = document.querySelectorAll('.buttons button'); 8 | direction.forEach(e => { 9 | e.classList.remove('active'); 10 | }); 11 | _this.classList.add('active'); 12 | currentdir = value; 13 | } 14 | function generate() { 15 | outputcode.value = `background-image: linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value});`; 16 | document.getElementById('body').style.backgroundImage = `linear-gradient(${currentdir}, ${colorOne.value}, ${colorTwo.value})`; 17 | } 18 | function copy(e) { 19 | e.preventDefault(); 20 | outputcode.select(); 21 | alert("Code copied to clipboard!"); 22 | 23 | } -------------------------------------------------------------------------------- /projects/guess-the-country/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/guess-the-country/assets/favicon.png -------------------------------------------------------------------------------- /projects/hangman-game/images/hangman-0.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /projects/hangman-game/images/lost.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/hangman-game/images/lost.gif -------------------------------------------------------------------------------- /projects/hangman-game/images/victory.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/hangman-game/images/victory.gif -------------------------------------------------------------------------------- /projects/hangman/assets/hangman-game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/hangman/assets/hangman-game.png -------------------------------------------------------------------------------- /projects/hangman/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Hangman 7 | 8 | 9 |
10 |

HANGMAN

11 |

Here's your popular word guessing game
Build a missing word by guessing one letter at a time.
After 5 incorrect guesses, the game ends and the player loses.
Correctly identify all the letters of the missing word to win.

12 |
13 |
14 |

15 | 16 |
17 |
18 | 19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /projects/hangman/scripts/app.js: -------------------------------------------------------------------------------- 1 | let game1 2 | const puzzleDIV = document.querySelector('#puzzle'); 3 | const remainingDIV = document.querySelector('#guesses'); 4 | 5 | window.addEventListener('keypress', (e) => { 6 | 7 | const guess = String.fromCharCode(e.charCode); 8 | game1.makeGuess(guess); 9 | render() 10 | }) 11 | 12 | const render = () => { 13 | puzzleDIV.innerHTML = '' 14 | remainingDIV.textContent = game1.statusMessage; 15 | 16 | game1.puzzle.split('').forEach((letter) => { 17 | const letterEl = document.createElement('span') 18 | letterEl.textContent = letter 19 | puzzleDIV.appendChild(letterEl) 20 | }) 21 | } 22 | 23 | const startGame = async () => { 24 | const puzzle = await getPuzzle('3') 25 | game1 = new Hangman(puzzle, 5) 26 | render() 27 | } 28 | 29 | document.querySelector('#reset').addEventListener('click', startGame) 30 | startGame() -------------------------------------------------------------------------------- /projects/hangman/scripts/request.js: -------------------------------------------------------------------------------- 1 | const getPuzzle = async (wordCount) => { 2 | const response = await fetch(`https://puzzle.mead.io/puzzle?wordCount=${wordCount}`) 3 | if (response.status === 200){ 4 | const data = await response.json() 5 | return data.puzzle 6 | } else { 7 | throw new Error('Unable to fetch puzzle') 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /projects/image-utility/images/demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/demo1.png -------------------------------------------------------------------------------- /projects/image-utility/images/demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/demo2.png -------------------------------------------------------------------------------- /projects/image-utility/images/edited.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/edited.png -------------------------------------------------------------------------------- /projects/image-utility/images/img-placeholder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/img-placeholder.png -------------------------------------------------------------------------------- /projects/image-utility/images/ld-mode.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /projects/image-utility/images/left.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/image-utility/images/original.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/original.jpg -------------------------------------------------------------------------------- /projects/image-utility/images/preloader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/preloader.gif -------------------------------------------------------------------------------- /projects/image-utility/images/right.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /projects/image-utility/images/yt.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/image-utility/images/yt.png -------------------------------------------------------------------------------- /projects/insect-catching-game/Readme.md: -------------------------------------------------------------------------------- 1 | # Insect-Catching Game 2 | 3 | ## A well-designed interesting game where you can play with your favourite insect and catch it to get the most scores. 4 | ![1](https://user-images.githubusercontent.com/73993775/167461684-2310bb36-38e0-4f7a-8253-49ddd9aa4e8f.png)

5 | ![2](https://user-images.githubusercontent.com/73993775/167461690-30ae208d-ecb7-45d1-b54f-56f17a68889c.png) 6 | # Let we selected Fly :-- 7 | ![3](https://user-images.githubusercontent.com/73993775/167461696-714d0af5-a408-4b0a-b3ca-fbf0302ad2c8.png) 8 | 9 | 10 |

11 | -------------------------------------------------------------------------------- /projects/joke-generator/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/joke-generator/.DS_Store -------------------------------------------------------------------------------- /projects/joke-generator/assets/joke.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/joke-generator/assets/joke.png -------------------------------------------------------------------------------- /projects/joke-generator/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/joke-generator/font/sans.ttf -------------------------------------------------------------------------------- /projects/joke-generator/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Joke Generator 10 | 11 | 12 | 13 |

Joke Generator 😂

14 |
15 |

16 | 17 |
18 | 19 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/joke-generator/script.js: -------------------------------------------------------------------------------- 1 | const jokeContainer = document.getElementById('jokeContainer'); 2 | const getJokeBtn = document.getElementById('getJokeBtn'); 3 | 4 | const API_URL = `https://v2.jokeapi.dev/joke/Any?type=single`; 5 | 6 | getJoke(); 7 | 8 | async function getJoke() { 9 | const res = await fetch(API_URL); 10 | const data = await res.json(); 11 | 12 | jokeContainer.innerHTML = data.joke; 13 | } 14 | 15 | getJokeBtn.addEventListener('click', getJoke); -------------------------------------------------------------------------------- /projects/key-code/assets/Keycode.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/key-code/assets/Keycode.png -------------------------------------------------------------------------------- /projects/key-code/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/key-code/font/sans.ttf -------------------------------------------------------------------------------- /projects/key-code/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | KeyCodes 10 | 11 | 12 | 13 |

Event Keycodes

14 |
15 |
16 | Press any key to get the keyCode 17 |
18 |
19 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /projects/key-code/script.js: -------------------------------------------------------------------------------- 1 | const insert = document.getElementById("insert"); 2 | 3 | window.addEventListener("keydown", (event) => { 4 | insert.innerHTML = ` 5 |
6 | ${event.key === " " ? "Space" : event.key} 7 | event.key 8 |
9 |
10 | ${event.keyCode} 11 | event.keyCode 12 |
13 |
14 | ${event.code} 15 | event.code 16 |
17 | `; 18 | }); 19 | -------------------------------------------------------------------------------- /projects/levitate-board/assets/levitation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/levitate-board/assets/levitation.png -------------------------------------------------------------------------------- /projects/levitate-board/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/levitate-board/font/sans.ttf -------------------------------------------------------------------------------- /projects/levitate-board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Levitate Board 10 | 11 | 12 |

Levitate Board

13 |
14 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /projects/levitate-board/script.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container'); 2 | const colors = ['#e74c3c', '#8e44ad', '#3498db', '#e67e22', '#2ecc71','#f2e335', '#ef4a92'] 3 | const SQUARES_NR = 300; 4 | 5 | for(let i=0; i { 10 | setColorToEl(square); 11 | }); 12 | 13 | square.addEventListener('mouseout', () => { 14 | removeColorFromEl(square); 15 | }); 16 | 17 | square.addEventListener('click', () => { 18 | setColorToEl(square); 19 | }); 20 | 21 | container.appendChild(square); 22 | } 23 | 24 | function setColorToEl(element) { 25 | const color = getRandomColor(); 26 | element.style.background = color; 27 | element.style.boxShadow = `0 0 2px ${color}, 0 0 10px ${color}`; 28 | } 29 | 30 | function removeColorFromEl(element) { 31 | element.style.background = '#19172e'; 32 | element.style.boxShadow = `0 0 2px #ffffff`; 33 | } 34 | 35 | function getRandomColor() { 36 | return colors[Math.floor(Math.random() * colors.length)]; 37 | } -------------------------------------------------------------------------------- /projects/lights-out/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Lights Out 7 | 8 | 9 | 10 |

Lights Out

11 |
12 |
13 | 14 | 15 |
16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /projects/luminosity-particle-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /projects/luminosity-particle-js/style.css: -------------------------------------------------------------------------------- 1 | body, html { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | background: #000; 8 | overflow: hidden; 9 | } -------------------------------------------------------------------------------- /projects/mancala-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Mancala 6 | 7 | 8 | 9 |

Mancala

10 |
11 |
12 |
Welcome to Mancala
13 | 14 | 15 | -------------------------------------------------------------------------------- /projects/match-three/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Match-3 Game 7 | 8 | 9 | 10 | 11 |

Match-3 Game

12 |
Level: 0
13 |
14 |
15 |
Score: 0
16 |
Moves Left: 0
17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /projects/math-game/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/math-game/preview.gif -------------------------------------------------------------------------------- /projects/math-game/readme.md: -------------------------------------------------------------------------------- 1 | # Math Game 2 | - Try To Answer as many Calculation Possible. 3 | 4 | ![](./preview.gif) 5 | -------------------------------------------------------------------------------- /projects/math-game/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #fff; 3 | background-size: 8px 8px, 8px 8px; 4 | background-position: center, center; 5 | background-image: linear-gradient(#ebf4f9 1px, transparent 1px),linear-gradient(90deg, #ebf4f9 1px, transparent 1px); 6 | } 7 | 8 | .game { 9 | margin: 3em auto; 10 | padding: 0 10px; 11 | max-width: 400px; 12 | } 13 | 14 | .timer { 15 | width: 100px; 16 | text-align: center; 17 | margin: 0 auto; 18 | } -------------------------------------------------------------------------------- /projects/maths-addition/README.md: -------------------------------------------------------------------------------- 1 | # math-addition-app-project 2 | -------------------------------------------------------------------------------- /projects/maths-addition/app.js: -------------------------------------------------------------------------------- 1 | //generate random numbers 2 | let firstNumber = parseInt(Math.random() * 10); 3 | let secondNumber = parseInt(Math.random() * 10); 4 | 5 | //get the total 6 | let total = firstNumber + secondNumber; 7 | 8 | //display numbers on the canvas 9 | let primary = document.getElementById('primary-number'); 10 | primary.innerHTML = `

${firstNumber}

`; 11 | 12 | let secondary = document.getElementById('secondary-number'); 13 | secondary.innerHTML = `

${secondNumber}

` 14 | 15 | 16 | //get guess from user 17 | let button = document.getElementById('btn') 18 | 19 | button.addEventListener('click', function () { 20 | 21 | let guess = document.getElementById('guess').value; 22 | guess = Number(guess); 23 | if(guess==" ") 24 | { 25 | alert("please enter the value") 26 | } 27 | 28 | //check answer 29 | else if(guess === total) { 30 | alert('Correct'); 31 | window.location.reload() 32 | } else { 33 | alert('Sorry. Incorrect. The correct answer was ' + total + '.') 34 | window.location.reload() 35 | 36 | } 37 | }); -------------------------------------------------------------------------------- /projects/maths-addition/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Maths Addition 10 | 11 | 12 | 13 |
14 |
7
15 | 16 |
+
17 |
10
18 |
=
19 |
20 | 21 |
22 |
23 | 24 |
25 |
26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/maze-game/GameScreenShot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/maze-game/GameScreenShot.png -------------------------------------------------------------------------------- /projects/maze-game/cheese.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/maze-game/cheese.png -------------------------------------------------------------------------------- /projects/maze-game/jerry.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/maze-game/jerry.png -------------------------------------------------------------------------------- /projects/memory-matching-game/assets/memory.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/memory-matching-game/assets/memory.png -------------------------------------------------------------------------------- /projects/memory-matching-game/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/memory-matching-game/font/sans.ttf -------------------------------------------------------------------------------- /projects/memory-matching-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Memory Matching Game 11 | 12 | 13 |

Memory Matching Game

14 |
15 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /projects/minesweeper-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Minesweeper game 8 | 9 | 10 | 11 | 12 |
13 |

Minesweeper game

14 |
15 |
16 |
Bomb left:
17 |
18 |
19 | 20 |
21 | 22 | -------------------------------------------------------------------------------- /projects/minesweeper/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Minesweeper 8 | 9 | 10 | 11 |
19 |

Minesweeper Game

20 |
Points: 0
21 |
22 | 23 |
24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/minesweeper/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | margin: 0; 7 | } 8 | 9 | #board { 10 | display: grid; 11 | gap: 2px; 12 | grid-template-columns: repeat(10, 30px); 13 | border: 1px solid #ccc; 14 | } 15 | 16 | .cell { 17 | width: 30px; 18 | height: 30px; 19 | background-color: #ddd; 20 | display: flex; 21 | justify-content: center; 22 | align-items: center; 23 | cursor: pointer; 24 | font-weight: bold; 25 | font-size: 14px; 26 | user-select: none; 27 | } 28 | 29 | .cell:hover { 30 | background-color: #eee; 31 | } 32 | 33 | .mine { 34 | background-color: #f00; 35 | color: #fff; 36 | } 37 | 38 | #resetButton { 39 | margin-top: 20px; 40 | padding: 10px 20px; 41 | font-size: 16px; 42 | cursor: pointer; 43 | border: none; 44 | border-radius: 6px; 45 | background-color: #007bff; 46 | color: #fff; 47 | } 48 | -------------------------------------------------------------------------------- /projects/movie-guessing-game/readme.md: -------------------------------------------------------------------------------- 1 | # **Movie_Guessing_Game** 2 | 3 | --- 4 | 5 |
6 | 7 | ## **Description 📃** 8 | This is a game based on guessing. A user will have to guess the movie name by carefully observing the emojis which 9 | corresponds to a particular movie. 10 | - 11 | 12 | ## **functionalities 🎮** 13 | The user will have different letters by which he can guess the movie's name. 14 | Fully responsive. 15 | 16 | - 17 |
18 | 19 | ## **How to play? 🕹️** 20 | The user has to simply press the letters which forms a movie's name and if he guesses it correctly then he will win the game and if not so then he will lose the game. 21 | - 22 | 23 |
24 | 25 | ## **Screenshots 📸** 26 | 27 |
28 | 29 | ![image](../../assets/images/Movie_Guessing_Game.png) 30 | 31 |
32 | 33 | ## **Working video 📹** 34 | -------------------------------------------------------------------------------- /projects/movie-search-app/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/movie-search-app/favicon.png -------------------------------------------------------------------------------- /projects/movie-search-app/images/no-image-available.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/movie-search-app/images/no-image-available.png -------------------------------------------------------------------------------- /projects/movie-search-app/images/nothing-to-show.avif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/movie-search-app/images/nothing-to-show.avif -------------------------------------------------------------------------------- /projects/movie-search-app/images/sc1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/movie-search-app/images/sc1.png -------------------------------------------------------------------------------- /projects/movie-search-app/images/sc2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/movie-search-app/images/sc2.png -------------------------------------------------------------------------------- /projects/movie-search-app/images/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/movie-search-app/images/search.png -------------------------------------------------------------------------------- /projects/movie-tv-series-quote-generator/script.js: -------------------------------------------------------------------------------- 1 | const getNextQuote = async() => 2 | { 3 | var url = "https://raw.githubusercontent.com/msramalho/json-tv-quotes/master/quotes.json"; 4 | const response = await fetch(url); 5 | const totalQuotes = await response.json(); 6 | const index = Math.floor(Math.random()*totalQuotes.length); 7 | const quo=totalQuotes[index].quote; 8 | const auth=totalQuotes[index].author; 9 | const sour=totalQuotes[index].source; 10 | quote.innerHTML=""+quo; 11 | author.innerHTML="~ "+auth; 12 | source.innerHTML=""+sour; 13 | tweet.href="https://twitter.com/intent/tweet?text="+quo+" ~ "+auth+" | "+sour; 14 | whatsapp.href="whatsapp://send?text="+quo+" ~ "+auth+" | "+sour; 15 | } 16 | 17 | getNextQuote(); 18 | -------------------------------------------------------------------------------- /projects/multiply-math-game/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

5 |

Math Game

6 | 7 |
8 | Math Game is a game made through HTML,CSS and JAVASCRIPT 9 |
10 | 11 |
12 | 13 |
14 | 15 | 16 | Standard 18 | 19 |
20 | 21 | ## ⚡️ Introduction 22 | It is Math Quiz game where you have to select the correct ans from four options 23 | 24 | 25 | ## 📷 Screenshots 26 | 27 | ![ss1](./img/mathss(.1).png) 28 | ![ss2](./img/mathss(.2).png) 29 | 30 | 31 | -------------------------------------------------------------------------------- /projects/multiply-math-game/img/add-readme.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/multiply-math-game/img/add-readme.png -------------------------------------------------------------------------------- /projects/multiply-math-game/img/mathss(.1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/multiply-math-game/img/mathss(.1).png -------------------------------------------------------------------------------- /projects/multiply-math-game/img/mathss(.2).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/multiply-math-game/img/mathss(.2).png -------------------------------------------------------------------------------- /projects/music-player/Music/Alone.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/Music/Alone.mp3 -------------------------------------------------------------------------------- /projects/music-player/Music/Peaches.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/Music/Peaches.mp3 -------------------------------------------------------------------------------- /projects/music-player/Music/Sugar.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/Music/Sugar.mp3 -------------------------------------------------------------------------------- /projects/music-player/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/font/sans.ttf -------------------------------------------------------------------------------- /projects/music-player/images/Alone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/images/Alone.jpg -------------------------------------------------------------------------------- /projects/music-player/images/Peaches.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/images/Peaches.jpg -------------------------------------------------------------------------------- /projects/music-player/images/Sugar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/images/Sugar.jpg -------------------------------------------------------------------------------- /projects/music-player/images/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/music-player/images/favicon.png -------------------------------------------------------------------------------- /projects/n-queen-visualizer/N Queens: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/n-queen-visualizer/Nqueen.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/n-queen-visualizer/Nqueen.zip -------------------------------------------------------------------------------- /projects/n-queen-visualizer/README.md: -------------------------------------------------------------------------------- 1 | # N-Queen Visualiser 2 | 3 | - The N-Queens puzzle is the problem of placing N chess queens on an N×N chessboard so that no two queens threaten each other. Thus, a solution requires that no two queens share the same row, column, or diagonal. 4 | 5 | - This algorithm is designed using recursion. 6 | 7 | ![N-Queen-visualisation](visualisation.gif) 8 | 9 | **

You can find the website live here

** 10 | -------------------------------------------------------------------------------- /projects/n-queen-visualizer/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "N-queens-visualiser", 3 | "lockfileVersion": 2, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /projects/n-queen-visualizer/visualisation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/n-queen-visualizer/visualisation.gif -------------------------------------------------------------------------------- /projects/notes-taking-app/assets/deleteIcon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/notes-taking-app/assets/deleteIcon.png -------------------------------------------------------------------------------- /projects/notes-taking-app/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/notes-taking-app/assets/favicon.png -------------------------------------------------------------------------------- /projects/number-counter/assets/number.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/number-counter/assets/number.png -------------------------------------------------------------------------------- /projects/number-counter/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/number-counter/font/sans.ttf -------------------------------------------------------------------------------- /projects/number-counter/script.js: -------------------------------------------------------------------------------- 1 | const counter = document.getElementById('counter'); 2 | const increase = document.querySelector('.increase'); 3 | const decrease = document.querySelector('.decrease'); 4 | const reset = document.querySelector('.btn-reset'); 5 | const save = document.querySelector('.btn-save'); 6 | 7 | let count = 0; 8 | increase.addEventListener('click', () => { 9 | count++; 10 | counter.innerHTML = count; 11 | }); 12 | 13 | decrease.addEventListener('click', () => { 14 | count--; 15 | counter.innerHTML = count; 16 | }); 17 | reset.addEventListener('click', () => { 18 | count = 0; 19 | counter.innerHTML = count; 20 | }); 21 | save.addEventListener('click', () => { 22 | const number = document.querySelector('.number'); 23 | const num = document.createElement('div'); 24 | num.setAttribute('class', 'num'); 25 | num.innerHTML = count; 26 | number.appendChild(num); 27 | }); 28 | 29 | 30 | -------------------------------------------------------------------------------- /projects/number-facts/app.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector('form'); 2 | const factDiv = document.querySelector('.number-fact'); 3 | 4 | form.addEventListener('submit', (e) => { 5 | e.preventDefault(); 6 | const loadText ="wait a little bit ⌛"; 7 | factDiv.innerHTML = loadText; 8 | const baseURL = "http://numbersapi.com/"; 9 | const number = e.target.querySelector('input[type="number"]').value; 10 | fetch(baseURL + number,{ 11 | headers:{ 12 | 'x-requested-with': 'text/plain' 13 | }}) 14 | .then(response => response.text()) 15 | .then(text => factDiv.innerHTML = text) 16 | .catch(e=>console.log(e)); 17 | }) 18 | -------------------------------------------------------------------------------- /projects/number-facts/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Number Facts 7 | 8 | 9 | 10 |
11 |
12 |
13 | 14 | 15 |
16 |
Enter a number here to know some interesting info 😎 .
17 |
18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /projects/number-facts/readme: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /projects/number-facts/ss1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/number-facts/ss1.png -------------------------------------------------------------------------------- /projects/number-facts/ss2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/number-facts/ss2.png -------------------------------------------------------------------------------- /projects/particle-effect-animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Particle Effect Animation 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/particle-effect-animation/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0%; 3 | margin: 0%; 4 | box-sizing: border-box; 5 | } 6 | 7 | #canva { 8 | position: absolute; 9 | top: 0%; 10 | left: 0%; 11 | width: 100%; 12 | height: 100%; 13 | background: linear-gradient(to right,#553D67,#242582); 14 | } -------------------------------------------------------------------------------- /projects/ping-pong-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Ping Pong Game 8 | 9 | 10 | 11 | 12 |
13 |
Rod 1
14 |
15 |
Rod 2
16 |
17 | 18 |
19 |

RULES!!

20 |

- Press D or d to move right.

21 |

- Press A or a to move left.

22 |

- The rod with maximum         score wins the game.

23 |

- Press ENTER to start.

24 |
25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /projects/pixsort-studio/style.css: -------------------------------------------------------------------------------- 1 | ::after, 2 | ::before { 3 | -webkit-box-sizing: inherit; 4 | box-sizing: inherit; 5 | } 6 | 7 | .custom-file-control::after { 8 | content: "Choose image..."; 9 | } 10 | 11 | .custom-file-control::before { 12 | content: "Browse"; 13 | } 14 | 15 | .custom-file-control::before { 16 | position: absolute; 17 | top: -1px; 18 | right: -1px; 19 | bottom: -1px; 20 | z-index: 6; 21 | display: block; 22 | height: 2.5rem; 23 | padding: .5rem 1rem; 24 | line-height: 1.5; 25 | color: #464a4c; 26 | background-color: #eceeef; 27 | border: 1px solid rgba(0, 0, 0, .15); 28 | border-radius: 0 .25rem .25rem 0; 29 | } -------------------------------------------------------------------------------- /projects/pomodoro-clock/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #EAC289; 3 | font-family: Consolas; 4 | } 5 | 6 | .base { 7 | background: rgba(0, 0, 0, 0.7); 8 | border-radius: 5px; 9 | box-shadow: rgba(0, 0, 0, 0.4) 0px 19px 38px, rgba(0, 0, 0, 0.22) 0px 15px 12px; 10 | margin-top: auto !important; 11 | } 12 | 13 | .controller { 14 | border-top: 2px dotted gray; 15 | border-bottom: 2px dotted gray; 16 | } -------------------------------------------------------------------------------- /projects/pop-balloons/assets/Balloon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/pop-balloons/assets/Balloon.png -------------------------------------------------------------------------------- /projects/pop-balloons/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/pop-balloons/font/sans.ttf -------------------------------------------------------------------------------- /projects/pop-balloons/script.js: -------------------------------------------------------------------------------- 1 | let popped = 0; 2 | 3 | document.addEventListener('mouseover', function (e) { 4 | 5 | if (e.target.className === "balloon") { 6 | 7 | e.target.style.backgroundColor = "#19172e"; 8 | e.target.textContent = "🎈"; 9 | e.target.classList.add('popped') 10 | popped++; 11 | checkAllPopped(); 12 | } 13 | }); 14 | 15 | function checkAllPopped() { 16 | if (popped === 10) { 17 | console.log('all popped!'); 18 | let gallery = document.querySelector('#balloon-gallery'); 19 | let message = document.querySelector('#yay-no-balloons'); 20 | gallery.innerHTML = ''; 21 | message.style.display = 'block'; 22 | } 23 | }; -------------------------------------------------------------------------------- /projects/postmaster-clone/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/postmaster-clone/logo.png -------------------------------------------------------------------------------- /projects/projectile-motion-simulator/README.md: -------------------------------------------------------------------------------- 1 | # Projectile-Motion-Simulator 2 | Simple simulator to projectile motion; 3 | 4 | ## Website Link 5 | https://projectile-motion-simulator.netlify.app/ 6 | -------------------------------------------------------------------------------- /projects/projectile-motion-simulator/pms.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/projectile-motion-simulator/pms.png -------------------------------------------------------------------------------- /projects/quiz-app/css/result.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #f5f5f5; 3 | font-family: 'Roboto', sans-serif; 4 | color: #1d1d1f; 5 | } 6 | 7 | section{ 8 | width: 100%; 9 | height: 100vh; 10 | display: flex; 11 | align-items: center; 12 | justify-content: center; 13 | } 14 | 15 | section div{ 16 | background-color: #fff; 17 | border-radius: 28px; 18 | border: 1px solid hsla(0,0%,51.4%,.16); 19 | padding: 20px; 20 | width: 200px; 21 | height: 200px; 22 | display: flex; 23 | flex-direction: column; 24 | justify-content: center; 25 | align-items: center; 26 | text-align: center; 27 | } 28 | 29 | section div h1{ 30 | display: contents; 31 | } -------------------------------------------------------------------------------- /projects/quiz-app/css/styles.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #f5f5f5; 3 | font-family: 'Roboto', sans-serif; 4 | color: #1d1d1f; 5 | } 6 | 7 | section{ 8 | width: 100%; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | } 14 | 15 | section div{ 16 | background-color: #fff; 17 | border-radius: 28px; 18 | border: 1px solid hsla(0,0%,51.4%,.16); 19 | text-align: center; 20 | padding: 20px; 21 | } 22 | 23 | section div h1{ 24 | margin-bottom: 20px; 25 | font-weight: bold; 26 | } 27 | 28 | .select-quiz{ 29 | margin-right: 10px; 30 | } -------------------------------------------------------------------------------- /projects/quiz-app/javaScript/index.js: -------------------------------------------------------------------------------- 1 | let id = (id)=> document.getElementById(id); 2 | let classes = (classes)=> document.getElementsByClassName(classes); 3 | 4 | let quizSelected = classes("select-quiz"); 5 | 6 | for(let i=0; i{ 8 | // redirecting to next page with parameter 9 | window.location = `quiz.html?quiz=${quizSelected[i].value}` 10 | }); 11 | } -------------------------------------------------------------------------------- /projects/quiz-app/javaScript/result.js: -------------------------------------------------------------------------------- 1 | let id = (id) => document.getElementById(id); 2 | let classes = (classes) => document.getElementsByClassName(classes); 3 | 4 | window.addEventListener('load', () => { 5 | let questionAnswersGiven = sessionStorage.getItem("questionanswersGiven"); 6 | id("result").innerHTML = `${questionAnswersGiven}/5`; 7 | if(questionAnswersGiven<=2){ 8 | id("feedback").innerHTML = "UGH!! you need improvement"; 9 | }else if(questionAnswersGiven == 3){ 10 | id("feedback").innerHTML = "You are almost there try again"; 11 | }else{ 12 | id("feedback").innerHTML = "Congratulations You made it"; 13 | 14 | } 15 | }); -------------------------------------------------------------------------------- /projects/quiz-app/result.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | Quiz App 12 | 13 | 14 | 15 |
16 |
17 |

Result:

18 |

19 |

20 |
21 |
22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /projects/random-color-generator/assets/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/random-color-generator/assets/wheel.png -------------------------------------------------------------------------------- /projects/random-color-generator/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/random-color-generator/font/sans.ttf -------------------------------------------------------------------------------- /projects/random-password-generator/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/random-password-generator/assets/favicon.png -------------------------------------------------------------------------------- /projects/random-password-generator/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/random-password-generator/font/sans.ttf -------------------------------------------------------------------------------- /projects/reaction-time/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/reaction-time/favicon.png -------------------------------------------------------------------------------- /projects/reaction-time/images/sc1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/reaction-time/images/sc1.png -------------------------------------------------------------------------------- /projects/reaction-time/images/sc2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/reaction-time/images/sc2.png -------------------------------------------------------------------------------- /projects/retro-mario-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Retro Mario Game 8 | 9 | 10 | 11 | 12 | 13 |

Retro Mario Game

14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /projects/retro-mario-game/readme.md: -------------------------------------------------------------------------------- 1 | ## Retro Mario Game 2 | 3 | - Use Arrow key to move Blue Block. 4 | - Avoid the Red Lava and take All the Yellow Points. 5 | -------------------------------------------------------------------------------- /projects/retro-mario-game/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #222; 3 | } 4 | 5 | h2 { 6 | color: #666; 7 | font-family: monospace; 8 | text-align: center; 9 | } 10 | 11 | .background { 12 | table-layout: fixed; 13 | border-spacing: 0; 14 | } 15 | 16 | .background td { 17 | padding: 0; 18 | } 19 | 20 | .lava, .actor { 21 | background: #e55; 22 | } 23 | 24 | .wall { 25 | background: #444; 26 | border: solid 3px #333; 27 | box-sizing: content-box; 28 | } 29 | 30 | .actor { 31 | position: absolute; 32 | } 33 | 34 | .coin { 35 | background: #e2e838; 36 | border-radius: 50%; 37 | } 38 | 39 | .player { 40 | background: #335699; 41 | box-shadow: none; 42 | } 43 | 44 | .lost .player { 45 | background: #a04040; 46 | } 47 | 48 | .won .player { 49 | background: green; 50 | } 51 | 52 | .game { 53 | position: relative; 54 | overflow: hidden; 55 | } -------------------------------------------------------------------------------- /projects/reverse-memory-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Reverse Memory Game 7 | 8 | 9 | 10 |
11 |

Reverse Memory Game

12 |
13 | 14 | 20 | 21 |
22 |
23 | 24 |
25 |

26 |
27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /projects/rps-game/assets/images1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/rps-game/assets/images1.jpg -------------------------------------------------------------------------------- /projects/rps-game/assets/images2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/rps-game/assets/images2.jpg -------------------------------------------------------------------------------- /projects/rps-game/assets/images3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/rps-game/assets/images3.jpg -------------------------------------------------------------------------------- /projects/rps-game/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/rps-game/font/sans.ttf -------------------------------------------------------------------------------- /projects/rps-game/fonts/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/rps-game/fonts/sans.ttf -------------------------------------------------------------------------------- /projects/search-github-profile/Readme.md: -------------------------------------------------------------------------------- 1 | # SEARCH GITHUB PROFILE 2 | This template can be used in any website for the user to search the Github Profile/User to see the 3 | 1. Profile Image 4 | 2. Username 5 | 3. Followers 6 | 4. Following 7 | 5. Repositories - (max upto 6 repositories will be seen) 8 | 9 | ## Issue Fixed: 10 | A person with no knowledge of github can now search for a user and see his/her profile. 11 | 12 | ## Tech-Stack Used: 13 | 1. HTML5 14 | 2. CSS, SCSS 15 | 3. JavaScript 16 | 17 | 18 | Suggestions on improving the template are welcomed! 19 | -------------------------------------------------------------------------------- /projects/search-github-profile/images/github_logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/search-github-profile/images/github_logo.png -------------------------------------------------------------------------------- /projects/search-github-profile/images/wokingimage1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/search-github-profile/images/wokingimage1.png -------------------------------------------------------------------------------- /projects/search-github-profile/images/workingimage2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/search-github-profile/images/workingimage2.png -------------------------------------------------------------------------------- /projects/shell-game/README.MD: -------------------------------------------------------------------------------- 1 | 2 | # Shell Game 3 | 4 | A ball is hidden in three bowls(circles), we need to find where the ball is!!. It's simple game using HTML, CSS, JavaScript. 5 | 6 | When the user finds the ball, it shows the winner prompt and click shuffel for new game. 7 | 8 | -------------------------------------------------------------------------------- /projects/shell-game/bowl.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/shell-game/bowl.png -------------------------------------------------------------------------------- /projects/shell-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Shell Game 7 | 8 | 9 | 10 |

Shell Game

11 |
Find the ball
12 |
13 |

Bowl1 bowl

14 |

Bowl2 bowl

15 |

Bowl3 bowl

16 |
17 |
18 | 19 | 20 |

21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /projects/simon-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Simon Game 6 | 7 | 11 | 12 | 13 | 14 |

Press any key to Start

15 |

16 |
17 |
18 |
19 | 20 |
21 |
22 | 23 |
24 |
25 |
26 |
27 |
28 | 29 | 30 | 31 | 32 | 33 | -------------------------------------------------------------------------------- /projects/simon-game/sounds/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/simon-game/sounds/blue.mp3 -------------------------------------------------------------------------------- /projects/simon-game/sounds/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/simon-game/sounds/green.mp3 -------------------------------------------------------------------------------- /projects/simon-game/sounds/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/simon-game/sounds/red.mp3 -------------------------------------------------------------------------------- /projects/simon-game/sounds/wrong.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/simon-game/sounds/wrong.mp3 -------------------------------------------------------------------------------- /projects/simon-game/sounds/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/simon-game/sounds/yellow.mp3 -------------------------------------------------------------------------------- /projects/simon-game/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | text-align: center; 3 | background-color: #317dcf; 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 | h2{ 14 | font-family: "Press Start 2P", cursive; 15 | font-size: 1.5rem; 16 | color: #fef2bf; 17 | } 18 | 19 | .container { 20 | display: block; 21 | width: 50%; 22 | margin: auto; 23 | } 24 | 25 | .btn { 26 | margin: 25px; 27 | display: inline-block; 28 | height: 200px; 29 | width: 200px; 30 | border: 10px solid black; 31 | border-radius: 10%; 32 | } 33 | 34 | .game-over { 35 | background-color: red; 36 | opacity: 0.8; 37 | } 38 | 39 | .red { 40 | background-color: red; 41 | } 42 | 43 | .green { 44 | background-color: green; 45 | } 46 | 47 | .blue { 48 | background-color: blue; 49 | } 50 | 51 | .yellow { 52 | background-color: yellow; 53 | } 54 | 55 | .pressed { 56 | box-shadow: 0 0 20px white; 57 | background-color: grey; 58 | } 59 | -------------------------------------------------------------------------------- /projects/simple-form-validation/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/simple-form-validation/assets/favicon.png -------------------------------------------------------------------------------- /projects/snake-game/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/snake-game/assets/favicon.png -------------------------------------------------------------------------------- /projects/snake-game/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/snake-game/font/sans.ttf -------------------------------------------------------------------------------- /projects/snowy-particle-js/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Snowy Particles 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /projects/snowy-particle-js/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | height: 100%; 4 | } 5 | 6 | canvas { 7 | position: absolute; 8 | top: 0; 9 | left: 0; 10 | background-image: linear-gradient(bottom, rgb(105, 173, 212) 0%, rgb(23, 82, 145) 84%); 11 | background-image: -o-linear-gradient(bottom, rgb(105, 173, 212) 0%, rgb(23, 82, 145) 84%); 12 | background-image: -moz-linear-gradient(bottom, rgb(105, 173, 212) 0%, rgb(23, 82, 145) 84%); 13 | background-image: -webkit-linear-gradient(bottom, rgb(105, 173, 212) 0%, rgb(23, 82, 145) 84%); 14 | background-image: -ms-linear-gradient(bottom, rgb(105, 173, 212) 0%, rgb(23, 82, 145) 84%); 15 | 16 | background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(105, 173, 212)), color-stop(0.84, rgb(23, 82, 145))); 17 | } -------------------------------------------------------------------------------- /projects/sorting-visualizer/README.md: -------------------------------------------------------------------------------- 1 | # Sorting Visualizer 2 | [Visit Website](https://jinx-vi-0.github.io/Sorting-Visualizer/) 3 | 4 | Welcome to Sorting Visualizer, a powerful tool for visualizing various sorting algorithms in action! This web application is designed to help you better understand how different sorting algorithms work by providing real-time visualizations of the sorting process. Whether you're a student learning about sorting algorithms or a curious mind interested in exploring the magic of sorting, Sorting Visualizer has you covered. 5 | 6 | ### Visualization of Sorting Algorithms 7 | Sorting Visualizer provides visualizations for a range of sorting algorithms, including: 8 | 9 | - Bubble Sort 10 | - Selection Sort 11 | - Insertion Sort 12 | - Merge Sort 13 | - Quick Sort 14 | 15 | Each algorithm's visualization showcases the step-by-step sorting process, highlighting how elements are compared, swapped, and moved to their final positions. 16 | 17 | Happy❤️ sorting and visualizing! 18 | -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/spin-the-wheel-game/button.png -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Weiben - Wheel of fortune 5 | 6 | 7 | 8 | 9 | 10 |

Spin the wheel🎡

11 |
12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/marker.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/spin-the-wheel-game/marker.png -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/readme.md: -------------------------------------------------------------------------------- 1 | # Spin Wheel Game🎡 2 | > It's a Spin Wheel Game made using HTML,CSS,JS , The Code is responsive and here after clicking the start button a random options will be selected by indicator after few moments of rotating. 3 | 4 | ## Tech Stack: 5 | **HTML,CSS,JAVASCRIPT** 6 | ## Screenshot: 7 | 8 | 9 | ![image](https://user-images.githubusercontent.com/77873383/167259688-22b05c9a-10bf-4547-a7f6-90af9d70ef5d.png) 10 | 11 | ## Demo: 12 | 13 | 14 | 15 | 16 | https://user-images.githubusercontent.com/77873383/167259701-b3aa55b1-c77e-4be0-9150-713357053c85.mp4 17 | 18 | -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/script.js: -------------------------------------------------------------------------------- 1 | 2 | (function() { 3 | const wheel = document.querySelector('.wheel'); 4 | const startButton = document.querySelector('.button'); 5 | let deg = 0; 6 | 7 | startButton.addEventListener('click', () => { 8 | 9 | startButton.style.pointerEvents = 'none'; 10 | 11 | deg = Math.floor(5000 + Math.random() * 5000); 12 | 13 | wheel.style.transition = 'all 10s ease-out'; 14 | 15 | wheel.style.transform = `rotate(${deg}deg)`; 16 | 17 | wheel.classList.add('blur'); 18 | }); 19 | 20 | wheel.addEventListener('transitionend', () => { 21 | 22 | wheel.classList.remove('blur'); 23 | 24 | startButton.style.pointerEvents = 'auto'; 25 | 26 | wheel.style.transition = 'none'; 27 | 28 | const actualDeg = deg % 360; 29 | 30 | wheel.style.transform = `rotate(${actualDeg}deg)`; 31 | }); 32 | })(); 33 | -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/styles.css: -------------------------------------------------------------------------------- 1 | #app { 2 | width: 400px; 3 | height: 400px; 4 | margin: 0 auto; 5 | position: relative; 6 | } 7 | body{ 8 | background-image: linear-gradient(to right, rgb(53, 6, 81),rgb(158, 10, 10)); 9 | } 10 | h1{ 11 | display: flex; 12 | justify-content: center; 13 | color: whitesmoke; 14 | font-size: 48px; 15 | font-family: cursive; 16 | margin-top: 80px; 17 | margin-bottom: 50px; 18 | } 19 | .marker { 20 | position: absolute; 21 | width: 60px; 22 | left: 172px; 23 | top: -20px; 24 | z-index: 2; 25 | } 26 | 27 | .wheel { 28 | width: 100%; 29 | height: 100%; 30 | } 31 | 32 | .button { 33 | display: block; 34 | width: 250px; 35 | margin: 40px auto; 36 | cursor: pointer; 37 | } 38 | 39 | .button:hover { 40 | opacity: 0.8; 41 | } 42 | 43 | .blur { 44 | animation: blur 10s; 45 | } 46 | 47 | @keyframes blur { 48 | 0% { 49 | filter: blur(1.5px); 50 | } 51 | 80% { 52 | filter: blur(1.5px); 53 | } 54 | 100% { 55 | filter: blur(0px); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /projects/spin-the-wheel-game/wheel.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/spin-the-wheel-game/wheel.png -------------------------------------------------------------------------------- /projects/stack-game/README.md: -------------------------------------------------------------------------------- 1 | # Stack Game 2 | 3 |

Tech Stack Used

4 |

html5 css3 javascript

5 | 6 | ### Preview 7 | 8 | ![](https://github.com/DragonUncaged/Mini-WebDev-Projects/blob/main/Stack_Game/assets/stack-demoo.gif) 9 | ======= 10 | 11 | -------------------------------------------------------------------------------- /projects/stack-game/assets/stack-demoo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/stack-game/assets/stack-demoo.gif -------------------------------------------------------------------------------- /projects/stack-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | DragonUncaged_Stack_Game 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
0
15 |
Click (or press the spacebar) to place the block
16 |
17 |

Game Over

18 |

You did great, you're the best.

19 |

Click or spacebar to start again

20 |
21 |
22 |
Start
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /projects/steal-diamond-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Steal The Diamond 6 | 7 | 8 | 9 | 10 | 11 |

Steal Diamond

12 |

With Mouse Po inter Grab the Diamond without touching the walls!

13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /projects/steal-diamond-game/script.js: -------------------------------------------------------------------------------- 1 | document.querySelector('body').addEventListener('mousemove', eyeBall); 2 | 3 | function eyeBall() { 4 | let eye = document.querySelectorAll('.eye'); 5 | 6 | eye.forEach( eye => { 7 | let x = (eye.getBoundingClientRect().left) + (eye.clientWidth / 2); 8 | let y = (eye.getBoundingClientRect().top) + (eye.clientHeight / 2); 9 | let radian = Math.atan2(event.pageX - x, event.pageY - y); 10 | let rot = (radian * (180 / Math.PI) * -1 ) + 270; 11 | eye.style.transform = `rotateZ(${rot}deg)`; 12 | }); 13 | } -------------------------------------------------------------------------------- /projects/sticky-notes/README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | 4 |

5 |

Sticky Notes

6 | 7 |
8 | Save your notes with Sticky Notes 9 |
10 | 11 |
12 | 13 |
14 | 15 | 16 | Standard 18 | 19 |
20 | 21 | ## ⚡️ Introduction 22 | 23 | Sticky Notes helps you to store text in local storage 24 | 25 | ## 📷 Screenshots 26 | 27 | ![ss1](./img/stickynote.png) 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /projects/sticky-notes/img/notes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/sticky-notes/img/notes.png -------------------------------------------------------------------------------- /projects/sticky-notes/img/stickynote.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/sticky-notes/img/stickynote.png -------------------------------------------------------------------------------- /projects/sticky-notes/js/script.js: -------------------------------------------------------------------------------- 1 | $(document).ready(function() { 2 | all_notes = $("li a"); 3 | 4 | all_notes.on("keyup", function() { 5 | note_title = $(this).find("h2").text(); 6 | note_content = $(this).find("p").text(); 7 | 8 | item_key = "list_" + $(this).parent().index(); 9 | 10 | data = { 11 | title: note_title, 12 | content: note_content 13 | }; 14 | 15 | window.localStorage.setItem(item_key, JSON.stringify(data)); 16 | }); 17 | 18 | all_notes.each(function(index) { 19 | data = JSON.parse(window.localStorage.getItem("list_" + index)); 20 | 21 | if (data !== null) { 22 | note_title = data.title; 23 | note_content = data.content; 24 | 25 | $(this).find("h2").text(note_title); 26 | $(this).find("p").text(note_content); 27 | } 28 | }); 29 | }); -------------------------------------------------------------------------------- /projects/stopwatch/assets/stopwatch.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/stopwatch/assets/stopwatch.png -------------------------------------------------------------------------------- /projects/stopwatch/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/stopwatch/font/sans.ttf -------------------------------------------------------------------------------- /projects/sudoku/static/images/icon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/sudoku/static/images/icon.jpg -------------------------------------------------------------------------------- /projects/sudoku/static/js/constant.js: -------------------------------------------------------------------------------- 1 | const CONSTANT = { 2 | UNASSIGNED: 0, 3 | GRID_SIZE: 9, 4 | BOX_SIZE: 3, 5 | NUMBERS: [1,2,3,4,5,6,7,8,9], 6 | LEVEL_NAME: [ 7 | 'Easy', 8 | 'Medium', 9 | 'Hard', 10 | 'Very hard', 11 | 'Insane', 12 | 'Inhuman' 13 | ], 14 | LEVEL: [29, 38, 47, 56, 65, 74] 15 | } -------------------------------------------------------------------------------- /projects/taash-game/README.md: -------------------------------------------------------------------------------- 1 | # Taash Game 2 | The player has to get a hand with a value as close to 21 as possible without going over. 3 | A hand that goes over 21 is a bust. 4 | The players in a Taash Game plays against the dealer. Each player has to beat the dealer's hand in order to win. 5 | 6 | In Taash Game, the suits have no meaning. 7 | 1. Number cards have a value equal to their number. 8 | 2. All the picture cards (Jacks, Queens, and Kings) are worth 10. 9 | 3. Aces are worth 1. 10 | 4. The table keeps a record of total wins,loses and draws 11 | 5. Click on "Restart" Button to start a new game 12 | 6. Click on "Deal" Button to clear the field 13 | -------------------------------------------------------------------------------- /projects/taash-game/Taash Game.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/Taash Game.png -------------------------------------------------------------------------------- /projects/taash-game/images/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/10.png -------------------------------------------------------------------------------- /projects/taash-game/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/2.png -------------------------------------------------------------------------------- /projects/taash-game/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/3.png -------------------------------------------------------------------------------- /projects/taash-game/images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/4.png -------------------------------------------------------------------------------- /projects/taash-game/images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/5.png -------------------------------------------------------------------------------- /projects/taash-game/images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/6.png -------------------------------------------------------------------------------- /projects/taash-game/images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/7.png -------------------------------------------------------------------------------- /projects/taash-game/images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/8.png -------------------------------------------------------------------------------- /projects/taash-game/images/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/9.png -------------------------------------------------------------------------------- /projects/taash-game/images/A.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/A.png -------------------------------------------------------------------------------- /projects/taash-game/images/J.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/J.png -------------------------------------------------------------------------------- /projects/taash-game/images/K.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/K.png -------------------------------------------------------------------------------- /projects/taash-game/images/Q.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/images/Q.png -------------------------------------------------------------------------------- /projects/taash-game/sounds/aww.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/sounds/aww.mp3 -------------------------------------------------------------------------------- /projects/taash-game/sounds/cash.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/sounds/cash.mp3 -------------------------------------------------------------------------------- /projects/taash-game/sounds/swish.m4a: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/taash-game/sounds/swish.m4a -------------------------------------------------------------------------------- /projects/temperature-convertor/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/temperature-convertor/assets/favicon.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/down.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/down.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/left-arrow.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/pause.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/pause.jpg -------------------------------------------------------------------------------- /projects/tetris-game/assets/pause.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/pause.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/play.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/play.jpg -------------------------------------------------------------------------------- /projects/tetris-game/assets/red-left-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/red-left-arrow.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/red-right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/red-right-arrow.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/right-arrow.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/right-arrow.png -------------------------------------------------------------------------------- /projects/tetris-game/assets/rotate.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tetris-game/assets/rotate.png -------------------------------------------------------------------------------- /projects/text-speed-control/assets/speed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/text-speed-control/assets/speed.png -------------------------------------------------------------------------------- /projects/text-speed-control/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/text-speed-control/font/sans.ttf -------------------------------------------------------------------------------- /projects/text-speed-control/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Text Speed Control 10 | 11 | 12 |

Text Speed Control

13 |

30 Days of JavaScript

14 |
15 | 16 | 17 |
18 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/text-speed-control/script.js: -------------------------------------------------------------------------------- 1 | const text = document.getElementById("text"); 2 | const speedEl = document.getElementById("speed"); 3 | const prog = "30 Days of JavaScript"; 4 | let idx = 1; 5 | let speed = 300 / speedEl.value; 6 | 7 | // initial call 8 | writeText(); 9 | 10 | function writeText() { 11 | text.innerText = prog.slice(0, idx) 12 | 13 | idx++; 14 | 15 | if(idx > prog.length){ 16 | idx = 1; 17 | } 18 | 19 | setTimeout(writeText, speed); 20 | } 21 | 22 | speedEl.addEventListener('input', (e) => { 23 | speed = 300 / e.target.value; 24 | }); -------------------------------------------------------------------------------- /projects/text-speed-control/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | @font-face { 6 | font-family: "sans"; 7 | src: url(font/sans.ttf); 8 | } 9 | 10 | body { 11 | font-family: "sans"; 12 | background: #19172e; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | height: 80vh; 18 | margin: 0; 19 | text-align: center; 20 | color: white; 21 | } 22 | 23 | .heading{ 24 | font-size: 3rem; 25 | } 26 | 27 | #text{ 28 | font-size: 1.5rem; 29 | } 30 | 31 | input { 32 | text-align: center; 33 | width: 50px; 34 | outline: none; 35 | } 36 | 37 | footer { 38 | background-color: #19172e; 39 | text-align: center; 40 | color: white; 41 | font-size: 1rem; 42 | position: absolute; 43 | bottom: 0; 44 | margin-bottom: 0; 45 | padding: 5px; 46 | line-height: 3vh; 47 | } 48 | 49 | footer a:visited { 50 | color: inherit; 51 | } -------------------------------------------------------------------------------- /projects/text-to-speech-converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Text to Speech Converter 6 | 7 | 8 | 9 |
10 |
Text to Speech
11 |
12 |
13 | 14 | 15 | 16 |
17 |
18 | 19 |
20 | 23 | 24 |
25 | 26 |
27 | 28 |
29 | 30 |
31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /projects/three-number/preview.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/three-number/preview.gif -------------------------------------------------------------------------------- /projects/three-number/readme.md: -------------------------------------------------------------------------------- 1 | # Three Number 2 | 3 | The Number Will Rotate. You Have To Click in the Number and Make all the Three number Same 4 | 5 | ![](./preview.gif) 6 | -------------------------------------------------------------------------------- /projects/tic-tac-toe/assets/tic-tac-toe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tic-tac-toe/assets/tic-tac-toe.png -------------------------------------------------------------------------------- /projects/tic-tac-toe/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/tic-tac-toe/font/sans.ttf -------------------------------------------------------------------------------- /projects/to-do-list/assets/to-do-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/to-do-list/assets/to-do-list.png -------------------------------------------------------------------------------- /projects/to-do-list/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/to-do-list/font/sans.ttf -------------------------------------------------------------------------------- /projects/traffic-lights/assets/traffic-lights.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/traffic-lights/assets/traffic-lights.png -------------------------------------------------------------------------------- /projects/traffic-lights/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/traffic-lights/font/sans.ttf -------------------------------------------------------------------------------- /projects/traffic-lights/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Traffic Lights 10 | 11 | 12 |

Traffic Lights

13 |
14 |
15 |
16 |
17 |
18 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /projects/traffic-lights/script.js: -------------------------------------------------------------------------------- 1 | const circles = document.querySelectorAll('.circle') 2 | let activeLight = 0; 3 | 4 | setInterval(() => { 5 | changeLight(); 6 | }, 1000); 7 | 8 | function changeLight() { 9 | circles[activeLight].className = 'circle'; 10 | activeLight++; 11 | 12 | if(activeLight > 2) { 13 | activeLight = 0; 14 | } 15 | 16 | const currentLight = circles[activeLight] 17 | 18 | currentLight.classList.add(currentLight.getAttribute('color')); 19 | } -------------------------------------------------------------------------------- /projects/typer/README.md: -------------------------------------------------------------------------------- 1 | # Typer 2 | 3 | ## A simple interesting typing game which can help to increase the typing speed. 4 | 5 | * Characters can be case sensitive or insensitive. 6 | * Wrong characters will decrease your score. 7 | * Click on the button to change case sensitivity. 8 | * Pause by pressing _ESC_. 9 |

10 | -------------------------------------------------------------------------------- /projects/typer/typer.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | canvas { 6 | background: #f10505a5; 7 | display: block; 8 | } 9 | 10 | .btn-center { 11 | position: absolute; 12 | left: 50%; 13 | transform: translateX(-50%); 14 | } 15 | -------------------------------------------------------------------------------- /projects/typing-platform/Readme.txt: -------------------------------------------------------------------------------- 1 | Hello this my Project That is typeracer which is basically typing platform where users get to know 2 | about their accuracy of typing. I just tried to implement (monkeytype) and made a web application 3 | that is fonkeytype 4 | 5 | To open project. 6 | To open project one should view this project while it is hosted as I have faked backend using json 7 | So please view this project in Hosted form 8 | You'll get the hosted link below 9 | 10 | https://fonkeytype.netlify.app/ -------------------------------------------------------------------------------- /projects/typing-platform/file.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /projects/wall-breaker-game/README.md: -------------------------------------------------------------------------------- 1 | # Break the Wall Game 2 | 3 | - Press up Arrow Key Left/Right Arrow Key to Move 4 | 5 | # Screenshots 6 | ![image](https://user-images.githubusercontent.com/72241207/170699747-5c37edeb-534e-4265-8ff7-3e1f37fdbdf8.png) 7 | -------------------------------------------------------------------------------- /projects/wall-breaker-game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Break The Wall 9 | 10 | 11 | 12 |
Score : Lives :
13 |
14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /projects/wall-breaker-game/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | background-color: #fff; 3 | background-size: 8px 8px, 8px 8px; 4 | background-position: center, center; 5 | background-image: linear-gradient(#ebf4f9 1px, transparent 1px),linear-gradient(90deg, #ebf4f9 1px, transparent 1px); 6 | } 7 | 8 | .container { 9 | height: 400px; 10 | width: 80%; 11 | margin-left: 5%; 12 | overflow: hidden; 13 | border: 1px solid black; 14 | margin-top: 20px; 15 | position: relative; 16 | background-color: darkgrey; 17 | } 18 | 19 | .score, 20 | .lives { 21 | font-size: 3em; 22 | } 23 | 24 | .brick { 25 | position: absolute; 26 | top: 0; 27 | left: 0; 28 | width: 91px; 29 | height: 40px; 30 | padding: 1px; 31 | color: white; 32 | border: 1px solid white; 33 | font-size: 1.8em; 34 | text-align: center; 35 | line-height: 40px; 36 | } -------------------------------------------------------------------------------- /projects/wave-effect/assets/wave.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/wave-effect/assets/wave.png -------------------------------------------------------------------------------- /projects/wave-effect/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/wave-effect/font/sans.ttf -------------------------------------------------------------------------------- /projects/wave-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Wave Effect 10 | 11 | 12 |

CLICK A DOT

13 |
14 | 15 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /projects/weather-app/Clear1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/Clear1.jpg -------------------------------------------------------------------------------- /projects/weather-app/assets/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/assets/weather.png -------------------------------------------------------------------------------- /projects/weather-app/clouds.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/clouds.jpg -------------------------------------------------------------------------------- /projects/weather-app/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/font/sans.ttf -------------------------------------------------------------------------------- /projects/weather-app/gauge (1).png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/gauge (1).png -------------------------------------------------------------------------------- /projects/weather-app/icons8-humidity-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/icons8-humidity-64.png -------------------------------------------------------------------------------- /projects/weather-app/icons8-wind-64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/icons8-wind-64.png -------------------------------------------------------------------------------- /projects/weather-app/rain.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/rain.jpg -------------------------------------------------------------------------------- /projects/weather-app/search.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/search.png -------------------------------------------------------------------------------- /projects/weather-app/snow.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/snow.jpg -------------------------------------------------------------------------------- /projects/weather-app/sunny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/sunny.jpg -------------------------------------------------------------------------------- /projects/weather-app/thunder.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/weather-app/thunder.jpg -------------------------------------------------------------------------------- /projects/weight-converter/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Weight Converter 9 | 10 | 11 | 12 | 13 | 14 |

Weight Converter

15 |
16 |

Enter value in grams...

17 |
18 | 19 |

20 | Convert to 21 | 27 |

28 | 29 | 30 |

31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /projects/weight-converter/readme.md: -------------------------------------------------------------------------------- 1 | # Weight Converter 🎱 : 2 | --- 3 | It's a simple Weight Converter which takes weight as 'grams' and convert into -> 'pound' , 'kg' , 'Ounces' , 'Stones'. 4 | 5 | --- 6 | 7 | ## Tech stack Used: 8 | HTML5, CSS3, JavaScript 9 | 10 | --- 11 | ## It Looks Like: 12 | 13 | ![image](https://user-images.githubusercontent.com/77873383/162106804-01bc2db8-2209-4d2f-9b74-7898d5f5b7ec.png) 14 | 15 | --- 16 | 17 | ## Video Demo: 18 | 19 | 20 | https://user-images.githubusercontent.com/77873383/162106969-247c6a32-bf65-4925-ab10-8bde5d16d102.mp4 21 | 22 | 23 | --- 24 | -------------------------------------------------------------------------------- /projects/word-counter/assets/scrabble.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/word-counter/assets/scrabble.png -------------------------------------------------------------------------------- /projects/word-counter/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/word-counter/font/sans.ttf -------------------------------------------------------------------------------- /projects/word-guess/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Word Guess Game 6 | 7 | 8 | 9 | 10 | 11 |
12 |

Word Guess

13 | 14 |

Click on the alphabet below to guess the word, or click hint For Help.

15 |
16 |
17 |
18 |
19 |

20 |
21 |
22 |

23 |

Clue -

24 | This Text will show if the Browser does NOT support HTML5 Canvas tag 25 |
26 | 27 | 28 |
29 |
30 | 31 | 32 | 33 | 34 | 35 | -------------------------------------------------------------------------------- /projects/zoom-effect/assets/image.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/zoom-effect/assets/image.jpg -------------------------------------------------------------------------------- /projects/zoom-effect/assets/zoom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/zoom-effect/assets/zoom.png -------------------------------------------------------------------------------- /projects/zoom-effect/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/projects/zoom-effect/font/sans.ttf -------------------------------------------------------------------------------- /projects/zoom-effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Zoom Effect 10 | 11 | 12 |

Turn on/off the zoom effect by pressing Z or by clicking

13 | 14 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /projects/zoom-effect/script.js: -------------------------------------------------------------------------------- 1 | const { body } = document; 2 | 3 | let zoomActivated = false; 4 | 5 | window.addEventListener('keydown', (e) => { 6 | if(e.key === 'z') { 7 | zoomActivated = !zoomActivated; 8 | } 9 | }); 10 | 11 | window.addEventListener('click', () => { 12 | zoomActivated = !zoomActivated; 13 | }); 14 | 15 | window.addEventListener('mousemove', (e) => { 16 | const { clientX: x, clientY: y } = e; 17 | 18 | if(zoomActivated) { 19 | body.style.transform = 'scale(2)'; 20 | body.style.transformOrigin = `${x}px ${y}px`; 21 | } 22 | else { 23 | body.style.transform = 'none'; 24 | } 25 | }); -------------------------------------------------------------------------------- /projects/zoom-effect/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | @font-face { 8 | font-family: "sans"; 9 | src: url(font/sans.ttf); 10 | } 11 | 12 | body { 13 | font-family: "sans"; 14 | align-items: center; 15 | background-color: #19172e; 16 | color: #fff; 17 | height: 100vh; 18 | justify-content: center; 19 | margin: 0; 20 | } 21 | 22 | h1 { 23 | top: 0; 24 | text-align: center; 25 | padding: 2%; 26 | font-size: 1.2rem; 27 | } 28 | 29 | img { 30 | display: block; 31 | margin-left: auto; 32 | margin-right: auto; 33 | width: 300px; 34 | border-radius: 3%; 35 | } 36 | 37 | footer { 38 | text-align: center; 39 | color: white; 40 | font-size: 1rem; 41 | position: absolute; 42 | left: 0; 43 | right: 0; 44 | bottom: 0; 45 | margin-bottom: 0; 46 | padding: 5px; 47 | line-height: 3vh; 48 | } 49 | 50 | footer a:visited { 51 | color: inherit; 52 | } 53 | -------------------------------------------------------------------------------- /public/assets/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/1.png -------------------------------------------------------------------------------- /public/assets/10.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/10.png -------------------------------------------------------------------------------- /public/assets/100.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/100.png -------------------------------------------------------------------------------- /public/assets/101.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/101.png -------------------------------------------------------------------------------- /public/assets/102.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/102.png -------------------------------------------------------------------------------- /public/assets/103.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/103.png -------------------------------------------------------------------------------- /public/assets/104.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/104.png -------------------------------------------------------------------------------- /public/assets/105.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/105.png -------------------------------------------------------------------------------- /public/assets/106.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/106.png -------------------------------------------------------------------------------- /public/assets/107.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/107.png -------------------------------------------------------------------------------- /public/assets/108.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/108.png -------------------------------------------------------------------------------- /public/assets/109.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/109.png -------------------------------------------------------------------------------- /public/assets/11.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/11.png -------------------------------------------------------------------------------- /public/assets/110.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/110.png -------------------------------------------------------------------------------- /public/assets/111.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/111.png -------------------------------------------------------------------------------- /public/assets/112.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/112.png -------------------------------------------------------------------------------- /public/assets/113.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/113.png -------------------------------------------------------------------------------- /public/assets/114.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/114.png -------------------------------------------------------------------------------- /public/assets/115.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/115.png -------------------------------------------------------------------------------- /public/assets/116.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/116.png -------------------------------------------------------------------------------- /public/assets/117.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/117.png -------------------------------------------------------------------------------- /public/assets/118.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/118.png -------------------------------------------------------------------------------- /public/assets/119.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/119.png -------------------------------------------------------------------------------- /public/assets/12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/12.png -------------------------------------------------------------------------------- /public/assets/120.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/120.png -------------------------------------------------------------------------------- /public/assets/121.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/121.png -------------------------------------------------------------------------------- /public/assets/122.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/122.png -------------------------------------------------------------------------------- /public/assets/123.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/123.png -------------------------------------------------------------------------------- /public/assets/124.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/124.png -------------------------------------------------------------------------------- /public/assets/125.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/125.png -------------------------------------------------------------------------------- /public/assets/126.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/126.png -------------------------------------------------------------------------------- /public/assets/13.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/13.png -------------------------------------------------------------------------------- /public/assets/14.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/14.png -------------------------------------------------------------------------------- /public/assets/15.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/15.png -------------------------------------------------------------------------------- /public/assets/16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/16.png -------------------------------------------------------------------------------- /public/assets/17.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/17.png -------------------------------------------------------------------------------- /public/assets/18.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/18.png -------------------------------------------------------------------------------- /public/assets/19.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/19.png -------------------------------------------------------------------------------- /public/assets/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/2.png -------------------------------------------------------------------------------- /public/assets/20.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/20.png -------------------------------------------------------------------------------- /public/assets/21.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/21.png -------------------------------------------------------------------------------- /public/assets/22.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/22.png -------------------------------------------------------------------------------- /public/assets/23.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/23.png -------------------------------------------------------------------------------- /public/assets/24.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/24.png -------------------------------------------------------------------------------- /public/assets/25.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/25.png -------------------------------------------------------------------------------- /public/assets/26.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/26.png -------------------------------------------------------------------------------- /public/assets/27.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/27.png -------------------------------------------------------------------------------- /public/assets/28.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/28.png -------------------------------------------------------------------------------- /public/assets/29.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/29.png -------------------------------------------------------------------------------- /public/assets/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/3.png -------------------------------------------------------------------------------- /public/assets/30.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/30.png -------------------------------------------------------------------------------- /public/assets/31.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/31.png -------------------------------------------------------------------------------- /public/assets/32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/32.png -------------------------------------------------------------------------------- /public/assets/33.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/33.png -------------------------------------------------------------------------------- /public/assets/34.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/34.png -------------------------------------------------------------------------------- /public/assets/35.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/35.png -------------------------------------------------------------------------------- /public/assets/36.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/36.png -------------------------------------------------------------------------------- /public/assets/37.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/37.png -------------------------------------------------------------------------------- /public/assets/38.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/38.png -------------------------------------------------------------------------------- /public/assets/39.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/39.png -------------------------------------------------------------------------------- /public/assets/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/4.png -------------------------------------------------------------------------------- /public/assets/40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/40.png -------------------------------------------------------------------------------- /public/assets/41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/41.png -------------------------------------------------------------------------------- /public/assets/42.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/42.png -------------------------------------------------------------------------------- /public/assets/43.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/43.png -------------------------------------------------------------------------------- /public/assets/44.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/44.png -------------------------------------------------------------------------------- /public/assets/45.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/45.png -------------------------------------------------------------------------------- /public/assets/46.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/46.png -------------------------------------------------------------------------------- /public/assets/47.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/47.png -------------------------------------------------------------------------------- /public/assets/48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/48.png -------------------------------------------------------------------------------- /public/assets/49.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/49.png -------------------------------------------------------------------------------- /public/assets/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/5.png -------------------------------------------------------------------------------- /public/assets/50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/50.png -------------------------------------------------------------------------------- /public/assets/51.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/51.png -------------------------------------------------------------------------------- /public/assets/52.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/52.png -------------------------------------------------------------------------------- /public/assets/53.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/53.png -------------------------------------------------------------------------------- /public/assets/54.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/54.png -------------------------------------------------------------------------------- /public/assets/55.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/55.png -------------------------------------------------------------------------------- /public/assets/56.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/56.png -------------------------------------------------------------------------------- /public/assets/57.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/57.png -------------------------------------------------------------------------------- /public/assets/58.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/58.png -------------------------------------------------------------------------------- /public/assets/59.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/59.png -------------------------------------------------------------------------------- /public/assets/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/6.png -------------------------------------------------------------------------------- /public/assets/60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/60.png -------------------------------------------------------------------------------- /public/assets/61.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/61.png -------------------------------------------------------------------------------- /public/assets/62.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/62.png -------------------------------------------------------------------------------- /public/assets/63.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/63.png -------------------------------------------------------------------------------- /public/assets/64.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/64.png -------------------------------------------------------------------------------- /public/assets/65.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/65.png -------------------------------------------------------------------------------- /public/assets/66.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/66.png -------------------------------------------------------------------------------- /public/assets/67.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/67.png -------------------------------------------------------------------------------- /public/assets/68.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/68.png -------------------------------------------------------------------------------- /public/assets/69.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/69.png -------------------------------------------------------------------------------- /public/assets/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/7.png -------------------------------------------------------------------------------- /public/assets/70.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/70.png -------------------------------------------------------------------------------- /public/assets/71.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/71.png -------------------------------------------------------------------------------- /public/assets/72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/72.png -------------------------------------------------------------------------------- /public/assets/73.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/73.png -------------------------------------------------------------------------------- /public/assets/74.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/74.png -------------------------------------------------------------------------------- /public/assets/75.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/75.png -------------------------------------------------------------------------------- /public/assets/76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/76.png -------------------------------------------------------------------------------- /public/assets/77.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/77.png -------------------------------------------------------------------------------- /public/assets/78.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/78.png -------------------------------------------------------------------------------- /public/assets/79.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/79.png -------------------------------------------------------------------------------- /public/assets/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/8.png -------------------------------------------------------------------------------- /public/assets/80.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/80.png -------------------------------------------------------------------------------- /public/assets/81.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/81.png -------------------------------------------------------------------------------- /public/assets/82.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/82.png -------------------------------------------------------------------------------- /public/assets/83.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/83.png -------------------------------------------------------------------------------- /public/assets/84.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/84.png -------------------------------------------------------------------------------- /public/assets/85.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/85.png -------------------------------------------------------------------------------- /public/assets/86.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/86.png -------------------------------------------------------------------------------- /public/assets/87.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/87.png -------------------------------------------------------------------------------- /public/assets/88.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/88.png -------------------------------------------------------------------------------- /public/assets/89.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/89.png -------------------------------------------------------------------------------- /public/assets/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/9.png -------------------------------------------------------------------------------- /public/assets/90.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/90.png -------------------------------------------------------------------------------- /public/assets/91.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/91.png -------------------------------------------------------------------------------- /public/assets/92.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/92.png -------------------------------------------------------------------------------- /public/assets/93.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/93.png -------------------------------------------------------------------------------- /public/assets/94.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/94.png -------------------------------------------------------------------------------- /public/assets/95.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/95.png -------------------------------------------------------------------------------- /public/assets/96.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/96.png -------------------------------------------------------------------------------- /public/assets/97.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/97.png -------------------------------------------------------------------------------- /public/assets/98.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/98.png -------------------------------------------------------------------------------- /public/assets/99.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/99.png -------------------------------------------------------------------------------- /public/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/assets/favicon.png -------------------------------------------------------------------------------- /public/font/sans.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/swapnilsparsh/30DaysOfJavaScript/ba497542d0af36beca3e19802661cba3384fbfdf/public/font/sans.ttf --------------------------------------------------------------------------------