Untitled



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Title</title>
    <script src="" ></script>
    <link id="myId" href="" rel="stylesheet" />

    <style>
        #d1{
            background-color: lightgrey;
            height:400px;
            padding:25px;
        }
        #d2{
            width: 200px;
            height: 200px;
            float: left;
            background-color: green;
        }
        #d3{
            width: 200px;
            height: 200px;
            float: left;
            background-color: blue;
            margin-left: 50px;
        }
    </style>

</head>
<body>
<div id="d1">

    <p>Paragraph in D1 <strong>BOLDED!</strong> </p>
    <div id="d2"></div>
    <div id="d3"></div>

</div>
<!-- -->
<span class="s">My custom span</span>
<p class="p1">Paragraph with class</p>

<p id=p1 class="mc1" title=first>This is a paragraph.</p>
<p id=p2 class="mc1" title=second>This is another paragraph.</p>
<div id=d4 class="mc2" title=third> This is a divider tag</div>

<script>
    /*
    if you single click on d1 div,changs color to light blue
     if you double click on d1 div,changes back to lightgrey

  */
    var d1 = document.body.childNodes[1];

    var singleClick = function() {
        if(d1.style.backgroundColor == "lightblue")
            return;

        d1.style.backgroundColor = "lightblue" ;
        alert("you've changed bg color to lightblue\ndouble click to change back"+"to original color" );
    };

    var contextMenu = function () {
        d1.style.backgroundColor = "lightgrey" ;

    }

    d1.onclick = singleClick;
    d1.addEventListener('contextmenu',contextMenu);

</script>

</body>
</html>