HW5

dist/app.js

@@ -1,9 +1,98 @@
-document.addEventListener("DOMContentLoaded", function(event) {
-    document.querySelector("#portfolio-card-theme-switcher").addEventListener('click', changeTheme);
+const target = document.querySelector('body');
+const skillsBlock = createElementWithClassName('main', 'js-skills-block');
+const skillsHeader = createElementWithClassName('header', 'js-skills-header');
+const addButton = createElementWithClassName('button', 'js-skills-add-button');
+const title = document.createElement('h1');
+
+title.innerText = 'Coding Skills';
+
+skillsHeader.append(title);
+skillsHeader.append(addButton);
+skillsBlock.append(skillsHeader);
+target.append(skillsBlock);
+document.addEventListener('DOMContentLoaded', event => {
+    addButton.addEventListener('click', addSkillForm);
 });
 
-function changeTheme() {
-    const bodyCardClassList = document.querySelector("body").classList;
-    bodyCardClassList.toggle("dark-theme");
-    bodyCardClassList.toggle("light-theme");
+function addSkillForm() {
+    const newSkillForm = generateSkillForm();
+    skillsBlock.append(newSkillForm);
+}
+
+function generateSkillForm() {
+    const skillForm = createElementWithClassName('form', 'js-skill-form');
+    const skillInfo = createElementWithClassName('div', 'js-skill-info');
+    const name = createElementWithClassName('input', 'js-skill-name');
+    const percent = createElementWithClassName('input', 'js-skill-percent');
+    const saveButton = createElementWithClassName('button', 'js-skills-save-button');
+    const progress = createElementWithClassName('progress', 'js-skill-progress');
+    const progressWrapper = createElementWithClassName('div', 'js-skill-progress-wrapper');
+
+    configureName(name);
+    configurePercent(percent);
+    configureSaveButton(saveButton);
+    configureProgress(progress, percent);
+
+    skillInfo.append(name, percent);
+    progressWrapper.append(skillInfo, progress);
+    skillForm.append(progressWrapper, saveButton);
+
+    skillForm.addEventListener('submit', event => {
+        // Я хотел бы вынести это в отдельныйы метод,
+        // но почему-то event.preventDefault() тогда не работает
+        // Даже если вынести только if, а event.preventDefault() сделать здесь на месте
+        if (validateSkillForm(skillForm)) {
+            let savedName = document.createElement('h3');
+            let savedPercent = document.createElement('label');
+            let removeButton = createElementWithClassName('button', 'js-skills-remove-button');
+            savedName.innerText = name.value;
+            savedPercent = percent.value + '%';
+            removeButton.setAttribute('type', 'button');
+            removeButton.addEventListener('click', event => {
+                skillForm.remove();
+            });
+            skillForm.querySelector('.' + name.className).replaceWith(savedName);
+            skillForm.querySelector('.' + percent.className).replaceWith(savedPercent);
+            skillForm.querySelector('.' + saveButton.className).replaceWith(removeButton);
+        }
+        event.preventDefault();
+    });
+    return skillForm
+}
+
+function configureName(name) {
+    name.setAttribute('placeholder', 'Name');
+    name.setAttribute('type', 'text');
+    name.setAttribute('pattern', '^[A-z][a-z\\s]*$');
+    name.setAttribute('required', true);
+}
+
+function configurePercent(percent) {
+    percent.setAttribute('placeholder', '0-100%');
+    percent.setAttribute('type', 'number');
+    percent.setAttribute('min', 0);
+    percent.setAttribute('max', 100);
+    percent.setAttribute('required', true);
+}
+
+function configureSaveButton(saveButton) {
+    saveButton.setAttribute('type', 'submit');
+}
+
+function configureProgress(progress, percent) {
+    progress.max = 100;
+    progress.value = 0;
+    percent.addEventListener('input', event => {
+        progress.value = percent.value;
+    });
+}
+
+function validateSkillForm(form) {
+    return form.checkValidity()
+}
+
+function createElementWithClassName(tag, className) {
+    const element = document.createElement(tag);
+    element.className = className;
+    return element
 }

dist/index.html

@@ -2,40 +2,15 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <title>Lutsenko Dmitrii Profile</title>
+    <title>Skills</title>
     <!-- inject:css -->
     <link rel="stylesheet" href="./style.css">
     <!-- endinject -->
 </head>
-<body class="dark-theme">
-    <main id="portfolio-card" class="portfolio-card">
-        <div class="portfolio-card__cv">
-            <div class="cv__avatar" role="img"></div>
-            <span class="cv__avatar-shadow" role="img"></span>
-            <h3 class="cv__name">Lutsenko Dmitrii</h3>
-            <h5 class="cv__position">Developer</h5>
-            <div class="cv__social-medias">
-                <a class="social-medias__image-link" href="https://vk.com/id18153011" role="link">
-                    <img src="./assets/vkontakte_24_24.png" alt="vk logo">
-                </a>
-                <a class="social-medias__image-link" href="https://ok.ru/profile/569456047093" role="link">
-                    <img src="./assets/odnoklassniki_24_24.png" alt="ok logo">
-                </a>
-                <a class="social-medias__image-link" href="https://github.com/LutsenkoDm" role="link">
-                    <img src="./assets/git_24_24.png" alt="git logo">
-                </a>
-            </div>
-            <button class="cv__button-download">Download CV</button>
-            <footer class="cv__footer">@2021 All rights reserved.</footer>
-        </div>
-        <div class="portfolio-card__basic-info">
-            <h1 class="basic-info__name">Lutsenko Dmitrii</h1>
-            <h4 class="basic-info__position">Developer</h4>
-        </div>
-        <div id="portfolio-card-theme-switcher" class="portfolio-card__theme-switcher"></div>
-    </main>
-    <!-- inject:js -->
-    <script src="./app.js"></script>
-    <!-- endinject -->
+<body>
+
 </body>
+<!-- inject:js -->
+<script src="./app.js"></script>
+<!-- endinject -->
 </html>