jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

Last changes

Browse source
This commit is contained in:
Volodymyr Shevchuk 2021-05-03 15:15:32 +03:00
parent b24b05d3ca
commit fdc015e1fa
8 changed files with 59 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

3
1-js/01-a/1-a1/1-camelcase/solution/index.js
View file

@ -1,2 +1 @@
function camelize(str) {return str.split('-').map((word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)).join('');}
console.log("Hello");

11
1-js/01-a/1-a1/1-camelcase/source/index.js
View file

@ -1,3 +1,10 @@
function camelize(str) { function camelize(str) {
/* your code */ return str
} .split('-') // разбивает 'my-long-word' на массив ['my', 'long', 'word']
.map(
// Переводит в верхний регистр первые буквы всех элементом массива за исключением первого
// превращает ['my', 'long', 'word'] в ['my', 'Long', 'Word']
(word, index) => index == 0 ? word : word[0].toUpperCase() + word.slice(1)
)
.join(''); // соединяет ['my', 'Long', 'Word'] в 'myLongWord'
}

11
1-js/01-a/1-a1/1-camelcase/source/test.js
View file

@ -1,19 +1,18 @@
describe("camelize", function() { describe("camelize", function() {
it("leaves an empty line as is", function() { it("leaves an empty line as is", function() {
assert.equal(camelize(""), ""); expect(camelize("")).toEqual("");
}); });
it("turns background-color into backgroundColor", function() { it("turns background-color into backgroundColor", function() {
assert.equal(camelize("background-color"), "backgroundColor"); expect(camelize("background-color")).toEqual(["background", "color"])
}); });
it("turns list-style-image into listStyleImage", function() { it("turns list-style-image into listStyleImage", function() {
assert.equal(camelize("list-style-image"), "listStyleImage"); expect(camelize("list-style-image")).toEqual("listStyleImage");
}); });
it("turns -webkit-transition into WebkitTransition", function() { it("turns -webkit-transition into WebkitTransition", function() {
assert.equal(camelize("-webkit-transition"), "WebkitTransition"); expect(camelize("-webkit-transition")).toEqual("WebkitTransition")
}); });
});
});

2
1-js/02-b/1-b1/2-hoverintent/solution/hoverIntent.js
View file

@ -1,4 +1,4 @@
class HoverIntent { export default class HoverIntent {
constructor({ constructor({
sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element" sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"

5
1-js/02-b/1-b1/2-hoverintent/source/hoverIntent.js
View file

@ -1,6 +1,6 @@
// Here's a brief sketch of the class // Here's a brief sketch of the class
// with things that you'll need anyway // with things that you'll need anyway
class HoverIntent { export default class HoverIntent {
constructor({ constructor({
sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element" sensitivity = 0.1, // speed less than 0.1px/ms means "hovering over an element"
@ -25,12 +25,9 @@ class HoverIntent {
elem.addEventListener("mouseout", this.onMouseOut); elem.addEventListener("mouseout", this.onMouseOut);
// continue from this point // continue from this point
} }
onMouseOver(event) { onMouseOver(event) {
console.error(console.log);
console.log("OVER", event); console.log("OVER", event);
/* ... */ /* ... */
} }

7
1-js/02-b/1-b1/2-hoverintent/source/index.html
View file

@ -1,5 +1,4 @@
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<script src="hoverIntent.js"></script>
<div id="elem" class="clock"> <div id="elem" class="clock">
<span class="hours">12</span> : <span class="hours">12</span> :
@ -9,7 +8,9 @@
<div id="tooltip" hidden>Tooltip</div> <div id="tooltip" hidden>Tooltip</div>
<script> <script type="module">
import HoverIntent from './hoverIntent.js';
new HoverIntent({ new HoverIntent({
elem, elem,
over() { over() {
@ -21,4 +22,4 @@
tooltip.hidden = true; tooltip.hidden = true;
} }
}); });
</script> </script>

22
1-js/02-b/1-b1/2-hoverintent/source/index.spec.html Executable file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine.css">
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/sinon.js/9.0.3/sinon.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/jasmine-html.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/3.5.0/boot.js"></script>
<link rel="stylesheet" href="style.css">
<script type="module" src="test.js"></script>
<div id="elem" class="clock">
<span class="hours">12</span> :
<span class="minutes">30</span> :
<span class="seconds">00</span>
</div>
<div id="tooltip" hidden>Tooltip</div>

30
1-js/02-b/1-b1/2-hoverintent/source/test.js
View file

@ -1,5 +1,6 @@
describe("hoverIntent", function() { import HoverIntent from './hoverIntent.js';
describe("hoverIntent", function() {
function mouse(eventType, x, y, options) { function mouse(eventType, x, y, options) {
let eventOptions = Object.assign({ let eventOptions = Object.assign({
bubbles: true, bubbles: true,
@ -16,14 +17,15 @@ describe("hoverIntent", function() {
let isOver; let isOver;
let hoverIntent; let hoverIntent;
let clock;
before(function() { beforeAll(function() {
this.clock = sinon.useFakeTimers(); clock = jasmine.clock().install();
}); });
after(function() { afterAll(function() {
this.clock.restore(); clock.uninstall();
}); });
@ -49,13 +51,13 @@ describe("hoverIntent", function() {
it("mouseover -> when the pointer just arrived, no tooltip", function() { it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
assert.isFalse(isOver); expect(isOver).toBeFalse();
}); });
it("mouseover -> after a delay, the tooltip shows up", function() { it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10); mouse('mouseover', 10, 10);
this.clock.tick(100); clock.tick(100);
assert.isTrue(isOver); expect(isOver).toBeTrue();
}); });
it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() { it("mouseover -> followed by fast mouseout leads doesn't show tooltip", function() {
@ -64,8 +66,8 @@ describe("hoverIntent", function() {
() => mouse('mouseout', 300, 300, { relatedTarget: document.body}), () => mouse('mouseout', 300, 300, { relatedTarget: document.body}),
30 30
); );
this.clock.tick(100); clock.tick(100);
assert.isFalse(isOver); expect(isOver).toBeFalse();
}); });
@ -77,8 +79,8 @@ describe("hoverIntent", function() {
i i
); );
} }
this.clock.tick(200); clock.tick(200);
assert.isTrue(isOver); expect(isOver).toBeTrue();
}); });
it("mouseover -> fast move -> no tooltip", function() { it("mouseover -> fast move -> no tooltip", function() {
@ -89,8 +91,8 @@ describe("hoverIntent", function() {
i i
); );
} }
this.clock.tick(200); clock.tick(200);
assert.isFalse(isOver); expect(isOver).toBeTrue();
}); });
}); });