lesson6/script.js at master · KovaletsIvan/lesson6 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
// Task1

//document.getElementById("test").innerHTML = "last";

document.getElementsByTagName("div")[0].innerHTML = "last";

// Task 2

let cat = "images/cat.jpg";
document.getElementsByTagName("img")[0].src = cat;

alert(cat);

// Task 3

/*let div = document.getElementById("text");
let elem = div.getElementsByTagName("p");
for (let i = 0; i < elem.length; i++)
  console.log("Selector text", "" + [i], ":", elem[i].textContent);*/

let elem = document.querySelectorAll(".p");
for (let i = 0; i < elem.length; i++)
  console.log("Selector text", "" + [i], ":", elem[i].textContent);

// Task 4

let list = document.getElementById("list");
let elemList = list.getElementsByTagName("li");
console.log(
  elemList[0].textContent,
  elemList[elemList.length - 1].textContent,
  elemList[1].textContent,
  elemList[3].textContent,
  elemList[2].textContent
);
// 2
let li = document.querySelectorAll("li");

console.log(
  li[0].textContent,
  elemList[elemList.length - 1].textContent,
  li[0].nextElementSibling.textContent,
  elemList[3].textContent,
  elemList[3].previousElementSibling.textContent
);

// Task 5

let bigHeader = document.querySelectorAll("h1");
bigHeader[0].style.backgroundColor = "green";

let paragraf = document.querySelectorAll(".par");
for (let i = 0; i < paragraf.length; i++) {
  if (paragraf[i] == paragraf[0]) {
    paragraf[i].style.fontWeight = "bold";
  }
  if (paragraf[i] == paragraf[1]) {
    paragraf[i].style.color = "red";
  }
  if (paragraf[i] == paragraf[2]) {
    paragraf[i].style.textDecoration = "underline";
  }
  if (paragraf[i] == paragraf[3]) {
    paragraf[i].style.fontStyle = "italic";
  }
}
let vertical = document.querySelectorAll(".horizontal");
for (let i = 0; i < vertical.length; i++) {
  vertical[i].style.display = "inline-block";
}
vertical[2].innerHTML = "vertical!";

vertical[2].innerHTML = "vertical!";

let invisible = document.getElementsByTagName("span");
invisible[0].style.display = "none";

// Task 6

var in1 = prompt("Enter Your First input");
var in2 = prompt("Enter Your Second Input");

let input1 = document.getElementById("input1");
input1.setAttribute("value", in1);

let input2 = document.getElementById("input2");
input2.setAttribute("value", in2);

input1.setAttribute("value", in2);
input2.setAttribute("value", in1);

// Task 7

document.getElementById("body");

let newMain = document.createElement("main");
newMain.className = "mainClass check item";
newMain.id = "main";
newMain.innerHTML;
body.prepend(newMain);

let main1 = document.getElementsByClassName("mainClass check item");
let newDiv = document.createElement("div");
newDiv.id = "myDiv";
newDiv.innerHTML;
main.append(newDiv);

let div = document.getElementById("myDiv");
let newP = document.createElement("p");
newP.innerHTML = "First paragraf";
div.prepend(newP);

console.log(document.body);