├── Day 1 - 10 ├── Day 1 Counter Application │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 10 List Search Project │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 2 Random Number Generator │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 3 Random Hex Generator │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 4 Pop Up Project │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 5 Palindrome Checker │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 6 Vowel Counter App │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 7 Click to Copy │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 8 Input Field Character Count │ ├── index.html │ ├── script.js │ └── styles.css └── Day 9 Geolocation API │ ├── Index.html │ ├── script.js │ └── styles.css ├── Day 11 - 20 ├── Day 11 New Year Countdown App │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 12 Time Countdown App │ ├── README.md │ ├── images │ │ └── aron-visuals-BXOXnQ26B7o-unsplash.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 13 Tip Calculator │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 14 Weight Converter │ ├── README.md │ ├── images │ │ └── elena-mozhvilo-j06gLuKK0GM-unsplash.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 15 BMI Caculator │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 16 Random Joke Generator │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 17 Count Up app │ ├── README.md │ ├── images │ │ ├── joshua-eckstein-VAJEea9u6k8-unsplash.jpg │ │ └── pexels-trang-doan-1024248.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 18 Alarm Clock App │ ├── AlarmClock_Siemen_sound.mp3 │ ├── Readme.md │ ├── images │ │ └── clock.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 19 Drink Water Goal │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css └── Day 20 Digital Clock │ ├── README.md │ ├── images │ ├── citynight.jpg │ └── time.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 21 - 30 ├── Day 21 Number Guessing Game │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 22 Wikipedia Search App │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 23 Typing Speed App │ ├── README.md │ ├── index.html │ ├── script.js │ ├── sounds │ │ ├── clap.wav │ │ └── congrats.wav │ └── styles.css ├── Day 24 Internet Status Connection Detector │ ├── README.md │ ├── images │ │ ├── offline.png │ │ └── online.png │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 25 Movie Founder App │ ├── README.md │ ├── images │ │ └── eren.png │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 26 Number Seperator │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 27 Colors Game │ ├── README.md │ ├── index.html │ ├── script.js │ ├── sounds │ │ ├── blue.mp3 │ │ ├── green.mp3 │ │ ├── red.mp3 │ │ └── yellow.mp3 │ └── styles.css ├── Day 28 Type Writing Effect │ ├── README.md │ ├── images │ │ ├── UncleJohny.jpg │ │ └── vitalik.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 29 BlackJack Game │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css └── Day 30 Password Generator │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 31 - 40 ├── Day 31 Chrome Extension │ ├── README.md │ ├── icon.png │ ├── index.html │ ├── manifest.json │ ├── script.js │ └── styles.css ├── Day 32 Invoice App │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 33 Infinity Scroll │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 34 Advice Generator App │ └── advice-generator-app-main │ │ ├── README-template.md │ │ ├── README.md │ │ ├── design │ │ ├── active-states.jpg │ │ ├── desktop-design.jpg │ │ ├── desktop-preview.jpg │ │ └── mobile-design.jpg │ │ ├── images │ │ ├── favicon-32x32.png │ │ ├── icon-dice.svg │ │ ├── pattern-divider-desktop.svg │ │ └── pattern-divider-mobile.svg │ │ ├── index.html │ │ ├── script.js │ │ ├── style-guide.md │ │ └── styles.css ├── Day 35 Interactive-pricing-component │ └── interactive-pricing-component-main │ │ ├── README-template.md │ │ ├── README.md │ │ ├── design │ │ ├── active-states.jpg │ │ ├── desktop-design.jpg │ │ ├── desktop-preview.jpg │ │ └── mobile-design.jpg │ │ ├── images │ │ ├── bg-pattern.svg │ │ ├── favicon-32x32.png │ │ ├── icon-check.svg │ │ ├── icon-slider.svg │ │ └── pattern-circles.svg │ │ ├── index.html │ │ ├── script.js │ │ ├── style-guide.md │ │ └── styles.css ├── Day 36 Annoying Button Game │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 37 Exact Age Calculator │ ├── README.md │ ├── images │ │ └── age.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 38 Github Profiles API │ ├── README.md │ ├── images │ │ └── abbas.jpg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 39 Catch the insect │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css └── Day 40 Dice Game │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 41 - 50 ├── Day 41 Calculator App │ ├── README.md │ ├── images │ │ └── favicon-32x32.png │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 42 Pokedox App │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 43 Drawing App │ ├── Readme.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 44 Quiz App │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 45 Weather App │ ├── README.md │ ├── images │ │ ├── weaapp.PNG │ │ └── weather.png │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 46 Dark and Light Mode Toggler │ ├── README.md │ ├── images │ │ └── phone.svg │ ├── index.html │ ├── script.js │ └── styles.css ├── Day 47 Music Player App │ ├── Index.html │ ├── README.md │ ├── audio │ │ ├── Hey.mp3 │ │ ├── Summer.mp3 │ │ └── Ukulele.mp3 │ ├── images │ │ ├── hey.jpg │ │ ├── summer.jpg │ │ └── ukulele.jpg │ ├── script.js │ └── styles.css ├── Day 48 Role-Playing-Game │ ├── Character.js │ ├── README.md │ ├── data.js │ ├── images │ │ ├── demon.png │ │ ├── goblin.png │ │ ├── orc.png │ │ └── wizard.png │ ├── index.css │ ├── index.html │ ├── index.js │ └── utils.js ├── Day 49 BlogSpace Project │ ├── README.md │ ├── index.css │ ├── index.html │ └── index.js └── Day 50 Chrome Home Page Extension │ ├── README.md │ ├── index.css │ ├── index.html │ └── index.js ├── Day 51 - 60 ├── Day 51 Contact Card │ └── my-app │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.4d0ed136.css │ │ │ └── main.4d0ed136.css.map │ │ │ └── js │ │ │ ├── 787.28cb0dcd.chunk.js │ │ │ ├── 787.28cb0dcd.chunk.js.map │ │ │ ├── main.dea114dd.js │ │ │ ├── main.dea114dd.js.LICENSE.txt │ │ │ └── main.dea114dd.js.map │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── ContactCard.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Day 52 React Info Site │ └── info-site │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.dad4392b.css │ │ │ └── main.dad4392b.css.map │ │ │ └── js │ │ │ ├── 787.ad7113de.chunk.js │ │ │ ├── 787.ad7113de.chunk.js.map │ │ │ ├── main.5f575e37.js │ │ │ ├── main.5f575e37.js.LICENSE.txt │ │ │ └── main.5f575e37.js.map │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Main.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── logo192.png │ │ ├── navbar.js │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Day 53 Digital Business Card │ └── business-card │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.8568e4b3.css │ │ │ └── main.8568e4b3.css.map │ │ │ ├── js │ │ │ ├── 787.bc412fff.chunk.js │ │ │ ├── 787.bc412fff.chunk.js.map │ │ │ ├── main.2e93791d.js │ │ │ ├── main.2e93791d.js.LICENSE.txt │ │ │ └── main.2e93791d.js.map │ │ │ └── media │ │ │ └── abbas.0f2de72f0730b5098cd0.jpg │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── About.js │ │ ├── App.css │ │ ├── Info.js │ │ ├── Interests.js │ │ ├── images │ │ └── abbas.jpg │ │ ├── index.css │ │ ├── index.js │ │ └── reportWebVitals.js ├── Day 54 AirBnB Clone │ └── air-bnb │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── grid.png │ │ │ └── logo.png │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.de692649.css │ │ │ └── main.de692649.css.map │ │ │ └── js │ │ │ ├── main.8c15ffa4.js │ │ │ ├── main.8c15ffa4.js.LICENSE.txt │ │ │ └── main.8c15ffa4.js.map │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── 1.png │ │ │ ├── 2.png │ │ │ ├── 3.png │ │ │ ├── grid.png │ │ │ └── logo.png │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Card.js │ │ ├── Grid.js │ │ ├── Navbar.js │ │ ├── data.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── Day 55 Travel Journal │ └── travel-journal │ │ ├── README.md │ │ ├── build │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── path.png │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.f843ba38.css │ │ │ └── main.f843ba38.css.map │ │ │ └── js │ │ │ ├── 787.39019643.chunk.js │ │ │ ├── 787.39019643.chunk.js.map │ │ │ ├── main.978ef330.js │ │ │ ├── main.978ef330.js.LICENSE.txt │ │ │ └── main.978ef330.js.map │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── path.png │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Content.js │ │ ├── Navbar.js │ │ ├── data.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Day 56 Meme Generator │ └── meme-generator │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── memeimg.png │ │ │ └── troll-face.png │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── Header.js │ │ ├── Meme.js │ │ ├── data.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ ├── reportWebVitals.js │ │ └── setupTests.js ├── Day 57 Emoji App │ └── emoji-app │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.450c6844.css │ │ │ └── main.450c6844.css.map │ │ │ └── js │ │ │ ├── main.f83c31b6.js │ │ │ ├── main.f83c31b6.js.LICENSE.txt │ │ │ └── main.f83c31b6.js.map │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── App.test.js │ │ ├── EmojiData.js │ │ ├── Header.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── Day 58 Crypto App │ └── crypto-app │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Coin.js │ │ ├── Table.js │ │ ├── index.css │ │ ├── index.js │ │ ├── logo.svg │ │ └── reportWebVitals.js ├── Day 59 Breaking Bad Character App │ └── breaking-bad-character-app │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.d12fafc8.css │ │ │ └── main.d12fafc8.css.map │ │ │ ├── js │ │ │ ├── main.2472d282.js │ │ │ ├── main.2472d282.js.LICENSE.txt │ │ │ └── main.2472d282.js.map │ │ │ └── media │ │ │ ├── logo.e6ecab4407f10ecd02bd.png │ │ │ └── spinner.11d9cde8ebaeadb07ba7.gif │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ ├── Characters │ │ │ ├── CharacterGrid.js │ │ │ └── CharacterItem.js │ │ └── UI │ │ │ ├── Header.js │ │ │ ├── Search.js │ │ │ └── Spinner.js │ │ ├── images │ │ ├── logo.png │ │ └── spinner.gif │ │ ├── index.js │ │ └── logo.svg └── Day 60 Text Generator │ └── text-generator │ ├── README.md │ ├── build │ ├── asset-manifest.json │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── static │ │ ├── css │ │ ├── main.045b2c75.css │ │ └── main.045b2c75.css.map │ │ └── js │ │ ├── main.1857ca75.js │ │ ├── main.1857ca75.js.LICENSE.txt │ │ └── main.1857ca75.js.map │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ ├── src │ ├── App.css │ ├── App.js │ ├── Components │ │ ├── Options.js │ │ └── Output.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ └── ui │ │ └── Header.js │ ├── yarn-error.log │ └── yarn.lock ├── Day 61 - 70 ├── Day 61 Image App │ └── image-app │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.2a2507d0.css │ │ │ └── main.2a2507d0.css.map │ │ │ └── js │ │ │ ├── main.f50a12ef.js │ │ │ ├── main.f50a12ef.js.LICENSE.txt │ │ │ └── main.f50a12ef.js.map │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Components │ │ │ ├── Card.js │ │ │ └── Header.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ │ └── yarn.lock ├── Day 62 Memory Game │ └── memory-game │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── img │ │ │ ├── cover.png │ │ │ ├── helmet-1.png │ │ │ ├── potion-1.png │ │ │ ├── ring-1.png │ │ │ ├── scroll-1.png │ │ │ ├── shield-1.png │ │ │ └── sword-1.png │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.a2997004.css │ │ │ └── main.a2997004.css.map │ │ │ └── js │ │ │ ├── main.3bcc70e1.js │ │ │ ├── main.3bcc70e1.js.LICENSE.txt │ │ │ └── main.3bcc70e1.js.map │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── img │ │ │ ├── cover.png │ │ │ ├── helmet-1.png │ │ │ ├── potion-1.png │ │ │ ├── ring-1.png │ │ │ ├── scroll-1.png │ │ │ ├── shield-1.png │ │ │ └── sword-1.png │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Components │ │ │ └── SingleCard.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ │ └── yarn.lock ├── Day 63 Movies App │ └── movies-app │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.379670a1.css │ │ │ └── main.379670a1.css.map │ │ │ └── js │ │ │ ├── main.d1ca509b.js │ │ │ ├── main.d1ca509b.js.LICENSE.txt │ │ │ └── main.d1ca509b.js.map │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Components │ │ │ ├── Header.js │ │ │ └── MovieList.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ │ └── yarn.lock ├── Day 64 Tenzies Game │ └── tenzies-game │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.7aef1001.css │ │ │ └── main.7aef1001.css.map │ │ │ └── js │ │ │ ├── main.5836c01f.js │ │ │ ├── main.5836c01f.js.LICENSE.txt │ │ │ └── main.5836c01f.js.map │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Die.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ │ └── yarn.lock ├── Day 65 Tic Tac Toe Game │ └── tic-tac-toe-game │ │ ├── README.md │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Components │ │ │ └── Square.js │ │ ├── Patterns.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ │ └── yarn.lock ├── Day 66 Speed Typing Game │ └── speed-typing-game │ │ ├── README.md │ │ ├── build │ │ ├── asset-manifest.json │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ ├── robots.txt │ │ └── static │ │ │ ├── css │ │ │ ├── main.65d60945.css │ │ │ └── main.65d60945.css.map │ │ │ └── js │ │ │ ├── main.f2d90aae.js │ │ │ ├── main.f2d90aae.js.LICENSE.txt │ │ │ └── main.f2d90aae.js.map │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── Hooks │ │ │ └── useWordGame.js │ │ ├── index.css │ │ └── index.js │ │ └── yarn.lock ├── Day 67 News App │ └── news-app │ │ ├── Components │ │ └── Toolbar.js │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package.json │ │ ├── pages │ │ ├── _app.js │ │ ├── eom.js │ │ ├── feed │ │ │ └── [pageId].js │ │ └── index.js │ │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ │ ├── styles │ │ ├── EOM.module.css │ │ ├── Feed.module.css │ │ ├── Home.module.css │ │ ├── globals.css │ │ └── toolbar.module.css │ │ └── yarn.lock ├── Day 68 Quizzical │ └── quizzical │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── Components │ │ │ ├── Question │ │ │ │ ├── Question.js │ │ │ │ └── Question.module.css │ │ │ └── QuestionList │ │ │ │ ├── QuestionList.js │ │ │ │ └── QuestionList.module.css │ │ ├── _app.js │ │ ├── api │ │ │ └── hello.js │ │ ├── getQuestions.js │ │ └── index.js │ │ ├── public │ │ ├── cross.svg │ │ ├── favicon.ico │ │ ├── shape-1.png │ │ ├── shape-2.png │ │ ├── tick.svg │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ └── yarn.lock ├── Day 69 Notes App │ └── notes-app │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── Components │ │ │ ├── AddNote.js │ │ │ ├── Header.js │ │ │ ├── Note.js │ │ │ └── NotesList.js │ │ ├── _app.js │ │ └── index.js │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ ├── tailwind.config.js │ │ └── yarn.lock └── Day 70 Game Of War │ └── game-of-war │ ├── README.md │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── _app.js │ └── index.js │ ├── postcss.config.js │ ├── public │ ├── favicon.ico │ └── vercel.svg │ ├── styles │ ├── Home.module.css │ └── globals.css │ ├── tailwind.config.js │ └── yarn.lock ├── Day 71 - 80 ├── Day 71 Capstone Project │ └── capston-project │ │ └── capstone-project │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── _app.js │ │ ├── api │ │ │ └── hello.js │ │ └── index.js │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ ├── tailwind.config.js │ │ └── yarn.lock ├── Day 72 Todo List App │ └── todo-list │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── Components │ │ │ ├── Header.js │ │ │ └── List.js │ │ ├── _app.js │ │ └── index.js │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ ├── tailwind.config.js │ │ └── yarn.lock ├── Day 73 Expense Tracker │ └── expense-tracker │ │ ├── Context │ │ └── Context.js │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── Components │ │ │ ├── AddTransactions.js │ │ │ ├── Balance.js │ │ │ ├── Details.js │ │ │ └── History.js │ │ ├── _app.js │ │ └── index.js │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── front_img.png │ │ │ └── second_img.png │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ ├── tailwind.config.js │ │ └── yarn.lock ├── Day 74 Blog Application │ └── blog-app │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── Components │ │ │ ├── AddBlog.js │ │ │ ├── Blogcard.js │ │ │ └── Navbar.js │ │ ├── FullBlog.js │ │ ├── _app.js │ │ └── index.js │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ ├── tailwind.config.js │ │ └── yarn.lock ├── Day 75 Candy Crush Game │ └── candy-crush-game │ │ ├── README.md │ │ ├── next.config.js │ │ ├── package.json │ │ ├── pages │ │ ├── _app.js │ │ ├── api │ │ │ └── hello.js │ │ └── index.js │ │ ├── public │ │ ├── favicon.ico │ │ ├── images │ │ │ ├── blank.png │ │ │ ├── blue-candy.png │ │ │ ├── green-candy.png │ │ │ ├── orange-candy.png │ │ │ ├── purple-candy.png │ │ │ ├── red-candy.png │ │ │ └── yellow-candy.png │ │ └── vercel.svg │ │ ├── styles │ │ ├── Home.module.css │ │ └── globals.css │ │ └── yarn.lock ├── Day 76 Wordle Clone │ └── wordle-clone │ │ ├── README.md │ │ ├── data │ │ └── db.json │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.js │ │ ├── Components │ │ ├── Grid.js │ │ ├── Row.js │ │ └── wordle.js │ │ ├── hooks │ │ └── useWordle.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── Day 77 GraphQL Pokemon App │ └── graphql-pokemon │ │ ├── README.md │ │ ├── components │ │ ├── Pokemon.tsx │ │ └── PokemonsContainer.tsx │ │ ├── graphql │ │ └── GET_POKEMONS.tsx │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── _app.tsx │ │ ├── api │ │ │ └── hello.ts │ │ └── index.tsx │ │ ├── postcss.config.js │ │ ├── public │ │ ├── favicon.ico │ │ └── vercel.svg │ │ ├── styles │ │ └── globals.css │ │ ├── tailwind.config.js │ │ ├── tsconfig.json │ │ ├── yarn-error.log │ │ └── yarn.lock ├── Day 78 Tic-Tac-Toe │ └── Tic-Tac-Toe-Game │ │ ├── README.md │ │ ├── components │ │ ├── BetAmount.tsx │ │ ├── Board.tsx │ │ ├── ChoosePlayer.tsx │ │ ├── OIcon.tsx │ │ ├── WinnerModal.tsx │ │ └── XIcon.tsx │ │ ├── next-env.d.ts │ │ ├── next.config.js │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── pages │ │ ├── _app.tsx │ │ ├── api │ │ │ └── hello.ts │ │ └── index.tsx │ │ ├── postcss.config.js │ │ ├── prettier.config.js │ │ ├── public │ │ ├── favicon.ico │ │ ├── oicon.svg │ │ ├── vercel.svg │ │ └── xicon.svg │ │ ├── styles │ │ └── globals.css │ │ ├── tailwind.config.js │ │ └── tsconfig.json ├── Day 79 Memories Saving App │ ├── README.md │ ├── client │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── logo192.png │ │ │ ├── logo512.png │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.js │ │ │ ├── actions │ │ │ └── posts.js │ │ │ ├── api │ │ │ └── index.js │ │ │ ├── components │ │ │ ├── Form │ │ │ │ ├── Form.js │ │ │ │ └── styles.js │ │ │ └── posts │ │ │ │ ├── post │ │ │ │ ├── post.js │ │ │ │ └── styles.js │ │ │ │ ├── posts.js │ │ │ │ └── styles.js │ │ │ ├── images │ │ │ └── memories.png │ │ │ ├── index.js │ │ │ ├── reducers │ │ │ ├── index.js │ │ │ └── posts.js │ │ │ └── styles.js │ └── server │ │ ├── Models │ │ └── postMessage.js │ │ ├── controllers │ │ └── posts.js │ │ ├── index.js │ │ ├── package-lock.json │ │ ├── package.json │ │ └── routes │ │ └── posts.js └── React-Native-App │ ├── App.js │ ├── app.json │ ├── assets │ ├── adaptive-icon.png │ ├── favicon.png │ ├── icon.png │ └── splash.png │ ├── babel.config.js │ ├── components │ └── Task.js │ ├── package-lock.json │ └── package.json ├── Extra Javascript Projects └── Custom Select Project │ ├── index.html │ ├── script.js │ └── styles.css ├── README.md ├── Scrimba Javascript ├── Blackjack Game │ ├── index.html │ ├── script.js │ └── styles.css ├── Bored Bot │ ├── index.css │ ├── index.html │ └── index.js ├── Chrome Extension │ ├── icon.png │ ├── index.html │ ├── manifest.json │ ├── script.js │ └── styles.css ├── Dice Game │ ├── index.html │ ├── script.js │ └── styles.css ├── Emoji App │ ├── index.css │ ├── index.html │ └── index.js ├── Passenger Counter App │ ├── README.md │ ├── index.html │ ├── script.js │ └── styles.css └── Quizzical │ └── quizzical │ ├── Components │ ├── Questions.js │ └── Start.js │ ├── README.md │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── Correct.js │ ├── Quiz.js │ ├── _app.js │ ├── api │ │ └── hello.js │ └── index.js │ ├── public │ ├── favicon.ico │ └── vercel.svg │ ├── styles │ ├── Home.module.css │ ├── Quiz.module.css │ └── globals.css │ └── yarn.lock └── Web2_Backend_Learning ├── Mongoose-Fundamentals ├── README.md ├── myApp.js ├── package-lock.json ├── package.json ├── server.js └── views │ └── index.html ├── controllers └── users.js ├── index.js ├── package-lock.json ├── package.json ├── servers └── users.js └── user.json /Day 1 - 10/Day 10 List Search Project/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://unruffled-banach-353dae.netlify.app 2 | -------------------------------------------------------------------------------- /Day 1 - 10/Day 8 Input Field Character Count/script.js: -------------------------------------------------------------------------------- 1 | // const count = document.querySelector(".count"); 2 | 3 | // const input = document.querySelector(".input-txt"); 4 | 5 | // input.addEventListener("keyup" , () => { 6 | // count.innerHTML = input.value.length; 7 | // }); 8 | 9 | let count = document.querySelector(".count"); 10 | 11 | const input = document.querySelector(".input-txt"); 12 | 13 | input.addEventListener("keyup" , findCharCount); 14 | 15 | function findCharCount(e) { 16 | count.innerHTML = input.value.replace(/ /g, "").length; 17 | } 18 | -------------------------------------------------------------------------------- /Day 1 - 10/Day 9 Geolocation API/Index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | API 8 | 9 | 10 | 11 |
12 |
13 | 14 |

