Home Explore Help
Register Sign In
eugeniy.ho
/
javascript_practice
Watch 1
Star 0
Fork 0
Files Issues 12 Pull Requests 0 Wiki
Browse Source

homework14 done

holevchuk.evgeny 1 year ago
parent
eb0babf8e8
commit
ae0c5a35c2
10 changed files with 281 additions and 0 deletions
Split View Show Diff Stats
  1. 38 0
      hw14/PedestrianTrafficLight-stage2_3.html
  2. 48 0
      hw14/PedestrianTrafficLight-stage2_3.js
  3. 11 0
      hw14/domEventPromise.html
  4. 11 0
      hw14/domEventPromise.js
  5. 10 0
      hw14/speedtest.html
  6. 25 0
      hw14/speedtest.js
  7. 37 0
      hw14/trafficLight-stage2.html
  8. 38 0
      hw14/trafficLight-stage2.js
  9. 41 0
      hw14/trafficLight.html
  10. 22 0
      hw14/trafficLight.js

+ 38 - 0
hw14/PedestrianTrafficLight-stage2_3.html
View File 

@@ -0,0 +1,38 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+	<style>

+        #trafficLightId {

+            width: 50px;

+            display: flex;

+            flex-direction: column;

+        }

+

+        .traffic-light__element {

+            width: 100%;

+            height: 50px;

+            border: 4px solid black;

+            border-radius: 50%;

+        }

+

+        .red.on {

+            background-color: red;

+        }

+

+        .yellow.on {

+            background-color: yellow;

+        }

+

+        .green.on {

+            background-color: green;

+        }

+	</style>

+</head>

+<body>

+<div id="trafficLightId"></div>

+<button id="button" type="button">Переключить светофор</button>

+<script src="PedestrianTrafficLight-stage2_3.js"></script>

+</body>

+</html>

+ 48 - 0
hw14/PedestrianTrafficLight-stage2_3.js
View File 

@@ -0,0 +1,48 @@
 
+const domEventPromise = (element, eventName) => {

+	return new Promise((resolve, reject) => {

+		const handler = event => {

+			resolve(event);

+			element.removeEventListener(eventName, handler);

+		}

+		element.addEventListener(eventName, handler);

+	});

+}

+

+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));

+

+const toggleLight = (switcher, className) => {

+	const element = document.querySelector(className).classList;

+	switcher ? element.add('on') : element.remove('on');

+}

+

+const addDomElement = (element) => {

+	for(let i = 1; i <= 3; i++) {

+		const domElement = document.createElement(element);

+		domElement.classList.add('traffic-light__element');

+		if(i === 1) {

+			domElement.classList.add('green');

+		} else if (i === 2) {

+			domElement.classList.add('yellow');

+		} else {

+			domElement.classList.add('red');

+		}

+		trafficLightId.appendChild(domElement);

+	}

+}

+

+const trafficLight = async (domElement, delayGreen, delayYellow, delayRed) =>{

+	addDomElement(domElement);

+	while (true){

+		toggleLight(false,'.red');

+		toggleLight(true,'.green');

+		await Promise.race([delay(delayGreen), Promise.all([delay(1000), domEventPromise(button, 'click')])]);

+		toggleLight(false,'.green');

+		toggleLight(true,'.yellow');

+		await Promise.race([delay(delayYellow), Promise.all([delay(1000), domEventPromise(button, 'click')])]);

+		toggleLight(false,'.yellow');

+		toggleLight(true,'.red');

+		await Promise.race([delay(delayRed), Promise.all([delay(1000), domEventPromise(button, 'click')])]);

+	}

+}

+

+trafficLight('div',2000, 4000, 6000);

+ 11 - 0
hw14/domEventPromise.html
View File 

@@ -0,0 +1,11 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<button id="button" type="button">Шото</button>

+<script src="domEventPromise.js"></script>

+</body>

+</html>

+ 11 - 0
hw14/domEventPromise.js
View File 

@@ -0,0 +1,11 @@
 
+const domEventPromise = (element, eventName) => {

+	return new Promise((resolve, reject) => {

+		const handler = event => {

+            resolve(event);

+			element.removeEventListener(eventName, handler);

+		}

+		element.addEventListener(eventName, handler);

+	});

+}

+

+domEventPromise(button, 'click').then( e => console.log('event click happens', e))

+ 10 - 0
hw14/speedtest.html
View File 

@@ -0,0 +1,10 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+</head>

+<body>

+<script src="speedtest.js"></script>

+</body>

+</html>

+ 25 - 0
hw14/speedtest.js
View File 

