yclim95/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Console (JS)

document.querySelector('img')
const ourImage = document.querySelector('img');
ourImage.setAttribute('src', '');
ourImage.setAttribute('width', '100');
ChangeImage function
function changeImage(url)
{
  document.querySelector('img').setAttribute('src', url);
}

changeImage('');
Dynamically change the background color per click
const htmlBody = docuement.querySelector('body');
htmlBody

const randomClickFunction = function () {
  const colors = ["blue", "green", "yellow", "red"];
  
  const randomIndex = Math.floor(Math.random() * colors.length);
  const randomColor = colors[randomIndex];
  htmlBody.style.backgroundColor = randomColor;
  console.log("The user clicked & set the color to: " + randomColor);
}

randomClickFunction();

htmlBody.onclick = randomClickFunction(); //Event listener
HTML, CSS & JavaScript
<html>
  <head>
    <title> Sample Page </title>
    <style>
      button
      {
      background-color: transparent;
      border: 1px solid navy;
      padding: 20px;
      font-size: 1.4rem;
      }
      button:hover
      {
      background-color: navy;
      border: none;
      color: white;
      }
    </style>
  </head>
  <body>
    <button>CLICK</button>
    <div class = "paragraph"></div>
    
    <script>
      function newPara()
      {
        const p = document.createElement('p');
        p.innerText = "Clicked the button";
        document.querySelector("paragraph").appendChild(p);
      }
      document.querySelector('button').onClick = newPara;
    </script>
  </body>
</html>
Bookmarklet Manager

Bookmarlet -> A browser Bookmark that execute JavaScript Instructions
Bookmarklet  (Enable Right click, select, copy and paste)

To install bookmkarlet code, drag and drop your JS code to your bookmark toolbar.
To execute your bookmark code, click on the bookmark.
javascript:void(document.body.setAttribute("oncontextmenu","return true"));
javascript:void(document.body.setAttribute("onselectstart","return true"));
javascript:void(document.body.setAttribute("ondragstart","return true"));
javascript:void(document.body.setAttribute("onmousedown","return true"));
javascript:void(document.body.setAttribute("oncut","return true"));
javascript:void(document.body.setAttribute("oncopy","return true"));
javascript:void(document.body.setAttribute("onpaste","return true"));
javascript:void(document.body.removeAttribute("oncontextmenu"));
Resource


Create your own Bookmarklet