├── .gitignore
├── .vscode
    └── settings.json
├── 1-colorChanger
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 10-emoji
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 11-textEditor
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 12-randomImage
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 13-jokes
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 14-cats
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 15-crudDom
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 16-debounce
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 2-BMICalculator
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 3-DigitalClock
    ├── chaiaurcode.js
    └── index.html
├── 4-GuessTheNumber
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 5-keyboard
    ├── chaiaurcode.js
    └── index.html
├── 6-unlimitedColors
    ├── chaiaurcode.js
    └── index.html
├── 7-scroll
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 8-typer
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── 9-mouseCircle
    ├── chaiaurcode.js
    ├── index.html
    └── style.css
├── README.md
├── index.html
├── script.js
└── styles.css


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   /**
  3 |    * Controls whether suggestions should be accepted on commit characters.
  4 |    * For example, in JavaScript, the semi-colon (;) can be a commit character that accepts a suggestion and types that character.
  5 |    * Defaults to true.
  6 |    */
  7 |   // "editor.acceptSuggestionOnCommitCharacter": true,
  8 |   /**
  9 |    * Controls whether suggestions should be accepted on Enter, in addition to Tab. Helps to avoid ambiguity between inserting new lines or accepting suggestions.
 10 |    * Can be: 'on', 'off', or 'smart'.
 11 |    * Defaults to 'on'.
 12 |    */
 13 |   // "editor.acceptSuggestionOnEnter": "on",
 14 |   /**
 15 |    * Controls whether the editor should automatically close brackets after the user adds an opening bracket.
 16 |    * Can be: 'always', 'beforeWhitespace', 'languageDefined' or 'never'.
 17 |    * Defaults to 'languageDefined'.
 18 |    */
 19 |   // "editor.autoClosingBrackets": "languageDefined",
 20 |   /**
 21 |    * Controls whether the editor should automatically close quotes after the user adds an opening quote.
 22 |    * Can be: 'always', 'beforeWhitespace', 'languageDefined' or 'never'.
 23 |    * Defaults to 'languageDefined'.
 24 |    */
 25 |   // "editor.autoClosingQuotes": "languageDefined",
 26 |   /**
 27 |    * Controls whether the editor should automatically adjust the indentation
 28 |    * when users type, paste, move or indent lines.
 29 |    * Can be: 'advanced', 'brackets', 'full', 'keep', 'none'.
 30 |    * Defaults to 'full'.
 31 |    */
 32 |   // "editor.autoIndent": "full",
 33 |   /**
 34 |    * Controls whether the editor shows CodeLens.
 35 |    * Defaults to true.
 36 |    */
 37 |   // "editor.codeLens": true,
 38 |   /**
 39 |    * Controls whether the editor should render the inline color decorators and color picker.
 40 |    */
 41 |   // "editor.colorDecorators": true,
 42 |   /**
 43 |    * Enables the custom context menu.
 44 |    * Defaults to true.
 45 |    */
 46 |   // "editor.contextmenu": true,
 47 |   /**
 48 |    * Control the cursor animation style, possible values are 'blink', 'smooth', 'phase', 'expand' and 'solid'.
 49 |    * Defaults to 'blink'.
 50 |    */
 51 |   // "editor.cursorBlinking": "blink",
 52 |   /**
 53 |    * Controls the cursor style.
 54 |    * Can be 'block', 'block-outline', 'line', 'line-thin', 'underline', 'underline-thin'.
 55 |    * Defaults to 'line'.
 56 |    */
 57 |   // "editor.cursorStyle": "line",
 58 |   /**
 59 |    * Controls the width of the cursor when 'editor.cursorStyle' is set to 'line'.
 60 |    */
 61 |   // "editor.cursorWidth": 2,
 62 |   /**
 63 |    * Controls whether 'editor.tabSize' and 'editor.insertSpaces' will be
 64 |    * automatically detected when a file is opened based on the file contents.
 65 |    * Defaults to true.
 66 |    */
 67 |   // "editor.detectIndentation": true,
 68 |   /**
 69 |    * Controls if the editor should allow to move selections via drag and drop.
 70 |    * Defaults to false.
 71 |    */
 72 |   // "editor.dragAndDrop": false,
 73 |   /**
 74 |    * Controls whether copying without a selection copies the current line.
 75 |    */
 76 |   // "editor.emptySelectionClipboard": true,
 77 |   /**
 78 |    * Controls whether the editor has code folding enabled.
 79 |    * Defaults to true.
 80 |    */
 81 |   // "editor.folding": true,
 82 |   /**
 83 |    * Controls the strategy for computing folding ranges.
 84 |    * - 'auto': use a language-specific folding strategy if available,
 85 |    * - 'indentation': use the indentation-based strategy.
 86 |    * Defaults to 'auto'.
 87 |    */
 88 |   // "editor.foldingStrategy": "auto",
 89 |   /**
 90 |    * Controls the font family.
 91 |    */
 92 |   // "editor.fontFamily": "Menlo, Cascadia Code, Consolas, Liberation Mono, monospace",
 93 |   /**
 94 |    * Enables/Disables font ligatures ('calt' and 'liga' font features).
 95 |    * Change this to a string for fine-grained control of the 'font-feature-settings' CSS property.
 96 |    * Defaults to false.
 97 |    */
 98 |   // "editor.fontLigatures": false,
 99 |   /**
100 |    * Controls the font size in pixels.
101 |    */
102 |   "editor.fontSize": 20,
103 |   /**
104 |    * Controls the font weight. Accepts 'normal' and 'bold' keywords or numbers values between '100' and '900'.
105 |    */
106 |   // "editor.fontWeight": "normal",
107 |   /**
108 |    * Controls whether the editor should automatically format the pasted content.
109 |    * Defaults to false.
110 |    */
111 |   // "editor.formatOnPaste": false,
112 |   /**
113 |    * Format a file on save.
114 |    * Defaults to true.
115 |    */
116 |   // "editor.formatOnSave": true,
117 |   /**
118 |    * Controls whether the editor should automatically format the line after typing.
119 |    * Defaults to false.
120 |    */
121 |   // "editor.formatOnType": false,
122 |   /**
123 |    * Controls whether the editor should render the vertical glyph margin. Glyph margin is mostly used for debugging.
124 |    * Defaults false.
125 |    */
126 |   // "editor.glyphMargin": false,
127 |   /**
128 |    * Controls whether the editor should highlight the active indent guide.
129 |    * Defaults to true.
130 |    */
131 |   // "editor.highlightActiveIndentGuide": true,
132 |   /**
133 |    * Configure the editor's hover.
134 |    */
135 |   // "editor.hover": { "enabled": true, "delay": 300, "sticky": true },
136 |   /**
137 |    * Insert spaces when pressing Tab. This setting is overridden based on the
138 |    * file contents when 'editor.detectIndentation' is on.
139 |    */
140 |   // "editor.insertSpaces": true,
141 |   /**
142 |    * Controls the letter spacing in pixels.
143 |    * Defaults to 0.
144 |    */
145 |   // "editor.letterSpacing": 0,
146 |   /**
147 |    * Enables the code action lightbulb in the editor.
148 |    */
149 |   // "editor.lightbulb": { "enabled": true },
150 |   /**
151 |    * The width reserved for line decorations (in px).
152 |    * Line decorations are placed between line numbers and the editor content.
153 |    * You can pass in a string in the format floating point followed by "ch". e.g. 1.3ch.
154 |    * Defaults to 10.
155 |    */
156 |   // "editor.lineDecorationsWidth": 10,
157 |   /**
158 |    * Controls the line height.
159 |    * - Use 0 to automatically compute the line height from the font size.
160 |    * - Values between 0 and 8 will be used as a multiplier with the font size.
161 |    * - Values greater than or equal to 8 will be used as effective values.
162 |    */
163 |   // "editor.lineHeight": 1.5,
164 |   /**
165 |    * Controls the display of line numbers. Can be 'on', 'off', 'relative' or 'interval'.
166 |    * Defaults to 'on'.
167 |    */
168 |   // "editor.lineNumbers": "on",
169 |   /**
170 |    * Controls the width of line numbers, by reserving horizontal space for rendering at least an amount of digits.
171 |    * Defaults to 5.
172 |    */
173 |   // "editor.lineNumbersMinChars": 5,
174 |   /**
175 |    * Controls whether the editor should detect links and make them clickable.
176 |    * Defaults to true.
177 |    */
178 |   // "editor.links": true,
179 |   /**
180 |    * Highlight matching brackets. Can be: 'always', 'near', 'never'.
181 |    * Defaults to 'always'.
182 |    */
183 |   // "editor.matchBrackets": "always",
184 |   /**
185 |    * Control the behavior and rendering of the minimap.
186 |    */
187 |   // "editor.minimap": { "enabled": false },
188 |   /**
189 |    * The modifier to be used to add multiple cursors with the mouse.
190 |    * Can be: 'alt' or 'ctrlCmd'.
191 |    * Defaults to 'alt'.
192 |    */
193 |   // "editor.multiCursorModifier": "alt",
194 |   /**
195 |    * Enables a pop-up that shows parameter documentation and type information as you type.
196 |    */
197 |   // "editor.parameterHints": { "enabled": true, "cycle": false },
198 |   /**
199 |    * Controls whether suggestions should automatically show up while typing.
200 |    * Defaults to true.
201 |    */
202 |   "editor.quickSuggestions": true
203 |   /**
204 |    * Controls the delay in milliseconds after which quick suggestions will show up.
205 |    * Defaults to 10 (ms).
206 |    */
207 |   // "editor.quickSuggestionsDelay": 10,
208 |   /**
209 |    * Controls whether the editor should render control characters.
210 |    * Defaults to true.
211 |    */
212 |   // "editor.renderControlCharacters": true,
213 |   /**
214 |    * Controls whether the editor should render indent guides.
215 |    * Defaults to true.
216 |    */
217 |   // "editor.renderIndentGuides": true,
218 |   /**
219 |    * Controls how the editor should render the current line highlight.
220 |    * Can be: 'all', 'gutter', 'line', or 'none'.
221 |    * Defaults to 'line'.
222 |    */
223 |   // "editor.renderLineHighlight": "line",
224 |   /**
225 |    * Controls how the editor should render whitespace characters.
226 |    * Can be: 'all', 'boundary', 'none', 'selection' and 'trailing'.
227 |    * Defaults to 'selection'.
228 |    */
229 |   // "editor.renderWhitespace": "selection",
230 |   /**
231 |    * Render vertical rulers after a certain number of monospace characters.
232 |    * Use multiple values for multiple rulers.
233 |    * No rulers are drawn if array is empty.
234 |    */
235 |   // "editor.rulers": [],
236 |   /**
237 |    * Controls the number of extra characters beyond which the editor will scroll horizontally.
238 |    * Defaults to 4.
239 |    */
240 |   // "editor.scrollBeyondLastColumn": 4,
241 |   /**
242 |    * Controls whether the editor will scroll beyond the last line.
243 |    * Defaults to true.
244 |    */
245 |   // "editor.scrollBeyondLastLine": true,
246 |   /**
247 |    * Controls whether the editor should highlight matches similar to the selection.
248 |    * Defaults to true.
249 |    */
250 |   // "editor.selectionHighlight": true,
251 |   /**
252 |    * Should the corresponding line be selected when clicking on the line number?
253 |    * Defaults to true.
254 |    */
255 |   // "editor.selectOnLineNumbers": true,
256 |   /**
257 |    * Controls when the folding controls on the gutter are shown.
258 |    * Can be: 'always' or 'mouseover'.
259 |    * Defaults to 'mouseover'.
260 |    */
261 |   // "editor.showFoldingControls": "mouseover",
262 |   /**
263 |    * Controls fading out of unused code.
264 |    */
265 |   // "editor.showUnused": true,
266 |   /**
267 |    * Controls whether the editor will scroll using an animation.
268 |    * Defaults to false.
269 |    */
270 |   // "editor.smoothScrolling": false,
271 |   /**
272 |    * Controls whether snippets are shown with other suggestions and how they are sorted.
273 |    * Can be 'bottom', 'top', 'inline' or 'none'.
274 |    */
275 |   // "editor.snippetSuggestions": "inline",
276 |   /**
277 |    * Suggest options.
278 |    */
279 |   // "editor.suggest": { "filterGraceful": true, "showWords": false },
280 |   /**
281 |    * Controls how suggestions are pre-selected when showing the suggest list.
282 |    * Can be 'first', 'recentlyUsed' or 'recentlyUsedByPrefix'.
283 |    */
284 |   // "editor.suggestSelection": "first",
285 |   /**
286 |    * The number of spaces a tab is equal to. This setting is overridden based
287 |    * on the file contents when 'editor.detectIndentation' is on.
288 |    */
289 |   // "editor.tabSize": 2,
290 |   /**
291 |    * Inserting and deleting whitespace follows tab stops.
292 |    * Defaults to true.
293 |    */
294 |   // "editor.useTabStops": true,
295 |   /**
296 |    * Characters that will be used as word separators when doing word related navigations or operations.
297 |    * Defaults to "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?"
298 |    */
299 |   // "editor.wordSeparators": "`~!@#$%^&*()-=+[{]}\\|;:'\",.<>/?",
300 |   /**
301 |    * Controls how lines should wrap.
302 |    * - 'off': Lines will never wrap.
303 |    * - 'on': Lines will wrap at the viewport width.
304 |    * - 'bounded': Lines will wrap at the minimum of viewport and 'editor.wordWrapColumn'.
305 |    * - 'wordWrapColumn': Lines will wrap at 'editor.wordWrapColumn'.
306 |    * Defaults to 'on'.
307 |    */
308 |   // "editor.wordWrap": "on",
309 |   /**
310 |    * Controls the wrapping column of the editor when 'editor.wordWrap' is 'wordWrapColumn' or 'bounded'.
311 |    * Defaults to 80.
312 |    */
313 |   // "editor.wordWrapColumn": 80,
314 |   /**
315 |    * Controls the indentation of wrapped lines.
316 |    * Can be: 'none', 'same', 'indent' or 'deepIndent'.
317 |    * Defaults to 'same'.
318 |    */
319 |   // "editor.wrappingIndent": "same",
320 |   /**
321 |    * Prettier - Print semicolons at the ends of statements.
322 |    */
323 |   // "prettier.semi": true,
324 |   /**
325 |    * Prettier - Use single quotes instead of double quotes.
326 |    */
327 |   // "prettier.singleQuote": true,
328 |   /**
329 |    * Prettier - Specify the number of spaces per indentation-level.
330 |    */
331 |   // "prettier.tabWidth": 2,
332 |   /**
333 |    * Prettier - Indent lines with tabs instead of spaces.
334 |    */
335 |   // "prettier.useTabs": false,
336 |   /**
337 |    * Controls whether the terminal cursor blinks.
338 |    * Defaults to false.
339 |    */
340 |   // "terminal.integrated.cursorBlinking": false,
341 |   /**
342 |    * Controls the style of terminal cursor.
343 |    * Can be: 'block' (default), 'line' or 'underline'.
344 |    */
345 |   // "terminal.integrated.cursorStyle": "block",
346 |   /**
347 |    * Controls the width of the cursor when 'terminal.integrated.cursorStyle' is set to 'line'.
348 |    * Defaults to 2.
349 |    */
350 |   // "terminal.integrated.cursorWidth": 2,
351 |   /**
352 |    * Controls the font size in pixels of the terminal.
353 |    * Defaults to 12.
354 |    */
355 |   // "terminal.integrated.fontSize": 12,
356 |   /**
357 |    * Controls the line height of the terminal, this number is multiplied by the terminal font size to get the actual line-height in pixels.
358 |    * Defaults to 1.
359 |    */
360 |   // "terminal.integrated.lineHeight": 1,
361 |   /**
362 |    * When set, the foreground color of each cell will change to try meet the contrast ratio specified. Example values:
363 |    * - 1: Do nothing and use the standard theme colors.
364 |    * - 4.5: WCAG AA compliance (minimum) (default).
365 |    * - 7: WCAG AAA compliance (enhanced).
366 |    * - 21: White on black or black on white.
367 |    */
368 |   // "terminal.integrated.minimumContrastRatio": 4.5
369 | }
370 | 


