From 7b0d7e0e032aaf2e3e516b589284eb874422a9c0 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Fri, 20 Jul 2018 18:42:14 +0300 Subject: [PATCH 1/6] classwork_16 --- js-core/classworks/classwork-16/index.html | 12 ++++++++++++ js-core/classworks/classwork-16/main.js | 0 2 files changed, 12 insertions(+) create mode 100644 js-core/classworks/classwork-16/index.html create mode 100644 js-core/classworks/classwork-16/main.js diff --git a/js-core/classworks/classwork-16/index.html b/js-core/classworks/classwork-16/index.html new file mode 100644 index 0000000..5178533 --- /dev/null +++ b/js-core/classworks/classwork-16/index.html @@ -0,0 +1,12 @@ + + + + + Lesson_16 + + +

Classwork 16

+ + + + \ No newline at end of file diff --git a/js-core/classworks/classwork-16/main.js b/js-core/classworks/classwork-16/main.js new file mode 100644 index 0000000..e69de29 From b21ea4325653c3b9a2a2057d8112fd02d06c4e59 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Fri, 20 Jul 2018 21:13:53 +0300 Subject: [PATCH 2/6] classwork-16 --- js-core/classworks/classwork-16/main.js | 228 ++++++++++++++++++++++++ 1 file changed, 228 insertions(+) diff --git a/js-core/classworks/classwork-16/main.js b/js-core/classworks/classwork-16/main.js index e69de29..ee3ecd7 100644 --- a/js-core/classworks/classwork-16/main.js +++ b/js-core/classworks/classwork-16/main.js @@ -0,0 +1,228 @@ +const questions = [ + { + questionName: 'question 1', + answers: ['answer 1', 'answer 2', 'answer 3'], + correctAnswersIndexes: [1] + }, + { + questionName: 'question 2', + answers: ['answer 1', 'answer 2', 'answer 3'], + correctAnswersIndexes: [2] + }, + { + questionName: 'question 3', + answers: ['answer 1', 'answer 2', 'answer 3'], + correctAnswersIndexes: [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') + }*/ + + + } + /* + * 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)); + answers.innerHTML += 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;*/ + + //-----перепишем на innerHTML---------- + const uniqId = `uniq_${Math.random()}_${answerIndex}`; + + return `
  • + ${answer} + +
    • `; + + }, + + newEl(elName) { + return document.createElement(elName); + } +}; + +app.render(); + +//----------------CLASSWORK 16--------------------- +const main = document.querySelector('main'); +const span = document.createElement('span'); + +span.textContent = 'SPAN'; + +document.body.insertBefore(span, main); + + +//----------------------- +//по клику на кнопку перед каждым ответом вставить something +let newButton = document.createElement('button'); +newButton.textContent = 'NEW BUTTON'; +newButton.style.cssText = 'display:block; margin: 30px'; + +main.appendChild(newButton); + +newButton.onclick = function(){ + //по клику на кнопку перед каждым ответом вставить something + let ul_s = document.querySelectorAll('ul');//3 + + [...ul_s].forEach((item) => { + + let li_s = item.querySelectorAll('li'); + + [...li_s].forEach((value) => { + let something = document.createElement('span'); + something.textContent = 'something'; + item.insertBefore(something, value); + }) + + }) + + //по клику на кнопку возле каждого инпута вставить correct или incorrect + //на основании значения correctAnswers из массива questions: + + const findCorrectAnswer = (answerToValidate, questions) => { + let correctAnswers = questions.map(question => { + question.correctAnswersIndexes.map(answerIndex => { + return question.answers[answerIndex]; + }) + + }) + + + const labels = document.querySelectorAll('label'); + [...labels].forEach(label => { + const newSpan = document.createElement('span'); + + let labelStatus = findCorrectAnswer(label.textContent) ? 'CORRECT' : 'INCORRECT'; + newSpan.textContent = labelStatus; + label.parentElement.insertBefore(newSpan, label); + //console.log(findCorrectAnswer(label.textContent)); + }) + } + +//----insertAdjacentHTML, insertAdjacentElement---------------------- + +const body = document.body; + +main.insertAdjacentElement('afterBegin', newButton); + +//-----innerHTML---------------------------------------------------- +//берет или вставляет содержимое тега (то, что написано внутри тега, +//включая вложенные теги, если они там есть) + +//-----outerHTML---------------------------------------------------- +//берет или вставляет содержимое тега (то, что написано внутри тега, +//включая вложенные теги, если они там есть, и еще и сам себя покажет) + +//добавьте к бади что-то через innerHTML + +body.innerHTML += `
    some inner html
    `; + +//--добавьте список ниже текста--------- +const javaScriptOneLove = [ + 'Arrow', + 'Closures', + 'Classes' +]; + +let createList = arr => { + const renderItems = arr.map(item => + `
  • ${item}
    • ` + ).join(''); + + return `` +} + +body.innerHTML += createList(javaScriptOneLove); + +}//end of onclick function From da3e4aadd0303ebfc8bf477c7b2d0c1e5b5da90e Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sat, 21 Jul 2018 19:13:50 +0300 Subject: [PATCH 3/6] classwork 16 was modified --- js-core/classworks/classwork-16/main.js | 133 ++++++------ phoneApp/contacts.html | 152 ++++++++++++++ phoneApp/contacts.js | 260 ++++++++++++++++++++++++ 3 files changed, 486 insertions(+), 59 deletions(-) create mode 100644 phoneApp/contacts.html create mode 100644 phoneApp/contacts.js diff --git a/js-core/classworks/classwork-16/main.js b/js-core/classworks/classwork-16/main.js index ee3ecd7..de2928b 100644 --- a/js-core/classworks/classwork-16/main.js +++ b/js-core/classworks/classwork-16/main.js @@ -1,17 +1,17 @@ const questions = [ { - questionName: 'question 1', - answers: ['answer 1', 'answer 2', 'answer 3'], + questionName: 'вопрос 1', + answers: ['answer 1.1', 'answer 1.2', 'answer 1.3'], correctAnswersIndexes: [1] }, { - questionName: 'question 2', - answers: ['answer 1', 'answer 2', 'answer 3'], + questionName: 'вопрос 2', + answers: ['answer 2.1', 'answer 2.2', 'answer 2.3'], correctAnswersIndexes: [2] }, { - questionName: 'question 3', - answers: ['answer 1', 'answer 2', 'answer 3'], + questionName: 'вопрос 3', + answers: ['answer 3.1', 'answer 3.2', 'answer 3.3'], correctAnswersIndexes: [1, 2] } ]; @@ -45,13 +45,11 @@ const app = { 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); @@ -68,8 +66,6 @@ const app = { //console.log(title); title.setAttribute('style', 'background: green') }*/ - - } /* * this.renderQuestions() @@ -115,14 +111,13 @@ const app = { li.appendChild(label); return li;*/ - //-----перепишем на innerHTML---------- + //-----перепишем на innerHTML----------------------------- const uniqId = `uniq_${Math.random()}_${answerIndex}`; return `
  • - ${answer} - + +
    • `; - }, newEl(elName) { @@ -132,7 +127,7 @@ const app = { app.render(); -//----------------CLASSWORK 16--------------------- +//----------------CLASSWORK 16--------------------------- const main = document.querySelector('main'); const span = document.createElement('span'); @@ -142,6 +137,7 @@ document.body.insertBefore(span, main); //----------------------- +//добавить кнопку //по клику на кнопку перед каждым ответом вставить something let newButton = document.createElement('button'); newButton.textContent = 'NEW BUTTON'; @@ -149,7 +145,31 @@ newButton.style.cssText = 'display:block; margin: 30px'; main.appendChild(newButton); -newButton.onclick = function(){ +/* +* Все вопросы в DOM +* проходимся по каждому вопросу +* questions[DOMIndexQuestion] +* labelIndex +* +* */ +// label - 'answer 1.2' +// question.correctAnswers.includes(label) -- CORRECT + +const findCorrectAnswer = answerToValidate => { + let correctAnswers = questions.map(question => + question.correctAnswersIndexes.map(answerIndex => { + return question.answers[answerIndex]; + }) + ); + // correctAnswersIndexes: [1] before + // correctAnswersIndexes: ['answer 1.2'] after + + return correctAnswers.some(answer => { + return answer.includes(answerToValidate); + }); +}; + +newButton.onclick = () => { //по клику на кнопку перед каждым ответом вставить something let ul_s = document.querySelectorAll('ul');//3 @@ -168,61 +188,56 @@ newButton.onclick = function(){ //по клику на кнопку возле каждого инпута вставить correct или incorrect //на основании значения correctAnswers из массива questions: - const findCorrectAnswer = (answerToValidate, questions) => { - let correctAnswers = questions.map(question => { - question.correctAnswersIndexes.map(answerIndex => { - return question.answers[answerIndex]; - }) + const labels = document.querySelectorAll('label'); - }) + [...labels].forEach(label => { + const newSpan = document.createElement('span'); + const labelStatus = findCorrectAnswer(label.textContent) + ? 'CORRECT' + : 'INCORRECT'; + newSpan.textContent = labelStatus; + label.parentElement.insertBefore(newSpan, label); + //console.log(findCorrectAnswer(label.textContent)); + }) + - const labels = document.querySelectorAll('label'); - [...labels].forEach(label => { - const newSpan = document.createElement('span'); + //----insertAdjacentHTML, insertAdjacentElement---------------------- - let labelStatus = findCorrectAnswer(label.textContent) ? 'CORRECT' : 'INCORRECT'; - newSpan.textContent = labelStatus; - label.parentElement.insertBefore(newSpan, label); - //console.log(findCorrectAnswer(label.textContent)); - }) - } + const body = document.body; -//----insertAdjacentHTML, insertAdjacentElement---------------------- + main.insertAdjacentElement('afterBegin', newButton); -const body = document.body; + //-----innerHTML---------------------------------------------------- + //берет или вставляет содержимое тега (то, что написано внутри тега, + //включая вложенные теги, если они там есть) -main.insertAdjacentElement('afterBegin', newButton); + //-----outerHTML---------------------------------------------------- + //берет или вставляет содержимое тега (то, что написано внутри тега, + //включая вложенные теги, если они там есть, и еще и сам себя покажет) -//-----innerHTML---------------------------------------------------- -//берет или вставляет содержимое тега (то, что написано внутри тега, -//включая вложенные теги, если они там есть) + //добавьте к бади что-то через innerHTML -//-----outerHTML---------------------------------------------------- -//берет или вставляет содержимое тега (то, что написано внутри тега, -//включая вложенные теги, если они там есть, и еще и сам себя покажет) + body.innerHTML += `
    some inner html
    `; -//добавьте к бади что-то через innerHTML + //--добавьте список ниже текста--------- + const javaScriptOneLove = [ + 'Arrow', + 'Closures', + 'Classes' + ]; -body.innerHTML += `
    some inner html
    `; + let createList = arr => { + const renderItems = arr.map(item => + `
  • ${item}
    • ` + ).join(''); -//--добавьте список ниже текста--------- -const javaScriptOneLove = [ - 'Arrow', - 'Closures', - 'Classes' -]; - -let createList = arr => { - const renderItems = arr.map(item => - `
  • ${item}
    • ` - ).join(''); + return `
      + ${renderItems} +
    ` + } - return `
      - ${renderItems} -
    ` -} - -body.innerHTML += createList(javaScriptOneLove); + body.innerHTML += createList(javaScriptOneLove); }//end of onclick function + diff --git a/phoneApp/contacts.html b/phoneApp/contacts.html new file mode 100644 index 0000000..94be081 --- /dev/null +++ b/phoneApp/contacts.html @@ -0,0 +1,152 @@ + + + + + + + Contacts + + + + + + + + + + + + + \ No newline at end of file diff --git a/phoneApp/contacts.js b/phoneApp/contacts.js new file mode 100644 index 0000000..b51a16e --- /dev/null +++ b/phoneApp/contacts.js @@ -0,0 +1,260 @@ +'use strict'; +/////RENDER CONTACTS PAGE////////////////////////////////////////////// +const people = +[ + { + name: 'Иван', + lastName: 'Петров', + email: 'IvanPetrov@ec.ua' + }, + { + name: 'Сергей', + lastName: 'Сергеев', + email: 'SergeiSergeev@ec.ua' + }, + { + name: 'Иван', + lastName: 'Иванов', + email: 'IvanIvanov@ec.ua' + }, + { + name: 'Александр', + lastName: 'Александров', + email: 'AlexAlex@ec.ua' + }, + { + name: 'Алекс', + lastName: 'Смирнов', + email: 'AlexSmirnov@ec.ua' + }, + { + name: 'Сергей', + lastName: 'Волков', + email: 'VolkovSergey@ec.ua' + }, + { + name: 'Мария', + lastName: 'Шарапова', + email: 'MariyaSharapova@ec.ua' + }, + { + name: 'Александр', + lastName: 'Винник', + email: 'AlexVinnik@ec.ua' + }, + { + name: 'Дарий', + lastName: 'Смирнов', + email: 'DariySmirnov@ec.ua' + }, + { + name: 'Елена', + lastName: 'Лещенко', + email: 'ElenaLeshenko@ec.ua' + }, + { + name: 'Ольга', + lastName: 'Новикова', + email: 'OlgaNovikova@ec.ua' + }, + { + name: 'Наталья', + lastName: 'Шемякина', + email: 'ShemyakinaN@ec.ua' + }, + { + name: 'Анна', + lastName: 'Донцова', + email: 'AnnaDontsova@ec.ua' + }, + { + name: 'Влад', + lastName: 'Яма', + email: 'VladYama@ec.ua' + }, + { + name: 'Кира', + lastName: 'Воробьева', + email: 'Kira1990@ec.ua' + }, + { + name: 'Виктор', + lastName: 'Кривенко', + email: 'ViktorKriv@ec.ua' + } +]; + +const captions = ['Name', 'Last name', 'Email']; +const footerContent = [ + { + classImg: 'glyphicon glyphicon-search', + text: 'Contacts', + href: 'index.html', + additionalClass: 'active' + }, + { + classImg: 'glyphicon glyphicon-th', + text: 'Keypad', + href: 'keypad.html', + additionalClass: '' + }, + { + classImg: 'glyphicon glyphicon-pencil', + text: 'Edit contact', + href: 'edit-contact.html', + additionalClass: '' + }, + { + classImg: 'glyphicon glyphicon-user', + text: 'User', + href: 'user.html', + additionalClass: '' + }, + { + classImg: 'glyphicon glyphicon-plus', + text: 'Add user', + href: 'add-user.html', + additionalClass: '' + } +] + +const contactsPage = { + people, + pageTitle: 'Contacts', + render() { + const header = this.newEl('header', null, {className: 'header'}); + const main = this.newEl('main'); + const footer = this.newEl('footer'); + + /*creating header*/ + let headerDiv = this.newEl('div', null, {className: 'container top-radius'}); + let headerH2 = this.newEl('h2', 'Contacts'); + + headerDiv.appendChild(headerH2); + header.appendChild(headerDiv); + + /*creating main div*/ + let mainDiv = this.newEl('div', null, {className: 'container'}); + + /*creating form*/ + let form = this.newEl('form', null, {className: 'form-inline search-form'}); + let formDiv = this.newEl('div', null, {className: 'form-group'}); + let label = this.newEl('label', 'Search', {className: 'sr-only', forAttr: 'search'}); + let input = this.newEl('input', null, {className: 'form-control', typeAttr: 'text', idAttr:'search', placeholderAttr:'Search'}); + + main.appendChild(mainDiv); + mainDiv.appendChild(form); + form.appendChild(formDiv); + formDiv.appendChild(label); + formDiv.appendChild(input); + + /*creating table & table header*/ + let table = this.newEl('table', null, {className: 'table table-hover contacts'}); + let thead = this.newEl('thead'); + let headRow = this.newEl('tr'); + + captions.forEach((item) => { + let th = this.newEl('th', item); + headRow.appendChild(th); + }); + + mainDiv.appendChild(table); + table.appendChild(thead); + thead.appendChild(headRow); + + /*creating table content*/ + let tbody = this.newEl('tbody'); + + table.appendChild(tbody); + + people.forEach((item) => { + let tr = this.newEl('tr'); + + for (let key in item) { + if (key) { + let td = this.newEl('td', item[key]); + tr.appendChild(td); + } + }; + + tbody.appendChild(tr); + + }) + + /*creating footer content*/ + let footerDiv = this.newEl('div', null, {className: 'container bottom-radius'}); + let nav = this.newEl('div', null, {className: 'main-nav'}); + + footerContent.forEach((item) => { + let link = this.newEl('a', null, {className: `tab ${item.additionalClass}` , hrefAttr: item.href } ); + let spanImg = this.newEl('span', null, {className: item.classImg, hrefAttr: item.href, ariahiddenAttr: 'true' } ); + let spanText = this.newEl('span', item.text, {className: 'tab-text', hrefAttr: item.href } ); + + link.appendChild(spanImg); + link.appendChild(spanText); + + nav.appendChild(link); + }) + + + + footer.appendChild(footerDiv); + footerDiv.appendChild(nav); + + document.body.appendChild(header); + document.body.appendChild(main); + document.body.appendChild(footer); + }, + + + newEl(elName, elValue, attributes) { + + let element = document.createElement(elName); + + if (elValue) { + element.textContent = elValue; + }; + + if (attributes) { + this.setAttribute(element, attributes); + } + + return element; + + }, + + setAttribute(element, attributes) { + let {className, typeAttr, forAttr, idAttr, placeholderAttr, hrefAttr, ariahiddenAttr} = attributes; + +/* if (className) { + element.classList.add(className); + };*/ + if (className) { + element.setAttribute('class', className); + }; + + if (typeAttr) { + element.setAttribute('type', typeAttr); + }; + if (forAttr) { + element.setAttribute('for', forAttr); + }; + if (idAttr) { + element.setAttribute('id', idAttr); + }; + if (placeholderAttr) { + element.setAttribute('placeholder', placeholderAttr); + }; + if (hrefAttr) { + element.setAttribute('href', hrefAttr); + }; + if (ariahiddenAttr) { + element.setAttribute('aria-hidden', ariahiddenAttr); + }; + + return element; + } + +} + +contactsPage.render(); \ No newline at end of file From 5193c7b4899d2da3572cbfc07d15ff3b2c51c93f Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sun, 22 Jul 2018 01:46:21 +0300 Subject: [PATCH 4/6] hw_16 was partially done --- js-core/homeworks/homework-16/index.html | 12 ++ js-core/homeworks/homework-16/main.js | 150 +++++++++++++++++++++++ 2 files changed, 162 insertions(+) create mode 100644 js-core/homeworks/homework-16/index.html create mode 100644 js-core/homeworks/homework-16/main.js diff --git a/js-core/homeworks/homework-16/index.html b/js-core/homeworks/homework-16/index.html new file mode 100644 index 0000000..d2138fa --- /dev/null +++ b/js-core/homeworks/homework-16/index.html @@ -0,0 +1,12 @@ + + + + + Homework 16 + + +

    Homework 16

    + + + + \ No newline at end of file diff --git a/js-core/homeworks/homework-16/main.js b/js-core/homeworks/homework-16/main.js new file mode 100644 index 0000000..e7b1940 --- /dev/null +++ b/js-core/homeworks/homework-16/main.js @@ -0,0 +1,150 @@ +/* + 0 Алгоритмы + Реализуйте функцию которая будет превращать трехмерный массив + в двухмерный, а если массив двухмерный, тогда в трехмерный массив + + ИСПОЛЬЗУЙТЕ МЕТОДЫ МАССИВОВ ! + */ + +solution = arr => { + let counter = 0; + let resultArray = []; + + while (counter != arr[0].length) { + + let smallArray = arr.map(item => { // [1, 'a'] + return item[counter]; + }) + + resultArray.push(smallArray); + counter++; + } + + return resultArray; + +} + +//console.log(solution([ [1, 'a'], [2, 'b'], [3, 'c'] ])) //=> [ [1, 2, 3], [a, b, c] ]; +//console.log(solution([ [1, 3, 5], [2, 4, 6] ])) //=> [ [1, 2], [3, 4], [5, 6] ]; +//console.log(solution([[]]))// => [] +//console.log(solution([ [ [ ] ] ])) // = [ [] ] + +//---------------------------------------------------------------------- +/* +/* +

    Main

    ///// +
      +

      Catalog

      //// +
    • +
        +

        Comp

        //// +
          +
        • +

          Notebook

          +

          ...

          +
          • +
        + + + Визуализируйте массив, если в коллекции есть свойство + children, + тогда создайте вложенный лист + name - свойство h1 + children ul -> li + Используйте innerHTML + */ + +const navigation = [ + {name: 'Главная'}, + {name: 'Каталог', //h1 + children: [ //ul + {name: 'Компьютеры',//h1 + children: [ //li -> ul + {name: 'Ноутбуки'}, //li h1 + {name: 'Планшеты'} //li h1 + ] + } + ] + }, + {name: 'Профиль'} +]; + +const visualArray = arr => { + arr.forEach(item => { + + for (let key in item) { + + if (key == 'name') { + document.body.innerHTML += `

        ${item.name}

        `; + }; + + if (key == 'children') { + const map = item[key].map(child => { + + let res = '
          '; + + for (let key1 in child) { + + if (key1 == 'name') { + res += `

          ${child[key1]}

          `; + }; + + if (key1 == 'children') { + res += `
            +
          • ${child[key1][0].name}
            • +
          • ${child[key1][1].name}
            • +
              ` + } + + } + res += '
            '; + return res; + }) + + document.body.innerHTML += map; + } + + }; + + }) +}; +visualArray(navigation); + +//-------------------------------------------------------------------- +/* ТЕСТ */ + +/* +* Добавьте реальных вопросов про JavaScript с вариантами +* ответов +* */ + +// 3. При нажатии на кнопку если были выбраны правильные ответы, +// отображайте "ПРАВИЛЬНО" или не правильно +// или отображайте значек X или галочку, возле вопроса + + + +/* @SUPER-FRONT */ + +/* +* 4. По нажатию на кнопку(проверить) отобразится "модальное" окно в котором отобразится +* весь тест с отображенными правильными ответами(обозначьте их) и неправильными(тоже обозначьте) +* Отобразите количество правильных и неправильных ответов +* счетчик +* У модального окна будет 2 кнопки "пересдать" и "отправить" +* * +* Если все ответы правильные, кнопка пересдать не активна +* disabled +* +* По нажатию отправить, модальное окно закрывается и на экране надпись "ваши ответы успешно +* отправлены" +* +* --- Если все ответы правильные отобразите картинку +* +* По нажатию на пересдать - появляется снова наш тест сначала +* +* @Super-FRONT @ 2 +* При загрузке странице добавьте таймер отсчета с милисекундами -> В модальном окне отобразите +* количество затраченного времени на тест +* +* */ \ No newline at end of file From 2274bc734712a125bf20e8595da07986a85c9ab9 Mon Sep 17 00:00:00 2001 From: Nataliia Date: Mon, 23 Jul 2018 20:07:25 +0300 Subject: [PATCH 5/6] the test tast doesn't work --- js-core/homeworks/homework-16/main.js | 132 ++++++++++++++++++++++++++ 1 file changed, 132 insertions(+) diff --git a/js-core/homeworks/homework-16/main.js b/js-core/homeworks/homework-16/main.js index e7b1940..53fd7dd 100644 --- a/js-core/homeworks/homework-16/main.js +++ b/js-core/homeworks/homework-16/main.js @@ -122,6 +122,138 @@ visualArray(navigation); // отображайте "ПРАВИЛЬНО" или не правильно // или отображайте значек X или галочку, возле вопроса +const questions = [ + { + questionName: 'Сколько типов данных существует в Javascript?', + answers: ['Два', 'Пять', 'Там нет типов данных'], + correctAnswersIndexes: [1] + }, + { + questionName: 'Что вернет typeof null?', + answers: ['Object', 'null', 'undefined'], + correctAnswersIndexes: [0] + }, + { + questionName: 'Метод slice() можно применить к:', + answers: ['строкам', 'объектам', 'массивам'], + correctAnswersIndexes: [0, 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(){ + + const labels = document.querySelectorAll('label'); + const headers = document.querySelectorAll('h3'); + + [...labels].forEach(label => { + + [...headers].forEach(header => { + const newSpan = document.createElement('span'); + const headerStatus = findCorrectAnswer(label.textContent) + ? 'V' //если true + : 'Х'; //если false + newSpan.textContent = headerStatus; + header.insertAdjacentElement('afterEnd', newSpan); + }); + + }) + + } //oncklick function ends + + const findCorrectAnswer = answerToValidate => {// Пять + let correctAnswers = questions.map(question => //один объект + question.correctAnswersIndexes.map(answerIndex => { //один из массива правильных ответов, в массиве стоят индексы правильных ответов// 2 + //console.log(question.answers[answerIndex]); + return question.answers[answerIndex];//верни из массива ответов то значение, которое соответствует индексу из массива индексов + + }) + ); + + return correctAnswers.some(answer => { //вернет true or false + return answer.includes(answerToValidate); + }); + + }; + +/* const findCorrectAnswer = answerToValidate => {// Пять + let correctAnswers = questions.map(question => //один объект + question.correctAnswersIndexes.map(answerIndex => { //один из массива правильных ответов, в массиве стоят индексы правильных ответов// 2 + //console.log(question.answers[answerIndex]); + return question.answers[answerIndex];//верни из массива ответов то значение, которое соответствует индексу из массива индексов + + }) + ); + + return correctAnswers.some(answer => { //вернет true or false + return answer.includes(answerToValidate); + }); + + }; */ + + + /* + * this.renderQuestions() + * */ + + this.questions.forEach(question => { + const li = this.newEl('li'); + const questionHeader = this.newEl('h3'); + questionHeader.textContent = question.questionName; + questionHeader.style.cssText = 'display:inline-block; margin-right: 30px'; + + const answers = this.newEl('ul'); + + question.answers.forEach((answer, answerIndex) => { + //answers.appendChild(this.renderAnswer(answer, answerIndex)); + answers.innerHTML += 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 uniqId = `uniq_${Math.random()}_${answerIndex}`; + + return `
          • + + +
            • `; + }, + + newEl(elName) { + return document.createElement(elName); + } +}; + +app.render(); + +//----------------------- + + /* @SUPER-FRONT */ From 45ec4937fec1c7168276f025e51241a507cad2e9 Mon Sep 17 00:00:00 2001 From: Nataliia Protsenko Date: Sat, 28 Jul 2018 19:58:21 +0300 Subject: [PATCH 6/6] test was moved to the new branch --- js-core/homeworks/homework-16/main.js | 170 -------------------------- 1 file changed, 170 deletions(-) diff --git a/js-core/homeworks/homework-16/main.js b/js-core/homeworks/homework-16/main.js index 53fd7dd..51c717a 100644 --- a/js-core/homeworks/homework-16/main.js +++ b/js-core/homeworks/homework-16/main.js @@ -110,173 +110,3 @@ const visualArray = arr => { }; visualArray(navigation); -//-------------------------------------------------------------------- -/* ТЕСТ */ - -/* -* Добавьте реальных вопросов про JavaScript с вариантами -* ответов -* */ - -// 3. При нажатии на кнопку если были выбраны правильные ответы, -// отображайте "ПРАВИЛЬНО" или не правильно -// или отображайте значек X или галочку, возле вопроса - -const questions = [ - { - questionName: 'Сколько типов данных существует в Javascript?', - answers: ['Два', 'Пять', 'Там нет типов данных'], - correctAnswersIndexes: [1] - }, - { - questionName: 'Что вернет typeof null?', - answers: ['Object', 'null', 'undefined'], - correctAnswersIndexes: [0] - }, - { - questionName: 'Метод slice() можно применить к:', - answers: ['строкам', 'объектам', 'массивам'], - correctAnswersIndexes: [0, 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(){ - - const labels = document.querySelectorAll('label'); - const headers = document.querySelectorAll('h3'); - - [...labels].forEach(label => { - - [...headers].forEach(header => { - const newSpan = document.createElement('span'); - const headerStatus = findCorrectAnswer(label.textContent) - ? 'V' //если true - : 'Х'; //если false - newSpan.textContent = headerStatus; - header.insertAdjacentElement('afterEnd', newSpan); - }); - - }) - - } //oncklick function ends - - const findCorrectAnswer = answerToValidate => {// Пять - let correctAnswers = questions.map(question => //один объект - question.correctAnswersIndexes.map(answerIndex => { //один из массива правильных ответов, в массиве стоят индексы правильных ответов// 2 - //console.log(question.answers[answerIndex]); - return question.answers[answerIndex];//верни из массива ответов то значение, которое соответствует индексу из массива индексов - - }) - ); - - return correctAnswers.some(answer => { //вернет true or false - return answer.includes(answerToValidate); - }); - - }; - -/* const findCorrectAnswer = answerToValidate => {// Пять - let correctAnswers = questions.map(question => //один объект - question.correctAnswersIndexes.map(answerIndex => { //один из массива правильных ответов, в массиве стоят индексы правильных ответов// 2 - //console.log(question.answers[answerIndex]); - return question.answers[answerIndex];//верни из массива ответов то значение, которое соответствует индексу из массива индексов - - }) - ); - - return correctAnswers.some(answer => { //вернет true or false - return answer.includes(answerToValidate); - }); - - }; */ - - - /* - * this.renderQuestions() - * */ - - this.questions.forEach(question => { - const li = this.newEl('li'); - const questionHeader = this.newEl('h3'); - questionHeader.textContent = question.questionName; - questionHeader.style.cssText = 'display:inline-block; margin-right: 30px'; - - const answers = this.newEl('ul'); - - question.answers.forEach((answer, answerIndex) => { - //answers.appendChild(this.renderAnswer(answer, answerIndex)); - answers.innerHTML += 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 uniqId = `uniq_${Math.random()}_${answerIndex}`; - - return `
          • - - -
            • `; - }, - - newEl(elName) { - return document.createElement(elName); - } -}; - -app.render(); - -//----------------------- - - - - -/* @SUPER-FRONT */ - -/* -* 4. По нажатию на кнопку(проверить) отобразится "модальное" окно в котором отобразится -* весь тест с отображенными правильными ответами(обозначьте их) и неправильными(тоже обозначьте) -* Отобразите количество правильных и неправильных ответов -* счетчик -* У модального окна будет 2 кнопки "пересдать" и "отправить" -* * -* Если все ответы правильные, кнопка пересдать не активна -* disabled -* -* По нажатию отправить, модальное окно закрывается и на экране надпись "ваши ответы успешно -* отправлены" -* -* --- Если все ответы правильные отобразите картинку -* -* По нажатию на пересдать - появляется снова наш тест сначала -* -* @Super-FRONT @ 2 -* При загрузке странице добавьте таймер отсчета с милисекундами -> В модальном окне отобразите -* количество затраченного времени на тест -* -* */ \ No newline at end of file