diff --git a/HW#1/project/css/style.css b/HW#1/project/css/style.css new file mode 100644 index 0000000..a3c4756 --- /dev/null +++ b/HW#1/project/css/style.css @@ -0,0 +1,47 @@ +*{ + margin: 0 auto; + padding: auto; + +} +body{ + background-color: #dedaeedd; +} +header{ + display: grid; + grid-template-rows: 1fr; + justify-content: flex-end; + background-color: #cccc; +} +.btn-cart{ + padding: 10px 50px; + background-color: #fff; +} +main{ + display: grid; + grid-template-columns: 1fr; +} +.products{ + display: grid; + grid-template-columns: 1fr 1fr; + grid-template-rows: 1fr; +} +.product-item{ + border: 1px solid black; + display: block; + width: 350px; + height: 200px; + margin: 5px; +} +.product-item h3{ + color: red; + font-size: 30px; + margin: 5px; +} +.product-item p{ + font-weight: 600; + font-size: 18px; + margin-left: 10px; +} +button{ + margin: 5px; +} \ No newline at end of file diff --git a/HW#1/project/index.html b/HW#1/project/index.html new file mode 100644 index 0000000..e6f0d11 --- /dev/null +++ b/HW#1/project/index.html @@ -0,0 +1,17 @@ + + + + + + Title + + +
+ +
+
+
+
+ + + \ No newline at end of file diff --git a/HW#1/project/js/main.js b/HW#1/project/js/main.js new file mode 100644 index 0000000..b76b60e --- /dev/null +++ b/HW#1/project/js/main.js @@ -0,0 +1,26 @@ +const data = [ + { title: 'Notebook', id: 1, price: 2000 }, + { title: 'Keyboard', id: 2, price: 200 }, + { title: 'Mouse', id: 3, price: 100 }, + { title: 'Gamepad', id: 4, price: 87 }, + { title: 'Новый Товар', id: 5 } +]; +const renderProduct = (title, id, price = 'Цена товара', img = "https://placehold.it//150x100") => { + return ` +
+ ${title} +
+

${title}

+

${price}

+ +
+
+ ` +}; + +const render = (products) => { + document.querySelector('.products').innerHTML = products.map(item => renderProduct(item.title, item.id, item.price)).join(''); +}; + +render(data); +console.log(data) \ No newline at end of file diff --git a/HW#4/form.js b/HW#4/form.js new file mode 100644 index 0000000..766735f --- /dev/null +++ b/HW#4/form.js @@ -0,0 +1,90 @@ +const validateParams = { + name:{ + pattern:/^[a-zа-яё]+$/i, + error:'Имя должно содержать только буквы' + }, + phone:{ + pattern:/^\+7\(\d{3}\)\d{3}-\d{4}$/, + error:'Телефон должын быть в форме "+7(000)000-0000"' + }, + email:{ + pattern:/^[\w\.-]+@\w+\.[a-z]{2,4}$/i, + error:'Email должен выглядеть как email@gmail.com' + } +}; + +class Validator{ + static errorClass = 'error-msg'; + form =null; + params = null; + valid = false; + + constructor(form,params){ + this.form =document.querySelector(form); + this.params = params; + this._init(); + } + _init(){ + this.form.addEventListener('submit', e =>{ + this._validateForm(); + if(!this.valid){ + e.preventDefault(); + } + }) + } + _validateForm(){ + this.valid = false; + const errors = [...this.form.querySelectorAll(`.${Validator.errorClass}`)]; + for(let error of errors){ + error.remove(); + } + const formFields = [...this.form.querySelectorAll('input')]; + + for(let field of formFields){ + this._validate(field); + } + + if(![this.form.querySelectorAll(`.invalid`)].length){ + this.valid = true; + } + + } + _validate(field){ + if(!this.params[field.name]){ + return; + } + const {pattern,error} = this.params[field.name]; + + if(!pattern.test(field.value)){ + field.classList.add('invalid'); + this._addErrorMsg(field,error); + this.watchField(field,pattern,error); + } + } + _addErrorMsg(field,error){ + const errorBlock = `
${error}
`; + field.parentNode.insertAdjacentHTML('beforeend',errorBlock); + } + watchField(field,pattern,error){ + field.addEventListener('input',() =>{ + const errorBlock = field.parentNode.querySelector(`${Validator.errorClass}`); + if(pattern.test(field.value)){ + field.classList.remove('invalid'); + field.classList.add('valid'); + if(errorBlock){ + errorBlock.remove(); + } + }else{ + field.classList.remove('valid'); + field.classList.add('invalid'); + if(!errorBlock){ + this._addErrorMsg(field,error); + } + } + }) + } +} + +window.onload = () =>{ + new Validator(`#myform`,validateParams) +} \ No newline at end of file diff --git a/HW#4/index.html b/HW#4/index.html new file mode 100644 index 0000000..f70ac15 --- /dev/null +++ b/HW#4/index.html @@ -0,0 +1,56 @@ + + + + + + + + Document + + +
+

+ One:В 'Hi Mary.' Two:В 'Oh, hi.' + One:В 'How are you doing?' + Two:В 'I'm doing alright. How about you?' + One:В 'Not too bad. The weather is great isn't it?' + Two:В 'Yes. It's absolutely beautiful today.' + One:В 'I wish it was like this more frequently.' + Two:В 'Me too.' + One:В 'So where are you going now?' + Two:В 'I'm going to meet a friend of mine at the department store.' + One:В 'Going to do a little shopping?' + Two:В 'Yeah, I have to buy some presents for my parents.' + One:В 'What's the occasion?' + Two:В 'It's their anniversary.' + One:В 'That's great. Well, you better get going. You don't want to be late.' + Two:В 'I'll see you next time.' + One:В 'Sure. Bye.' +

+ +
+
+
+ +
+
+ +
+
+ +
+ +
+ + + + \ No newline at end of file diff --git a/HW#4/replacer.js b/HW#4/replacer.js new file mode 100644 index 0000000..72d8dfc --- /dev/null +++ b/HW#4/replacer.js @@ -0,0 +1,5 @@ +let block = document.querySelector('.text'); +document.querySelector('.replace').addEventListener('click',()=>{ + block.textContent = block.textContent.replace(/\B'|'\B/g,'"'); + block.style.color = 'green'; +}) \ No newline at end of file diff --git a/HW#4/style.css b/HW#4/style.css new file mode 100644 index 0000000..1b2f7d2 --- /dev/null +++ b/HW#4/style.css @@ -0,0 +1,13 @@ +.text{ + border-bottom: 4px solid black; +} +.error-msg{ + color: red; + margin: 10px 0; +} +.valid{ + border: 2px solid green; +} +.invalid{ + border: 2px solid red; +} \ No newline at end of file