├── README.md ├── algorithms └── js.md ├── cheatsheet └── bash.md ├── interview ├── css.md ├── general.md ├── html.md └── js.md └── projects └── weather ├── index.html ├── readme.md ├── scripts.js └── styles.css /README.md: -------------------------------------------------------------------------------- 1 | # cheat 2 | :memo: cheatsheet for frontend, coding, and interview questions 3 | -------------------------------------------------------------------------------- /algorithms/js.md: -------------------------------------------------------------------------------- 1 | # JS Algorithms 2 | 3 | 4 | ### String 5 | 6 | Reverse a string: 7 | ```js 8 | function reverse(str) { 9 | return str.split("").reverse().join(""); 10 | } 11 | ``` 12 | 13 | Find longest word: 14 | ```js 15 | function findLongestWord(str) { 16 | var words = str.split(" "); 17 | str = words.sort(function(a, b) { 18 | return b.length - a.length; 19 | })[0]; 20 | return str; 21 | } 22 | ``` 23 | 24 | ### Numbers 25 | 26 | Factorialize: 27 | ```js 28 | function factorialize(num) { 29 | if(num === 0) return 1; 30 | return num * factorialize(num-1); 31 | } 32 | ``` 33 | 34 | FizzBuzz: 35 | ```js 36 | for(var i = 0; i <= 100; i++) { 37 | var f = i % 3 == 0, b = i % 5 == 0, fb = f && b 38 | console.log(f ? "Fizz" : b ? "Buzz" : fb ? "FizzBuzz" : i) 39 | } 40 | ``` 41 | 42 | ### Sorting 43 | 44 | Bubble Sort: 45 | ```js 46 | function bub(arr) { 47 | for (var j = 0; j < arr.length; j++) { 48 | for (var i = 0; i < (arr.length - j); i++) { 49 | if (arr[i] > arr[i + 1]) { 50 | var a = arr[i] 51 | var b = arr[i + 1] 52 | arr[i] = b 53 | arr[i + 1] = a 54 | } 55 | } 56 | } 57 | return arr; 58 | } 59 | ``` 60 | 61 | Quicksort: 62 | ```js 63 | var quick = function(arr, condition) { 64 | if(arr.length < 2) { 65 | return arr; 66 | }; 67 | var pivot = arr[Math.floor(Math.random()*arr.length)]; 68 | var left = []; 69 | var equal = []; 70 | var right = []; 71 | for(var i = 0; i < arr.length; i++) { 72 | var item = arr[i]; 73 | var sortable = condition(item, pivot); 74 | if(item === pivot) { 75 | equal.push(item) 76 | } else if(sortable) { 77 | left.push(item); 78 | } else { 79 | right.push(item); 80 | } 81 | } 82 | return quick(left, condition).concat(equal, quick(right, condition)); 83 | } 84 | ``` 85 | 86 | Native JS Sort: 87 | ```js 88 | var arr = [454, 664,224, 675, 4] 89 | arr.sort(function(a, b) { 90 | return a - b; 91 | }); 92 | ``` 93 | 94 | ### Search 95 | 96 | Binary Search 97 | ```js 98 | var binarySearch = function(query, arr) { 99 | var start = 0; 100 | var end = arr.length - 1; 101 | while(start <= end) { 102 | var index = Math.round((start + end) / 2); 103 | var item = arr[index]; 104 | if(query === item) { 105 | return index; 106 | } else if(query > item) { 107 | start = index + 1; 108 | } else { 109 | end = index - 1; 110 | } 111 | } 112 | return null; 113 | } 114 | binarySearch(3, [1, 2, 3, 4, 5]); 115 | // => 2 116 | ``` 117 | 118 | ### Other 119 | 120 | Check if "robot" has gone a circle, given a list of directions: 121 | 122 | ```js 123 | function circle(directions) { 124 | directions = directions.split(""); 125 | var x = 0, 126 | y = 0, 127 | ox = 0, 128 | oy = 0, 129 | it = 0, 130 | forv = "F"; 131 | document.write("DIRECTIONS:  " + directions + "

") 132 | for (var j = 0; j < 4; j++) { 133 | for (var i = 0; i < directions.length; i++) { 134 | var d = directions[i]; 135 | switch (d) { 136 | case "F": 137 | if (forv === "F") { 138 | y++; 139 | forv = "F"; 140 | } else if (forv === "L") { 141 | x--; 142 | forv = "L"; 143 | } else if (forv === "R") { 144 | x++; 145 | forv = "R"; 146 | } else if (forv = "B") { 147 | y--; 148 | forv = "B"; 149 | } 150 | it++; 151 | document.write("X: " + x, " Y: " + y + "
"); 152 | if (it % 4 === 0) { 153 | if (x === ox && y === oy) { 154 | document.write("CIRCLE DETECTED! CIRCUMFERENCE: " + it + "

