├── .gitignore ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── SECURITY.md ├── day001 └── counter-game │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── components │ └── HomePage │ │ ├── HomePage.css │ │ └── HomePage.js │ ├── index.css │ └── index.js ├── day002 └── custom-form │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.js │ ├── components │ └── CustomForm │ │ ├── CustomForm.css │ │ └── CustomForm.js │ ├── index.css │ └── index.js ├── day003 └── tik-tac-toe │ ├── .gitignore │ ├── 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 │ ├── App.test.js │ ├── components │ ├── Board.js │ ├── Game.js │ ├── Square.js │ └── common │ │ └── Utils.js │ ├── index.css │ ├── index.js │ ├── logo.svg │ ├── reportWebVitals.js │ └── setupTests.js ├── day004 └── stopwatch │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── components │ ├── App.css │ ├── App.js │ ├── common │ │ ├── button │ │ │ ├── Button.css │ │ │ └── Button.js │ │ └── header │ │ │ ├── Header.css │ │ │ └── Header.js │ ├── stopwatch │ │ ├── Stopwatch.css │ │ └── Stopwatch.js │ └── timer │ │ ├── Timer.css │ │ └── Timer.js │ ├── index.css │ └── index.js ├── day005 └── snake-game │ ├── .gitignore │ ├── 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 │ ├── components │ ├── Food.js │ └── Snake.js │ ├── index.css │ └── index.js ├── day006 └── dino-game │ ├── .gitignore │ ├── 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 │ ├── components │ └── Dino │ │ ├── Dino.css │ │ ├── Dino.js │ │ └── img │ │ ├── cactus.png │ │ └── trex.png │ ├── index.css │ └── index.js ├── day007 └── drag-drop │ ├── .gitignore │ ├── 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 │ ├── index.css │ └── index.js ├── day008 └── tags-input │ ├── .gitignore │ ├── 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 │ ├── component │ └── TagInput.js │ ├── index.css │ └── index.js ├── day009 └── shoppinn │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── assets │ │ ├── benjamin-rascoe-KF-q_SGqswg-unsplash.jpg │ │ ├── caio-coelho-xFmXLq_KJxg-unsplash.jpg │ │ ├── chris-lynch-pRdi2no2fvs-unsplash.jpg │ │ ├── dami-adebayo-k6aQzmIbR1s-unsplash.jpg │ │ ├── dom-hill-nimElTcTNyY-unsplash.jpg │ │ ├── faith-yarn-Wr0TpKqf26s-unsplash.jpg │ │ ├── freestocks-8hAsLeE6Fbo-unsplash.jpg │ │ ├── irene-kredenets-dwKiHoqqxk8-unsplash.jpg │ │ ├── paul-gaudriault-a-QH9MAAVNI-unsplash.jpg │ │ ├── phil-monte-4V4t0JcOM5E-unsplash.jpg │ │ └── revolt-164_6wVEHfI-unsplash.jpg │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── cart │ │ ├── Cart.css │ │ └── Cart.js │ ├── checkout │ │ ├── Checkout.css │ │ └── Checkout.js │ ├── home │ │ ├── HomePage.css │ │ └── HomePage.js │ ├── item │ │ ├── Item.css │ │ └── Item.js │ ├── itemDetail │ │ ├── ItemDetail.css │ │ └── ItemDetail.js │ ├── itemList │ │ ├── ItemList.css │ │ └── ItemList.js │ ├── navbar │ │ ├── Navbar.css │ │ └── Navbar.js │ └── orders │ │ ├── Orders.css │ │ └── Orders.js │ ├── context │ ├── AppReducer.js │ └── GlobalState.js │ ├── index.css │ ├── index.js │ └── mockData │ └── items.json ├── day010 └── personal-portfolio │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon-VA.svg │ ├── index.html │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── components │ ├── AboutPage.css │ ├── AboutPage.js │ ├── ContactPage.css │ ├── ContactPage.js │ ├── EducationPage.css │ ├── EducationPage.js │ ├── HomePage.css │ ├── HomePage.js │ ├── Navbar.css │ ├── Navbar.js │ ├── ProjectPage.css │ ├── ProjectPage.js │ ├── SkillPage.css │ └── SkillPage.js │ ├── index.css │ └── index.js ├── day011 └── shopping_cart │ ├── .eslintrc.json │ ├── .gitignore │ ├── README.md │ ├── api │ └── index.js │ ├── components │ └── Card.jsx │ ├── jsconfig.json │ ├── next.config.js │ ├── package-lock.json │ ├── package.json │ ├── pages │ ├── Page.jsx │ ├── _app.js │ ├── _document.js │ ├── api │ │ └── hello.js │ └── index.js │ ├── postcss.config.js │ ├── public │ ├── favicon.ico │ ├── machines │ │ ├── 1.png │ │ ├── 2.png │ │ ├── 3.png │ │ ├── 4.png │ │ ├── 5.png │ │ ├── 6.png │ │ └── 7.png │ ├── next.svg │ ├── thirteen.svg │ └── vercel.svg │ ├── slices │ └── cartSlice.js │ ├── store │ └── store.js │ ├── styles │ └── globals.css │ └── tailwind.config.js ├── day012 └── sticky-notes │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── add_new_note.png │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ ├── robots.txt │ └── sticky-note-logo.png │ └── src │ ├── App.js │ ├── components │ ├── ColorCustomizer.css │ ├── ColorCustomizer.js │ ├── EmptyNotes.css │ ├── EmptyNotes.js │ ├── Header.css │ ├── Header.js │ ├── StickyNote.css │ ├── StickyNote.js │ ├── StickyNotesGrid.css │ ├── StickyNotesGrid.js │ └── SvgIcons.js │ ├── context │ └── StickyNotesContext.js │ ├── hooks │ └── useDebounce.js │ ├── index.css │ └── index.js ├── day013 └── music-player │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ ├── robots.txt │ └── zunzun.png │ └── src │ ├── App.js │ ├── components │ ├── Controls.css │ ├── Controls.js │ ├── DisplayTrack.css │ ├── DisplayTrack.js │ ├── Header.css │ ├── Header.js │ ├── MusicPlayer.css │ ├── MusicPlayer.js │ ├── PlayList.css │ ├── PlayList.js │ ├── Player.css │ ├── Player.js │ ├── ProgressBar.css │ └── ProgressBar.js │ ├── context │ └── TrackContext.js │ ├── data.js │ ├── helpers.js │ ├── hooks │ └── useTrack.js │ ├── index.css │ └── index.js ├── day014 └── Random-Dog-Pic-Generate │ ├── .eslintrc.cjs │ ├── .gitignore │ ├── README.md │ ├── index.html │ ├── package-lock.json │ ├── package.json │ ├── public │ └── dog.svg │ ├── src │ ├── App.jsx │ ├── Assets │ │ └── dog.jpg │ ├── Components │ │ ├── BreedSelector.jsx │ │ ├── Dog.jsx │ │ ├── DogImage.jsx │ │ ├── Footer.jsx │ │ └── Header.jsx │ ├── index.css │ └── main.jsx │ └── vite.config.js ├── package-lock.json └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | *node_modules -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing to react-project-ideas 2 | We love your input! We want to make contributing to this project as easy and transparent as possible, whether it's: 3 | 4 | - Add a new project 5 | - Reporting a bug 6 | - Submitting a fix 7 | - Proposing new features 8 | - Becoming a maintainer 9 | 10 | ## We Develop with Github 11 | We use github to host code, to track issues and feature requests, as well as accept pull requests. 12 | 13 | ## We Use [Github Flow](https://guides.github.com/introduction/flow/index.html), So All Code Changes Happen Through Pull Requests 14 | Pull requests are the best way to propose changes to the codebase (we use [Github Flow](https://guides.github.com/introduction/flow/index.html)). We actively welcome your pull requests: 15 | 16 | 1. Fork the repo and create your branch from `master`. 17 | 2. Add your project or make any change to your branch. 18 | 3. Issue that pull request! 19 | 20 | ## Any contributions you make will be under the MIT Software License 21 | In short, when you submit code changes, your submissions are understood to be under the same [MIT License](http://choosealicense.com/licenses/mit/) that covers the project. Feel free to contact the maintainers if that's a concern. 22 | 23 | ## Report bugs using Github's [issues](https://github.com/Vasu7389/react-project-ideas/issues) 24 | We use GitHub issues to track public bugs. Report a bug by opening a new issue, it's that easy! 25 | 26 | ## License 27 | By contributing, you agree that your contributions will be licensed under its MIT License. 28 | 29 | ## References 30 | This document was adapted from the open-source contribution guidelines for [Facebook's Draft](https://github.com/facebook/draft-js/blob/a9316a723f9e918afde44dea68b5f9f39b7d9b00/CONTRIBUTING.md) 31 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2022 Vasu7389 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /SECURITY.md: -------------------------------------------------------------------------------- 1 | # Security Policy 2 | 3 | ## Reporting a Vulnerability 4 | 5 | If you find a security vulnerability please contact awasthi.vasu65@gmail.com with details. 6 | -------------------------------------------------------------------------------- /day001/counter-game/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day001/counter-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day001/counter-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day001/counter-game/public/favicon.ico -------------------------------------------------------------------------------- /day001/counter-game/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day001/counter-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day001/counter-game/public/logo192.png -------------------------------------------------------------------------------- /day001/counter-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day001/counter-game/public/logo512.png -------------------------------------------------------------------------------- /day001/counter-game/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 | -------------------------------------------------------------------------------- /day001/counter-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day001/counter-game/src/App.js: -------------------------------------------------------------------------------- 1 | import HomePage from "./components/HomePage/HomePage"; 2 | 3 | function App() { 4 | return ; 5 | } 6 | 7 | export default App; 8 | -------------------------------------------------------------------------------- /day001/counter-game/src/components/HomePage/HomePage.css: -------------------------------------------------------------------------------- 1 | .home-container { 2 | display: flex; 3 | justify-content: space-evenly; 4 | align-items: center; 5 | flex-direction: column; 6 | font-family: monospace; 7 | background-color: black; 8 | color: white; 9 | height: 100%; 10 | } 11 | 12 | .home-header { 13 | font-size: 2rem; 14 | } 15 | 16 | .home-count { 17 | font-size: 10rem; 18 | margin: 30px; 19 | text-shadow: 10px 5px red; 20 | } 21 | 22 | .home-timer { 23 | font-size: 5rem; 24 | opacity: 0.5; 25 | text-shadow: 5px 5px #424242; 26 | } 27 | 28 | .home-btn-start { 29 | background-color: #e7da3d; 30 | } 31 | 32 | .home-btn-click { 33 | background-color: #3dd1e7; 34 | } 35 | 36 | .home-btn-reset { 37 | background-color: #e73d9f; 38 | } 39 | 40 | .btn { 41 | font-family: inherit; 42 | font-size: 1.5rem; 43 | border-radius: 10px; 44 | color: black; 45 | width: 50%; 46 | max-width: 200px; 47 | height: 50px; 48 | border: none; 49 | font-weight: 600; 50 | } 51 | 52 | .btn:active { 53 | background-color: white; 54 | border: black 1px solid; 55 | } 56 | -------------------------------------------------------------------------------- /day001/counter-game/src/components/HomePage/HomePage.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import "./HomePage.css"; 3 | 4 | function HomePage() { 5 | const [count, setCount] = useState(0); 6 | const [timer, setTimer] = useState(0); 7 | useEffect(() => { 8 | if (timer === 0) return; 9 | 10 | const interval = setInterval(() => { 11 | setTimer(timer - 1); 12 | }, 1000); 13 | 14 | return () => { 15 | clearInterval(interval); 16 | }; 17 | }, [timer]); 18 | 19 | return ( 20 |
21 |
timer:{timer}
22 |
{count}
23 | 33 | 40 | 49 |
50 | ); 51 | } 52 | 53 | export default HomePage; 54 | -------------------------------------------------------------------------------- /day001/counter-game/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | } 4 | 5 | #root { 6 | height: 100vh; 7 | } 8 | -------------------------------------------------------------------------------- /day001/counter-game/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "./index.css"; 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 | -------------------------------------------------------------------------------- /day002/custom-form/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day002/custom-form/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "custom-form", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day002/custom-form/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day002/custom-form/public/favicon.ico -------------------------------------------------------------------------------- /day002/custom-form/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day002/custom-form/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day002/custom-form/public/logo192.png -------------------------------------------------------------------------------- /day002/custom-form/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day002/custom-form/public/logo512.png -------------------------------------------------------------------------------- /day002/custom-form/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 | -------------------------------------------------------------------------------- /day002/custom-form/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day002/custom-form/src/App.js: -------------------------------------------------------------------------------- 1 | import { useRef, useState } from "react"; 2 | import CustomForm from "./components/CustomForm/CustomForm"; 3 | 4 | function App() { 5 | const usernameRef = useRef(); 6 | const passwordRef = useRef(); 7 | const handleLogin = () => { 8 | console.log("login"); 9 | console.log(usernameRef.current.value); 10 | console.log(passwordRef.current.value); 11 | alert( 12 | "Username: " + 13 | usernameRef.current.value + 14 | `\n` + 15 | "Password: " + 16 | passwordRef.current.value 17 | ); 18 | }; 19 | const handleRegister = () => { 20 | console.log("register"); 21 | console.log(usernameRef.current.value); 22 | console.log(passwordRef.current.value); 23 | }; 24 | return ( 25 |
26 | 52 |
53 | ); 54 | } 55 | 56 | export default App; 57 | -------------------------------------------------------------------------------- /day002/custom-form/src/components/CustomForm/CustomForm.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Poppins", sans-serif; 3 | letter-spacing: 0.3px; 4 | color: #3d3d3d; 5 | } 6 | 7 | .form-container { 8 | width: 400px; 9 | background-color: rgba(255, 255, 255, 0.13); 10 | position: absolute; 11 | transform: translate(-50%, -50%); 12 | top: 50%; 13 | left: 50%; 14 | border-radius: 10px; 15 | border: 2px solid rgba(255, 255, 255, 0.1); 16 | box-shadow: 0 0 40px rgba(8, 7, 16, 0.2); 17 | padding: 50px 35px; 18 | outline: none; 19 | border: none; 20 | } 21 | 22 | label { 23 | display: block; 24 | font-size: 15px; 25 | font-weight: 600; 26 | margin: 20px; 27 | margin-bottom: 10px; 28 | } 29 | 30 | .form-input { 31 | border: none; 32 | color: #383838; 33 | border-bottom: 2px solid #d1d1d4; 34 | margin-left: 20px; 35 | font-weight: 500; 36 | font-size: 16px; 37 | height: 30px; 38 | width: 88%; 39 | transition: 0.2s; 40 | } 41 | 42 | input:focus { 43 | outline: none; 44 | border-bottom-color: #6a679e; 45 | } 46 | 47 | button { 48 | width: 40%; 49 | background-color: #6a56b5; 50 | color: #e7e7e7; 51 | margin: 20px; 52 | height: 40px; 53 | font-size: 17px; 54 | font-weight: 500; 55 | border-radius: 5px; 56 | cursor: pointer; 57 | border: none; 58 | font-family: "Poppins", sans-serif; 59 | } 60 | -------------------------------------------------------------------------------- /day002/custom-form/src/components/CustomForm/CustomForm.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./CustomForm.css"; 3 | 4 | function CustomForm(props) { 5 | return ( 6 |
7 | {Object.keys(props).map((key) => 8 | props[key].isInput ? ( 9 | <> 10 | 11 | 19 | 20 | ) : ( 21 | 29 | ) 30 | )} 31 |
32 | ); 33 | } 34 | 35 | export default CustomForm; 36 | -------------------------------------------------------------------------------- /day002/custom-form/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 | -------------------------------------------------------------------------------- /day002/custom-form/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 | 9 | 10 | ); 11 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tik-tac-toe", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day003/tik-tac-toe/public/favicon.ico -------------------------------------------------------------------------------- /day003/tik-tac-toe/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day003/tik-tac-toe/public/logo192.png -------------------------------------------------------------------------------- /day003/tik-tac-toe/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day003/tik-tac-toe/public/logo512.png -------------------------------------------------------------------------------- /day003/tik-tac-toe/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 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | height: 100vh; 4 | } 5 | 6 | .App-logo { 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | @media (prefers-reduced-motion: no-preference) { 12 | .App-logo { 13 | animation: App-logo-spin infinite 20s linear; 14 | } 15 | } 16 | 17 | .App-header { 18 | background-color: #282c34; 19 | min-height: 100vh; 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | font-size: calc(10px + 2vmin); 25 | color: white; 26 | } 27 | 28 | .App-link { 29 | color: #61dafb; 30 | } 31 | 32 | @keyframes App-logo-spin { 33 | from { 34 | transform: rotate(0deg); 35 | } 36 | to { 37 | transform: rotate(360deg); 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | import Game from "./components/Game"; 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/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 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/components/Board.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Square from "./Square"; 3 | 4 | const style = { 5 | borderRadius: "10px", 6 | width: "250px", 7 | height: "250px", 8 | margin: "0 auto", 9 | display: "grid", 10 | gridTemplate: "repeat(3, 1fr) / repeat(3, 1fr)", 11 | boxShadow: "#3c8be0 5px 5px 3px 0px", 12 | }; 13 | 14 | const Board = ({ squares, handleClick }) => ( 15 |
16 | {squares.map((square, index) => ( 17 | handleClick(index)} /> 18 | ))} 19 |
20 | ); 21 | 22 | export default Board; 23 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/components/Game.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | import { calculateWinner } from "./common/Utils"; 3 | import Board from "./Board"; 4 | 5 | const style = { 6 | container: { 7 | display: "flex", 8 | flexDirection: "column", 9 | alignContent: "center", 10 | justifyContent: "space-evenly", 11 | height: "100%", 12 | }, 13 | info: { 14 | fontSize: "2rem", 15 | opacity: "0.5", 16 | textShadow: "5px 5px #424242", 17 | }, 18 | }; 19 | 20 | const Game = () => { 21 | //board state initial = [null,null,null,null,null,null,null,null,null] 22 | const [board, setBoard] = useState(Array(9).fill(null)); 23 | //state to track next turn 24 | const [xTurn, setXTurn] = useState(true); 25 | //variable to find winner (otherwise equals to null) 26 | const winner = calculateWinner(board); 27 | 28 | //everytime checks if winner is present or clicked on marked square then just returns 29 | //otherwise update board array's clicked index value with 'X' or 'O' 30 | const handleClick = (i) => { 31 | const tmpBoard = [...board]; 32 | if (!!winner || !!tmpBoard[i]) return; 33 | 34 | tmpBoard[i] = xTurn ? "X" : "O"; 35 | setBoard(tmpBoard); 36 | setXTurn(!xTurn); 37 | }; 38 | 39 | const resetBoard = () => ( 40 | 41 | ); 42 | 43 | return ( 44 |
45 |

46 | {winner ? "Winner: " + winner : "Next Player: " + (xTurn ? "X" : "O")} 47 |

48 | 49 |
{resetBoard()}
50 |
51 | ); 52 | }; 53 | 54 | export default Game; 55 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/components/Square.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const style = { 4 | background: "#e73d9f", 5 | border: "2px solid #4935ff", 6 | fontSize: "2rem", 7 | fontWeight: "800", 8 | cursor: "pointer", 9 | outline: "none", 10 | }; 11 | 12 | const Square = ({ value, onClick }) => ( 13 | 16 | ); 17 | 18 | export default Square; 19 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/components/common/Utils.js: -------------------------------------------------------------------------------- 1 | //method to calculate winner based on possible win scenarios 2 | export function calculateWinner(board) { 3 | const possibleWinSquares = [ 4 | [0, 1, 2], 5 | [3, 4, 5], 6 | [6, 7, 8], 7 | [0, 4, 8], 8 | [2, 4, 6], 9 | [0, 3, 6], 10 | [1, 4, 7], 11 | [2, 5, 8], 12 | ]; 13 | 14 | for (let i = 0; i < possibleWinSquares.length; i++) { 15 | const [a, b, c] = possibleWinSquares[i]; 16 | if (board[a] && board[a] === board[b] && board[a] === board[c]) { 17 | return board[a]; 18 | } 19 | } 20 | 21 | return null; 22 | } 23 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/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 | font-family: monospace; 9 | background-color: black; 10 | color: white; 11 | } 12 | 13 | code { 14 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 15 | monospace; 16 | } 17 | 18 | button { 19 | font-family: inherit; 20 | font-size: 1.5rem; 21 | border-radius: 10px; 22 | color: black; 23 | border: none; 24 | font-weight: 600; 25 | background-color: #e7da3d; 26 | } 27 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/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 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/src/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/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 | -------------------------------------------------------------------------------- /day003/tik-tac-toe/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 | -------------------------------------------------------------------------------- /day004/stopwatch/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | #vscode 9 | /.vscode 10 | 11 | # testing 12 | /coverage 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /day004/stopwatch/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "stopwatch", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.14.1", 7 | "@testing-library/react": "^11.2.7", 8 | "@testing-library/user-event": "^12.8.3", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^1.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /day004/stopwatch/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day004/stopwatch/public/favicon.ico -------------------------------------------------------------------------------- /day004/stopwatch/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | 28 | 29 | 33 | 40 | Stopwatch 41 | 42 | 43 | 44 |
45 | 55 | 56 | 57 | -------------------------------------------------------------------------------- /day004/stopwatch/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day004/stopwatch/public/logo192.png -------------------------------------------------------------------------------- /day004/stopwatch/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day004/stopwatch/public/logo512.png -------------------------------------------------------------------------------- /day004/stopwatch/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 | -------------------------------------------------------------------------------- /day004/stopwatch/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/App.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --shadow: rgb(0 0 0 / 35%) 0px 5px 15px; 3 | } 4 | 5 | .App { 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | flex-direction: column; 10 | width: 100%; 11 | } 12 | 13 | .container { 14 | height: 85vh; 15 | display: flex; 16 | justify-content: space-evenly; 17 | align-items: center; 18 | flex-direction: column; 19 | width: 100%; 20 | } 21 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/App.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3 | import "./App.css"; 4 | import Header from "./common/header/Header"; 5 | import Stopwatch from "./stopwatch/Stopwatch"; 6 | import Timer from "./timer/Timer"; 7 | 8 | function App() { 9 | return ( 10 |
11 | 12 |
13 |
14 | 15 | 16 | 17 | 18 |
19 | 20 |
21 | ); 22 | } 23 | 24 | export default App; 25 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/common/button/Button.css: -------------------------------------------------------------------------------- 1 | .buttons { 2 | box-shadow: var(--shadow); 3 | padding: 10px 25px; 4 | border-radius: 7px; 5 | font-weight: 500; 6 | display: flex; 7 | justify-content: center; 8 | min-width: 32%; 9 | font-size: 1.1rem; 10 | } 11 | 12 | .buttons:hover { 13 | box-shadow: rgb(0 0 0 / 45%) 0px 5px 15px; 14 | } 15 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/common/button/Button.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Button.css"; 3 | 4 | const Button = ({ children, onClickHandler, disabled = false }) => { 5 | return ( 6 | 9 | ); 10 | }; 11 | 12 | export default Button; 13 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/common/header/Header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | flex-direction: row; 4 | justify-content: space-evenly; 5 | align-items: center; 6 | width: 100%; 7 | font-size: 1.3rem; 8 | font-weight: 500; 9 | height: 10vh; 10 | color: rgb(78, 78, 78); 11 | } 12 | 13 | .active { 14 | color: black; 15 | animation: animateFontSize 0.2s linear 0s; 16 | font-size: 2rem; 17 | } 18 | 19 | @keyframes animateFontSize { 20 | 0% { 21 | font-size: 1.3rem; 22 | } 23 | 25% { 24 | font-size: 1.5rem; 25 | } 26 | 27 | 50% { 28 | font-size: 1.7rem; 29 | } 30 | 31 | 75% { 32 | font-size: 1.9rem; 33 | } 34 | 100% { 35 | font-size: 2rem; 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/common/header/Header.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import { Link, useLocation } from "react-router-dom"; 3 | import "./Header.css"; 4 | 5 | const Header = () => { 6 | const { pathname } = useLocation(); 7 | const [header, setHeader] = useState(pathname); 8 | 9 | useEffect(() => { 10 | setHeader(pathname); 11 | }, [pathname]); 12 | 13 | return ( 14 |
15 | 16 | Stopwatch 17 | 18 | 19 | Timer 20 | 21 |
22 | ); 23 | }; 24 | 25 | export default Header; 26 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/stopwatch/Stopwatch.css: -------------------------------------------------------------------------------- 1 | .stopwatch { 2 | width: 100%; 3 | } 4 | 5 | .clock { 6 | width: 210px; 7 | height: 210px; 8 | font-size: 2rem; 9 | font-weight: 500; 10 | border-radius: 50%; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | box-shadow: var(--shadow); 15 | margin: 10px; 16 | flex-direction: column; 17 | position: relative; 18 | cursor: pointer; 19 | } 20 | 21 | .clock-timer { 22 | position: absolute; 23 | top: 40%; 24 | left: 17%; 25 | } 26 | 27 | .clock-border-ring { 28 | border: 5px; 29 | background-image: linear-gradient(#9d00ff, #9d00ff, #2e91e5); 30 | border-radius: 50%; 31 | height: 95%; 32 | width: 95%; 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | animation: rotate-gradient 1s 1s infinite; 37 | } 38 | .clock-border-ring-inner { 39 | background: white; 40 | border-radius: 50%; 41 | height: 94%; 42 | width: 94%; 43 | } 44 | 45 | @keyframes rotate-gradient { 46 | 0% { 47 | transform: rotate(0deg); 48 | } 49 | 10% { 50 | transform: rotate(36deg); 51 | } 52 | 20% { 53 | transform: rotate(72deg); 54 | } 55 | 30% { 56 | transform: rotate(108deg); 57 | } 58 | 40% { 59 | transform: rotate(144deg); 60 | } 61 | 50% { 62 | transform: rotate(180deg); 63 | } 64 | 60% { 65 | transform: rotate(216deg); 66 | } 67 | 70% { 68 | transform: rotate(252deg); 69 | } 70 | 80% { 71 | transform: rotate(288deg); 72 | } 73 | 90% { 74 | transform: rotate(324deg); 75 | } 76 | 100% { 77 | transform: rotate(360deg); 78 | } 79 | } 80 | 81 | .button-row { 82 | display: flex; 83 | justify-content: space-evenly; 84 | align-items: center; 85 | flex-direction: row; 86 | margin: 25px 0px; 87 | width: 100%; 88 | } 89 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/stopwatch/Stopwatch.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import Button from "../common/button/Button"; 3 | import "./Stopwatch.css"; 4 | 5 | const Stopwatch = () => { 6 | const [isStarted, setIsStarted] = useState(false); 7 | const [[m, s, ms], setTimer] = useState([0, 0, 0]); 8 | 9 | useEffect(() => { 10 | const timerId = setInterval(() => onStart(), 10); 11 | return () => clearInterval(timerId); 12 | }); 13 | 14 | const onStart = () => { 15 | if (!isStarted) return; 16 | if (ms === 99 && s === 60) { 17 | setTimer([m + 1, 0, 0]); 18 | } else if (ms === 99) { 19 | setTimer([m, s + 1, 0]); 20 | } else { 21 | setTimer([m, s, ms + 1]); 22 | } 23 | }; 24 | 25 | const onReset = () => { 26 | setIsStarted(false); 27 | setTimer([0, 0, 0]); 28 | }; 29 | 30 | return ( 31 |
32 |
33 |
setIsStarted(true)}> 34 |
35 |
36 |
37 |
38 | {m < 10 && 0} 39 | {m}:{s < 10 && 0} 40 | {s}:{ms < 10 && 0} 41 | {ms} 42 |
43 |
44 |
45 | 46 | 49 |
50 |
51 |
52 | ); 53 | }; 54 | 55 | export default Stopwatch; 56 | -------------------------------------------------------------------------------- /day004/stopwatch/src/components/timer/Timer.css: -------------------------------------------------------------------------------- 1 | .timer { 2 | width: 100%; 3 | display: flex; 4 | justify-content: space-evenly; 5 | align-items: center; 6 | flex-direction: column; 7 | height: 100%; 8 | } 9 | 10 | .button-row { 11 | display: flex; 12 | justify-content: space-evenly; 13 | align-items: center; 14 | flex-direction: row; 15 | margin: 25px 0px; 16 | width: 100%; 17 | } 18 | 19 | .timer-row { 20 | width: 210px; 21 | height: 120px; 22 | font-weight: 500; 23 | border-radius: 7px; 24 | box-shadow: var(--shadow); 25 | position: relative; 26 | cursor: pointer; 27 | display: flex; 28 | justify-content: center; 29 | align-items: center; 30 | } 31 | 32 | .timer-input-title { 33 | display: flex; 34 | justify-content: center; 35 | align-items: center; 36 | margin: 0px 7px; 37 | z-index: 1; 38 | } 39 | 40 | .timer-input { 41 | font-size: 1.8rem; 42 | font-weight: 500; 43 | border: none; 44 | width: 35px; 45 | border-bottom: 2px solid rgb(97, 97, 97); 46 | } 47 | 48 | .timer-input:focus { 49 | font-size: 1.8rem; 50 | font-weight: 500; 51 | outline: none; 52 | } 53 | 54 | span { 55 | font-size: 1rem; 56 | font-weight: 400; 57 | width: 100%; 58 | color: rgb(97, 97, 97); 59 | } 60 | 61 | .timer-border-ring { 62 | border-radius: 7px; 63 | position: absolute; 64 | border: 5px; 65 | background-image: linear-gradient(#9d00ff, #9d00ff, #2e91e5); 66 | height: 97%; 67 | width: 97%; 68 | display: flex; 69 | justify-content: center; 70 | align-items: center; 71 | } 72 | 73 | .timer-border-ring-inner { 74 | background: white; 75 | height: 92%; 76 | width: 95%; 77 | border-radius: 4px; 78 | } 79 | -------------------------------------------------------------------------------- /day004/stopwatch/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: "Poppins", sans-serif; 3 | display: flex; 4 | justify-content: center; 5 | align-items: center; 6 | } 7 | 8 | button { 9 | background-color: inherit; 10 | border: none; 11 | font-family: inherit; 12 | cursor: pointer; 13 | } 14 | 15 | a { 16 | text-decoration: none; 17 | color: inherit; 18 | } 19 | 20 | #root { 21 | width: 100%; 22 | max-width: 500px; 23 | } 24 | 25 | input, 26 | textarea, 27 | button, 28 | select, 29 | a { 30 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 31 | } 32 | -------------------------------------------------------------------------------- /day004/stopwatch/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./components/App"; 5 | 6 | ReactDOM.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /day005/snake-game/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day005/snake-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "snake-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day005/snake-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day005/snake-game/public/favicon.ico -------------------------------------------------------------------------------- /day005/snake-game/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day005/snake-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day005/snake-game/public/logo192.png -------------------------------------------------------------------------------- /day005/snake-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day005/snake-game/public/logo512.png -------------------------------------------------------------------------------- /day005/snake-game/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 | -------------------------------------------------------------------------------- /day005/snake-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day005/snake-game/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | width: 500px; 3 | height: 500px; 4 | border: 1px solid white; 5 | position: relative; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | flex-direction: column; 10 | font-family: monospace; 11 | border-radius: 10px; 12 | } 13 | 14 | button { 15 | font-family: inherit; 16 | font-size: 1.5rem; 17 | border-radius: 10px; 18 | color: black; 19 | width: 50%; 20 | max-width: 150px; 21 | height: 50px; 22 | border: none; 23 | background-color: #e73d9f; 24 | font-weight: 600; 25 | z-index: 4; 26 | cursor: pointer; 27 | } 28 | 29 | .text { 30 | color: #eb2d2d; 31 | z-index: 4; 32 | opacity: 0.5; 33 | } 34 | 35 | .arrow-msg { 36 | font-size: 1rem; 37 | margin: 10px; 38 | } 39 | 40 | .game-over { 41 | font-size: 3rem; 42 | } 43 | 44 | .count { 45 | position: absolute; 46 | font-size: 2rem; 47 | bottom: 0px; 48 | color: #eb2d2d; 49 | opacity: 0.5; 50 | } 51 | -------------------------------------------------------------------------------- /day005/snake-game/src/components/Food.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Food({ position }) { 4 | return ( 5 |
17 | ); 18 | } 19 | 20 | export default Food; 21 | -------------------------------------------------------------------------------- /day005/snake-game/src/components/Snake.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | function Snake({ snake }) { 4 | return ( 5 |
6 | {snake.map((box, i) => ( 7 |
19 | ))} 20 |
21 | ); 22 | } 23 | 24 | export default Snake; 25 | -------------------------------------------------------------------------------- /day005/snake-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 | width: 100vw; 9 | height: 100vh; 10 | display: flex; 11 | justify-content: center; 12 | align-items: center; 13 | background-color: black; 14 | } 15 | 16 | code { 17 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 18 | monospace; 19 | } 20 | -------------------------------------------------------------------------------- /day005/snake-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 | -------------------------------------------------------------------------------- /day006/dino-game/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day006/dino-game/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dino-game", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day006/dino-game/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day006/dino-game/public/favicon.ico -------------------------------------------------------------------------------- /day006/dino-game/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day006/dino-game/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day006/dino-game/public/logo192.png -------------------------------------------------------------------------------- /day006/dino-game/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day006/dino-game/public/logo512.png -------------------------------------------------------------------------------- /day006/dino-game/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 | -------------------------------------------------------------------------------- /day006/dino-game/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day006/dino-game/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | -------------------------------------------------------------------------------- /day006/dino-game/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import Dino from "./components/Dino/Dino"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /day006/dino-game/src/components/Dino/Dino.css: -------------------------------------------------------------------------------- 1 | .game { 2 | width: 600px; 3 | height: 225px; 4 | border: 1px solid black; 5 | margin: auto; 6 | } 7 | 8 | #dino { 9 | width: 50px; 10 | height: 50px; 11 | background-image: url(img/trex.png); 12 | background-size: 50px 50px; 13 | position: relative; 14 | top: 150px; 15 | } 16 | 17 | .jump { 18 | animation: jump 0.3s linear; 19 | } 20 | 21 | @keyframes jump { 22 | 0% { 23 | top: 150px; 24 | } 25 | 26 | 30% { 27 | top: 130px; 28 | } 29 | 30 | 50% { 31 | top: 80px; 32 | } 33 | 34 | 80% { 35 | top: 130px; 36 | } 37 | 38 | 100% { 39 | top: 150px; 40 | } 41 | } 42 | 43 | #cactus { 44 | width: 20px; 45 | height: 40px; 46 | position: relative; 47 | top: 110px; 48 | left: 580px; 49 | 50 | background-image: url("img/cactus.png"); 51 | background-size: 20px 40px; 52 | 53 | animation: block 1s infinite linear; 54 | } 55 | 56 | @keyframes block { 57 | 0% { 58 | left: 580px; 59 | } 60 | 61 | 100% { 62 | left: -5px; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /day006/dino-game/src/components/Dino/Dino.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useRef, useState } from "react"; 2 | import "./Dino.css"; 3 | 4 | function Dino() { 5 | const dinoRef = useRef(); 6 | const cactusRef = useRef(); 7 | const [score, setScore] = useState(0); 8 | 9 | const jump = () => { 10 | if (!!dinoRef.current && dinoRef.current.classList != "jump") { 11 | dinoRef.current.classList.add("jump"); 12 | setTimeout(function () { 13 | dinoRef.current.classList.remove("jump"); 14 | }, 300); 15 | } 16 | }; 17 | 18 | useEffect(() => { 19 | const isAlive = setInterval(function () { 20 | // get current dino Y position 21 | const dinoTop = parseInt( 22 | getComputedStyle(dinoRef.current).getPropertyValue("top") 23 | ); 24 | 25 | // get current cactus X position 26 | let cactusLeft = parseInt( 27 | getComputedStyle(cactusRef.current).getPropertyValue("left") 28 | ); 29 | 30 | // detect collision 31 | if (cactusLeft < 40 && cactusLeft > 0 && dinoTop >= 140) { 32 | // collision 33 | alert("Game Over! Your Score : " + score); 34 | setScore(0); 35 | } else { 36 | setScore(score + 1); 37 | } 38 | }, 10); 39 | 40 | return () => clearInterval(isAlive); 41 | }); 42 | 43 | useEffect(() => { 44 | document.addEventListener("keydown", jump); 45 | return () => document.removeEventListener("keydown", jump); 46 | }, []); 47 | 48 | return ( 49 |
50 | Score : {score} 51 |
52 |
53 |
54 | ); 55 | } 56 | 57 | export default Dino; 58 | -------------------------------------------------------------------------------- /day006/dino-game/src/components/Dino/img/cactus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day006/dino-game/src/components/Dino/img/cactus.png -------------------------------------------------------------------------------- /day006/dino-game/src/components/Dino/img/trex.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day006/dino-game/src/components/Dino/img/trex.png -------------------------------------------------------------------------------- /day006/dino-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 | -------------------------------------------------------------------------------- /day006/dino-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 | -------------------------------------------------------------------------------- /day007/drag-drop/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day007/drag-drop/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "drag-drop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day007/drag-drop/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day007/drag-drop/public/favicon.ico -------------------------------------------------------------------------------- /day007/drag-drop/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day007/drag-drop/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day007/drag-drop/public/logo192.png -------------------------------------------------------------------------------- /day007/drag-drop/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day007/drag-drop/public/logo512.png -------------------------------------------------------------------------------- /day007/drag-drop/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 | -------------------------------------------------------------------------------- /day007/drag-drop/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day007/drag-drop/src/App.css: -------------------------------------------------------------------------------- 1 | .drag-drop-container { 2 | text-align: center; 3 | font-family: monospace; 4 | } 5 | 6 | .drag-drop-board { 7 | display: flex; 8 | justify-content: space-around; 9 | } 10 | 11 | .drag-drop-header { 12 | text-decoration-line: underline; 13 | font-size: 1.5rem; 14 | } 15 | 16 | .task-header { 17 | margin: 10px; 18 | text-decoration: underline; 19 | font-size: 1rem; 20 | } 21 | 22 | .task-card { 23 | height: 50px; 24 | border-radius: 5px; 25 | display: flex; 26 | align-items: center; 27 | justify-content: center; 28 | margin: 5px; 29 | padding: 5px; 30 | } 31 | -------------------------------------------------------------------------------- /day007/drag-drop/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 | -------------------------------------------------------------------------------- /day007/drag-drop/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 | -------------------------------------------------------------------------------- /day008/tags-input/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day008/tags-input/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tags-input", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day008/tags-input/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day008/tags-input/public/favicon.ico -------------------------------------------------------------------------------- /day008/tags-input/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day008/tags-input/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day008/tags-input/public/logo192.png -------------------------------------------------------------------------------- /day008/tags-input/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day008/tags-input/public/logo512.png -------------------------------------------------------------------------------- /day008/tags-input/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 | -------------------------------------------------------------------------------- /day008/tags-input/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day008/tags-input/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | margin-top: 100px; 4 | font-family: monospace; 5 | } 6 | 7 | input:focus { 8 | outline: none; 9 | } 10 | -------------------------------------------------------------------------------- /day008/tags-input/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import TagInput from "./component/TagInput"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /day008/tags-input/src/component/TagInput.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from "react"; 2 | 3 | const containerStyle = { 4 | padding: "20px", 5 | display: "inline-block", 6 | width: "300px", 7 | border: "1px solid darkgrey", 8 | borderRadius: "10px", 9 | background: "#EAEAEA", 10 | }; 11 | 12 | const inputStyle = { 13 | display: "inline-block", 14 | fontSize: "0.9em", 15 | margin: "5px", 16 | width: "90%", 17 | border: "0", 18 | padding: "10px", 19 | borderRadius: "10px", 20 | marginTop: "1rem", 21 | }; 22 | 23 | const tagStyle = { 24 | display: "inline-block", 25 | backgroundColor: "#3C4048", 26 | margin: "5px", 27 | padding: "4px 10px", 28 | borderRadius: "10px", 29 | cursor: "pointer", 30 | color: "white", 31 | }; 32 | 33 | const TagInput = () => { 34 | //state to save all user input in an array 35 | const [tags, setTags] = useState([]); 36 | 37 | const handleAddTag = (e) => { 38 | //if key not enter then don't add it 39 | if (e.key !== "Enter") return; 40 | 41 | const input = e.target.value; 42 | 43 | //if input is empty or "" then don't add it 44 | if (!input) return; 45 | //if the input already been added 46 | if (tags.includes(input)) return; 47 | 48 | setTags([...tags, input]); 49 | e.target.value = ""; 50 | }; 51 | 52 | const onDeleteTag = (tag) => { 53 | const filteredTags = tags.filter((t) => t !== tag); 54 | setTags(filteredTags); 55 | }; 56 | 57 | return ( 58 |
59 |

ADD SKILLS

60 | {tags.map((tag) => ( 61 | onDeleteTag(tag)} style={tagStyle}> 62 | ✖ {tag} 63 | 64 | ))} 65 | handleAddTag(e)} 68 | type="text" 69 | placeholder="Enter value..." 70 | /> 71 |
72 | ); 73 | }; 74 | 75 | export default TagInput; 76 | -------------------------------------------------------------------------------- /day008/tags-input/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 | -------------------------------------------------------------------------------- /day008/tags-input/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 | -------------------------------------------------------------------------------- /day009/shoppinn/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day009/shoppinn/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shoppinn", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-router-dom": "^6.4.2", 12 | "react-scripts": "5.0.1", 13 | "web-vitals": "^2.1.4" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/benjamin-rascoe-KF-q_SGqswg-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/benjamin-rascoe-KF-q_SGqswg-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/caio-coelho-xFmXLq_KJxg-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/caio-coelho-xFmXLq_KJxg-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/chris-lynch-pRdi2no2fvs-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/chris-lynch-pRdi2no2fvs-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/dami-adebayo-k6aQzmIbR1s-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/dami-adebayo-k6aQzmIbR1s-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/dom-hill-nimElTcTNyY-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/dom-hill-nimElTcTNyY-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/faith-yarn-Wr0TpKqf26s-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/faith-yarn-Wr0TpKqf26s-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/freestocks-8hAsLeE6Fbo-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/freestocks-8hAsLeE6Fbo-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/irene-kredenets-dwKiHoqqxk8-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/irene-kredenets-dwKiHoqqxk8-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/paul-gaudriault-a-QH9MAAVNI-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/paul-gaudriault-a-QH9MAAVNI-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/phil-monte-4V4t0JcOM5E-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/phil-monte-4V4t0JcOM5E-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/assets/revolt-164_6wVEHfI-unsplash.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/assets/revolt-164_6wVEHfI-unsplash.jpg -------------------------------------------------------------------------------- /day009/shoppinn/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/favicon.ico -------------------------------------------------------------------------------- /day009/shoppinn/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | codinn.dev 28 | 29 | 30 | 34 | 35 | 36 | 37 |
38 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /day009/shoppinn/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/logo192.png -------------------------------------------------------------------------------- /day009/shoppinn/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/public/logo512.png -------------------------------------------------------------------------------- /day009/shoppinn/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 | -------------------------------------------------------------------------------- /day009/shoppinn/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day009/shoppinn/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: -webkit-center; 3 | font-family: "Poppins", sans-serif; 4 | color: #343434; 5 | } 6 | 7 | a { 8 | text-decoration: none; 9 | color: inherit; 10 | } 11 | -------------------------------------------------------------------------------- /day009/shoppinn/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import HomePage from "./components/home/HomePage"; 3 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 4 | import ItemDetail from "./components/itemDetail/ItemDetail"; 5 | import Navbar from "./components/navbar/Navbar"; 6 | import Cart from "./components/cart/Cart"; 7 | import Orders from "./components/orders/Orders"; 8 | import Checkout from "./components/checkout/Checkout"; 9 | 10 | function App() { 11 | return ( 12 |
13 | 14 |
15 | 16 |
17 | 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | 24 | 25 |
26 | ); 27 | } 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/cart/Cart.css: -------------------------------------------------------------------------------- 1 | .cart-container { 2 | max-width: 500px; 3 | } 4 | 5 | .cart-item { 6 | border: 1px solid #cdcdcd; 7 | text-align: left; 8 | border-radius: 15px; 9 | padding: 10px; 10 | width: -webkit-fill-available; 11 | margin-bottom: 10px; 12 | } 13 | 14 | .item-expectedDelivery { 15 | margin-left: 10px; 16 | } 17 | 18 | .cart-container button { 19 | margin-top: 10px; 20 | } 21 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/cart/Cart.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import { GlobalContext } from "../../context/GlobalState"; 4 | import "./Cart.css"; 5 | 6 | function Cart() { 7 | const { cart } = useContext(GlobalContext); 8 | 9 | return ( 10 |
11 |

Cart

12 | {!cart.length ? ( 13 |

No Item Added! Please add something to your cart

14 | ) : ( 15 | <> 16 |
17 | {cart.map((item) => ( 18 |
19 |
${item.price}
20 |
{item.name}
21 |
22 | (Expected Delivery 3 - 6 days) 23 |
24 |
25 | ))} 26 |
27 | 28 | 29 | 30 | 31 | )} 32 |
33 | ); 34 | } 35 | 36 | export default Cart; 37 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/checkout/Checkout.css: -------------------------------------------------------------------------------- 1 | .checkout-container { 2 | margin-top: 20px; 3 | border-radius: 15px; 4 | padding: 20px; 5 | max-width: 500px; 6 | } 7 | 8 | .custom-row { 9 | padding: 6px 15px; 10 | margin: 10px; 11 | border: 1px solid #cdcdcd; 12 | border-radius: 15px; 13 | display: block; 14 | text-align: left; 15 | } 16 | 17 | .checkout-summary { 18 | display: flex; 19 | justify-content: space-between; 20 | margin: 10px; 21 | } 22 | 23 | .custom-row span { 24 | margin: 2px 15px; 25 | } 26 | 27 | .checkout-container a { 28 | color: rgb(255 0 57); 29 | text-decoration: underline; 30 | } 31 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/home/HomePage.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/src/components/home/HomePage.css -------------------------------------------------------------------------------- /day009/shoppinn/src/components/home/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import items from "../../mockData/items.json"; 3 | import ItemList from "../itemList/ItemList"; 4 | 5 | function HomePage() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default HomePage; 14 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/item/Item.css: -------------------------------------------------------------------------------- 1 | .item-card { 2 | display: inline-block; 3 | margin: 15px; 4 | cursor: pointer; 5 | border-radius: 10px; 6 | border: 1px solid #e7e7e7; 7 | } 8 | 9 | .item-brand { 10 | color: #7c7c7c; 11 | font-size: 0.8rem; 12 | margin-top: 10px; 13 | margin-left: 10px; 14 | } 15 | 16 | .item-name { 17 | text-transform: uppercase; 18 | margin-left: 10px; 19 | font-weight: 600; 20 | } 21 | 22 | .item-rating { 23 | margin: 10px; 24 | } 25 | 26 | .item-price { 27 | font-size: 1.1rem; 28 | margin: 10px; 29 | } 30 | 31 | .item-discount { 32 | } 33 | 34 | .item-info { 35 | display: flex; 36 | width: 100%; 37 | justify-content: space-between; 38 | } 39 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/item/Item.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./Item.css"; 3 | 4 | function Item({ name, rating, price, saleDiscount, image, brand }) { 5 | return ( 6 |
7 | {"Item 8 |
{brand}
9 |
{name}
10 |
11 |
${price}
12 |
{rating}★
13 |
14 |
15 | ); 16 | } 17 | 18 | export default Item; 19 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/itemDetail/ItemDetail.css: -------------------------------------------------------------------------------- 1 | .item-detail-container { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: center; 5 | flex-wrap: wrap; 6 | margin: 30px; 7 | align-items: flex-start; 8 | } 9 | 10 | .item-detail { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | width: 100%; 15 | margin-top: 50px; 16 | } 17 | 18 | .item-detail-image { 19 | height: 500px; 20 | display: flex; 21 | } 22 | 23 | .item-detail-info { 24 | margin-left: 15px; 25 | max-width: 500px; 26 | } 27 | 28 | .item-btn { 29 | color: white; 30 | background: #343434; 31 | border-radius: 5px; 32 | width: 150px; 33 | height: 35px; 34 | font-family: inherit; 35 | cursor: pointer; 36 | border: none; 37 | } 38 | 39 | .item-btn:active { 40 | background: white; 41 | color: initial; 42 | border: 1px solid grey; 43 | } 44 | 45 | .item-size { 46 | margin: 10px; 47 | border-radius: 5px; 48 | width: 130px; 49 | height: 35px; 50 | font-family: inherit; 51 | cursor: pointer; 52 | margin-left: 10px; 53 | } 54 | 55 | .item-size:focus { 56 | outline: none; 57 | } 58 | 59 | .item-description { 60 | } 61 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/itemDetail/ItemDetail.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { Link, useParams } from "react-router-dom"; 3 | import "./ItemDetail.css"; 4 | import items from "../../mockData/items.json"; 5 | import { GlobalContext } from "../../context/GlobalState"; 6 | 7 | const getItemDetail = (id) => items.filter((item) => item.id === id)[0]; 8 | 9 | function ItemDetail() { 10 | const params = useParams(); 11 | const itemId = parseInt(params?.id); 12 | const item = !!itemId && getItemDetail(itemId); 13 | const { addItemToCartList, cart } = useContext(GlobalContext); 14 | const [isAdded, setIsAdded] = useState( 15 | cart.findIndex((c) => c.id === itemId) > -1 16 | ); 17 | 18 | return ( 19 |
20 | ← Back 21 |
22 |
23 | {"Item 24 |
25 |
26 |
27 | {item.brand} 28 |
29 |
{item.name}
30 |
${item.price}
31 | 32 | 38 | 48 |

49 | Lorem Ipsum is simply dummy text of the printing and typesetting 50 | industry. Lorem Ipsum has been the industry's standard dummy text 51 | ever since the 1500s, when an unknown printer took a galley of type 52 | and scrambled it to make a type specimen book. It has survived not 53 | only five centuries, but also the leap into electronic typesetting, 54 | remaining essentially unchanged. 55 |

56 |
57 |
58 |
59 | ); 60 | } 61 | 62 | export default ItemDetail; 63 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/itemList/ItemList.css: -------------------------------------------------------------------------------- 1 | .item-list { 2 | column-count: 4; 3 | } 4 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/itemList/ItemList.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import Item from "../item/Item"; 3 | import "./ItemList.css"; 4 | import { Link } from "react-router-dom"; 5 | 6 | function ItemList({ items }) { 7 | return ( 8 |
9 | {items.map((item) => ( 10 | 11 | 19 | 20 | ))} 21 |
22 | ); 23 | } 24 | 25 | export default ItemList; 26 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/navbar/Navbar.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | justify-content: space-between; 4 | padding: 10px 30px; 5 | cursor: pointer; 6 | } 7 | 8 | .navbar-ul { 9 | list-style-type: none; 10 | } 11 | 12 | .navbar-ul li { 13 | padding: 10px; 14 | float: left; 15 | } 16 | 17 | .nav-btn { 18 | margin: 8px; 19 | background-color: rgb(255 101 101); 20 | font-family: inherit; 21 | border: 0px; 22 | font-size: 14px; 23 | height: 70%; 24 | padding: 8px 10px; 25 | cursor: pointer; 26 | } 27 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/navbar/Navbar.js: -------------------------------------------------------------------------------- 1 | import React, { useContext } from "react"; 2 | import { Link } from "react-router-dom"; 3 | import "./Navbar.css"; 4 | import { GlobalContext } from "../../context/GlobalState"; 5 | 6 | const Navbar = () => { 7 | const { cart } = useContext(GlobalContext); 8 | return ( 9 |
10 | 11 |

shoppinn

12 | 13 |
    14 |
  • Womens
    • 15 |
  • Mens
    • 16 |
  • Clothing
    • 17 |
  • Brands
    • 18 | 19 |
  • 20 | 🛒{" "} 21 | 22 | ({cart.length}) 23 | 24 |
    • 25 | 26 | 27 |
  • Orders
    • 28 | 29 | 30 |
31 |
32 | ); 33 | }; 34 | 35 | export default Navbar; 36 | -------------------------------------------------------------------------------- /day009/shoppinn/src/components/orders/Orders.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day009/shoppinn/src/components/orders/Orders.css -------------------------------------------------------------------------------- /day009/shoppinn/src/components/orders/Orders.js: -------------------------------------------------------------------------------- 1 | import React, { useContext, useState } from "react"; 2 | import { GlobalContext } from "../../context/GlobalState"; 3 | 4 | function Orders() { 5 | const { orders } = useContext(GlobalContext); 6 | return ( 7 |
8 | {orders.map((order) => ( 9 |
10 |

#ID-62Z-{order.orderId}

11 | {order.items.map((item) => ( 12 |
13 |
${item.price}
14 |
{item.name}
15 |
16 | (Expected cash on delivery 3 - 6 days) 17 |
18 |
19 | ))} 20 |
21 | ))} 22 |
23 | ); 24 | } 25 | 26 | export default Orders; 27 | -------------------------------------------------------------------------------- /day009/shoppinn/src/context/AppReducer.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export default (state, action) => { 4 | switch (action.type) { 5 | case "ADD_ITEM_IN_CART": 6 | return { 7 | ...state, 8 | cart: [action.payload, ...state.cart], 9 | }; 10 | case "REMOVE_ITEM_IN_CART": 11 | return { 12 | ...state, 13 | cart: state.cart.filter((item) => item.id !== action.payload.id), 14 | }; 15 | case "CLEAR_CART": 16 | return { 17 | ...state, 18 | cart: [], 19 | }; 20 | case "ADD_ITEM_IN_ORDER": 21 | return { 22 | ...state, 23 | orders: [action.payload, ...state.orders], 24 | }; 25 | case "REMOVE_ITEM_IN_ORDER": 26 | return { 27 | ...state, 28 | orders: state.orders.filter( 29 | (order) => order.orderId !== action.payload.id 30 | ), 31 | }; 32 | default: 33 | return state; 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /day009/shoppinn/src/context/GlobalState.js: -------------------------------------------------------------------------------- 1 | import React, { createContext, useReducer } from "react"; 2 | import AppReducer from "./AppReducer"; 3 | 4 | const initialState = { 5 | cart: [], 6 | orders: [], 7 | }; 8 | 9 | export const GlobalContext = createContext(initialState); 10 | 11 | export const GlobalProvider = ({ children }) => { 12 | const [state, dispatch] = useReducer(AppReducer, initialState); 13 | 14 | const addItemToCartList = (item) => { 15 | dispatch({ 16 | type: "ADD_ITEM_IN_CART", 17 | payload: item, 18 | }); 19 | }; 20 | 21 | const removeItemFromCartList = (item) => { 22 | dispatch({ 23 | type: "REMOVE_ITEM_IN_CART", 24 | payload: item, 25 | }); 26 | }; 27 | 28 | const clearCart = () => { 29 | dispatch({ 30 | type: "CLEAR_CART", 31 | }); 32 | }; 33 | 34 | const addItemToOrderList = (item) => { 35 | dispatch({ 36 | type: "ADD_ITEM_IN_ORDER", 37 | payload: item, 38 | }); 39 | }; 40 | 41 | const removeItemFromOrderList = (item) => { 42 | dispatch({ 43 | type: "REMOVE_ITEM_IN_ORDER", 44 | payload: item, 45 | }); 46 | }; 47 | 48 | return ( 49 | 60 | {children} 61 | 62 | ); 63 | }; 64 | -------------------------------------------------------------------------------- /day009/shoppinn/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 | 15 | /* width */ 16 | ::-webkit-scrollbar { 17 | width: 5px; 18 | } 19 | 20 | /* Track */ 21 | ::-webkit-scrollbar-track { 22 | background: rgb(187, 187, 187); 23 | border-radius: 8px; 24 | } 25 | 26 | /* Handle */ 27 | ::-webkit-scrollbar-thumb { 28 | background: #5e5e5e; 29 | } 30 | 31 | /* Handle on hover */ 32 | ::-webkit-scrollbar-thumb:hover { 33 | background: rgb(39, 39, 39); 34 | } 35 | -------------------------------------------------------------------------------- /day009/shoppinn/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 { GlobalProvider } from "./context/GlobalState"; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById("root")); 8 | root.render( 9 | 10 | 11 | 12 | 13 | 14 | ); 15 | -------------------------------------------------------------------------------- /day010/personal-portfolio/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | #enviroment vars 9 | .env 10 | 11 | # testing 12 | /coverage 13 | 14 | # production 15 | /build 16 | 17 | # misc 18 | .DS_Store 19 | .env.local 20 | .env.development.local 21 | .env.test.local 22 | .env.production.local 23 | 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | -------------------------------------------------------------------------------- /day010/personal-portfolio/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "my-portfolio", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^4.12.3", 7 | "@material-ui/icons": "^4.11.2", 8 | "@testing-library/jest-dom": "^5.14.1", 9 | "@testing-library/react": "^11.2.7", 10 | "@testing-library/user-event": "^12.8.3", 11 | "emailjs-com": "^3.2.0", 12 | "react": "^17.0.2", 13 | "react-dom": "^17.0.2", 14 | "react-scripts": "5.0.0", 15 | "react-scroll": "^1.8.3", 16 | "react-toastify": "^7.0.4", 17 | "web-vitals": "^1.1.2" 18 | }, 19 | "scripts": { 20 | "start": "react-scripts start", 21 | "build": "react-scripts build", 22 | "test": "react-scripts test", 23 | "eject": "react-scripts eject", 24 | "heroku-postbuild": "npm install" 25 | }, 26 | "eslintConfig": { 27 | "extends": [ 28 | "react-app", 29 | "react-app/jest" 30 | ] 31 | }, 32 | "browserslist": { 33 | "production": [ 34 | ">0.2%", 35 | "not dead", 36 | "not op_mini all" 37 | ], 38 | "development": [ 39 | "last 1 chrome version", 40 | "last 1 firefox version", 41 | "last 1 safari version" 42 | ] 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /day010/personal-portfolio/public/favicon-VA.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day010/personal-portfolio/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "VA", 3 | "name": "Porfolio Website", 4 | "icons": [ 5 | { 6 | "src": "favicon-VA.svg", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /day010/personal-portfolio/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/App.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --heading-margin: 80px; 3 | --section-color: #00ffff; 4 | --section-heading-size: 5rem; 5 | --section-heading-size-mobile: 3.5rem; 6 | --section-sub-heading-size: 1.5rem; 7 | --section-grey-color: rgba(255, 255, 255, 0.6); 8 | --heading-letter-spacing: -3px; 9 | } 10 | 11 | @media only screen and (max-width: 800px) { 12 | .btn-back-to-top > span { 13 | display: none; 14 | } 15 | 16 | .btn-back-to-top { 17 | width: 30px !important; 18 | } 19 | } 20 | 21 | .app-section { 22 | padding: 0 25px; 23 | margin-bottom: var(--heading-margin); 24 | } 25 | 26 | .app-section-contact { 27 | min-height: 100vh !important; 28 | padding: 0 25px; 29 | } 30 | 31 | .btn-back-to-top { 32 | position: fixed; 33 | bottom: 25px; 34 | right: 25px; 35 | background-color: white; 36 | color: black; 37 | border-radius: 5px; 38 | display: flex; 39 | height: 30px; 40 | align-items: center; 41 | width: 120px; 42 | justify-content: center; 43 | font-weight: 500; 44 | } 45 | 46 | .btn-back-to-top > svg { 47 | font-size: 1.2rem; 48 | } 49 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { useEffect, useState } from "react"; 2 | import ArrowUpwardIcon from "@material-ui/icons/ArrowUpward"; 3 | import "./App.css"; 4 | import AboutPage from "./components/AboutPage"; 5 | import ContactPage from "./components/ContactPage"; 6 | import HomePage from "./components/HomePage"; 7 | import ProjectPage from "./components/ProjectPage"; 8 | import SkillPage from "./components/SkillPage"; 9 | import EducationPage from "./components/EducationPage"; 10 | 11 | export default function App() { 12 | const [showBackToTopBtn, setShowBackToTopBtn] = useState(false); 13 | 14 | const toggleVisible = () => { 15 | const scrolled = document.documentElement.scrollTop; 16 | if (scrolled > 500) { 17 | setShowBackToTopBtn(true); 18 | } else if (scrolled <= 500) { 19 | setShowBackToTopBtn(false); 20 | } 21 | }; 22 | 23 | useEffect(() => { 24 | window.addEventListener("scroll", toggleVisible); 25 | }, []); 26 | 27 | function scrollToTop() { 28 | window.scrollTo({ 29 | top: 0, 30 | behavior: "smooth", 31 | }); 32 | } 33 | return ( 34 | <> 35 |
36 | 37 |
38 |
39 | 40 |
41 |
42 | 43 |
44 |
45 | 46 |
47 |
48 | 49 |
50 |
51 | 52 |
53 | {showBackToTopBtn && ( 54 | 58 | )} 59 | 60 | ); 61 | } 62 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/AboutPage.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .about-info { 3 | flex-direction: column; 4 | } 5 | .about-header { 6 | font-size: var(--section-heading-size-mobile) !important; 7 | } 8 | .about-left, 9 | .about-right { 10 | width: 100% !important; 11 | } 12 | .about-left { 13 | margin-bottom: 50px; 14 | } 15 | } 16 | 17 | .about-container { 18 | color: white; 19 | display: flex; 20 | flex-direction: column; 21 | } 22 | 23 | .about-header { 24 | font-size: var(--section-heading-size); 25 | letter-spacing: var(--heading-letter-spacing); 26 | } 27 | 28 | .about-header > span { 29 | color: var(--section-color); 30 | } 31 | 32 | .about-info { 33 | display: flex; 34 | justify-content: space-between; 35 | margin-top: 30px; 36 | } 37 | 38 | .about-left { 39 | width: 50%; 40 | font-size: var(--section-sub-heading-size) !important; 41 | } 42 | 43 | .about-right { 44 | width: 40%; 45 | font-weight: 400; 46 | display: flex; 47 | justify-content: space-between; 48 | flex-direction: column; 49 | color: var(--section-grey-color); 50 | } 51 | 52 | .about-right > p { 53 | margin-bottom: 20px; 54 | } 55 | 56 | .about-right > p > span { 57 | color: white; 58 | font-weight: 700; 59 | } 60 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/AboutPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./AboutPage.css"; 3 | 4 | const AboutPage = () => { 5 | return ( 6 |
7 |
8 | about 9 |
10 |
11 |
12 | I love to create something simple and clean using javascript with html 13 | and css. 14 |
15 |
16 |

