Jquery day1 by BCS https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe DOM manipulation intro en-us 2017-06-01 15:25:15 UTC 2017-06-02 07:58:35 UTC hello@padlet.com LUKE exercise 2 BarcelonaCodeSchool https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174834946 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js" ></script>
</head>
<body>
   
    <div id = "exerciseTest">
        <p>HTML DOM Tutorial</p>
        <strong>w3resource</strong>
        <button id="button1">Click to see the effect</button> 
    </div>




<!--//this would be written in the seperate jQuery Script sheet-->
<script> function addDiv(){
    $('p').after('<div>This was added with jQuery</div>');
    }</script>
    
    
<script>addDiv()</script>


</body>
</html>]]> 2017-06-01 15:26:27 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174834946 LUKE exercise3 BarcelonaCodeSchool https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835084 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>

    <div id="exerciseTest">
        <ul>
            <li name="color" value="Red">Sun</li>
            <span> Sea</span>
            <li value="Cold Fusion">Sand</li>
            <li name="accept" value="Evil Plans">Hill</li>
            <span> Dale</span>
        </ul>
        <button id="button1">Click to see the effect</button>
    </div>




    <!--//this would be written in the seperate jQuery Script sheet-->
    <script>
        function findLi() {
            $('li:not([name="color"])').after('<span> with no color </span>');
        }

    </script>


    <script>
        findLi()

    </script>


</body>

</html>]]> 2017-06-01 15:27:13 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835084 LUKE exercise4 BarcelonaCodeSchool https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835186 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>

    <div>
        <div>
            <label>
<input type="radio" name="color" value="Red">
<span>value?</span>
<div></div>
</label>
        </div>
        <div>
            <label>
<input type="radio" name="color" value="Green">
<span>value?</span>
<div></div>
</label>
        </div>
        <div>
            <label>
<div type="radio" name="color" value="Red">
<span>value?</span>
<div></div>
</label>
        </div>
        <button id="button1">Click to see the effect</button>
    </div>




    <!--//this would be written in the seperate jQuery Script sheet-->
    <script>
        function findLi() {
            $('input[value="Red"]').next().text("the value is red!");
        }
    </script>


    <script>
        findLi()
    </script>


</body>

</html>]]> 2017-06-01 15:27:34 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835186 LUKE exercise5 BarcelonaCodeSchool https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835380 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>

    <body id="exerciseTest">
        <div id="tutorial-php">
            <p>PHP</p>
        </div>
        <div id="JAVAtutorial">
            <p>Java</p>
        </div>
        <div id="python-tutorial">
            <p>Python</p>
        </div>
        <button id="button1">Click to see the effect</button>
    </body>




    <!--//this would be written in the seperate jQuery Script sheet-->
    <script>
        function findbyAtt() {
            $("div[id$='tutorial']").css("background-color", "yellow");
        }

    </script>

    <script>findbyAtt()</script>]]> 2017-06-01 15:28:32 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835380 LUKE exercise 6 BarcelonaCodeSchool https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835494 <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</head>

<body>

    <div id="exerciseTest">
        <form>
            <label for="name">Child of form:</label>
            <input name="name" id="name">
            <fieldset>
                <label for="newsletter">Grandchild of form, child of fieldset:</label>
                <input name="newsletter" id="newsletter">
            </fieldset>
        </form>
        Sibling to form: <input name="none">
    </div>




    <!--//this would be written in the seperate jQuery Script sheet-->
    <script>
        function findDirect() {
            $("form").find("label").css({
                "border-color":"red",
                "border-width":"1px",
                "border-style":"dotted",
            })
        }

    </script>

    <script>
        findDirect()

    </script>



</body>

</html>]]> 2017-06-01 15:29:00 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174835494 Gosia Ex2 gosiapietron https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837397 <!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<title></title>
</head>
<body>

<div id = "exerciseTest">
<p>HTML DOM Tutorial</p>
<b>w3resource</b>
<button id="button1">Click to see the effect</button>
</div>


<script>
var addDiv= function(){
 $("p").before("This was added with jQuery")

}
addDiv()

</script>
</body>
</html>

]]> 2017-06-01 15:37:48 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837397 Gosia Ex3 gosiapietron https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837445 <!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<title></title>
<script>
function findLi(){
 $('li[name!="color"]').after("<span>with no color </span>")
}
</script>
</head>
<body>

<div id = "exerciseTest">
<ul>
<li name="color" value="Red">Sun</li>
<span> Sea</span>
<li value="Cold Fusion">Sand</li>
<li name="accept" value="Evil Plans">Hill</li>
<span> Dale</span>
</ul>

<button onclick="findLi()" id="button1">Click to see the effect</button>
</div>

]]> 2017-06-01 15:38:05 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837445 Gosia Ex4 gosiapietron https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837478 <!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<title></title>
</head>
<body>

<div>
<div>
<label>
<input type="radio" name="color" value="Red">
<span>value?</span>
<div></div>
</label>
</div>
<div>
<label>
<input type="radio" name="color" value="Green">
<span>value?</span>
<div></div>
</label>
</div>
<div>
<label>
<div type="radio" name="color" value="Red">
<span>value?</span>
<div></div>
</label>
</div>
<button onclick='FindRed()' id="button1">Click to see the effect</button>
</div>


<script>

var FindRed= function(){
 $('input[value="Red"]').next().html("the value is red")
}



</script>
</body>
</html>]]> 2017-06-01 15:38:18 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837478 Gosia Ex5 gosiapietron https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837514 <!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<title></title>
</head>
<body>

<body id="exerciseTest">
<div id="tutorial-php">
<p>PHP</p>
</div>
<div id="JAVAtutorial">
<p>Java</p>
</div>
<div id="python-tutorial">
<p>Python</p>
</div>
<button onclick='findbyAttr()' id="button1">Click to see the effect</button>
</body>


<script>
var findbyAttr= function(){
 $('div[id$="tutorial"]').css('background-color','yellow')
}




</script>
</body>
</html>]]> 2017-06-01 15:38:31 UTC https://padlet.com/BarcelonaCodeSchool/snzcilq6ifwe/wish/174837514