Location:

15 |
16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Day 1 - 10/Day 9 Geolocation API/script.js: -------------------------------------------------------------------------------- 1 | const userLocation = document.querySelector(".location"); 2 | const btn = document.querySelector(".btn"); 3 | 4 | btn.addEventListener("click", () => { 5 | navigator.geolocation.getCurrentPosition(getPosition); 6 | }); 7 | 8 | function getPosition(position) { 9 | userLocation.innerHTML = ` 10 | $Latitude: ${position.coords.latitude}
11 | $Longtiude: ${position.coords.longitude}
`; 12 | } -------------------------------------------------------------------------------- /Day 1 - 10/Day 9 Geolocation API/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | .container { 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | height: 70vh; 12 | padding: 20px; 13 | margin: 30px; 14 | } 15 | 16 | .location { 17 | font-size: 1.5em; 18 | font-weight: italic; 19 | font-family: Helvetica, Arial, sans-serif; 20 | padding: 20px; 21 | } 22 | 23 | .btn{ 24 | width: 100px; 25 | height: 30px; 26 | background-color: orange; 27 | color: whitesmoke; 28 | cursor: pointer; 29 | } -------------------------------------------------------------------------------- /Day 11 - 20/Day 11 New Year Countdown App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website : https://frosty-mahavira-22584b.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 11 New Year Countdown App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | New year Countdown application 8 | 9 | 10 | 11 |