17 | I'm Vasu Awasthi. I am a Software Developer. I have 18 | done Post Graduate Diploma in Advanced Computing from{" "} 19 | CDAC, Bangalore. 20 |

21 |

22 | I specialize in efficient React apps and 23 | CSS & HTML that just work across all 24 | platforms and browsers. I care deeply about building interfaces that 25 | are usable and pleasant for the most number of people possible. 26 |

27 |

28 | Right now, I’m excited about improving skill on writing automated 29 | test cases and becoming a React senior. 30 |

31 |
32 |
33 |
34 | ); 35 | }; 36 | 37 | export default AboutPage; 38 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/ContactPage.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .contact-header { 3 | font-size: var(--section-heading-size-mobile) !important; 4 | } 5 | .contact-info { 6 | flex-direction: column; 7 | } 8 | 9 | .contact-left, 10 | .contact-right { 11 | width: 100% !important; 12 | margin-bottom: 30px; 13 | } 14 | } 15 | 16 | .contact-container { 17 | color: white; 18 | display: flex; 19 | flex-direction: column; 20 | } 21 | 22 | .contact-header { 23 | font-size: var(--section-heading-size); 24 | letter-spacing: var(--heading-letter-spacing); 25 | } 26 | 27 | .contact-info { 28 | display: flex; 29 | justify-content: space-between; 30 | margin-top: 30px; 31 | } 32 | 33 | .contact-left { 34 | width: 40%; 35 | font-size: 1.1rem; 36 | } 37 | 38 | .contact-left > span { 39 | color: var(--section-grey-color); 40 | font-style: italic; 41 | } 42 | 43 | .contact-right { 44 | width: 50%; 45 | font-weight: 400; 46 | display: flex; 47 | justify-content: space-between; 48 | flex-direction: column; 49 | height: 370px; 50 | } 51 | 52 | .contact-form { 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: space-between; 56 | height: 100%; 57 | font-weight: 500; 58 | } 59 | 60 | .contact-form-row { 61 | display: flex; 62 | justify-content: space-between; 63 | } 64 | 65 | .contact-form-row > div { 66 | width: 47%; 67 | } 68 | 69 | .contact-form-message { 70 | height: 150px; 71 | } 72 | 73 | .contact-form-group { 74 | display: flex; 75 | flex-direction: column; 76 | } 77 | 78 | .contact-form-button { 79 | width: 70px; 80 | height: 30px; 81 | font-weight: 500; 82 | } 83 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/EducationPage.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .education-header { 3 | font-size: var(--section-heading-size-mobile) !important; 4 | line-height: 3rem !important; 5 | } 6 | .education-header > p > span { 7 | font-size: 4.5rem !important; 8 | } 9 | } 10 | 11 | .education-container { 12 | color: white; 13 | display: flex; 14 | flex-direction: column; 15 | } 16 | 17 | .education-header { 18 | font-size: var(--section-heading-size); 19 | line-height: 5rem; 20 | letter-spacing: var(--heading-letter-spacing); 21 | } 22 | 23 | .education-header > p > span { 24 | font-size: 7rem; 25 | font-family: initial; 26 | color: var(--section-color); 27 | } 28 | 29 | .education { 30 | display: flex; 31 | flex-direction: column; 32 | justify-content: space-between; 33 | align-items: flex-start; 34 | margin: 30px 0px; 35 | } 36 | 37 | .education > p:nth-child(1) { 38 | font-size: 0.9rem; 39 | color: var(--section-grey-color); 40 | } 41 | 42 | .education > p:nth-child(2) { 43 | font-size: var(--section-sub-heading-size) !important; 44 | line-height: 1.8rem; 45 | padding: 15px 0px; 46 | } 47 | 48 | .education > p:nth-child(3) { 49 | display: flex; 50 | justify-content: space-between; 51 | width: 100%; 52 | font-size: 0.9rem; 53 | border-bottom: 1px solid rgb(87, 86, 86); 54 | padding: 5px 0px; 55 | color: var(--section-grey-color); 56 | } 57 | 58 | .education > p:nth-child(3) > a { 59 | text-decoration: none; 60 | } 61 | 62 | a { 63 | display: flex; 64 | justify-content: center; 65 | } 66 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/EducationPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LocationOnIcon from "@material-ui/icons/LocationOn"; 3 | import "./EducationPage.css"; 4 | 5 | const EducationPage = () => { 6 | return ( 7 |
8 |
9 |

experience

10 |

11 | &education 12 |

13 |
14 |
15 |
16 |

Software Developer

17 |

codinn.dev

18 |

19 | Sept'19 - Present 20 | 21 | 22 | Bangalore, India 23 | 24 |

25 |
26 |
27 |

Post Gradute Diploma

28 |

Center for Development of Advanced Computing

29 |

30 | Feb'19 - Aug'19 31 | 32 | 33 | Bangalore, India 34 | 35 |

36 |
37 |
38 |

Bachelors of Engineering

39 |

ABC College of XYZ

40 |

41 | July'14 - June'18 42 | 43 | 44 | Pune, India 45 | 46 |

47 |
48 |
49 |

Higher Secondary Education

50 |

Kendriya Vidyalaya VFJ School

51 |

52 | April'13 - March'14 53 | 54 | 55 | Delhi, India 56 | 57 |

58 |
59 |
60 |
61 | ); 62 | }; 63 | 64 | export default EducationPage; 65 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/HomePage.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .home-page { 3 | font-size: 3.5rem !important; 4 | line-height: 3.3rem !important; 5 | font-weight: 500 !important; 6 | } 7 | .home-page-footer { 8 | margin-bottom: 4.5rem !important; 9 | } 10 | 11 | .home-page > div > span { 12 | line-height: 65px !important; 13 | } 14 | } 15 | 16 | .home-page-container { 17 | min-height: 100vh; 18 | width: 100%; 19 | color: white; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: space-between; 23 | } 24 | 25 | .home-page-header { 26 | height: 50px; 27 | display: flex; 28 | align-items: center; 29 | } 30 | 31 | .home-page { 32 | display: flex; 33 | justify-content: center; 34 | align-items: flex-start; 35 | flex-direction: column; 36 | font-size: 5.5rem; 37 | font-weight: 500; 38 | position: relative; 39 | line-height: 80px; 40 | letter-spacing: var(--heading-letter-spacing); 41 | position: relative; 42 | } 43 | 44 | .home-page > div > p > span { 45 | color: var(--section-color); 46 | } 47 | 48 | .home-page > div > span { 49 | line-height: 7rem; 50 | } 51 | 52 | .home-page-footer { 53 | width: 130px; 54 | display: flex; 55 | justify-content: space-between; 56 | margin-bottom: 25px; 57 | } 58 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/HomePage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import LinkedInIcon from "@material-ui/icons/LinkedIn"; 3 | import InstagramIcon from "@material-ui/icons/Instagram"; 4 | import TwitterIcon from "@material-ui/icons/Twitter"; 5 | import GitHubIcon from "@material-ui/icons/GitHub"; 6 | import "./HomePage.css"; 7 | import Navbar from "./Navbar"; 8 | 9 | const HomePage = () => { 10 | return ( 11 |
12 |
13 | 14 |
15 |
16 |
17 | hey, 18 |

19 | this is Vasu, 20 |

21 |
22 | a web developer. 23 |
24 | 50 |
51 | ); 52 | }; 53 | 54 | export default HomePage; 55 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/Navbar.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .navbar-right-options { 3 | display: none !important; 4 | } 5 | .navbar-right-menubar { 6 | display: block !important; 7 | } 8 | .navbar-container { 9 | position: inherit !important; 10 | width: 100%; 11 | } 12 | } 13 | 14 | .navbar-container { 15 | color: white; 16 | width: 95vw; 17 | display: flex; 18 | justify-content: space-between; 19 | font-size: 1.2rem; 20 | position: fixed; 21 | } 22 | 23 | .navbar-left { 24 | width: 30%; 25 | } 26 | 27 | .navbar-left > a { 28 | justify-content: flex-start; 29 | } 30 | 31 | .navbar-right-options { 32 | color: var(--section-grey-color); 33 | width: 40%; 34 | display: flex; 35 | justify-content: space-between; 36 | } 37 | 38 | .navbar-right-options > a:hover { 39 | color: var(--section-color) !important; 40 | } 41 | 42 | .navbar-right-menubar { 43 | display: none; 44 | } 45 | 46 | .navbar-menu-options { 47 | display: flex; 48 | justify-content: space-around; 49 | font-size: 2rem; 50 | align-items: center; 51 | flex-direction: column; 52 | position: fixed; 53 | top: 0%; 54 | right: 0%; 55 | width: 100vw; 56 | height: 85vh; 57 | background-color: #121212; 58 | z-index: 1; 59 | } 60 | 61 | .navbar-menu-options > svg { 62 | font-size: 3rem; 63 | } 64 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/ProjectPage.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .project-header { 3 | font-size: var(--section-heading-size-mobile) !important; 4 | } 5 | .project-header > p > span { 6 | font-size: 4.5rem !important; 7 | } 8 | } 9 | 10 | .project-container { 11 | color: white; 12 | display: flex; 13 | flex-direction: column; 14 | } 15 | 16 | .project-header { 17 | font-size: var(--section-heading-size); 18 | letter-spacing: var(--heading-letter-spacing); 19 | } 20 | 21 | .project-header > span { 22 | color: var(--section-color); 23 | } 24 | 25 | .project { 26 | display: flex; 27 | flex-direction: column; 28 | justify-content: space-between; 29 | align-items: flex-start; 30 | margin: 30px 0px; 31 | } 32 | 33 | .project > p:nth-child(1) { 34 | font-size: 0.9rem; 35 | color: var(--section-grey-color); 36 | } 37 | 38 | .project > p:nth-child(2) { 39 | font-size: var(--section-sub-heading-size) !important; 40 | padding: 15px 0px; 41 | } 42 | 43 | .project > p:nth-child(3) { 44 | display: flex; 45 | justify-content: space-between; 46 | width: 100%; 47 | font-size: 0.9rem; 48 | color: var(--section-grey-color); 49 | padding: 5px 0px; 50 | border-bottom: 1px solid rgb(87, 86, 86); 51 | } 52 | 53 | .project > p:nth-child(3) > a { 54 | text-decoration: none; 55 | } 56 | 57 | a { 58 | display: flex; 59 | justify-content: center; 60 | } 61 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/ProjectPage.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import "./ProjectPage.css"; 3 | 4 | const ProjectPage = () => { 5 | return ( 6 |
7 |
8 | projects 9 |
10 |
11 |
12 |

E-commerce

13 |

Shoppinn

14 |

15 | 2022 16 | 17 | Tap to view 18 | 19 |

20 |
21 |
22 |

Clock

23 |

Stopwatch & Counter

24 |

25 | 2022 26 | 27 | Tap to view 28 | 29 |

30 |
31 |
32 |

Game

33 |

Snake Game

34 |

35 | 2020 36 | 37 | Tap to view 38 | 39 |

40 |
41 |
42 |
43 | ); 44 | }; 45 | 46 | export default ProjectPage; 47 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/components/SkillPage.css: -------------------------------------------------------------------------------- 1 | @media only screen and (max-width: 800px) { 2 | .skill-header { 3 | font-size: var(--section-heading-size-mobile) !important; 4 | } 5 | .skill-container { 6 | flex-direction: column; 7 | } 8 | #myCanvasContainer > canvas { 9 | width: 100% !important; 10 | height: 40vh !important; 11 | } 12 | .skill-right, 13 | .skill-left { 14 | width: 100% !important; 15 | } 16 | .skill-left > p { 17 | margin-bottom: 50px; 18 | } 19 | } 20 | 21 | .skill-container { 22 | color: white; 23 | display: flex; 24 | } 25 | 26 | .skill-header { 27 | font-size: var(--section-heading-size); 28 | margin-bottom: 30px; 29 | letter-spacing: var(--heading-letter-spacing); 30 | } 31 | 32 | .skill-header > span { 33 | color: var(--section-color); 34 | } 35 | 36 | .skill-right { 37 | opacity: 0.8; 38 | color: white; 39 | width: 40%; 40 | } 41 | 42 | .skill-left { 43 | width: 50%; 44 | font-size: var(--section-sub-heading-size) !important; 45 | display: flex; 46 | flex-direction: column; 47 | justify-content: flex-start; 48 | align-items: flex-start; 49 | } 50 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/index.css: -------------------------------------------------------------------------------- 1 | * { 2 | font-family: "Poppins", sans-serif; 3 | margin: 0; 4 | } 5 | 6 | body { 7 | background-color: #121212; 8 | width: 100%; 9 | } 10 | 11 | textarea:focus, 12 | input:focus { 13 | outline: none; 14 | } 15 | 16 | input { 17 | height: 30px; 18 | } 19 | 20 | input, 21 | textarea, 22 | button { 23 | border-radius: 5px; 24 | border: none; 25 | padding: 0px 10px; 26 | } 27 | 28 | textarea { 29 | padding: 10px; 30 | } 31 | 32 | button:hover { 33 | cursor: pointer; 34 | } 35 | 36 | a { 37 | text-decoration: none; 38 | color: inherit; 39 | cursor: pointer; 40 | } 41 | 42 | /* width */ 43 | ::-webkit-scrollbar { 44 | width: 5px; 45 | } 46 | 47 | /* Track */ 48 | ::-webkit-scrollbar-track { 49 | background: #383838; 50 | } 51 | 52 | /* Handle */ 53 | ::-webkit-scrollbar-thumb { 54 | background: #888; 55 | } 56 | 57 | /* Handle on hover */ 58 | ::-webkit-scrollbar-thumb:hover { 59 | background: #555; 60 | } 61 | -------------------------------------------------------------------------------- /day010/personal-portfolio/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDom from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | ReactDom.render(, document.getElementById("root")); 7 | -------------------------------------------------------------------------------- /day011/shopping_cart/.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /day011/shopping_cart/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | -------------------------------------------------------------------------------- /day011/shopping_cart/README.md: -------------------------------------------------------------------------------- 1 | # Add to Cart 2 | 3 | # Icrease and decrease Product quantity 4 | 5 | # Delete from Cart 6 | 7 | ## Authors 8 | 9 | - [Abdullah Moiz](https://www.github.com/Abdullah-moiz) 10 | 11 | ### Tech Used 12 | 13 | - tailwind css 14 | - nextjs 15 | - redux toolkit 16 | 17 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 18 | 19 | ## Getting Started 20 | 21 | First, run the development server: 22 | 23 | ```bash 24 | npm run dev 25 | # or 26 | yarn dev 27 | # or 28 | pnpm dev 29 | ``` 30 | 31 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 32 | 33 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. 34 | 35 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. 36 | 37 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. 38 | 39 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 40 | 41 | ## Learn More 42 | 43 | To learn more about Next.js, take a look at the following resources: 44 | 45 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 46 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 47 | 48 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 49 | 50 | ## Deploy on Vercel 51 | 52 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 53 | 54 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 55 | -------------------------------------------------------------------------------- /day011/shopping_cart/api/index.js: -------------------------------------------------------------------------------- 1 | import m1 from '@/public/machines/1.png' 2 | import m2 from '@/public/machines/2.png' 3 | import m3 from '@/public/machines/3.png' 4 | import m4 from '@/public/machines/4.png' 5 | import m5 from '@/public/machines/5.png' 6 | import m6 from '@/public/machines/6.png' 7 | 8 | 9 | export const data = [ 10 | { 11 | id : 1, 12 | product_name : "Machine 1", 13 | product_price : 2000 , 14 | product_quantity : 1 , 15 | product_image : m1, 16 | }, 17 | { 18 | id : 2, 19 | product_name : "Machine 2", 20 | product_price : 4000 , 21 | product_quantity : 1 , 22 | product_image : m2, 23 | }, 24 | { 25 | id : 3, 26 | product_name : "Machine 3", 27 | product_price : 5000 , 28 | product_quantity : 1 , 29 | product_image : m3, 30 | }, 31 | { 32 | id : 4, 33 | product_name : "Machine 4", 34 | product_price : 20000 , 35 | product_quantity : 1, 36 | product_image : m4, 37 | }, 38 | { 39 | id : 5, 40 | product_name : "Machine 5", 41 | product_price : 1000 , 42 | product_quantity : 1 , 43 | product_image : m5, 44 | }, 45 | { 46 | id : 6, 47 | product_name : "Machine 6", 48 | product_price : 2000 , 49 | product_quantity : 1 , 50 | product_image : m6, 51 | }, 52 | ] 53 | 54 | export default data; -------------------------------------------------------------------------------- /day011/shopping_cart/components/Card.jsx: -------------------------------------------------------------------------------- 1 | import { setCart } from '@/slices/cartSlice'; 2 | import Image from 'next/image' 3 | import React from 'react' 4 | import { useDispatch, useSelector } from 'react-redux' 5 | 6 | import { toast } from 'react-toastify'; 7 | 8 | 9 | 10 | export default function Card({ item }) { 11 | const dispatch = useDispatch(); 12 | const cart = useSelector(state => state.cart.cart) 13 | 14 | const AddToCart = () => { 15 | if (cart.length === 0) { 16 | dispatch(setCart(item)) 17 | toast.success(`${item.product_name} added to cart !`) 18 | } 19 | else { 20 | let checkProd = cart?.filter(prod => prod?.id === item?.id) 21 | if (checkProd.length > 0) { 22 | return toast.error(`${item.product_name} already in cart !`) 23 | } 24 | else { 25 | dispatch(setCart(item)) 26 | toast.success(`${item.product_name} added to cart !`) 27 | } 28 | } 29 | } 30 | 31 | return ( 32 |
33 | product image 34 |
35 |

{item?.product_name}

36 |

$ {item?.product_price}

37 |
38 | 39 |
40 | ) 41 | } 42 | -------------------------------------------------------------------------------- /day011/shopping_cart/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "paths": { 4 | "@/*": ["./*"] 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /day011/shopping_cart/next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = { 3 | reactStrictMode: true, 4 | } 5 | 6 | module.exports = nextConfig 7 | -------------------------------------------------------------------------------- /day011/shopping_cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "shopping_cart", 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 | "@reduxjs/toolkit": "^1.9.3", 13 | "eslint": "8.36.0", 14 | "eslint-config-next": "13.2.4", 15 | "next": "13.2.4", 16 | "react": "18.2.0", 17 | "react-dom": "18.2.0", 18 | "react-icons": "^4.8.0", 19 | "react-redux": "^8.0.5", 20 | "react-toastify": "^9.1.2" 21 | }, 22 | "devDependencies": { 23 | "autoprefixer": "^10.4.14", 24 | "postcss": "^8.4.31", 25 | "tailwindcss": "^3.2.7" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /day011/shopping_cart/pages/_app.js: -------------------------------------------------------------------------------- 1 | import '@/styles/globals.css' 2 | import { store } from '@/store/store' 3 | import { Provider } from 'react-redux' 4 | import 'react-toastify/dist/ReactToastify.css'; 5 | 6 | 7 | export default function App({ Component, pageProps }) { 8 | return ( 9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /day011/shopping_cart/pages/_document.js: -------------------------------------------------------------------------------- 1 | import { Html, Head, Main, NextScript } from 'next/document' 2 | 3 | export default function Document() { 4 | return ( 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | ) 13 | } 14 | -------------------------------------------------------------------------------- /day011/shopping_cart/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 | -------------------------------------------------------------------------------- /day011/shopping_cart/pages/index.js: -------------------------------------------------------------------------------- 1 | import Head from 'next/head' 2 | import Landing from './Page' 3 | 4 | export default function Home() { 5 | return ( 6 | <> 7 | 8 | Shopping Cart Example 9 | 10 | 11 | 12 | 13 | 14 | 15 | ) 16 | } 17 | -------------------------------------------------------------------------------- /day011/shopping_cart/postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /day011/shopping_cart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/favicon.ico -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/1.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/2.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/3.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/4.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/5.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/6.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/machines/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day011/shopping_cart/public/machines/7.png -------------------------------------------------------------------------------- /day011/shopping_cart/public/next.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day011/shopping_cart/public/thirteen.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day011/shopping_cart/public/vercel.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /day011/shopping_cart/slices/cartSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit' 2 | 3 | const initialState = { 4 | cart : [], 5 | total : 0, 6 | } 7 | 8 | export const cartSlice = createSlice({ 9 | name: 'Cart', 10 | initialState, 11 | reducers: { 12 | setCart : (state , action) => { 13 | state.cart = [...state.cart , action.payload] 14 | }, 15 | setDeleteCart : (state , action) => { 16 | state.cart = action.payload 17 | }, 18 | }, 19 | }) 20 | 21 | export const { setCart , setDeleteCart } = cartSlice.actions 22 | 23 | export const cartReducer = cartSlice.reducer; -------------------------------------------------------------------------------- /day011/shopping_cart/store/store.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit' 2 | import { cartReducer } from '@/slices/cartSlice' 3 | 4 | export const store = configureStore({ 5 | reducer: { 6 | cart : cartReducer, 7 | }, 8 | }) -------------------------------------------------------------------------------- /day011/shopping_cart/styles/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; -------------------------------------------------------------------------------- /day011/shopping_cart/tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | content: [ 4 | "./app/**/*.{js,ts,jsx,tsx}", 5 | "./pages/**/*.{js,ts,jsx,tsx}", 6 | "./components/**/*.{js,ts,jsx,tsx}", 7 | 8 | // Or if using `src` directory: 9 | "./src/**/*.{js,ts,jsx,tsx}", 10 | ], 11 | theme: { 12 | extend: {}, 13 | }, 14 | plugins: [], 15 | } -------------------------------------------------------------------------------- /day012/sticky-notes/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day012/sticky-notes/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sticky-notes", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day012/sticky-notes/public/add_new_note.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day012/sticky-notes/public/add_new_note.png -------------------------------------------------------------------------------- /day012/sticky-notes/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day012/sticky-notes/public/favicon.ico -------------------------------------------------------------------------------- /day012/sticky-notes/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Sticky Notes 28 | 29 | 30 | 31 | 32 |
33 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /day012/sticky-notes/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 | -------------------------------------------------------------------------------- /day012/sticky-notes/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day012/sticky-notes/public/sticky-note-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day012/sticky-notes/public/sticky-note-logo.png -------------------------------------------------------------------------------- /day012/sticky-notes/src/App.js: -------------------------------------------------------------------------------- 1 | import EmptyNotes from "./components/EmptyNotes"; 2 | import Header from "./components/Header"; 3 | import StickyNotesGrid from "./components/StickyNotesGrid"; 4 | import StickyNotesProvider from "./context/StickyNotesContext"; 5 | import "./index.css"; 6 | function App() { 7 | return ( 8 | 9 |
10 |
11 | 12 | 13 |
14 | 15 | ); 16 | } 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/ColorCustomizer.css: -------------------------------------------------------------------------------- 1 | .color-customizer { 2 | display: grid; 3 | grid-template-columns: 1fr 1fr 1fr; 4 | align-items: center; 5 | margin-bottom: 10px; 6 | width: 110px; 7 | gap: 10px; 8 | background: white; 9 | padding: 10px; 10 | border-radius: 10px; 11 | position: absolute; 12 | top: 55px; 13 | right: 60px; 14 | } 15 | 16 | .color-customizer-color { 17 | width: 20px; 18 | height: 20px; 19 | border-radius: 50%; 20 | border: none; 21 | outline: none; 22 | cursor: pointer; 23 | margin-left: 5px; 24 | margin-right: 5px; 25 | display: flex; 26 | justify-content: center; 27 | align-items: center; 28 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 29 | } -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/ColorCustomizer.js: -------------------------------------------------------------------------------- 1 | import "./ColorCustomizer.css" 2 | 3 | const COLOR_MAP = { 4 | yellow: '#ffd500', 5 | green: '#008000', 6 | blue: '#0000ff', 7 | pink: '#ffc0cb', 8 | purple: '#800080', 9 | orange: '#ffa500', 10 | red: '#ff0000', 11 | brown: '#a52a2a', 12 | black: '#000000' 13 | } 14 | 15 | const ColorCustomizer = (props) => { 16 | return ( 17 |
18 | {Object.keys(COLOR_MAP).map(color => ( 19 |
props.onColorChange(COLOR_MAP[color])} 23 | /> 24 | ))} 25 |
26 | ) 27 | } 28 | 29 | export default ColorCustomizer -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/EmptyNotes.css: -------------------------------------------------------------------------------- 1 | .empty-notes-container { 2 | display: grid; 3 | grid-template-columns: 1fr; 4 | grid-template-rows: 1fr; 5 | gap: 1rem; 6 | margin: 5rem; 7 | place-items: center; 8 | } 9 | 10 | .empty-notes { 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | font-size: 1rem; 15 | color: #706c60; 16 | } 17 | 18 | .empty-notes-image { 19 | width: 280px; 20 | height: 250px; 21 | } 22 | 23 | .add-note-button { 24 | display: flex; 25 | justify-content: space-between; 26 | align-items: center; 27 | margin-top: 1rem; 28 | padding: 0.7rem 1rem; 29 | border: none; 30 | border-radius: 5px; 31 | background-color: #ffd500; 32 | color: #000; 33 | font-size: 1rem; 34 | font-weight: 600; 35 | cursor: pointer; 36 | transition: all 0.2s ease-in-out; 37 | 38 | &:hover { 39 | background-color: #f5ba13; 40 | opacity: 0.8; 41 | scale: 1.1; 42 | } 43 | } -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/EmptyNotes.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useStickyNotes } from '../context/StickyNotesContext'; 3 | import { PlusSvgIcon } from './SvgIcons'; 4 | import "./EmptyNotes.css" 5 | 6 | const EmptyNotes = () => { 7 | const { notes, addNewNote } = useStickyNotes(); 8 | 9 | // If there are notes, return null 10 | if (notes.length > 0) return null 11 | 12 | return ( 13 |
14 | empty notes 15 |
Not notes yet. Please add a new note clicking on the button below.
16 | 20 |
21 | ) 22 | } 23 | 24 | export default EmptyNotes -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/Header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | width: 100%; 6 | padding: 0 1rem; 7 | background-color: rgb(107 99 255); 8 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 9 | height: 80px; 10 | position: fixed; 11 | top: 0; 12 | z-index: 1; 13 | } 14 | 15 | .logo-container { 16 | display: flex; 17 | align-items: center; 18 | margin-left: 50px; 19 | } 20 | 21 | .app-name { 22 | color: white; 23 | font-size: 1.5rem; 24 | font-weight: 600; 25 | } 26 | 27 | .new-button { 28 | border: none; 29 | border-radius: 5px; 30 | background-color: #ffd500; 31 | color: #000; 32 | font-size: 1rem; 33 | font-weight: 600; 34 | cursor: pointer; 35 | transition: all 0.2s ease-in-out; 36 | padding: 0.7rem 1rem; 37 | outline: none; 38 | margin-right: 50px; 39 | display: flex; 40 | align-items: center; 41 | justify-content: space-between; 42 | } -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { useStickyNotes } from '../context/StickyNotesContext' 3 | import { PlusSvgIcon } from './SvgIcons' 4 | import "./Header.css" 5 | 6 | const Header = () => { 7 | const { addNewNote } = useStickyNotes() 8 | 9 | return ( 10 |
11 |
12 | Sticky Notes Logo 13 |

Sticky Notes

14 |
15 | 19 |
20 | ) 21 | } 22 | 23 | export default Header -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/StickyNote.css: -------------------------------------------------------------------------------- 1 | .sticky-note { 2 | background-color: #ffd500; 3 | border-radius: 7px; 4 | padding: 20px; 5 | margin: 8px; 6 | height: 300px; 7 | position: relative; 8 | 9 | &:hover { 10 | background-color: #f5ba13; 11 | opacity: 0.8; 12 | } 13 | 14 | &::after { 15 | content: ''; 16 | position: absolute; 17 | bottom: 0; 18 | right: 0; 19 | width: 0; 20 | height: 0; 21 | border-style: solid; 22 | border-width: 0 20px 20px 0; 23 | border-color: transparent rgb(167 166 158) #fff transparent; 24 | transform: rotate(270deg); 25 | } 26 | } 27 | 28 | .sticky-header { 29 | display: flex; 30 | justify-content: flex-end; 31 | align-items: center; 32 | margin-bottom: 10px; 33 | } 34 | 35 | .sticky-note-circular-button { 36 | width: 30px; 37 | height: 30px; 38 | border-radius: 50%; 39 | background-color: #fff; 40 | border: none; 41 | outline: none; 42 | cursor: pointer; 43 | margin-left: 5px; 44 | margin-right: 5px; 45 | display: flex; 46 | justify-content: center; 47 | align-items: center; 48 | box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.1); 49 | 50 | &:hover { 51 | scale: 1.1; 52 | } 53 | } 54 | 55 | .sticky-note-title { 56 | font-size: 1.2em; 57 | font-weight: bold; 58 | margin-bottom: 10px; 59 | color: #fff; 60 | } 61 | 62 | .sticky-note-content { 63 | font-size: 1em; 64 | font-weight: normal; 65 | margin-bottom: 10px; 66 | max-height: 165px; 67 | overflow-y: auto; 68 | color: #fff; 69 | } 70 | 71 | .sticky-note-title-input { 72 | border: none; 73 | outline: none; 74 | font-size: 1.2em; 75 | font-weight: bold; 76 | margin-bottom: 10px; 77 | padding: 5px; 78 | background-color: #fff; 79 | border-radius: 3px; 80 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 81 | } 82 | 83 | .sticky-note-content-input { 84 | border: none; 85 | outline: none; 86 | font-size: 1em; 87 | font-weight: normal; 88 | margin-bottom: 10px; 89 | padding: 5px; 90 | background-color: #fff; 91 | border-radius: 3px; 92 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 93 | } 94 | 95 | textarea { 96 | resize: none; 97 | border: none; 98 | outline: none; 99 | font-size: 1.2em; 100 | font-weight: bold; 101 | margin-bottom: 10px; 102 | padding: 5px; 103 | background-color: #fff; 104 | border-radius: 3px; 105 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 106 | } -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/StickyNotesGrid.css: -------------------------------------------------------------------------------- 1 | .grid-container { 2 | display: grid; 3 | grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); 4 | width: 100%; 5 | height: 100vh; 6 | gap: 30px; 7 | margin-top: 80px; 8 | } 9 | -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/StickyNotesGrid.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import "./StickyNotesGrid.css" 3 | import StickyNote from './StickyNote' 4 | import { useStickyNotes } from '../context/StickyNotesContext'; 5 | 6 | const StickyNotesGrid = () => { 7 | const { notes, updateNote, deleteNote } = useStickyNotes(); 8 | if (notes.length === 0) return null 9 | 10 | return ( 11 |
12 | {notes.map(note => ( 13 | updateNote(note)} 17 | onDelete={id => deleteNote(id)} 18 | /> 19 | ))} 20 |
21 | ) 22 | } 23 | 24 | export default StickyNotesGrid -------------------------------------------------------------------------------- /day012/sticky-notes/src/components/SvgIcons.js: -------------------------------------------------------------------------------- 1 | export const CrossSvgIcon = () => ( 2 | 3 | 4 | 5 | 6 | ) 7 | 8 | export const ColorSvgIcon = () => ( 9 | 10 | ) 11 | 12 | export const PlusSvgIcon = () => ( 13 | 14 | 15 | 16 | ) -------------------------------------------------------------------------------- /day012/sticky-notes/src/context/StickyNotesContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useEffect, useState } from "react"; 2 | 3 | const StickyNotesContext = createContext(); 4 | 5 | // StickyNotesContext.Provider is a component that wraps around the entire app 6 | const StickyNotesProvider = ({ children }) => { 7 | const [notes, setNotes] = useState(JSON.parse(localStorage.getItem('notes')) || []); 8 | 9 | // Save notes to localStorage every time the notes array changes 10 | useEffect(() => { 11 | localStorage.setItem('notes', JSON.stringify(notes)); 12 | }, [notes]); 13 | 14 | function addNewNote() { 15 | setNotes(prevNotes => { 16 | return [...prevNotes, { 17 | id: Date.now(), 18 | title: 'Click to edit title', 19 | content: 'Click to edit content', 20 | color: '#ffd500' 21 | }]; 22 | }); 23 | } 24 | 25 | function updateNote(note) { 26 | setNotes(prevNotes => { 27 | const updatedNotes = prevNotes.map(prevNote => { 28 | if (prevNote.id === note.id) { 29 | return { ...prevNote, ...note }; 30 | } 31 | return prevNote; 32 | }); 33 | return updatedNotes; 34 | }); 35 | } 36 | 37 | function deleteNote(id) { 38 | setNotes(prevNotes => { 39 | return prevNotes.filter(note => note.id !== id); 40 | }); 41 | } 42 | 43 | return ( 44 | 50 | {children} 51 | 52 | ); 53 | } 54 | 55 | export default StickyNotesProvider; 56 | 57 | // Custom hook to use the StickyNotesContext 58 | export const useStickyNotes = () => { 59 | return useContext(StickyNotesContext); 60 | } -------------------------------------------------------------------------------- /day012/sticky-notes/src/hooks/useDebounce.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from 'react' 2 | 3 | function useDebounce(value, delay) { 4 | const [debouncedValue, setDebouncedValue] = useState(value); 5 | 6 | useEffect(() => { 7 | // Set debouncedValue to value (passed in) after the specified delay 8 | const handler = setTimeout(() => { 9 | setDebouncedValue(value); 10 | }, delay); 11 | 12 | // Return a cleanup function that will be called every time ... 13 | return () => { 14 | clearTimeout(handler); 15 | } 16 | }, [value, delay]); 17 | 18 | return debouncedValue; 19 | } 20 | 21 | export default useDebounce -------------------------------------------------------------------------------- /day012/sticky-notes/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Lato', 4 | sans-serif; 5 | -webkit-font-smoothing: antialiased; 6 | -moz-osx-font-smoothing: grayscale; 7 | } 8 | 9 | code { 10 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 11 | monospace; 12 | } 13 | 14 | .app-container { 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | height: 100vh; 20 | padding: 50px; 21 | } -------------------------------------------------------------------------------- /day012/sticky-notes/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 | -------------------------------------------------------------------------------- /day013/music-player/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /day013/music-player/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "music-player", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.17.0", 7 | "@testing-library/react": "^13.4.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^18.2.0", 10 | "react-dom": "^18.2.0", 11 | "react-scripts": "5.0.1", 12 | "web-vitals": "^2.1.4" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /day013/music-player/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day013/music-player/public/favicon.ico -------------------------------------------------------------------------------- /day013/music-player/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | Music Player 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /day013/music-player/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day013/music-player/public/logo192.png -------------------------------------------------------------------------------- /day013/music-player/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day013/music-player/public/logo512.png -------------------------------------------------------------------------------- /day013/music-player/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 | -------------------------------------------------------------------------------- /day013/music-player/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /day013/music-player/public/zunzun.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day013/music-player/public/zunzun.png -------------------------------------------------------------------------------- /day013/music-player/src/App.js: -------------------------------------------------------------------------------- 1 | import MusicPlayer from "./components/MusicPlayer"; 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /day013/music-player/src/components/Controls.css: -------------------------------------------------------------------------------- 1 | .controls-container { 2 | display: flex; 3 | justify-content: space-between; 4 | align-items: center; 5 | flex-direction: column; 6 | margin-top: 10px; 7 | } 8 | 9 | .controls-icon { 10 | font-size: 1.5rem; 11 | cursor: pointer; 12 | } 13 | 14 | .volume{ 15 | display: flex; 16 | justify-content: space-between; 17 | align-items: center; 18 | width: 100%; 19 | margin-top: 20px; 20 | } 21 | 22 | .controls { 23 | display: flex; 24 | justify-content: space-between; 25 | align-items: center; 26 | width: 100%; 27 | margin-top: 10px; 28 | } 29 | 30 | button { 31 | border: none; 32 | cursor: pointer; 33 | outline: none; 34 | display: flex; 35 | justify-content: center; 36 | align-items: center; 37 | background: none; 38 | color: rgb(31, 180, 130); 39 | } 40 | 41 | .play-pause { 42 | background-color: rgb(31, 180, 130); 43 | width: 50px; 44 | height: 50px; 45 | border-radius: 50%; 46 | color: white; 47 | } 48 | 49 | .volume-button { 50 | color: rgb(170, 173, 172); 51 | 52 | > svg { 53 | width: 22px; 54 | height: 22px; 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /day013/music-player/src/components/DisplayTrack.css: -------------------------------------------------------------------------------- 1 | .display-track-container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | } 7 | 8 | .track-image-preview-rounded { 9 | width: 200px; 10 | height: 200px; 11 | border-radius: 15px; 12 | margin-bottom: 20px; 13 | 14 | border: 1px solid #ccc; 15 | background-color: #fff; 16 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 17 | } 18 | 19 | .track-info { 20 | display: flex; 21 | flex-direction: column; 22 | align-items: center; 23 | justify-content: center; 24 | } 25 | 26 | .track-title { 27 | font-size: 1.2rem; 28 | font-weight: 600; 29 | margin: 0; 30 | } 31 | 32 | .track-artist { 33 | font-size: 1rem; 34 | font-weight: lighter; 35 | margin-top: 10px; 36 | } -------------------------------------------------------------------------------- /day013/music-player/src/components/DisplayTrack.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './DisplayTrack.css' 3 | import { useTrack } from '../context/TrackContext' 4 | 5 | const DisplayTrack = () => { 6 | const { track, audioRef, setDuration, progressBarRef, handleNext } = useTrack() 7 | 8 | function onLoadedMetadata() { 9 | const duration = audioRef.current.duration 10 | setDuration(duration) 11 | progressBarRef.current.max = duration 12 | } 13 | 14 | return ( 15 |
16 | track 17 |
18 |

