├── .gitignore ├── reactjs-interview-questions ├── cart-cost-calculator │ ├── src │ │ ├── App.css │ │ ├── index.js │ │ ├── index.css │ │ ├── reducers │ │ │ └── cartReducer.js │ │ ├── App.js │ │ └── components │ │ │ ├── Products.js │ │ │ └── Cart.js │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ ├── logo512.png │ │ ├── manifest.json │ │ └── index.html │ ├── README.md │ └── package.json └── file-explorer │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ ├── manifest.json │ └── index.html │ ├── src │ ├── index.js │ ├── App.js │ ├── hooks │ │ └── use-traverse-tree.js │ ├── styles.css │ ├── data │ │ └── folderData.js │ └── components │ │ └── Folder.js │ ├── README.md │ └── package.json └── machine-coding-interview-questions ├── README.md ├── tic-tac-toe └── README.md ├── countdown-timer ├── README.md ├── src │ ├── style.css │ └── script.js └── index.html └── employee-database-management ├── README.md ├── index.html └── src ├── data.json ├── styles.css └── script.js /.gitignore: -------------------------------------------------------------------------------- 1 | **/node_modules 2 | **/.DS_Store 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/README.md: -------------------------------------------------------------------------------- 1 | # Machine Coding Interview Questions 2 | 3 | ### Watch the tutorials here - 4 | ## https://www.youtube.com/RoadsideCoder 5 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/priya42bagde/frontend-interview-questions/HEAD/reactjs-interview-questions/file-explorer/public/favicon.ico -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/priya42bagde/frontend-interview-questions/HEAD/reactjs-interview-questions/file-explorer/public/logo192.png -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/priya42bagde/frontend-interview-questions/HEAD/reactjs-interview-questions/file-explorer/public/logo512.png -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/priya42bagde/frontend-interview-questions/HEAD/reactjs-interview-questions/cart-cost-calculator/public/favicon.ico -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/priya42bagde/frontend-interview-questions/HEAD/reactjs-interview-questions/cart-cost-calculator/public/logo192.png -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/priya42bagde/frontend-interview-questions/HEAD/reactjs-interview-questions/cart-cost-calculator/public/logo512.png -------------------------------------------------------------------------------- /machine-coding-interview-questions/tic-tac-toe/README.md: -------------------------------------------------------------------------------- 1 | # Tic Tac Toe with Vanilla JS ( Machine Coding Interview Question ) 2 | # ---------- Incomplete / Work in Progress / Coming Soon ---------- 3 | 4 | ### Watch the tutorial here - 5 | ## https://www.youtube.com/RoadsideCoder 6 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/src/index.js: -------------------------------------------------------------------------------- 1 | import { StrictMode } from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | rootElement 12 | ); 13 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/README.md: -------------------------------------------------------------------------------- 1 | # Recursive File Explorer ( React JS Machine Coding Interview Question ) 2 | 3 | ### Watch the tutorial here - 4 | ## https://www.youtube.com/watch?v=20F_KzHPpvI 5 | ![#3 File Explorer(2)](https://user-images.githubusercontent.com/51760520/202840516-928412cb-4058-4e8c-a663-6bcf55a4e9f7.png) 6 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/countdown-timer/README.md: -------------------------------------------------------------------------------- 1 | # Countdown Timer with Vanilla JS ( Machine Coding Interview Question ) 2 | 3 | ### Watch the tutorial here - 4 | ## https://www.youtube.com/watch?v=L15ctzu_clE 5 | ![MACHINE CODING #2](https://user-images.githubusercontent.com/51760520/201519330-5757bf4b-a325-4739-9cc7-7661d7d48685.png) 6 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/README.md: -------------------------------------------------------------------------------- 1 | # Shopping Cart in React JS ( React JS Machine Coding Round Question ) 2 | 3 | ## Watch the explaination here - 4 | ### https://www.youtube.com/watch?v=q-ylRxSxGcY 5 | ![Razorpay Video Thumbnail](https://user-images.githubusercontent.com/51760520/184123738-a5109b9b-2601-455e-b190-49c677624a15.png) 6 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/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 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/employee-database-management/README.md: -------------------------------------------------------------------------------- 1 | # Employee Database Manager with Vanilla JS ( Machine Coding Interview Question ) 2 | 3 | ### Watch the tutorial here - 4 | ## https://www.youtube.com/watch?v=ZrMO0bCGwFg 5 | ![MACHINE CODING(1)](https://user-images.githubusercontent.com/51760520/200096125-4ed0df98-af1a-41b9-aa9a-dab9e57b57e2.png) 6 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/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 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/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 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/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 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import Folder from "./components/Folder"; 3 | import useTraverseTree from "./hooks/use-traverse-tree"; 4 | import "./styles.css"; 5 | import explorer from "./data/folderData" 6 | 7 | export default function App() { 8 | const [explorerData, setExplorerData] = useState(explorer); 9 | 10 | const { insertNode } = useTraverseTree(); 11 | 12 | const handleInsertNode = (folderId, item, isFolder) => { 13 | const finalTree = insertNode(explorerData, folderId, item, isFolder); 14 | setExplorerData(finalTree); 15 | }; 16 | 17 | return ( 18 |
19 | 20 |
21 | ); 22 | } 23 | 24 | // fix connect script in latest video 25 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/src/reducers/cartReducer.js: -------------------------------------------------------------------------------- 1 | export const cartReducer = (state, action) => { 2 | switch (action.type) { 3 | case "ADD_PRODUCTS": 4 | return { ...state, products: action.payload }; 5 | case "ADD_TO_CART": 6 | return { ...state, cart: [{ ...action.payload, qty: 1 }, ...state.cart] }; 7 | case "REMOVE_FROM_CART": 8 | return { 9 | ...state, 10 | cart: state.cart.filter((c) => c.id !== action.payload.id), 11 | }; 12 | case "CHANGE_CART_QTY": 13 | return { 14 | ...state, 15 | cart: state.cart.filter((c) => 16 | c.id === action.payload.id ? (c.qty = action.payload.qty) : c.qty 17 | ), 18 | }; 19 | default: 20 | return state; 21 | } 22 | }; -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/src/hooks/use-traverse-tree.js: -------------------------------------------------------------------------------- 1 | const useTraverseTree = () => { 2 | // Add a file or folder in tree 3 | // Can be optimised using Dynamic Programming 4 | const insertNode = function (tree, folderId, item, isFolder) { 5 | if (tree.id === folderId && tree.isFolder) { 6 | tree.items.unshift({ 7 | name: item, 8 | isFolder: isFolder, 9 | items: [] 10 | }); 11 | 12 | return tree; 13 | } 14 | 15 | let latestNode = []; 16 | latestNode = tree.items.map((ob) => { 17 | return insertNode(ob, folderId, item, isFolder); 18 | }); 19 | 20 | return { ...tree, items: latestNode }; 21 | }; 22 | 23 | const deleteNode = () => {}; // Do it Yourself 24 | 25 | const renameNode = () => {}; // Do it Yourself 26 | 27 | return { insertNode, deleteNode, renameNode }; 28 | }; 29 | 30 | export default useTraverseTree; -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/src/styles.css: -------------------------------------------------------------------------------- 1 | .folder { 2 | margin-top: 6px; 3 | background-color: lightgray; 4 | display: flex; 5 | align-items: center; 6 | justify-content: space-between; 7 | padding: 2px; 8 | width: 300px; 9 | cursor: pointer; 10 | } 11 | 12 | .inputContainer{ 13 | display: flex; 14 | align-items: center; 15 | gap: 5px; 16 | } 17 | 18 | .inputContainer>span{ 19 | margin-top: 5px; 20 | } 21 | 22 | .inputContainer__input { 23 | margin: 6px 0 0px 0; 24 | padding: 5px; 25 | display: flex; 26 | border: 1px solid lightgray; 27 | align-items: center; 28 | justify-content: space-between; 29 | cursor: pointer; 30 | } 31 | 32 | .folder > span { 33 | margin: 0 5px; 34 | } 35 | 36 | .folder > div > button { 37 | font-size: 15px; 38 | background-color: white; 39 | } 40 | 41 | .file { 42 | margin-top: 5px; 43 | padding-left: 5px; 44 | display: flex; 45 | flex-direction: column; 46 | } 47 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/src/App.js: -------------------------------------------------------------------------------- 1 | import {useEffect, useReducer} from 'react' 2 | import axios from 'axios' 3 | import './App.css'; 4 | import Products from './components/Products'; 5 | import Cart from './components/Cart'; 6 | import { cartReducer } from './reducers/cartReducer'; 7 | 8 | function App() { 9 | const [state, dispatch] = useReducer(cartReducer, { 10 | products: [], 11 | cart: [], 12 | }); 13 | 14 | const fetchProducts = async()=>{ 15 | const {data} = await axios.get("https://dummyjson.com/products") 16 | 17 | dispatch({ 18 | type: 'ADD_PRODUCTS', 19 | payload: data.products 20 | }) 21 | } 22 | 23 | useEffect(() => { 24 | fetchProducts() 25 | }, []) 26 | 27 | return ( 28 |
29 | 30 | 31 |
32 | ); 33 | } 34 | 35 | export default App; 36 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "file-explorer", 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 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "cost-calculator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.4", 7 | "@testing-library/react": "^13.3.0", 8 | "@testing-library/user-event": "^13.5.0", 9 | "axios": "^0.27.2", 10 | "react": "^18.2.0", 11 | "react-dom": "^18.2.0", 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 | -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/src/data/folderData.js: -------------------------------------------------------------------------------- 1 | const explorer = { 2 | id:"1", 3 | name: "root", 4 | isFolder: true, 5 | items: [ 6 | { 7 | id:"2", 8 | name: "public", 9 | isFolder: true, 10 | items: [ 11 | { 12 | id:"3", 13 | name: "public nested 1", 14 | isFolder: true, 15 | items: [ 16 | { 17 | id:"4", 18 | name: "index.html", 19 | isFolder: false, 20 | items: [] 21 | }, 22 | { 23 | id:"5", 24 | name: "hello.html", 25 | isFolder: false, 26 | items: [] 27 | } 28 | ] 29 | }, 30 | { 31 | id:"6", 32 | name: "public_nested_file", 33 | isFolder: false, 34 | items: [] 35 | } 36 | ] 37 | }, 38 | { 39 | id:"7", 40 | name: "src", 41 | isFolder: true, 42 | items: [ 43 | { 44 | id:"8", 45 | name: "App.js", 46 | isFolder: false, 47 | items: [] 48 | }, 49 | { 50 | id:"9", 51 | name: "Index.js", 52 | isFolder: false, 53 | items: [] 54 | }, 55 | { 56 | id:"10", 57 | name: "styles.css", 58 | isFolder: false, 59 | items: [] 60 | } 61 | ] 62 | }, 63 | { 64 | id:"11", 65 | name: "package.json", 66 | isFolder: false, 67 | items: [] 68 | } 69 | ] 70 | }; 71 | 72 | export default explorer; 73 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/countdown-timer/src/style.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | body { 7 | height: 85vh; 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | gap: 20px; 13 | font-family: sans-serif; 14 | } 15 | 16 | .container__title { 17 | padding: 10px 20px; 18 | font-size: 40px; 19 | text-align: center; 20 | } 21 | 22 | .container { 23 | height: 200px; 24 | width: 500px; 25 | display: flex; 26 | flex-direction: column; 27 | gap: 10px; 28 | } 29 | 30 | .container__labels, 31 | .container__inputs, 32 | .container__btns { 33 | display: flex; 34 | justify-content: space-between; 35 | } 36 | 37 | .container__btns { 38 | margin-top: 20px; 39 | } 40 | 41 | .container__labels--label { 42 | width: 20%; 43 | text-align: center; 44 | font-size: 30px; 45 | padding: 5px 10px; 46 | } 47 | 48 | .container__inputs--time { 49 | justify-self: center; 50 | align-self: center; 51 | border: none; 52 | font-size: 50px; 53 | width: 90px; 54 | height: 50px; 55 | } 56 | 57 | .container__inputs--colon { 58 | justify-self: center; 59 | align-self: center; 60 | font-size: 30px; 61 | margin: 0; 62 | padding: 5px 10px; 63 | } 64 | 65 | .btn { 66 | width: 48%; 67 | height: 50px; 68 | font-size: 30px; 69 | border: none; 70 | border-radius: 5px; 71 | cursor: pointer; 72 | color: white; 73 | } 74 | 75 | input { 76 | text-align: center; 77 | outline: none; 78 | } 79 | 80 | .start { 81 | background-color: green; 82 | } 83 | 84 | .stop { 85 | display: none; 86 | background-color: orange; 87 | } 88 | 89 | .reset { 90 | background-color: orangered; 91 | } 92 | 93 | input::-webkit-outer-spin-button, 94 | input::-webkit-inner-spin-button { 95 | -webkit-appearance: none; 96 | margin: 0; 97 | } 98 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/src/components/Products.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const Products = ({state,dispatch}) => { 4 | const {products, cart} = state; 5 | 6 | return ( 7 |
8 | {products.map((prod)=>( 9 |
10 | {prod.title} 11 |
12 | {prod.title} 13 | $ {prod.price} 14 |
15 | {cart.some((p) => p.id === prod.id) ? ( 16 | 26 | ) : ( 27 | 43 | )} 44 |
45 | ))} 46 |
47 | ) 48 | } 49 | 50 | export default Products -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/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 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/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 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/countdown-timer/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Countdown Timer 9 | 10 | 11 |
12 | Countdown Timer 13 | 14 |
15 |