--------------------------------------------------------------------------------
/1-colorChanger/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/dom-project-chaiaurcode/6f9b303febd1c2e46eeaff4ba99f39e6408845a5/1-colorChanger/chaiaurcode.js


--------------------------------------------------------------------------------
/1-colorChanger/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <link rel="stylesheet" href="../styles.css" />
 9 |     <title>JavaScript Background Color Switcher</title>
10 |   </head>
11 |   <body>
12 |     <nav>
13 |       <a href="/" aria-current="page">Home</a>
14 |       <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
15 |         >Youtube channel</a
16 |       >
17 |     </nav>
18 |     <div class="canvas">
19 |       <!-- <a
20 |         style="
21 |           background-color: #fff;
22 |           padding: 10px 30px;
23 |           border-radius: 8px;
24 |           color: #212121;
25 |           text-decoration: none;
26 |           border: 2px solid #212121;
27 |         "
28 |         href="../index.html"
29 |         >Back to Home Page</a
30 |       > -->
31 |       <h1>Color Scheme Switcher</h1>
32 |       <span class="button" id="grey"></span>
33 |       <span class="button" id="white"></span>
34 |       <span class="button" id="blue"></span>
35 |       <span class="button" id="yellow"></span>
36 |       <h2>
37 |         Try clicking on one of the colors above
38 |         <span>to change the background color of this page!</span>
39 |       </h2>
40 |     </div>
41 |     <script src="chaiaurcode.js"></script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/1-colorChanger/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   margin: 0;
 3 | }
 4 | 
 5 | span {
 6 |   display: block;
 7 | }
 8 | .canvas {
 9 |   margin: 100px auto 100px;
10 |   width: 80%;
11 |   text-align: center;
12 | }
13 | 
14 | .button {
15 |   width: 100px;
16 |   height: 100px;
17 |   border: solid black 2px;
18 |   display: inline-block;
19 | }
20 | 
21 | #grey {
22 |   background: grey;
23 | }
24 | 
25 | #white {
26 |   background: white;
27 | }
28 | #blue {
29 |   background: blue;
30 | }
31 | #yellow {
32 |   background: yellow;
33 | }
34 | 


