diff --git a/submissions/YuliiaDyka/dom-api/base.js b/submissions/YuliiaDyka/dom-api/base.js new file mode 100644 index 0000000000..70f0c8e9f2 --- /dev/null +++ b/submissions/YuliiaDyka/dom-api/base.js @@ -0,0 +1,373 @@ +"use strict" + +const dataObj = [ +{ + id: 0, + taskName: 'Git Basics', + taskExesice: [ + { + url: "https://www.coursera.org/learn/introduction-git-github", + urlText: "Introduction to Git and GitHub", + taskText: 'Прослухайте тижні 1 і 2 курсу' + }, + { + url: "https://learngitbranching.js.org/", + urlText: "learngitbranching.js.org", + taskText: "Пройдіть наступні рівні тут " + }, + { + url: null, + urlText: null, + taskText: "Створіть репозиторій та назвіть його kottans-frontend." + }, + { + url: null, + urlText: null, + taskText: "Створіть README.md для репозиторію." + }, + { + url: null, + urlText: null, + taskText: "Опишіть свої враження від вивченого матеріалу." + }, + { + url: null, + urlText: null, + taskText: "Надішліть pull-request сюди Kottans/mock-repo пропонуючи зміни." + }, + ], +}, + +{ + id: 1, + taskName: 'Linux CLI and Networking', + taskExesice: [ + { + url: "https://linuxsurvival.com/linux-tutorial-introduction/", + urlText: "Linux Survival (4 modules)", + taskText: null + }, + { + url: "https://code.tutsplus.com/uk/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177", + urlText: "HTTP: Протокол, який повинен розуміти кожний веб-розробник - Частина 1", + taskText: null + }, + { + url: "https://code.tutsplus.com/uk/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155", + urlText: "HTTP: Протокол, який повинен розуміти кожний веб-розробник - Частина 2", + taskText: null + }, + ] +}, + +{ + id: 2, + taskName: 'VCS (hello gitty), GitHub and Collaboration', + taskExesice: [ + { + url: "https://www.coursera.org/learn/introduction-git-github", + urlText: "Introduction to Git and GitHub", + taskText: "Прослухайте тижні 3 і 4 курсу" + }, + { + url: "https://learngitbranching.js.org/", + urlText: "learngitbranching.js.org", + taskText: 'Завершіть курс "Основи. Переміщуємо роботу туди-сюди" та "Через origin – до зірок. Прогресивне використання Git Remotes"' + }, + ] +}, + +{ + id: 3, + taskName: 'Intro to HTML & CSS', + taskExesice: [ + { + url: "https://www.codecademy.com/learn/learn-html", + urlText: "Learn HTML(Eng)", + taskText: null + }, + { + url: "https://www.codecademy.com/learn/learn-css", + urlText: "Learn CSS(Eng)", + taskText: null + }, + { + url: "https://www.coursera.org/learn/html-css-javascript-for-web-developers", + urlText: "Intro to HTML & CSS", + taskText: "Прослухайте тижні 1 і 2 (до Introduction to Responsive Design) курсу " + }, + ] +}, + +{ + id: 4, + taskName: 'Responsive Web Design', + taskExesice: [ + { + url: "https://web.dev/i18n/en/responsive-web-design-basics/", + urlText: "Responsive web design basics", + taskText: null + }, + { + url: "https://www.youtube.com/playlist?list=PLM6XATa8CAG5mPV60dMmjMRrHVW4LmV2x", + urlText: "FLEXBOX. Вчимося верстати на флексах", + taskText: null + }, + { + url: "http://flexboxfroggy.com/", + urlText: "Flexbox Froggy", + taskText: null + }, + { + url: "https://www.youtube.com/watch?v=GV92IdMGFfA&list=PLM6XATa8CAG5pXQrW_kDaeZb_uIAMNZIm", + urlText: "CSS Grid Layout", + taskText: null + }, + { + url: "http://cssgridgarden.com/", + urlText: "Grid Garden", + taskText: null + }, + ] +}, + +{ + id: 5, + taskName: 'HTML & CSS Practice', + taskExesice: [ + { + url: null, + urlText: null, + taskText: 'Розробити випадаюче контекстне меню.', + }, + { + url: null, + urlText: null, + taskText: 'Ніякого JavaScript, лише HTML/CSS, дозволено використання препроцесорів', + }, + { + url: null, + urlText: null, + taskText: 'Ніяких зовнішніх бібліотек чи фреймворків', + }, + { + url: null, + urlText: null, + taskText: 'Підтримка веббраузера: лише Chrome (використовуйте найновіші фічі)', + }, + ] +}, + +{ + id: 6, + taskName: 'JavaScript Basics', + taskExesice: [ + { + url: "https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/4", + urlText: "Вступ до JS", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/", + urlText: "Basic JavaScript", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/", + urlText: "Basic JavaScript", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/", + urlText: "ES6 Challenges", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures/", + urlText: "Basic Data Structures", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-algorithm-scripting/", + urlText: "Basic Algorithm Scripting", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/", + urlText: "Functional Programming", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting", + urlText: "Algorithm Scripting Challenges ", + taskText: null + }, + ] +}, + +{ + id: 7, + taskName: 'Document Object Model - practice', + taskExesice: [ + { + url: "https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/5", + urlText: "Document Object Model Manipulation", + taskText: null + }, + { + url: "https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting", + urlText: "freecodecamp Algorithm Scripting Challenges", + taskText: null + }, + { + url: null, + urlText: null, + taskText: 'Практичне завдання: Впровадити інтерактивне side-menu без перезавантаження сторінки. Ви можете вибрати будь-яку тему: покемони, телефони, тощо.', + }, + ] +}, + +{ + id: 8, + taskName: 'Building a Tiny JS World (pre-OOP) - practice', + taskExesice: [ + { + url: "https://github.com/OleksiyRudenko/a-tiny-JS-world", + urlText: "тут", + taskText: 'Створіть a tiny JS world model, дотримуючись інструкцій' + }, + { + url: null, + urlText: null, + taskText: 'На цьому етапі вам потрібно виконати лише частину First approach. Ви повернетеся до свого Tiny JS World, щоб покращити його пізніше. Отже, поки що обмежтеся засобами, у яких ви відчуваєте себе впевнено.', + }, + ] +}, + +{ + id: 9, + taskName: 'Object oriented JS - practice', + taskExesice: [ + { + url: "https://www.youtube.com/watch?v=jgCiWIdUZ-s&list=PLM7wFzahDYnEltE-aVGhRHYPwIJn0Xquu&index=40", + urlText: "ООП 1 частина - Класи", + taskText: null + }, + { + url: "https://www.youtube.com/watch?v=e-3GS5-rak8&list=PLM7wFzahDYnEltE-aVGhRHYPwIJn0Xquu&index=46", + urlText: "ООП 2 частина - Прототипи", + taskText: null + }, + { + url: "https://github.com/kottans/frontend/blob/2022_UA/tasks/js-oop-frogger.md", + urlText: "Практика - Classic Frogger Game", + taskText: null + }, + { + url: null, + urlText: null, + taskText: 'Зареєструйтеся на Codewars, приєднайтеся до клану Kottans і досягніть 7 kyu.', + }, + ] +}, + +{ + id: 10, + taskName: 'OOP exercise - practice', + taskExesice: [ + { + url: "https://github.com/OleksiyRudenko/a-tiny-JS-world", + urlText: "звідси", + taskText: 'Удосконалюйте свій tiny JS world model, яку ви форкнули' + }, + { + url: null, + urlText: null, + taskText: 'На цей раз вам не потрібен форк, працюйте з наявним репо. Git зберігає історію для вас.', + }, + { + url: "https://github.com/kottans/frontend/blob/2022_UA/tasks/js-oop-frogger.md", + urlText: "link", + taskText: 'Ці матеріали будуть корисні -' + }, + ] +}, + +{ + id: 11, + taskName: 'Offline Web Applications - optional', + taskExesice: [ + { + url: 'https://learn.udacity.com/courses/ud899', + urlText: 'Offline Web Applications', + taskText: null, + }, + ] +}, + +{ + id: 12, + taskName: 'Memory pair game — real project!', + taskExesice: [ + { + url: null, + urlText: null, + taskText: 'У цьому розділі ви створите Memory - Pair Game — карткову гру, в якій всі картки кладуться на поверхню лицьовою стороною вниз, і кожен раз перевертаються по дві картки. Мета гри - знайти пари відповідних карток. Гра закінчується, коли буде підібрана остання пара.', + }, + { + url: "https://css-tricks.com/snippets/javascript/shuffle-array/", + urlText: 'Shuffle Array', + taskText: null, + }, + { + url: "https://www.w3schools.com/css/css3_transitions.asp", + urlText: 'CSS3 Transitions', + taskText: null, + }, + { + url: "https://davidwalsh.name/css-flip", + urlText: 'Flip Animation', + taskText: null, + }, + ] +}, + +{ + id: 13, + taskName: 'Website Performance Optimization - optional', + taskExesice: [ + { + url: "https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/", + urlText: 'Front-End Performance Checklist 2021', + taskText: 'Прочитайте це -', + }, + ] +}, + +{ + id: 14, + taskName: 'Friends App - real project!', + taskExesice: [ + { + url: "https://randomuser.me/", + urlText: 'Random User API ', + taskText: 'Створіть невеличку сторінку пошуку друзів у соціальних мережах з картками користувачів, пошуком, сортуванням та фільтрацією їх за віком, прізвищем, імям, або чим завгодно, за допомогою', + }, + ] +}, + +{ + id: 15, + taskName: 'Welcome to Kottans!', + taskExesice: [ + { + url: null, + urlText: null, + taskText: "We are community of developers who love to code and help each other.The course contains basics of front-end development: HTML, CSS, JavaScript, TypeScript and front-end frameworks. We plan to decrease the amount of lectures in favor of collective discussions, team projects & collective work. Nevertheless, doing that on one's own can be challenging when it comes to continuing without support from surrounding people, such situation really beats the motivation, especially when encountering either boring or impossible to do (at first glance) task or illogical aspect of programming language you can't just grasp.", + }, + ] +}, + + +]; +export default dataObj; diff --git a/submissions/YuliiaDyka/dom-api/index.html b/submissions/YuliiaDyka/dom-api/index.html new file mode 100644 index 0000000000..3423012ae1 --- /dev/null +++ b/submissions/YuliiaDyka/dom-api/index.html @@ -0,0 +1,86 @@ + + + + + + + + DOM + + +
+
+ +

Front-End Course. Self-Study

+
+
0%
+
+
+ Go to profile + Yuliiadd +
+
+ + + +
+
+

Welcome to Kottans!

+

+ We are community of developers who love to code and help each other. + The course contains basics of front-end development: HTML, CSS, JavaScript, TypeScript and front-end frameworks. We plan to decrease the amount of lectures in favor of collective discussions, team projects & collective work. Nevertheless, doing that on one's own can be challenging when it comes to continuing without support from surrounding people, such situation really beats the motivation, especially when encountering either boring or impossible to do (at first glance) task or illogical aspect of programming language you can't just grasp. +

+ Visit our website +
+ + Visit our website +
+
+
+
+ + + diff --git a/submissions/YuliiaDyka/dom-api/main.js b/submissions/YuliiaDyka/dom-api/main.js new file mode 100644 index 0000000000..d99e7016f3 --- /dev/null +++ b/submissions/YuliiaDyka/dom-api/main.js @@ -0,0 +1,114 @@ +'use strict' + +import dataObj from "./base.js"; + +const title = document.querySelector('.title__chapter'); +const nav_items = document.querySelectorAll('.nav__item'); +const nav = document.querySelector('.nav'); +const btn = document.querySelector('.btn'); +const buttonsDiv = document.querySelector('.buttons'); +const btn__home = document.querySelector('.home__btn'); +const checkboxes = document.querySelectorAll('.checkbox'); +const progressDig = document.querySelector('.progress__dig'); +const progressLine = document.querySelector('.progress'); +const totalProgress = 3; +const defaultTitle = 'Welcome to Kottans!'; +const defaultId = 15; + +let currentTitle = title.textContent; +let progressMax = checkboxes.length; + +// event listeners + +nav.addEventListener("click", getCurrrentContent); +btn__home.addEventListener('click', goToHomePage); + +// functions declaration + +function getCurrrentContent(e) { + nav_items.forEach(item => { item.classList.remove('selected')}); + let target = e.target; + let id; + switch (target.tagName) { + case "LI": + target.classList.add('selected'); + id = target.firstChild.id; + currentTitle = e.target.innerText; + changePage(currentTitle, id); + break; + + case "A": + target.parentElement.classList.add('selected'); + id = target.id; + currentTitle = e.target.innerText; + changePage(currentTitle, id); + break; + + case "INPUT": + getCurrentProgress(); + break; + }; +}; + +function getCurrentProgress() { + let currentProgress = 0; + checkboxes.forEach(item => { if (item.checked) { currentProgress++;}}); + progressDig.textContent = Math.floor((currentProgress / progressMax * 100)) + "%"; + progressLine.style.width = Math.floor((currentProgress / progressMax * 100)) + "%"; + if (currentProgress == totalProgress) { + alert("Вітаннячка, котан! Го на Стейдж 1)))") + }; +}; + +function changePage(currentTitle, id) { +const title = document.querySelector('.title__chapter'); +const description = document.querySelector('.description'); + +const newTitle = document.createElement("h4"); +newTitle.classList.add('title__chapter'); +newTitle.textContent = currentTitle; +title.replaceWith(newTitle); + +const newDesc = renderPage(id); +description.replaceWith(newDesc); + +btn.classList.remove('btn'); +btn.classList.add('hidden'); +buttonsDiv.classList.remove('buttons'); +buttonsDiv.classList.add('buttons__grid'); +}; + +function renderPage(id) { + const desc = document.createElement('div'); + desc.classList.add('description'); + const taskList = document.createElement("ol"); + taskList.classList.add('task'); + + const [{ taskExesice }]= dataObj.filter(task => task.id == id); + const taskExesiceList = taskExesice.map(task => { + const { taskText, url, urlText } = task; + return` +
  • + ${taskText ? taskText : ""} + ${url ? `${urlText}` : ""} +
    • + `; + }).join(''); + + taskList.innerHTML = taskExesiceList; + desc.append(taskList); + return desc; +} + +function goToHomePage() { + nav_items.forEach(item => { + item.classList.remove('selected'); + }); + changePage(defaultTitle, defaultId); + + document.querySelector('.task__item').classList.add('default'); + btn.classList.remove('hidden'); + btn.classList.add('btn'); + buttonsDiv.classList.remove('buttons__grid'); + buttonsDiv.classList.add('buttons'); +}; diff --git a/submissions/YuliiaDyka/dom-api/style.css b/submissions/YuliiaDyka/dom-api/style.css new file mode 100644 index 0000000000..69b2325292 --- /dev/null +++ b/submissions/YuliiaDyka/dom-api/style.css @@ -0,0 +1,409 @@ + +*{ + padding: 0; + margin: 0; + border: 0; +} +*,*:before,*:after{ + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; +} +:focus,:active{outline: none;} +a:focus,a:active{outline: none;} + +html,body{ + height: 100%; + width: 100%; + font-size: 100%; + line-height: 1; + font-size: 14px; + -ms-text-size-adjust: 100%; + -moz-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; + font-family: Verdana, sans-serif; + background: #485563; /* fallback for old browsers */ + background: -webkit-linear-gradient(to right, #29323c, #485563); /* Chrome 10-25, Safari 5.1-6 */ + background: linear-gradient(to right, #29323c, #485563); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ +} + + +a, a:visited{text-decoration: none;} +ul li{list-style: none;} + +/*-------------------- */ + +.header, +.aside, +.main { + border: 1px solid white; +} + +.wrapper { + display: grid; + height: 100vh; + grid-template-columns: 400px 1fr; + grid-template-rows: 150px 1fr; + grid-template-areas: + "header header" + "aside main"; + color: white; +} + +/* header */ + +.header { + grid-area: header; + display: inline-flex; + justify-content: space-between; + align-items: center; + padding: 0 3%; + +} +.title { + font-size: 30px; +} + +.logo { + display: flex; + justify-content: center; + align-items: center; +} + +.logo__img { + width: 80px; + height: 80px; + +} + +.logo__img * { + fill: white; + transition: 0.5s; +} + +.logo__img:hover * { + fill: tomato; +} + +.user__area { + display: grid; + justify-items: center; + row-gap: 5px; + +} + +.user__name { + font-size: 10px; +} + +.user__img{ + width: 60px; + transition: 0.5s; +} + +.user__img:hover { + box-shadow: 0px 0px 5px tomato; +} + +.progress__dig { + font-size: 10px; +} + +.progress__wrapper { + position: absolute; + width: 490px; + border-radius: 10px; + right: calc(50% - (510px / 2)); + top: 101px; + border: 1px solid white; +} + +.progress { + display: flex; + justify-content: center; + border-radius: 10px; + background-color: tomato; + width: 5%; + +} + +/* side-bar */ + +.aside { + grid-area: aside; + padding-left: 15px; + +} + +.stage__name{ + padding: 15px 0; + text-transform: uppercase; + font-size: 30px; +} + +.chapter { + display: inline-block; + width: 100%; + text-transform: uppercase; + font-size: 20px; + margin: 20px 0; + font-weight: 700; + transition: 0.5s; +} + +.chapter:hover { + color: tomato; +} + +.chapter:hover::after { + content: "PUSH"; + margin-top: -3px; + margin-left: 15px; + color:tomato; + background-color: white; + box-shadow: 0 5px 0 rgb(89, 71, 255); + +} + +.chapter::after { + content: "Done!"; + position: absolute; + display: inline-block; + text-align: center; + line-height: 16px; + justify-content: center; + font-size: 6px; + font-weight: 500; + background-color: gray; + color: #485563; + width: 40px; + height: 16px; + border-radius: 50px; + margin-left: 12px; + margin-top: 2px; +} + + +.checkbox { + opacity:0; +} + +.checkbox:checked + .chapter::after { + background-color: tomato; + color: white; +} + + +.link { + text-decoration: none; + color: white; +} + +.tomato { + color: tomato; +} + +.nav__item { + padding: 10px 0 10px 20px; + transition: 0.5s; + cursor: pointer; +} + +.nav__item:hover { + background-color:tomato; +} + +.selected { + background-color:tomato; +} + + +.nav__item:before { + content: ''; + background-image: url(img/paw-white.png); + width: 15px; + height: 15px; + position: absolute; + background-size: cover; + left: 18px; + +} + +/* content */ + +.main { + grid-area: main; + +} + +.section { + display: grid; + justify-items: center; + row-gap: 20px; + grid-template-rows: 80px 1fr 100px; + padding: 30px; +} + +.title__chapter { + font-size: 30px; + padding-top: 20px; +} + +.description { + max-width: 650px; + font-size: 20px; + line-height: 2rem; +} + +.default { + list-style-type: none; +} + +.btn { + height: 50px; + width: 150px; + font-size: 14px; + background-color: tomato; + border-radius: 50px; + display: flex; + justify-content: center; + align-items: center; + color: white; + transition: 0.5s; +} + +.flex { + display: flex; +} + +.buttons__grid { + display: grid; + max-width: 380px; + gap: 15px; + justify-content: space-between; + align-items:center; +} + +.btn:hover { + background-color: white; + color: black; + box-shadow: 10px 5px 0px tomato; +} + + +.hidden { + display: none; +} + +.task__item { + font-size: 18px; + line-height: 1.8rem; +} + +.buttons { + display: none; + max-width: 380px; + gap: 15px; + justify-content: space-between; + align-items:center; + +} + +/* mobile */ + +@media only screen + +and (min-width: 320px) +and (max-width: 767px) { + +.wrapper { + grid-template-columns: 140px 1fr; + grid-template-rows: 100px 1fr; +} + +.title, +.stage__name, +.chapter, +.title__chapter { +font-size: 80%; +} + +.title__chapter { + padding: 0; +} +.logo__img { + width: 45px; + height: 45px; +} + +.title { + font-size: 14px; + width: 50%; +} + +.user__img { + width: 35px; + height: 35px; +} + +.user__name { + display: none; +} + +.progress__wrapper { + width: 150px; + right: calc(50% - (155px / 2)); + top: 74px; +} + +.nav__item:before { + display: none; +} + +.nav__item { + padding-left: 0; + text-transform: none; + font-size: 9px; +} + +.chapter { + margin: 10px 0; +} +.chapter::after { + width: 30px; + margin-top: -3px; +} + +.section { + row-gap: 10px; + grid-template-rows: 37px 1fr 100px; + padding: 15px; + padding-left: 20px; + box-sizing: border-box; +} + +.task__item { + font-size: 10px; + line-height: 1rem; +} + +.tomato { + font-size: 10px; +} + +li.task__item::marker { + font-size: 10px; +} + +.description { + font-size: 10px; + line-height: 1.3em; +} +.btn { + height: 40px; + width: 100px; + font-size: 10px; +} + +} +