Please you help me write a fruit application like color application sample:

index.html:

body {

margin: 0;

padding: 0;

font-family: Arial, sans-serif;

}

h1, h2 {

text-align: center;

margin-top: 0;

}

p {

margin: 0;

}

a {

text-decoration: none;

display: inline-block;

width: 100px;

height: 100px;

margin: 5px;

background-size: cover;

}

.image {

text-align: center;

}

/* Styling for the fruit links */

a[href="#apple"] {

background-image: url("images/apple-thumbnail.jpg");

}

a[href="#banana"] {

background-image: url("images/banana-thumbnail.jpg");

}

a[href="#orange"] {

background-image: url("images/orange-thumbnail.jpg");

}

a[href="#grape"] {

background-image: url("images/grape-thumbnail.jpg");

}

a[href="#watermelon"] {

background-image: url("images/watermelon-thumbnail.jpg");

}

a[href="#kiwi"] {

background-image: url("images/kiwi-thumbnail.jpg");

}

a[href="#mango"] {

background-image: url("images/mango-thumbnail.jpg");

}

a[href="#pear"] {

background-image: url("images/pear-thumbnail.jpg");

}

color.js:

function get(id) { return document.getElementById(id); } var darkMode = false; window.onload = function(e) { setup(); gotoPage(); } window.onhashchange = gotoPage; function setup() { var links = get('home').getElementsByTagName('a'); for (var i=0; i 1) { page = hash.substr(1); } var sections = document.getElementsByTagName('section'); for (var i=0; i