Maxymiser task 17

by Vladimir

HTML

<h2>Задача 1</h2>
<p>Дан список сообщений. Добавьте каждому сообщению кнопку для его удаления.<br />
    <strong>Используйте делегирование событий. Один обработчик для всего.</strong></p>
<p>В результате, должно работать вот так(кликните на крестик):
    <div id="skills-wrapper">
        <h3>My skills</h3>
        <div class="skill">HTML<div class="close">x</div></div>
        <div class="skill">Javascript<div class="close">x</div></div>
        <div class="skill">CSS<div class="close">x</div></div>
        <div class="skill">PHP<div class="close">x</div></div>
        <div class="skill">Python<div class="close">x</div></div>
    </div>
    
<h2>Задача 2</h2>
<p>Создайте дерево, которое по клику на заголовок скрывает-показывает детей</p>
    <ul class="tree">
    <li><span>Животные
        </span><ul>
            <li><span>Млекопитающие
                </span><ul>
                    <li><span>Коровы</span></li>
                    <li><span>Ослы</span></li>
                    <li><span>Собаки</span></li>
                    <li><span>Тигры</span></li>
                </ul>
            </li>
            <li><span>Другие
                </span><ul>
                    <li><span>Змеи</span></li>
                    <li><span>Птицы</span></li>
                    <li><span>Ящерицы</span></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><span>Рыбы
        </span><ul>
            <li><span>Аквариумные
                </span><ul>
                    <li><span>Гуппи</span></li>
                    <li><span>Скалярии</span></li>
                </ul>

            </li>
            <li><span>Морские
                </span><ul>
                    <li><span>Морская форель</span></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
<p>Требования:</p>
<ul><li>Использовать делегирование.</li>
<li>Клик вне текста заголовка (на пустом месте) ничего делать не должен.</li>
<li>При наведении на заголовок — он становится жирным,...

CSS

body {
    font-family: Verdana, sans-serif;
    font-size:14px;
}
#skills-wrapper {
    background: #C8FDFF;
    padding: 10px;
}
.skill {
    background: #FFF;
    margin: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    padding: 5px;
    position: relative;
    
}
.close {
    position: absolute;
color: #FFF;
background: #FF0000;
border-radius: 14px;
right: 10px;
top: 6px;
overflow: hidden;
width: 7px;
padding: 5px;
height: 7px;
font: 12px/4px Tahoma;
cursor: pointer;
text-align: center;
}
/*************************/
.tree span:hover {
    font-weight: 700;
}
/**********************/
#thumbs li {
     list-style: none;
    width: 100px;
    height:100px;
    display:block;
    float: left;
    padding: 2px;
    border:1px solid #000;
}
/********/
#contents {
    border:1px solid #000;
    background: #EEE;
    padding: 10px;
}

JavaScript

//* Cross-browser adding events
var addEvent, removeEvent;
 
if (document.addEventListener) { // проверка существования метода
	addEvent = function(elem, type, handler) {
		elem.addEventListener(type, handler, false);
	};
	removeEvent = function(elem, type, handler) {
		elem.removeEventListener(type, handler, false);
	};
} else {
	addEvent = function(elem, type, handler) {
		elem.attachEvent("on" + type, handler);
	};
	removeEvent = function(elem, type, handler) {
		elem.detachEvent("on" + type, handler);
	};
}

//* Задача 1
var skillWrapper = document.getElementById('skills-wrapper');
addEvent(skillWrapper, 'click', function(e) {
    var target = e && e.target || event.srcElement;
    if(target.className == 'close') {
       this.removeChild(target.parentNode);       
    }
});

//* Задача 2
var tree = document.querySelector('.tree');
addEvent(tree, 'click', function(e) {
    var target = e && e.target || event.srcElement;
    if(target.tagName === 'SPAN') {
        if(target.parentNode.children.length > 1) {
            // branches exist
            var branch = target.parentNode.children[1];
            branch.style.display = branch.style.display === 'none' ? 'block' : 'none';
        }
    }
});
addEvent(tree, 'dblclick', function(e) {
    var target = e && e.target || event.srcElement;
    if(target.tagName === 'SPAN') {
        e.preventDefault();
    }
});
//* Задача 3
var thumb = document.getElementById('thumbs');
addEvent(thumb, 'click', function(e) {
    e.preventDefault();
    var link;
    var target = e && e.target || event.srcElement;
    if(target.tagName === 'A') {
        link = target;
    } else if(target.tagName === 'IMG' && target.parentNode.tagName === 'A') {
        link = target.parentNode;
    } else {
        return;
    }
    document.getElementById('largeImg').setAttribute('src', link.href);
});

//* Задача 4
var contents = document.getElementById('contents');
addEvent(contents, 'click', function(e) {
    var target = e && e.target ||...