Pasted

<!DOCTYPE html>
<html>
<head>
    <style>
        body 
        {
        background-image: url("https://i.ytimg.com/vi/cNycdfFEgBc/maxresdefault.jpg");
        color: blue;
        }
    </style>
    <script>
        function myFunction() {
            var x = document.getElementById("myInput").value;
            document.getElementById("demo2").innerHTML = "You wrote: " + x;
        }
        function changeImage() {
            var image = document.getElementById('myImage');
            if (image.src.match("On")) {
                image.src = "Off.gif";
            } else {
                image.src = "On.gif";
            }
        }
    </script>
</head>
<body>
 
<img id="myImage" onclick="changeImage()" src="Off.gif" width="100" height="180">
 
<p>Click The Picture Above To Turn On / Off </p>
 
<p>Write here and see what happens</p>
 
<input type="text" id="myInput" oninput="myFunction()">
 
<p id="demo2"></p>
 
 
<p id="demo">JS Is Capable of changing HTML Stuff.</p>
 
<button type="button" onclick='document.getElementById("demo").innerHTML = "OMG IT CHANGED !!!"'>Click Here </button>
 
<p id="demo3">JS Can Change css Stuff</p>
 
<button type="button" onclick="document.getElementById('demo3').style.fontSize='35px'">Click Here Also </button>
 
 
</body>
</html>