Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

added DOM-API homework #360

Merged
merged 8 commits into from
Sep 30, 2022
Merged

added DOM-API homework #360

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
22a6ad4
added DOM-API homework
Yuliiadd Aug 30, 2022
fc790ef
added empty strings in js files
Yuliiadd Aug 30, 2022
a9e763c
refactor: added mobile version
Yuliiadd Aug 30, 2022
c1f75be
refactor: fixed page background
Yuliiadd Aug 30, 2022
d98464f
refactor: update calcProgress with alert
Yuliiadd Aug 30, 2022
509b09c
modifided dataObj and moved css rules to style.css
Yuliiadd Sep 12, 2022
277a733
modified dataObj and render function
Yuliiadd Sep 17, 2022
d039b33
fixed coments for re-review
Yuliiadd Sep 30, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
221 changes: 221 additions & 0 deletions submissions/YuliiaDyka/dom-api/base.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,221 @@
"use strict"


const dataObj = {
'Git Basics':`<ol class="task">
<li class="task__item">
Прослухайте тижні 1 і 2 курсу <a class="link tomato" href="https://www.coursera.org/learn/introduction-git-github">Introduction to Git and GitHub</a>
</li>
<li class="task__item">
Пройдіть наступні рівні тут <a class="link tomato" href="https://learngitbranching.js.org/">learngitbranching.js.org:</a>
<ul>
<li class="task__item">Основи: Introduction Sequence, Ramping Up</li>
<li class="task__item">Віддалені репозиторії: Push & Pull -- віддалені репозиторії в Git!</li>
</ul>
</li>
<li class="task__item">
Створіть репозиторій та назвіть його kottans-frontend.
</li>
<li class="task__item">
Створіть README.md для репозиторію.
</li>
<li class="task__item">
Опишіть свої враження від вивченого матеріалу.
</li>
<li class="task__item">
Надішліть pull-request сюди Kottans/mock-repo пропонуючи зміни.
</li>
</ol>`,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid a tag name in the data list.
Get more interactive objects.

const taskList = [{
       id: 0,
       taskName: 'Git Basics',
       taskExesice: ['Опишіть свої враження від вивченого матеріалу.', 'Надішліть pull-request сюди Kottans/mock-repo пропонуючи зміни.', ....... ],
       linkHomePage: '.....',
       linkTaskPage: '.......'
}, ....]

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello) I fixed dataObj, but left the link in list items, because that was the only way I could keep the links to certain words in the description of the task

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

const dataObj = [
    {
        taskName: 'Git Basics',
        taskExesice: [   
            {
                url: "https://www.coursera.org/learn/introduction-git-github",
                urlText: "Introduction to Git and GitHub",
                taskText: null
            },   
            {
                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 пропонуючи зміни."
            },
        ]
    }, 
    
    {
        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
            },
        ]
    },
......
];

function renderPage(targetTaskName) {
    const desc = document.createElement('div');
    desc.classList.add('description');
    const taskList = document.createElement("ol");
    taskList.classList.add('task');

    const filteredTaskList = dataObj.filter(task => task.taskName === targetTaskName);
    const [{ taskExesice }] = filteredTaskList;

    const taskExesiceList = taskExesice.map(task => {
        const { taskText, url, urlText } = task;
        return`
            <li class="task__item">
                ${taskText ? taskText : ""}
                ${url ? `<a class="link tomato" href="${url}" target="_blank">${urlText}</a>` : ""}
            </li>
        `;
    }).join('');

    taskList.innerHTML = taskExesiceList;
    desc.append(taskList);
    return desc;
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@madmaxWMFU thank you! Its works!)))


'Linux CLI and Networking': `<ol class="task">
<li class="task__item">
<a class="link tomato" href="https://linuxsurvival.com/linux-tutorial-introduction/">Linux Survival (4 modules)</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://code.tutsplus.com/uk/tutorials/http-the-protocol-every-web-developer-must-know-part-1--net-31177">HTTP: Протокол, який повинен розуміти кожний веб-розробник - Частина 1</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://code.tutsplus.com/uk/tutorials/http-the-protocol-every-web-developer-must-know-part-2--net-31155">HTTP: Протокол, який повинен розуміти кожний веб-розробник - Частина 2</a>
</li>
</ol>`,