Hours

16 |

Minutes

17 |

Seconds

18 |
19 | 20 |
21 | 28 |

:

29 | 36 |

:

37 | 44 |
45 | 46 |
47 | 48 | 49 | 50 |
51 |
52 | 53 | 54 | 55 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/employee-database-management/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Employee Database Manager 5 | 6 | 7 | 8 | 9 |
10 |
11 |

Employee Database Management

12 | 13 |
14 | 15 |
16 |
17 | Employee List 18 |
19 |
20 |
21 |
Employee Information
22 |
23 |
24 |
25 | 26 | 27 |
28 |
29 | Add a new Employee 30 |
31 | 32 | 33 |
34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 |
45 | 46 | 47 | 48 | 49 | 50 | -------------------------------------------------------------------------------- /reactjs-interview-questions/cart-cost-calculator/src/components/Cart.js: -------------------------------------------------------------------------------- 1 | import {useEffect,useState} from 'react' 2 | 3 | const Cart = ({state, dispatch}) => { 4 | const {cart} = state 5 | const [total, setTotal] = useState(); 6 | 7 | useEffect(() => { 8 | setTotal( 9 | cart.reduce((acc, curr) => acc + Number(curr.price) * curr.qty, 0) 10 | ); 11 | }, [cart]); 12 | 13 | const changeQty = (id,qty) => dispatch({ 14 | type: "CHANGE_CART_QTY", 15 | payload: { 16 | id: id, 17 | qty: qty, 18 | }, 19 | }) 20 | 21 | return ( 22 |
23 | Cart 24 | Subtotal: $ {total} 25 |
26 | {cart.length > 0 ? 27 | cart.map((prod)=>( 28 |
29 |
30 | {prod.title} 31 |
32 | {prod.title} 33 | $ {prod.price} 34 |
35 |
36 |
37 | 38 | {prod.qty} 39 | 40 |
41 |
42 | )) 43 | : 44 | Cart is empty} 45 |
46 |
47 | ) 48 | } 49 | 50 | export default Cart -------------------------------------------------------------------------------- /reactjs-interview-questions/file-explorer/src/components/Folder.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | 3 | function Folder({ handleInsertNode = () => {}, explorer }) { 4 | const [expand, setExpand] = useState(false); 5 | const [showInput, setShowInput] = useState({ 6 | visible: false, 7 | isFolder: false 8 | }); 9 | 10 | const handleNewFolder = (e, isFolder) => { 11 | e.stopPropagation(); 12 | setExpand(true); 13 | setShowInput({ 14 | visible: true, 15 | isFolder 16 | }); 17 | }; 18 | 19 | const onAddFolder = (e) => { 20 | if (e.keyCode === 13 && e.target.value) { 21 | handleInsertNode(explorer.id, e.target.value, showInput.isFolder); 22 | 23 | setShowInput({ ...showInput, visible: false }); 24 | } 25 | }; 26 | 27 | if (explorer.isFolder) { 28 | return ( 29 |
30 |
setExpand(!expand)} className="folder"> 31 | 📁 {explorer.name} 32 | 33 |
34 | 35 | 36 |
37 |
38 | 39 |
40 | {showInput.visible && ( 41 |
42 | {showInput.isFolder? "📁" : "📄"} 43 | setShowInput({ ...showInput, visible: false })} 49 | /> 50 |
51 | )} 52 | 53 | {explorer.items.map((exp) => { 54 | return ( 55 | 60 | ); 61 | })} 62 |
63 |
64 | ); 65 | } else { 66 | return 📄 {explorer.name}; 67 | } 68 | } 69 | 70 | export default Folder; 71 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/countdown-timer/src/script.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var hour = document.querySelector(".hour"); 3 | var min = document.querySelector(".minute"); 4 | var sec = document.querySelector(".sec"); 5 | var startBtn = document.querySelector(".start"); 6 | var stopBtn = document.querySelector(".stop"); 7 | var resetBtn = document.querySelector(".reset"); 8 | 9 | var countdownTimer = null; 10 | 11 | // Start Timer Button - START 12 | startBtn.addEventListener("click", function () { 13 | if (hour.value == 0 && min.value == 0 && sec.value == 0) return; 14 | 15 | function startInterval() { 16 | startBtn.style.display = "none"; 17 | stopBtn.style.display = "initial"; 18 | 19 | countdownTimer = setInterval(function () { 20 | timer(); 21 | }, 1000); 22 | } 23 | startInterval(); 24 | }); 25 | // Start Timer Button - END 26 | 27 | function timer() { 28 | // Formatting the time - START 29 | if (sec.value > 60) { 30 | min.value++; 31 | sec.value = parseInt(sec.value) - 59; 32 | } 33 | if (min.value > 60) { 34 | hour.value++; 35 | min.value = parseInt(min.value) - 60; 36 | } 37 | min.value = min.value > 60 ? 60 : min.value; 38 | // Formatting the time - END 39 | 40 | // Updating the Time - START 41 | if (hour.value == 0 && min.value == 0 && sec.value == 0) { 42 | hour.value = ""; 43 | min.value = ""; 44 | sec.value = ""; 45 | stopInterval(); 46 | } else if (sec.value != 0) { 47 | sec.value = `${sec.value <= 10 ? "0" : ""}${sec.value - 1}`; 48 | } else if (min.value != 0 && sec.value == 0) { 49 | sec.value = 59; 50 | min.value = `${min.value <= 10 ? "0" : ""}${min.value - 1}`; 51 | } else if (hour.value != 0 && min.value == 0) { 52 | min.value = 60; 53 | hour.value = `${hour.value <= 10 ? "0" : ""}${hour.value - 1}`; 54 | } 55 | return; 56 | // Updating the Time - END 57 | } 58 | 59 | // Stop Interval Logic - START 60 | function stopInterval(state) { 61 | startBtn.innerHTML = state === "pause" ? "Continue" : "Start"; 62 | 63 | stopBtn.style.display = "none"; 64 | startBtn.style.display = "initial"; 65 | clearInterval(countdownTimer); 66 | } 67 | // Stop Interval Logic - END 68 | 69 | // Stop Timer Button - START 70 | stopBtn.addEventListener("click", function () { 71 | stopInterval("pause"); 72 | }); 73 | // Start Timer Button - END 74 | 75 | // Reset Timer Button - START 76 | resetBtn.addEventListener("click", function () { 77 | hour.value = ""; 78 | min.value = ""; 79 | sec.value = ""; 80 | 81 | stopInterval(); 82 | }); 83 | // Reset Timer Button - END 84 | })(); 85 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/employee-database-management/src/data.json: -------------------------------------------------------------------------------- 1 | [ 2 | { 3 | "id": 1001, 4 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 5 | "firstName": "Thomas", 6 | "lastName": "Leannon", 7 | "email": "Thomas.Leannon@dummyapis.com", 8 | "contactNumber": "4121091095", 9 | "age": 43, 10 | "dob": "26/08/1979", 11 | "salary": 1, 12 | "address": "Address1" 13 | }, 14 | { 15 | "id": 1002, 16 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 17 | "firstName": "Faye", 18 | "lastName": "Sauer", 19 | "email": "Faye.Sauer@dummyapis.com", 20 | "contactNumber": "4914696673", 21 | "age": 60, 22 | "dob": "28/06/1962", 23 | "salary": 2, 24 | "address": "Address2" 25 | }, 26 | { 27 | "id": 1003, 28 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 29 | "firstName": "Deven", 30 | "lastName": "Halvorson", 31 | "email": "Deven.Halvorson@dummyapis.com", 32 | "contactNumber": "4479795571", 33 | "age": 29, 34 | "dob": "06/01/1993", 35 | "salary": 3, 36 | "address": "Address3" 37 | }, 38 | { 39 | "id": 1004, 40 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 41 | "firstName": "Melisa", 42 | "lastName": "Schuppe", 43 | "email": "Melisa.Schuppe@dummyapis.com", 44 | "contactNumber": "4443995334", 45 | "age": 38, 46 | "dob": "06/09/1984", 47 | "salary": 4, 48 | "address": "Address4" 49 | }, 50 | { 51 | "id": 1005, 52 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 53 | "firstName": "Dell", 54 | "lastName": "Kris", 55 | "email": "Dell.Kris@dummyapis.com", 56 | "contactNumber": "4505692843", 57 | "age": 89, 58 | "dob": "14/03/1933", 59 | "salary": 5, 60 | "address": "Address5" 61 | }, 62 | { 63 | "id": 1006, 64 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 65 | "firstName": "Marcia", 66 | "lastName": "Gutmann", 67 | "email": "Marcia.Gutmann@dummyapis.com", 68 | "contactNumber": "4746199430", 69 | "age": 56, 70 | "dob": "24/07/1966", 71 | "salary": 6, 72 | "address": "Address6" 73 | }, 74 | { 75 | "id": 1007, 76 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 77 | "firstName": "Jarrod", 78 | "lastName": "Ortiz", 79 | "email": "Jarrod.Ortiz@dummyapis.com", 80 | "contactNumber": "4859095720", 81 | "age": 82, 82 | "dob": "26/12/1940", 83 | "salary": 7, 84 | "address": "Address7" 85 | }, 86 | { 87 | "id": 1008, 88 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 89 | "firstName": "Gabriella", 90 | "lastName": "Wilkinson", 91 | "email": "Gabriella.Wilkinson@dummyapis.com", 92 | "contactNumber": "4379190775", 93 | "age": 36, 94 | "dob": "24/06/1986", 95 | "salary": 8, 96 | "address": "Address8" 97 | }, 98 | { 99 | "id": 1009, 100 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 101 | "firstName": "Elisabeth", 102 | "lastName": "Hayes", 103 | "email": "Elisabeth.Hayes@dummyapis.com", 104 | "contactNumber": "4394091994", 105 | "age": 66, 106 | "dob": "17/08/1956", 107 | "salary": 9, 108 | "address": "Address9" 109 | }, 110 | { 111 | "id": 1010, 112 | "imageUrl": "https://cdn-icons-png.flaticon.com/512/0/93.png", 113 | "firstName": "Jaime", 114 | "lastName": "Reichel", 115 | "email": "Jaime.Reichel@dummyapis.com", 116 | "contactNumber": "4622392580", 117 | "age": 41, 118 | "dob": "21/01/1981", 119 | "salary": 10, 120 | "address": "Address10" 121 | } 122 | ] 123 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/employee-database-management/src/styles.css: -------------------------------------------------------------------------------- 1 | /* Initial Structural CSS - START */ 2 | :root { 3 | --btn: #dbdbdb; 4 | --btn-hover: #cacaca; 5 | --item-bg: #f0f0f0; 6 | --modal-bg: rgba(141, 141, 141, 0.541); 7 | } 8 | body { 9 | font-family: sans-serif; 10 | padding: 0 10px; 11 | } 12 | .header { 13 | display: flex; 14 | justify-content: space-between; 15 | align-items: center; 16 | } 17 | .header > button { 18 | padding: 10px 15px; 19 | border-radius: 20px; 20 | border: none; 21 | background-color: var(--btn); 22 | cursor: pointer; 23 | } 24 | .header > button:hover { 25 | background-color: var(--btn-hover); 26 | } 27 | .employees { 28 | display: flex; 29 | } 30 | .employees > div { 31 | border: 1px solid black; 32 | overflow-y: scroll; 33 | height: 450px; 34 | } 35 | .employees__names { 36 | width: 30%; 37 | } 38 | .employees__single { 39 | width: 70%; 40 | } 41 | .employees__names, 42 | .employees__single { 43 | padding: 10px; 44 | display: flex; 45 | flex-direction: column; 46 | } 47 | .employees__names--title, 48 | .employees__single--title { 49 | padding-bottom: 10px; 50 | margin-bottom: 5px; 51 | text-align: center; 52 | border-bottom: 1px solid black; 53 | } 54 | /* Initial Structural CSS - END */ 55 | 56 | /* Render all Employees - START */ 57 | .employees__names--list { 58 | display: flex; 59 | flex-direction: column; 60 | } 61 | .employees__names--item { 62 | cursor: pointer; 63 | padding: 10px 15px; 64 | margin-bottom: 5px; 65 | text-align: center; 66 | background-color: var(--item-bg); 67 | border-radius: 10px; 68 | display: flex; 69 | justify-content: space-between; 70 | align-items: center; 71 | } 72 | .employees__names--item:hover, 73 | .selected { 74 | background-color: var(--btn); 75 | } 76 | /* Render all Employees - END */ 77 | 78 | /* Render Single Employee - START */ 79 | .employees__single--heading { 80 | text-align: center; 81 | font-size: 25px; 82 | text-transform: uppercase; 83 | padding: 5px; 84 | } 85 | .employees__single--info { 86 | display: flex; 87 | flex-direction: column; 88 | align-items: center; 89 | gap: 10px; 90 | } 91 | .employees__single--info > img { 92 | width: 250px; 93 | height: 250px; 94 | object-fit: contain; 95 | border-radius: 50%; 96 | } 97 | /* Render Single Employee - END */ 98 | 99 | /* Add Employee - START */ 100 | .addEmployee { 101 | display: none; 102 | width: 100%; 103 | height: 100%; 104 | position: absolute; 105 | top: 0; 106 | left: 0; 107 | justify-content: center; 108 | align-items: center; 109 | background-color: var(--modal-bg); 110 | } 111 | .addEmployee_create { 112 | width: 400px; 113 | background-color: white; 114 | box-shadow: 0 0 50px grey; 115 | padding: 20px; 116 | border-radius: 5px; 117 | text-align: center; 118 | display: flex; 119 | flex-direction: column; 120 | gap: 15px; 121 | } 122 | .addEmployee_create > div { 123 | display: grid; 124 | grid-template-columns: 48.1% 48.1%; 125 | column-gap: 15px; 126 | } 127 | .addEmployee_create input { 128 | padding: 5px 10px; 129 | border-radius: 5px; 130 | border: 1px solid rgb(236, 236, 236); 131 | } 132 | 133 | /* removes arrows from input type='number' */ 134 | .addEmployee_create input::-webkit-outer-spin-button, 135 | .addEmployee_create input::-webkit-inner-spin-button { 136 | -webkit-appearance: none; 137 | margin: 0; 138 | } 139 | .addEmployee_create--submit { 140 | padding: 10px !important; 141 | border-radius: 5px; 142 | border: none; 143 | background-color: var(--btn); 144 | cursor: pointer; 145 | } 146 | .addEmployee_create--submit:hover { 147 | background-color: var(--btn-hover); 148 | } 149 | /* Add Employee - END */ 150 | -------------------------------------------------------------------------------- /machine-coding-interview-questions/employee-database-management/src/script.js: -------------------------------------------------------------------------------- 1 | (async function () { 2 | const data = await fetch("./src/data.json") 3 | const res = await data.json() 4 | 5 | let employees = res; 6 | let selectedEmployeeId = employees[0].id; 7 | let selectedEmployee = employees[0]; 8 | 9 | const employeeList = document.querySelector(".employees__names--list"); 10 | const employeeInfo = document.querySelector(".employees__single--info"); 11 | 12 | // Add Employee - START 13 | const createEmployee = document.querySelector(".createEmployee"); 14 | const addEmployeeModal = document.querySelector(".addEmployee"); 15 | const addEmployeeForm = document.querySelector(".addEmployee_create"); 16 | 17 | createEmployee.addEventListener("click", () => { 18 | addEmployeeModal.style.display = "flex"; 19 | }); 20 | 21 | addEmployeeModal.addEventListener("click", (e) => { 22 | if (e.target.className === "addEmployee") { 23 | addEmployeeModal.style.display = "none"; 24 | } 25 | }); 26 | 27 | // Set Employee age to be entered minimum 18 years 28 | const dobInput = document.querySelector(".addEmployee_create--dob"); 29 | dobInput.max = `${new Date().getFullYear() - 18}-${new Date().toISOString().slice(5, 10)}` 30 | 31 | addEmployeeForm.addEventListener("submit", (e) => { 32 | e.preventDefault(); 33 | const formData = new FormData(addEmployeeForm); 34 | const values = [...formData.entries()]; 35 | let empData = {}; 36 | values.forEach((val) => { 37 | empData[val[0]] = val[1]; 38 | }); 39 | empData.id = employees[employees.length - 1].id + 1; 40 | empData.age = 41 | new Date().getFullYear() - parseInt(empData.dob.slice(0, 4), 10); 42 | empData.imageUrl = 43 | empData.imageUrl || "https://cdn-icons-png.flaticon.com/512/0/93.png"; 44 | employees.push(empData); 45 | renderEmployees(); 46 | addEmployeeForm.reset(); 47 | addEmployeeModal.style.display = "none"; 48 | }); 49 | // Add Employee - END 50 | 51 | employeeList.addEventListener("click", (e) => { 52 | // Select Employee Logic - START 53 | if (e.target.tagName === "SPAN" && selectedEmployeeId !== e.target.id) { 54 | selectedEmployeeId = e.target.id; 55 | renderEmployees(); 56 | renderSingleEmployee(); 57 | } 58 | // Select Employee Logic - END 59 | 60 | // Employee Delete Logic - START 61 | if (e.target.tagName === "I") { 62 | employees = employees.filter( 63 | (emp) => String(emp.id) !== e.target.parentNode.id 64 | ); 65 | if (String(selectedEmployeeId) === e.target.parentNode.id) { 66 | selectedEmployeeId = employees[0]?.id || -1; 67 | selectedEmployee = employees[0] || {}; 68 | renderSingleEmployee(); 69 | } 70 | renderEmployees(); 71 | } 72 | // Employee Delete Logic - END 73 | }); 74 | 75 | // Render All Employees Logic - START 76 | const renderEmployees = () => { 77 | employeeList.innerHTML = ""; 78 | employees.forEach((emp) => { 79 | const employee = document.createElement("span"); 80 | employee.classList.add("employees__names--item"); 81 | if (parseInt(selectedEmployeeId, 10) === emp.id) { 82 | employee.classList.add("selected"); 83 | selectedEmployee = emp; 84 | } 85 | employee.setAttribute("id", emp.id); 86 | employee.innerHTML = `${emp.firstName} ${emp.lastName} ❌`; 87 | employeeList.append(employee); 88 | }); 89 | }; 90 | // Render All Employees Logic - END 91 | 92 | // Render Single Employee Logic - START 93 | const renderSingleEmployee = () => { 94 | // Employee Delete Logic - START 95 | if (selectedEmployeeId === -1) { 96 | employeeInfo.innerHTML = ""; 97 | return; 98 | } 99 | // Employee Delete Logic - END 100 | 101 | employeeInfo.innerHTML = ` 102 | 103 | 104 | ${selectedEmployee.firstName} ${selectedEmployee.lastName} (${selectedEmployee.age}) 105 | 106 | ${selectedEmployee.address} 107 | ${selectedEmployee.email} 108 | Mobile - ${selectedEmployee.contactNumber} 109 | DOB - ${selectedEmployee.dob} 110 | `; 111 | }; 112 | // Render Single Employee Logic - END 113 | 114 | renderEmployees(); 115 | if (selectedEmployee) renderSingleEmployee(); 116 | })() --------------------------------------------------------------------------------