Homework5

.gitignore

@@ -1 +1,2 @@
-node_modules
+node_modules
+.idea

docs/app.js

@@ -0,0 +1,113 @@
+var SkillView = /** @class */ (function () {
+    function SkillView(skillsContainer) {
+        this.skillsContainer = skillsContainer;
+    }
+    SkillView.prototype.removeSkill = function (skillNode) {
+        skillNode.parentNode.remove();
+    };
+    SkillView.prototype.renderNewSkill = function (id, skill) {
+        var skillItem = document.createElement('div');
+        var skillItemInner = document.createElement('div');
+        var skillSubtitle = document.createElement('div');
+        var skillName = document.createElement('span');
+        var skillRatio = document.createElement('span');
+        var progressbar = document.createElement('div');
+        var progressbarInner = document.createElement('span');
+        var skillsButton = document.createElement('div');
+        var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+        var 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 = skill.name;
+        skillRatio.innerText = skill.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);
+        this.skillsContainer.appendChild(skillItem);
+        return skillsButton;
+    };
+    return SkillView;
+}());
+
+var Skill = /** @class */ (function () {
+    function Skill(name, ratio) {
+        this.name = name;
+        this.ratio = ratio;
+    }
+    return Skill;
+}());
+
+var SkillController = /** @class */ (function () {
+    function SkillController(addSkillButton, addBlock) {
+        var _this = this;
+        this.startSkills = [
+            new Skill('JavaScript', 85),
+            new Skill('HTML', 100),
+            new Skill('PHP', 75)
+        ];
+        this.skills = [];
+        this.skillView = new SkillView(document.querySelector('.skills__content'));
+        this.addBlock = addBlock;
+        this.addForm = document.forms[0];
+        this.inputs = this.addForm.querySelectorAll('.skills__input');
+        for (var i = 0; i < this.startSkills.length; i++) {
+            this.addSkill(this.startSkills[i]);
+        }
+        addSkillButton.addEventListener('click', function () { return _this.showSkillForm(); });
+        this.addBlock.addEventListener('submit', function (event) { return _this.addSkillEvent(event); });
+    }
+    SkillController.prototype.addSkill = function (skill) {
+        var _this = this;
+        if (skill.ratio <= 100 && skill.ratio >= 0 && this.skills.length < 5 && skill.name.length < 20) {
+            this.skills.push(skill);
+            var skillsButton_1 = this.skillView.renderNewSkill(this.skills.length - 1, skill);
+            skillsButton_1.addEventListener('click', function () {
+                _this.removeSkill(skillsButton_1);
+            });
+        }
+    };
+    SkillController.prototype.removeSkill = function (skillNode) {
+        this.skills.splice(Number(skillNode.id), 1);
+        this.skillView.removeSkill(skillNode);
+    };
+    SkillController.prototype.addSkillEvent = function (event) {
+        event.preventDefault();
+        this.addSkill(new Skill(this.inputs[0].value, Number(this.inputs[1].value)));
+        this.addForm.reset();
+        this.addBlock.classList.add('hidden');
+    };
+    SkillController.prototype.showSkillForm = function () {
+        this.addBlock.classList.toggle('hidden');
+    };
+    return SkillController;
+}());
+
+var switcher = document.getElementById('switcher');
+switcher.addEventListener('change', switchTheme);
+function switchTheme(event) {
+    if (event.target.checked) {
+        document.body.classList.add('dark-theme');
+        document.body.classList.remove('light-theme');
+    }
+    else {
+        document.body.classList.remove('dark-theme');
+        document.body.classList.add('light-theme');
+    }
+}
+
+var addSkillBtn = document.getElementById('add-skill');
+var addBlock = document.querySelector('.skills__add-dialog');
+new SkillController(addSkillBtn, addBlock);

dist/index.html → docs/index.html

@@ -21,6 +21,7 @@
         <div class="card__inner">
             <h3 class="card__preview-header">Alex Smith</h3>
             <p class="card__preview-text">Web Designer</p>
+            <a class="btn card__info-button" href="skills.html">Skills</a>
             <div class="social">
                 <div class="social__item"></div>
                 <div class="social__item"></div>
@@ -33,6 +34,7 @@ <h3 class="card__preview-header">Alex Smith</h3>
     <section class="card__info">
         <h1 class="card__info-title">Alex Smith</h1>
         <h3 class="card__info-subtitle">Web Designer</h3>
+        <a class="btn card__info-button" href="skills.html">Skills</a>
     </section>
 </main>
 <!-- inject:js -->

docs/skills.html

