Web Page #1

In this example below you will see how to do a Web Page #1 with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by TenaciousTerrier, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright TenaciousTerrier ©
  • HTML
  • CSS
  • JavaScript
    <body>
  <h1> Image 1: </h1>
  <div class = "contents">
    <blockquote class="imgur-embed-pub" lang="en" data-id="m7q9gsk"><div class = "chess"><a href="https://imgur.com/m7q9gsk"><img src="https://i.imgur.com/m7q9gsk.png" title="source: imgur.com" /></a></blockquote>
    </div> 

  </div>
      <h1> Algorithm Description: 
  </h1>
    <p> The algorithm I designed does the following: 
      <ul>
        <li> Creates a 256 X 256 pixel image. </li>
        <li> Turns the image into a grid of black and white squares with width and height of 16 squares using the following test for each pixel (i and j determine which square the pixel is in): </li>
          <li>
          (width > 16*(i-1) && width < 16*i) && (height > 16*(j-1) && height < 16*j) && (num % 2 === 0) </li>
      </ul>
    </p>
  <h1> Javascript Code </h1>
        <pre> // Draw Chessboard
var output = new SimpleImage(256,256);
for (var pixel of output.values()) {
    var num = 1;
    var width = pixel.getX();
    var height = pixel.getY();
    
    // Create black-white pattern of chessboard
    for (i = 1; i <= 16; i++) {
        num += 1;
        for(j = 1; j <= 16; j++) {
            num += 1;
            if((width > 16*(i-1) && width < 16*i) && (height > 16*(j-1) && height < 16*j) && (num % 2 === 0)) {
                    pixel.setRed(255);
                    pixel.setGreen(255);
                    pixel.setBlue(255);
            }
        }
    }
    
    // Create Black Border
    if(width == 255 || height == 255 || width === 0 || height === 0) {
        pixel.setRed(0);
        pixel.setGreen(0);
        pixel.setBlue(0);        
    }
}

 //print whatever you made
 print(output);
        </pre>
 </body>

/*Downloaded from https://www.codeseek.co/TenaciousTerrier/web-page-1-Xmxepr */
    


/*Downloaded from https://www.codeseek.co/TenaciousTerrier/web-page-1-Xmxepr */
    

Comments