├── .eslintrc.json ├── .gitignore ├── .prettierrc.json ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── logo192.png ├── logo512.png ├── manifest.json └── robots.txt └── src ├── App.js ├── components └── Counter.js ├── index.css └── index.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "env": { 3 | "browser": true, 4 | "es2021": true, 5 | "jest": true 6 | }, 7 | "extends": [ 8 | "eslint:recommended", 9 | "plugin:react/recommended", 10 | "plugin:prettier/recommended" 11 | ], 12 | "overrides": [], 13 | "parserOptions": { 14 | "ecmaVersion": "latest", 15 | "sourceType": "module" 16 | }, 17 | "plugins": ["react"], 18 | "rules": { "react/react-in-jsx-scope": "off" } 19 | } 20 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "semi": true, 3 | "tabWidth": 2, 4 | "printWidth": 100, 5 | "singleQuote": true, 6 | "trailingComma": "none", 7 | "jsxBracketSameLine": true 8 | } 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React assigment - 2 : Counter App 2 | 3 | ## Total points = 5 4 | 5 | ### Purpose of this assignment : Testing students skills on 6 | 7 | - useState() hook 8 | - Event Handler 9 | - conditional rendering 10 | 11 | ### [Click here to see the project demo](https://react-assignment-2-counter-app.netlify.app/) 12 | 13 | ### Assignment steps: 14 | 15 | - part 1: make sure that increment, decrement and reset functionality works (3 points) 16 | - part 2: disable buttons(2 points) 17 | 18 | - disable increment button when count value is 5 19 | - disable decrement button when count value is -5 20 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "counter-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.5", 7 | "@testing-library/react": "^13.3.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 | "devDependencies": { 39 | "eslint": "^8.22.0", 40 | "eslint-config-prettier": "^8.5.0", 41 | "eslint-plugin-prettier": "^4.2.1", 42 | "eslint-plugin-react": "^7.31.0", 43 | "prettier": "^2.7.1" 44 | }, 45 | "lint": "eslint .", 46 | "lint:fix": "eslint --fix", 47 | "format": "prettier --write './**/*.{js,jsx,ts,tsx,css,md,json}' --config ./.prettierrc" 48 | } 49 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/react-assignment-2-counter-app/ddf9bb366069b9a90c81c18b02be1c894dc91f83/public/favicon.ico -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/react-assignment-2-counter-app/ddf9bb366069b9a90c81c18b02be1c894dc91f83/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/anisul-Islam/react-assignment-2-counter-app/ddf9bb366069b9a90c81c18b02be1c894dc91f83/public/logo512.png -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Counter from './components/Counter'; 3 | 4 | const App = () => { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | }; 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/components/Counter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Counter = () => { 4 | return ( 5 |
6 |

Counter App

7 |
8 |

Count : 0

9 |
10 | 11 | 12 | 13 |
14 |
15 |
16 | ); 17 | }; 18 | 19 | export default Counter; 20 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --border-radius: 0.6rem; 3 | --text-color: #fff; 4 | } 5 | 6 | * { 7 | box-sizing: border-box; 8 | margin: 0; 9 | padding: 0; 10 | list-style-type: none; 11 | text-decoration: none; 12 | outline: none; 13 | } 14 | html { 15 | scroll-behavior: smooth; 16 | } 17 | 18 | body { 19 | background-color: #4c4c4c; 20 | } 21 | 22 | .center { 23 | display: flex; 24 | flex-direction: column; 25 | justify-content: center; 26 | align-items: center; 27 | gap: 1rem; 28 | } 29 | 30 | .counter { 31 | height: 100vh; 32 | padding: 1rem; 33 | } 34 | 35 | .counter__title { 36 | color: var(--text-color); 37 | font-size: 2rem; 38 | margin-bottom: 3rem; 39 | color: orange; 40 | } 41 | 42 | .card { 43 | background-color: #3c3c3c; 44 | width: 100%; 45 | max-width: 30rem; 46 | color: rgb(195, 154, 77); 47 | padding: 1rem; 48 | border-radius: var(--border-radius); 49 | } 50 | 51 | .btn { 52 | border: none; 53 | padding: 0.1rem 0.6rem; 54 | border-radius: var(--border-radius); 55 | font-size: 1.6rem; 56 | transition: all 0.3s; 57 | margin: 0 0.2rem; 58 | color: rgb(195, 154, 77); 59 | } 60 | 61 | .btn:hover { 62 | background-color: orange; 63 | color: black; 64 | } 65 | 66 | .btn:disabled { 67 | background-color: red; 68 | } 69 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import App from './App'; 4 | 5 | import './index.css'; 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | 9 | root.render(); 10 | --------------------------------------------------------------------------------