@@ -0,0 +1,75 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <!-- inject:css -->
+    <link rel="stylesheet" href="./style.css">
+    <!-- endinject -->
+    <title>Portfolio</title>
+</head>
+<body class="light-theme">
+
+<svg style="display: none">
+    <symbol id="plus" viewBox="0 0 24 24">
+        <g data-name="Layer 2">
+            <g data-name="plus">
+                <path d="M19 11h-6V5a1 1 0 0 0-2 0v6H5a1 1 0 0 0 0 2h6v6a1 1 0 0 0 2 0v-6h6a1 1 0 0 0 0-2z"/>
+            </g>
+        </g>
+    </symbol>
+    <symbol id="minus" viewBox="0 0 24 24">
+        <g data-name="Layer 2">
+            <g data-name="minus">
+                <path d="M19 13H5a1 1 0 0 1 0-2h14a1 1 0 0 1 0 2z"/>
+            </g>
+        </g>
+    </symbol>
+</svg>
+
+<div class="theme-switcher">
+    <input type="checkbox" id="switcher">
+    <label for=switcher>switch</label>
+</div>
+<main class="card">
+    <section class="card__preview">
+        <img class="card__image" src="assets/img.png" alt="avatar">
+        <div class="card__inner">
+            <h3 class="card__preview-header">Alex Smith</h3>
+            <p class="card__preview-text">Web Designer</p>
+            <div class="social">
+                <div class="social__item"></div>
+                <div class="social__item"></div>
+                <div class="social__item"></div>
+            </div>
+            <button class="card__button btn">Download CV</button>
+        </div>
+        <footer class="copyright">&copy;2020 All right reserved.</footer>
+    </section>
+    <section class="card__info">
+        <div class="skills">
+            <div class="skills__title">
+                <h2 class="skills__header">Coding <span class="blue">Skills</span></h2>
+                <div class="skills__button" id="add-skill">
+                    <svg>
+                        <use xlink:href="#plus"></use>
+                    </svg>
+                </div>
+            </div>
+            <form class="skills__add-dialog hidden">
+                <input class="skills__input" type="text" placeholder="skill name">
+                <input class="skills__input" type="text" placeholder="skill ratio">
+                <input type="submit" class="hidden"/>
+            </form>
+            <div class="skills__content">
+            </div>
+        </div>
+    </section>
+</main>
+<!-- inject:js -->
+<script src="./app.js"></script>
+<!-- endinject -->
+</body>
+</html>

dist/style.css → docs/style.css

@@ -91,7 +91,7 @@ body {
   background-color: #c4c4c4;
 }
 .card__button {
-  margin-top: 57px;
+  margin-top: 20px;
 }
 .btn {
   display: inline-block;
@@ -136,6 +136,9 @@ body {
   font-weight: normal;
   margin-top: 8px;
 }
+.card__info-button {
+  margin-top: 20px;
+}
 button {
   background-color: var(--bg-button);
   padding: 10px 30px;
@@ -152,7 +155,7 @@ button {
   right: 30px;
   top: 10px;
 }
-input {
+#switcher {
   width: 0;
   height: 0;
   display: none;
@@ -180,11 +183,11 @@ label::after {
   background-color: #2e2a44;
   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);
 }
@@ -494,3 +497,89 @@ template {
 [hidden] {
   display: none;
 }
+
+.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;
+}

gulpfile.js

@@ -4,15 +4,16 @@ const less = require('gulp-less');
 const inject = require('gulp-inject');
 const rollup = require('rollup');
 const image = require('gulp-image');
+const typescript = require('@rollup/plugin-typescript');
 
 const assetsPath = 'src/assets/*.{jpg,jpeg,png,webp}';
 const stylesPath = './src/styles/**/*.scss';
-const jsPath = 'src/**/*.js';
-const htmlPath = './src/index.html';
-const distPath = './dist/';
+const jsPath = './src/**/*.ts';
+const htmlPath = './src/skills.html';
+const distPath = './docs/';
 const rollupConfig = {
-    input: 'src/app.js',
-    plugins: []
+    input: './src/app.ts',
+    plugins: [typescript()]
 }
 
 const imageOptimizingSettings = {
@@ -33,7 +34,7 @@ gulp.task('rollup', async (done) => {
 
     bundle.write({
         format: 'esm',
-        file: 'dist/app.js'
+        file: 'docs/app.js'
     });
 
     done();
@@ -73,11 +74,11 @@ gulp.task('assets', function () {
  */
  gulp.task('html', function () {
     const target = gulp.src(htmlPath);
-    const sources = gulp.src(['./dist/**/*.js', './dist/**/*.css'], { read: false });
+    const sources = gulp.src(['./docs/**/*.js', './docs/**/*.css'], { read: false });
 
-    return target.pipe(inject(sources, { ignorePath: '../dist', relative: true, addPrefix: '.' }))
+    return target.pipe(inject(sources, { ignorePath: '../docs', relative: true, addPrefix: '.' }))
         .pipe(gulp.dest(distPath));
 });
 
-gulp.task('default', gulp.series('rollup', 'css', 'assets', 'html', 'watch'));
+gulp.task('default', gulp.series('rollup', 'css', 'html', 'assets', 'watch'));
 gulp.task('build', gulp.series('rollup', 'css', 'assets', 'html'));