--------------------------------------------------------------------------------
/10-emoji/chaiaurcode.js:
--------------------------------------------------------------------------------
 1 | const btn = document.querySelector('#emoji');
 2 | const emojis = [
 3 |   '😆',
 4 |   '😅',
 5 |   '🤣',
 6 |   '😂',
 7 |   '😀',
 8 |   '🤑',
 9 |   '🤨',
10 |   '🙂',
11 |   '😊',
12 |   '😗',
13 |   '😛',
14 |   '😏',
15 |   '🤥',
16 |   '😴',
17 |   '🥺',
18 |   '😧',
19 |   '😇',
20 |   '😳',
21 |   '🙃',
22 |   '🥴',
23 |   '🧐',
24 |   '🤨',
25 |   '😒',
26 |   '🤔',
27 |   '🤭',
28 |   '🥰',
29 |   '🤐',
30 |   '👀',
31 |   '🤔',
32 |   '🤪',
33 |   '🥲',
34 |   '😃',
35 |   '😁',
36 |   '😬',
37 | ];
38 | 


--------------------------------------------------------------------------------
/10-emoji/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Random Emojies</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <h4>
11 |       As a user hover the mouse over emoji, get a new emoji. As the user moves
12 |       away mouse turn it into gray-scale
13 |     </h4>
14 |     <div id="emoji">🤣</div>
15 | 
16 |     <script src="chaiaurcode.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/10-emoji/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   height: 100vh;
 3 |   display: flex;
 4 |   flex-direction: column;
 5 |   justify-content: center;
 6 |   align-items: center;
 7 |   background: #ccc;
 8 | }
 9 | 
10 | #emoji {
11 |   font-size: 10rem;
12 |   filter: grayscale(1);
13 |   transition-property: transfrom, filter;
14 |   transition-duration: 200ms;
15 |   cursor: pointer;
16 | }
17 | 
18 | #emoji:hover {
19 |   transform: scale(1.3);
20 |   filter: grayscale(0);
21 | }
22 | 


--------------------------------------------------------------------------------
/11-textEditor/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/dom-project-chaiaurcode/6f9b303febd1c2e46eeaff4ba99f39e6408845a5/11-textEditor/chaiaurcode.js


--------------------------------------------------------------------------------
/11-textEditor/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Text Formatter</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <div class="input-container">
12 |         <h2>Type In Your Words</h2>
13 |         <input type="text" id="input-field" placeholder="Type Your Text Here" />
14 |       </div>
15 | 
16 |       <div class="btns-container">
17 |         <button class="btn uppercase">ABC</button>
18 |         <button class="btn lowercase">abc</button>
19 |         <button class="btn capitalize">Abc</button>
20 |         <button class="btn bold">B</button>
21 |         <button class="btn italic">/</button>
22 |         <button class="btn underline">ABC</button>
23 |       </div>
24 | 
25 |       <p id="output-field">Output</p>
26 |     </div>
27 | 
28 |     <script src="chaiaurcode.js"></script>
29 |   </body>
30 | </html>
31 | 


--------------------------------------------------------------------------------
/11-textEditor/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   padding: 0;
 3 |   margin: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   text-align: center;
 9 |   background-color: #ccef;
