diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html new file mode 100644 index 0000000..0b41238 --- /dev/null +++ b/js-core/homeworks/homework-14/index.html @@ -0,0 +1,34 @@ + + + + + Homework-14 верстка + + + +
+

Тест по программированию

+
+
+
+ Вариант ответа №1
+ Вариант ответа №2
+ Вариант ответа №3
+
+
+
+ Вариант ответа №1
+ Вариант ответа №2
+ Вариант ответа №3
+
+
+
+ Вариант ответа №1
+ Вариант ответа №2
+ Вариант ответа №3
+
+ +
+
+ + \ No newline at end of file diff --git a/js-core/homeworks/homework-14/index2.html b/js-core/homeworks/homework-14/index2.html new file mode 100644 index 0000000..b49688b --- /dev/null +++ b/js-core/homeworks/homework-14/index2.html @@ -0,0 +1,11 @@ + + + + + Homework-14 + + + + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-14/src/main.js b/js-core/homeworks/homework-14/src/main.js new file mode 100644 index 0000000..37c6d3a --- /dev/null +++ b/js-core/homeworks/homework-14/src/main.js @@ -0,0 +1,97 @@ +/* +TASK 0. Найдите числа которые повторяются нечетное количество раз +в массиве + solution([12, 23, 34, 12, 12, 23, 12, 45]) -> [34 45] + solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,]) -> [4 100 5000] + solution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9]) -> [6 5 9 21] + solution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42]) -> [8 16 23 42] + solution([2, 2, 44, 44]) => [] +*/ + + +const someWebpackModule = `module.exports = { + context: %%HOMEDIR%, + entry: { + app: "%%HOMEDIR%%/%%APP_DIR%%/%%APPNAME%%.js" + }, + output: { + path: %%HOMEDIR%% + '/app', + filename: "dist/[%%APPNAME%%].js", + library: '[%%APPNAME%%]' + } + }`; + +/* TASK - 1 +Распарсите строку и замените + %%HOMEDIR%% -> './JavaScript-Basic' + %%APP_DIR%% -> 'fixtures/src' + %%APPNAME%% -> 'app.js' + Вам нужно написать функцию которая в зависимости от разных параметров + будет изменять заданные значения на необходимые вам + Сделайте несколько вызовов данной функции + * + * */ + + + + +/* + TASK - 2 + Сделайте разметку как скриншоте используя HTML + вам необходимо использовать тэги(!) +*/ + + + + +/* +TASK 3 + JavaScript => + Создать объект с методами, которые будут динамически генерировать DOM + Это будет тест, который мы будем разрабатывать в следующих заданиях. + Сейчас вам нужно только динамически создать html, + методы должны храниться в одном объекте. + Изначально на странице должен быть только , + вызывая методы объекта нужно создать dom-элементы +*/ + +// app.render(); + +class App { + constructor () { + this.title = 'Тест по программированию'; + this.labelContent = ['Вопрос №1', 'Вопрос №2', 'Вопрос №3']; + this.inputContent = [ + ['Вариант ответа №1', 'Вариант ответа №2', 'Вариант ответа №3'], + ['Вариант ответа №1', 'Вариант ответа №2', 'Вариант ответа №3'], + ['Вариант ответа №1', 'Вариант ответа №2', 'Вариант ответа №3'], + ] + } + render() { + const div = document.createElement('div'); + div.setAttribute('class', 'test'); + const h1 = document.createElement('h1'); + h1.textContent = this.title; + div.appendChild(h1); + const form = document.createElement('form'); + div.appendChild(form); + for (let i = 0; i < this.labelContent.length; i++) { + const fieldset = document.createElement('fieldset'); + const label = document.createElement('label'); + label.textContent = this.labelContent[i]; + fieldset.appendChild(label); + for ( let j = 0; j < this.inputContent[i].length; j ++) { + const input = document.createElement('input'); + input.textContent = this.inputContent[i][j]; + input.setAttribute('type', 'checkbox'); + fieldset.appendChild(input); + } + form.appendChild(fieldset); + } + document.body.appendChild(div); + } + +} + +const app = new App(); +app.render(); \ No newline at end of file diff --git a/js-core/homeworks/homework-14/style.css b/js-core/homeworks/homework-14/style.css new file mode 100644 index 0000000..91cdfbb --- /dev/null +++ b/js-core/homeworks/homework-14/style.css @@ -0,0 +1,44 @@ +* { + border: none; } + +body { + background: grey; } + body .test { + width: 60%; + height: 100%; + border: 1px solid black; + background: white; + margin: auto; + padding-top: 20px; + padding-bottom: 40px; } + @media (max-width: 768px) { + body .test { + width: 100%; } } + body .test h1 { + width: 100%; + text-align: center; + font-size: 18px; + color: black; + margin: 40px; } + body .test form { + width: 80%; + margin: auto; } + body .test form fieldset { + margin-bottom: 30px; } + body .test form label { + display: block; + margin-bottom: 10px; } + body .test form input { + padding-left: 10px; + box-sizing: border-box; } + body .test form button { + display: block; + width: auto; + height: 40px; + padding: 0 20px; + border: 1px solid black; + background: cornflowerblue; + margin: auto; + font-size: 16px; } + +/*# sourceMappingURL=style.css.map */ diff --git a/js-core/homeworks/homework-14/style.css.map b/js-core/homeworks/homework-14/style.css.map new file mode 100644 index 0000000..dd839d9 --- /dev/null +++ b/js-core/homeworks/homework-14/style.css.map @@ -0,0 +1,7 @@ +{ +"version": 3, +"mappings": "AAAA,CAAE;EACA,MAAM,EAAE,IAAI;;AAGd,IAAK;EACH,UAAU,EAAE,IAAI;EAChB,UAAM;IACJ,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,IAAI;IACZ,MAAM,EAAE,eAAe;IACvB,UAAU,EAAE,KAAK;IACjB,MAAM,EAAE,IAAI;IACZ,WAAW,EAAE,IAAI;IACjB,cAAc,EAAE,IAAI;IACpB,yBAA0B;MAR5B,UAAM;QASF,KAAK,EAAE,IAAI;IAGb,aAAG;MACD,KAAK,EAAE,IAAI;MACX,UAAU,EAAE,MAAM;MAClB,SAAS,EAAE,IAAI;MACf,KAAK,EAAE,KAAK;MACZ,MAAM,EAAE,IAAI;IAEd,eAAK;MACH,KAAK,EAAE,GAAG;MACV,MAAM,EAAE,IAAI;MACZ,wBAAS;QACP,aAAa,EAAE,IAAI;MAErB,qBAAM;QACJ,OAAO,EAAE,KAAK;QACd,aAAa,EAAE,IAAI;MAErB,qBAAM;QACJ,YAAY,EAAE,IAAI;QAClB,UAAU,EAAE,UAAU;MAExB,sBAAO;QACL,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,IAAI;QACX,MAAM,EAAE,IAAI;QACZ,OAAO,EAAE,MAAM;QACf,MAAM,EAAE,eAAe;QACvB,UAAU,EAAE,cAAc;QAC1B,MAAM,EAAE,IAAI;QACZ,SAAS,EAAE,IAAI", +"sources": ["style.scss"], +"names": [], +"file": "style.css" +} \ No newline at end of file diff --git a/js-core/homeworks/homework-14/style.scss b/js-core/homeworks/homework-14/style.scss new file mode 100644 index 0000000..ae96ef8 --- /dev/null +++ b/js-core/homeworks/homework-14/style.scss @@ -0,0 +1,53 @@ +* { + border: none; +} + +body { + background: grey; + .test { + width: 60%; + height: 100%; + border: 1px solid black; + background: white; + margin: auto; + padding-top: 20px; + padding-bottom: 40px; + @media (max-width: 768px) { + width: 100%; + } + + h1 { + width: 100%; + text-align: center; + font-size: 18px; + color: black; + margin: 40px; + } + form { + width: 80%; + margin: auto; + fieldset { + margin-bottom: 30px; + } + label { + display: block; + margin-bottom: 10px; + } + input { + padding-left: 10px; + box-sizing: border-box; + } + button { + display: block; + width: auto; + height: 40px; + padding: 0 20px; + border: 1px solid black; + background: cornflowerblue; + margin: auto; + font-size: 16px; + } + } + + } +}