From 87eaf8ffadcafad4c0816b2dca0e63acc257a47a Mon Sep 17 00:00:00 2001 From: Maaxym Date: Sun, 15 Jul 2018 17:10:22 +0300 Subject: [PATCH 1/4] Homework 0,1,2 --- js-core/homeworks/homework-14/index.html | 97 ++++++++++++++++++ js-core/homeworks/homework-14/src/main.js | 116 ++++++++++++++++++++++ 2 files changed, 213 insertions(+) create mode 100644 js-core/homeworks/homework-14/index.html create mode 100644 js-core/homeworks/homework-14/src/main.js diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html new file mode 100644 index 0000000..98fcc4f --- /dev/null +++ b/js-core/homeworks/homework-14/index.html @@ -0,0 +1,97 @@ + + + + + Home work 14 + + + + + + + +
+

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

+ +
+
    +
  1. Вопрос номер 1 +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    2. +
  2. Вопрос номер 2 +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    3. +
  3. Вопрос номер 3 +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    4. +
+

+
+
+ + \ 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..8e0834b --- /dev/null +++ b/js-core/homeworks/homework-14/src/main.js @@ -0,0 +1,116 @@ +/* +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]) => [] +*/ + + +function solution(arr){ + let _temp = {} + arr.forEach( function(element, index) { + if(_temp[element]){ + _temp[element]++ ; + }else{ + _temp[element] = 1; + } + // statements + }); + + let res = []; + + Object.keys(_temp).forEach(function(value){ + if(_temp[value] % 2 !== 0){ + res.push(value); + } + }); + + return res; + +} +console.log(solution([12, 23, 34, 12, 12, 23, 12, 45])); +console.log(solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,])); +console.log(solution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9])); +console.log(solution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42])); +console.log(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' + Вам нужно написать функцию которая в зависимости от разных параметров + будет изменять заданные значения на необходимые вам + Сделайте несколько вызовов данной функции + * + * */ + +let replaceInfo = [ + { + template: '%%HOMEDIR%%', + templateFlags: 'gmi', + replaceString: './JavaScript-Basic' + }, + { + template: '%%APP_DIR%%', + templateFlags: 'gmi', + replaceString: 'fixtures/src' + }, + { + template: '%%APPNAME%%', + templateFlags: 'gmi', + replaceString: 'app.js' + } +] + +function grandReplace(string, data){ + let res = string; + + return data.reduce(function(acc,elem){ + let regexp = new RegExp(elem.template,elem.templateFlags); + return acc.replace(regexp,elem.replaceString) + },string); +} + +console.log(grandReplace(someWebpackModule,replaceInfo)); + + +/* + TASK - 2 + Сделайте разметку как скриншоте используя HTML + вам необходимо использовать тэги(!) +*/ + + + + + +/* +TASK 3 + JavaScript => + Создать объект с методами, которые будут динамически генерировать DOM + Это будет тест, который мы будем разрабатывать в следующих заданиях. + Сейчас вам нужно только динамически создать html, + методы должны храниться в одном объекте. + Изначально на странице должен быть только , + вызывая методы объекта нужно создать dom-элементы +*/ + +// app.render(); \ No newline at end of file From 7f249d74a96095d093ae670c593dad974dc30c5f Mon Sep 17 00:00:00 2001 From: Maaxym Date: Sun, 15 Jul 2018 19:01:58 +0300 Subject: [PATCH 2/4] function render of form was added --- js-core/homeworks/homework-14/index.html | 4 +- js-core/homeworks/homework-14/src/main.js | 95 ++++++++++++++++++++++- 2 files changed, 96 insertions(+), 3 deletions(-) diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html index 98fcc4f..49539e0 100644 --- a/js-core/homeworks/homework-14/index.html +++ b/js-core/homeworks/homework-14/index.html @@ -45,7 +45,7 @@ -
+ \ 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 index 8e0834b..aaf3505 100644 --- a/js-core/homeworks/homework-14/src/main.js +++ b/js-core/homeworks/homework-14/src/main.js @@ -112,5 +112,98 @@ TASK 3 Изначально на странице должен быть только , вызывая методы объекта нужно создать dom-элементы */ +let app = { + render(){ + let div = document.createElement('div'); + div.setAttribute("class", "test-block"); -// app.render(); \ No newline at end of file + let head = document.createElement('p'); + head.innerText = 'Тест по програмированию' + div.appendChild(head); + + let form = document.createElement('form'); + + let questionList = document.createElement('ol'); + + let questions = [ + { + question : 'Вопрос номер 1', + answers: [ + 'вариант ответа 1', + 'вариант ответа 2', + 'вариант ответа 3' + ] + }, + { + question : 'Вопрос номер 2', + answers: [ + 'вариант ответа 1', + 'вариант ответа 2', + 'вариант ответа 3' + ] + }, + { + question : 'Вопрос номер 3', + answers: [ + 'вариант ответа 1', + 'вариант ответа 2', + 'вариант ответа 3' + ] + } + ] + + questions.forEach((questionObj,questionIndex)=>{ + let questionBlock = document.createElement('li'); + questionBlock.innerText = questionObj.question; + + let answersBlock = document.createElement('ul'); + + questionObj.answers.forEach( (answerText) => { + + let answerLi = document.createElement('li'); + let labelForAnswer = document.createElement('label'); + + let inputAnswer = document.createElement('input'); + inputAnswer.type = 'checkbox'; + inputAnswer.name = 'answer_question_' + (questionIndex + 1); + + labelForAnswer.appendChild(inputAnswer); + + let answerNode = document.createTextNode(answerText); + labelForAnswer.appendChild(answerNode); + answerLi.appendChild(labelForAnswer); + + // answer.innerText = answerText; + answersBlock.appendChild(answerLi); + }); + + questionBlock.appendChild(answersBlock); + + + questionList.appendChild(questionBlock); + + + }); + + + let buttonBlock = document.createElement('p'); + + let buttonSubmit = document.createElement('input'); + buttonSubmit.type = 'submit'; + buttonSubmit.name = 'submit'; + buttonSubmit.value = 'Проверить мои рещультаты' + + buttonBlock.appendChild(buttonSubmit); + + form.appendChild(questionList).appendChild(buttonBlock); + + div.append(form); + + document.body.appendChild(div); + // console.log(div); + + } +} + + +app.render(); \ No newline at end of file From 19d20b1e4462cba46f4ac7c4adb75910fc2e7954 Mon Sep 17 00:00:00 2001 From: Maaxym Date: Sun, 22 Jul 2018 00:39:48 +0300 Subject: [PATCH 3/4] changes after review --- js-core/homeworks/homework-14/index.html | 51 ------ js-core/homeworks/homework-14/src/main.js | 185 +++++++++++----------- 2 files changed, 90 insertions(+), 146 deletions(-) diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html index 49539e0..64e6241 100644 --- a/js-core/homeworks/homework-14/index.html +++ b/js-core/homeworks/homework-14/index.html @@ -41,57 +41,6 @@ - - - - \ 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 index aaf3505..af77c58 100644 --- a/js-core/homeworks/homework-14/src/main.js +++ b/js-core/homeworks/homework-14/src/main.js @@ -10,26 +10,22 @@ TASK 0. Найдите числа которые повторяются нече function solution(arr){ - let _temp = {} - arr.forEach( function(element, index) { - if(_temp[element]){ - _temp[element]++ ; + let _temp = arr.reduce( (acc,element) => { + if(acc[element]){ + acc[element]++ ; }else{ - _temp[element] = 1; - } - // statements - }); + acc[element] = 1; + } + return acc; + },{}); let res = []; - - Object.keys(_temp).forEach(function(value){ + Object.keys(_temp).forEach( value => { if(_temp[value] % 2 !== 0){ res.push(value); } }); - return res; - } console.log(solution([12, 23, 34, 12, 12, 23, 12, 45])); console.log(solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,])); @@ -82,7 +78,6 @@ let replaceInfo = [ function grandReplace(string, data){ let res = string; - return data.reduce(function(acc,elem){ let regexp = new RegExp(elem.template,elem.templateFlags); return acc.replace(regexp,elem.replaceString) @@ -113,97 +108,97 @@ TASK 3 вызывая методы объекта нужно создать dom-элементы */ let app = { - render(){ - let div = document.createElement('div'); - div.setAttribute("class", "test-block"); - - let head = document.createElement('p'); - head.innerText = 'Тест по програмированию' - div.appendChild(head); - - let form = document.createElement('form'); - - let questionList = document.createElement('ol'); - - let questions = [ - { - question : 'Вопрос номер 1', - answers: [ - 'вариант ответа 1', - 'вариант ответа 2', - 'вариант ответа 3' - ] - }, - { - question : 'Вопрос номер 2', - answers: [ - 'вариант ответа 1', - 'вариант ответа 2', - 'вариант ответа 3' - ] - }, - { - question : 'Вопрос номер 3', - answers: [ - 'вариант ответа 1', - 'вариант ответа 2', - 'вариант ответа 3' - ] - } - ] - - questions.forEach((questionObj,questionIndex)=>{ - let questionBlock = document.createElement('li'); - questionBlock.innerText = questionObj.question; - - let answersBlock = document.createElement('ul'); - - questionObj.answers.forEach( (answerText) => { - - let answerLi = document.createElement('li'); - let labelForAnswer = document.createElement('label'); - - let inputAnswer = document.createElement('input'); - inputAnswer.type = 'checkbox'; - inputAnswer.name = 'answer_question_' + (questionIndex + 1); - - labelForAnswer.appendChild(inputAnswer); - - let answerNode = document.createTextNode(answerText); - labelForAnswer.appendChild(answerNode); - answerLi.appendChild(labelForAnswer); - - // answer.innerText = answerText; - answersBlock.appendChild(answerLi); - }); - - questionBlock.appendChild(answersBlock); - - - questionList.appendChild(questionBlock); - + questions : [ + { + question : 'Вопрос номер 1', + answers: [ + 'вариант ответа 1', + 'вариант ответа 2', + 'вариант ответа 3' + ] + }, + { + question : 'Вопрос номер 2', + answers: [ + 'вариант ответа 1', + 'вариант ответа 2', + 'вариант ответа 3' + ] + }, + { + question : 'Вопрос номер 3', + answers: [ + 'вариант ответа 1', + 'вариант ответа 2', + 'вариант ответа 3' + ] + } + ], + _createButton(){ + let buttonSubmit = this._makeNode('input'); + buttonSubmit.type = 'submit'; + buttonSubmit.name = 'submit'; + buttonSubmit.value = 'Проверить мои рещультаты'; + return buttonSubmit; + }, - }); + _makeNode(node){ + return document.createElement(node); + }, + _createListOfQuestions(){ + let questionList = this._makeNode('ol'); + this.questions.forEach((questionObj,questionIndex)=>{ + let questionBlock = this._makeNode('li'); + questionBlock.innerText = questionObj.question; + + let answersBlock = this._makeNode('ul'); + questionObj.answers.forEach( (answerText) => { - let buttonBlock = document.createElement('p'); + let inputAnswer = this._makeNode('input'); + inputAnswer.type = 'checkbox'; + inputAnswer.name = 'answer_question_' + (questionIndex + 1); - let buttonSubmit = document.createElement('input'); - buttonSubmit.type = 'submit'; - buttonSubmit.name = 'submit'; - buttonSubmit.value = 'Проверить мои рещультаты' - - buttonBlock.appendChild(buttonSubmit); + let labelForAnswer = this._makeNode('label'); + labelForAnswer.appendChild(inputAnswer); - form.appendChild(questionList).appendChild(buttonBlock); + let answerNode = document.createTextNode(answerText); + labelForAnswer.appendChild(answerNode); - div.append(form); + let answerLi = this._makeNode('li'); + answerLi.appendChild(labelForAnswer); - document.body.appendChild(div); - // console.log(div); + answersBlock.appendChild(answerLi); + }); + questionBlock.appendChild(answersBlock); + questionList.appendChild(questionBlock); + }); + return questionList; + }, + _initContainer(){ + let div = this._makeNode('div'); + div.setAttribute("class", "test-block"); + return div; + }, + _createHead(){ + let head = this._makeNode('p'); + head.innerText = 'Тест по програмированию' + return head + }, + render(){ + let container = this._initContainer(); + let formHeader = this._createHead(); + let form = this._makeNode('form'); + let questionList = this._createListOfQuestions(); + let submitButton = this._createButton(); + let buttonBlock = this._makeNode('p'); + buttonBlock.appendChild(submitButton); + form.appendChild(questionList).appendChild(buttonBlock); + container.appendChild(formHeader); + container.appendChild(form); + document.body.appendChild(container); } } - app.render(); \ No newline at end of file From 090a3dc59e7eb6b1dd20c1f3721c168c3907a267 Mon Sep 17 00:00:00 2001 From: Maaxym Date: Tue, 24 Jul 2018 00:10:41 +0300 Subject: [PATCH 4/4] answers in test hightlight --- js-core/homeworks/homework-14/index.html | 19 ++ js-core/homeworks/homework-14/src/main.js | 213 +++++++--------------- 2 files changed, 87 insertions(+), 145 deletions(-) diff --git a/js-core/homeworks/homework-14/index.html b/js-core/homeworks/homework-14/index.html index 64e6241..152b2ce 100644 --- a/js-core/homeworks/homework-14/index.html +++ b/js-core/homeworks/homework-14/index.html @@ -25,6 +25,25 @@ form > ol > li { margin-bottom: 25px; } + form > ol > li > span.status{ + display: none; + font-weight: bold; + } + form > ol > li > span.status.correct,form > ol > li > span.status.wrong{ + display: inline; + } + form > ol > li > span.status.correct{ + color:green; + } + form > ol > li > span.status.correct:after{ + content: 'correct'; + } + form > ol > li > span.status.wrong{ + color:red; + } + form > ol > li > span.status.wrong:after{ + content: 'wrong'; + } form > ol > li > ul { margin-top: 15px; } diff --git a/js-core/homeworks/homework-14/src/main.js b/js-core/homeworks/homework-14/src/main.js index af77c58..b493615 100644 --- a/js-core/homeworks/homework-14/src/main.js +++ b/js-core/homeworks/homework-14/src/main.js @@ -1,141 +1,39 @@ -/* -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]) => [] -*/ - - -function solution(arr){ - let _temp = arr.reduce( (acc,element) => { - if(acc[element]){ - acc[element]++ ; - }else{ - acc[element] = 1; - } - return acc; - },{}); - - let res = []; - Object.keys(_temp).forEach( value => { - if(_temp[value] % 2 !== 0){ - res.push(value); - } - }); - return res; -} -console.log(solution([12, 23, 34, 12, 12, 23, 12, 45])); -console.log(solution([4, 4, 100, 5000, 4, 4, 4, 4, 4, 100, 100,])); -console.log(solution([3, 3, 4, 6, 4, 5, 9, 9, 21, 9])); -console.log(solution([4, 8, 15, 16, 23, 42, 4, 15, 42, 42])); -console.log(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' - Вам нужно написать функцию которая в зависимости от разных параметров - будет изменять заданные значения на необходимые вам - Сделайте несколько вызовов данной функции - * - * */ - -let replaceInfo = [ - { - template: '%%HOMEDIR%%', - templateFlags: 'gmi', - replaceString: './JavaScript-Basic' - }, - { - template: '%%APP_DIR%%', - templateFlags: 'gmi', - replaceString: 'fixtures/src' - }, - { - template: '%%APPNAME%%', - templateFlags: 'gmi', - replaceString: 'app.js' - } -] - -function grandReplace(string, data){ - let res = string; - return data.reduce(function(acc,elem){ - let regexp = new RegExp(elem.template,elem.templateFlags); - return acc.replace(regexp,elem.replaceString) - },string); -} - -console.log(grandReplace(someWebpackModule,replaceInfo)); - - -/* - TASK - 2 - Сделайте разметку как скриншоте используя HTML - вам необходимо использовать тэги(!) -*/ - - - - - -/* -TASK 3 - JavaScript => - Создать объект с методами, которые будут динамически генерировать DOM - Это будет тест, который мы будем разрабатывать в следующих заданиях. - Сейчас вам нужно только динамически создать html, - методы должны храниться в одном объекте. - Изначально на странице должен быть только , - вызывая методы объекта нужно создать dom-элементы -*/ -let app = { +const app = { questions : [ { - question : 'Вопрос номер 1', + id : 1, + question : 'Сколько типов данных в JS', answers: [ - 'вариант ответа 1', - 'вариант ответа 2', - 'вариант ответа 3' - ] + '5', + '6', + '7' + ], + correctAnswer : ['6'] + }, { - question : 'Вопрос номер 2', + id : 2, + question : 'Методом чего является функция slice', answers: [ - 'вариант ответа 1', - 'вариант ответа 2', - 'вариант ответа 3' - ] + 'массив', + 'число', + 'объект' + ], + correctAnswer : ['массив'] }, { - question : 'Вопрос номер 3', + id : 3, + question : 'var y = 1, x = y = typeof x; x;', answers: [ - 'вариант ответа 1', - 'вариант ответа 2', - 'вариант ответа 3' - ] + '1', + 'number', + 'undefined' + ], + correctAnswer : ['undefined'] } ], _createButton(){ - let buttonSubmit = this._makeNode('input'); + const buttonSubmit = this._makeNode('input'); buttonSubmit.type = 'submit'; buttonSubmit.name = 'submit'; buttonSubmit.value = 'Проверить мои рещультаты'; @@ -146,26 +44,28 @@ let app = { return document.createElement(node); }, _createListOfQuestions(){ - let questionList = this._makeNode('ol'); + const questionList = this._makeNode('ol'); this.questions.forEach((questionObj,questionIndex)=>{ - let questionBlock = this._makeNode('li'); - questionBlock.innerText = questionObj.question; + const questionBlock = this._makeNode('li'); + questionBlock.innerHTML = `${questionObj.question} `; - let answersBlock = this._makeNode('ul'); - questionObj.answers.forEach( (answerText) => { + const answersBlock = this._makeNode('ul'); + questionObj.answers.forEach( (answerText,index) => { - let inputAnswer = this._makeNode('input'); + const inputAnswer = this._makeNode('input'); inputAnswer.type = 'checkbox'; - inputAnswer.name = 'answer_question_' + (questionIndex + 1); + inputAnswer.name = `question_${questionObj.id}_answer_${index}` ; - let labelForAnswer = this._makeNode('label'); + const labelForAnswer = this._makeNode('label'); labelForAnswer.appendChild(inputAnswer); - let answerNode = document.createTextNode(answerText); - labelForAnswer.appendChild(answerNode); + const spanForAnswer = this._makeNode('span'); + spanForAnswer.textContent = answerText - let answerLi = this._makeNode('li'); + labelForAnswer.appendChild(spanForAnswer); + + const answerLi = this._makeNode('li'); answerLi.appendChild(labelForAnswer); answersBlock.appendChild(answerLi); @@ -177,22 +77,45 @@ let app = { return questionList; }, _initContainer(){ - let div = this._makeNode('div'); + const div = this._makeNode('div'); div.setAttribute("class", "test-block"); return div; }, _createHead(){ - let head = this._makeNode('p'); + const head = this._makeNode('p'); head.innerText = 'Тест по програмированию' return head }, + checkAnswer(){ + const questionsElements = document.body.querySelectorAll('ol ul'); + questionsElements.forEach( (element, index) => { + let haveMistakes = true; + const questionNumber = element.querySelector('label > input').name.split('_')[1]; + const answersCkeckboxes = element.querySelectorAll('li > label > input:checked'); + const questionWeWork = this.questions.filter( question => { + return question.id == questionNumber; + })[0]; + if(answersCkeckboxes.length){ + haveMistakes = [...answersCkeckboxes].some( answersCkeckbox => { + const answerText = answersCkeckbox.nextElementSibling.innerText; + return questionWeWork.correctAnswer.indexOf(answerText) === -1; + }); + } + const newStatus = 'status' + (haveMistakes ? ' wrong' : ' correct'); + element.parentElement.querySelector('span.status').className = newStatus + }); + }, render(){ - let container = this._initContainer(); - let formHeader = this._createHead(); - let form = this._makeNode('form'); - let questionList = this._createListOfQuestions(); - let submitButton = this._createButton(); - let buttonBlock = this._makeNode('p'); + const container = this._initContainer(); + const formHeader = this._createHead(); + const form = this._makeNode('form'); + const questionList = this._createListOfQuestions(); + const submitButton = this._createButton(); + submitButton.onclick = () => { + this.checkAnswer(); + return false; + } + const buttonBlock = this._makeNode('p'); buttonBlock.appendChild(submitButton); form.appendChild(questionList).appendChild(buttonBlock); container.appendChild(formHeader);