10 |   height: 100vh;
11 |   display: flex;
12 |   flex-direction: column;
13 |   justify-content: center;
14 |   align-items: center;
15 | }
16 | 
17 | .container {
18 |   padding: 6rem;
19 |   background: black;
20 | }
21 | 
22 | .container h2 {
23 |   color: #fff;
24 |   font-family: sans-serif;
25 |   font-size: 3rem;
26 |   margin-bottom: 40px;
27 | }
28 | 
29 | .input-container input {
30 |   width: 80%;
31 |   padding: 10px;
32 |   margin-bottom: 20px;
33 |   outline: none;
34 | }
35 | 
36 | button {
37 |   padding: 10px 20px;
38 |   font-weight: bold;
39 |   cursor: pointer;
40 |   background-color: rgb(60, 59, 60);
41 |   color: #fff;
42 |   border: none;
43 |   margin: 10px;
44 | }
45 | 
46 | p {
47 |   width: 400px;
48 |   height: 400px;
49 |   background: #ccef;
50 |   color: #000;
51 |   height: 50px;
52 |   border: 1px solid #555;
53 |   border-radius: 10px;
54 |   display: flex;
55 |   justify-content: center;
56 |   align-items: center;
57 |   margin: auto;
58 |   margin-top: 2rem;
59 |   font-family: sans-serif;
60 | }
61 | 
62 | .uppercase {
63 |   text-transform: uppercase;
64 | }
65 | 
66 | .capitalize {
67 |   text-transform: capitalize;
68 | }
69 | 
70 | .underline {
71 |   text-decoration: underline;
72 | }
73 | 
74 | .italic {
75 |   font-style: italic;
76 | }
77 | 


--------------------------------------------------------------------------------
/12-randomImage/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | const baseURL = 'https://source.unsplash.com/all/300x300';
2 | 
3 | // this url gives an image. Use this and NO API calls
4 | 


--------------------------------------------------------------------------------
/12-randomImage/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Random Image Feed</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <h1>Random Image Feed</h1>
11 |     <div class="content"></div>
12 |     <button>Chai aur code</button>
13 | 
14 |     <script src="chaiaurcode.js"></script>
15 |   </body>
16 | </html>
17 | 


--------------------------------------------------------------------------------
/12-randomImage/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   background-color: #212121;
 7 |   color: aliceblue;
 8 |   display: flex;
 9 |   flex-direction: column;
10 |   justify-content: center;
11 |   align-items: center;
12 |   min-height: 100vh;
13 |   margin: 0;
14 |   font-family: sans-serif;
15 | }
16 | 
17 | .content {
18 |   display: flex;
19 |   justify-content: center;
20 |   align-items: center;
21 |   flex-wrap: wrap;
22 |   max-width: 1000px;
23 | }
24 | 
25 | .content img {
26 |   object-fit: cover;
27 |   margin: 10px;
28 |   height: 300px;
29 |   width: 300px;
30 |   max-width: 100%;
31 | }
32 | 
33 | button {
34 |   padding: 10px 30px;
35 |   font-size: 22px;
36 |   background-color: transparent;
37 |   color: aliceblue;
38 |   border: 2px white solid;
39 | }
40 | 
41 | button:hover {
42 |   color: black;
43 |   background-color: aliceblue;
44 |   cursor: pointer;
45 | }
46 | 


--------------------------------------------------------------------------------
/13-jokes/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | const url = 'https://api.chucknorris.io/jokes/random';
2 | 
3 | // handle this end point with XMLHttpRequest
4 | 
5 | // handle this end point with promises
6 | 
7 | // handle the case of race condition
8 | 


--------------------------------------------------------------------------------
/13-jokes/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Chunk Norris</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <section class="container">
11 |       <div id="display-joke">Click the button to get a new joke</div>
12 |       <button class="btn" id="getJoke">Get Joke</button>
13 |     </section>
14 | 
15 |     <script src="chaiaurcode.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/13-jokes/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #212121;
 3 |   color: aliceblue;
 4 |   height: 100vh;
 5 |   display: flex;
 6 |   flex-direction: column;
 7 |   justify-content: center;
 8 |   align-items: center;
 9 | }
10 | 
11 | #display-joke {
12 |   font-size: 22px;
13 |   font-family: 'Playfair Display', serif;
14 | }
15 | 
16 | .btn {
17 |   padding: 10px;
18 |   margin-top: 40px;
19 |   border: none;
20 |   background: transparent;
21 |   border-bottom: 1px solid rgb(234, 205, 210);
22 |   color: #f3d2d9;
23 |   cursor: pointer;
24 |   border: 2px solid white;
25 | }
26 | 


--------------------------------------------------------------------------------
/14-cats/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | const url = 'https://api.thecatapi.com/v1/images/search';
2 | 


--------------------------------------------------------------------------------
/14-cats/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Random Cat Images</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <section class="header-content">
11 |       <button class="btn">Get Random Cat</button>
12 |     </section>
13 | 
14 |     <div class="container"></div>
15 | 
16 |     <script src="chaiaurcode.js"></script>
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/14-cats/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background: rgb(17, 17, 17);
 3 | }
 4 | 
 5 | .header-content {
 6 |   text-align: center;
 7 | }
 8 | 
 9 | .btn {
10 |   background: transparent;
11 |   border: none;
12 |   background-color: #62d316;
13 |   color: #181717;
14 |   padding: 10px 20px;
15 |   border-radius: 6px;
16 |   cursor: pointer;
17 | }
18 | 
19 | /* JavaScript */
20 | .cats {
21 |   display: flex;
22 |   justify-content: center;
23 |   align-items: center;
24 |   height: 100%;
25 | }
26 | 
27 | .random_cats {
28 |   width: 70%;
29 | }
30 | 
31 | img {
32 |   width: 900px;
33 | }
34 | 


--------------------------------------------------------------------------------
/15-crudDom/chaiaurcode.js:
--------------------------------------------------------------------------------
 1 | const title = document.getElementById('title');
 2 | const author = document.getElementById('author');
 3 | const year = document.getElementById('year');
 4 | const bookList = document.getElementById('book-list');
 5 | const btn = document.querySelector('.btn');
 6 | 
 7 | btn.addEventListener('click', function (e) {
 8 |   //work on CRUD operation of DOM
 9 | });
10 | 


--------------------------------------------------------------------------------
/15-crudDom/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>BookList App</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <section class="container">
11 |       <form id="book-form">
12 |         <div>
13 |           <label for="title">Book Title</label>
14 |           <input type="text" id="title" />
15 |         </div>
16 |         <div>
17 |           <label for="author">Book Author</label>
18 |           <input type="text" id="author" />
19 |         </div>
20 |         <div>
21 |           <label for="year">Published Year</label>
22 |           <input type="number" id="year" />
23 |         </div>
24 |         <button type="submit" class="btn">Add Book</button>
25 |       </form>
26 | 
27 |       <section class="table">
28 |         <section class="table-section">
29 |           <div>Title</div>
30 |           <div>Author</div>
31 |           <div>Year</div>
32 |         </section>
33 | 
34 |         <section id="book-list"></section>
35 |       </section>
36 |     </section>
37 | 
38 |     <script src="chaiaurcode.js"></script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/15-crudDom/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   padding: 0;
 3 |   margin: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   background-color: #080809;
 9 |   background: linear-gradient(rgb(55, 43, 226), rgb(82, 5, 154));
