Skip to content

Hw5 #6

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
dadika123 wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Hw5 #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
c20891c
homework
dadika123 Sep 1, 2020
dfd082e
hw3
dadika123 Sep 11, 2020
84b9da4
hw3 all
dadika123 Sep 11, 2020
c4c54fe
hw2
dadika123 Sep 11, 2020
4ace997
hw6
Sep 22, 2020
d569106
hw5
Sep 22, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions hw5/задания 1 уровня/1 поиск элементов на странице/1-поиск_по_id.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#" id="four">link4</a>

<!-- Задание. Используя поиск по id, получите ссылку с текстом link4
и выведите ее в консоль. -->

<script>
var fourId = document.getElementById("four");
console.log(fourId);
</script>
</body>

</html>
28 changes: 28 additions & 0 deletions hw5/задания 1 уровня/1 поиск элементов на странице/2-поиск_по_имени_класса.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<p class="one">параграф 1</p>
<p>параграф</p>
<p class="one">параграф 2</p>
<h3 class="one">заголовок 1</h3>
<h3>заголовок 2</h3>

<!-- Задание. Используя поиск по имени класса, получите все элементы с классом .one
и выведите их в консоль. -->

<script>
var classOne = document.getElementsByClassName("one");
for (let index = 0; index < classOne.length; index++) {
console.log(classOne[index]);
}
</script>
</body>

</html>
39 changes: 39 additions & 0 deletions hw5/задания 1 уровня/1 поиск элементов на странице/3-поиск_всех_элементов_по_селектору.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>

<div class="card" style="width: 18rem;">
<div class="card-body">
<h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
<p class="card-text">
Some quick example text to build on the card title and make up the bulk of the card's
content.
</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>

<!-- Задание. Используя поиск по селектору (метод querySelectorAll) найдите только те ссылки с
классом .card-link, которые находятся в .card-body
и выведите их в консоль. -->

<script>
var cardsInBody = document.querySelectorAll(".card-body > .card-link");
for (let index = 0; index < cardsInBody.length; index++) {
console.log(cardsInBody[index]);
}
</script>
</body>

</html>
40 changes: 40 additions & 0 deletions hw5/задания 1 уровня/1 поиск элементов на странице/4-поиск_одного_элемента_по_селектору.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="progress">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0"
aria-valuemax="100"></div>
</div>
<div class="progress">
<div class="progress-bar" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0"
aria-valuemax="100"></div>
</div>

<!-- Задание. Используя поиск по селектору (метод querySelector) найдите div с атрибутом
aria-valuenow="50" и выведите его в консоль. -->

<script>
var ariaValueFifty = document.querySelector('div[aria-valuenow = "50"]');
console.log(ariaValueFifty);
</script>
</body>

</html>
18 changes: 18 additions & 0 deletions hw5/задания 1 уровня/1 поиск элементов на странице/5-название_вкладки.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Страница 1</title>
</head>

<body>
<!-- Задание. Выведите содержимое тега title в консоль. -->

<script>
console.log(document.title);
</script>
</body>

</html>
37 changes: 37 additions & 0 deletions hw5/задания 1 уровня/2 класс node/1-получение_родительского_узла.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="media">
<img src="..." class="align-self-start mr-3" alt="...">
<div class="media-body">
<h5 class="mt-0">Top-aligned media</h5>
<p>
Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus
odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate
fringilla. Donec lacinia congue felis in faucibus.
</p>
<p>
Donec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus
et
magnis dis parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>

<!-- Задание. Обратитесь к элементу с классом .mt-0 и получите его родителя - элемент с
классом .media-body. -->

<script>
let classMt0 = document.getElementsByClassName("mt-0");
console.log(classMt0[classMt0.length - 1].parentElement);
</script>
</body>

</html>
28 changes: 28 additions & 0 deletions hw5/задания 1 уровня/2 класс node/2-добавление_элемента_с_appendChild.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>

<div>

</div>

<!-- Задание. Добавьте в div c помощью appendChild следующую разметку:
<h3>hello world</h3>
-->

<script>
let objDiv = document.querySelector("div");
let innerObj = document.createElement('h3');
innerObj.innerHTML = "hello world";
objDiv.appendChild(innerObj);
</script>
</body>

</html>
32 changes: 32 additions & 0 deletions hw5/задания 1 уровня/2 класс node/3-удаление_узлов.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>

<!-- Задание.
1. Найдите элемент с классом .btn-outline-warning и удалите его.
2. Аналогичным образом удалите элемент с классом .btn-outline-dark -->

<script>
let deleteBtn = document.querySelector('.btn-outline-warning');
deleteBtn.remove();
deleteBtn = document.querySelector('.btn-outline-dark');
deleteBtn.remove();
</script>
</body>

</html>
31 changes: 31 additions & 0 deletions hw5/задания 1 уровня/2 класс node/4-замена_текста_в_элементе.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>

<button type="button" class="btn btn-link">Link</button>

<!-- Задание. Найдите кнопку с классом .btn-info и сделайте текст в кнопке: "Кнопка".-->

<script>
let btnInfo = document.querySelector('.btn-info');
btnInfo.innerHTML = 'Кнопка';
console.log(btnInfo);
</script>
</body>

</html>
23 changes: 23 additions & 0 deletions hw5/задания 1 уровня/3 работа с атрибутами/1-добавление_классов.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul>
<li>list item</li>
<li>list item</li>
<li>list item</li>
<li>list item</li>
</ul>

<!-- Задание. Найдите тег ul. И добавьте ему класс one. -->

<script>
let ul = document.querySelector('ul');
ul.setAttribute("class", "one");
</script>
</body>
</html>
26 changes: 26 additions & 0 deletions hw5/задания 1 уровня/3 работа с атрибутами/2-toggle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Active</a>
</li>
</ul>

<!-- Задание. Найдите элемент с классом .nav-link и используя метод toggle из свойства classList
у элемента, добавьте или уберите класс .active. -->
<script>
let navLink = document.querySelector('.nav-link');
navLink.classList.toggle("active");
navLink.classList.toggle("active");
</script>
</body>

</html>
32 changes: 32 additions & 0 deletions hw5/задания 1 уровня/3 работа с атрибутами/3-удаление_классов.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown"
aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="menu dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>

<!-- Задание. Найдите элемент с классом .dropdown-menu и удалите этот класс, используя свойство classList
у элемента, и метод remove(). -->

<script>
let dropdownMenu = document.querySelector('.dropdown-menu');
dropdownMenu.classList.remove('dropdown-menu');
</script>
</body>

</html>
Loading