SVG javascript UI project (San Francisco)


Take any old HTML5 browser.

Make a basic HTML page with:

1 scalable SVG rectangle

1 SAVE button

1 RESET button

1 RECALL button

When you mouse down within the rectangle a small SVG circle appears.

You can drag the circle around the rectangle only.

When you touch the rectangle again another small SVG circle appears.

When you drag this circle around it can partially (but not fully) overlap the other circle so both are visible and either can be dragged.

Hit the SAVE button and:

a) the relative coordinates, relative size and layer of the circles are saved to a cookie (mimicking saving to a database)

b) the rectangle is cleared of any circles -- this is also the function of the RESET button

On your desktop computer resize the window to simulate a device with a different screen size.

The rectangle should also resize.

Hit the RECALL button and read the info from the cookie and insert circles at the same relative coordinates and same relative size and same layering as with the previously sized window.

Drag the circles around.

Repeat SAVE process.

Resize window.


This needs to be done 2 ways:

1) old school javascript -- no jQuery

2) using [url removed, login to view]

If you are a pro at this and have your own simple methodology -- great.

Emphasis on simple.


You MUST EASILY be accessible to San Francisco for face to face.

We are right in the middle of the city by a MUNI subway stop.

Code needs to be well commented.

You must assign the rights for the code for payment.

This leads to a position developing SVG UI's that work like flash and interact with a SQL Server DB.

$100 bonus points if you can do this as a MS Visual Studio (Express for Web is fine also) project (yeah, yeah, I know, but this has to do with Azure) and are experienced in programming apps in this environment. The backend is .NET (please - no rails sermons).

Skills: Javascript

See more: svg desktop, work at subway, web azure, ui programming, svg 2, school for computer programming, pro html5 programming, programming methodology, computer programming school, computer programming apps, ms azure, desktop ui, web developing studio, svg programming, basic html programming, visual basic for apps, svg javascript html, small javascript project, sermons, school pro, school html project, san francisco, old school, html5 svg, html5 sql

About the Employer:
( 0 reviews ) United States

Project ID: #4966347

2 freelancers are bidding on average $413 for this job


hi, i'm interested to work on , pm to talk more about details ----------------------------------------------------------------------------------

$526 USD in 10 days
(3 Reviews)

Hi! I have done a very similar project, which was about dragging/arranging awards in a room, using HTML5 Canvas. I can send you a sample of my work. Regards

$300 USD in 2 days
(4 Reviews)