10 |   display: flex;
11 |   flex-direction: column;
12 |   justify-content: center;
13 |   align-items: center;
14 |   height: 100vh;
15 |   font-family: sans-serif;
16 | }
17 | 
18 | .container {
19 |   width: 80%;
20 |   height: 600px;
21 |   padding: 20px;
22 |   color: white;
23 |   position: relative;
24 | }
25 | 
26 | input {
27 |   width: 100%;
28 |   padding: 10px;
29 |   margin-top: 4px;
30 |   margin-bottom: 20px;
31 |   outline: none;
32 |   border: none;
33 |   border-radius: 5px;
34 | }
35 | 
36 | .table {
37 |   background: #252323;
38 |   width: 100%;
39 | }
40 | 
41 | .table-section {
42 |   display: flex;
43 |   justify-content: space-around;
44 |   padding: 10px;
45 | }
46 | 
47 | #book-list {
48 |   display: flex;
49 |   flex-direction: column;
50 |   list-style: none;
51 |   overflow: hidden;
52 |   word-wrap: break-word;
53 |   background: #fff;
54 |   color: #000;
55 | }
56 | 
57 | #book-list > section {
58 |   display: flex;
59 |   align-items: center;
60 |   text-align: center;
61 |   justify-content: space-around;
62 |   border-bottom: 1px solid #ccc;
63 |   padding: 10px;
64 | }
65 | 
66 | .btn {
67 |   background: #1a1919;
68 |   border: none;
69 |   color: #fff;
70 |   margin-bottom: 20px;
71 |   padding: 10px 20px;
72 |   cursor: pointer;
73 | }
74 | 


--------------------------------------------------------------------------------
/16-debounce/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | // with each character typed in search box, make an API call to randomuserme api and display a card below it. Use debounce concept to reduce api calls.
2 | 
3 | // You will automatically learn about this and apply in this. ☕️
4 | 


--------------------------------------------------------------------------------
/16-debounce/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Debounced User Search</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="container">
11 |       <input type="text" id="user-input" placeholder="Type and fetch API" />
12 |       <div id="user-card" class="user-card"></div>
13 |     </div>
14 | 
15 |     <script src="chaiaurcode.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/16-debounce/style.css:
--------------------------------------------------------------------------------
 1 | body {
 2 |   background-color: #212121;
 3 |   color: aliceblue;
 4 |   font-family: Arial, sans-serif;
 5 |   display: flex;
 6 |   justify-content: center;
 7 |   align-items: center;
 8 |   height: 100vh;
 9 |   margin: 0;
10 | }
11 | 
12 | .container {
13 |   text-align: center;
14 | }
15 | 
16 | #user-input {
17 |   padding: 15px 30px;
18 |   border-radius: 10px;
19 |   font-size: 22px;
20 | }
21 | .user-card {
22 |   margin-top: 20px;
23 |   padding: 20px;
24 |   border: 1px solid #ddd;
25 |   border-radius: 8px;
26 |   width: 300px;
27 |   display: none; /* Initially hidden */
28 | }
29 | 
30 | .user-card img {
31 |   max-width: 100%;
32 |   border-radius: 50%;
33 | }
34 | 
35 | .user-card h2 {
36 |   margin: 10px 0;
37 | }
38 | 
39 | .user-card p {
40 |   color: #666;
41 | }
42 | 


--------------------------------------------------------------------------------
/2-BMICalculator/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/dom-project-chaiaurcode/6f9b303febd1c2e46eeaff4ba99f39e6408845a5/2-BMICalculator/chaiaurcode.js


--------------------------------------------------------------------------------
/2-BMICalculator/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" href="style.css" />
 8 |     <link rel="stylesheet" href="../styles.css" />
 9 |     <title>BMI Calculator</title>
10 |   </head>
11 |   <body>
12 |     <nav>
13 |       <a href="/" aria-current="page">Home</a>
14 |       <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
15 |         >Youtube channel</a
16 |       >
17 |     </nav>
18 |     <div class="container">
19 |       <h1>BMI Calculator</h1>
20 |       <form>
21 |         <p><label>Height in CM: </label><input type="text" id="height" /></p>
22 |         <p><label>Weight in KG: </label><input type="text" id="weight" /></p>
23 |         <button>Calculate</button>
24 |         <div id="results"></div>
25 |         <div id="weight-guide">
26 |           <h3>BMI Weight Guide</h3>
27 |           <p>Under Weight = Less than 18.6</p>
28 |           <p>Normal Range = 18.6 and 24.9</p>
29 |           <p>Overweight = Greater than 24.9</p>
30 |         </div>
31 |       </form>
32 |     </div>
33 |   </body>
34 |   <script src="chaiaurcode.js"></script>
35 | </html>
36 | 


--------------------------------------------------------------------------------
/2-BMICalculator/style.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   width: 575px;
 3 |   height: 825px;
 4 | 
 5 |   background-color: #797978;
 6 |   padding-left: 30px;
 7 | }
 8 | #height,
 9 | #weight {
10 |   width: 150px;
11 |   height: 25px;
12 |   margin-top: 30px;
13 | }
14 | 
15 | #weight-guide {
16 |   margin-left: 75px;
17 |   margin-top: 25px;
18 | }
19 | 
20 | #results {
21 |   font-size: 35px;
22 |   margin-left: 90px;
23 |   margin-top: 20px;
24 |   color: rgb(241, 241, 241);
25 | }
26 | 
27 | button {
28 |   width: 150px;
29 |   height: 35px;
30 |   margin-left: 90px;
31 |   margin-top: 25px;
32 |   background-color: #fff;
33 |   padding: 1px 30px;
34 |   border-radius: 8px;
35 |   color: #212121;
36 |   text-decoration: none;
37 |   border: 2px solid #212121;
38 | 
39 |   font-size: 25px;
40 | }
41 | 
42 | h1 {
43 |   padding-left: 15px;
44 |   padding-top: 25px;
45 |   
46 | }
47 | 


--------------------------------------------------------------------------------
/3-DigitalClock/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/dom-project-chaiaurcode/6f9b303febd1c2e46eeaff4ba99f39e6408845a5/3-DigitalClock/chaiaurcode.js


--------------------------------------------------------------------------------
/3-DigitalClock/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <link rel="stylesheet" type="text/css" href="../styles.css" />
 8 |     <title>Your Local Time</title>
 9 |     <style>
10 |       body {
11 |         background-color: #212121;
12 |         color: #fff;
13 |       }
14 |       .center {
15 |         display: flex;
16 |         height: 100vh;
17 |         justify-content: center;
18 |         align-items: center;
19 |         flex-direction: column;
20 |       }
21 |       #clock {
22 |         font-size: 40px;
23 |         background-color: orange;
24 |         padding: 20px 50px;
25 |         margin-top: 10px;
26 |         border-radius: 10px;
27 |       }
28 |     </style>
29 |   </head>
30 |   <body>
31 |     <nav>
32 |       <a href="/" aria-current="page">Home</a>
33 |       <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
34 |         >Youtube channel</a
35 |       >
36 |     </nav>
37 |     <div class="center">
38 |       <div id="banner"><span>Your local time</span></div>
39 |       <div id="clock"></div>
40 |     </div>
41 |     <script src="chaiaurcode.js"></script>
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/4-GuessTheNumber/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/dom-project-chaiaurcode/6f9b303febd1c2e46eeaff4ba99f39e6408845a5/4-GuessTheNumber/chaiaurcode.js


