├── .gitignore
├── README.md
├── css
    ├── normalize.css
    └── style.css
├── index.html
├── js
    ├── banki.js
    └── main.js
├── package-lock.json
├── package.json
└── server.js


/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | .pnpm-debug.log*
  9 | 
 10 | # Diagnostic reports (https://nodejs.org/api/report.html)
 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 12 | 
 13 | # Runtime data
 14 | pids
 15 | *.pid
 16 | *.seed
 17 | *.pid.lock
 18 | 
 19 | # Directory for instrumented libs generated by jscoverage/JSCover
 20 | lib-cov
 21 | 
 22 | # Coverage directory used by tools like istanbul
 23 | coverage
 24 | *.lcov
 25 | 
 26 | # nyc test coverage
 27 | .nyc_output
 28 | 
 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 30 | .grunt
 31 | 
 32 | # Bower dependency directory (https://bower.io/)
 33 | bower_components
 34 | 
 35 | # node-waf configuration
 36 | .lock-wscript
 37 | 
 38 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 39 | build/Release
 40 | 
 41 | # Dependency directories
 42 | node_modules/
 43 | jspm_packages/
 44 | 
 45 | # Snowpack dependency directory (https://snowpack.dev/)
 46 | web_modules/
 47 | 
 48 | # TypeScript cache
 49 | *.tsbuildinfo
 50 | 
 51 | # Optional npm cache directory
 52 | .npm
 53 | 
 54 | # Optional eslint cache
 55 | .eslintcache
 56 | 
 57 | # Optional stylelint cache
 58 | .stylelintcache
 59 | 
 60 | # Microbundle cache
 61 | .rpt2_cache/
 62 | .rts2_cache_cjs/
 63 | .rts2_cache_es/
 64 | .rts2_cache_umd/
 65 | 
 66 | # Optional REPL history
 67 | .node_repl_history
 68 | 
 69 | # Output of 'npm pack'
 70 | *.tgz
 71 | 
 72 | # Yarn Integrity file
 73 | .yarn-integrity
 74 | 
 75 | # dotenv environment variable files
 76 | .env
 77 | .env.development.local
 78 | .env.test.local
 79 | .env.production.local
 80 | .env.local
 81 | 
 82 | # parcel-bundler cache (https://parceljs.org/)
 83 | .cache
 84 | .parcel-cache
 85 | 
 86 | # Next.js build output
 87 | .next
 88 | out
 89 | 
 90 | # Nuxt.js build / generate output
 91 | .nuxt
 92 | dist
 93 | 
 94 | # Gatsby files
 95 | .cache/
 96 | # Comment in the public line in if your project uses Gatsby and not Next.js
 97 | # https://nextjs.org/blog/next-9-1#public-directory-support
 98 | # public
 99 | 
