Chapter 08 codes.txt

CSS:
        .box {
            width: 200px;
            border: 5px solid #ddd;
            padding: 20px;
            margin: 10px;
        }

HTML:
    <div class="main">
        <div class="div1">Hello World 1</div>
        <div class="div2"><span>Hello World 2</span></div>
        <div class="div3" id="div3">Hello World 3</div>
        <div class="div4">Laurence Svekis</div>
        <input>
        <div>
            <button id="btn1">1</button>
            <button id="btn2">2</button>
        </div>
        <button id="btn3">3</button>
    </div>
   

JavaScript Code:

$('#btn1').click(() => {
    const children = $('.main').children();
    console.log(children);
});


$('#btn2').click(() => {
    const sel = $('input').val();
    if (sel) {
        console.log(sel);
        $('.main').find(sel).css('color', 'blue');
    }
});

$('#btn3').click(() => {
    $('.main div').find('*').css('background-color', 'purple');
});
-----------------------------------------------------------------------

CSS
        .box {
            border: 1px solid #ddd;
            padding: 5px;
            color: red;
        }

        .box1 {
            border: 1px solid #ddd;
            padding: 5px;
            color: blue;
        }

        .box2 {
            border: 1px solid #ddd;
            padding: 5px;
            color: green;
        }

HTML:
    <nav>
        <div class="main">
            <div xclass="div1">Hello World 1</div>
            <div class="div2"><span>Hello World 2</span></div>
            <div class="div3" id="div3">Hello World 3</div>
            <div class="div4">Laurence Svekis</div>
            <input>
            <button id="btn1">1</button>
            <button id="btn2">2</button>
            <button id="btn3">3</button>
            <span>Hello</span>
        </div>
    </nav>
    <button id="btn4">4</button>
    <button id="btn5">5</button>


JavaScript Code:
$('#btn1').click(() => {
    const siblings = $('#btn1').siblings();
    console.log(siblings);
    siblings.addClass('box');
});

$('#btn2').click(() => {
    $('.box').removeClass('box');
});

$('#btn3').click(() => {
    $('#btn1').siblings('div').addClass('box');
});

$('#btn4').click(() => {
    $('#btn1').next().addClass('box');
    $('#btn1').nextAll('span').addClass('box');
    $('#div3').nextUntil('button').addClass('box1');
});

$('#btn5').click(() => {
    $('#btn1').prev().addClass('box2');
    $('#btn1').prevAll('span').addClass('box2');
    $('#div3').prevUntil('button').addClass('box2');
});
---------------------------------------------------------------

CSS:
        .btn {
            background-color: black;
            color: white;
            font-size: 0.6em;
        }

        .output span {
            margin: 5px;
        }

        .active {
            color: red;
        }
HTML:
    <div class="output"></div>


JavaScript Code:
const arr = ['Laurence', 'Larry', 'Mike', 'Dave', 'Jane', 'Joe', 'Lisa', 'Jack'];

$.each(arr, (ind, val) => {
    let html = `${ind + 1} ${val}`;
    $('<div>').html(html).addClass('box').appendTo('.output');
});

$('.box').each(function () {
    $ele = $(this);
    $par = $ele.parent();
    const temp = $ele.text();
    $ele.empty();
    $('<span>').text(temp).appendTo($ele);
    $btn1 = $('<button>').text('Up').addClass('btn').appendTo($ele);
    $btn2 = $('<button>').text('Down').addClass('btn').appendTo($ele);

    $btn1.click(function () {
        $sel = $(this).parent().prev();
        if ($sel.length > 0) {
            $(this).parent().addClass('active');
            $(this).parent().slideUp('slow', function () {
                $(this).removeClass('active');
                $(this).insertBefore($sel);
                $(this).slideDown('fast');
            });
        }
    });

    $btn2.click(function () {
        $sel = $(this).parent().next();
        if ($sel.length > 0) {
            $(this).parent().addClass('active');
            $(this).parent().slideUp('slow', function () {
                $(this).removeClass('active');
                $(this).insertAfter($sel);
                $(this).slideDown('fast');
            });
        }
    });
});