--------------------------------------------------------------------------------
/4-GuessTheNumber/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 |     <meta charset="UTF-8">
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 |     <title>Number Guessing Game</title>
 8 |     <link rel="stylesheet" href="style.css">
 9 |     <link rel="stylesheet" href="../styles.css">
10 | </head>
11 | <body style="background-color:#212121; color:#fff;">
12 |   <nav>
13 |     <a href="/" aria-current="page">Home</a>
14 |     <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
15 |       >Youtube channel</a
16 |     >
17 |   </nav>
18 |     
19 |     <div id="wrapper">
20 |       <h1>Number guessing game</h1>
21 |     <p>Try and guess a random number between 1 and 100.</p>
22 |     <p>You have 10 attempts to guess the right number.</p>
23 |     </br>
24 |         <form class="form">
25 |             <label2 for="guessField" id="guess">Guess a number</label>
26 |             <input type="text" id="guessField" class="guessField">
27 |             <input type="submit" id="subt" value="Submit guess" class="guessSubmit">
28 |         </form>
29 | 
30 |         <div class="resultParas">
31 |             <p >Previous Guesses: <span class="guesses"></span></p>
32 |             <p >Guesses Remaining: <span class="lastResult">10</span></p>
33 |             <p class="lowOrHi"></p>
34 |         </div>
35 |     </div>
36 |     <script src="chaiaurcode.js"></script>
37 | </body>
38 | </html>


--------------------------------------------------------------------------------
/4-GuessTheNumber/style.css:
--------------------------------------------------------------------------------
 1 | html {
 2 |   font-family: sans-serif;
 3 | }
 4 | 
 5 | body {
 6 |   width: 300px;
 7 |   max-width: 750px;
 8 |   min-width: 480px;
 9 |   margin: 0 auto;
10 |   background-color: #212121;
11 | }
12 | 
13 | .lastResult {
14 |   color: white;
15 |   padding: 7px;
16 | }
17 | 
18 | .guesses {
19 |   color: white;
20 |   padding: 7px;
21 | }
22 | 
23 | button {
24 |   background-color: #141414;
25 |   color: #fff;
26 |   width: 250px;
27 |   height: 50px;
28 |   border-radius: 25px;
29 |   font-size: 30px;
30 |   border-style: none;
31 |   margin-top: 30px;
32 |   /* margin-left: 50px; */
33 | }
34 | 
35 | #subt {
36 |   background-color: #161616;
37 |   color: #ffffff;
38 |   width: 200px;
39 |   height: 50px;
40 |   border-radius: 10px;
41 |   font-size: 20px;
42 |   border-style: none;
43 |   margin-top: 50px;
44 |   /* margin-left: 75px; */
45 | }
46 | 
47 | #guessField {
48 |   color: #000;
49 |   width: 250px;
50 |   height: 50px;
51 |   font-size: 30px;
52 |   border-style: none;
53 |   margin-top: 25px;
54 | 
55 |   /* margin-left: 50px; */
56 |   border: 5px solid #6c6d6d;
57 |   text-align: center;
58 | }
59 | 
60 | #guess {
61 |   font-size: 55px;
62 |   /* margin-left: 90px; */
63 |   margin-top: 120px;
64 |   color: #fff;
65 | }
66 | 
67 | .guesses {
68 |   background-color: #7a7a7a;
69 | }
70 | 
71 | #wrapper {
72 |   box-sizing: border-box;
73 |   text-align: center;
74 |   width: 450px;
75 |   height: 550px;
76 |   background-color: #474747;
77 |   color: #fff;
78 |   font-size: 25px;
79 | }
80 | 
81 | h1 {
82 |   background-color: #161616;
83 | 
84 |   color: #fff;
85 |   text-align: center;
86 | }
87 | 
88 | p {
89 |   font-size: 16px;
90 |   text-align: center;
91 | }
92 | 


--------------------------------------------------------------------------------
/5-keyboard/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | console.log('Project 5');
2 | 


--------------------------------------------------------------------------------
/5-keyboard/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="style.css" />
 7 |     <title>Event KeyCodes</title>
 8 |     <link rel="stylesheet" type="text/css" href="../styles.css" />
 9 |     <style>
10 |       table,
11 |       th,
12 |       td {
13 |         border: 1px solid #e7e7e7;
14 |       }
15 |       .project {
16 |         background-color: #1c1c1c;
17 |         color: #ffffff;
18 |         display: flex;
19 |         align-items: center;
20 |         justify-content: center;
21 |         text-align: center;
22 |         height: 100vh;
23 |       }
24 | 
25 |       .color {
26 |         color: aliceblue;
27 |         display: flex;
28 |         flex-direction: row;
29 |       }
30 |     </style>
31 |   </head>
32 |   <body>
33 |     <nav>
34 |       <a href="/" aria-current="page">Home</a>
35 |       <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
36 |         >Youtube channel</a
37 |       >
38 |     </nav>
39 |     <div class="project">
40 |       <div id="insert">
41 |         <div class="key">Press the key and watch magic</div>
42 |       </div>
43 |     </div>
44 | 
45 |     <script src="./chaiaurcode.js"></script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/6-unlimitedColors/chaiaurcode.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/hiteshchoudhary/dom-project-chaiaurcode/6f9b303febd1c2e46eeaff4ba99f39e6408845a5/6-unlimitedColors/chaiaurcode.js


--------------------------------------------------------------------------------
/6-unlimitedColors/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 7 |     <title>Number Guessing Game</title>
 8 |     <link rel="stylesheet" href="style.css" />
 9 |     <link rel="stylesheet" href="../styles.css" />
10 |   </head>
11 |   <body style="background-color: #212121; color: #fff">
12 |     <nav>
13 |       <a href="/" aria-current="page">Home</a>
14 |       <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
15 |         >Youtube channel</a
16 |       >
17 |     </nav>
18 | 
19 |     <h1>Start should change the Background color every second</h1>
20 |     <button id="start">Start</button>
21 |     <button id="stop">Stop</button>
22 |     <script src="chaiaurcode.js"></script>
23 |   </body>
24 | </html>
25 | 


--------------------------------------------------------------------------------
/7-scroll/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | // use indicator width
2 | 