"); 155 | ox = x; 156 | oy = y; 157 | } 158 | } 159 | break; 160 | case "L": 161 | if (forv === "F") { 162 | x--; 163 | forv = "L" 164 | } else if (forv === "L") { 165 | y--; 166 | forv = "B"; 167 | } else if (forv === "R") { 168 | y++; 169 | forv = "F"; 170 | } else if (forv === "B") { 171 | x++; 172 | forv = "R"; 173 | } 174 | it++; 175 | document.write("X: " + x, " Y: " + y + "
"); 176 | if (it % 4 === 0) { 177 | if (x === ox && y === oy) { 178 | document.write("CIRCLE DETECTED! CIRCUMFERENCE: " + it + "

"); 179 | ox = x; 180 | oy = y; 181 | } 182 | } 183 | break; 184 | 185 | case "R": 186 | if (forv === "F") { 187 | x++; 188 | forv = "R" 189 | } else if (forv === "L") { 190 | y++; 191 | forv = "F"; 192 | } else if (forv === "R") { 193 | y--; 194 | forv = "B"; 195 | } else if (forv === "B") { 196 | x--; 197 | forv = "L"; 198 | } 199 | it++; 200 | document.write("X: " + x, " Y: " + y + "
"); 201 | if (it % 4 === 0) { 202 | if (x === ox && y === oy) { 203 | document.write("CIRCLE DETECTED! CIRCUMFERENCE: " + it + "

"); 204 | ox = x; 205 | oy = y; 206 | } 207 | } 208 | break; 209 | 210 | default: 211 | document.write("Command Error"); 212 | } 213 | } 214 | } 215 | } 216 | ``` 217 | -------------------------------------------------------------------------------- /cheatsheet/bash.md: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /interview/css.md: -------------------------------------------------------------------------------- 1 | # CSS Interview Questions 2 | 3 | * What does CSS Stand for? 4 | * What is CSS used for? 5 | * What is the difference between classes and id's? 6 | * Are you familiar with Animations? 7 | * What is the difference between animations and transitions? 8 | * What is responsiveness? 9 | * What is flexbox? 10 | * Have you used any CSS frameworks? Which one? 11 | -------------------------------------------------------------------------------- /interview/general.md: -------------------------------------------------------------------------------- 1 | # General Interview Questions 2 | 3 | * Why are you interested in coding? 4 | * What is the newest thing you have learned? 5 | * What is a challenge that you came across recently? 6 | * How did you figure it out? 7 | * What is your development environment? 8 | * How do you control version? 9 | * What do you want to learn this year? 10 | -------------------------------------------------------------------------------- /interview/html.md: -------------------------------------------------------------------------------- 1 | # HTML Interview Questions 2 | 3 | * What does HTML stand for? 4 | * What does `doctype` do? 5 | * What is the key difference between HTML and XML? 6 | * What are `meta` tags? 7 | * How do you use `data-` attributes? 8 | * What is the difference between `cookies`, `sessionStorage`, and `localStorage`? 9 | * Where do you link to CSS and JS? Why? 10 | * Have you used HTML templating? 11 | -------------------------------------------------------------------------------- /interview/js.md: -------------------------------------------------------------------------------- 1 | # JS Interview Questions 2 | 3 | * What is JS used for? 4 | * What is an event? 5 | * What is an object? 6 | * How do you use `this`? 7 | * What does a semicolon indicate? 8 | * What is a loop? How are they used? 9 | * What is an array? 10 | -------------------------------------------------------------------------------- /projects/weather/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
5 |
6 |

7 |

8 |
9 |

