From 5bf3d6272e0c48d42a0fcdd36835ce9b6245ae44 Mon Sep 17 00:00:00 2001 From: Kirill Pobedonostsev Date: Sun, 21 Nov 2021 01:47:47 +0300 Subject: [PATCH 1/2] Complete 5 homework --- index.html | 1 + scripts/script.js | 107 ++++++++++++++++++++++++++++++++++++++++- skills.html | 120 ++++++++++++++++++++++++++++++++++++++++++++++ styles/skills.css | 98 +++++++++++++++++++++++++++++++++++++ styles/style.css | 16 +++++-- 5 files changed, 337 insertions(+), 5 deletions(-) create mode 100644 skills.html create mode 100644 styles/skills.css diff --git a/index.html b/index.html index ecad093..6638fd4 100644 --- a/index.html +++ b/index.html @@ -31,6 +31,7 @@

Alex Smith

Alex Smith

Web Designer

+ Skills
diff --git a/scripts/script.js b/scripts/script.js index 4e543ed..d48f7f4 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -1,6 +1,105 @@ +class SkillsHandler { + constructor() { + this.skillsContainer = document.querySelector('.skills__content'); + this.skills = [ + new Skill('JavaScript', 85), + new Skill('HTML', 100), + new Skill('PHP', 75) + ]; + this.render(); + } + + addSkill(skill) { + if (skill.ratio <= 100 && skill.ratio >= 0 && this.skills.length < 5) { + this.skills.push(skill); + this.createSkill(this.skills.length - 1); + } + } + + removeSkill(skillNode) { + this.skills.splice(skillNode.id, 1); + skillNode.parentNode.remove(); + } + + render() { + this.skillsContainer.innerHTML = ''; + for (let i = 0; i < this.skills.length; i++) { + this.createSkill(i); + } + } + + createSkill(id) { + const skillItem = document.createElement('div'); + const skillItemInner = document.createElement('div'); + const skillSubtitle = document.createElement('div'); + const skillName = document.createElement('span'); + const skillRatio = document.createElement('span'); + const progressbar = document.createElement('div'); + const progressbarInner = document.createElement('span'); + const skillsButton = document.createElement('div'); + const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + const use = document.createElementNS('http://www.w3.org/2000/svg', 'use'); + + skillItem.classList.add('skills__item'); + skillItemInner.classList.add('skills__item-inner'); + skillSubtitle.classList.add('skills__item-subtitle'); + progressbar.classList.add('progress-bar'); + skillsButton.classList.add('skills__button'); + skillsButton.classList.add('delete-button'); + + skillsButton.id = id; + + skillName.innerText = this.skills[id].name; + skillRatio.innerText = this.skills[id].ratio + '%'; + + progressbarInner.style.width = skillRatio.innerText; + use.setAttribute('href', '#minus'); + + skillItem.appendChild(skillItemInner); + skillItem.appendChild(skillsButton); + skillItemInner.appendChild(skillSubtitle); + skillSubtitle.appendChild(skillName); + skillSubtitle.appendChild(skillRatio); + skillItemInner.appendChild(progressbar); + progressbar.appendChild(progressbarInner); + skillsButton.appendChild(svg); + svg.appendChild(use); + + skillsButton.addEventListener('click', () => { + skillsHandler.removeSkill(skillsButton); + }); + + this.skillsContainer.appendChild(skillItem); + } +} + +class Skill { + constructor(name, ratio) { + this.name = name; + this.ratio = ratio; + } +} + const switcher = document.getElementById('switcher'); +const addSkillBtn = document.getElementById('add-skill'); +const addBlock = document.querySelector('.skills__add-dialog'); +const addForm = document.forms[0]; +const inputs = addForm.getElementsByClassName('skills__input'); + +addSkillBtn.addEventListener('click', showSkillForm); +addForm.addEventListener('submit', addSkill); +switcher.addEventListener('change', switchTheme); + +skillsHandler = new SkillsHandler(); -switcher.addEventListener('change', (event) => { +function addSkill(event) { + event.preventDefault(); + skillsHandler.addSkill(new Skill(inputs[0].value, inputs[1].value)); + addForm.reset(); + addBlock.classList.add('hidden'); +} + +function switchTheme(event) { if (event.target.checked) { document.body.classList.add('dark-theme'); document.body.classList.remove('light-theme'); @@ -8,4 +107,8 @@ switcher.addEventListener('change', (event) => { document.body.classList.remove('dark-theme'); document.body.classList.add('light-theme'); } -}); +} + +function showSkillForm() { + addBlock.classList.toggle('hidden'); +} diff --git a/skills.html b/skills.html new file mode 100644 index 0000000..7ac4b1d --- /dev/null +++ b/skills.html @@ -0,0 +1,120 @@ + + + + + + + + + Portfolio + + + + + + + + + + + + + + + + + + + + +
+ + +
+
+
+ avatar +
+

Alex Smith

+

Web Designer

+ + +
+
©2020 All right reserved.
+
+
+
+
+

Coding Skills

+
+ + + +
+
+ +
+
+
+
+ JavaScript + 85% +
+
+ +
+
+
+ + + +
+
+
+
+
+ JavaScript + 85% +
+
+ +
+
+
+ + + +
+
+
+
+
+ JavaScript + 85% +
+
+ +
+
+
+ + + +
+
+
+
+
+
+ + + diff --git a/styles/skills.css b/styles/skills.css new file mode 100644 index 0000000..c790eef --- /dev/null +++ b/styles/skills.css @@ -0,0 +1,98 @@ +.skills { + position: relative; + height: 90%; + width: 90%; + display: flex; + flex-direction: column; +} + +.skills__title { + display: flex; + justify-content: space-between; + align-items: center; +} + +.skills__button svg { + fill: #222222; + width: 40px; + height: 40px; +} + +.skills__add-dialog { + width: 400px; + height: 200px; + position: absolute; + background-color: #444; + border-radius: 1em; + right: 50px; + top: 0; + z-index: 1; + display: flex; + padding: 20px; + flex-direction: column; + justify-content: space-around; +} + +.skills__input { + outline: none; + height: 50px; + border-radius: 10px; + font-size: 20px; + padding: 0 10px; + background: transparent; + border: 3px solid #999; + color: #999; +} + +.skills__content { + margin-top: 10px; +} + +.skills__item { + margin: 35px 0; + display: flex; + align-items: center; +} + +.skills__item-inner { + flex-grow: 1; + margin-right: 10px; +} + +.skills__item-subtitle { + display: flex; + justify-content: space-between; +} + +.skills__button { + width: 40px; + height: 40px; + background-color: #fff; + border-radius: 50%; +} + +.progress-bar { + margin-top: 10px; + height: 15px; + position: relative; + border: 1px solid #6da8c4; + border-radius: 25px; + padding: 3px; +} + +.progress-bar > span { + display: block; + height: 100%; + border-radius: 20px 8px 8px 20px; + background-color: #52b2da; + position: relative; + overflow: hidden; +} + +.blue { + color: #52b2da; +} + +.hidden { + display: none; +} diff --git a/styles/style.css b/styles/style.css index e5284e0..3ddc63e 100644 --- a/styles/style.css +++ b/styles/style.css @@ -148,6 +148,10 @@ body { margin-top: 8px; } +.card__info-button { + margin-top: 20px; +} + button { background-color: var(--bg-button); padding: 10px 30px; @@ -159,17 +163,20 @@ button { margin-top: 20px; cursor: pointer; } + .theme-switcher { position: absolute; right: 30px; top: 10px; } -input { + +#switcher { width: 0; height: 0; display: none; visibility: hidden; } + label { cursor: pointer; display: block; @@ -180,6 +187,7 @@ label { background-color: rgb(255, 255, 255); transition: 0.5s ease background-color; } + label::after { position: absolute; content: ""; @@ -192,11 +200,13 @@ label::after { background-color: rgb(46, 42, 68); transition: 0.5s ease; } -input:checked + label::after { + +#switcher:checked + label::after { left: calc(100% - 25px); background-color: aliceblue; } -input + label { + +#switcher + label { background-color: var(--input-bg-color); border: 2px solid var(--input-border-color); } From c023cd182fabf3b397383c5bcfda9aa8a273de03 Mon Sep 17 00:00:00 2001 From: Kirill Pobedonostsev Date: Sun, 21 Nov 2021 01:53:48 +0300 Subject: [PATCH 2/2] Add check that skill name isn't empty --- scripts/script.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scripts/script.js b/scripts/script.js index d48f7f4..5b9e2c0 100644 --- a/scripts/script.js +++ b/scripts/script.js @@ -10,7 +10,7 @@ class SkillsHandler { } addSkill(skill) { - if (skill.ratio <= 100 && skill.ratio >= 0 && this.skills.length < 5) { + if (skill.ratio <= 100 && skill.ratio >= 0 && this.skills.length < 5 && skill.name) { this.skills.push(skill); this.createSkill(this.skills.length - 1); }