├── Algorithms.md ├── CODE_OF_CONDUCT.md ├── HTML-CSS.md ├── Javascript.md ├── LICENSE ├── Miscellaneous.md ├── Puzzles.md ├── README.md ├── React-Redux.md ├── assets └── histogram.jpg └── job-description └── Readme.md /Algorithms.md: -------------------------------------------------------------------------------- 1 | # Questions 2 | 3 | ## Write code for the following in Javascript 4 | 5 | - A list contains first n natural numbers with one missing number. Find the missing number in the list. 6 | e.g. for n = 10, numbers = [1,2,3,4,5,6,7,9,10], missing no: 8. [Hint](https://www.geeksforgeeks.org/find-the-missing-number/) 7 | 8 | - Given a 2D array consisting of only 0s and 1s, where 0 represents sky and all adjacent 1s represent star, find the number of stars. In the given matrix below, there are 2 stars 9 | A = [ 10 |   [0, 1, 1, 0, 0], 11 |   [0, 1, 0, 0, 0], 12 |   [1, 0, 0, 0, 0], 13 |   [0, 1, 0, 0, 0], 14 |   [0, 0, 0, 1, 1] 15 | ] [Hint](https://www.geeksforgeeks.org/find-number-of-islands/) 16 | - Find the nth fibonacci number using recursion. Use memoization. 17 | - Given a 2D array, print the elements in the spiral form. Start from bottom left and print from left to right -> bottom to top -> right to left -> top to bottom -> move to 1 level inside -> repeat 18 | Array = [ 19 |   [21, 54, 67, 12, 87], 20 |   [43, 21, 89, 90, 34], 21 |   [78, 78, 90, 57, 90], 22 |   [32, 34, 43, 34, 12], 23 |   [78, 89, 78, 54, 51], 24 | ] 25 | Output: 78, 89, 78, 54, 51, 12, 90, 34, 87, 12, 67, 54, 21, 43, 78, 32, 34, 43, 34, 57, 90, 89, 21, 78, 90 26 | - Coordinate geometry: Given a point and the line, find the projection of point on line. 27 | - There is an array of numbers. For a given number n 28 | - find the pairs of number in the array who sum to n. [Hint](https://www.geeksforgeeks.org/count-pairs-with-given-sum/) 29 | - find the triplets in the array who sum to n. [Hint](https://www.geeksforgeeks.org/find-a-triplet-that-sum-to-a-given-value/) 30 | - e.g. array = [4,5,6,3,4,5,1,2] 31 | for n = 10, 32 | - pairs are (4,6), (5,5) 33 | - triplets are (6,3,1),(4,4,2),(5,4,1) 34 | - Write a code which can take very very large numbers and given their multiplication product 35 | - For a given string, find the anagram of all the strings 36 | - There is a 2D array. You need to find the all possible combinations that can be formed in the matrix. From any given point, you can traverse in any direction but you can't skip any values. An certain position can't be repeated twice. 37 | e.g. for array = [ 38 |   [a,b,f], 39 |   [c,d,e], 40 |   [s,v,g], 41 | ] 42 | - valid combinations: "ab", "abf", "abfd", "bdb", "gda" 43 | - invalid combinations: "afe", "abdca", "adca", "afg" 44 | - Given a histogram which contains bars of various heights. Find the total units of water that can be hold in between the bars. In the given image below, total 6 units of water can be hold. 3 units on bar 3, 1 unit on bar 4, 2 units on bar 5. [Hint](https://www.geeksforgeeks.org/trapping-rain-water/) 45 | ![](./assets/histogram.jpg) -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as 6 | contributors and maintainers pledge to making participation in our project and 7 | our community a harassment-free experience for everyone, regardless of age, body 8 | size, disability, ethnicity, sex characteristics, gender identity and expression, 9 | level of experience, education, socio-economic status, nationality, personal 10 | appearance, race, religion, or sexual identity and orientation. 11 | 12 | ## Our Standards 13 | 14 | Examples of behavior that contributes to creating a positive environment 15 | include: 16 | 17 | * Using welcoming and inclusive language 18 | * Being respectful of differing viewpoints and experiences 19 | * Gracefully accepting constructive criticism 20 | * Focusing on what is best for the community 21 | * Showing empathy towards other community members 22 | 23 | Examples of unacceptable behavior by participants include: 24 | 25 | * The use of sexualized language or imagery and unwelcome sexual attention or 26 | advances 27 | * Trolling, insulting/derogatory comments, and personal or political attacks 28 | * Public or private harassment 29 | * Publishing others' private information, such as a physical or electronic 30 | address, without explicit permission 31 | * Other conduct which could reasonably be considered inappropriate in a 32 | professional setting 33 | 34 | ## Our Responsibilities 35 | 36 | Project maintainers are responsible for clarifying the standards of acceptable 37 | behavior and are expected to take appropriate and fair corrective action in 38 | response to any instances of unacceptable behavior. 39 | 40 | Project maintainers have the right and responsibility to remove, edit, or 41 | reject comments, commits, code, wiki edits, issues, and other contributions 42 | that are not aligned to this Code of Conduct, or to ban temporarily or 43 | permanently any contributor for other behaviors that they deem inappropriate, 44 | threatening, offensive, or harmful. 45 | 46 | ## Scope 47 | 48 | This Code of Conduct applies both within project spaces and in public spaces 49 | when an individual is representing the project or its community. Examples of 50 | representing a project or community include using an official project e-mail 51 | address, posting via an official social media account, or acting as an appointed 52 | representative at an online or offline event. Representation of a project may be 53 | further defined and clarified by project maintainers. 54 | 55 | ## Enforcement 56 | 57 | Instances of abusive, harassing, or otherwise unacceptable behavior may be 58 | reported by contacting the project team at sunil12738@gmail.com. All 59 | complaints will be reviewed and investigated and will result in a response that 60 | is deemed necessary and appropriate to the circumstances. The project team is 61 | obligated to maintain confidentiality with regard to the reporter of an incident. 62 | Further details of specific enforcement policies may be posted separately. 63 | 64 | Project maintainers who do not follow or enforce the Code of Conduct in good 65 | faith may face temporary or permanent repercussions as determined by other 66 | members of the project's leadership. 67 | 68 | ## Attribution 69 | 70 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, 71 | available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html 72 | 73 | [homepage]: https://www.contributor-covenant.org 74 | 75 | For answers to common questions about this code of conduct, see 76 | https://www.contributor-covenant.org/faq 77 | -------------------------------------------------------------------------------- /HTML-CSS.md: -------------------------------------------------------------------------------- 1 | # Table of contents 2 | 3 | - [Implementation](#implementation) 4 | - [Theoretical](#theoretical) 5 | 6 | # Implementation 7 | 8 | - Create a circle on the screen and align the circle to centre of screen in a way that even if screen is resized, circle is always kept in the centre. If user hovers on the circle, the circle should be moved smoothly 100px to top. 9 | 10 | - Create a input type and a progress bar. Initially the progress bar shouldn't be filled. Take the value from input bar and accordingly fill the progress bar in percentage. (You can assume that values will be in range 0-100) 11 | - Given a parent and child div (the dimensions of both parent and child are not pre-determined). What are various ways in which child can be aligned to centre of div. (Additional: Write the code such that it is supported in IE8) [Solution in JSFiddle](https://jsfiddle.net/emxr3htj/) 12 | 13 | - Given 3 divs on screen with each have some colour to them (e.g. Red, Green, Blue). Write a code so that when user clicks on the divs, the color for the current and previously clicked div is swapped [Solution in JSBin](https://jsbin.com/yanomizuwo/2/edit?html,js,console,output) 14 | 15 | # Theoretical 16 | 17 | - What are css pre-processors and what are its advantages? 18 | - What is event bubbling? 19 | - What is event delegation? What are the advantages of event delegation? 20 | - What is the difference between inline and block elements? -------------------------------------------------------------------------------- /Javascript.md: -------------------------------------------------------------------------------- 1 | # Table of Contents 2 | 3 | - [Hoisting](#hoisting) 4 | - [Equality Testing](#equality-testing) 5 | - [this](#this) 6 | - [Event Loop](#event-loop) 7 | - [Closure](#closure) 8 | - [Scope](#scope) 9 | - [Datatypes](#datatypes) 10 | - [Implementation/Coding Questions](#implementation-or-coding-questions) 11 | - [Design based open ended problems](#design-based-open-ended-problems) 12 | - [Theoretical Questions](#theoretical-questions) 13 | 14 | # Hoisting: 15 | 16 | ## Give the output/error in the following cases 17 | - ```javascript 18 | function a(){ 19 | console.log(b) // output: ƒ b(){ console.log("hi") } 20 | var b = 10; 21 | return 22 | function b(){ console.log("hi") } 23 | } 24 | a() 25 | ``` 26 | 27 | - ```javascript 28 | var a = 10; 29 | function b() { 30 | a = 1; 31 | return; 32 | function a(){}; 33 | } 34 | b(); 35 | console.log(a) // output: 10 36 | ``` 37 | 38 | - ```javascript 39 | function sayHi() { 40 | console.log(name); // output: undefined 41 | console.log(age); // reference error 42 | var name = 'sunil'; 43 | let age = 21; 44 | } 45 | sayHi() 46 | ``` 47 | 48 | - ```javascript 49 | console.log(a) // output: undefined 50 | var a = "test" 51 | sayHello() // error 52 | a() 53 | var a = function sayHello(){ console.log("hi") } 54 | ``` 55 | 56 | - ```javascript 57 | var x = 10 58 | function y(){ 59 | x = 100 60 | return 61 | } 62 | y() 63 | console.log(x) // output: 100 64 | ``` 65 | 66 | - ```javascript 67 | var x = 10 68 | function y(){ 69 | x = 100 70 | return 71 | var x = function(){ console.log("hi") } 72 | } 73 | y() 74 | console.log(x) // output: 10 75 | ``` 76 | 77 | - ```javascript 78 | var x = 10 79 | function y(){ 80 | x = 100 81 | return 82 | x = function(){ console.log("hi") } 83 | } 84 | y() 85 | console.log(x) // output: 100 86 | ``` 87 | 88 | - ```javascript 89 | console.log(a()) 90 | function a(){ 91 | console.log("gg") 92 | } 93 | 94 | console.log(b()) 95 | var b = function(){ 96 | console.log("gg") 97 | } 98 | 99 | console.log(c(), d()) 100 | var c = function d(){ 101 | console.log("gg") 102 | } 103 | ``` 104 | 105 | # Equality Testing: 106 | 107 | - ```javascript 108 | var a = {key: 1}; 109 | var b = {key: 1}; 110 | console.log(a == b); // false 111 | console.log(a === b); // false 112 | ``` 113 | - ```javascript 114 | console.log(null == null); // true 115 | console.log(null === null); // true 116 | console.log(undefined == undefined); // true 117 | console.log(undefined === undefined); // true 118 | console.log(NaN == NaN); //false 119 | console.log(NaN === NaN); //false 120 | ``` 121 | 122 | # this 123 | 124 | ## Give the output/error in the following cases 125 | 126 | 127 | - ```javascript 128 | const x = { 129 | firstName: '', 130 | lastName: '', 131 | setName: function(name) { 132 | console.log(this) 133 | let splitName = function(n) { 134 | console.log(this) 135 | const nameArr = name.split(' '); 136 | this.firstName = name[0]; 137 | this.lastName = name[1]; 138 | } 139 | splitName(name); 140 | } 141 | } 142 | var name = 'Jon doe'; 143 | x.setName(name); 144 | console.log(x.firstName); // undefined 145 | console.log(x.lastName); // undefined 146 | ``` 147 | 148 | - ```javascript 149 | var Foo = function( a ) { 150 | function bar() { 151 | return a; 152 | } 153 | 154 | this.baz = function() { 155 | return a; 156 | }; 157 | }; 158 | 159 | Foo.prototype = { 160 | biz: function() { 161 | return a; 162 | } 163 | }; 164 | 165 | var f = new Foo( 7 ); 166 | f.bar(); // error bar is not fn 167 | f.baz(); // 7 168 | f.biz(); // undefined 169 | 170 | // Modify the above declaration so that the output is 7 for each of the declared functions 171 | ``` 172 | 173 | - ```javascript 174 | function a(){ 175 | console.log(this) 176 | } 177 | a() // window 178 | 179 | 180 | var a = function(){ 181 | console.log(this) 182 | } 183 | a() // window 184 | 185 | 186 | var a = function sayHello(){ 187 | console.log(this) 188 | } 189 | a() // window 190 | ``` 191 | 192 | - ```javascript 193 | obj = { 194 | name: "supername", 195 | getN: function(){ 196 | console.log(this.name) // supername, this = obj 197 | function x(){ 198 | console.log(this.name) // undefined, this = window 199 | } 200 | x() 201 | } 202 | } 203 | obj.getN() 204 | // How to fix above so that inside function x, this refers to obj 205 | // Hint: Fat arrow, Bind, Call 206 | ``` 207 | 208 | 209 | # Event Loop 210 | 211 | ## Give the output in the following cases 212 | - ```javascript 213 | console.log("A") 214 | setTimeout(function(){ console.log("B") }, 1000) 215 | console.log("C") 216 | // output: 217 | // A 218 | // C 219 | // B (after atleast 1 sec) 220 | ``` 221 | 222 | - ```javascript 223 | console.log("A") 224 | setTimeout(function(){ console.log("B") }, 0) 225 | console.log( console.log("C") ) 226 | // output: 227 | // A 228 | // C 229 | // B (immediately after C is printer) 230 | ``` 231 | 232 | - ```javascript 233 | setTimeout(function(){ console.log("2000") }, 2000) 234 | setTimeout(function(){ console.log("1000") }, 1000) 235 | setTimeout(function(){ console.log("4000") }, 4000) 236 | ``` 237 | 238 | # Closure 239 | 240 | ## Write function definition for the following cases 241 | 242 | ### Infinite Argument Problem 243 | - Create a function sum which when called `sum(1,2,3....n)()` or `sum(1)(2)(3)...(n)()` should yield same result. 244 | 245 | - For a given n number of arguments, create a function sum which when called 246 | - sum(1,2,3....n) 247 | - sum(1)(2)(3)...(n) 248 | - sum(1,2,3)(4,5,...n) 249 | - sum(1,2)(3,4)(5)(6,7)..(n) 250 | - sum(1,2,3...n-2)(n-1, n) 251 | all should yield the same result. 252 | - Create a function such that `sentence("I")("am")("going")("out.")` should output I am going out. The last parameter will always contain full stop. 253 | - sentence("I")("am")("going")("out.") 254 | - sentence("I am")("going")("out.") 255 | - sentence("I am going")("out.") 256 | - sentence("I")("am going out.") 257 | all should yield same result `I am going out.` 258 | 259 | # Scope 260 | 261 | - ```javascript 262 | for(var i = 0 ; i < 10; i++) { 263 | setTimeout(function(){ 264 | console.log(i) 265 | }, 1000) 266 | } 267 | ``` 268 | What will be the output? 269 | What are the various ways so that proper value for `i` is printed? (Hint: let, iife) 270 | 271 | - ```javascript 272 | function createButtons(){ 273 | for (var i = 1; i <= 5; ++i) { 274 | var body = document.getElementsByTagName("body") 275 | var button = document.createElement("button") 276 | button.innerHTML = 'button' + i 277 | button.onclick = function(){ 278 | console.log('this is button' + i) 279 | } 280 | body.appendChild(button) 281 | } 282 | } 283 | ``` 284 | How can you fix the issue if any? 285 | 286 | # Datatypes 287 | 288 | ## String 289 | 290 | ```javascript 291 | s = "google" 292 | s[2]= "d" 293 | console.log(s) // google, strings are immutable 294 | ``` 295 | 296 | ## Object 297 | 298 | - Can object contain keys with numeric values. Is the following object possible? 299 | `var a = {1: 1, '1': 2};` 300 | 301 | - Is numbered index possible in object? 302 | `a.1, a."1", a[1], a["1"]` 303 | What is the output in each of the following for object a 304 | - Create a person object with firstname and lastname and printfullname. Print full name 305 | ```javascript 306 | const person = { 307 | firstName: "Sunil", 308 | lastName: "Chaudhary", 309 | printFullName: function() { 310 | console.log(`${this.firstName} ${this.lastName}` ) 311 | } 312 | } 313 | ``` 314 | Suppose there is a `person2 = { firstName: "Sunil", lastName: "Chaudhary" }`. How can you call printFullName method (without modifying definition) 315 | 316 | 317 | # Implementation or Coding Questions 318 | 319 | - Create a search autosuggest in vanilla javascript. It should have a input bar where user can type and it should show a dropdown list of the results fetched after API call. Implement other optimizations such as debounce, caching etc. 320 | 321 | - Create a Timer displaying time of format `hh:mm:ss`. There should be a start, stop and reset button and user should be able to give time for the timer. (additional: How the same problem can be redesigned if milliseconds also are to be shown) 322 | 323 | - Write native functionality for bind. 324 | 325 | - Write a polyfill for [get function from lodash](https://lodash.com/docs/#get). 326 | - Write a polyfill for sort 327 | - Write a polyfill for promise 328 | - Write a polyfill for map 329 | - Write a polyfill for filter 330 | 331 | - Write javascript code to rotate a div in circle. Additional: Improve the code in a way such that one rotation is completed in certain specified time. Also, how can you modify the code to run for screens with different fps. 332 | 333 | - Write a function to do deep equality checks in objects 334 | 335 | - Suppose you have input like: 336 | ```javascript 337 | var skillsArray = [ 338 | { skill: 'css', user: 'Bill' }, 339 | { skill: 'javascript', user: 'Chad' }, 340 | { skill: 'javascript', user: 'Bill' }, 341 | { skill: 'css', user: 'Sue' }, 342 | { skill: 'javascript', user: 'Sue' }, 343 | { skill: 'html', user: 'Sue' } 344 | ]; 345 | ``` 346 | Convert it into result of the following form: 347 | ```javascript 348 | [ 349 | { skill: 'javascript', user: [ 'Chad', 'Bill', 'Sue' ], count: 3 }, 350 | { skill: 'css', user: [ 'Sue', 'Bill' ], count: 2 }, 351 | { skill: 'html', user: [ 'Sue' ], count: 1 } 352 | ] 353 | ``` 354 | ```javascript 355 | // Solution 356 | function groupBySkill(endorsements) { 357 | const obj = {} 358 | 359 | endorsements.forEach((endorsement) => { 360 | if(!obj[endorsement.skill]) { 361 | obj[endorsement.skill] = { 362 | skill: endorsement.skill, 363 | user: [], 364 | count: 0, 365 | } 366 | } 367 | obj[endorsement.skill] = { 368 | ...obj[endorsement.skill], 369 | user: [ ...obj[endorsement.skill].user, endorsement.user ], 370 | count: obj[endorsement.skill].count + 1, 371 | } 372 | }) 373 | return Object.values(obj).sort((a,b) => { return a.count < b.count ? 1 : -1 }) 374 | } 375 | ``` 376 | 377 | - Write a function to reverse a string 378 | ```javascript 379 | str.split("").reverse().join("") 380 | ``` 381 | 382 | - Given the following input and output arrays. Write function `zip` which will take the input arrays as arguments and give the output 383 | ```javascript 384 | // input arrays - arr1, arr2 385 | const arr1 = [{a : 1}, {b : 2}] 386 | const arr2 = [{c : 1}, {d : 4}] 387 | // output 388 | const output = [{a : 1, c : 1}, {b : 2, d : 4}] 389 | 390 | zip(arr1, arr2) -> [{a : 1, c : 1}, {b : 2, d : 4}] 391 | ``` 392 | 393 | - Given array containing positive and negative numbers (both integers and decimals). Separate them in 4 groups: integers +ve, integers -ve, decimals +ve, decimals -ve and show their separate sums. 394 | ```javascript 395 | // e.g. 396 | arr = [1,5,7,8,0.8,0.7,0.6,0.5,-1,-2,-6,-8,-1.7,-2.5,-7.6]; 397 | result = { 398 | output = negDec: -11.8 399 | negNo: -17 400 | posDec: 2.6 401 | posNo: 21 402 | } 403 | ``` 404 | [Solution in JSBin](https://jsbin.com/joyexazeki/1/edit?html,js,output) 405 | 406 | - Suppose there is a tunnel through which train can pass. You are standing inside the tunnel. Train enters from left side and exits from right side. Trains have bogeys numbered from 0 to 10. You can see only the bogeys which are inside the tunnel. Write a program mimicing this behaviour. [Solution in JSBin](https://jsbin.com/goyuludayi/edit?css,js,output) 407 | 408 | - Usually the output of 1 + function x() {alert(1);} is "1function x(){alert(1);}". Can you write a code such that the output should be "1start:function x() {alert(1);}:end". For that matter, it should work for any function by prepending 'start:' at the beginning of function and appending ':end' at the end of the function. 409 | 410 | - How to block the main thread of javascript? [Hint](https://jsfiddle.net/sunil12738/sf6v5jxk/7/) 411 | 412 | - Create a memoizer function. It should take some function to return a new memoized function. For a given input, it should store the value and if the same input is encountered again, it should give the stored value. 413 | e.g. 414 | fib(n): function to calculate nth fibonacci 415 | memoize(fn): memoizer function 416 | memoizeFib = memoize(fib) : memoizeFib is a new function which won't calculate the fib(n) again if already calculated 417 | 418 | - Suppose there is a object `a = { b: {}, c: {} }`. How can you change reference of b without changing reference of c 419 | 420 | - Let string = “+++++*(e)abcdefff” where + means any single character, * means any number of characters, *(e) any 3 same characters only. Given a string where first half consists of combination of +, *, *(e) and second half consists of alphabets only. Write a validator. 421 | 422 | - Create a Person class/function in such a way that `new Person().setFirstName("Sunil").setLastName("Chaudhary").printFullName()` prints `Sunil Chaudhary` on screen 423 | ```javascript 424 | // Solution 425 | class Person { 426 | constructor(fName, lName){ 427 | this.fName = fName 428 | this.lName = lName 429 | } 430 | setFirstName(fName){ 431 | this.fName = fName 432 | return this 433 | } 434 | setLastName(lName){ 435 | this.lName = lName 436 | return this 437 | } 438 | printFullName(){ 439 | console.log(`${this.fName} ${this.lName}`) 440 | } 441 | } 442 | ``` 443 | 444 | # Design based open ended problems 445 | 446 | - How to design google calendar month view? 447 | - How to design a crossword puzzle app? User should be able to view the crossword puzzle, fill in and check if he is correct or not 448 | - How to design candy crush game? 449 | - Design a priority queue in javascript where values with certain priorities can be pushed and popped. In case two values have the same priority, the one pushed earlier should be popped first. (Hint: Use 2D array) 450 | - Usually the output of 1 + function x() {alert(1);} is "1function x(){alert(1);}". Can you write a code such that the output should be "1start:function x() {alert(1);}:end". For that matter, it should work for any function by prepending 'start:' at the beginning of function and appending ':end' at the end of the function. 451 | - Given a array of paragraphs, how can you search if certain sentences are present inside those paragraphs. The array can be very big. 452 | - A system consists of some subscribers, events, and actions. A subscriber can subscribe to a certain events in a way that when event is trigerred, relevant action is performed 453 | e.g. 454 | 455 | - Subscriber can be S1, S2...Sn 456 | - Events can be E1, E2...En 457 | - Actions can be A1, A2..An 458 | 459 | | Subscriber | Event | Action | 460 | |------------|-------|--------| 461 | | S1 | E1 | A1 | 462 | | S1 | E2 | A1 | 463 | | S2 | E1 | A2 | 464 | | S2 | E2 | A3 | 465 | | S3 | E1 | A4 | 466 | | S3 | E2 | A5 | 467 | 468 | Here, When E1 event happens, action A1 happens for S1, action A2 happens for S2 and action A4 happens for S3 469 | What will be the data-structure you will choose and the overall architecture. 470 | - Suppose there is a company which does some analytics work and returns data. The company (let's say X) gets a stream of numbers and it calculates average at that instant for all numbers received and returns the average. There could be other companies (let's say Y) which can ask for the average. 471 | 472 | Data: 1 3 5 7 9 473 | Avg: 1 2 3 4 5 474 | 475 | So, in the above example, the average are calculated by company X. 476 | 477 | After first no, average is 1, 478 | After second no (i.e. 3), average is 2 ((3+1)/2) and so on 479 | At any point in time, companies are only concerned about average at that time (basically, if average is asked after data value 5, you only need to return 3) 480 | [Solution](https://codereview.stackexchange.com/questions/238416/finding-average-of-stream-of-numbers) 481 | - A page has some links. On clicking the link, you want some other page to load (can be in same website or other website) as well as make the API call. What are various ways to do it? 482 | - Suppose there is a bank which has some money. You can call a function `withdraw` to withdraw money updating and returning the total money. There should be no global variables and value shouldn't be modified except by the function call it. 483 | ```javascript 484 | // one solution is using closures 485 | function withDrawMoney(total){ 486 | let initMoney = total 487 | return function(money){ 488 | //other validations 489 | initMoney = initMoney - money 490 | return initMoney 491 | } 492 | } 493 | ``` 494 | 495 | # Theoretical Questions 496 | 497 | - What is Server Side Rendering? Why do we need it? 498 | - Why Google crawlers are unable to crawl Client Side Rendered applications? 499 | - What is ES6 and give some new features? 500 | - What are promises? 501 | - What is async/await? 502 | - How does browser renders HTML on screen? 503 | - What are service workers and what are the advantages? 504 | - How is caching implemented in browsers? 505 | - What are side effects? 506 | - How is the value of `this` decided? 507 | - Explain the usage of bind, call, apply. 508 | - Is javascript compiled or interpreted? 509 | - Difference between http and https? 510 | - What is TCP/UDP? 511 | - What is event loop? 512 | - What is telnet? 513 | - Array a consists of 3 elements [1,2,3]. What is the array length if you do a[20]=1. What is the array length if you do a[3000000000000]=1 514 | - What is cors? 515 | - What are various types of storages? 516 | - Can you access hard drive from browser? 517 | - How does browser builds a page? 518 | - What is the difference between XHR request and fetch? 519 | - Various methods to do API calls 520 | - What is JWT 521 | - What is npm? 522 | - What is SCSS and advantages 523 | - What is Unit Testing 524 | - What is the difference and possible use cases for: 525 | - localStorage 526 | - sessionstorage 527 | - cookie 528 | - indexdb 529 | - What is the scope of hoisted variables? 530 | - Difference between shallow copy and deep copy of a object. 531 | - Give some examples of tree shaking algorithms and how they work. 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Sunil Chaudhary 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 | -------------------------------------------------------------------------------- /Miscellaneous.md: -------------------------------------------------------------------------------- 1 | # Questions 2 | 3 | - What is functional programming? 4 | - Difference between functional and object-oriented programming. 5 | - What are pure functions? 6 | - What is the difference between one-way data binding and two-way data binding? Which is better in terms of speed and performance? 7 | - What is asynchronous programming? 8 | - Is Nodejs asynchronous programming language? Explain. 9 | - What is the use of self? 10 | - What are the usage of Webpack? 11 | - Difference between var, let and const in es6. 12 | - When will you use fat arrow function and when normal function? 13 | - Suppose there is a very large array of paragraphs (array.length = 10^6). For a given string, you have to tell in which paragraphs, the string exists. (Hint: bloom filters) 14 | - What is the usage for babel? 15 | - Why do we use "use strict"? 16 | - What are the various ways in which you can optimize a website? 17 | - What is CSS flex and grid system? -------------------------------------------------------------------------------- /Puzzles.md: -------------------------------------------------------------------------------- 1 | # Questions 2 | 3 | - There are 1 red, 2 orange, 3 green, 4 blue, 6 yellow socks in a drawer kept in a room. Find the minimum number of socks you need to take out so that at least one pair of socks is there. 4 | 5 | - There are 12 balls out of which 11 are same weight and 1 ball has weight that keeps on changing (but never equal to same weight balls). You have a double-pan balance scale. Find the minimum number of times you need to weigh to get the ball with different weight. 6 | - There are 10 sacks. 9 of them contain 1 gm coins. 1 contains 1.1 gm coins. You have the digital weight. Find the number of times you need to weigh to get the bag which contains 1.1gm coins. 7 | - You have 2 jars with capacity of 5 litres and 3 litres which can be filled with water. Using these 2 only, measure 4 litres of water. 8 | - There are 25 horses among which you need to find out the fastest 3 horses. You can conduct race among at most 5 to find out their relative speed. At no point you can find out the actual speed of the horse in a race. Find out how many races are required to get the top 3 horses. 9 | - You are blindfolded and 20 coins are place in front of you on table. You are allowed to touch the coins, but can’t tell which way up they are by feel. 10 coins are placed heads up and 10 are placed tails up. How do you make two piles of coins each with the same number of heads up? You can flip the coins any number of times. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Frontend UI Developer Interview Questions 2 | 3 | Recently gave interviews at some companies for Frontend Developer role and given below is a exhaustive list of all the questions (with answers) that were asked. 4 | 5 | - [Javascript](./Javascript.md) 6 | 7 | - [Hoisting](./Javascript.md#hoisting) 8 | - [Equality Testing](./Javascript.md#equality-testing) 9 | - [this](./Javascript.md#this) 10 | - [Event Loop](./Javascript.md#event-loop) 11 | - [Closure](./Javascript.md#closure) 12 | - [Scope](./Javascript.md#scope) 13 | - [Datatypes](./Javascript.md#datatypes) 14 | - [Implementation/Coding Questions](./Javascript.md#implementation-or-coding-questions) 15 | - [Design based open ended problems](./Javascript.md#design-based-open-ended-problems) 16 | - [Theoretical Questions](./Javascript.md#theoretical-questions) 17 | 18 | - [HTML/CSS](./HTML-CSS.md) 19 | 20 | - [Implementation](./HTML-CSS.md#implementation) 21 | - [Theoretical](./HTML-CSS.md#theoretical) 22 | 23 | - [ReactJs/Redux](./React-Redux.md) 24 | 25 | - [Implementation](./React-Redux.md#implementation) 26 | - [Design Based](./React-Redux.md#design-based) 27 | - [Theoretical](./React-Redux.md#theoretical) 28 | 29 | - [Algorithms](./Algorithms.md) 30 | 31 | - [Puzzles](./Puzzles.md) 32 | 33 | - [Miscellaneous](./Miscellaneous.md) 34 | 35 | ## How to Contribute 36 | 37 | ### Raising a PR 38 | If you want to add any new questions or add solution to existing questions please raise a PR for the same 39 | 40 | - Fork the repository and create a new branch 41 | - Do the changes, commit code and raise PR to master branch in main repo (PR with changes directly in master branch will be rejected) 42 | Read more about [creating PR from a forked repo to base repo](https://help.github.com/en/enterprise/2.16/user/github/collaborating-with-issues-and-pull-requests/creating-a-pull-request-from-a-fork) 43 | - Please make sure that code and content is formatted properly with proper language 44 | - Questions with working solutions are encouraged. Either add the solutions here or you can add a JSBin/JSfiddle also 45 | - Give proper description in each PR. Description should tell what changes are done, sections effected and other relevant info 46 | - PRs with similar questions which are already added are likely to be rejected. 47 | 48 | ### Creating an issue 49 | If you want to discuss anything or some changes you are unsure of, please [create an issue](https://help.github.com/en/enterprise/2.15/user/articles/creating-an-issue) for the same before raising the PR. 50 | -------------------------------------------------------------------------------- /React-Redux.md: -------------------------------------------------------------------------------- 1 | # Table of contents 2 | 3 | - [Implementation](#implementation) 4 | - [Design based](#design-based) 5 | - [Theoretical](#theoretical) 6 | 7 | # Implementation 8 | 9 | - In the react component, there is a prop `data` which is a long string containing some text along with custom xml tags (e.g. : `
this is some textsome text inside tag1tag2
`). You need to render this on UI by rendering the tags. The tags can be html or non-html tags. In case of non-html tags, you have to convert them into div/span/p etc (mapping will be provided). What are the ways to do it avoiding possible security issues? 10 | 11 | - Create a input type and a progress bar (or a loader). Initially the progress bar shouldn't be filled. Take the value from user in input and accordingly fill the progress bar in percentage. Bonus points if progress bar has css animation. You can assume that values will be in range 0-100. 12 | 13 | # Design based 14 | 15 | - Design a website for user portfolio for stocks. It should have the following functionality: 16 | - User signin/signup functionality 17 | - A page showing the stocks owned by user along with functionality to buy and sell his stocks as well as allowing him to purchase new stocks 18 | Key points to focus: 19 | - What will be API end points and structure? 20 | - What will be the code and folder structure for frontend repository? 21 | - How will the react components be designed so that they can be re-used? 22 | - How will the redux store be designed? 23 | 24 | # Theoretical 25 | 26 | - What is virtual dom in react? How does react reconcilication works? 27 | - List the life cycle methods with proper order in react. 28 | - Why is componentWillReceiveProps unsafe to use? 29 | - What are various ways in which you can avoid re-render in React? 30 | - What is HOC? 31 | - What are react hooks? 32 | - How do you write custom hooks? 33 | - What is Pure Component in React? 34 | - How do you handle errors in React? 35 | - const comp1 = new ReactComponent({name , age , address}). How to change states. 36 | 37 | [comment]: <> (comp1.setState comp1.setState comp1.setState all 3 in same lines) 38 | 39 | - List some ways in which optimization can be done in React - pure component, should component update, memo, usememo. 40 | - What is context API? 41 | - Difference between JSX and HTML. 42 | - What is Redux? Are there any other state management libraries out there? Give examples. 43 | - Why do you use redux? Why can't you work using only react? 44 | - Why immutability in Redux? 45 | - Why use redux? Why not react/context APIs etc? 46 | - Explain redux flow. 47 | - What are key differences between redux saga and thunk. List some use cases where you will use them? 48 | - If a component is rendering very slow in React, how will you go about debugging/optimizing it? 49 | -------------------------------------------------------------------------------- /assets/histogram.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sunil12738/frontend-developer-interview-questions/9af850221923108cf5f94379069f9e571b6cb747/assets/histogram.jpg -------------------------------------------------------------------------------- /job-description/Readme.md: -------------------------------------------------------------------------------- 1 | Job Description of various companies 2 | --------------------------------------------------------------------------------