'VCS (hello gitty), GitHub and Collaboration':`<ol class="task">
<li class="task__item">
Прослухайте тижні 3 і 4 курсу <a class="link tomato" href="https://www.coursera.org/learn/introduction-git-github">Introduction to Git and GitHub</a>
</li>
<li class="task__item">
Пройдіть наступні рівні тут <a class="link tomato" href="https://learngitbranching.js.org/">learngitbranching.js.org:</a>
<ul>
<li class="task__item">Основи: Переміщуємо роботу туди-сюди</li>
<li class="task__item">Через origin – до зірок. Прогресивне використання Git Remotes</li>
</ul>
</li>
</ol>`,

'Intro to HTML & CSS':`<ol class="task">
<li class="task__item">
Прослухайте тижні 1 і 2 (до Introduction to Responsive Design) курсу <a class="link tomato" href="https://www.coursera.org/learn/html-css-javascript-for-web-developers">Intro to HTML & CSS</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://www.codecademy.com/learn/learn-html">Learn HTML(Eng)</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://www.codecademy.com/learn/learn-css">Learn CSS(Eng)</a>
</li>
</ol>`,

'Responsive Web Design':`<ol class="task">
<li class="task__item">
<a class="link tomato" href="https://web.dev/i18n/en/responsive-web-design-basics/">Responsive web design basics</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://www.youtube.com/playlist?list=PLM6XATa8CAG5mPV60dMmjMRrHVW4LmV2x">FLEXBOX. Вчимося верстати на флексах</a>
</li>
<li class="task__item">
<a class="link tomato" href="http://flexboxfroggy.com/">Flexbox Froggy</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://www.youtube.com/watch?v=GV92IdMGFfA&list=PLM6XATa8CAG5pXQrW_kDaeZb_uIAMNZIm">CSS Grid Layout</a>
</li>
<li class="task__item">
<a class="link tomato" href="http://cssgridgarden.com/">Grid Garden</a>
</li>
</ol>`,

'HTML & CSS Practice': `<ol class="task">
<li class="task__item">
Розробити випадаюче контекстне меню
</li>
<li class="task__item">
Ніякого JavaScript, лише HTML/CSS, дозволено використання препроцесорів
</li>
<li class="task__item">
Ніяких зовнішніх бібліотек чи фреймворків
</li>
<li class="task__item">
Підтримка веббраузера: лише Chrome (використовуйте найновіші фічі)
</li>
<li class="task__item">
Очікується, що попап матиме три стани залежно від дій користувача:
<ul>
<li class="task__item">Початковий стан: попап не видно</li>
<li class="task__item">Після натискання на кнопку popup-button попап стає видимим або прихованим, якщо воно вже відкрите</li>
<li class="task__item">Натисніть кнопку "More", щоб додати ще від 3 до 10 іконок і робить вміст попапу доступним для скролу</li>
</ul>
</li>
</ol>`,

'JavaScript Basics': `<ol class="task">
<li class="task__item">
<a class="link tomato" href="https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/4">Вступ до JS</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-javascript/">Basic JavaScript </a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/es6/">ES6 Challenges </a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-data-structures/">Basic Data Structures</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/basic-algorithm-scripting/">Basic Algorithm Scripting</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/functional-programming/">Functional Programming</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting">Algorithm Scripting Challenges </a>
</li>
</ol>`,

'Document Object Model - practice':`<ol class="task">
<li class="task__item">
<a class="link tomato" href="https://www.coursera.org/learn/html-css-javascript-for-web-developers/home/week/5">Document Object Model Manipulation</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://learn.freecodecamp.org/javascript-algorithms-and-data-structures/intermediate-algorithm-scripting">freecodecamp Algorithm Scripting Challenges</a>
</li>
<li class="task__item">
Практичне завдання: Впровадити інтерактивне side-menu без перезавантаження сторінки. Ви можете вибрати будь-яку тему: покемони, телефони, тощо.
</li>
</ol>`,

