JavaScript Advanced Course Homework
To-Dos App, dedicated repository: simple-task-manager.
ReactJS
- Challenge: Tic-tac-toe /22.05.25/
Homework 2022.05.15 (ReactJS)
- The directory has its own README.md
Homework 2022.05.08 (TypeScript basics)
- The directory has its own README.md
Homework 2022.04.17 (AsyncJS/JSON/HTTP)
Task 2: Simple Task Manager - Screenshot of the end result.
-
The task: Hands on HTTP requests with demo project (TodoApp)
-
The application require
json-server
, so within the application directory you need to do:npm install; npm start
Task 1: Tell Me a Joke Typewriter - Live preview.
-
The task: Simple Joke Apps.
-
The current solution provides much functionalities, including: 1) Typewriter effect with sound; 2) DOM element to image implementation; 3) Session records of the fetched jokes; 4) Cookies to store the user preferences; 5) Dynamic fetch of all resources; 6) Auto play feature; and more.
-
There are two variants of the
main.js
file. The only difference is within the mainJoke.prototype.jokeType()
method:-
main-one-speed-param.js
has a single parameter for a single character write time (speed) - it uses the following code to loop over the text.[...text].forEach((char, index, array) => { setTimeout(() => { typeSingleCharacter(char, index, array) }, index * speed); });
-
main-two-speed-params.js
has two parameters for a single character write time (speed), one for the character write itself and one for a delay after that - it uses the code below to loop over the text, respectively the functiontypeSingleCharacter()
is modified to work with promises.for (const index in text) { await typeSingleCharacter(text[index], index, text); }
-
Question 1: How do I use
dom-to-image.js
withrequire
otimport
? -
Question 2: Is it possible to instruct the browser to cache
dom-to-image.js
within the current way of invocation?
-
Homework 2022.04.16 (HTTP/AJAX/AsyncJS)
Task 1: Songs Gallery - Live preview.
-
The task: Songs Lyrics.
-
The current solution is a little bit extended - it fetch dynamically: 1) The collection of the favorite songs in JSON format; 2) then for each song, when it comes time to play it fetch: 2.1) the album cover, 2.2) the lyrics of the song and 2.3) the song itself in ogg format as blob.
-
Question 2: What about the
blob
objects?-
Where they are stored in the RAM or at the data drive?
-
Is it worth to cache them?
-
How to tell the browser to cache them as regular objects?
-
-
Question 1: When exactly to use
async
?-
When inside a function we need to use
await
it is mandatory. -
But whether we need it when the function just
return new Promise()
? For example these two cases:
-
Exercise 2: Play with Node.js Express module - all of the following exercises require npm install
, or you have to install the necessary modules globally:
-
basic-requests/
Handle GET, POST, DELETE, HEAD, etc. requests with Express and do a response. -
login-form-post/
Do a POST request to the Express server by HTML form. -
login-form-post-ajax/
Do a POST request to the Express server byXMLHttpRequest()
. -
login-form-post-fetch-then-catch/
Do a POST request to the Express server byfetch()
and use the.then()
and.catch()
methods to handle the response. -
login-form-post-fetch-async-await/
Do a POST request to the Express server byfetch()
and use theasync
function andawait
to handle the response. -
Exercise 1: Use AJAX:
new XMLHttpRequest()
and do GET request
Homework 2022.04.10 (Structural Patterns)
Exercises:
- Member patterns
- Decorator Structural Pattern
- Mixins Structural Pattern
- Observer/Subject Structural Pattern (Live preview of the end result)
Homework 2022.04.09 (Design Patterns)
Singleton pattern in JS exercises:
- Object literal
- Caching the singular instance, ES6 Classes style
- Caching the singular instance, Constructor function style
- Caching the singular instance, Factory function style
- Instance in a closure - rewrite the constructor, Constructor function style
- Instance in a closure - rewrite the constructor, Factory function style
Modules in JS examples:
- The Module pattern example
- ES6 Modules references:
- MDN: JavaScript modules (CommonJS, AMD, RequireJS, WebPack, Babel)
Different ways to create and object in JS examples:
Homework 2022.04.03
JavaScript Objects, Events and Functions recap:
- Bouncing Balls Game: JavaScript code and Live preview.
Exercise: Play with RegExp at Regular expressions 101 and also here:
-
Live preview: exercise-1.regexp-match.html
Homework 2022.04.02
Exercise 1: Learn how actually RexExp.exec()
works and why rx.lastIndex
is not terminated after each execution - exercise-1.String.methods-vs.RegExp.methods.js
Homework 2022.03.26
Task 5: Map array of objects
Task 4: Map array of objects
- Solution: task-4.mapArrayOfObjects.js
Task 3: Calc products prices
- Solution: task-3.calcProductsPrices.js
Task 2: Sum of squares of even numbers
- Solution: task-2.sumOfSquaresOfEvenNumbers.js
Task 1: Filter Words Starting WithLetter
- Solution: task-1.filterWordsStartingWithLetter.js
Homework 2022.03.20
Task 3: Sort array of objects by key
- Solution: task-3.Sort_array_of_objects_by_key.js
Task 2: Sort array of strings
- Solution: task-2.Sort_array_of_strings.js
Task 1: Developer_Manager_Person with Class Syntax- task description
-
Solution (already made - see the Tasks from 2022.03.13): task-1.Developer_Manager_Person.with.es6.classes.js (live preview)
-
Extend exercise which includes private members, static constructor members and more: es6-classes.js
Homework 2022.03.13
Task: Developer_Manager_Person - Task Description
-
Solution with Constructors: task-1.Developer_Manager_Person.with.constructor.js (live preview)
-
Solution with ES6 Classes: task-1.Developer_Manager_Person.with.es6.classes.js (live preview)
Question 1: What is the matter of the constructor’s reassignment? Is it just for information?
-
For example to achieve the same result as…
Ford.prototype.__proto__ = Car.prototype;
…we need to…
Ford.prototype = Object.create(Car.prototype); Ford.prototype.constructor = Ford;
Script file: example.constructor.function.js (live preview)
Homework 2022.03.12
TASK 2: Fix the problem in countdown function, so that we see in console the numbers 1,2,3 instead of NaN.
- Solution: task-2.numbers-1-2-3-instead-NaN.html (live preview)
TASK 1: Fix the problem, so that we see in console numbers 1,2,3 instead of NaNs, on each click.
-
Solution (2 variants): task-1.numbers-1-2-3-instead-NaN.js
-
Questions:
-
Which solution must prefer whn there is a number of equal solutions? Can we say, as rule of thumb, the shorter syntax is preferable?
-
Is there an easy way to prevent asynchronous work of JS in such cases where, for example, we have consecutive invocations of setTimeout()?
-
Homework 2022.03.05
TASK: The Factory as mechanism to enforce encapsulation
Homework 2022.03.04
TASK: Recursion - Traversing the DOM: Change the elements’ color based on the color names, mentioned within their text.