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

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

@ -1,3 +1,10 @@
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() {
it("leaves an empty line as is", function() {
assert.equal(camelize(""), "");
expect(camelize("")).toEqual("");
});
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() {
assert.equal(camelize("list-style-image"), "listStyleImage");
expect(camelize("list-style-image")).toEqual("listStyleImage");
});
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({
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
// with things that you'll need anyway
class HoverIntent {
export default class HoverIntent {
constructor({
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);
// continue from this point
}
onMouseOver(event) {
console.error(console.log);
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">
<script src="hoverIntent.js"></script>
<div id="elem" class="clock">
<span class="hours">12</span> :
@ -9,7 +8,9 @@
<div id="tooltip" hidden>Tooltip</div>
<script>
<script type="module">
import HoverIntent from './hoverIntent.js';
new HoverIntent({
elem,
over() {
@ -21,4 +22,4 @@
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) {
let eventOptions = Object.assign({
bubbles: true,
@ -16,14 +17,15 @@ describe("hoverIntent", function() {
let isOver;
let hoverIntent;
let clock;
before(function() {
this.clock = sinon.useFakeTimers();
beforeAll(function() {
clock = jasmine.clock().install();
});
after(function() {
this.clock.restore();
afterAll(function() {
clock.uninstall();
});
@ -49,13 +51,13 @@ describe("hoverIntent", function() {
it("mouseover -> when the pointer just arrived, no tooltip", function() {
mouse('mouseover', 10, 10);
assert.isFalse(isOver);
expect(isOver).toBeFalse();
});
it("mouseover -> after a delay, the tooltip shows up", function() {
mouse('mouseover', 10, 10);
this.clock.tick(100);
assert.isTrue(isOver);
clock.tick(100);
expect(isOver).toBeTrue();
});
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}),
30
);
this.clock.tick(100);
assert.isFalse(isOver);
clock.tick(100);
expect(isOver).toBeFalse();
});
@ -77,8 +79,8 @@ describe("hoverIntent", function() {
i
);
}
this.clock.tick(200);
assert.isTrue(isOver);
clock.tick(200);
expect(isOver).toBeTrue();
});
it("mouseover -> fast move -> no tooltip", function() {
@ -89,8 +91,8 @@ describe("hoverIntent", function() {
i
);
}
this.clock.tick(200);
assert.isFalse(isOver);
clock.tick(200);
expect(isOver).toBeTrue();
});
});