'Building a Tiny JS World (pre-OOP) - practice':`<ol class="task">
<li class="task__item">
Створіть a tiny JS world model, дотримуючись інструкцій <a class="link tomato" href="https://github.com/OleksiyRudenko/a-tiny-JS-world">тут</a>
</li>
<li class="task__item">
На цьому етапі вам потрібно виконати лише частину First approach. Ви повернетеся до свого Tiny JS World, щоб покращити його пізніше. Отже, поки що обмежтеся засобами, у яких ви відчуваєте себе впевнено.
</li>
</ol>`,

'Object oriented JS - practice':`<ol class="task">
<li class="task__item">
<a class="link tomato" href="https://www.youtube.com/watch?v=jgCiWIdUZ-s&list=PLM7wFzahDYnEltE-aVGhRHYPwIJn0Xquu&index=40">ООП 1 частина - Класи</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://www.youtube.com/watch?v=e-3GS5-rak8&list=PLM7wFzahDYnEltE-aVGhRHYPwIJn0Xquu&index=46">ООП 2 частина - Прототипи</a>
</li>
<li class="task__item">
<a class="link tomato" href="https://github.com/kottans/frontend/blob/2022_UA/tasks/js-oop-frogger.md">Практика - Classic Frogger Game</a>
</li>
<li class="task__item">
Зареєструйтеся на Codewars, приєднайтеся до клану Kottans і досягніть 7 kyu.
</li>
</ol>`,

'OOP exercise - practice':`<ol class="task">
<li class="task__item">
Удосконалюйте свій tiny JS world model, яку ви форкнули <a class="link tomato" href="https://github.com/OleksiyRudenko/a-tiny-JS-world">звідси</a>
</li>
<li class="task__item">
На цей раз вам не потрібен форк, працюйте з наявним репо. Git зберігає історію для вас.
</li>
<li class="task__item">
Ці матеріали будуть корисні - <a class="link tomato" href="https://github.com/kottans/frontend/blob/2022_UA/tasks/js-oop-frogger.md">link</a>
</li>
</ol>`,

'Offline Web Applications - optional': `<ol class="task">
<li class="task__item">
Удосконалюйте свій tiny JS world model, яку ви форкнули <a class="link tomato" href="https://learn.udacity.com/courses/ud899">Offline Web Applications</a>
</li>
</ol>`,

'Memory pair game — real project!':`<ol class="task">
<li class="task__item">
У цьому розділі ви створите Memory - Pair Game — карткову гру, в якій всі картки кладуться на поверхню лицьовою стороною вниз, і кожен раз перевертаються по дві картки. Мета гри - знайти пари відповідних карток. Гра закінчується, коли буде підібрана остання пара.
</li>
<li class="task__item">
Деякі з наведених нижче посилань можуть бути корисними:
<ul>
<li>
<a class="link tomato" href="https://css-tricks.com/snippets/javascript/shuffle-array/">Shuffle Array</a>
</li>
<li>
<a class="link tomato" href="https://www.w3schools.com/css/css3_transitions.asp">CSS3 Transitions</a>
</li>
<li>
<a class="link tomato" href="https://davidwalsh.name/css-flip">Flip Animation</a>
</li>
</ul>
</li>

</ol>`,
'Website Performance Optimization - optional':`<ol class="task">
<li class="task__item">
Прочитайте це - <a class="link tomato" href="https://www.smashingmagazine.com/2021/01/front-end-performance-2021-free-pdf-checklist/">Front-End Performance Checklist 2021</a>
</li>
</ol>`,

'Friends App - real project!': `<ol class="task">
<li class="task__item">
Створіть невеличку сторінку пошуку друзів у соціальних мережах з картками користувачів, пошуком, сортуванням та фільтрацією їх за віком, прізвищем, ім'ям, або чим завгодно, за допомогою <a class="link tomato" href="https://randomuser.me/">Random User API </a>
</li>
</ol>`,

}

export default dataObj;

madmaxWMFU marked this conversation as resolved.
Show resolved Hide resolved
Loading