New year Count Down

12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 12 Time Countdown App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website : https://sleepy-goldwasser-f5c715.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 12 Time Countdown App/images/aron-visuals-BXOXnQ26B7o-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 12 Time Countdown App/images/aron-visuals-BXOXnQ26B7o-unsplash.jpg -------------------------------------------------------------------------------- /Day 11 - 20/Day 12 Time Countdown App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Time Countdown App in Javascript 8 | 9 | 10 | 11 |
12 |

Promo Countdown

13 |

countdown

14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 13 Tip Calculator/README.md: -------------------------------------------------------------------------------- 1 | Here's the link to our website : https://keen-shaw-2ea86b.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 14 Weight Converter/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://eager-wescoff-9466e5.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 14 Weight Converter/images/elena-mozhvilo-j06gLuKK0GM-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 14 Weight Converter/images/elena-mozhvilo-j06gLuKK0GM-unsplash.jpg -------------------------------------------------------------------------------- /Day 11 - 20/Day 15 BMI Caculator/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://compassionate-wilson-ba3a0e.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 16 Random Joke Generator/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://zealous-allen-17064c.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 17 Count Up app/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website : https://hopeful-blackwell-38d194.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 17 Count Up app/images/joshua-eckstein-VAJEea9u6k8-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 17 Count Up app/images/joshua-eckstein-VAJEea9u6k8-unsplash.jpg -------------------------------------------------------------------------------- /Day 11 - 20/Day 17 Count Up app/images/pexels-trang-doan-1024248.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 17 Count Up app/images/pexels-trang-doan-1024248.jpg -------------------------------------------------------------------------------- /Day 11 - 20/Day 18 Alarm Clock App/AlarmClock_Siemen_sound.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 18 Alarm Clock App/AlarmClock_Siemen_sound.mp3 -------------------------------------------------------------------------------- /Day 11 - 20/Day 18 Alarm Clock App/Readme.md: -------------------------------------------------------------------------------- 1 | ### This project was left unfinished for other people who are following the repo, So that they can contribute as well. 2 | ### If you like learning this way, feel free to ask for pull request and submit your solutions. We would be happy to have you on the contributors' panel. 3 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 18 Alarm Clock App/images/clock.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 18 Alarm Clock App/images/clock.jpg -------------------------------------------------------------------------------- /Day 11 - 20/Day 19 Drink Water Goal/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://vibrant-bose-589f27.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 20 Digital Clock/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website : https://jolly-yonath-5ec1c5.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 11 - 20/Day 20 Digital Clock/images/citynight.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 20 Digital Clock/images/citynight.jpg -------------------------------------------------------------------------------- /Day 11 - 20/Day 20 Digital Clock/images/time.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 11 - 20/Day 20 Digital Clock/images/time.jpg -------------------------------------------------------------------------------- /Day 21 - 30/Day 21 Number Guessing Game/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://pensive-allen-848f00.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 22 Wikipedia Search App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://optimistic-feynman-967a69.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 23 Typing Speed App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website: https://sleepy-blackwell-3a58b5.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 23 Typing Speed App/sounds/clap.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 23 Typing Speed App/sounds/clap.wav -------------------------------------------------------------------------------- /Day 21 - 30/Day 23 Typing Speed App/sounds/congrats.wav: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 23 Typing Speed App/sounds/congrats.wav -------------------------------------------------------------------------------- /Day 21 - 30/Day 24 Internet Status Connection Detector/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://warm-bienenstitch-0eb2cb.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 24 Internet Status Connection Detector/images/offline.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 24 Internet Status Connection Detector/images/offline.png -------------------------------------------------------------------------------- /Day 21 - 30/Day 24 Internet Status Connection Detector/images/online.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 24 Internet Status Connection Detector/images/online.png -------------------------------------------------------------------------------- /Day 21 - 30/Day 25 Movie Founder App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to my project : https://graceful-smakager-09401b.netlify.app 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 25 Movie Founder App/images/eren.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 25 Movie Founder App/images/eren.png -------------------------------------------------------------------------------- /Day 21 - 30/Day 26 Number Seperator/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://curious-biscotti-1b9d70.netlify.app 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 27 Colors Game/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website : https://fastidious-kelpie-491ffe.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 27 Colors Game/sounds/blue.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 27 Colors Game/sounds/blue.mp3 -------------------------------------------------------------------------------- /Day 21 - 30/Day 27 Colors Game/sounds/green.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 27 Colors Game/sounds/green.mp3 -------------------------------------------------------------------------------- /Day 21 - 30/Day 27 Colors Game/sounds/red.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 27 Colors Game/sounds/red.mp3 -------------------------------------------------------------------------------- /Day 21 - 30/Day 27 Colors Game/sounds/yellow.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 27 Colors Game/sounds/yellow.mp3 -------------------------------------------------------------------------------- /Day 21 - 30/Day 28 Type Writing Effect/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project : https://peaceful-blancmange-e80dca.netlify.app 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 28 Type Writing Effect/images/UncleJohny.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 28 Type Writing Effect/images/UncleJohny.jpg -------------------------------------------------------------------------------- /Day 21 - 30/Day 28 Type Writing Effect/images/vitalik.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 21 - 30/Day 28 Type Writing Effect/images/vitalik.jpg -------------------------------------------------------------------------------- /Day 21 - 30/Day 29 BlackJack Game/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://splendorous-panda-f13be9.netlify.app 2 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 29 BlackJack Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Blackjack

7 |

Want to play a round?

8 |

Cards:

9 |

Sum:

10 | 11 | 12 |

Abbas :

