Return to Question

deleted 147 characters in body; edited tags; edited title

Source Link

edited Jan 16, 2016 at 15:10

Quill

12.1k
5
41
94

Review my first JavaScript code Updating clock with Canvas

index.html##index.html

mainScript.js##mainScript.js

utilities.js##utilities.js

Is this code easy to understand to you? What should I change in my workflow? Sorry to anger any JavaScript people here, I am very new to web development.

Review my first JavaScript code

index.html

mainScript.js

utilities.js

Is this code easy to understand to you? What should I change in my workflow? Sorry to anger any JavaScript people here, I am very new to web development.

Updating clock with Canvas

##index.html

##mainScript.js

##utilities.js

Source Link

asked Mar 19, 2013 at 18:43

Joe Slater

Review my first JavaScript code

I am very new to JavaScript and was wondering what kind of process or design pattern is most common among JavaScript developers.

So far I have following code

index.html

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8"/>
        <title>Interactive Guide</title>
        
        <!--------------------------CSS/ FONT ASSETS------------------------->
        <link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link href='//fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="CSS/mainStyle.css">
        <!------------------------------------------------------------------->
        
        
        <!----------------------------JAVASCRIPT ASSETS---------------------->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
        <script src="./JavaScript/utilities.js"></script>
        <script src="./JavaScript/mainScript.js"></script>
        <!--[if lt IE 9]>
        <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <!-------------------------------------------------------------------->
        
    </head>

    <body>
    <div id="wrap"> 
        <div class="upper">
            <div id="heading1">Copyright and Plagiarism</div>
            <div id="time"></div>
        </div>
        
        <div class="content">
            <canvas id="myCanvas" width="1024" height="550">Get support for canvas- go and get Chrome dude!</canvas>
            <!--<div id="rect"></div>-->
        </div>
        
        <footer>
            Ankur Sharma - Copyright 2013
        </footer>
    </div>  
    </body>
</html>

mainScript.js

window.addEventListener('load', windowLoaded, false);

function windowLoaded()
{
    updateClock();
    iniScene();
}

function iniScene()
{
    var canvas = getCanvas();
    iniInterface(canvas.context, canvas.canvasH, canvas.canvasW);
}

utilities.js

//---------------------------------UTILITY FUNCTIONS------------------------------

function getCanvas()
{
    if(canvas)
    {
        return canvas;
    }
    else
    {
        var canvas = {};
        canvas.node = document.getElementById("myCanvas");
        canvas.context = canvas.node.getContext('2d');
        canvas.canvasH = canvas.node.height || 500;
        canvas.canvasW = canvas.node.width || 800;
        return canvas;
    }
}

function iniInterface(ctx, canvasH, canvasW)
{   
    drawLine(ctx, 50, canvasH-50, canvasW-50, canvasH-50, 'rgb(255, 255, 255)', 'rgb(255, 255, 255)');
}

//-------------------------------OBJECTS----------------------------//



//-------------------------------DRAW FUNCTIONS---------------------//
function drawLine(ctx, sX, sY, eX, eY, sRGB, fRGB, lWidth, capStyle)
{
    ctx.beginPath();
    ctx.moveTo(sX, sY);
    ctx.lineTo(eX, eY);
    ctx.lineWidth = lWidth||5;
    ctx.strokeStyle = 'rgb(49, 129, 48)';
    ctx.lineCap = 'round';
    ctx.stroke();
    ctx.closePath();
}

 function loadImage(ctx, src, x, y, width, height)
 {
    var img = new Image();
    img.onload = function()
    {
        ctx.drawImage(img, x, y, width, height);
    };
    img.src = src;
 }
 
 //---------------------------------TIME---------------//
 
 function updateClock()
{
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var seconds = currentTime.getSeconds();
    
    if(minutes<10)
    {
        minutes = "0"+minutes;
    }
    if(seconds<10)
    {
        seconds = "0"+seconds;
    }
    if(hours<10)
    {
        hours = "0"+hours;
    }
    $("#time").html(hours + ":" + minutes + ":" + seconds);
    
    if(hours>11)
    {
        $("#time").append(" PM");
    }
    else
    {
        $("#time").append(" AM");
    }
    setTimeout(updateClock, 1000);
}

Is this code easy to understand to you? What should I change in my workflow? Sorry to anger any JavaScript people here, I am very new to web development.

javascript