diff --git a/js-core/classworks/classwork-15/index.html b/js-core/classworks/classwork-15/index.html index be9e294..4595002 100644 --- a/js-core/classworks/classwork-15/index.html +++ b/js-core/classworks/classwork-15/index.html @@ -1,12 +1,53 @@ - + + - - Lesson_15 + + Document + + + -

Classwork 15

+
+

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

+
    +
  1. +

    Вопрос 1

    +
      +
    • +
    • +
    • +
    +
  2. +
  3. +

    Вопрос 2

    +
      +
    • +
    • +
    • +
    +
  4. +
  5. +

    Вопрос 3

    +
      +
    • +
    • +
    • +
    +
  6. +
+
+ + - \ No newline at end of file diff --git a/js-core/classworks/classwork-15/main.js b/js-core/classworks/classwork-15/main.js index e69de29..786a69e 100644 --- a/js-core/classworks/classwork-15/main.js +++ b/js-core/classworks/classwork-15/main.js @@ -0,0 +1,122 @@ +const questions = [ + { + questionName: 'question 1', + answers: ['answer 1', 'answer 2', 'answer 3'], + correctAnswers: [1] + }, + { + questionName: 'question 2', + answers: ['answer 1', 'answer 2', 'answer 3'], + correctAnswers: [2] + }, + { + questionName: 'question 3', + answers: ['answer 1', 'answer 2', 'answer 3'], + correctAnswers: [1, 2] + } +]; + +const app = { + questions, + testName: 'Тест по программированию', + render() { + const main = this.newEl('main'); + const testName = this.newEl('h1'); + testName.textContent = this.testName; + const questionsList = this.newEl('ol'); + + const button = this.newEl('button'); + button.setAttribute('type', 'submit'); + button.textContent= 'Проверить результаты'; + + button.onclick = function(){//изменяем заголовок у второго вопроса + //console.log('clicked'); + //questionsList.children[1].children[0].textContent = 'Вопрос 9999'; + + if (questionsList.children[1].children[0].textContent == 'Вопрос 9999') { + questionsList.children[1].children[0].textContent = 'Вопрос 2'; + } else { + questionsList.children[1].children[0].textContent = 'Вопрос 9999'; + }; + console.log(questionsList.children[1].children[1].children[0].lastChild.checked); + let input = questionsList.children[1].children[1]; + + // по клику то чекед, то не чекед + input.children[0].firstElementChild.checked = !input.children[0].firstElementChild.checked;//toggle + input.children[2].firstElementChild.checked = !input.children[2].firstElementChild.checked; + + + for (let i = 0; i < questionsList.children.length; i++){ + console.log(questionsList.children[i].children[1].children[1].firstElementChild); + questionsList.children[i].children[1].children[1].firstElementChild.checked; + } + + console.dir(questionsList); + for (let i = 0; i < questionsList.children.length; i++){ + let title = questionsList.children[i].firstElementChild; + console.log(title); + title.setAttribute('style', 'background: red') + } + + let titles = document.querySelectorAll('h3');//это не массив, а коллекция элементов, у нее нет методов массивов + //только for-ом можно пройти + [...titles].forEach((item) => { //но вот так можно превратить ее в массив + item.setAttribute('style', 'background: green'); // и жизнь налаживается + }) +/* for (let i = 0; i < titles.length; i++){ //ну или фором + let title = titles[i]; + //console.log(title); + title.setAttribute('style', 'background: green') + }*/ + + + } + /*s + * + * this.renderQuestions() + * + * */ + this.questions.forEach(question => { + const li = this.newEl('li'); + const questionHeader = this.newEl('h3'); + questionHeader.textContent = question.questionName; + + const answers = this.newEl('ul'); + + question.answers.forEach((answer, answerIndex) => { + answers.appendChild(this.renderAnswer(answer, answerIndex)); + }); + + li.appendChild(questionHeader); + li.appendChild(answers); + questionsList.appendChild(li); + }); + + main.appendChild(testName); + main.appendChild(questionsList); + + main.appendChild(button); + + document.body.appendChild(main); + }, + renderAnswer(answer, answerIndex) { + const li = this.newEl('li'); + const label = this.newEl('label'); + const uniqId = `uniq_${Math.random()}_${answerIndex}`; + label.setAttribute('for', uniqId); + label.textContent = answer; + + const input = this.newEl('input'); + input.setAttribute('type', 'checkbox'); + input.setAttribute('id', uniqId); + + li.appendChild(input); + li.appendChild(label); + return li; + }, + newEl(elName) { + return document.createElement(elName); + } +}; + +app.render(); \ No newline at end of file diff --git a/js-core/homeworks/homework-15/css/main.css b/js-core/homeworks/homework-15/css/main.css new file mode 100644 index 0000000..7dc35c6 --- /dev/null +++ b/js-core/homeworks/homework-15/css/main.css @@ -0,0 +1,331 @@ +/** + * Description: main styles + * Version: 1.0.0 + * Last update: 09.01.2017 + * Author: alex.maslennikova19@gmail.com + */ +/*$breakpoints: ( + 'screen-xs': 480px, + 'screen-sm': 768px, + 'screen-md': 992px, + 'screen-lg': 1200px +); +// keywords +$media-expressions: ( + 'screen': 'screen', + 'print': 'print', + 'handheld': 'handheld', + 'landscape': '(orientation: landscape)', + 'portrait': '(orientation: portrait)', + 'retina2x': '(-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi)', + 'retina3x': '(-webkit-min-device-pixel-ratio: 2.5), (min-resolution: 240dpi)' +);*/ +.clearfix:after { + content: ''; + display: table; + clear: both; +} + +.ellipsis { + white-space: nowrap; + /* 1 */ + text-overflow: ellipsis; + /* 2 */ + overflow: hidden; +} + +a:hover, a:focus, a:active, a.active { + color: #777; + text-decoration: none; +} + +button { + outline-color: white; +} + +h2 { + margin: 0; +} + +h3 { + margin: 0; +} + +.container { + width: 400px; + background: #ccc; + padding: 25px; +} + +.top-radius { + border-top-left-radius: 30px; + border-top-right-radius: 30px; +} + +.bottom-radius { + border-bottom-left-radius: 30px; + border-bottom-right-radius: 30px; +} + +.header { + text-align: center; + margin-top: 20px; +} + +.main-nav { + display: flex; + justify-content: space-between; +} + +.keypad-holder { + width: 250px; + margin: 0 auto; + display: flex; + flex-wrap: wrap; + justify-content: space-around; +} + +.number { + margin: 0 auto; + width: 200px; + height: 50px; + margin-bottom: 20px; + border-bottom: 1px solid #eee; + display: flex; + justify-content: space-between; +} + +.number .numbers { + align-self: flex-end; +} + +.key { + width: 60px; + min-height: 60px; + padding: 15px 0; + border-radius: 50%; + border: 1px solid #fff; + text-align: center; + margin-bottom: 10px; + margin-left: 5px; + margin-right: 5px; + display: flex; + align-items: center; + justify-content: center; +} + +.key:last-child { + background: #4cda64; + color: #fff; +} + +.key:last-child:hover { + background: #348f3c; + border: 1px solid #fff; +} + +.key:hover { + background: rgba(0, 0, 0, 0.1); + border: 1px solid #777; +} + +.tab { + display: flex; + flex-direction: column; + align-items: center; +} + +.tab:hover, .tab:focus, .tab:active, .tab.active { + color: #777; + text-decoration: none; +} + +.tab-text { + font-size: 12px; + margin-top: 5px; +} + +.contacts tbody { + display: block; + max-height: 300px; + overflow: hidden; + overflow-y: auto; +} + +.contacts tr { + display: table; + width: 100%; + table-layout: fixed; +} + +.table > thead > tr > th { + border: none; +} + +.form-inline .form-control { + margin-bottom: 10px; + width: 100%; +} + +.form-inline .form-group { + display: block; +} + +.user-top-line { + display: flex; + justify-content: space-between; + margin-bottom: 20px; + font-size: 14px; +} + +.user-img { + width: 100px; + height: 100px; + margin-bottom: 10px; +} + +.user-name { + font-weight: bold; + text-align: center; + margin-bottom: 30px; +} + +.options-line { + display: flex; + justify-content: space-between; + text-align: center; + margin-bottom: 20px; +} + +.options-icon { + border-radius: 50%; + background: #000; + color: #fff; + width: 40px; + height: 40px; + margin: 0 auto 5px; + position: relative; +} + +.options-icon:hover { + background: #777; +} + +.options-text { + font-size: 12px; +} + +.message, .call, .video, .mail { + display: flex; + flex-direction: column; +} + +.icon { + position: absolute; + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); +} + +.tel-number { + margin-bottom: 20px; + font-size: 16px; +} + +.options-table { + margin-bottom: 20px; + font-size: 16px; +} + +.options-item { + padding: 10px 0; + border-bottom: 1px solid #777; +} + +.options-item:first-child { + border-top: 1px solid #777; +} + +.scroll-holder { + max-height: 300px; + overflow: hidden; + overflow-y: auto; + margin-bottom: 20px; +} + +.add-foto-btn { + width: 100px; + height: 100px; + border-radius: 50%; + border: 1px solid #eee; + outline: none; +} + +.add-btn { + border: 0; + background: transparent; + width: 100%; + text-align: left; + outline-color: gray; +} + +.done-btn { + background: transparent; + border: none; + outline: none; +} + +.done-btn:hover { + color: #777; +} + +.main-info-holder { + flex-grow: 1; +} + +.edit-main-info { + display: flex; + justify-content: space-between; + margin-bottom: 20px; +} + +.edit-foto { + margin-right: 10px; +} + +.edit-field { + padding: 5px 0; + border-bottom: 1px solid #fff; + width: 100%; + display: flex; +} + +.delete-btn { + color: #e32910; + margin-top: 3px; + margin-right: 10px; + border: none; + background: transparent; +} + +.delete-btn:hover, .delete-btn:focus, .delete-btn:active { + color: #a70b0f; +} + +.add-btn { + color: #4cda64; + margin-top: 3px; + margin-right: 10px; +} + +.add-btn:hover, .add-btn:focus, .add-btn:active { + color: #348f3c; +} + +.delete-contact { + color: #e32910; + margin: 0 auto; + font-weight: bold; +} \ No newline at end of file diff --git a/js-core/homeworks/homework-15/main.js b/js-core/homeworks/homework-15/main.js index e69de29..d64d7c2 100644 --- a/js-core/homeworks/homework-15/main.js +++ b/js-core/homeworks/homework-15/main.js @@ -0,0 +1,79 @@ +//TASK FROM PREVIOUS LESSON +/* +TASK 0. Найдите числа которые повторяются нечетное количество раз +в массиве*/ +let mySolution = function(arr) { + + let obj = arr.reduce((newItem, item) => { + if (newItem[item]) { + newItem[item] += 1; + } else { + newItem[item] = 1; + } + return newItem; + }, {}); + + let answer = []; + let keys = Object.keys(obj); + + keys.forEach((item) => { + if (obj[item] % 2 != 0) { + answer.push(item); + } + }) + + return answer; +} + + +console.log(mySolution([12, 23, 34, 12, 12, 23, 12, 45]))// -> [34 45] +console.log(mySolution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,])) //-> [4 100 5000] +console.log(mySolution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9]))// -> [6 5 9 21] +console.log(mySolution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42])) //-> [8 16 23 42] +console.log(mySolution([2, 2, 44, 44]))// => [] + + +//------------------------------------------------------------------------------------- +/* +TASK 0 +Проверьте что строка содержит все символы от "a" до "z" +*/ +const solution = str => { + let etalon = 'qwertyuioplkjhgfdsazxcvbnm'; + let etalonArr = etalon.split(''); + + let filteredArr = etalonArr.filter((item) => { + return str.includes(item); + }) + + if (filteredArr.length == etalonArr.length) { + return true; + } + return false; +}; + +console.log(solution("wyyga")) // false +console.log(solution("qwertyuioplkjhgfdsazxcvbnm")) // true +console.log(solution("ejuxggfsts")) // false +console.log(solution("qpwoeirutyalskdjfhgmznxbcv")) // true +console.log(solution("qqqqqqqqpwoeirutyallskkdjfhgmmznxbcv"))// true +console.log(solution("0123456789abcdefghijklmnop")) // false + +//------------------------------------------------------------------------------- +/* + 2. Напишите функция которая преобразовывает / открывает + скобки всех вложенных внутри массивов + Необходимо реализовать рекурсивный фызов функции. + Функция должна открывать любое количество + внутренних массивов и объектов + example: + [[1,2],[3,[4]],5, 10] => [1, 2, 3, 4, 5, 10] + [25, 10, [10, [15]]] => [25, 10, 10, 15] + [1, [2, [ {a: "b", c: 'd' }, { c: [1, 2, 5] } ] ] ] => [1, 2, {a: "b"}] + */ + +//#1 arr == [...] flattenedArray = [1] + flatten = [2, [{a: "b"}, { c: 'd' }]] +//#2 arr == [2, [ {a: "b"}, { c: 'd' } ] ] flattenedArray = [2] + flatten == [{a: "b"}, { c: 'd' }] +//#3 arr == [ {a: "b"}, { c: 'd' } ] flattenedArray = [{a: "b"}, { c: 'd' }] +//# +const flatten = arr => {}; \ No newline at end of file