@@ -0,0 +1,25 @@
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));

+

+const speedtest = async (getPromise, count, parallel= 1) => {

+	const t0 = performance.now();

+	for (let i = 1; i <= parallel; i++) {

+		for (let i = 1; i <= count; i++) {

+			await getPromise();

+		}

+	}

+	const t1 = performance.now();

+	let parallelDuration = parallel * count;

+	let duration = t1 - t0;

+	let parallelSpeed = parallelDuration / duration;

+	let queryDuration = duration / count;

+	let querySpeed = count / duration;

+	return {

+		duration,

+		querySpeed,

+		queryDuration,

+		parallelSpeed,

+		parallelDuration

+	}

+}

+

+speedtest(() => delay(1000), 10, 10 ).then(result => console.log(result));

+ 37 - 0
hw14/trafficLight-stage2.html
View File 

@@ -0,0 +1,37 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+	<style>

+		#trafficLightId {

+			width: 50px;

+			display: flex;

+			flex-direction: column;

+		}

+

+		.traffic-light__element {

+			width: 100%;

+			height: 50px;

+			border: 4px solid black;

+			border-radius: 50%;

+		}

+

+        .red.on {

+	        background-color: red;

+        }

+

+        .yellow.on {

+            background-color: yellow;

+        }

+

+        .green.on {

+            background-color: green;

+        }

+	</style>

+</head>

+<body>

+<div id="trafficLightId"></div>

+<script src="trafficLight-stage2.js"></script>

+</body>

+</html>

+ 38 - 0
hw14/trafficLight-stage2.js
View File 

@@ -0,0 +1,38 @@
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));

+

+const toggleLight = (switcher, className) => {

+	const element = document.querySelector(className).classList;

+	switcher ? element.add('on') : element.remove('on');

+}

+

+const addDomElement = (element) => {

+	for(let i = 1; i <= 3; i++) {

+		const domElement = document.createElement(element);

+		domElement.classList.add('traffic-light__element');

+		if(i === 1) {

+			domElement.classList.add('green');

+		} else if (i === 2) {

+			domElement.classList.add('yellow');

+		} else {

+			domElement.classList.add('red');

+		}

+		trafficLightId.appendChild(domElement);

+	}

+}

+

+const trafficLight = async (domElement, delayGreen, delayYellow, delayRed) =>{

+	addDomElement(domElement);

+	while (true){

+		toggleLight(false,'.red');

+		toggleLight(true,'.green');

+		await delay(delayGreen);

+		toggleLight(false,'.green');

+		toggleLight(true,'.yellow');

+		await delay(delayYellow);

+		toggleLight(false,'.yellow');

+		toggleLight(true,'.red');

+		await delay(delayRed);

+	}

+}

+

+trafficLight('div',2000, 4000, 6000);

+ 41 - 0
hw14/trafficLight.html
View File 

@@ -0,0 +1,41 @@
 
+<!DOCTYPE html>

+<html lang="en">

+<head>

+	<meta charset="UTF-8">

+	<title>Title</title>

+	<style>

+		.traffic-light {

+			width: 50px;

+			display: flex;

+			flex-direction: column;

+		}

+

+		.traffic-light__element {

+			width: 100%;

+			height: 50px;

+			border: 4px solid black;

+			border-radius: 50%;

+		}

+

+        .red.on {

+	        background-color: red;

+        }

+

+        .yellow.on {

+            background-color: yellow;

+        }

+

+        .green.on {

+            background-color: green;

+        }

+	</style>

+</head>

+<body>

+<div class="traffic-light">

+	<div class="traffic-light__element green"></div>

+	<div class="traffic-light__element yellow"></div>

+	<div class="traffic-light__element red"></div>

+</div>

+<script src="trafficLight.js"></script>

+</body>

+</html>

+ 22 - 0
hw14/trafficLight.js
View File 

@@ -0,0 +1,22 @@
 
+const delay = ms => new Promise(ok => setTimeout(() => ok(ms), ms));

+

+const toggleLight = (switcher, className) => {

+	const element = document.querySelector(className).classList;

+	switcher ? element.add('on') : element.remove('on');

+}

+

+const trafficLight = async () =>{

+	while (true){

+		toggleLight(false,'.red');

+		toggleLight(true,'.green');

+		await delay(2000);

+		toggleLight(false,'.green');

+		toggleLight(true,'.yellow');

+		await delay(4000);

+		toggleLight(false,'.yellow');

+		toggleLight(true,'.red');

+		await delay(6000);

+	}

+}

+

+trafficLight();