--------------------------------------------------------------------------------
/7-scroll/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html>
  3 |   <head>
  4 |     <meta charset="utf-8" />
  5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
  7 |     <title>Page Scroll Indicator</title>
  8 |     <link rel="stylesheet" href="./style.css" />
  9 |   </head>
 10 |   <body>
 11 |     <div class="content">
 12 |       <!-- (section>h1{Title}+p{lorem200})*30 -->
 13 |       <section>
 14 |         <h1>Title</h1>
 15 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 16 |       </section>
 17 |       <section>
 18 |         <h1>Title</h1>
 19 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 20 |       </section>
 21 |       <section>
 22 |         <h1>Title</h1>
 23 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 24 |       </section>
 25 |       <section>
 26 |         <h1>Title</h1>
 27 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 28 |       </section>
 29 |       <section>
 30 |         <h1>Title</h1>
 31 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 32 |       </section>
 33 |       <section>
 34 |         <h1>Title</h1>
 35 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 36 |       </section>
 37 |       <section>
 38 |         <h1>Title</h1>
 39 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 40 |       </section>
 41 |       <section>
 42 |         <h1>Title</h1>
 43 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 44 |       </section>
 45 |       <section>
 46 |         <h1>Title</h1>
 47 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 48 |       </section>
 49 |       <section>
 50 |         <h1>Title</h1>
 51 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 52 |       </section>
 53 |       <section>
 54 |         <h1>Title</h1>
 55 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 56 |       </section>
 57 |       <section>
 58 |         <h1>Title</h1>
 59 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 60 |       </section>
 61 |       <section>
 62 |         <h1>Title</h1>
 63 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 64 |       </section>
 65 |       <section>
 66 |         <h1>Title</h1>
 67 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 68 |       </section>
 69 |       <section>
 70 |         <h1>Title</h1>
 71 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 72 |       </section>
 73 |       <section>
 74 |         <h1>Title</h1>
 75 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 76 |       </section>
 77 |       <section>
 78 |         <h1>Title</h1>
 79 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 80 |       </section>
 81 |       <section>
 82 |         <h1>Title</h1>
 83 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 84 |       </section>
 85 |       <section>
 86 |         <h1>Title</h1>
 87 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 88 |       </section>
 89 |       <section>
 90 |         <h1>Title</h1>
 91 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 92 |       </section>
 93 |       <section>
 94 |         <h1>Title</h1>
 95 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
 96 |       </section>
 97 |       <section>
 98 |         <h1>Title</h1>
 99 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
100 |       </section>
101 |       <section>
102 |         <h1>Title</h1>
103 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
104 |       </section>
105 |       <section>
106 |         <h1>Title</h1>
107 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
108 |       </section>
109 |       <section>
110 |         <h1>Title</h1>
111 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
112 |       </section>
113 |       <section>
114 |         <h1>Title</h1>
115 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
116 |       </section>
117 |       <section>
118 |         <h1>Title</h1>
119 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
120 |       </section>
121 |       <section>
122 |         <h1>Title</h1>
123 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
124 |       </section>
125 |       <section>
126 |         <h1>Title</h1>
127 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
128 |       </section>
129 |       <section>
130 |         <h1>Title</h1>
131 |         <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed ullam iste natus, voluptas possimus repellat voluptates neque distinctio corrupti beatae eius aspernatur officiis temporibus eveniet tempore, magni aliquam, adipisci libero modi at non dolore debitis? Voluptas consequuntur ad unde ut sequi corporis adipisci enim ipsa deserunt voluptatum explicabo reprehenderit ullam vitae, voluptate quod, voluptatem aspernatur numquam, porro temporibus ipsum? Eum dolores a, culpa nisi omnis eveniet beatae consequatur iusto dicta modi tempora optio, ad iste cumque tempore minima voluptas assumenda? Sed corrupti qui nesciunt, aut odit quibusdam fugiat suscipit saepe explicabo esse facere ut debitis vel unde ea officiis expedita consequuntur quis, molestiae dolor molestias? Eaque fuga molestias est maxime laudantium quae ipsum repellat soluta minus, magnam atque deleniti expedita ut accusamus impedit quis eveniet deserunt officiis quaerat recusandae nam dicta cupiditate. Nesciunt ab dicta porro omnis dolores architecto sapiente sit aperiam placeat in iure, rem impedit eaque qui aliquam recusandae laborum eligendi animi perspiciatis velit error cumque unde! Ipsum amet numquam, quam neque modi in ad dolores distinctio saepe perferendis necessitatibus autem, minus aspernatur vitae? Aliquid ipsam, aspernatur architecto, officia commodi voluptate magni nisi maiores sunt accusamus delectus fugit porro explicabo animi non molestiae deleniti necessitatibus, quibusdam rem cum.</p>
132 |       </section>
133 | 
134 | 
135 |     <div class="scroll-indicator">
136 |       <div class="progress"></div>
137 |     </div>
138 | 
139 |     <script src="./chaiaurcode.js"></script>
140 |   </body>
141 | </html>
142 | 


--------------------------------------------------------------------------------
/7-scroll/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   margin: 0;
 3 |   padding: 0;
 4 | }
 5 | 
 6 | body {
 7 |   height: 100vh;
 8 |   font-family: sans-serif;
 9 |   background: #000;
10 |   color: #fff;
11 | }
12 | 
13 | .content {
14 |   padding: 4rem;
15 | }
16 | 
17 | section {
18 |   border: 2px solid white;
19 |   margin: 20px 0;
20 |   padding: 20px;
21 | }
22 | 
23 | section h1 {
24 |   margin: 10px 0;
25 | }
26 | 
27 | .scroll-indicator {
28 |   height: 5px;
29 |   width: calc(100% - 6em);
30 |   position: fixed;
31 |   top: 10px;
32 |   left: 3em;
33 |   border-radius: 3px;
34 | }
35 | 
36 | .scroll-indicator .progress {
37 |   height: 100%;
38 |   width: 0;
39 |   border-radius: 3px;
40 |   /* https://www.grabient.com/ */
41 |   background: linear-gradient(30deg, #21d4fd, #b721ff);
42 |   transition: width 0.1s;
43 | }
44 | 


--------------------------------------------------------------------------------
/8-typer/chaiaurcode.js:
--------------------------------------------------------------------------------
1 | const typedTextSpan = document.querySelector('.typed-text');
2 | const cursor = document.querySelector('.cursor');
3 | 
4 | const words = ['Love', 'Jhakaas', 'mast', 'dhinchak', 'Weird'];
5 | 
6 | function type() {}
7 | 
8 | function erase() {}
9 | 


--------------------------------------------------------------------------------
/8-typer/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Auto Text</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <p>
11 |       <span class="js">JavaScript</span> Is <span class="typed-text"></span>
12 |       <span class="cursor">&nbsp;</span>
13 |     </p>
14 | 
15 |     <script src="./chaiaurcode.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/8-typer/style.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   padding: 0;
 3 |   margin: 0;
 4 |   box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 |   display: flex;
 9 |   justify-content: center;
10 |   align-items: center;
11 |   height: 100vh;
12 |   font-family: sans-serif;
13 |   background: #000;
14 |   color: #fff;
15 | }
16 | 
17 | p {
18 |   font-size: 3rem;
19 | }
20 | 
21 | .js {
22 |   color: #fdfdfc;
23 | }
24 | 
25 | .typed-text {
26 |   color: #de8512;
27 | }
28 | 
29 | .cursor {
30 |   background: #dbe912;
31 | }
32 | 


--------------------------------------------------------------------------------
/9-mouseCircle/chaiaurcode.js:
--------------------------------------------------------------------------------
 1 | const cursor = document.querySelector('.cursor');
 2 | // an array of 10 colors in hex value
 3 | const colors = [
 4 |   '#FF6633',
 5 |   '#FFB399',
 6 |   '#FF33FF',
 7 |   '#FFFF99',
 8 |   '#00B3E6',
 9 |   '#E6B333',
10 |   '#3366E6',
11 |   '#999966',
12 |   '#99FF99',
13 |   '#B34D4D',
14 | ];
15 | // add circle to cursor and change it's color as cursor moves on the screen. Pick color from these array
16 | 


