added DOM-API homework

[Yuliiadd]

DOM-API

Demo
Code base

The code is submitted in a dedicated feature branch.

Only code files are submitted.

Please, review.

[github-actions]

Hey!

Congratulations on your PR! 😎😎😎

Let's do some self-checks to fix most common issues and to make some improvements to the code before reviewers put their hands on the code.

Go through the requirements/most common mistakes listed/linked below and fix the code as appropriate.

If you have any questions to requirements/common mistakes feel free asking them here or in Students' chat.

When you genuinely believe you are done put a comment stating that you have completed self-checks and fixed code accordingly.

Also, be aware, that if you would silently ignore this recommendation, a mentor can think that you are still working on fixes. And your PR will not be reviewed. 😒

Please, make sure you haven't made common mistakes

Universal recommendations:

• Give variables and functions meaningful names. Avoid generic names like item, element, key, object, array or their variations. Exception: helper functions that are specifically and intentionally designed to be multipurpose.
• Function names should start with a verb as they denote actions; variables are normally nouns; boolean variables/functions start with is, does, has etc; variable containing multiple entities and functions returning lists contain entity name in plural form.
• Have consistent code style and formatting. Employ Prettier to do all dirty work for you.
• Use common sense or seek for an advice whenever requirements look ambiguous or unclear.

Also take a note of the requirements above and follow them in all your future projects.

By the way, you may proceed to the next task before this one is reviewed and merged.

Sincerely yours,
Submissions Kottachecker 😺

[Yuliiadd]

@OleksiyRudenko
Hi) Is everything good with my PR? Should I make some changes in it?

[madmaxWMFU]

Good work! See some comments below.

[madmaxWMFU]

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: '.......'
}, ....]

[Yuliiadd]

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

[madmaxWMFU]

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;
}

[Yuliiadd]

@madmaxWMFU thank you! Its works!)))

[madmaxWMFU]

Suggested change

	dataObj.filter(function(item) {
	return item.taskName == taskName;
	})[0].taskExesice.forEach(item => {
	const listItem = document.createElement("li");
	listItem.classList.add("task__item");
	listItem.innerHTML = item;
	taskList.append(listItem);
	});
	const filteredTaskList = dataObj.filter(task => task.taskName === taskName)
	const [{ taskExesice }] = filteredTaskList;
	taskExesice.forEach(item => {
	const listItem = document.createElement("li");
	listItem.classList.add("task__item");
	listItem.innerHTML = item;
	taskList.append(listItem);
	});

[madmaxWMFU]

Your menu with tasks is static. If someone who didn't know about your functionality changes the task name in dataObj, then we have no working link.
Add a property taskId to dataObj and compare results by id

[Yuliiadd]

@madmaxWMFU Hi! Please, re-review my DOM task

[madmaxWMFU]

const

[madmaxWMFU]

Suggested change

	const task = dataObj.filter(task => task.id == id);
	const taskExesiceList = task[0].taskExesice.map(task => {
	const [{ taskExesice }] = dataObj.filter(task => task.id == id);
	const taskExesiceList = taskExesice.map(task => {

[madmaxWMFU]

3 set like a variable
Maybe totalParts

[madmaxWMFU]

15 also a variable

[madmaxWMFU]

Why do you write and return nothing? I think it must be delete.

[Yuliiadd]

@madmaxWMFU Hi! I corrected main.js based on your comments. Please, re-review.

[madmaxWMFU]

Great, I approve of your work. Good luck with future tasks!