{track.displayName}

19 |

{track.artist}

20 |
21 |
23 | ) 24 | } 25 | 26 | export default DisplayTrack -------------------------------------------------------------------------------- /day013/music-player/src/components/Header.css: -------------------------------------------------------------------------------- 1 | .player-header { 2 | height: 50px; 3 | width: 100%; 4 | display: flex; 5 | justify-content: space-between; 6 | align-items: center; 7 | margin-bottom: 20px; 8 | } 9 | 10 | .player-title { 11 | display: flex; 12 | align-items: center; 13 | 14 | > img { 15 | width: 50px; 16 | height: 50px; 17 | margin-right: 10px; 18 | } 19 | } 20 | 21 | .playlist-button { 22 | border: none; 23 | background-color: transparent; 24 | cursor: pointer; 25 | 26 | > svg { 27 | width: 28px; 28 | height: 28px; 29 | } 30 | } -------------------------------------------------------------------------------- /day013/music-player/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { TbPlaylist } from "react-icons/tb"; 3 | 4 | import './Header.css' 5 | 6 | const Header = ({ onClickPlayList }) => { 7 | return ( 8 |
9 |

10 | logo 11 | Zunzun Player 12 |

13 | 14 | 17 |
18 | ) 19 | } 20 | 21 | export default Header -------------------------------------------------------------------------------- /day013/music-player/src/components/MusicPlayer.css: -------------------------------------------------------------------------------- 1 | .music-player { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | border: 1px solid #ccc; 7 | border-radius: 10px; 8 | padding: 30px; 9 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 10 | } 11 | 12 | .music-player-body { 13 | display: flex; 14 | width: 100%; 15 | gap: 20px; 16 | } 17 | 18 | .player { 19 | width: 350px; 20 | } 21 | 22 | .animate__animated.animate__slideInLeft { 23 | --animate-duration: 0.4s; 24 | } -------------------------------------------------------------------------------- /day013/music-player/src/components/MusicPlayer.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import DisplayTrack from './DisplayTrack' 3 | import Controls from './Controls' 4 | import ProgressBar from './ProgressBar' 5 | // import { tracks } from '../data' 6 | import Header from './Header' 7 | import PlayList from './PlayList' 8 | import 'animate.css'; 9 | import './MusicPlayer.css' 10 | import { useTrack } from '../context/TrackContext' 11 | 12 | const MusicPlayer = () => { 13 | const { trackIndex, handlePlayListItemClick, showPlayList } = useTrack() 14 | 15 | return ( 16 |
17 |
18 |
19 |
20 | 21 | 22 | 23 |
24 |
25 | 26 |
27 |
28 |
29 | ) 30 | } 31 | 32 | export default MusicPlayer -------------------------------------------------------------------------------- /day013/music-player/src/components/PlayList.css: -------------------------------------------------------------------------------- 1 | .playlist { 2 | display: flex; 3 | flex-direction: column; 4 | width: 350px; 5 | height: 430px; 6 | overflow: auto; 7 | padding: 0; 8 | margin: 0; 9 | list-style: none; 10 | padding-right: 5px; 11 | 12 | &::-webkit-scrollbar { 13 | width: 5px; 14 | } 15 | 16 | &::-webkit-scrollbar-track { 17 | background: #f1f1f1; 18 | } 19 | 20 | &::-webkit-scrollbar-thumb { 21 | background: rgb(31, 180, 130); 22 | } 23 | } 24 | 25 | .playlist-item { 26 | display: flex; 27 | align-items: center; 28 | justify-content: space-between; 29 | cursor: pointer; 30 | margin-bottom: 5px; 31 | } 32 | 33 | .playlist-item-info-wrapper { 34 | display: flex; 35 | align-items: center; 36 | 37 | > img { 38 | width: 50px; 39 | height: 50px; 40 | border-radius: 7px; 41 | margin-right: 10px; 42 | } 43 | } 44 | 45 | .playlist-item-info { 46 | display: flex; 47 | flex-direction: column; 48 | align-items: baseline; 49 | 50 | > h3 { 51 | margin: 0; 52 | font-size: 1rem; 53 | } 54 | 55 | > p { 56 | margin: 0; 57 | font-size: 0.8rem; 58 | color: #666; 59 | } 60 | } 61 | 62 | .playlist-item-duration { 63 | display: flex; 64 | flex-direction: column; 65 | align-items: flex-end; 66 | 67 | > p { 68 | margin: 0; 69 | font-size: 0.8rem; 70 | color: #666; 71 | } 72 | 73 | > span { 74 | font-size: 0.7rem; 75 | color: #666; 76 | } 77 | } 78 | 79 | .equalizer { 80 | > svg { 81 | width: 20px; 82 | height: 20px; 83 | margin-right: 3px; 84 | } 85 | } -------------------------------------------------------------------------------- /day013/music-player/src/components/PlayList.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { tracks } from '../data' 3 | import './PlayList.css' 4 | import { useTrack } from '../context/TrackContext' 5 | import useTracksDuration from '../hooks/useTrack' 6 | import { BiEqualizer } from "react-icons/bi"; 7 | 8 | const PlayList = ({ trackIndex, onClick }) => { 9 | const { isPlayListOpen } = useTrack() 10 | const { durations } = useTracksDuration(tracks); 11 | 12 | if (!isPlayListOpen) return null 13 | 14 | return ( 15 |
16 |
17 |
18 | {tracks.map((track, index) => ( 19 |
onClick(index)}> 20 |
21 | track 22 |
23 |

{track.displayName}

24 |

{track.artist}

25 |
26 |
27 |
28 |

{durations[index]}

29 | {trackIndex === index && } 30 |
31 |
32 | ))} 33 |
34 |
35 |
36 | ) 37 | } 38 | 39 | export default PlayList -------------------------------------------------------------------------------- /day013/music-player/src/components/Player.css: -------------------------------------------------------------------------------- 1 | .player { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | justify-content: center; 6 | border: 1px solid #ccc; 7 | border-radius: 10px; 8 | width: 350px; 9 | padding: 30px; 10 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 11 | } -------------------------------------------------------------------------------- /day013/music-player/src/components/Player.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react' 2 | import Header from './Header' 3 | import MusicPlayer from './MusicPlayer' 4 | import './Player.css' 5 | import PlayList from './PlayList' 6 | 7 | const Player = () => { 8 | const [view, setView] = useState('player') 9 | 10 | return ( 11 |
12 |
setView('playlist')} /> 13 | {view === 'player' ? : view === 'playlist' ? : null} 14 |
15 | ) 16 | } 17 | 18 | export default Player -------------------------------------------------------------------------------- /day013/music-player/src/components/ProgressBar.css: -------------------------------------------------------------------------------- 1 | .progress-bar-container { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | margin-top: 10px; 6 | width: 100%; 7 | gap: 10px; 8 | } 9 | 10 | input[type="range"] { 11 | --range-progress: 0; 12 | -webkit-appearance: none; 13 | position: relative; 14 | background:#ccc; 15 | width: 100%; 16 | height: 5px; 17 | border-radius: 7px; 18 | cursor: pointer; 19 | } 20 | 21 | /* Input range - firefox */ 22 | input[type="range"]::-moz-range-track { 23 | position: relative; 24 | background:#ccc; 25 | width: 100%; 26 | height: 5px; 27 | border-radius: 7px; 28 | cursor: pointer; 29 | } 30 | 31 | /* played progress length - Chrome & safari*/ 32 | input[type="range"]::before { 33 | content: ''; 34 | height: 5px; 35 | background: rgb(31, 180, 130); 36 | width: var(--range-progress); 37 | border-bottom-left-radius: 7px; 38 | border-top-left-radius: 7px; 39 | position: absolute; 40 | top: 0; 41 | left: 0; 42 | } 43 | 44 | /* played progress length - firefox */ 45 | input[type="range"]::-moz-range-progress { 46 | background: rgb(31, 180, 130); 47 | border-bottom-left-radius: 7px; 48 | border-top-left-radius: 7px; 49 | height: 5px; 50 | } 51 | 52 | /* slider thumb - chrome and safari */ 53 | input[type="range"]::-webkit-slider-thumb { 54 | -webkit-appearance: none; 55 | height: 15px; 56 | width: 15px; 57 | border-radius: 50%; 58 | border: none; 59 | background-color: rgb(31, 180, 130); 60 | cursor: pointer; 61 | position: relative; 62 | } 63 | 64 | /* dragging thumb - chrome and safari */ 65 | input[type="range"]:active::-webkit-slider-thumb { 66 | transform: scale(1.2); 67 | } 68 | 69 | /* slider thumb - firefox */ 70 | input[type="range"]::-moz-range-thumb { 71 | height: 8px; 72 | width: 8px; 73 | border-radius: 50%; 74 | background: rgb(31, 180, 130); 75 | cursor: pointer; 76 | border: transparent; 77 | position: relative; 78 | } 79 | /* dragging thumb - firefox */ 80 | input[type="range"]:active::-moz-range-thumb { 81 | transform: scale(1.2); 82 | } 83 | 84 | .time { 85 | font-weight: lighter; 86 | width: 70px; 87 | } -------------------------------------------------------------------------------- /day013/music-player/src/components/ProgressBar.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { formatTime } from '../helpers' 3 | import './ProgressBar.css' 4 | import { useTrack } from '../context/TrackContext' 5 | 6 | const ProgressBar = () => { 7 | const { progressBarRef, audioRef, timeProgress, duration } = useTrack() 8 | 9 | function handleProgressChange() { 10 | audioRef.current.currentTime = progressBarRef.current.value 11 | } 12 | 13 | return ( 14 |
15 | {formatTime(timeProgress)} 16 | 17 | {formatTime(duration)} 18 |
19 | ) 20 | } 21 | 22 | export default ProgressBar -------------------------------------------------------------------------------- /day013/music-player/src/context/TrackContext.js: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useRef, useState } from "react"; 2 | import useTracksDuration from "../hooks/useTrack"; 3 | import { tracks } from "../data"; 4 | 5 | const TrackContext = createContext(); 6 | 7 | const TrackProvider = ({ children }) => { 8 | // References 9 | const audioRef = useRef(null) 10 | const progressBarRef = useRef(null) 11 | 12 | 13 | // States 14 | const [trackIndex, setTrackIndex] = useState(0) 15 | const [trackIndexFromList, setTrackIndexFromList] = useState(trackIndex) 16 | const [track, setTrack] = useState(tracks[trackIndex]) 17 | const [timeProgress, setTimeProgress] = useState(0) 18 | const [duration, setDuration] = useState(0) 19 | const [isPlayListOpen, setIsPlayListOpen] = useState(false) 20 | 21 | // Custom hook 22 | const { tracksDuration, isLoadingTrackDuration } = useTracksDuration(tracks); 23 | 24 | 25 | function showPlayList() { 26 | setIsPlayListOpen(!isPlayListOpen) 27 | } 28 | 29 | function handleNext() { 30 | if (trackIndex >= tracks.length - 1) { 31 | setTrackIndex(0) 32 | setTrackIndexFromList(0) 33 | setTrack(tracks[0]) 34 | } else { 35 | setTrackIndex(trackIndex + 1) 36 | setTrackIndexFromList(trackIndex + 1) 37 | setTrack(tracks[trackIndex + 1]) 38 | } 39 | } 40 | 41 | function handlePlayListItemClick(index) { 42 | setTrackIndexFromList(index) 43 | } 44 | 45 | return ( 46 | 67 | {children} 68 | 69 | ) 70 | } 71 | 72 | export const useTrack = () => { 73 | return useContext(TrackContext); 74 | } 75 | 76 | export default TrackProvider 77 | 78 | -------------------------------------------------------------------------------- /day013/music-player/src/helpers.js: -------------------------------------------------------------------------------- 1 | export const formatTime = (time) => { 2 | if (time && !isNaN(time)) { 3 | const minutes = Math.floor(time / 60); 4 | const formatMinutes = 5 | minutes < 10 ? `0${minutes}` : `${minutes}`; 6 | const seconds = Math.floor(time % 60); 7 | const formatSeconds = 8 | seconds < 10 ? `0${seconds}` : `${seconds}`; 9 | return `${formatMinutes}:${formatSeconds}`; 10 | } 11 | return '00:00'; 12 | }; -------------------------------------------------------------------------------- /day013/music-player/src/hooks/useTrack.js: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react" 2 | import { formatTime } from "../helpers" 3 | 4 | 5 | function useTracksDuration(tracks) { 6 | const [isLoadingTrackDuration, setIsLoadingTrackDuration] = useState(true); 7 | const [durations, setDurations] = useState([]); 8 | 9 | useEffect(() => { 10 | const fetchDurations = async () => { 11 | try { 12 | setIsLoadingTrackDuration(true) 13 | const durationsArray = []; 14 | 15 | tracks.forEach(track => { 16 | const audio = new Audio(track.audioSrc); 17 | audio.addEventListener('loadedmetadata', () => { 18 | const duration = formatTime(audio.duration); 19 | durationsArray.push(duration); 20 | }); 21 | }); 22 | 23 | setDurations(durationsArray); 24 | } catch (err) { 25 | console.log(err); 26 | } finally { 27 | setIsLoadingTrackDuration(false); 28 | } 29 | }; 30 | 31 | fetchDurations(); 32 | }, [tracks]) 33 | 34 | return { durations, isLoadingTrackDuration }; 35 | } 36 | 37 | export default useTracksDuration -------------------------------------------------------------------------------- /day013/music-player/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 | 15 | .App { 16 | text-align: center; 17 | display: grid; 18 | grid-template-columns: 1fr; 19 | place-items: center; 20 | height: 100vh; 21 | } -------------------------------------------------------------------------------- /day013/music-player/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 TrackProvider from './context/TrackContext'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | 13 | 14 | ); -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/.eslintrc.cjs: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { browser: true, es2020: true }, 4 | extends: [ 5 | 'eslint:recommended', 6 | 'plugin:react/recommended', 7 | 'plugin:react/jsx-runtime', 8 | 'plugin:react-hooks/recommended', 9 | ], 10 | ignorePatterns: ['dist', '.eslintrc.cjs'], 11 | parserOptions: { ecmaVersion: 'latest', sourceType: 'module' }, 12 | settings: { react: { version: '18.2' } }, 13 | plugins: ['react-refresh'], 14 | rules: { 15 | 'react-refresh/only-export-components': [ 16 | 'warn', 17 | { allowConstantExport: true }, 18 | ], 19 | }, 20 | } 21 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/README.md: -------------------------------------------------------------------------------- 1 | # React + Vite 2 | 3 | This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules. 4 | 5 | Currently, two official plugins are available: 6 | 7 | - [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh 8 | - [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh 9 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Random Dog Pic 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "dogpicapi", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "react": "^18.2.0", 14 | "react-dom": "^18.2.0" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.2.15", 18 | "@types/react-dom": "^18.2.7", 19 | "@vitejs/plugin-react": "^4.0.3", 20 | "eslint": "^8.45.0", 21 | "eslint-plugin-react": "^7.32.2", 22 | "eslint-plugin-react-hooks": "^4.6.0", 23 | "eslint-plugin-react-refresh": "^0.4.3", 24 | "vite": "^4.4.5" 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/public/dog.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 16 | 17 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/App.jsx: -------------------------------------------------------------------------------- 1 | import Dog from "./Components/Dog" 2 | 3 | function App() { 4 | return ( 5 |
6 | 7 |
8 | ); 9 | } 10 | 11 | export default App; 12 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/Assets/dog.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/zshaian/react-project-ideas/fb3bf45a86a2a2556c85c6252da0873886cf8135/day014/Random-Dog-Pic-Generate/src/Assets/dog.jpg -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/Components/BreedSelector.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function BreedSelector({ breeds, selectedBreed, setSelectedBreed, getDogs }) { 4 | return ( 5 |
6 | 17 |
18 | 21 |
22 | ); 23 | } 24 | 25 | export default BreedSelector; 26 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/Components/DogImage.jsx: -------------------------------------------------------------------------------- 1 | import Dogpic from "../Assets/dog.jpg"; 2 | import React from 'react'; 3 | 4 | function DogImage({ imgLinks, error }) { 5 | return ( 6 |
7 | 8 | {error ? ( 9 |
10 | doggy 11 |

{error}

12 |
13 | ) : ( 14 | imgLinks.length > 0 && ( 15 |
16 | doggy 17 |

Breed : {imgLinks[0].breed}

18 |
19 | ) 20 | )} 21 |
22 | ); 23 | } 24 | 25 | export default DogImage; 26 | 27 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/Components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Footer = () => { 4 | return ( 5 | 8 | ) 9 | } 10 | 11 | export default Footer -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/Components/Header.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Header = () => { 4 | return ( 5 |
6 |

Random Dog Images

7 |
8 | ) 9 | } 10 | 11 | export default Header -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom/client' 3 | import App from './App.jsx' 4 | import './index.css' 5 | 6 | ReactDOM.createRoot(document.getElementById('root')).render( 7 | 8 | 9 | 10 | ) 11 | -------------------------------------------------------------------------------- /day014/Random-Dog-Pic-Generate/vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-project-ideas", 3 | "lockfileVersion": 3, 4 | "requires": true, 5 | "packages": { 6 | "": { 7 | "dependencies": { 8 | "animate.css": "^4.1.1", 9 | "react-icons": "^4.12.0" 10 | } 11 | }, 12 | "node_modules/animate.css": { 13 | "version": "4.1.1", 14 | "resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz", 15 | "integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==" 16 | }, 17 | "node_modules/js-tokens": { 18 | "version": "4.0.0", 19 | "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", 20 | "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", 21 | "peer": true 22 | }, 23 | "node_modules/loose-envify": { 24 | "version": "1.4.0", 25 | "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", 26 | "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", 27 | "peer": true, 28 | "dependencies": { 29 | "js-tokens": "^3.0.0 || ^4.0.0" 30 | }, 31 | "bin": { 32 | "loose-envify": "cli.js" 33 | } 34 | }, 35 | "node_modules/react": { 36 | "version": "18.2.0", 37 | "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", 38 | "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", 39 | "peer": true, 40 | "dependencies": { 41 | "loose-envify": "^1.1.0" 42 | }, 43 | "engines": { 44 | "node": ">=0.10.0" 45 | } 46 | }, 47 | "node_modules/react-icons": { 48 | "version": "4.12.0", 49 | "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.12.0.tgz", 50 | "integrity": "sha512-IBaDuHiShdZqmfc/TwHu6+d6k2ltNCf3AszxNmjJc1KUfXdEeRJOKyNvLmAHaarhzGmTSVygNdyu8/opXv2gaw==", 51 | "peerDependencies": { 52 | "react": "*" 53 | } 54 | } 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "dependencies": { 3 | "animate.css": "^4.1.1", 4 | "react-icons": "^4.12.0" 5 | } 6 | } 7 | --------------------------------------------------------------------------------