├── .gitignore ├── README.md ├── components.json ├── eslint.config.js ├── index.html ├── jsconfig.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public └── vite.svg ├── src ├── App.css ├── App.jsx ├── assets │ └── react.svg ├── components │ └── ui │ │ ├── badge.jsx │ │ ├── button.jsx │ │ ├── card.jsx │ │ ├── checkbox.jsx │ │ └── dialog.jsx ├── index.css ├── lib │ └── utils.js ├── main.jsx ├── pdf │ └── 50 JAVASCRIPT INTERVIEW QUESTIONS PART 1.pdf └── ppt │ └── 50 JAVASCRIPT INTERVIEW QUESTIONS PART 1.pptx ├── tailwind.config.js └── vite.config.js /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "new-york", 4 | "rsc": false, 5 | "tsx": false, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "src/index.css", 9 | "baseColor": "neutral", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import react from 'eslint-plugin-react' 4 | import reactHooks from 'eslint-plugin-react-hooks' 5 | import reactRefresh from 'eslint-plugin-react-refresh' 6 | 7 | export default [ 8 | { ignores: ['dist'] }, 9 | { 10 | files: ['**/*.{js,jsx}'], 11 | languageOptions: { 12 | ecmaVersion: 2020, 13 | globals: globals.browser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | ecmaFeatures: { jsx: true }, 17 | sourceType: 'module', 18 | }, 19 | }, 20 | settings: { react: { version: '18.3' } }, 21 | plugins: { 22 | react, 23 | 'react-hooks': reactHooks, 24 | 'react-refresh': reactRefresh, 25 | }, 26 | rules: { 27 | ...js.configs.recommended.rules, 28 | ...react.configs.recommended.rules, 29 | ...react.configs['jsx-runtime'].rules, 30 | ...reactHooks.configs.recommended.rules, 31 | 'react/jsx-no-target-blank': 'off', 32 | 'react-refresh/only-export-components': [ 33 | 'warn', 34 | { allowConstantExport: true }, 35 | ], 36 | }, 37 | }, 38 | ] 39 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite + React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": ".", 4 | "paths": { 5 | "@/*": ["./src/*"] 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "js-interview-questions", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@radix-ui/react-checkbox": "^1.1.2", 14 | "@radix-ui/react-dialog": "^1.1.2", 15 | "@radix-ui/react-icons": "^1.3.1", 16 | "@radix-ui/react-slot": "^1.1.0", 17 | "class-variance-authority": "^0.7.0", 18 | "clsx": "^2.1.1", 19 | "lucide-react": "^0.454.0", 20 | "react": "^18.3.1", 21 | "react-dom": "^18.3.1", 22 | "tailwind-merge": "^2.5.4", 23 | "tailwindcss-animate": "^1.0.7" 24 | }, 25 | "devDependencies": { 26 | "@eslint/js": "^9.13.0", 27 | "@types/react": "^18.3.12", 28 | "@types/react-dom": "^18.3.1", 29 | "@vitejs/plugin-react": "^4.3.3", 30 | "autoprefixer": "^10.4.20", 31 | "eslint": "^9.13.0", 32 | "eslint-plugin-react": "^7.37.2", 33 | "eslint-plugin-react-hooks": "^5.0.0", 34 | "eslint-plugin-react-refresh": "^0.4.14", 35 | "globals": "^15.11.0", 36 | "postcss": "^8.4.47", 37 | "tailwindcss": "^3.4.14", 38 | "vite": "^5.4.10" 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/vite.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { Card, CardHeader, CardTitle } from "@/components/ui/card"; 3 | import { 4 | Dialog, 5 | DialogContent, 6 | DialogHeader, 7 | DialogTitle, 8 | DialogTrigger, 9 | } from "@/components/ui/dialog"; 10 | import { Checkbox } from "@/components/ui/checkbox"; 11 | import { Badge } from "@/components/ui/badge"; 12 | 13 | const sections = [ 14 | { 15 | title: "Data Types and Operators", 16 | questions: [ 17 | "What are the data types in JavaScript?", 18 | "What is the difference between == and ===?", 19 | "What is the difference between null and undefined?", 20 | ], 21 | }, 22 | { 23 | title: "Variables and Scope", 24 | questions: [ 25 | "Explain the concept of hoisting in JavaScript.", 26 | "What is the difference between let, const, and var?", 27 | "What is variable scope in JavaScript?", 28 | "Explain the difference between global and local variables.", 29 | "What is the temporal dead zone?", 30 | "What is variable shadowing?", 31 | ], 32 | }, 33 | { 34 | title: "Functions", 35 | questions: [ 36 | "What is a closure in JavaScript?", 37 | "What are the different ways to define a function in JavaScript?", 38 | "What is a higher-order function?", 39 | "Explain the concept of function hoisting.", 40 | "What is a pure function?", 41 | "What is the difference between function declaration and function expression?", 42 | "What is an Immediately Invoked Function Expression (IIFE)?", 43 | ], 44 | }, 45 | { 46 | title: "Objects", 47 | questions: [ 48 | "How do you create an object in JavaScript?", 49 | "How do you add/remove properties to an object dynamically?", 50 | "How do you check if a property exists in an object?", 51 | "What is the purpose of the this keyword in JavaScript?", 52 | ], 53 | }, 54 | { 55 | title: "Arrays", 56 | questions: [ 57 | "What are the different ways to loop through an array in JavaScript?", 58 | "Explain the difference between for...in and for...of loops.", 59 | "How do you add/remove elements from an array?", 60 | "What is the purpose of the map() function?", 61 | "Explain the difference between filter() and find() methods.", 62 | "Explain the difference between some() and every() method.", 63 | ], 64 | }, 65 | { 66 | title: "DOM Manipulation", 67 | questions: [ 68 | "How do you select elements in the DOM using JavaScript?", 69 | "How do you create and append elements to the DOM?", 70 | "Explain the difference between innerHTML and textContent.", 71 | "How do you remove an element from the DOM?", 72 | ], 73 | }, 74 | { 75 | title: "ES6+ Features", 76 | questions: [ 77 | "What are arrow functions and how do they differ from regular functions?", 78 | "Explain the concept of destructuring in JavaScript.", 79 | "What are template literals?", 80 | "How do you use the spread operator?", 81 | "What are default parameters in ES6?", 82 | "How do you use the rest parameter in functions?", 83 | ], 84 | }, 85 | { 86 | title: "Asynchronous JavaScript", 87 | questions: [ 88 | "What is callback & callback hell explain with example", 89 | "What is a Promise in JavaScript with example?", 90 | "How do you chain Promises?", 91 | "What is the purpose of the Promise.all() method?", 92 | "What is the purpose of the finally() method in Promises?", 93 | "What is the purpose of the async await ?", 94 | "How do you handle errors in async/await?", 95 | "What is the difference between async/await and Promises?", 96 | ], 97 | }, 98 | { 99 | title: "Modules and JSON", 100 | questions: [ 101 | "What is the difference between default and named exports?", 102 | "How do you convert a JavaScript object to a JSON string ?", 103 | "How do you parse a JSON string back into a JavaScript object?", 104 | ], 105 | }, 106 | { 107 | title: "Web Storage", 108 | questions: [ 109 | "What is localStorage in JavaScript, and how do you store and retrieve data from it?", 110 | "What is the difference between localStorage and sessionStorage?", 111 | "How do you delete a specific item from localStorage or clear all data from it?", 112 | ], 113 | }, 114 | ]; 115 | 116 | export default function App() { 117 | const [openSection, setOpenSection] = useState(null); 118 | const [progress, setProgress] = useState({}); 119 | const [isClient, setIsClient] = useState(false); 120 | 121 | useEffect(() => { 122 | setIsClient(true); 123 | const savedProgress = localStorage.getItem("interviewQuestionsProgress"); 124 | if (savedProgress) { 125 | setProgress(JSON.parse(savedProgress)); 126 | } 127 | }, []); 128 | 129 | useEffect(() => { 130 | if (isClient) { 131 | localStorage.setItem( 132 | "interviewQuestionsProgress", 133 | JSON.stringify(progress) 134 | ); 135 | } 136 | }, [progress, isClient]); 137 | 138 | const toggleQuestion = (sectionTitle, questionIndex) => { 139 | setProgress((prev) => ({ 140 | ...prev, 141 | [sectionTitle]: { 142 | ...prev[sectionTitle], 143 | [questionIndex]: !prev[sectionTitle]?.[questionIndex], 144 | }, 145 | })); 146 | }; 147 | 148 | const isSectionComplete = (sectionTitle) => { 149 | const sectionProgress = progress[sectionTitle]; 150 | if (!sectionProgress) return false; 151 | const sectionQuestions = sections.find( 152 | (section) => section.title === sectionTitle 153 | ).questions; 154 | return sectionQuestions.every((_, index) => sectionProgress[index]); 155 | }; 156 | 157 | if (!isClient) { 158 | return ( 159 |
160 |

161 | Top 50 JavaScript Interview Questions and Answers 162 |

163 |

Loading...

164 |
165 | ); 166 | } 167 | 168 | return ( 169 |
170 |

171 | Top 50 JavaScript Interview Questions and Answers 172 |

173 |
174 | {sections.map((section) => ( 175 | setOpenSection(open ? section.title : null)} 179 | > 180 | 181 | 182 | 183 | {section.title} 184 | {isSectionComplete(section.title) && ( 185 | 186 | Complete 187 | 188 | )} 189 | 190 | 191 | 192 | 193 | 194 | {section.title} 195 | 196 |
    197 | {section.questions.map((question, index) => ( 198 |
  • 199 | 203 | toggleQuestion(section.title, index) 204 | } 205 | /> 206 | 212 |
    • 213 | ))} 214 |
215 | 216 | 217 | ))} 218 |
219 |
220 | ); 221 | } 222 | -------------------------------------------------------------------------------- /src/assets/react.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/components/ui/badge.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva } from "class-variance-authority"; 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | }, 19 | }, 20 | defaultVariants: { 21 | variant: "default", 22 | }, 23 | } 24 | ) 25 | 26 | function Badge({ 27 | className, 28 | variant, 29 | ...props 30 | }) { 31 | return (
); 32 | } 33 | 34 | export { Badge, badgeVariants } 35 | -------------------------------------------------------------------------------- /src/components/ui/button.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva } from "class-variance-authority"; 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | "bg-primary text-primary-foreground shadow hover:bg-primary/90", 14 | destructive: 15 | "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90", 16 | outline: 17 | "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground", 18 | secondary: 19 | "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", 20 | ghost: "hover:bg-accent hover:text-accent-foreground", 21 | link: "text-primary underline-offset-4 hover:underline", 22 | }, 23 | size: { 24 | default: "h-9 px-4 py-2", 25 | sm: "h-8 rounded-md px-3 text-xs", 26 | lg: "h-10 rounded-md px-8", 27 | icon: "h-9 w-9", 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: "default", 32 | size: "default", 33 | }, 34 | } 35 | ) 36 | 37 | const Button = React.forwardRef(({ className, variant, size, asChild = false, ...props }, ref) => { 38 | const Comp = asChild ? Slot : "button" 39 | return ( 40 | () 44 | ); 45 | }) 46 | Button.displayName = "Button" 47 | 48 | export { Button, buttonVariants } 49 | -------------------------------------------------------------------------------- /src/components/ui/card.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | 3 | import { cn } from "@/lib/utils" 4 | 5 | const Card = React.forwardRef(({ className, ...props }, ref) => ( 6 |
10 | )) 11 | Card.displayName = "Card" 12 | 13 | const CardHeader = React.forwardRef(({ className, ...props }, ref) => ( 14 |
18 | )) 19 | CardHeader.displayName = "CardHeader" 20 | 21 | const CardTitle = React.forwardRef(({ className, ...props }, ref) => ( 22 |
26 | )) 27 | CardTitle.displayName = "CardTitle" 28 | 29 | const CardDescription = React.forwardRef(({ className, ...props }, ref) => ( 30 |
34 | )) 35 | CardDescription.displayName = "CardDescription" 36 | 37 | const CardContent = React.forwardRef(({ className, ...props }, ref) => ( 38 |
39 | )) 40 | CardContent.displayName = "CardContent" 41 | 42 | const CardFooter = React.forwardRef(({ className, ...props }, ref) => ( 43 |
47 | )) 48 | CardFooter.displayName = "CardFooter" 49 | 50 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent } 51 | -------------------------------------------------------------------------------- /src/components/ui/checkbox.jsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as CheckboxPrimitive from "@radix-ui/react-checkbox" 3 | import { CheckIcon } from "@radix-ui/react-icons" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const Checkbox = React.forwardRef(({ className, ...props }, ref) => ( 8 | 15 | 16 | 17 | 18 | 19 | )) 20 | Checkbox.displayName = CheckboxPrimitive.Root.displayName 21 | 22 | export { Checkbox } 23 | -------------------------------------------------------------------------------- /src/components/ui/dialog.jsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as DialogPrimitive from "@radix-ui/react-dialog" 5 | import { Cross2Icon } from "@radix-ui/react-icons" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Dialog = DialogPrimitive.Root 10 | 11 | const DialogTrigger = DialogPrimitive.Trigger 12 | 13 | const DialogPortal = DialogPrimitive.Portal 14 | 15 | const DialogClose = DialogPrimitive.Close 16 | 17 | const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => ( 18 | 25 | )) 26 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName 27 | 28 | const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => ( 29 | 30 | 31 | 38 | {children} 39 | 41 | 42 | Close 43 | 44 | 45 | 46 | )) 47 | DialogContent.displayName = DialogPrimitive.Content.displayName 48 | 49 | const DialogHeader = ({ 50 | className, 51 | ...props 52 | }) => ( 53 |
56 | ) 57 | DialogHeader.displayName = "DialogHeader" 58 | 59 | const DialogFooter = ({ 60 | className, 61 | ...props 62 | }) => ( 63 |
66 | ) 67 | DialogFooter.displayName = "DialogFooter" 68 | 69 | const DialogTitle = React.forwardRef(({ className, ...props }, ref) => ( 70 | 74 | )) 75 | DialogTitle.displayName = DialogPrimitive.Title.displayName 76 | 77 | const DialogDescription = React.forwardRef(({ className, ...props }, ref) => ( 78 | 82 | )) 83 | DialogDescription.displayName = DialogPrimitive.Description.displayName 84 | 85 | export { 86 | Dialog, 87 | DialogPortal, 88 | DialogOverlay, 89 | DialogTrigger, 90 | DialogClose, 91 | DialogContent, 92 | DialogHeader, 93 | DialogFooter, 94 | DialogTitle, 95 | DialogDescription, 96 | } 97 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | :root { 5 | font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; 6 | line-height: 1.5; 7 | font-weight: 400; 8 | 9 | color-scheme: light dark; 10 | color: rgba(255, 255, 255, 0.87); 11 | background-color: #242424; 12 | 13 | font-synthesis: none; 14 | text-rendering: optimizeLegibility; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | a { 20 | font-weight: 500; 21 | color: #646cff; 22 | text-decoration: inherit; 23 | } 24 | a:hover { 25 | color: #535bf2; 26 | } 27 | 28 | body { 29 | margin: 0; 30 | min-height: 100vh; 31 | } 32 | 33 | h1 { 34 | font-size: 3.2em; 35 | line-height: 1.1; 36 | } 37 | 38 | button { 39 | border-radius: 8px; 40 | border: 1px solid transparent; 41 | padding: 0.6em 1.2em; 42 | font-size: 1em; 43 | font-weight: 500; 44 | font-family: inherit; 45 | background-color: #1a1a1a; 46 | cursor: pointer; 47 | transition: border-color 0.25s; 48 | } 49 | button:hover { 50 | border-color: #646cff; 51 | } 52 | button:focus, 53 | button:focus-visible { 54 | outline: 4px auto -webkit-focus-ring-color; 55 | } 56 | 57 | @media (prefers-color-scheme: light) { 58 | :root { 59 | color: #213547; 60 | background-color: #ffffff; 61 | } 62 | a:hover { 63 | color: #747bff; 64 | } 65 | button { 66 | background-color: #f9f9f9; 67 | } 68 | } 69 | 70 | @layer base { 71 | :root { 72 | --background: 0 0% 100%; 73 | --foreground: 0 0% 3.9%; 74 | --card: 0 0% 100%; 75 | --card-foreground: 0 0% 3.9%; 76 | --popover: 0 0% 100%; 77 | --popover-foreground: 0 0% 3.9%; 78 | --primary: 0 0% 9%; 79 | --primary-foreground: 0 0% 98%; 80 | --secondary: 0 0% 96.1%; 81 | --secondary-foreground: 0 0% 9%; 82 | --muted: 0 0% 96.1%; 83 | --muted-foreground: 0 0% 45.1%; 84 | --accent: 0 0% 96.1%; 85 | --accent-foreground: 0 0% 9%; 86 | --destructive: 0 84.2% 60.2%; 87 | --destructive-foreground: 0 0% 98%; 88 | --border: 0 0% 89.8%; 89 | --input: 0 0% 89.8%; 90 | --ring: 0 0% 3.9%; 91 | --chart-1: 12 76% 61%; 92 | --chart-2: 173 58% 39%; 93 | --chart-3: 197 37% 24%; 94 | --chart-4: 43 74% 66%; 95 | --chart-5: 27 87% 67%; 96 | --radius: 0.5rem; 97 | } 98 | .dark { 99 | --background: 0 0% 3.9%; 100 | --foreground: 0 0% 98%; 101 | --card: 0 0% 3.9%; 102 | --card-foreground: 0 0% 98%; 103 | --popover: 0 0% 3.9%; 104 | --popover-foreground: 0 0% 98%; 105 | --primary: 0 0% 98%; 106 | --primary-foreground: 0 0% 9%; 107 | --secondary: 0 0% 14.9%; 108 | --secondary-foreground: 0 0% 98%; 109 | --muted: 0 0% 14.9%; 110 | --muted-foreground: 0 0% 63.9%; 111 | --accent: 0 0% 14.9%; 112 | --accent-foreground: 0 0% 98%; 113 | --destructive: 0 62.8% 30.6%; 114 | --destructive-foreground: 0 0% 98%; 115 | --border: 0 0% 14.9%; 116 | --input: 0 0% 14.9%; 117 | --ring: 0 0% 83.1%; 118 | --chart-1: 220 70% 50%; 119 | --chart-2: 160 60% 45%; 120 | --chart-3: 30 80% 55%; 121 | --chart-4: 280 65% 60%; 122 | --chart-5: 340 75% 55%; 123 | } 124 | } 125 | 126 | @layer base { 127 | * { 128 | @apply border-border; 129 | } 130 | body { 131 | @apply bg-background text-foreground; 132 | } 133 | } 134 | -------------------------------------------------------------------------------- /src/lib/utils.js: -------------------------------------------------------------------------------- 1 | import { clsx } from "clsx"; 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs) { 5 | return twMerge(clsx(inputs)); 6 | } 7 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import { StrictMode } from 'react' 2 | import { createRoot } from 'react-dom/client' 3 | import './index.css' 4 | import App from './App.jsx' 5 | 6 | createRoot(document.getElementById('root')).render( 7 | 8 | 9 | , 10 | ) 11 | -------------------------------------------------------------------------------- /src/pdf/50 JAVASCRIPT INTERVIEW QUESTIONS PART 1.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sangammukherjee/top-50-javascript-interview-questions/af3684c3cbd2e2704435d1773e636ff61d29ebd8/src/pdf/50 JAVASCRIPT INTERVIEW QUESTIONS PART 1.pdf -------------------------------------------------------------------------------- /src/ppt/50 JAVASCRIPT INTERVIEW QUESTIONS PART 1.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sangammukherjee/top-50-javascript-interview-questions/af3684c3cbd2e2704435d1773e636ff61d29ebd8/src/ppt/50 JAVASCRIPT INTERVIEW QUESTIONS PART 1.pptx -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | export default { 3 | darkMode: ["class"], 4 | content: ["./index.html", "./src/**/*.{ts,tsx,js,jsx}"], 5 | theme: { 6 | extend: { 7 | borderRadius: { 8 | lg: 'var(--radius)', 9 | md: 'calc(var(--radius) - 2px)', 10 | sm: 'calc(var(--radius) - 4px)' 11 | }, 12 | colors: { 13 | background: 'hsl(var(--background))', 14 | foreground: 'hsl(var(--foreground))', 15 | card: { 16 | DEFAULT: 'hsl(var(--card))', 17 | foreground: 'hsl(var(--card-foreground))' 18 | }, 19 | popover: { 20 | DEFAULT: 'hsl(var(--popover))', 21 | foreground: 'hsl(var(--popover-foreground))' 22 | }, 23 | primary: { 24 | DEFAULT: 'hsl(var(--primary))', 25 | foreground: 'hsl(var(--primary-foreground))' 26 | }, 27 | secondary: { 28 | DEFAULT: 'hsl(var(--secondary))', 29 | foreground: 'hsl(var(--secondary-foreground))' 30 | }, 31 | muted: { 32 | DEFAULT: 'hsl(var(--muted))', 33 | foreground: 'hsl(var(--muted-foreground))' 34 | }, 35 | accent: { 36 | DEFAULT: 'hsl(var(--accent))', 37 | foreground: 'hsl(var(--accent-foreground))' 38 | }, 39 | destructive: { 40 | DEFAULT: 'hsl(var(--destructive))', 41 | foreground: 'hsl(var(--destructive-foreground))' 42 | }, 43 | border: 'hsl(var(--border))', 44 | input: 'hsl(var(--input))', 45 | ring: 'hsl(var(--ring))', 46 | chart: { 47 | '1': 'hsl(var(--chart-1))', 48 | '2': 'hsl(var(--chart-2))', 49 | '3': 'hsl(var(--chart-3))', 50 | '4': 'hsl(var(--chart-4))', 51 | '5': 'hsl(var(--chart-5))' 52 | } 53 | } 54 | } 55 | }, 56 | plugins: [require("tailwindcss-animate")], 57 | }; 58 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import path from "path"; 2 | import react from "@vitejs/plugin-react"; 3 | import { defineConfig } from "vite"; 4 | 5 | export default defineConfig({ 6 | plugins: [react()], 7 | resolve: { 8 | alias: { 9 | "@": path.resolve(__dirname, "./src"), 10 | }, 11 | }, 12 | }); 13 | --------------------------------------------------------------------------------