--------------------------------------------------------------------------------
/9-mouseCircle/index.html:
--------------------------------------------------------------------------------
 1 | <html lang="en">
 2 |   <head>
 3 |     <meta charset="UTF-8" />
 4 |     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <title>Cursor</title>
 7 |     <link rel="stylesheet" href="style.css" />
 8 |   </head>
 9 |   <body>
10 |     <div class="cursor"></div>
11 |     <div class="container">
12 |       <h1>Mouse Cursor Project</h1>
13 |       <p>You can only manage people, not the time</p>
14 |       <p>- Hitesh Choudhary</p>
15 |       <button>Chai aur code</button>
16 |     </div>
17 | 
18 |     <script src="./chaiaurcode.js"></script>
19 |   </body>
20 | </html>
21 | 


--------------------------------------------------------------------------------
/9-mouseCircle/style.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC:wght@700&display=swap');
 2 | 
 3 | body {
 4 |   height: 100vh;
 5 |   background: #000;
 6 |   display: flex;
 7 |   flex-direction: column;
 8 |   justify-content: center;
 9 |   align-items: center;
10 | }
11 | 
12 | .container {
13 |   text-align: center;
14 |   margin: 0 auto;
15 | }
16 | 
17 | h1 {
18 |   color: #fff;
19 |   font-size: 4rem;
20 |   font-family: 'Playfair Display SC', serif;
21 | }
22 | 
23 | p {
24 |   color: #fff;
25 |   max-width: 700px;
26 |   font-family: sans-serif;
27 |   letter-spacing: 2px;
28 |   line-height: 22px;
29 |   margin-bottom: 40px;
30 | }
31 | 
32 | button {
33 |   padding: 0;
34 |   margin: 0;
35 |   border: transparent;
36 |   background: transparent;
37 |   color: #fff;
38 |   border: 2px solid white;
39 |   padding: 10px 20px;
40 |   font-weight: bold;
41 |   text-transform: uppercase;
42 |   cursor: pointer;
43 | }
44 | 
45 | /* JavaScript */
46 | div.cursor {
47 |   position: absolute;
48 |   top: 50%;
49 |   left: 50%;
50 |   width: 25px;
51 |   height: 25px;
52 |   background: yellow;
53 |   border-radius: 50%;
54 |   transform: translate(-50%, -50%);
55 |   animation: cursor 6s infinite alternate;
56 | }
57 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # dom-project-chaiaurcode
2 | 
3 | [Edit in Codeflow ⚡️](https://stackblitz.com/~/github.com/hiteshchoudhary/dom-project-chaiaurcode)


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <title>Home</title>
 5 |     <meta charset="UTF-8" />
 6 |     <meta name="viewport" content="width=device-width" />
 7 | 
 8 |     <link rel="stylesheet" href="styles.css" />
 9 |     <script type="module" src="script.js"></script>
10 |   </head>
11 |   <body style="background-color: #212121; color: #fff">
12 |     <nav>
13 |       <a href="/" aria-current="page">Home</a>
14 |       <a target="_blank" href="https://www.youtube.com/@chaiaurcode"
15 |         >Youtube channel</a
16 |       >
17 |     </nav>
18 |     <main>
19 |       <h1>Chai aur code</h1>
20 |       <div class="projects">
21 |         <a class="project-link" style="" href="./1-colorChanger/index.html"
22 |           >Project 1 - color Changer 🔥</a
23 |         >
24 |         <a class="project-link" href="./2-BMICalculator/index.html"
25 |           >Project 2 - BMI Generator ☕️</a
26 |         >
27 |         <a class="project-link" href="./3-DigitalClock/index.html"
28 |           >Project 3 - Digital clock 😎</a
29 |         >
30 |         <a class="project-link" href="./4-GuessTheNumber/index.html"
31 |           >Project 4 - Guess the number 🤨</a
32 |         >
33 |         <a class="project-link" href="./5-keyboard/index.html"
34 |           >Project 5 - Keyboard check 👻</a
35 |         >
36 |         <a class="project-link" href="./6-unlimitedColors/index.html"
37 |           >Project 6 - Unlimited Colors 🧠
38 |         </a>
39 |         <a class="project-link" href="./7-scroll/index.html"
40 |           >Project 7 - Scroll like NextJS 👀</a
41 |         >
42 |         <a class="project-link" href="./8-typer/index.html"
43 |           >Project 8 - Your typer library 📚
44 |         </a>
45 |         <a class="project-link" href="./9-mouseCircle/index.html"
46 |           >Project 9 - Mouse Circle 📚
47 |         </a>
48 |         <a class="project-link" href="./10-emoji/index.html"
49 |           >Project 10 - Emoji 🫥
50 |         </a>
51 |         <a class="project-link" href="./11-textEditor/index.html"
52 |           >Project 11 - Text Editor ✍️
53 |         </a>
54 |         <a class="project-link" href="./12-randomImage/index.html"
55 |           >Project 12 - Random Image 🌠
56 |         </a>
57 |         <a class="project-link" href="./13-jokes/index.html"
58 |           >Project 13 - Jokes 😂
59 |         </a>
60 |         <a class="project-link" href="./14-cats/index.html"
61 |           >Project 14 - cats 🐈
62 |         </a>
63 |         <a class="project-link" href="./15-crudDom/index.html"
64 |           >Project 15 - DOM Crud 📌
65 |         </a>
66 |         <a class="project-link" href="./16-debounce/index.html"
67 |           >Project 16 - Debouncing 🏀
68 |         </a>
69 |       </div>
70 |     </main>
71 |   </body>
72 | </html>
73 | 


--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | console.log('Hello!');
2 | 


--------------------------------------------------------------------------------
/styles.css:
--------------------------------------------------------------------------------
 1 | * {
 2 |   box-sizing: border-box;
 3 | }
 4 | 
 5 | body {
 6 |   margin: 0;
 7 |   font-family: system-ui, sans-serif;
 8 |   color: black;
 9 |   background-color: white;
10 | }
11 | 
12 | nav {
13 |   display: flex;
14 |   flex-wrap: wrap;
15 |   align-items: center;
16 |   justify-content: center;
17 |   padding: 0.5rem;
18 |   gap: 0.5rem;
19 |   border-bottom: solid 1px #aaa;
20 |   background-color: #eee;
21 | }
22 | 
23 | nav a {
24 |   display: inline-block;
25 |   min-width: 9rem;
26 |   padding: 0.5rem;
27 |   border-radius: 0.2rem;
28 |   border: solid 1px rgb(22, 22, 22);
29 |   text-align: center;
30 |   text-decoration: none;
31 |   color: #1b1b1b;
32 | }
33 | 
34 | nav a[aria-current='page'] {
35 |   color: #000;
36 |   background-color: #d4d4d4;
37 | }
38 | 
39 | main {
40 |   padding: 1rem;
41 | }
42 | 
43 | h1 {
44 |   font-weight: bold;
45 |   font-size: 1.5rem;
46 | }
47 | 
48 | .projects {
49 |   display: flex;
50 |   flex-direction: column;
51 | }
52 | 
53 | .project-link {
54 |   background-color: #fff;
55 |   padding: 10px 30px;
56 |   border-radius: 8px;
57 |   color: #212121;
58 |   text-decoration: none;
59 |   border: 2px solid #212121;
60 |   margin-top: 5px;
61 | }
62 | 


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