10 |
11 |
12 | 15 | 16 | -------------------------------------------------------------------------------- /projects/weather/readme.md: -------------------------------------------------------------------------------- 1 | # Weather 2 | 3 | Make a weather application with an API. 4 | 5 | You should be able to: 6 | 7 | * Detect User's Location 8 | * Show user the temperature in F & C. 9 | * Change icons or backgrounds depending on weather. 10 | -------------------------------------------------------------------------------- /projects/weather/scripts.js: -------------------------------------------------------------------------------- 1 | var weather = {}; 2 | var tempEl = document.getElementById("temp"), 3 | cityEl = document.getElementById("city"), 4 | countryEl = document.getElementById("country"), 5 | iconEl = document.getElementById("icon"), 6 | unitEl = document.getElementById("unit") 7 | var units = "imperial"; 8 | var unitAbb = "°F"; 9 | var icons = { 10 | 'Rain': { 11 | 'icon': '' 12 | }, 13 | 'Drizzle': { 14 | 'icon': '' 15 | }, 16 | 'Clear': { 17 | 'icon': '' 18 | }, 19 | 'Clouds': { 20 | 'icon': '' 21 | }, 22 | 'Thunderstorm': { 23 | 'icon': '' 24 | } 25 | } 26 | 27 | 28 | function loc() { 29 | var scr1 = document.createElement('script'); 30 | scr1.src = 'http://ipinfo.io/json?callback=dataLoc'; 31 | document.body.appendChild(scr1); 32 | } 33 | 34 | function dataLoc(data) { 35 | weather.lat = data.loc.split(',')[0]; 36 | weather.lon = data.loc.split(',')[1]; 37 | weather.city = data.city; 38 | weather.country = data.country; 39 | getWeather(); 40 | } 41 | 42 | function getWeather() { 43 | var scr2 = document.createElement('script'); 44 | scr2.src = 'http://api.openweathermap.org/data/2.5/weather?&lat=' + weather.lat + '&lon=' + weather.lon + '&units=' + units + '&appid=41e799f5df150e08196ac5c32558521a&callback=dataWeather'; 45 | document.body.appendChild(scr2); 46 | } 47 | 48 | function dataWeather(data) { 49 | weather.temp = data.main.temp 50 | weather.icon = data.weather[0].main 51 | update(); 52 | } 53 | 54 | 55 | function update() { 56 | cityEl.innerHTML = weather.city; 57 | countryEl.innerHTML = weather.country; 58 | tempEl.innerHTML = Math.round(weather.temp); 59 | unitEl.innerHTML = unitAbb; 60 | iconEl.innerHTML = icons[weather.icon].icon 61 | } 62 | 63 | function changeUnit() { 64 | if (units === "imperial") { 65 | units = "metric"; 66 | unitAbb = "°C"; 67 | } else if (units === "metric") { 68 | units = "imperial"; 69 | unitAbb = "°F" 70 | } 71 | getWeather() 72 | } 73 | 74 | function dayOrNight() { 75 | var hours = new Date().getHours(); 76 | if (hours > 6 && hours < 20) { 77 | document.body.style.backgroundImage = "url(https://images.unsplash.com/photo-1444124660570-7104d87d72b2?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c8cf95aa5e2c46aadd38921129e7ced4')"; 78 | } 79 | document.body.style.backgroundImage = "url('https://images.unsplash.com/photo-1434064511983-18c6dae20ed5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=5f29d037842c14cb81cddea387221b20')" 80 | } 81 | unitEl.addEventListener("click", changeUnit); 82 | dayOrNight(); 83 | loc(); 84 | -------------------------------------------------------------------------------- /projects/weather/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | text-align: center; 5 | background-position: center center; 6 | background-repeat: no-repeat; 7 | background-attachment: fixed; 8 | background-size: cover; 9 | background-color: black; 10 | color: white; 11 | } 12 | 13 | 14 | #unit { 15 | cursor: pointer; 16 | } 17 | 18 | .center { 19 | padding-top: calc(100vh/4) 20 | } 21 | 22 | .big { 23 | font-size: 5rem; 24 | } 25 | footer { 26 | padding: 2vh 8vh; 27 | text-align: center; 28 | position: fixed; 29 | bottom: 5%; 30 | right: 5%; 31 | } 32 | 33 | #kabir { 34 | text-decoration: none; 35 | color: white; 36 | font-weight: bold; 37 | } 38 | .underline { 39 | position: relative !important; 40 | } 41 | 42 | .underline.black::after { 43 | content: ''; 44 | position: absolute !important; 45 | bottom: 0; 46 | left: 0; 47 | width: 0%; 48 | border-bottom: 2px solid black; 49 | transition: all 0.4s ease; 50 | } 51 | 52 | .underline.white::after { 53 | content: ''; 54 | position: absolute !important; 55 | bottom: 0; 56 | left: 0; 57 | width: 0%; 58 | border-bottom: 2px solid white; 59 | transition: all 0.4s ease; 60 | } 61 | 62 | .underline:hover::after { 63 | width:100%; 64 | } 65 | --------------------------------------------------------------------------------