diff --git a/Exercise1/index.html b/Exercise1/index.html new file mode 100644 index 0000000..bff0b5a --- /dev/null +++ b/Exercise1/index.html @@ -0,0 +1,13 @@ + + + + + + Request + + + + + + + \ No newline at end of file diff --git a/Exercise1/script.js b/Exercise1/script.js new file mode 100644 index 0000000..baad499 --- /dev/null +++ b/Exercise1/script.js @@ -0,0 +1,14 @@ +var Name = prompt('Введите ваше имя'); +var reg = /\d/g; +if (Name.match(reg) === null) { + function reverse(Name) { + return Name.split("").reverse().join(""); + } + alert(reverse(Name)); +} +else { + function toUpperCase(Name) { + return Name.split('').map((v, i) => i % 2 == 0 ? v.toLowerCase() : v.toUpperCase()).join(''); + } + alert(toUpperCase(Name)); +} \ No newline at end of file diff --git a/Exercise2/css/FirstStyle.css b/Exercise2/css/FirstStyle.css new file mode 100644 index 0000000..571694e --- /dev/null +++ b/Exercise2/css/FirstStyle.css @@ -0,0 +1,47 @@ +.ButtonLink{ + height: 100px; + width: 100px; + background-color: blue; +} +.ButtonStyle{ + height: 100px; + width: 100px; + background-color: green; +} + + +.ButtonMaket{ + height: 100px; + width: 100px; + background-color: yellow; +} +.container{ + display: flex; + justify-content: center; + align-items: center; + flex-flow: wrap; + width: 100%; + height: 1000px; + background-color: wheat; +} +.Top{ + display: flex; + justify-content: center; + align-items: center; + height: 100px; + width: 100%; + background-color: brown; + font-weight: 700; + font-size: 50px; +} +.Bottom{ + display: flex; + justify-content: center; + align-items: center; + height: 100px; + width: 100%; + background-color: violet; + font-weight: 700; + font-size: 50px; +} + diff --git a/Exercise2/css/SecondStyle.css b/Exercise2/css/SecondStyle.css new file mode 100644 index 0000000..5ccad13 --- /dev/null +++ b/Exercise2/css/SecondStyle.css @@ -0,0 +1,45 @@ +.ButtonLink{ + height: 100px; + width: 100px; + background-color: blue; +} +.ButtonStyle{ + height: 100px; + width: 100px; + background-color: green; +} +.ButtonMaket{ + height: 100px; + width: 100px; + background-color: yellow; +} +.container{ + display: flex; + justify-content: center; + align-items: center; + flex-flow: wrap; + width: 100%; + height: 1000px; + background-color: white; +} +.Top{ + display: flex; + justify-content: center; + align-items: center; + height: 100px; + width: 100%; + background-color: aqua; + font-weight: 700; + font-size: 50px; +} +.Bottom{ + display: flex; + justify-content: center; + align-items: center; + height: 100px; + width: 100%; + background-color: cornflowerblue; + font-weight: 700; + font-size: 50px; +} + diff --git a/Exercise2/css/ThirdStyle.css b/Exercise2/css/ThirdStyle.css new file mode 100644 index 0000000..b2f92ac --- /dev/null +++ b/Exercise2/css/ThirdStyle.css @@ -0,0 +1,72 @@ +*{ + margin: 0; +} +.Container{ + width: 100%; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-flow: wrap; + flex-flow: wrap; + -ms-flex-line-pack: start; + align-content: flex-start; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.Header{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + width: 100%; + height: 10%; + background-color: rgba(0,0,0,0.7); + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + margin-bottom: 0.9%; +} + +.Body{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + height: 77%; + background-color: rgba(0,0,0,0.3); + border-radius: 10px; + margin-bottom: 10px; + font-size: 50px; + font-weight: bold; +} + + +.Footer{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + width: 100%; + height: 10%; + background-color: black; + color: white; + border-top-left-radius: 10px; + border-top-right-radius: 10px; +} \ No newline at end of file diff --git a/Exercise2/index.html b/Exercise2/index.html new file mode 100644 index 0000000..a57b64f --- /dev/null +++ b/Exercise2/index.html @@ -0,0 +1,24 @@ + + + + + + Three Buttons + + + +
+
+ Top +
+ + + + +
+ Bottom +
+
+ + + \ No newline at end of file diff --git a/Exercise2/js/index.js b/Exercise2/js/index.js new file mode 100644 index 0000000..fe0f4bb --- /dev/null +++ b/Exercise2/js/index.js @@ -0,0 +1,36 @@ +document.getElementsByClassName("ButtonLink")[0].onclick = function () { window.open("https://vk.com/white_power69", "_blank") } +document.getElementsByClassName("ButtonStyle")[0].onclick = function () { + var el = document.querySelector("Link"); + if (el.className == "Slava") { + el.href = "./css/SecondStyle.css"; + el.className = "NotSlava"; + } + else { + el.href = "./css/FirstStyle.css"; + el.className = "Slava"; + } +} +document.getElementsByClassName("ButtonMaket")[0].onclick = function () { + var Cont = document.querySelector(".container") + Cont.remove(); + var el = document.querySelector("Link"); + el.href = "./css/ThirdStyle.css"; + var Body = document.body; + var Container = document.createElement("div"); + Body.appendChild(Container); + Container.className = "Container"; + var Header = document.createElement("div"); + Body.appendChild(Header); + Header.className = "Header"; + var Telo = document.createElement("div"); + Body.appendChild(Telo); + Telo.className = "Body"; + var pTelo = document.createElement("p"); + pTelo.innerHTML = "Otrisovka maketa flexbox"; + Telo.appendChild(pTelo); + var Footer = document.createElement("div"); + Body.appendChild(Footer); + Footer.className = "Footer"; + +} + diff --git a/README.md b/README.md deleted file mode 100644 index 0eb0049..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# ORMEDIA \ No newline at end of file