Jan 22, 2022 · Jan 20, 2022 · Jan 20, 2022
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/solution.view/index.html

 <body>

 Click on a list item to select it.
 Клікніть на елемент списку, щоб виділити його.
  <br>

  <ul id="ul">
    <li>Christopher Robin</li>
    <li>Winnie-the-Pooh</li>
    <li>Tigger</li>
    <li>Kanga</li>
    <li>Rabbit. Just rabbit.</li>
    <li>Крістофер Робін</li>
    <li>Вінні Пух</li>
    <li>Тигра</li>
    <li>Кенга</li>
    <li>Кролик. Просто кролик.</li>
  </ul>

  <script>

    }

    //prevent unneeded selection of list elements on clicks
    //запобігаємо непотрібному виділенню елементів списку при натисканні
    ul.onmousedown = function() {
      return false;
    };
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/source.view/index.html

 <body>

 Click on a list item to select it.
 Клікніть на елемент списку, щоб виділити його.
  <br>

  <ul id="ul">
    <li>Christopher Robin</li>
    <li>Winnie-the-Pooh</li>
    <li>Tigger</li>
    <li>Kanga</li>
    <li>Rabbit. Just rabbit.</li>
    <li>Крістофер Робін</li>
    <li>Вінні Пух</li>
    <li>Тигра</li>
    <li>Кенга</li>
    <li>Кролик. Просто кролик.</li>
  </ul>

  <script>
    // ...your code...
    // ...ваш код...
  </script>

 </body>
diff --git a/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md b/2-ui/3-event-details/1-mouse-events-basics/01-selectable-list/task.md

 ---

 #Selectable list
 #Список для виділення

 Create a list where elements are selectable, like in file-managers.
 Створіть список, де елементи можна виділити, як у файлових менеджерах.

 -A click on a list element selects only that element (adds the class`.selected`),deselects all others.
 -If a click is made with`key:Ctrl` (`key:Cmd`for Mac),then the selection is toggled on the element, but other elements are not modified.
 -Клік на елементі списку виділяє лише цей елемент (додає клас`.selected`),знімає виділення з усіх інших.
 -Якщо клікнути за допомогою`key:Ctrl` (`key:Cmd`для Mac),тоді виділення елемента перемикається, але інші елементи не змінюються.

 The demo:
 Демо:

 [iframe border="1" src="solution" height=180]

 P.S.For this task we can assume that list items are text-only. No nested tags.
 P.S.Для цього завдання ми можемо припустити, що елементи списку є лише текстовими. Немає вкладених тегів.

 P.P.S.Prevent the native browser selection of the text on clicks.
 P.P.S.Спробуйте запобігти виділенню тексту в браузері за кліками.
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,15 +16,15 @@

		<body>

		Click on a list item to select it.
		Клікніть на елемент списку, щоб виділити його.
		<br>

		<ul id="ul">
		<li>Christopher Robin</li>
		<li>Winnie-the-Pooh</li>
		<li>Tigger</li>
		<li>Kanga</li>
		<li>Rabbit. Just rabbit.</li>
		<li>Крістофер Робін</li>
		<li>Вінні Пух</li>
		<li>Тигра</li>
		<li>Кенга</li>
		<li>Кролик. Просто кролик.</li>
		</ul>

		<script>
Expand All		@@ -39,7 +39,7 @@

		}

		//prevent unneeded selection of list elements on clicks
		//запобігаємо непотрібному виділенню елементів списку при натисканні
		ul.onmousedown = function() {
		return false;
		};
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,19 +16,19 @@

		<body>

		Click on a list item to select it.
		Клікніть на елемент списку, щоб виділити його.
		<br>

		<ul id="ul">
		<li>Christopher Robin</li>
		<li>Winnie-the-Pooh</li>
		<li>Tigger</li>
		<li>Kanga</li>
		<li>Rabbit. Just rabbit.</li>
		<li>Крістофер Робін</li>
		<li>Вінні Пух</li>
		<li>Тигра</li>
		<li>Кенга</li>
		<li>Кролик. Просто кролик.</li>
		</ul>

		<script>
		// ...your code...
		// ...ваш код...
		</script>

		</body>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -2,17 +2,17 @@ importance: 5

		---

		#Selectable list
		#Список для виділення

		Create a list where elements are selectable, like in file-managers.
		Створіть список, де елементи можна виділити, як у файлових менеджерах.

		-A click on a list element selects only that element (adds the class`.selected`),deselects all others.
		-If a click is made with`key:Ctrl` (`key:Cmd`for Mac),then the selection is toggled on the element, but other elements are not modified.
		-Клік на елементі списку виділяє лише цей елемент (додає клас`.selected`),знімає виділення з усіх інших.
		-Якщо клікнути за допомогою`key:Ctrl` (`key:Cmd`для Mac),тоді виділення елемента перемикається, але інші елементи не змінюються.

		The demo:
		Демо:

		[iframe border="1" src="solution" height=180]

		P.S.For this task we can assume that list items are text-only. No nested tags.
		P.S.Для цього завдання ми можемо припустити, що елементи списку є лише текстовими. Немає вкладених тегів.

		P.P.S.Prevent the native browser selection of the text on clicks.
		P.P.S.Спробуйте запобігти виділенню тексту в браузері за кліками.