JAVASCRIPT

Please, I need help making the code more unobtrusive by extracting JavaScript and CSS into external files.

For upvote, I need this separated into 3 working files that work together the same way as this single file runs. The other 2 answers DID NOT WORK

#range {

position:absolute;

top: 0px;

left: 0px;

background: url(bluesky2.jpg);

cursor: crosshair;

width: 100%;

height: 100%;

}

#img1 {

position:absolute;

border:none;

left: 0px;

top: 100px;

padding: 10px;

}

#score {

font: 16px normal arial, verdana, sans-serif;

color: yellow;

padding: 10px;

}

var timer1 = null;

var el = null;

var score = 0; // number of 'hits'

var shots = 0; // total 'shots'

function moveIt() {

// animate the image

if(parseInt(el.style.left) > (screen.width - 50)) el.style.left = 0;

el.style.left = parseInt(el.style.left) + 6 + 'px'; //el.style.left = 100 + (80 * Math.sin(parseInt(el.style.top)/50)) + 'px';

el.style.top = 100 + (80 * Math.sin(parseInt(el.style.left)/50)) + 'px';

// set the timer

timer1 = setTimeout(moveIt, 30);

}

function scoreUp() {

// increment the player's score

score++;

}

function scoreboard() {

// display the scoreboard

document.getElementById("score").innerHTML = "Shots: " + shots + " Score: " + score;

}

window.onload = function() {

el = document.getElementById("img1");

// onClick handler calls scoreUp()

// when the image is clicked

el.onclick = scoreUp;

// update total number of shots

// for every click within play field

document.getElementById("range").onclick = function() {

shots++;

// update scoreboard

scoreboard();

}

// initialize game

scoreboard();

el.style.left = '50px';

moveIt();

}