13 | 14 | 15 | -------------------------------------------------------------------------------- /Day 21 - 30/Day 30 Password Generator/README.md: -------------------------------------------------------------------------------- 1 | #### Here's the link to the project: https://grand-cuchufli-d369b9.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 31 Chrome Extension/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://melodic-duckanoo-fa8924.netlify.app 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 31 Chrome Extension/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 31 Chrome Extension/icon.png -------------------------------------------------------------------------------- /Day 31 - 40/Day 31 Chrome Extension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "version": "1.1", 4 | "name": "Leads Tracker", 5 | "action": { 6 | "default_popup": "index.html", 7 | "default_icon": "icon.png" 8 | }, 9 | "permissions": [ 10 | "tabs" 11 | ] 12 | } -------------------------------------------------------------------------------- /Day 31 - 40/Day 32 Invoice App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://velvety-mandazi-3c92b7.netlify.app 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 33 Infinity Scroll/README.md: -------------------------------------------------------------------------------- 1 | Here's the link to the project: https://glowing-kashata-b5265a.netlify.app 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Advice generator app 2 | 3 | ![Design preview for the Advice generator app coding challenge](./design/desktop-preview.jpg) 4 | 5 | ### Here's the link to the project : https://singular-lolly-17a022.netlify.app/ 6 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/active-states.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/desktop-design.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/desktop-preview.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/design/mobile-design.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/images/favicon-32x32.png -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/images/icon-dice.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/images/pattern-divider-desktop.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 34 Advice Generator App /advice-generator-app-main/images/pattern-divider-mobile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/README.md: -------------------------------------------------------------------------------- 1 | # Frontend Mentor - Interactive pricing component 2 | 3 | ### Here's the link to the project: https://bejewelled-vacherin-b44ad3.netlify.app/ 4 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/active-states.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/active-states.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/desktop-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/desktop-design.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/desktop-preview.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/desktop-preview.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/mobile-design.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/design/mobile-design.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/images/bg-pattern.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/images/favicon-32x32.png -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/images/icon-check.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/images/icon-slider.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 35 Interactive-pricing-component/interactive-pricing-component-main/images/pattern-circles.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 36 Annoying Button Game/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://sage-lollipop-e43145.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 37 Exact Age Calculator/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://dainty-daffodil-018993.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 37 Exact Age Calculator/images/age.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 37 Exact Age Calculator/images/age.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 38 Github Profiles API/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website: https://tranquil-marigold-611710.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 38 Github Profiles API/images/abbas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 31 - 40/Day 38 Github Profiles API/images/abbas.jpg -------------------------------------------------------------------------------- /Day 31 - 40/Day 39 Catch the insect/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://profound-macaron-ab35f4.netlify.app 2 | -------------------------------------------------------------------------------- /Day 31 - 40/Day 40 Dice Game/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://lucent-frangollo-8ecb6a.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 41 Calculator App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://tranquil-kulfi-de29a2.netlify.app/ 2 | 3 | - There's a small bug in this code see if you can find it. 4 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 41 Calculator App/images/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 41 Calculator App/images/favicon-32x32.png -------------------------------------------------------------------------------- /Day 41 - 50/Day 42 Pokedox App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://stalwart-sherbet-e10936.netlify.app 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 43 Drawing App/Readme.md: -------------------------------------------------------------------------------- 1 | Here's the link to the website: https://cheery-jelly-d4db3f.netlify.app 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 44 Quiz App/README.md: -------------------------------------------------------------------------------- 1 | Here's the link to the project: https://mellow-lamington-1f6cbf.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 45 Weather App/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website: https://ephemeral-otter-3f890f.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 45 Weather App/images/weaapp.PNG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 45 Weather App/images/weaapp.PNG -------------------------------------------------------------------------------- /Day 41 - 50/Day 45 Weather App/images/weather.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 45 Weather App/images/weather.png -------------------------------------------------------------------------------- /Day 41 - 50/Day 46 Dark and Light Mode Toggler/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the website: https://mellifluous-shortbread-059aaa.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/README.md: -------------------------------------------------------------------------------- 1 | ### Here is the link to the project: https://stellular-smakager-9dcea5.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/audio/Hey.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 47 Music Player App/audio/Hey.mp3 -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/audio/Summer.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 47 Music Player App/audio/Summer.mp3 -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/audio/Ukulele.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 47 Music Player App/audio/Ukulele.mp3 -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/images/hey.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 47 Music Player App/images/hey.jpg -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/images/summer.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 47 Music Player App/images/summer.jpg -------------------------------------------------------------------------------- /Day 41 - 50/Day 47 Music Player App/images/ukulele.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 47 Music Player App/images/ukulele.jpg -------------------------------------------------------------------------------- /Day 41 - 50/Day 48 Role-Playing-Game/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the Game : https://thriving-paprenjak-5ebb83.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 48 Role-Playing-Game/images/demon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 48 Role-Playing-Game/images/demon.png -------------------------------------------------------------------------------- /Day 41 - 50/Day 48 Role-Playing-Game/images/goblin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 48 Role-Playing-Game/images/goblin.png -------------------------------------------------------------------------------- /Day 41 - 50/Day 48 Role-Playing-Game/images/orc.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 48 Role-Playing-Game/images/orc.png -------------------------------------------------------------------------------- /Day 41 - 50/Day 48 Role-Playing-Game/images/wizard.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 41 - 50/Day 48 Role-Playing-Game/images/wizard.png -------------------------------------------------------------------------------- /Day 41 - 50/Day 48 Role-Playing-Game/utils.js: -------------------------------------------------------------------------------- 1 | function getDiceRollArray(diceCount) { 2 | return new Array(diceCount).fill(0).map(() => 3 | Math.floor(Math.random() * 6) + 1 4 | ) 5 | } 6 | 7 | const getPercentage = (remainingHealth, maximumHealth) => 8 | (100 * remainingHealth) / maximumHealth 9 | 10 | function getDicePlaceholderHtml(diceCount) { 11 | return new Array(diceCount).fill(0).map(() => 12 | `
` 13 | ).join("") 14 | } 15 | 16 | export { getDiceRollArray, getDicePlaceholderHtml, getPercentage } -------------------------------------------------------------------------------- /Day 41 - 50/Day 49 BlogSpace Project/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see it in action](https://sunny-pastelito-998406.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 41 - 50/Day 50 Chrome Home Page Extension/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the Demo: 2 | Screen Shot 2022-06-07 at 11 39 52 AM 3 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/README.md: -------------------------------------------------------------------------------- 1 | ### Here is the link to the project: https://gleaming-capybara-951540.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.4d0ed136.css", 4 | "main.js": "/static/js/main.dea114dd.js", 5 | "static/js/787.28cb0dcd.chunk.js": "/static/js/787.28cb0dcd.chunk.js", 6 | "index.html": "/index.html", 7 | "main.4d0ed136.css.map": "/static/css/main.4d0ed136.css.map", 8 | "main.dea114dd.js.map": "/static/js/main.dea114dd.js.map", 9 | "787.28cb0dcd.chunk.js.map": "/static/js/787.28cb0dcd.chunk.js.map" 10 | }, 11 | "entrypoints": [ 12 | "static/css/main.4d0ed136.css", 13 | "static/js/main.dea114dd.js" 14 | ] 15 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 51 Contact Card/my-app/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 51 Contact Card/my-app/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 51 Contact Card/my-app/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 51 Contact Card/my-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 51 Contact Card/my-app/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 51 Contact Card/my-app/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/src/App.css: -------------------------------------------------------------------------------- 1 | .contact-card { 2 | display: flex; 3 | padding: 10px; 4 | color: #ffffff; 5 | background-color: rgb(42, 84, 104); 6 | font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; 7 | box-shadow: 10px 10px 25px -16px rgba(0, 0, 0, 0.75); 8 | border-radius: 10px; 9 | max-width: 500px; 10 | max-height: 125px; 11 | margin-bottom: 10px; 12 | } 13 | 14 | .contact-card p { 15 | margin-left: 10px; 16 | margin-top: 0; 17 | } 18 | 19 | button { 20 | margin-left: 10px; 21 | margin-bottom: 10px; 22 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 51 Contact Card/my-app/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://fluffy-basbousa-1a5f7c.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.dad4392b.css", 4 | "main.js": "/static/js/main.5f575e37.js", 5 | "static/js/787.ad7113de.chunk.js": "/static/js/787.ad7113de.chunk.js", 6 | "index.html": "/index.html", 7 | "main.dad4392b.css.map": "/static/css/main.dad4392b.css.map", 8 | "main.5f575e37.js.map": "/static/js/main.5f575e37.js.map", 9 | "787.ad7113de.chunk.js.map": "/static/js/787.ad7113de.chunk.js.map" 10 | }, 11 | "entrypoints": [ 12 | "static/css/main.dad4392b.css", 13 | "static/js/main.5f575e37.js" 14 | ] 15 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 52 React Info Site/info-site/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 52 React Info Site/info-site/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 52 React Info Site/info-site/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 52 React Info Site/info-site/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Navbar from './navbar'; 3 | import Main from './Main' 4 | 5 | export default function App() { 6 | return ( 7 |
8 | 9 |
10 |
11 | ) 12 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/Main.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | export default function Main() { 4 | return ( 5 |
6 |

Fun facts about React

7 |
    8 |
  • Was first released in 2013
    • 9 |
  • Was originally created by Jordan Walke
    • 10 |
  • Has well over 100K stars on GitHub
    • 11 |
  • Is maintained by Facebook
    • 12 |
  • Powers thousands of enterprise apps, including mobile apps
    • 13 |
14 |
15 | ) 16 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 52 React Info Site/info-site/src/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/navbar.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | import logo from './logo192.png' 3 | 4 | export default function Navbar() { 5 | return ( 6 | 12 | ) 13 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 52 React Info Site/info-site/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the live demo of the website: https://jocular-cranachan-05f466.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/build/static/media/abbas.0f2de72f0730b5098cd0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/build/static/media/abbas.0f2de72f0730b5098cd0.jpg -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/src/About.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function About() { 4 | return( 5 |
6 | 7 |

About Me

8 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut interdum purus, elementum tincidunt arcu. Donec at nulla in neque facilisis laoreet nec ac risus. Nulla finibus sapien ac augue facilisis.

9 | 10 |
11 | ) 12 | } 13 | 14 | export default About -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/src/Interests.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Interests() { 4 | return( 5 |
6 | 7 |

Interests

8 |

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut interdum purus, elementum tincidunt arcu. Donec at nulla in neque facilisis laoreet nec ac risus. Nulla finibus sapien ac augue facilisis.

9 | 10 |
11 | ) 12 | } 13 | 14 | export default Interests -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/src/images/abbas.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 53 Digital Business Card/business-card/src/images/abbas.jpg -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | background: #22252d; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 11 | monospace; 12 | } 13 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 53 Digital Business Card/business-card/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the React Project: https://cool-taiyaki-a21b79.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.de692649.css", 4 | "main.js": "/static/js/main.8c15ffa4.js", 5 | "index.html": "/index.html", 6 | "main.de692649.css.map": "/static/css/main.de692649.css.map", 7 | "main.8c15ffa4.js.map": "/static/js/main.8c15ffa4.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.de692649.css", 11 | "static/js/main.8c15ffa4.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/1.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/2.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/3.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/grid.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/images/logo.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/1.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/2.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/3.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/grid.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/grid.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/images/logo.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/src/Grid.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Grid() { 4 | return ( 5 |
6 | 7 | grid-images 8 |
9 | 10 |

Online Experiences

11 |

Join Unique Interactive activities led by one-of-a-kind hosts-all without leaving home.

12 | 13 |
14 |
15 | ) 16 | } 17 | 18 | export default Grid -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/src/Navbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | function Navbar() { 4 | 5 | return( 6 | 11 | ) 12 | } 13 | 14 | export default Navbar -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | } 7 | 8 | code { 9 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 10 | monospace; 11 | } 12 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 54 AirBnB Clone/air-bnb/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.querySelector('.root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://celebrated-cat-151624.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/1.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/2.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/3.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.f843ba38.css", 4 | "main.js": "/static/js/main.978ef330.js", 5 | "static/js/787.39019643.chunk.js": "/static/js/787.39019643.chunk.js", 6 | "index.html": "/index.html", 7 | "main.f843ba38.css.map": "/static/css/main.f843ba38.css.map", 8 | "main.978ef330.js.map": "/static/js/main.978ef330.js.map", 9 | "787.39019643.chunk.js.map": "/static/js/787.39019643.chunk.js.map" 10 | }, 11 | "entrypoints": [ 12 | "static/css/main.f843ba38.css", 13 | "static/js/main.978ef330.js" 14 | ] 15 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/path.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/build/path.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/1.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/2.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/3.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/path.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 55 Travel Journal/travel-journal/public/path.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Navbar from './Navbar' 3 | import Content from './Content'; 4 | import data from './data' 5 | // console.log(data) 6 | 7 | function App() { 8 | 9 | const cardData = data.map((item) => { 10 | return ( 11 | 14 | ) 15 | }) 16 | return( 17 | <> 18 | 19 | 20 | 21 | {/* 22 | 23 | */} 24 | {cardData} 25 | 26 | 27 | ) 28 | 29 | } 30 | 31 | export default App; 32 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | } 4 | 5 | body { 6 | margin: 0; 7 | padding: 0; 8 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 15 | monospace; 16 | } 17 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 55 Travel Journal/travel-journal/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://bright-crepe-85e13d.netlify.app 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 56 Meme Generator/meme-generator/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/public/images/memeimg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 56 Meme Generator/meme-generator/public/images/memeimg.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/public/images/troll-face.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 56 Meme Generator/meme-generator/public/images/troll-face.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 56 Meme Generator/meme-generator/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 56 Meme Generator/meme-generator/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/src/App.js: -------------------------------------------------------------------------------- 1 | import './App.css'; 2 | import Header from './Header.js' 3 | import Meme from './Meme.js' 4 | 5 | function App() { 6 | return( 7 |
8 |
9 | 10 |
11 | ) 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/src/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react" 2 | 3 | export default function Header() { 4 | return ( 5 |
6 | 10 |

Meme Generator

11 |

React Course - Project 3

12 |
13 | ) 14 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 56 Meme Generator/meme-generator/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://monumental-sawine-b70557.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.450c6844.css", 4 | "main.js": "/static/js/main.f83c31b6.js", 5 | "index.html": "/index.html", 6 | "main.450c6844.css.map": "/static/css/main.450c6844.css.map", 7 | "main.f83c31b6.js.map": "/static/js/main.f83c31b6.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.450c6844.css", 11 | "static/js/main.f83c31b6.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 57 Emoji App/emoji-app/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 57 Emoji App/emoji-app/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 57 Emoji App/emoji-app/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 57 Emoji App/emoji-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 57 Emoji App/emoji-app/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 57 Emoji App/emoji-app/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/src/App.css: -------------------------------------------------------------------------------- 1 | .heading { 2 | text-align: center; 3 | font-weight: 500; 4 | } 5 | 6 | .input-box { 7 | padding: .6rem; 8 | font-size: 1.2rem; 9 | margin: 0 0 0 20px; 10 | width: 95%; 11 | font-weight: 500; 12 | border: 2px solid grey; 13 | border-radius: 3px; 14 | } 15 | 16 | .emoji-div { 17 | padding: 1rem; 18 | margin-top: 10px; 19 | border: 1px solid lightslategray; 20 | cursor: pointer; 21 | } 22 | 23 | .main-div { 24 | border: 5px solid red; 25 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/src/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Header({setSearch, search}) { 4 | function changeHandler(e) { 5 | setSearch(e.target.value) 6 | } 7 | 8 | return( 9 |
10 |

😺 Emoji Application 😺

11 | 12 | 18 |
19 | ) 20 | } 21 | 22 | 23 | export default Header -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 4 | -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; 6 | background: linear-gradient(to right, pink, white, lightblue); 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 11 | monospace; 12 | } 13 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 57 Emoji App/emoji-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | // If you want to start measuring performance in your app, pass a function 14 | // to log results (for example: reportWebVitals(console.log)) 15 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 16 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the link to the project: https://voluble-concha-ffaa22.netlify.app/ 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 58 Crypto App/crypto-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 58 Crypto App/crypto-app/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 58 Crypto App/crypto-app/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/src/Table.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default function Table() { 4 | return ( 5 |
6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 |
CoinPricePrice DiffMarket Cap :USD$
17 |
18 | ) 19 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | import reportWebVitals from './reportWebVitals'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | // 10 | 11 | // 12 | ); 13 | 14 | // If you want to start measuring performance in your app, pass a function 15 | // to log results (for example: reportWebVitals(console.log)) 16 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 17 | reportWebVitals(); 18 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 58 Crypto App/crypto-app/src/reportWebVitals.js: -------------------------------------------------------------------------------- 1 | const reportWebVitals = onPerfEntry => { 2 | if (onPerfEntry && onPerfEntry instanceof Function) { 3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { 4 | getCLS(onPerfEntry); 5 | getFID(onPerfEntry); 6 | getFCP(onPerfEntry); 7 | getLCP(onPerfEntry); 8 | getTTFB(onPerfEntry); 9 | }); 10 | } 11 | }; 12 | 13 | export default reportWebVitals; 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see the website](https://startling-custard-e1f786.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/static/media/logo.e6ecab4407f10ecd02bd.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/static/media/logo.e6ecab4407f10ecd02bd.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/static/media/spinner.11d9cde8ebaeadb07ba7.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/build/static/media/spinner.11d9cde8ebaeadb07ba7.gif -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/components/UI/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import logo from "../../images/logo.png" 3 | 4 | const Header = () => { 5 | return( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default Header -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/components/UI/Spinner.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import spinnerImg from '../../images/spinner.gif' 3 | const Spinner = () => { 4 | 5 | const spinnerStyles = { 6 | width : '200px', 7 | margin : 'auto', 8 | display : 'block' 9 | } 10 | 11 | return ( 12 | 13 | ) 14 | } 15 | 16 | export default Spinner -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/images/logo.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/images/spinner.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/images/spinner.gif -------------------------------------------------------------------------------- /Day 51 - 60/Day 59 Breaking Bad Character App/breaking-bad-character-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | const root = ReactDOM.createRoot(document.getElementById('root')); 6 | root.render( 7 | 8 | ); -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see the app](https://frolicking-sawine-7284e1.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.045b2c75.css", 4 | "main.js": "/static/js/main.1857ca75.js", 5 | "index.html": "/index.html", 6 | "main.045b2c75.css.map": "/static/css/main.045b2c75.css.map", 7 | "main.1857ca75.js.map": "/static/js/main.1857ca75.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.045b2c75.css", 11 | "static/js/main.1857ca75.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 60 Text Generator/text-generator/build/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 60 Text Generator/text-generator/build/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 60 Text Generator/text-generator/build/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 60 Text Generator/text-generator/public/favicon.ico -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 60 Text Generator/text-generator/public/logo192.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 51 - 60/Day 60 Text Generator/text-generator/public/logo512.png -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | ); 11 | 12 | 13 | -------------------------------------------------------------------------------- /Day 51 - 60/Day 60 Text Generator/text-generator/src/ui/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Header = () => { 4 | return( 5 |
6 |
7 |

Lorem Text Generator

8 |
9 |
10 | ) 11 | } 12 | 13 | export default Header -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see the app](https://illustrious-elf-e90e8d.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.2a2507d0.css", 4 | "main.js": "/static/js/main.f50a12ef.js", 5 | "index.html": "/index.html", 6 | "main.2a2507d0.css.map": "/static/css/main.2a2507d0.css.map", 7 | "main.f50a12ef.js.map": "/static/js/main.f50a12ef.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.2a2507d0.css", 11 | "static/js/main.f50a12ef.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 61 Image App/image-app/build/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 61 Image App/image-app/build/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 61 Image App/image-app/build/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 61 Image App/image-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 61 Image App/image-app/public/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 61 Image App/image-app/public/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/src/Components/Header.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Header = (props) => { 4 | 5 | 6 | return( 7 |
8 |

Image Application

9 | props.setInputValue(event.target.value) } 13 | /> 14 | 17 |
18 | ) 19 | } 20 | 21 | export default Header -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 4 | /* -webkit-font-smoothing: antialiased; 5 | -moz-osx-font-smoothing: grayscale; */ 6 | background: linear-gradient(to left, steelblue, slateblue); 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 11 | monospace; 12 | } 13 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 61 Image App/image-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to play the game](https://courageous-dolphin-9f5471.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.a2997004.css", 4 | "main.js": "/static/js/main.3bcc70e1.js", 5 | "index.html": "/index.html", 6 | "main.a2997004.css.map": "/static/css/main.a2997004.css.map", 7 | "main.3bcc70e1.js.map": "/static/js/main.3bcc70e1.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.a2997004.css", 11 | "static/js/main.3bcc70e1.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/cover.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/helmet-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/helmet-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/potion-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/potion-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/ring-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/ring-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/scroll-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/scroll-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/shield-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/shield-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/img/sword-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/img/sword-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/build/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/cover.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/helmet-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/helmet-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/potion-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/potion-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/ring-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/ring-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/scroll-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/scroll-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/shield-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/shield-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/img/sword-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/img/sword-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 62 Memory Game/memory-game/public/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap'); 2 | 3 | /* base styles */ 4 | body { 5 | font-family: Raleway, sans-serif; 6 | margin: 0; 7 | font-size: 1.5em; 8 | text-align: center; 9 | background: #1b1523; 10 | color: #fff; 11 | } 12 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 62 Memory Game/memory-game/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see the project](https://dynamic-malasada-905655.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.379670a1.css", 4 | "main.js": "/static/js/main.d1ca509b.js", 5 | "index.html": "/index.html", 6 | "main.379670a1.css.map": "/static/css/main.379670a1.css.map", 7 | "main.d1ca509b.js.map": "/static/js/main.d1ca509b.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.379670a1.css", 11 | "static/js/main.d1ca509b.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 63 Movies App/movies-app/build/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 63 Movies App/movies-app/build/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 63 Movies App/movies-app/build/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/build/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 63 Movies App/movies-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 63 Movies App/movies-app/public/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 63 Movies App/movies-app/public/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap'); 2 | 3 | body { 4 | margin: 0; 5 | font-family: Raleway, sans-serif; 6 | /* -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; */ 8 | background: linear-gradient(to right, #465eac, rgb(82, 65, 192)); 9 | color: whitesmoke; 10 | } 11 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 63 Movies App/movies-app/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | ); 10 | 11 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to play the game](https://capable-chaja-907561.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.7aef1001.css", 4 | "main.js": "/static/js/main.5836c01f.js", 5 | "index.html": "/index.html", 6 | "main.7aef1001.css.map": "/static/css/main.7aef1001.css.map", 7 | "main.5836c01f.js.map": "/static/js/main.5836c01f.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.7aef1001.css", 11 | "static/js/main.5836c01f.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/src/Die.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Die = (props) => { 4 | const { value, isHeld, holdDice } = props 5 | 6 | const dieStyles = { 7 | backgroundColor : isHeld ? "#59E391" : "#fff" 8 | } 9 | 10 | 11 | return( 12 |
13 |

{value}

14 | 15 |
16 | ) 17 | } 18 | 19 | export default Die -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 64 Tenzies Game/tenzies-game/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to play the game](https://candid-kulfi-fa2640.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/src/Components/Square.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import '../App.css' 3 | 4 | const Square = (props) => { 5 | 6 | const { value, chooseSquare } = props 7 | 8 | return( 9 |
10 | {value} 11 |
12 | ) 13 | } 14 | 15 | export default Square -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/src/Patterns.js: -------------------------------------------------------------------------------- 1 | export const Patterns = [ 2 | [0, 1, 2], 3 | [3, 4, 5], 4 | [6, 7, 8], 5 | [0 ,3, 6], 6 | [1, 4, 7], 7 | [2, 5, 8], 8 | [0, 4, 8], 9 | [2, 4, 6] 10 | ] 11 | 12 | // This isn't dynamic but there are only nine boxes so it's not a big deal -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 65 Tic Tac Toe Game/tic-tac-toe-game/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see it in action](https://jovial-basbousa-29b32a.netlify.app/) 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/asset-manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": { 3 | "main.css": "/static/css/main.65d60945.css", 4 | "main.js": "/static/js/main.f2d90aae.js", 5 | "index.html": "/index.html", 6 | "main.65d60945.css.map": "/static/css/main.65d60945.css.map", 7 | "main.f2d90aae.js.map": "/static/js/main.f2d90aae.js.map" 8 | }, 9 | "entrypoints": [ 10 | "static/css/main.65d60945.css", 11 | "static/js/main.f2d90aae.js" 12 | ] 13 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/build/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/logo192.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/logo512.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/src/index.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap'); 2 | body { 3 | margin: 0; 4 | font-family: Raleway, sans-serif; 5 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 66 Speed Typing Game/speed-typing-game/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/Components/Toolbar.js: -------------------------------------------------------------------------------- 1 | import { useRouter } from 'next/router' 2 | import styles from '../styles/toolbar.module.css' 3 | 4 | export const Toolbar = () => { 5 | const router = useRouter(); 6 | 7 | return ( 8 |
9 |
router.push('/')}>Home
10 |
router.push('/feed/1')}>Feed
11 |
router.push('/eom')}>EOM
12 |
window.location.href = 'https://twitter.com/KhanAbbas201'}>Twitter
13 |
14 | ) 15 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/README.md: -------------------------------------------------------------------------------- 1 | ## Link to this project will be provided soon 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "news-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.1.6", 13 | "react": "18.1.0", 14 | "react-dom": "18.1.0" 15 | }, 16 | "devDependencies": { 17 | "eslint": "8.16.0", 18 | "eslint-config-next": "12.1.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/pages/index.js: -------------------------------------------------------------------------------- 1 | import styles from '../styles/Home.module.css' 2 | import { Toolbar } from '../Components/Toolbar' 3 | 4 | export default function Home() { 5 | return ( 6 |
7 | 8 |
9 | 10 |

Next.js news App

11 |

You're one stop shop from the latest news articles

12 |
13 |
14 | ) 15 | } 16 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 67 News App/news-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/styles/EOM.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | flex: 1; 3 | display: flex; 4 | align-items: center; 5 | margin-top: 50px; 6 | } 7 | 8 | .employeeOfTheMonth { 9 | text-align: center; 10 | padding: 1rem; 11 | margin-top: 50px; 12 | } 13 | 14 | .employeeOfTheMonth img { 15 | width: 250px; 16 | border-radius: 100%; 17 | } 18 | 19 | .center { 20 | text-align: center; 21 | margin: 0; 22 | margin-top: 50px; 23 | } 24 | 25 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | flex: 1; 3 | display: flex; 4 | align-items: center; 5 | flex-direction: column; 6 | justify-content: center; 7 | } 8 | 9 | .main h1 { 10 | margin-top: -50px; 11 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 6 | } 7 | 8 | a { 9 | color: inherit; 10 | text-decoration: none; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | 17 | .page-container { 18 | display: flex; 19 | height: 100vh; 20 | flex-direction: column; 21 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 67 News App/news-app/styles/toolbar.module.css: -------------------------------------------------------------------------------- 1 | .main { 2 | width: 100%; 3 | height: 50px; 4 | display: flex; 5 | justify-content: center; 6 | } 7 | .main div { 8 | margin: 25px; 9 | cursor: pointer; 10 | } 11 | .main div:hover { 12 | color: rgb(168, 168, 168); 13 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/README.md: -------------------------------------------------------------------------------- 1 | ### Link will be provided soon 2 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quizzical", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "decode": "^0.3.0", 13 | "html-entities": "^2.3.3", 14 | "next": "12.1.6", 15 | "react": "18.1.0", 16 | "react-dom": "18.1.0" 17 | }, 18 | "devDependencies": { 19 | "eslint": "8.16.0", 20 | "eslint-config-next": "12.1.6" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/public/cross.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 68 Quizzical/quizzical/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/public/shape-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 68 Quizzical/quizzical/public/shape-1.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/public/shape-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 68 Quizzical/quizzical/public/shape-2.png -------------------------------------------------------------------------------- /Day 61 - 70/Day 68 Quizzical/quizzical/public/tick.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/README.md: -------------------------------------------------------------------------------- 1 | ### Here's a demo of the project: 2 | 3 | ![Screen Recording 2022-06-03 at 1 07 42 PM](https://user-images.githubusercontent.com/78753275/171868648-a2123578-1224-4ee1-837c-5f9d80085e62.gif) 4 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 69 Notes App/notes-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/styles/globals.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: linear-gradient(to left, hsl(180, 100%, 50%, .5), lightyellow) 3 | } 4 | 5 | @tailwind base; 6 | @tailwind components; 7 | @tailwind utilities; -------------------------------------------------------------------------------- /Day 61 - 70/Day 69 Notes App/notes-app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | "./pages/**/*.{js,ts,jsx,tsx}", 4 | "./components/**/*.{js,ts,jsx,tsx}", 5 | ], 6 | darkMode: "class", 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/README.md: -------------------------------------------------------------------------------- 1 | ### Here's the Demo 2 | 3 | https://user-images.githubusercontent.com/78753275/172145246-8dfb8a15-9173-4deb-8101-48cac8ca4acd.mov 4 | 5 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "game-of-war", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.1.6", 13 | "react": "18.1.0", 14 | "react-dom": "18.1.0", 15 | "react-icons": "^4.4.0" 16 | }, 17 | "devDependencies": { 18 | "autoprefixer": "^10.4.7", 19 | "eslint": "8.17.0", 20 | "eslint-config-next": "12.1.6", 21 | "postcss": "^8.4.14", 22 | "tailwindcss": "^3.0.24" 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 70 Game Of War/game-of-war/public/favicon.ico -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/styles/Home.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 61 - 70/Day 70 Game Of War/game-of-war/styles/Home.module.css -------------------------------------------------------------------------------- /Day 61 - 70/Day 70 Game Of War/game-of-war/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, 6 | Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif; 7 | background: linear-gradient(to left, rgb(108, 167, 226), rgb(185, 236, 185), lightyellow); 8 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif 9 | } 10 | 11 | 12 | @tailwind base; 13 | @tailwind components; 14 | @tailwind utilities; -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/README.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "capstone-project", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.1.6", 13 | "react": "18.1.0", 14 | "react-dom": "18.1.0" 15 | }, 16 | "devDependencies": { 17 | "autoprefixer": "^10.4.7", 18 | "eslint": "8.17.0", 19 | "eslint-config-next": "12.1.6", 20 | "postcss": "^8.4.14", 21 | "tailwindcss": "^3.0.24" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/styles/Home.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/styles/Home.module.css -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 6 | } 7 | 8 | a { 9 | color: inherit; 10 | text-decoration: none; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | 17 | @tailwind base; 18 | @tailwind components; 19 | @tailwind utilities; -------------------------------------------------------------------------------- /Day 71 - 80/Day 71 Capstone Project/capston-project/capstone-project/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | corePlugins: { 3 | preflight: false, 4 | }, 5 | content: [ 6 | "./pages/**/*.{js,ts,jsx,tsx}", 7 | "./components/**/*.{js,ts,jsx,tsx}", 8 | ], 9 | theme: { 10 | extend: {}, 11 | }, 12 | plugins: [], 13 | } 14 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/README.md: -------------------------------------------------------------------------------- 1 | ### Here's What it looks like: 2 | 3 | 4 | https://user-images.githubusercontent.com/78753275/173177423-3260cadd-f04c-4df0-83ec-605a24d11fc5.mov 5 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 72 Todo List App/todo-list/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 6 | background: linear-gradient(to right, dodgerblue, whitesmoke); 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | @tailwind base; 19 | @tailwind components; 20 | @tailwind utilities; 21 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 72 Todo List App/todo-list/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: 'class', 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to play with it yourself](https://expense-tracker-gilt-zeta.vercel.app/) 2 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import { IndexProvider } from '../Context/Context' 3 | 4 | function MyApp({ Component, pageProps }) { 5 | return ( 6 | 7 | 8 | 9 | ) 10 | } 11 | 12 | export default MyApp 13 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 73 Expense Tracker/expense-tracker/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/public/images/front_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 73 Expense Tracker/expense-tracker/public/images/front_img.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/public/images/second_img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 73 Expense Tracker/expense-tracker/public/images/second_img.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/styles/Home.module.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 73 Expense Tracker/expense-tracker/styles/Home.module.css -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 6 | } 7 | 8 | a { 9 | color: inherit; 10 | text-decoration: none; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | 17 | @tailwind base; 18 | @tailwind components; 19 | @tailwind utilities; -------------------------------------------------------------------------------- /Day 71 - 80/Day 73 Expense Tracker/expense-tracker/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkmode: 'class', 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: { 9 | backgroundImage: { 10 | 'light_mode': "url('/expense-tracker/public/front_img.png')", 11 | 'dark_mode': "url('/expense-tracker/public/second_img.png')" 12 | } 13 | }, 14 | }, 15 | plugins: [], 16 | } -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/README.md: -------------------------------------------------------------------------------- 1 | ### [Click here to see if for yourself](https://blog-app-orcin-tau.vercel.app/) 2 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/pages/FullBlog.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Navbar from './Components/Navbar' 3 | import Blogcard from './Components/Blogcard' 4 | 5 | 6 | const FullBlog = () => { 7 | 8 | return ( 9 | <> 10 | 11 |
14 | This page is supposed to show the Full blog but i'm still learning NextJS so you gotta wait longer! 15 | 16 |
17 | 18 | ) 19 | } 20 | 21 | export default FullBlog -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 74 Blog Application/blog-app/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Poppins', sans-serif; 6 | background: linear-gradient(to right, lightskyblue, aquamarine); 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | 18 | 19 | @tailwind base; 20 | @tailwind components; 21 | @tailwind utilities; -------------------------------------------------------------------------------- /Day 71 - 80/Day 74 Blog Application/blog-app/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | darkMode: "class", 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/README.md: -------------------------------------------------------------------------------- 1 | ### This project is incomplete and anyone is welcome to contributing 2 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "candy-crush-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.1.6", 13 | "react": "18.2.0", 14 | "react-dom": "18.2.0" 15 | }, 16 | "devDependencies": { 17 | "eslint": "8.18.0", 18 | "eslint-config-next": "12.1.6" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/blank.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/blank.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/blue-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/blue-candy.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/green-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/green-candy.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/orange-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/orange-candy.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/purple-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/purple-candy.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/red-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/red-candy.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/yellow-candy.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/public/images/yellow-candy.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/styles/Home.module.css: -------------------------------------------------------------------------------- 1 | .h1 { 2 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 3 | text-align: center; 4 | color: rgb(124, 5, 124); 5 | } 6 | 7 | .app { 8 | display: flex; 9 | padding: 40px; 10 | justify-content: center; 11 | } 12 | 13 | .game { 14 | width: 500px; 15 | height: 560px; 16 | display: flex; 17 | flex-wrap: wrap; 18 | } 19 | 20 | /* .game img { 21 | width: 70px; 22 | height: 70px; 23 | } */ -------------------------------------------------------------------------------- /Day 71 - 80/Day 75 Candy Crush Game/candy-crush-game/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | background: linear-gradient(to left, lightskyblue, lightpink, whitesmoke); 6 | } 7 | 8 | a { 9 | color: inherit; 10 | text-decoration: none; 11 | } 12 | 13 | * { 14 | box-sizing: border-box; 15 | } 16 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/logo192.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/logo512.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 76 Wordle Clone/wordle-clone/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 76 Wordle Clone/wordle-clone/src/Components/Grid.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Row from './Row' 3 | 4 | const Grid = (props) => { 5 | const {currentGuess, turn, guesses} = props 6 | const game = guesses.map((guess, idx) => { 7 | if(turn === idx) { 8 | return 9 | } 10 | return 11 | }) 12 | return ( 13 |
14 | {game} 15 |
16 | ) 17 | } 18 | 19 | export default Grid 20 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 76 Wordle Clone/wordle-clone/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/graphql/GET_POKEMONS.tsx: -------------------------------------------------------------------------------- 1 | import { gql } from '@apollo/client' 2 | 3 | export const GET_POKEMONS = gql` 4 | query pokemons($first: Int!) { 5 | pokemons(first: $first) { 6 | id 7 | name 8 | image 9 | maxHP 10 | maxCP 11 | attacks { 12 | special { 13 | name 14 | damage 15 | } 16 | } 17 | } 18 | } 19 | `; -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | swcMinify: true, 5 | } 6 | 7 | module.exports = nextConfig 8 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | import { ApolloProvider, ApolloClient, InMemoryCache } from '@apollo/client'; 4 | 5 | const client = new ApolloClient({ 6 | uri: 'https://graphql-pokemon.now.sh', 7 | cache: new InMemoryCache() 8 | }); 9 | 10 | function MyApp({ Component, pageProps }: AppProps) { 11 | return ( 12 | 13 | 14 | 15 | ) 16 | } 17 | 18 | export default MyApp 19 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/pages/index.tsx: -------------------------------------------------------------------------------- 1 | import type { NextPage } from 'next' 2 | import PokemonsContainer from '../components/PokemonsContainer' 3 | 4 | const Home: NextPage = () => { 5 | return ( 6 |
7 | 8 |
9 | ) 10 | } 11 | 12 | export default Home -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./pages/**/*.{js,ts,jsx,tsx}", 5 | "./components/**/*.{js,ts,jsx,tsx}", 6 | ], 7 | theme: { 8 | extend: {}, 9 | }, 10 | plugins: [], 11 | } -------------------------------------------------------------------------------- /Day 71 - 80/Day 77 GraphQL Pokemon App/graphql-pokemon/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/components/OIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const OIcon = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/components/XIcon.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | export const XIcon = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 | ) 12 | } 13 | 14 | 15 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | 4 | // NOTE: This file should not be edited 5 | // see https://nextjs.org/docs/basic-features/typescript for more information. 6 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | module.exports = { 3 | reactStrictMode: true, 4 | } 5 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "private": true, 3 | "scripts": { 4 | "dev": "next dev", 5 | "build": "next build", 6 | "start": "next start" 7 | }, 8 | "dependencies": { 9 | "next": "latest", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2" 12 | }, 13 | "devDependencies": { 14 | "@types/node": "17.0.4", 15 | "@types/react": "17.0.38", 16 | "autoprefixer": "^10.4.0", 17 | "postcss": "^8.4.5", 18 | "prettier": "^2.5.1", 19 | "prettier-plugin-tailwindcss": "^0.1.1", 20 | "tailwindcss": "^3.0.7", 21 | "typescript": "4.5.4" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/pages/_app.tsx: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | import type { AppProps } from 'next/app' 3 | 4 | function MyApp({ Component, pageProps }: AppProps) { 5 | return 6 | } 7 | 8 | export default MyApp 9 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/prettier.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | singleQuote: true, 3 | semi: false, 4 | } 5 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/public/oicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/public/xicon.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/tailwind.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | content: [ 3 | './pages/**/*.{js,ts,jsx,tsx}', 4 | './components/**/*.{js,ts,jsx,tsx}', 5 | ], 6 | theme: { 7 | extend: { 8 | }, 9 | }, 10 | plugins: [], 11 | } 12 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 78 Tic-Tac-Toe/Tic-Tac-Toe-Game/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "forceConsistentCasingInFileNames": true, 9 | "noEmit": true, 10 | "esModuleInterop": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "jsx": "preserve", 16 | "incremental": true 17 | }, 18 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], 19 | "exclude": ["node_modules"] 20 | } 21 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/README.md: -------------------------------------------------------------------------------- 1 | Here's the complete video link to this project: https://youtu.be/ngc9gnGgUdA -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 79 Memories Saving App/client/public/favicon.ico -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 79 Memories Saving App/client/public/logo192.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 79 Memories Saving App/client/public/logo512.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/actions/posts.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 79 Memories Saving App/client/src/actions/posts.js -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/api/index.js: -------------------------------------------------------------------------------- 1 | import axios from "axios" 2 | 3 | const url = "http://localhost:5001/posts" 4 | 5 | export const fetchPosts = () => { 6 | axios.get(url) 7 | } -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/components/Form/Form.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import useStyles from "./styles"; 3 | 4 | const Form = () => { 5 | const styles = useStyles(); 6 | 7 | return( 8 |
9 |

Form

10 |
11 | ) 12 | } 13 | 14 | export default Form -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/components/Form/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@material-ui/core/styles'; 2 | 3 | export default makeStyles((theme) => ({ 4 | root: { 5 | '& .MuiTextField-root': { 6 | margin: theme.spacing(1), 7 | }, 8 | }, 9 | paper: { 10 | padding: theme.spacing(2), 11 | }, 12 | form: { 13 | display: 'flex', 14 | flexWrap: 'wrap', 15 | justifyContent: 'center', 16 | }, 17 | fileInput: { 18 | width: '97%', 19 | margin: '10px 0', 20 | }, 21 | buttonSubmit: { 22 | marginBottom: 10, 23 | }, 24 | })); -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/components/posts/post/post.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Post = () => { 4 | return( 5 |
6 | POST 7 |
8 | ) 9 | } 10 | 11 | export default Post -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/components/posts/posts.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Post from "./post/post"; 3 | 4 | const Posts = () => { 5 | return( 6 |
7 | POSTS 8 |
9 | ) 10 | } 11 | 12 | export default Posts -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/components/posts/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@material-ui/core/styles'; 2 | 3 | export default makeStyles((theme) => ({ 4 | mainContainer: { 5 | display: 'flex', 6 | alignItems: 'center', 7 | }, 8 | smMargin: { 9 | margin: theme.spacing(1), 10 | }, 11 | actionDiv: { 12 | textAlign: 'center', 13 | }, 14 | })); -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/images/memories.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/Day 79 Memories Saving App/client/src/images/memories.png -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | import { Provider } from 'redux'; 5 | import { configureStore, applyMiddleware, compose } from 'redux'; 6 | import thunk from "redux-thunk"; 7 | import reducers from "./reducers"; 8 | 9 | const store = configureStore(reducers, compose(applyMiddleware(thunk))); 10 | 11 | const root = ReactDOM.createRoot(document.getElementById('root')); 12 | root.render( 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | import posts from "./posts"; 3 | 4 | export default combineReducers({ 5 | posts, 6 | }); -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/reducers/posts.js: -------------------------------------------------------------------------------- 1 | export default (posts = [], action) => { 2 | switch (action.type) { 3 | case 'FETCH ALL': 4 | return posts 5 | case 'CREATE': 6 | return posts 7 | default: 8 | return posts 9 | } 10 | } -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/client/src/styles.js: -------------------------------------------------------------------------------- 1 | import { makeStyles } from '@material-ui/core/styles'; 2 | 3 | export default makeStyles(() => ({ 4 | appBar: { 5 | borderRadius: 15, 6 | margin: '30px 0', 7 | display: 'flex', 8 | flexDirection: 'row', 9 | justifyContent: 'center', 10 | alignItems: 'center', 11 | }, 12 | heading: { 13 | color: 'rgba(0,183,255, 1)', 14 | }, 15 | image: { 16 | marginLeft: '15px', 17 | }, 18 | })); -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/server/Models/postMessage.js: -------------------------------------------------------------------------------- 1 | import mongoose from "mongoose"; 2 | 3 | // creating a schema of the properties that a particular post is going to consist of 4 | const postSchema = mongoose.Schema({ 5 | title: String, 6 | message: String, 7 | creator: String, 8 | tags: [String], 9 | selectedFile: String, 10 | likedCount: { 11 | type: Number, 12 | default: 0 13 | }, 14 | createdAt: { 15 | type: Date, 16 | default: new Date() 17 | } 18 | }); 19 | 20 | const postMessage = mongoose.model('PostMessage', postSchema); 21 | 22 | 23 | export default postMessage -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/server/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "server", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "start": "nodemon index.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "body-parser": "^1.20.1", 15 | "cors": "^2.8.5", 16 | "dotenv": "^16.0.3", 17 | "express": "^4.18.2", 18 | "mongoose": "^6.8.3", 19 | "nodemon": "^2.0.20" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Day 71 - 80/Day 79 Memories Saving App/server/routes/posts.js: -------------------------------------------------------------------------------- 1 | import { Router } from "express"; 2 | import { getPosts, createPost } from "../controllers/posts.js"; 3 | 4 | const router = Router(); 5 | 6 | router.get("/", getPosts) 7 | 8 | router.post("/", createPost) 9 | 10 | export default router -------------------------------------------------------------------------------- /Day 71 - 80/React-Native-App/assets/adaptive-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/React-Native-App/assets/adaptive-icon.png -------------------------------------------------------------------------------- /Day 71 - 80/React-Native-App/assets/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/React-Native-App/assets/favicon.png -------------------------------------------------------------------------------- /Day 71 - 80/React-Native-App/assets/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/React-Native-App/assets/icon.png -------------------------------------------------------------------------------- /Day 71 - 80/React-Native-App/assets/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Day 71 - 80/React-Native-App/assets/splash.png -------------------------------------------------------------------------------- /Day 71 - 80/React-Native-App/babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = function(api) { 2 | api.cache(true); 3 | return { 4 | presets: ['babel-preset-expo'], 5 | }; 6 | }; 7 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 100Days--100JavaScript-React-Projects 2 | 3 | ### In this Repository i will be uploading Javascript or React Project that i build including it's published links. 4 | 5 | ### The first 50 projects are made using html, vanilla css and vanilla Javascript. 6 | ### Rest have been built with React and NextJS with tailwindcss 7 | -------------------------------------------------------------------------------- /Scrimba Javascript/Blackjack Game/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

Blackjack

7 |

Want to play a round?

8 |

Cards:

9 |

Sum:

10 | 11 | 12 |

Abbas :

13 | 14 | 15 | -------------------------------------------------------------------------------- /Scrimba Javascript/Bored Bot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |

🤖 BoredBot 🤖

9 |

Find something to do

10 | 11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Scrimba Javascript/Bored Bot/index.js: -------------------------------------------------------------------------------- 1 | document.getElementById("get-activity").addEventListener("click", function() { 2 | fetch("https://apis.scrimba.com/bored/api/activity") 3 | .then(response => response.json()) 4 | .then(data => { 5 | document.getElementById("activity").textContent = data.activity 6 | document.getElementById("title").textContent = "🦾 HappyBot🦿" 7 | document.body.classList.add("fun") 8 | }) 9 | }) 10 | -------------------------------------------------------------------------------- /Scrimba Javascript/Chrome Extension/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Scrimba Javascript/Chrome Extension/icon.png -------------------------------------------------------------------------------- /Scrimba Javascript/Chrome Extension/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "manifest_version": 3, 3 | "version": "1.1", 4 | "name": "Leads Tracker", 5 | "action": { 6 | "default_popup": "index.html", 7 | "default_icon": "icon.png" 8 | }, 9 | "permissions": [ 10 | "tabs" 11 | ] 12 | } -------------------------------------------------------------------------------- /Scrimba Javascript/Passenger Counter App/README.md: -------------------------------------------------------------------------------- 1 | ## [Click here to see it in action](https://zealous-mahavira-915289.netlify.app/) 2 | -------------------------------------------------------------------------------- /Scrimba Javascript/Passenger Counter App/styles.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: rgb(225, 233, 151); 9 | } 10 | 11 | h2 { 12 | font-size: 50px; 13 | margin-top: 0; 14 | margin-bottom: 20px; 15 | } 16 | 17 | button { 18 | border: none; 19 | padding-top: 10px; 20 | padding-bottom: 10px; 21 | cursor: pointer; 22 | color: rgb(92, 111, 219); 23 | font-weight: bold; 24 | width: 100px; 25 | margin-bottom: 5px; 26 | border-radius: 5px; 27 | } 28 | -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/Components/Start.js: -------------------------------------------------------------------------------- 1 | import styles from '../styles/Home.module.css' 2 | import Link from 'next/link' 3 | 4 | const Start = () => { 5 | return( 6 |
7 |

Quizzical

8 |

Let's see how good you are at Quizzes

9 | 10 | 11 | 12 |
13 | ) 14 | } 15 | 16 | export default Start -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "quizzical", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "next": "12.1.6", 13 | "react": "18.1.0", 14 | "react-dom": "18.1.0" 15 | }, 16 | "devDependencies": { 17 | "@babel/core": "^7.18.0", 18 | "eslint": "8.16.0", 19 | "eslint-config-next": "12.1.6" 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/pages/Correct.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Correct = (props) => { 4 | const { count } = props 5 | 6 | return ( 7 |
8 |

You scored {count}/5

9 |
10 | ) 11 | } 12 | 13 | export default Correct -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '../styles/globals.css' 2 | 3 | function MyApp({ Component, pageProps }) { 4 | return 5 | } 6 | 7 | export default MyApp 8 | -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/pages/api/hello.js: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | 3 | export default function handler(req, res) { 4 | res.status(200).json({ name: 'John Doe' }) 5 | } 6 | -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/pages/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Start from '../Components/Start' 3 | const Home = () => { 4 | return ( 5 |
6 | 7 |
8 | 9 | ) 10 | } 11 | 12 | export default Home -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abbas-Khann/100Days-100JavaScript-React-Projects/c95e7087ab2f0b55eac219237340d57a85323aab/Scrimba Javascript/Quizzical/quizzical/public/favicon.ico -------------------------------------------------------------------------------- /Scrimba Javascript/Quizzical/quizzical/styles/globals.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; 6 | background: linear-gradient(to right, #FFFAD1, lightskyblue); 7 | } 8 | 9 | a { 10 | color: inherit; 11 | text-decoration: none; 12 | } 13 | 14 | * { 15 | box-sizing: border-box; 16 | } 17 | -------------------------------------------------------------------------------- /Web2_Backend_Learning/Mongoose-Fundamentals/README.md: -------------------------------------------------------------------------------- 1 | # MongoDB and Mongoose Challenges 2 | 3 | This is the boilerplate for the MongoDB and Mongoose lessons. Instructions for completing these lessons start at https://www.freecodecamp.org/learn/apis-and-microservices/mongodb-and-mongoose/ 4 | -------------------------------------------------------------------------------- /Web2_Backend_Learning/index.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import bodyParser from "body-parser"; 3 | import usersRoutes from "./servers/users.js"; 4 | 5 | const app = express(); 6 | const PORT = 5001 || 5002; 7 | // using the bodyParser as JSON 8 | app.use(bodyParser.json()) 9 | 10 | app.use("/users", usersRoutes); 11 | 12 | app.get("/", (req, res) => { 13 | console.log("Getting successfully!") 14 | res.send("On the / page") 15 | }) 16 | 17 | // Running the server 18 | app.listen(PORT, () => console.log(`Server Running on http://localhost:${PORT}`)) 19 | -------------------------------------------------------------------------------- /Web2_Backend_Learning/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "rest-api", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "type": "module", 7 | "scripts": { 8 | "start": "nodemon index.js" 9 | }, 10 | "keywords": [], 11 | "author": "", 12 | "license": "ISC", 13 | "dependencies": { 14 | "express": "^4.18.2", 15 | "uuid": "^9.0.0" 16 | }, 17 | "devDependencies": { 18 | "nodemon": "^2.0.20" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Web2_Backend_Learning/servers/users.js: -------------------------------------------------------------------------------- 1 | import express from "express"; 2 | import { addUser, deleteUser, getUser, getUsers, updateUser } from "../controllers/users.js"; 3 | 4 | const router = express.Router(); 5 | 6 | router.get("/", getUsers) 7 | 8 | router.get("/:id", getUser) 9 | 10 | router.post("/", addUser) 11 | // get the id of the user on a specific path 12 | // delete a specific user 13 | router.delete("/:id", deleteUser) 14 | 15 | router.patch("/:id", updateUser) 16 | 17 | export default router -------------------------------------------------------------------------------- /Web2_Backend_Learning/user.json: -------------------------------------------------------------------------------- 1 | { 2 | "firstName": "John", 3 | "lastName": "Doe", 4 | "age": 25 5 | } --------------------------------------------------------------------------------