This is the link for the bootstrap that has been used for the layout of the calculator https://getbootstrap.com/.
The Main Interface
This code contains the interface of the application. This code will display the images to the body. To create this just write these block of code inside the text editor and save this as index.html.
- <!DOCTYPE html>
- <html lang="en">
- <meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
- <link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
- <nav class="navbar navbar-default">
- " rel="nofollow">https://sourcecodester.com">Sourcecodester</a>
- </a> </nav>
- <div class="col-md-6 well">
- <hr style="border-top:1px dotted #ccc;"/>
- <img id="target" height="400px" width="600px"/>
Creating the Script
This code contains the script of the application. This code will render a random images to the page body. To do this just copy write the code as shown below inside the text editor and save it as script.js.
- var images = [
- 'image 1.jpg',
- 'image 2.jpg',
- 'image 3.jpg'
- var length = images.length;
- var rand = Math.floor(length*Math.random());
- document.getElementById('target').src="images/" + images[rand];