100 | # vuepress build output
101 | .vuepress/dist
102 | 
103 | # vuepress v2.x temp and cache directory
104 | .temp
105 | .cache
106 | 
107 | # Docusaurus cache and generated files
108 | .docusaurus
109 | 
110 | # Serverless directories
111 | .serverless/
112 | 
113 | # FuseBox cache
114 | .fusebox/
115 | 
116 | # DynamoDB Local files
117 | .dynamodb/
118 | 
119 | # TernJS port file
120 | .tern-port
121 | 
122 | # Stores VSCode versions used for testing VSCode extensions
123 | .vscode-test
124 | 
125 | # yarn v2
126 | .yarn/cache
127 | .yarn/unplugged
128 | .yarn/build-state.yml
129 | .yarn/install-state.gz
130 | .pnp.*
131 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Full Stack Web Development Interview Questions
 2 | This is a full stack web dev interview flashcard app containing 150+ questions covering a large range of behavioral and technical questions.
 3 | 
 4 | **Link to project:** https://full-stack-interview-prep.up.railway.app/
 5 | 
 6 | - [Full Stack Web Development Interview Questions](#full-stack-web-development-interview-questions)
 7 |   - [How It's Made:](#how-its-made)
 8 |   - [Lessons Learned:](#lessons-learned)
 9 |   - [Installation](#installation)
10 |   - [Dependencies](#dependencies)
11 |   - [Usage](#usage)
12 | 
13 | <p align="center">
14 |   <img src="https://github.com/bytesbybianca/readme-assets/blob/main/project-images/fullStackInterviewQuestions.gif?raw=true">
15 | </p>
16 | 
17 | ## How It's Made:
18 | 
19 | **Front-end:** HTML, CSS, JavaScript 
20 | 
21 | **Back-end:** Node.js
22 | <br>
23 | 
24 | 
25 | [@AlysshaLewin](https://github.com/AlysshaLewin), [@20jasper](https://github.com/20jasper), [@Ethodeus](https://github.com/Ethodeus), [@bytesbybianca](https://github.com/bytesbybianca), [@erikateal](https://github.com/erikateal), [@brendondsouza](https://github.com/brendondsouza), [@alondramora](https://github.com/alondramora), and [@Danamitecoder](https://github.com/Danamitecoder) collaborated to build this project. We split into two groups—one group built the front end, and the other built the back end.
26 | 
27 | ## Lessons Learned:
28 | 
29 | This app taught us how to bring together the front and back end. We learned how to import and export modules as well as make our own custom modules. We learned how to use environment variables to dynamically change the port. We used innerHTML so we could use &lt;code&gt; tags to style code in the questions and HTML entities to escape certain characters like '&lt;' and '&gt;' that are misinterpreted as code.
30 | 
31 | ## Installation
32 | ```
33 | npm install
34 | ```
35 | 
36 | ## Dependencies
37 | ```
38 | "figlet": "^1.5.2"
39 | ```
40 | 
41 | ## Usage
42 | Either use the [fullstack app](https://full-stack-interview-prep.up.railway.app/) or request a random question from this API endpoint: https://full-stack-interview-prep.up.railway.app/api
43 | 


--------------------------------------------------------------------------------
/css/normalize.css:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
  2 | 
  3 | /* Document
  4 |    ========================================================================== */
  5 | 
  6 | /**
  7 |  * 1. Correct the line height in all browsers.
  8 |  * 2. Prevent adjustments of font size after orientation changes in iOS.
  9 |  */
 10 | 
 11 | html {
 12 | 	line-height: 1.15; /* 1 */
 13 | 	-webkit-text-size-adjust: 100%; /* 2 */
 14 | }
 15 | 
 16 | /* Sections
 17 |    ========================================================================== */
 18 | 
 19 | /**
 20 |  * Remove the margin in all browsers.
 21 |  */
 22 | 
 23 | body {
 24 | 	margin: 0;
 25 | }
 26 | 
 27 | /**
 28 |  * Render the `main` element consistently in IE.
 29 |  */
 30 | 
 31 | main {
 32 | 	display: block;
 33 | }
 34 | 
 35 | /**
 36 |  * Correct the font size and margin on `h1` elements within `section` and
 37 |  * `article` contexts in Chrome, Firefox, and Safari.
 38 |  */
 39 | 
 40 | h1 {
 41 | 	font-size: 2em;
 42 | 	margin: 0.67em 0;
 43 | }
 44 | 
 45 | /* Grouping content
 46 |    ========================================================================== */
 47 | 
 48 | /**
 49 |  * 1. Add the correct box sizing in Firefox.
 50 |  * 2. Show the overflow in Edge and IE.
 51 |  */
 52 | 
 53 | hr {
 54 | 	box-sizing: content-box; /* 1 */
 55 | 	height: 0; /* 1 */
 56 | 	overflow: visible; /* 2 */
 57 | }
 58 | 
 59 | /**
 60 |  * 1. Correct the inheritance and scaling of font size in all browsers.
 61 |  * 2. Correct the odd `em` font sizing in all browsers.
 62 |  */
 63 | 
 64 | pre {
 65 | 	font-family: monospace, monospace; /* 1 */
 66 | 	font-size: 1em; /* 2 */
 67 | }
 68 | 
 69 | /* Text-level semantics
 70 |    ========================================================================== */
 71 | 
 72 | /**
 73 |  * Remove the gray background on active links in IE 10.
 74 |  */
 75 | 
 76 | a {
 77 | 	background-color: transparent;
 78 | }
 79 | 
 80 | /**
 81 |  * 1. Remove the bottom border in Chrome 57-
 82 |  * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 83 |  */
 84 | 
 85 | abbr[title] {
 86 | 	border-bottom: none; /* 1 */
 87 | 	text-decoration: underline; /* 2 */
 88 | 	text-decoration: underline dotted; /* 2 */
 89 | }
 90 | 
 91 | /**
 92 |  * Add the correct font weight in Chrome, Edge, and Safari.
 93 |  */
 94 | 
 95 | b,
 96 | strong {
 97 | 	font-weight: bolder;
 98 | }
 99 | 
100 | /**
101 |  * 1. Correct the inheritance and scaling of font size in all browsers.
102 |  * 2. Correct the odd `em` font sizing in all browsers.
103 |  */
104 | 
105 | code,
106 | kbd,
107 | samp {
108 | 	font-family: monospace, monospace; /* 1 */
109 | 	font-size: 1em; /* 2 */
110 | }
111 | 
112 | /**
113 |  * Add the correct font size in all browsers.
114 |  */
115 | 
116 | small {
117 | 	font-size: 80%;
118 | }
119 | 
120 | /**
121 |  * Prevent `sub` and `sup` elements from affecting the line height in
122 |  * all browsers.
123 |  */
124 | 
125 | sub,
126 | sup {
127 | 	font-size: 75%;
128 | 	line-height: 0;
129 | 	position: relative;
130 | 	vertical-align: baseline;
131 | }
132 | 
133 | sub {
134 | 	bottom: -0.25em;
135 | }
136 | 
137 | sup {
138 | 	top: -0.5em;
139 | }
140 | 
141 | /* Embedded content
142 |    ========================================================================== */
143 | 
144 | /**
145 |  * Remove the border on images inside links in IE 10.
146 |  */
147 | 
148 | img {
149 | 	border-style: none;
150 | }
151 | 
152 | /* Forms
153 |    ========================================================================== */
154 | 
155 | /**
156 |  * 1. Change the font styles in all browsers.
157 |  * 2. Remove the margin in Firefox and Safari.
158 |  */
159 | 
160 | button,
161 | input,
162 | optgroup,
163 | select,
164 | textarea {
165 | 	font-family: inherit; /* 1 */
166 | 	font-size: 100%; /* 1 */
167 | 	line-height: 1.15; /* 1 */
168 | 	margin: 0; /* 2 */
169 | }
170 | 
171 | /**
172 |  * Show the overflow in IE.
173 |  * 1. Show the overflow in Edge.
174 |  */
175 | 
176 | button,
177 | input {
178 | 	/* 1 */
179 | 	overflow: visible;
180 | }
181 | 
182 | /**
183 |  * Remove the inheritance of text transform in Edge, Firefox, and IE.
184 |  * 1. Remove the inheritance of text transform in Firefox.
185 |  */
186 | 
187 | button,
188 | select {
189 | 	/* 1 */
190 | 	text-transform: none;
191 | }
192 | 
193 | /**
194 |  * Correct the inability to style clickable types in iOS and Safari.
195 |  */
196 | 
197 | button,
198 | [type="button"],
199 | [type="reset"],
200 | [type="submit"] {
201 | 	-webkit-appearance: button;
202 | }
203 | 
204 | /**
205 |  * Remove the inner border and padding in Firefox.
206 |  */
207 | 
208 | button::-moz-focus-inner,
209 | [type="button"]::-moz-focus-inner,
210 | [type="reset"]::-moz-focus-inner,
211 | [type="submit"]::-moz-focus-inner {
212 | 	border-style: none;
213 | 	padding: 0;
214 | }
215 | 
216 | /**
217 |  * Restore the focus styles unset by the previous rule.
218 |  */
219 | 
220 | button:-moz-focusring,
221 | [type="button"]:-moz-focusring,
222 | [type="reset"]:-moz-focusring,
223 | [type="submit"]:-moz-focusring {
224 | 	outline: 1px dotted ButtonText;
225 | }
226 | 
227 | /**
228 |  * Correct the padding in Firefox.
229 |  */
230 | 
231 | fieldset {
232 | 	padding: 0.35em 0.75em 0.625em;
233 | }
234 | 
235 | /**
236 |  * 1. Correct the text wrapping in Edge and IE.
237 |  * 2. Correct the color inheritance from `fieldset` elements in IE.
238 |  * 3. Remove the padding so developers are not caught out when they zero out
239 |  *    `fieldset` elements in all browsers.
240 |  */
241 | 
242 | legend {
243 | 	box-sizing: border-box; /* 1 */
244 | 	color: inherit; /* 2 */
245 | 	display: table; /* 1 */
246 | 	max-width: 100%; /* 1 */
247 | 	padding: 0; /* 3 */
248 | 	white-space: normal; /* 1 */
249 | }
250 | 
251 | /**
252 |  * Add the correct vertical alignment in Chrome, Firefox, and Opera.
253 |  */
254 | 
255 | progress {
256 | 	vertical-align: baseline;
257 | }
258 | 
259 | /**
260 |  * Remove the default vertical scrollbar in IE 10+.
261 |  */
262 | 
263 | textarea {
264 | 	overflow: auto;
265 | }
266 | 
267 | /**
268 |  * 1. Add the correct box sizing in IE 10.
269 |  * 2. Remove the padding in IE 10.
270 |  */
271 | 
272 | [type="checkbox"],
273 | [type="radio"] {
274 | 	box-sizing: border-box; /* 1 */
275 | 	padding: 0; /* 2 */
276 | }
277 | 
278 | /**
279 |  * Correct the cursor style of increment and decrement buttons in Chrome.
280 |  */
281 | 
282 | [type="number"]::-webkit-inner-spin-button,
283 | [type="number"]::-webkit-outer-spin-button {
284 | 	height: auto;
285 | }
286 | 
287 | /**
288 |  * 1. Correct the odd appearance in Chrome and Safari.
289 |  * 2. Correct the outline style in Safari.
290 |  */
291 | 
292 | [type="search"] {
293 | 	-webkit-appearance: textfield; /* 1 */
294 | 	outline-offset: -2px; /* 2 */
295 | }
296 | 
297 | /**
298 |  * Remove the inner padding in Chrome and Safari on macOS.
299 |  */
300 | 
301 | [type="search"]::-webkit-search-decoration {
302 | 	-webkit-appearance: none;
303 | }
304 | 
305 | /**
306 |  * 1. Correct the inability to style clickable types in iOS and Safari.
307 |  * 2. Change font properties to `inherit` in Safari.
308 |  */
309 | 
310 | ::-webkit-file-upload-button {
311 | 	-webkit-appearance: button; /* 1 */
312 | 	font: inherit; /* 2 */
313 | }
314 | 
315 | /* Interactive
316 |    ========================================================================== */
317 | 
318 | /*
319 |  * Add the correct display in Edge, IE 10+, and Firefox.
320 |  */
321 | 
322 | details {
323 | 	display: block;
324 | }
325 | 
326 | /*
327 |  * Add the correct display in all browsers.
328 |  */
329 | 
330 | summary {
331 | 	display: list-item;
332 | }
333 | 
334 | /* Misc
335 |    ========================================================================== */
336 | 
337 | /**
338 |  * Add the correct display in IE 10+.
339 |  */
340 | 
341 | template {
342 | 	display: none;
343 | }
344 | 
345 | /**
346 |  * Add the correct display in IE 10.
347 |  */
348 | 
349 | [hidden] {
350 | 	display: none;
351 | }
352 | 


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
  1 | @import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500;600;700&display=swap");
  2 | @import url("https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&display=swap");
  3 | 
  4 | html * {
  5 | 	font-family: "Rubik", sans-serif;
  6 | 	box-sizing: border-box;
  7 | 	font-size: 100%;
  8 | }
  9 | 
 10 | @media (max-width: 800px){
 11 | 	html{
 12 | 		font-size: 67.5%;
 13 | 	}
 14 | }
 15 | 
 16 | code {
 17 | 	background-color: #dedbe0;
 18 | 	border-radius: 3px;
 19 | 	font-family: "DM Mono", "Courier New", Courier, monospace;
 20 | 	font-weight: 400;
 21 | 	padding: 3px 6px;
 22 | 	color: gray;
 23 | }
 24 | 
 25 | body > * {
 26 | 	border: color;
 27 | }
 28 | 
 29 | body {
 30 | 	background-color: #dedbe0;
 31 | 	display: flex;
 32 | 	flex-direction: column;
 33 | 	align-items: center;
 34 | 	height: 100vh;
 35 | 	text-align: center;
 36 | 	padding-top: 12rem;
 37 | }
 38 | 
 39 | main div {
 40 | 	display: flex;
 41 | 	flex-direction: column;
 42 | 	align-items: center;
 43 | 	margin: auto;
 44 | }
 45 | 
 46 | .top {
 47 | 	align-self: flex-start;
 48 | }
 49 | 
 50 | .hidden {
 51 | 	display: none;
 52 | }
 53 | 
 54 | section {
 55 | 	margin-top: 2rem;
 56 | 	width: 60%;
 57 | 	height: auto;
 58 | 	background-color: #4498b8;
 59 | 	color: white;
 60 | 	padding: 1.5rem;
 61 | 	border-radius: 20px;
 62 | 	display: flex;
 63 | 	flex-direction: column;
 64 | 	position: relative;
 65 | }
 66 | 
 67 | @media (max-width: 800px){
 68 | 	section{
 69 | 		width: 80%;
 70 | 		
 71 | 	}
 72 | }
 73 | 
 74 | section::before {
 75 | 	content: "";
 76 | 	position: absolute;
 77 | 	width: 100%;
 78 | 	height: 100%;
 79 | 	border: dotted #4498b8 2px;
 80 | 	border-radius: 20px;
 81 | 	z-index: -1;
 82 | }
 83 | 
 84 | h2 {
 85 | 	line-height: 3rem;
 86 | 	font-size: 1.5rem;
 87 | }
 88 | 
 89 | h1 {
 90 | 	margin-top: 0;
 91 | 	color: #25262e;
 92 | 	font-size: 3rem;
 93 | }
 94 | 
 95 | h4 {
 96 | 	margin-bottom: 0;
 97 | 	align-self: flex-end;
 98 | }
 99 | 
100 | button {
101 | 	/* Variables */
102 | 	--button_radius: 0.75em;
103 | 	--button_color: #e8e8e8;
104 | 	--button_outline_color: #4cb2b6;
105 | 	font-size: 17px;
106 | 	font-weight: bold;
107 | 	border: none;
108 | 	border-radius: var(--button_radius);
109 | 	background: var(--button_outline_color);
110 | 	padding: 0;
111 | }
112 | 
113 | .button_top {
114 | 	display: block;
115 | 	box-sizing: border-box;
116 | 	border: 2px solid var(--button_outline_color);
117 | 	border-radius: var(--button_radius);
118 | 	padding: 0.75em 1.5em;
119 | 	background: var(--button_color);
120 | 	color: var(--button_outline_color);
121 | 	transform: translateY(-0.2em);
122 | 	transition: transform 0.1s ease;
123 | }
124 | 
125 | button:hover .button_top {
126 | 	/* Pull the button upwards when hovered */
127 | 	transform: translateY(-0.33em);
128 | }
129 | 
130 | button:active .button_top {
131 | 	/* Push the button downwards when pressed */
132 | 	transform: translateY(0);
133 | }
134 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
 6 | 		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
 7 | 		<title>Interview Questions</title>
 8 | 		<link rel="stylesheet" href="/css/normalize.css" />
 9 | 		<link rel="stylesheet" href="/css/style.css" />
10 | 		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
11 | 	</head>
12 | 	<body>
13 | 		<main>
14 | 			<div>
15 | 				<h1>Full Stack Web Development <br />Interview Questions</h1>
16 | 				<button id="clickMe" type="button" name="button">
17 | 				<span class="button_top"> Get random interview question </span>
18 | 				</button>
19 | 			</div>
20 | 			<div>
21 | 				<section class="hidden">
22 | 					<h2 id="question"></h2>
23 | 					<h4 id="questionType"></h4>
24 | 					<script type="text/javascript" src="js/main.js"></script>
25 | 				</section>
26 | 			</div>
27 | 		</main>
28 | 	</body>
29 | </html>
30 | 


--------------------------------------------------------------------------------
/js/banki.js:
--------------------------------------------------------------------------------
  1 | export const banki = {
  2 | 	questions: [
  3 | 		{
  4 | 			question:
  5 | 				"Give me an example of the project or initiative that you started on your own. It can be a non&minus;business one. What prompted you to get started?'",
  6 | 			type: "behavioral",
  7 | 		},
  8 | 		{
  9 | 			question: "Tell me about a time you had to work on several projects at once. How did you handle this?",
 10 | 			type: "behavioral",
 11 | 		},
 12 | 		{
 13 | 			question: "Describe a situation in which you felt you had not communicated well enough. What did you do? How did you handle it?",
 14 | 			type: "behavioral",
 15 | 		},
 16 | 		{
 17 | 			question:
 18 | 				"Tell me about when you had to deal with conflict within your team. How was the conflict solved? How did you handle that? How would you deal with it now?",
 19 | 			type: "behavioral",
 20 | 		},
 21 | 		{
 22 | 			question:
 23 | 				"Give me an example of a time you had to take a creative and unusual approach to solve coding problem. How did this idea come to your mind? Why do you think it was unusual?",
 24 | 			type: "behavioral",
 25 | 		},
 26 | 		{
 27 | 			question:
 28 | 				"Describe a situation in which you worked diligently on a project and it did not produce the desired results. Why didn't you get the desired results? What did you learn from the experience?",
 29 | 			type: "behavioral",
 30 | 		},
 31 | 		{
 32 | 			question: "Give an example of an important project goal you reached and how you achieved it.",
 33 | 			type: "behavioral",
 34 | 		},
 35 | 		{
 36 | 			question:
 37 | 				"Describe a situation in which you experienced difficulty in getting others to accept your ideas? What was your approach? How did this work? Were you able to successfully persuade someone to see things your way",
 38 | 			type: "behavioral",
 39 | 		},
 40 | 		{
 41 | 			question:
 42 | 				"Tell me about a situation when you were responsible for project planning. Did everything go according to your plan? If not, then why and what kind of counteractions did you have to take?",
 43 | 			type: "behavioral",
 44 | 		},
 45 | 		{
 46 | 			question:
 47 | 				"Tell me about a situation when you made a mistake at work. What happened exactly and how did you deal with it? What steps did you take to improve the situation?",
 48 | 			type: "behavioral",
 49 | 		},
 50 | 		{
 51 | 			question:
 52 | 				"Tell me about a time when you worked with someone who was not completing his or her share of the work. How did you handle the situation? Did you discuss your concern with your coworker? With your manager? If yes, how did your coworker respond to your concern? What was your manager's response?",
 53 | 			type: "behavioral",
 54 | 		},
 55 | 		{
 56 | 			question:
 57 | 				"Describe a situation when you worked effectively under pressure. How did you feel when working under pressure? What was going on, and how did you get through it?",
 58 | 			type: "behavioral",
 59 | 		},
 60 | 		{ question: "Tell me about yourself.", type: "behavioral" },
 61 | 		{
 62 | 			question: "Tell me about your experience at 100Devs.",
 63 | 			type: "behavioral",
 64 | 		},
 65 | 		{ question: "What do you know about our company?", type: "behavioral" },
 66 | 		{ question: "Why do you want to work for us?", type: "behavioral" },
 67 | 		{
 68 | 			question: "Why are you interested in this opportunity?",
 69 | 			type: "behavioral",
 70 | 		},
 71 | 		{
 72 | 			question: "Tell me about your dream job?  What do you really want to do with your career?",
 73 | 			type: "behavioral",
 74 | 		},
 75 | 		{ question: "Tell me a time when you failed.", type: "behavioral" },
 76 | 		{ question: "What do you read on a regular basis?", type: "behavioral" },
 77 | 		{
 78 | 			question: "What's some critical feedback you've gotten recently?",
 79 | 			type: "behavioral",
 80 | 		},
 81 | 		{ question: "Do you have any questions?", type: "behavioral" },
 82 | 		{ question: "What does a doctype do?", type: "HTML" },
 83 | 		{
 84 | 			question: "How do you serve a page with content in multiple languages?",
 85 | 			type: "HTML",
 86 | 		},
 87 | 		{
 88 | 			question: "What kind of things must you be wary of when design or developing for multilingual sites?",
 89 | 			type: "HTML",
 90 | 		},
 91 | 		{ question: "What are <code>data&minus;</code> attributes good for?", type: "HTML" },
 92 | 		{
 93 | 			question: "Consider HTML5 as an open web platform. What are the building blocks of HTML5?",
 94 | 			type: "HTML",
 95 | 		},
 96 | 		{
 97 | 			question: "Describe the difference between a <code>cookie</code>, <code>sessionStorage</code> and <code>localStorage</code>.",
 98 | 			type: "HTML",
 99 | 		},
100 | 		{
101 | 			question:
102 | 				"Describe the difference between <code>&lt;script&gt;</code>, <code>&lt;script async&gt;</code> and <code>&lt;script defer&gt;</code>.",
103 | 			type: "HTML",
104 | 		},
105 | 		{
106 | 			question:
107 | 				"Why is it generally a good idea to position CSS <code>&lt;link&gt;s</code> between <code>&lt;head&gt;&lt;&#x2F;head&gt;</code> and JS <code>&lt;script&gt;s</code> just before <code>&lt;&#x2F;body&gt;</code>? Do you know any exceptions?",
108 | 			type: "HTML",
109 | 		},
110 | 		{ question: "What is progressive rendering?", type: "HTML" },
111 | 		{
112 | 			question:
113 | 				"Why would you use a <code>srcset</code> attribute in an image tag? Explain the process the browser uses when evaluating the content of this attribute.",
114 | 			type: "HTML",
115 | 		},
116 | 		{
117 | 			question: "Have you used different HTML templating languages before?",
118 | 			type: "HTML",
119 | 		},
120 | 		{
121 | 			question: "What is CSS selector specificity and how does it work?",
122 | 			type: "CSS",
123 | 		},
124 | 		{
125 | 			question: "What's the difference between 'resetting' and 'normalizing' CSS? Which would you choose, and why?",
126 | 			type: "CSS",
127 | 		},
128 | 		{
129 | 			question: "Describe floats and how they work.",
130 | 			type: "CSS",
131 | 		},
132 | 		{
133 | 			question: "Describe <code>z&minus;index</code> and how stacking context is formed.",
134 | 			type: "CSS",
135 | 		},
136 | 		{
137 | 			question: "Describe BFC (Block Formatting Context) and how it works.",
138 | 			type: "CSS",
139 | 		},
140 | 		{
141 | 			question: "What are the various clearing techniques and which is appropriate for what context?",
142 | 			type: "CSS",
143 | 		},
144 | 		{
145 | 			question: "Explain CSS sprites, and how you would implement them on a page or site.",
146 | 			type: "CSS",
147 | 		},
148 | 		{
149 | 			question: "How would you approach fixing browser&minus;specific styling issues?",
150 | 			type: "CSS",
151 | 		},
152 | 		{
153 | 			question: "How do you serve your pages for feature&minus;constrained browsers? What techniques&#x2F;processes do you use?",
154 | 			type: "CSS",
155 | 		},
156 | 		{
157 | 			question: "What are the different ways to visually hide content (and make it available only for screen readers)?",
158 | 			type: "CSS",
159 | 		},
160 | 		{
161 | 			question: "Have you ever used a grid system, and if so, what do you prefer?",
162 | 			type: "CSS",
163 | 		},
164 | 		{
165 | 			question: "Have you used or implemented media queries or mobile specific layouts&#x2F;CSS?",
166 | 			type: "CSS",
167 | 		},
168 | 		{
169 | 			question: "Are you familiar with styling SVG?",
170 | 			type: "CSS",
171 | 		},
172 | 		{
173 | 			question: "Can you give an example of an <code>@media</code> property other than screen?",
174 | 			type: "CSS",
175 | 		},
176 | 		{
177 | 			question: "What are some of the 'gotchas' for writing efficient CSS?",
178 | 			type: "CSS",
179 | 		},
180 | 		{
181 | 			question: "What are the advantages&#x2F;disadvantages of using CSS preprocessors?",
182 | 			type: "CSS",
183 | 		},
184 | 		{
185 | 			question: "Describe what you like and dislike about the CSS preprocessors you have used.",
186 | 			type: "CSS",
187 | 		},
188 | 		{
189 | 			question: "How would you implement a web design comp that uses non&minus;standard fonts?",
190 | 			type: "CSS",
191 | 		},
192 | 		{
193 | 			question: "Explain how a browser determines what elements match a CSS selector.",
194 | 			type: "CSS",
195 | 		},
196 | 		{
197 | 			question: "Describe pseudo&minus;elements and discuss what they are used for.",
198 | 			type: "CSS",
199 | 		},
200 | 		{
201 | 			question:
202 | 				"Explain your understanding of the box model and how you would tell the browser in CSS to render your layout in different box models.",
203 | 			type: "CSS",
204 | 		},
205 | 		{
206 | 			question: "What does <code>* { box&minus;sizing: border&minus;box; }</code> do? What are its advantages?",
207 | 			type: "CSS",
208 | 		},
209 | 		{
210 | 			question: "What is the CSS display property and can you give a few examples of its use?",
211 | 			type: "CSS",
212 | 		},
213 | 		{
214 | 			question: "What's the difference between inline and <code>inline&minus;block</code>?",
215 | 			type: "CSS",
216 | 		},
217 | 		{
218 | 			question: "What's the difference between a relative, fixed, absolute and statically positioned element?",
219 | 			type: "CSS",
220 | 		},
221 | 		{
222 | 			question: "What existing CSS frameworks have you used locally, or in production? How would you change&#x2F;improve them?",
223 | 			type: "CSS",
224 | 		},
225 | 		{
226 | 			question: "Have you played around with the new CSS </code>flexbox</code> or <code>grid</code> specs?",
227 | 			type: "CSS",
228 | 		},
229 | 		{
230 | 			question: "Can you explain the difference between coding a web site to be responsive versus using a mobile&minus;first strategy?",
231 | 			type: "CSS",
232 | 		},
233 | 		{
234 | 			question: "How is responsive design different from adaptive design?",
235 | 			type: "CSS",
236 | 		},
237 | 		{
238 | 			question: "Have you ever worked with retina graphics? If so, when and what techniques did you use?",
239 | 			type: "CSS",
240 | 		},
241 | 		{
242 | 			question: "Is there any reason you'd want to use <code>translate()</code> instead of absolute positioning, or vice&minus;versa? And why?",
243 | 			type: "CSS",
244 | 		},
245 | 		{
246 | 			question: "Explain event delegation.",
247 | 			type: "JavaScript",
248 | 		},
249 | 		{
250 | 			question: "What's the difference between <code>.call</code> and <code>.apply</code>?",
251 | 			type: "JavaScript",
252 | 		},
253 | 		{
254 | 			question: "Explain how <code>this</code> works in JavaScript.",
255 | 			type: "JavaScript",
256 | 		},
257 | 		{
258 | 			question: "Explain how prototypal inheritance works.",
259 | 			type: "JavaScript",
260 | 		},
261 | 		{
262 | 			question: "What do you think of AMD vs CommonJS?",
263 | 			type: "JavaScript",
264 | 		},
265 | 		{
266 | 			question:
267 | 				"Explain why the following doesn't work as an IIFE: <code>function foo(){ }();</code>. What needs to be changed to properly make it an IIFE?",
268 | 			type: "JavaScript",
269 | 		},
270 | 		{
271 | 			question:
272 | 				"What's the difference between a variable that is: <code>null</code>, <code>undefined</code> or undeclared? How would you go about checking for any of these states?",
273 | 			type: "JavaScript",
274 | 		},
275 | 		{
276 | 			question: "What is a closure, and how/why would you use one?",
277 | 			type: "JavaScript",
278 | 		},
279 | 		{
280 | 			question:
281 | 				"Can you describe the main difference between a <code>.forEach</code> loop and a <code>.map()</code> loop and why you would pick one versus the other?",
282 | 			type: "JavaScript",
283 | 		},
284 | 		{
285 | 			question: "What's a typical use case for anonymous functions?",
286 | 			type: "JavaScript",
287 | 		},
288 | 		{
289 | 			question: "How do you organize your code? (module pattern, classical inheritance?)",
290 | 			type: "JavaScript",
291 | 		},
292 | 		{
293 | 			question: "What's the difference between host objects and native objects?",
294 | 			type: "JavaScript",
295 | 		},
296 | 		{
297 | 			question:
298 | 				"Difference between: <code>function Person(){}</code>, <code>var person = Person()</code>, and <code>var person = new Person()</code>?",
299 | 			type: "JavaScript",
300 | 		},
301 | 		{
302 | 			question: "Explain <code>Function.prototype.bind</code>.",
303 | 			type: "JavaScript",
304 | 		},
305 | 		{
306 | 			question: "When would you use <code>document.write()</code>?",
307 | 			type: "JavaScript",
308 | 		},
309 | 		{
310 | 			question: "What's the difference between feature detection, feature inference, and using the UA string?",
311 | 			type: "JavaScript",
312 | 		},
313 | 		{
314 | 			question: "Explain Ajax in as much detail as possible.",
315 | 			type: "JavaScript",
316 | 		},
317 | 		{
318 | 			question: "What are the advantages and disadvantages of using Ajax?",
319 | 			type: "JavaScript",
320 | 		},
321 | 		{
322 | 			question: "Explain how JSONP works (and how it's not really Ajax).",
323 | 			type: "JavaScript",
324 | 		},
325 | 		{
326 | 			question: "Have you ever used JavaScript templating? If so, what libraries have you used?",
327 | 			type: "JavaScript",
328 | 		},
329 | 		{
330 | 			question: "Explain 'hoisting'.",
331 | 			type: "JavaScript",
332 | 		},
333 | 		{
334 | 			question: "Describe event bubbling.",
335 | 			type: "JavaScript",
336 | 		},
337 | 		{
338 | 			question: "What's the difference between an <code>attribute</code> and a <code>property</code>?",
339 | 			type: "JavaScript",
340 | 		},
341 | 		{
342 | 			question: "Why is extending built&minus;in JavaScript objects not a good idea?",
343 | 			type: "JavaScript",
344 | 		},
345 | 		{
346 | 			question: "Difference between document <code>load</code> event and document <code>DOMContentLoaded</code> event?",
347 | 			type: "JavaScript",
348 | 		},
349 | 		{
350 | 			question: "What is the difference between <code>==</code> and <code>===</code>?",
351 | 			type: "JavaScript",
352 | 		},
353 | 		{
354 | 			question: "Explain the same&minus;origin policy with regards to JavaScript.",
355 | 			type: "JavaScript",
356 | 		},
357 | 		{
358 | 			question: "Make this work: <code>duplicate([1,2,3,4,5]); // [1,2,3,4,5,1,2,3,4,5]</code>",
359 | 			type: "JavaScript",
360 | 		},
361 | 		{
362 | 			question: 'Why is it called a Ternary expression, what does the word "Ternary" indicate?',
363 | 			type: "JavaScript",
364 | 		},
365 | 		{
366 | 			question: "What is <code>use strict;</code>? what are the advantages and disadvantages to using it?",
367 | 			type: "JavaScript",
368 | 		},
369 | 		{
370 | 			question:
371 | 				'Create a for loop that iterates up to <code>100</code> while outputting "fizz" at multiples of <code>3</code>, "buzz" at multiples of <code>5</code> and "fizzbuzz" at multiples of <code>3</code> and <code>5</code>',
372 | 			type: "JavaScript",
373 | 		},
374 | 		{
375 | 			question: "Why is it, in general, a good idea to leave the global scope of a website as&minus;is and never touch it?",
376 | 			type: "JavaScript",
377 | 		},
378 | 		{
379 | 			question:
380 | 				"Why would you use something like the <code>load</code> event? Does this event have disadvantages? Do you know any alternatives, and why would you use those?",
381 | 			type: "JavaScript",
382 | 		},
383 | 		{
384 | 			question: "Explain what a single page app is and how to make one SEO&minus;friendly.",
385 | 			type: "JavaScript",
386 | 		},
387 | 		{
388 | 			question: "What is the extent of your experience with Promises and&#x2F;or their polyfills?",
389 | 			type: "JavaScript",
390 | 		},
391 | 		{
392 | 			question: "What are the pros and cons of using Promises instead of callbacks?",
393 | 			type: "JavaScript",
394 | 		},
395 | 		{
396 | 			question: "What are some of the advantages/disadvantages of writing JavaScript code in a language that compiles to JavaScript?",
397 | 			type: "JavaScript",
398 | 		},
399 | 		{
400 | 			question: "What tools and techniques do you use debugging JavaScript code?",
401 | 			type: "JavaScript",
402 | 		},
403 | 		{
404 | 			question: "What language constructions do you use for iterating over object properties and array items?",
405 | 			type: "JavaScript",
406 | 		},
407 | 		{
408 | 			question: "Explain the difference between mutable and immutable objects.",
409 | 			type: "JavaScript",
410 | 		},
411 | 		{
412 | 			question: "Explain the difference between synchronous and asynchronous functions.",
413 | 			type: "JavaScript",
414 | 		},
415 | 		{
416 | 			question: "What is the event loop? What is the difference between call stack and task queue?",
417 | 			type: "JavaScript",
418 | 		},
419 | 		{
420 | 			question: "Explain the differences on the usage of foo between <code>function foo() {}</code> and <code>var foo = function() {}</code>",
421 | 			type: "JavaScript",
422 | 		},
423 | 		{
424 | 			question: "What are the differences between variables created using <code>let</code>, <code>var</code> or <code>const?</code>",
425 | 			type: "JavaScript",
426 | 		},
427 | 		{
428 | 			question: "What are the differences between ES6 class and ES5 function constructors?",
429 | 			type: "JavaScript",
430 | 		},
431 | 		{
432 | 			question: "Can you offer a use case for the new arrow =&gt; function syntax? How does this new syntax differ from other functions?",
433 | 			type: "JavaScript",
434 | 		},
435 | 		{
436 | 			question: "What is Node.js? Where can you use it?",
437 | 			type: "Node.js",
438 | 		},
439 | 		{
440 | 			question: "Why use Node.js?",
441 | 			type: "Node.js",
442 | 		},
443 | 		{
444 | 			question: "What are the features of Node.js?",
445 | 			type: "Node.js",
446 | 		},
447 | 		{
448 | 			question: "How do you update <code>npm</code> to a new version in Node.js?",
449 | 			type: "Node.js",
450 | 		},
451 | 		{
452 | 			question: "Why is Node.js Single&minus;threaded?",
453 | 			type: "Node.js",
454 | 		},
455 | 		{
456 | 			question: "Explain callback in Node.js.",
457 | 			type: "Node.js",
458 | 		},
459 | 		{
460 | 			question: "What is callback hell in Node.js?",
461 | 			type: "Node.js",
462 | 		},
463 | 		{
464 | 			question: "How do you prevent&#x2F;fix callback hell?",
465 | 			type: "Node.js",
466 | 		},
467 | 		{
468 | 			question: "Explain the role of REPL in Node.js.",
469 | 			type: "Node.js",
470 | 		},
471 | 		{
472 | 			question: "Name the types of API functions in Node.js.",
473 | 			type: "Node.js",
474 | 		},
475 | 		{
476 | 			question: "What are the functionalities of <code>npm</code> in Node.js?",
477 | 			type: "Node.js",
478 | 		},
479 | 		{
480 | 			question: "What is the difference between Node.js and Ajax?",
481 | 			type: "Node.js",
482 | 		},
483 | 		{
484 | 			question: "What are “streams” in Node.js? Explain the different types of streams present in Node.js.",
485 | 			type: "Node.js",
486 | 		},
487 | 		{
488 | 			question: "Explain chaining in Node.js.",
489 | 			type: "Node.js",
490 | 		},
491 | 		{
492 | 			question: "What are Globals in Node.js?",
493 | 			type: "Node.js",
494 | 		},
495 | 		{
496 | 			question: "What is Event&minus;driven programming?",
497 | 			type: "Node.js",
498 | 		},
499 | 		{
500 | 			question: "What is the Event loop in Node.js? And How does it work?",
501 | 			type: "Node.js",
502 | 		},
503 | 		{
504 | 			question: "What is the purpose of <code>module.exports</code> in Node.js?",
505 | 			type: "Node.js",
506 | 		},
507 | 		{
508 | 			question: "What is the difference between Asynchronous and Non&minus;blocking?",
509 | 			type: "Node.js",
510 | 		},
511 | 		{
512 | 			question: "What is Tracing in Node.js?",
513 | 			type: "Node.js",
514 | 		},
515 | 		{
516 | 			question: "How will you debug an application in Node.js?",
517 | 			type: "Node.js",
518 | 		},
519 | 		{
520 | 			question: "Difference between <code>setImmediate()</code> vs <code>setTimeout()</code>?",
521 | 			type: "Node.js",
522 | 		},
523 | 		{
524 | 			question: "What is <code>process.nextTick()</code>.",
525 | 			type: "Node.js",
526 | 		},
527 | 		{
528 | 			question: "What is <code>package.json</code>? What is it used for?",
529 | 			type: "Node.js",
530 | 		},
531 | 		{
532 | 			question: "What is <code>libuv</code>?",
533 | 			type: "Node.js",
534 | 		},
535 | 		{
536 | 			question: "What are some of the most popular modules of Node.js?",
537 | 			type: "Node.js",
538 | 		},
539 | 		{
540 | 			question: "What is <code>EventEmitter</code> in Node.js?",
541 | 			type: "Node.js",
542 | 		},
543 | 		{
544 | 			question: "What advantage is there for using the arrow syntax for a method in a constructor?",
545 | 			type: "JavaScript",
546 | 		},
547 | 		{
548 | 			question: "What is the definition of a higher&minus;order function?",
549 | 			type: "JavaScript",
550 | 		},
551 | 		{
552 | 			question: "Can you give an example for destructuring an object or an array?",
553 | 			type: "JavaScript",
554 | 		},
555 | 		{
556 | 			question: "ES6 Template Literals offer a lot of flexibility in generating strings, can you give an example?",
557 | 			type: "JavaScript",
558 | 		},
559 | 		{
560 | 			question: "Can you give an example of a curry function and why this syntax offers an advantage?",
561 | 			type: "JavaScript",
562 | 		},
563 | 		{
564 | 			question: "What are the benefits of using spread syntax and how is it different from rest syntax?",
565 | 			type: "JavaScript",
566 | 		},
567 | 		{
568 | 			question: "How can you share code between files?",
569 | 			type: "JavaScript",
570 | 		},
571 | 		{
572 | 			question: "Why might you want to create static class members?",
573 | 			type: "JavaScript",
574 | 		},
575 | 		{
576 | 			question: "Can you name two programming paradigms important for JavaScript app developers?",
577 | 			type: "JavaScript",
578 | 		},
579 | 		{
580 | 			question: "What is functional programming?",
581 | 			type: "JavaScript",
582 | 		},
583 | 		{
584 | 			question: "What is the difference between classical inheritance and prototypal inheritance?",
585 | 			type: "JavaScript",
586 | 		},
587 | 		{
588 | 			question: "What are the pros and cons of functional programming vs object&minus;oriented programming?",
589 | 			type: "JavaScript",
590 | 		},
591 | 		{
592 | 			question: "What are two&minus;way data binding and one&minus;way data flow, and how are they different?",
593 | 			type: "JavaScript",
594 | 		},
595 | 		{
596 | 			question: "What is asynchronous programming, and why is it important in JavaScript?",
597 | 			type: "JavaScript",
598 | 		},
599 | 		{
600 | 			question: "What is recursion and give an example using javascript?",
601 | 			type: "CS Theory",
602 | 		},
603 | 		{
604 | 			question: "What are types?",
605 | 			type: "CS Theory",
606 | 		},
607 | 		{
608 | 			question: "What are data structures?",
609 | 			type: "CS Theory",
610 | 		},
611 | 		{
612 | 			question: "What is an algorithm? ",
613 | 			type: "CS Theory",
614 | 		},
615 | 		{
616 | 			question: "What is scope &#x2F; lexical scope in javascript?",
617 | 			type: "CS Theory",
618 | 		},
619 | 		{
620 | 			question: "What is polymorphism?",
621 | 			type: "CS Theory",
622 | 		},
623 | 		{
624 | 			question: "What is encapsulation?",
625 | 			type: "CS Theory",
626 | 		},
627 | 		{
628 | 			question: "What is a Linked List?",
629 | 			type: "CS Theory",
630 | 		},
631 | 		{
632 | 			question: "What is a Doubly Linked List?",
633 | 			type: "CS Theory",
634 | 		},
635 | 		{
636 | 			question: "What is a Queue?",
637 | 			type: "CS Theory",
638 | 		},
639 | 		{
640 | 			question: "What is a Stack?",
641 | 			type: "CS Theory",
642 | 		},
643 | 		{
644 | 			question: "What is a Hash Table?",
645 | 			type: "CS Theory",
646 | 		},
647 | 		{
648 | 			question: "What is a Heap?",
649 | 			type: "CS Theory",
650 | 		},
651 | 		{
652 | 			question: "What is a Trie?",
653 | 			type: "CS Theory",
654 | 		},
655 | 		{
656 | 			question: "What is a Tree?",
657 | 			type: "CS Theory",
658 | 		},
659 | 		{
660 | 			question: "What is a Binary Search Tree?",
661 | 			type: "CS Theory",
662 | 		},
663 | 		{
664 | 			question: "What is a Disjoint Set?",
665 | 			type: "CS Theory",
666 | 		},
667 | 		{
668 | 			question: "What is a Bloom Filter?",
669 | 			type: "CS Theory",
670 | 		},
671 | 		{
672 | 			question: "Demonstrate Bubble Sort and explain when you might use it.",
673 | 			type: "CS Theory",
674 | 		},
675 | 		{
676 | 			question: "Demonstrate Insertion Sort and explain when you might use it.",
677 | 			type: "CS Theory",
678 | 		},
679 | 		{
680 | 			question: "Demonstrate Merge Sort and explain when you might use it.",
681 | 			type: "CS Theory",
682 | 		},
683 | 		{
684 | 			question: "Demonstrate Quicksort and explain when you might use it.",
685 | 			type: "CS Theory",
686 | 		},
687 | 	],
688 | };
689 | 


--------------------------------------------------------------------------------
/js/main.js:
--------------------------------------------------------------------------------
 1 | document.querySelector("#clickMe").addEventListener("click", newQuestion);
 2 | 
 3 | async function newQuestion() {
 4 | 	await makeReq()
 5 | 	document.querySelector("section").classList.add("animate__animated", "animate__bounceIn");
 6 | 	document.querySelector("section").classList.remove("hidden");
 7 | 	document.querySelector("section").addEventListener("animationend", () => {
 8 | 		document.querySelector("section").classList.remove("animate__animated");
 9 | 		document.querySelector("section").classList.remove("animate__bounceIn");
10 | 	});
11 | }
12 | 
13 | async function makeReq() {
14 | 	const res = await fetch(`/api`);
15 | 	const data = await res.json();
16 | 	document.querySelector("#question").innerHTML = data.question;
17 | 	let qType = data.type;
18 | 	document.querySelector("#questionType").textContent = `${qType.charAt(0).toUpperCase() + qType.slice(1)}`;
19 | };
20 | 


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "3dml2p",
 3 |   "version": "1.0.0",
 4 |   "lockfileVersion": 2,
 5 |   "requires": true,
 6 |   "packages": {
 7 |     "": {
 8 |       "name": "3dml2p",
 9 |       "version": "1.0.0",
10 |       "dependencies": {
11 |         "figlet": "^1.5.2"
12 |       }
13 |     },
14 |     "node_modules/figlet": {
15 |       "version": "1.5.2",
16 |       "resolved": "https://registry.npmjs.org/figlet/-/figlet-1.5.2.tgz",
17 |       "integrity": "sha512-WOn21V8AhyE1QqVfPIVxe3tupJacq1xGkPTB4iagT6o+P2cAgEOOwIxMftr4+ZCTI6d551ij9j61DFr0nsP2uQ==",
18 |       "engines": {
19 |         "node": ">= 0.4.0"
20 |       }
21 |     }
22 |   },
23 |   "dependencies": {
24 |     "figlet": {
25 |       "version": "1.5.2",
26 |       "resolved": "https://registry.npmjs.org/figlet/-/figlet-1.5.2.tgz",
27 |       "integrity": "sha512-WOn21V8AhyE1QqVfPIVxe3tupJacq1xGkPTB4iagT6o+P2cAgEOOwIxMftr4+ZCTI6d551ij9j61DFr0nsP2uQ=="
28 |     }
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "3dml2p",
 3 |   "version": "1.0.0",
 4 |   "description": "",
 5 |   "keywords": [],
 6 |   "main": "index.html",
 7 |   "type": "module",
 8 |   "dependencies": {
 9 |     "figlet": "^1.5.2"
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | import http from "http";
 2 | import fs from "fs";
 3 | import url from "url";
 4 | // import querystring from 'querystring'
 5 | import figlet from "figlet";
 6 | import { banki } from "./js/banki.js";
 7 | 
 8 | const PORT = process.env.PORT || 8000
 9 | const server = http.createServer((req, res) => {
10 | 	const readWrite = (file, contentType) => {
11 | 		fs.readFile(file, function (err, data) {
12 | 			res.writeHead(200, { "Content-Type": contentType });
13 | 			res.write(data);
14 | 			res.end();
15 | 		});
16 | 	};
17 | 
18 | 	const page = url.parse(req.url).pathname;
19 | 	// const params = querystring.parse(url.parse(req.url).query);
20 | 	switch (true) {
21 | 		case page == "/":
22 | 			readWrite("index.html", "text/html");
23 | 			break;
24 | 		case page == "/api":
25 | 			const random = Math.floor(Math.random() * banki.questions.length);
26 | 			res.end(JSON.stringify(banki.questions[random]));
27 | 			break;
28 | 		case page == "/css/style.css":
29 | 			fs.readFile("css/style.css", function (err, data) {
30 | 				res.write(data);
31 | 				res.end();
32 | 			});
33 | 			break;
34 | 		case page == "/css/normalize.css":
35 | 			fs.readFile("css/normalize.css", function (err, data) {
36 | 				res.write(data);
37 | 				res.end();
38 | 			});
39 | 			break;
40 | 		case page == "/js/main.js":
41 | 			readWrite("js/main.js", "text/javascript");
42 | 			break;
43 | 		default:
44 | 			figlet("404!!", function (err, data) {
45 | 				if (err) {
46 | 					console.log("Something went wrong...");
47 | 					console.dir(err);
48 | 					return;
49 | 				}
50 | 				res.write(data);
51 | 				res.end();
52 | 			});
53 | 			break;
54 | 	}
55 | });
56 | 
57 | server.listen(PORT);
58 | 


--------------------------------------------------------------------------------