Skip to content

Commit e2d3207

Browse files
author
Vladimir Damov
committed
adding JS Advanced README.md
1 parent 4bf163f commit e2d3207

15 files changed

+296
-0
lines changed

‎javascript-advanced/JS Advanced Exam - 15 July 2018/01. Sticky Notes/01. Notes Условие.docx

-575 KB
Binary file not shown.

‎javascript-advanced/JS Advanced Exam - 15 July 2018/01. Sticky Notes/README.md

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# JS Advanced: Exam 15 July 2018
2+
3+
# Problem 1. Sticky Notes (Simple DOM Interaction)
4+
5+
You are given the following **HTML code**:
6+
7+
<table>
8+
<tr>
9+
<td>notes.html</td>
10+
</tr>
11+
<tr>
12+
<td><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Sticky Notes</title> <script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script> <style> * { margin: 0; padding: 0; } body { font-family: arial, sans-serif; font-size: 100%; margin: 3em; background: #2a61f5; color: white; font-weight: bolder; } #sticker-list, #note-content { margin: 1em; float: left; position: relative; } .btn { padding-left: 50px; } /*an X button style*/ li .button { font-size: 18px; margin-left: 160px; position: relative; bottom: 10px; } .note-content { list-style: none; text-decoration: none; color: #000; background: #ffc; height: 10em; width: 10em; padding: 1em; box-shadow: 5px 5px 7px rgba(33, 33, 33, .7); display:inline-block; margin-right: 20px; margin-top: 10px; } .text div { margin: 15px 0; } #add-sticker { padding: 8px 12px; border: none; border-radius: 10px; color: #2a61f5; font-weight: bolder; font-family: arial, sans-serif; background-color: white; } hr { margin: 0.5em 0; } p{ word-wrap: break-word; } </style></head><body><div class="text"> <div class="title-input"> <label>Title: </label> <input class="title" maxlength="11"> </div> <div class="text-input"> <label>Text: </label> <input class="content" maxlength="102"> </div></div><div class="btn"> <button id="add-sticker" onclick="addSticker()"> Add new sticker</button></div><div class="stickerBoard"> <ul id="sticker-list"></ul></div><script src="solution.js"></script></body></html></td>
13+
</tr>
14+
</table>
15+
16+
17+
### Your Task
18+
19+
**Write the** **missing JavaScript code** to make the **Notes board** work as expected.
20+
21+
* When **both** **Title** and **Text** are **filled** upon pressing the "**Add new sticker**" button, a new sticker should appear in the sticker board and the input fields should be **reset**. Every sticker **must** have title, text and close button. Otherwise don't create note.
22+
23+
* **Between** the Title and Text content of the note you should have **separating** line.
24+
25+
* When the **close** button is clicked, the sticker should **disappear** from the sticker board.
26+
27+
### Submission
28+
29+
Submit only your **addSticker** function.
30+
31+
### Examples
32+
33+
**Example of empty html:**
34+
35+
![image alt text](../../images/image_0.png)
36+
37+
**Example of visualization and html after adding stickers:**
38+
39+
![image alt text](../../images/image_1.png)![image alt text](../../images/image_2.png)
40+
41+
**Example after removing the first note:**
42+
43+
![image alt text](../../images/image_3.png) ![image alt text](../../images/image_4.png)
44+

‎javascript-advanced/JS Advanced Exam - 15 July 2018/02. Calculator/02. Calculator Class Условие.docx

-755 KB
Binary file not shown.

‎javascript-advanced/JS Advanced Exam - 15 July 2018/02. Calculator/README.md

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
# JS Advanced: Exam 15 July 2018
2+
3+
# Problem 2. Calculator (Unit Testing)
4+
5+
You are given the following **JavaScript class**:
6+
7+
<table>
8+
<tr>
9+
<td>Calculator.js</td>
10+
</tr>
11+
<tr>
12+
<td>class Calculator { constructor() { this.expenses = []; } add(data) { this.expenses.push(data); } divideNums() { let divide; for (let i = 0; i < this.expenses.length; i++) { if (typeof (this.expenses[i]) === 'number') { if (i === 0 || divide===undefined) { divide = this.expenses[i]; } else { if (this.expenses[i] === 0) { return 'Cannot divide by zero'; } divide /= this.expenses[i]; } } } if (divide !== undefined) { this.expenses = [divide]; return divide; } else { throw new Error('There are no numbers in the array!') } }
13+
toString() { if (this.expenses.length > 0) return this.expenses.join(" -> "); else return 'empty array'; }
14+
orderBy() { if (this.expenses.length > 0) { let isNumber = true; for (let data of this.expenses) { if (typeof data !== 'number') isNumber = false; } if (isNumber) { return this.expenses.sort((a, b) => a - b).join(', '); } else { return this.expenses.sort().join(', '); } } else return 'empty'; }}</td>
15+
</tr>
16+
</table>
17+
18+
19+
### Functionality
20+
21+
The above code defines a **class** that holds items (of **any** type). An **instance** of the class should support the following operations:
22+
23+
* Contains a property **expenses** that is initialized to an **empty** array.
24+
25+
* Function** ****add(data)** – **adds** the passed in **item** (of **any** type) to the **expenses**.
26+
27+
* Function **divideNums() **– divides **only** the **numbers** from the **expenses** and returns the result. If there are no numbers in the array, the function throws the following error: **"****There are no numbers in the array!****"**
28+
29+
* Function** ****toString()**** **– **returns** a string, containing a list of all items from the expenses, joined with
30+
31+
an **arrow: " -> "**. If there are **no** items stored, it should **return** the string **"empty array".**
32+
33+
* Function **orderBy()** – **returns a string joined with ", "** which is the **sorted expenses,** sorting them by** two criteria **- one for **numbers** and another for **mixed** data.
34+
35+
### Examples
36+
37+
This is an example how this code is **intended to be used**:
38+
39+
<table>
40+
<tr>
41+
<td>Sample code usage</td>
42+
</tr>
43+
<tr>
44+
<td>let output = new Calculator();output.add(10);output.add("Pesho");output.add("5");console.log(output.toString());output.add(10);console.log(output.divideNums());output.add(1);console.log(output.orderBy());console.log(output.toString());</td>
45+
</tr>
46+
<tr>
47+
<td>Corresponding output</td>
48+
</tr>
49+
<tr>
50+
<td>10 -> Pesho -> 5
51+
1
52+
1, 1
53+
1 -> 1</td>
54+
</tr>
55+
</table>
56+
57+
58+
### Your Task
59+
60+
Using **Mocha** and **Chai** write **JS unit tests** to test the entire functionality of the **Calculator** class. You may use the following code as a template:
61+
62+
<table>
63+
<tr>
64+
<td>describe("TODO …", function() { it("TODO …", function() {
65+
// TODO: …
66+
}); // TODO: …
67+
});</td>
68+
</tr>
69+
</table>
70+
71+
72+
### Submission
73+
74+
Submit your tests inside a **describe()** statement, as shown above.
75+
76+
### Notes
77+
78+
The methods should function correctly for **positive**, **negative** and **floating point** numbers. In case of **floating point** numbers the result should be considered correct if it is **within 0.01** of the correct value.
79+
80+
**There will be no function chaining.**
81+

‎javascript-advanced/JS Advanced Exam - 15 July 2018/03. Book Collection/03. BookCollection Условие.docx

-754 KB
Binary file not shown.

‎javascript-advanced/JS Advanced Exam - 15 July 2018/03. Book Collection/README.md

+130
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
# JS Advanced: Exam 15 July 2018
2+
3+
# Problem 3. Book Collection
4+
5+
Write a **JavaScript class** **BookCollection** which holds a list containing shelf information **(shelfGenre, room, shelfCapacity).**
6+
7+
<table>
8+
<tr>
9+
<td>class BookCollection { // TODO: implement this class}</td>
10+
</tr>
11+
</table>
12+
13+
14+
Each **BookCollection** is located in specific room, on a shelf with defined capacity and shelf name. Implement the following features:
15+
16+
* **Constructor** – It should contain the following properties – **room**(String), **shelfGenre**(String), **shelf**(an array), **shelfCapacity**(Number). If the room is: "**livingRoom**" or "**bedRoom**" or "**closet**", create the shelf’s genre, room and shelf capacity. If it **is** **not,** throw "Cannot have book shelf in {room's name}". Shelf capacity will always be a valid positive number.
17+
18+
* Method **addBook(bookName,** **bookAuthor, genre)** – adds book to the shelf only if there’s enough space in the shelf. If the shelf is full, remove the **first** book to make space for the **new** one. **The genre is optional**. In the end, **sort** our shelf **alphabetically** by **book author’s name**.
19+
20+
* Method **throwAwayBook(bookName) – removes** a book from the shelf by the given name.
21+
22+
* Method **showBooks(genre) – **returns all books by the given genre. You should return a string with the following information:
23+
24+
<table>
25+
<tr>
26+
<td> "Results for search "{history}":"
27+
“\uD83D\uDCD6 {bookAuthor} – "{bookName}"”
28+
…</td>
29+
</tr>
30+
</table>
31+
32+
33+
* Accessor property **shelfCondition** – returns the **count** of** free slots** left in the shelf.
34+
35+
* Method **toString()** – returns the **text** **representation** of the shelf in the following format:
36+
37+
* Empty shelf:
38+
39+
<table>
40+
<tr>
41+
<td> "It's an empty shelf"</td>
42+
</tr>
43+
</table>
44+
45+
46+
* Non-empty shelf:
47+
48+
<table>
49+
<tr>
50+
<td> ""{shelfGenre}" shelf in {room} contains:"
51+
“\uD83D\uDCD6 "{bookName}" – {bookAuthor}”
52+
…</td>
53+
</tr>
54+
</table>
55+
56+
57+
### Examples
58+
59+
This is an example of how the **BookCollection** class is **intended to be used**:
60+
61+
<table>
62+
<tr>
63+
<td>Sample code usage</td>
64+
</tr>
65+
<tr>
66+
<td>let livingRoom = new BookCollection("Programming", "livingRoom", 5) .addBook("Introduction to Programming with C#", "Svetlin Nakov") .addBook("Introduction to Programming with Java", "Svetlin Nakov") .addBook("Programming for .NET Framework", "Svetlin Nakov");console.log(livingRoom.toString());
67+
</td>
68+
</tr>
69+
</table>
70+
71+
72+
<table>
73+
<tr>
74+
<td>Corresponding output</td>
75+
</tr>
76+
<tr>
77+
<td>"Programming" shelf in livingRoom contains:
78+
📖 "Introduction to Programming with C#" - Svetlin Nakov
79+
📖 "Introduction to Programming with Java" - Svetlin Nakov
80+
📖 "Programming for .NET Framework" - Svetlin Nakov</td>
81+
</tr>
82+
</table>
83+
84+
85+
<table>
86+
<tr>
87+
<td>Sample code usage</td>
88+
</tr>
89+
<tr>
90+
<td>let garden = new BookCollection("Programming", "garden");
91+
</td>
92+
</tr>
93+
<tr>
94+
<td>Corresponding output</td>
95+
</tr>
96+
<tr>
97+
<td>"Cannot have book shelf in garden"</td>
98+
</tr>
99+
</table>
100+
101+
102+
<table>
103+
<tr>
104+
<td>Sample code usage</td>
105+
</tr>
106+
<tr>
107+
<td>let bedRoom = new BookCollection('Mixed', 'bedRoom', 5);bedRoom.addBook("John Adams", "David McCullough", "history");bedRoom.addBook("The Guns of August", "Cuentos para pensar", "history");bedRoom.addBook("Atlas of Remote Islands", "Judith Schalansky");bedRoom.addBook("Paddle-to-the-Sea", "Holling Clancy Holling");console.log("Shelf's capacity: " + bedRoom.shelfCondition);console.log(bedRoom.showBooks("history"));</td>
108+
</tr>
109+
<tr>
110+
<td>Corresponding output</td>
111+
</tr>
112+
<tr>
113+
<td>Shelf's capacity: 1
114+
Results for search "history":
115+
📖 Cuentos para pensar - "The Guns of August"
116+
📖 David McCullough - "John Adams"</td>
117+
</tr>
118+
</table>
119+
120+
121+
### Submission
122+
123+
Submit your class **BookCollection** as "**JavaScript code**".
124+
125+
### Notes
126+
127+
Use the following Unicode for visualizing the book icon: **"\uD83D\uDCD6".**
128+
129+
**No invalid input will be given.**
130+

‎javascript-advanced/JS Advanced Exam - 15 July 2018/04. Online Shop/04. Online Shop Условие.docx

-810 KB
Binary file not shown.

‎javascript-advanced/JS Advanced Exam - 15 July 2018/04. Online Shop/README.md

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
# JS Advanced: Exam 15 July 2018
2+
3+
# Problem 4. Online Shop (DOM)
4+
5+
Write a JavaScript program that provides the logic for the given user interface of an online shop’s inventory:
6+
7+
![image alt text](../../images/image_5.png)
8+
9+
Each order you create should consist of product's **name**, **price** and **quantity**. When the **submit** button is **clicked** the current **product** must be **added** to the inventory and the visualization (**product field, price field, quantity field and submit button**) should be **reset** to the **initial values**. The **submit button** should be **disabled** if the **product field** **is empty**.
10+
11+
Also there is a small **capacity** **field**, which shows how many items are there currently in the inventory. The inventory can store **up to 150 items**. Therefore, you should keep track of its capacity and when **150** items are **reached**, the capacity field should **become red** and it should display **"full"**, also the **submit button, the product field, price field and quantity field** should be **disabled **by adding to them the property “disabled”. In order to change the colour of the capacity field, you should simply **change** its **CSS class** to **“fullCapacity”**. See the picture below:
12+
13+
![image alt text](../../images/image_6.png)
14+
15+
### Output
16+
17+
* You should **only** **submit **the** solution.js file**
18+
19+
Use the following **index.html** and the **solution.js** for the user interface implementation:
20+
21+
<table>
22+
<tr>
23+
<td>index.html</td>
24+
</tr>
25+
<tr>
26+
<td><!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Online Shop</title> <style> .wrapper { margin: auto; width: 53%; border: 3px solid rgb(26, 26, 26); background-color: rgb(250, 250, 250); padding: 10px; } #header { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 300%; font-weight: bold; color: rgb(26, 26, 26); text-align: center; padding: 10px; } li { list-style-type: none; } .block { display: inline-block; margin-left: 165px; } .field { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 25px; color: rgb(26, 26, 26); } .custom-select { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 20px; background-color: rgb(255, 255, 255); color: rgb(26, 26, 26); border: 1px solid rgb(26, 26, 26); padding: 2px; margin-top: 10px; width: 200px; } .input1 { width: 40px; font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 20px; border: 1px solid rgb(26, 26, 26); background-color: #ffffff; color: rgb(26, 26, 26); padding: 2px; } #capacity { width: 40px; font-size: 20px; padding: 2px; font-family: "Trebuchet MS", Helvetica, sans-serif; } #sum { width: 80px; font-size: 20px; padding: 2px; font-family: "Trebuchet MS", Helvetica, sans-serif; margin: 10px 10px; } .fullCapacity { width: 40px; font-size: 20px; padding: 2px; font-family: "Trebuchet MS", Helvetica, sans-serif; color: rgb(250, 0, 0); border: 1px solid #f07777b2; background-color: #f78989bb; } .display { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 15px; border: 1px solid rgb(26, 26, 26); padding: 2px; background-color: #ffffff; color: rgb(26, 26, 26); margin-top: 5px; width: 100%; height: 300px; } .text { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 20px; color: rgb(26, 26, 26); margin-right: 10px; } .button:enabled { font-family: "Trebuchet MS", Helvetica, sans-serif; font-size: 20px; cursor: pointer; border: 1px solid rgb(26, 26, 26); padding: 5px 15px; margin: 3px; border-radius: 8px; } .button:disabled { background: rgb(248, 248, 248); cursor: pointer; color: rgb(216, 216, 216); font-size: 20px; padding: 5px 15px; font-family: "Trebuchet MS", Helvetica, sans-serif; margin: 3px; border: 1px solid rgb(26, 26, 26); border-radius: 8px; } </style> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script></head><body><div class="wrapper"></div><script src="solution.js"></script><script>onlineShop('.wrapper')</script></body>
27+
</td>
28+
</tr>
29+
</table>
30+
31+
32+
<table>
33+
<tr>
34+
<td>solution.js</td>
35+
</tr>
36+
<tr>
37+
<td>function onlineShop(selector) { let form = `<div id="header">Online Shop Inventory</div> <div class="block"> <label class="field">Product details:</label> <br> <input placeholder="Enter product" class="custom-select"> <input class="input1" id="price" type="number" min="1" max="999999" value="1"><label class="text">BGN</label> <input class="input1" id="quantity" type="number" min="1" value="1"><label class="text">Qty.</label> <button id="submit" class="button" disabled>Submit</button> <br><br> <label class="field">Inventory:</label> <br> <ul class="display"> </ul> <br> <label class="field">Capacity:</label><input id="capacity" readonly> <label class="field">(maximum capacity is 150 items.)</label> <br> <label class="field">Price:</label><input id="sum" readonly> <label class="field">BGN</label> </div>`; $(selector).html(form); // Write your code here}</td>
38+
</tr>
39+
</table>
40+
41+

‎javascript-advanced/images/image_0.png

13.5 KB
Loading

‎javascript-advanced/images/image_1.png

32.5 KB
Loading

‎javascript-advanced/images/image_2.png

16 KB
Loading

‎javascript-advanced/images/image_3.png

12.4 KB
Loading

‎javascript-advanced/images/image_4.png

13 KB
Loading

‎javascript-advanced/images/image_5.png

13.7 KB
Loading

‎javascript-advanced/images/image_6.png

15.4 KB
Loading

0 commit comments

Comments
 (0)