The client has an HTML form with two text fields: one to add and edit hours open and one to add and edit hours active. The format the hours are required to be in are a headache to manually edit. I've created several "dummy" selection fields to select days and hour ranges. I need a JavaScript program created to interact with the text fields and these dummy selection fields. My goal is to convert these text fields into hidden fields and interact with these hours using the dummy code only.
Attached is a basic html mockup of the form.
The JavaScript should perform the following functions:
1. Insert selected ranges into the appropriate text fields (either hours open or hours active) using the dummy selection fields. The format is "day:open-end" with several ranges separated by a semi-colon:
m:9-17;t:9-17;w:9-17;r:9-17;f:9-17;s:10-17;u:12-17
f:18-3;s:18-3;u:18-230
2. The script should also insert a "Human formatted" version into the displayopen or displayactive lists:
<ul id="displayopen">
<li>Monday 9:00 am - 5:00 pm <span>Remove</span></li>
<li>Tuesday 9:00 am - 5:00 pm <span>Remove</span></li>
<li>Wednesday 9:00 am - 5:00 pm <span>Remove</span></li>
<li>Thursday 9:00 am - 5:00 pm <span>Remove</span></li>
<li>Friday 9:00 am - 5:00 pm <span>Remove</span></li>
<li>Saturday 9:00 am - 5:00 pm <span>Remove</span></li>
<li>Sunday 9:00 am - 5:00 pm <span>Remove</span></li>
</ul>
3. If the "Remove" text is selected it should remove the corresponding list item and range in the text field.
4. Ensure that the entries in the text fields and lists are in the following order: Monday-Sunday, 6:00 am - Sunset
5. Amend existing text entries and list items if new entries overlap:
m:9-17 already exists, user tries to add m:15-18, existing entries are changed to m:9-17
u:18-230 already exists, user tries to add u:17-23, no changes made as those hours are fully inside existing range
6: Prevent invalid entries and provide an alert message:
m:17-13 => "Not a valid range"
7: Remove invalid syntax if field is already populated with incorrect code:
<input type="text" name="open" id="open" value="m-w:noon to 9:00 pm;f:18-3;f:18-3;s:18-3;u:18-0;u:0-230;Really active around the dance floor" />
becomes
<input type="text" name="open" id="open" value="f:18-3;s:18-3;u:18-230" />
8: Create corresponding list if text field is already populated:
<input type="text" name="open" id="open" value="f:18-3;s:18-3;u:18-230" />
<ul id="displayopen">
<li>Friday 6:00 pm - 3:00 am <span>Remove</span></li>
<li>Saturday 6:00 pm - 3:00 am <span>Remove</span></li>
<li>Sunday 6:00 pm - 2:30 am <span>Remove</span></li>
</ul>
This script should use best scripting practices (such as passing JSLint), be well structured to allow for easy modifications later if needed, be fast, efficient, cross browser compatible, and NOT use any JavaScript libraries. Some HTML can be modified/added/removed if needed, but work with me on it. This script will be inserted before the end body tag and near the end of the html to limit file requests to be as fast as possible.
We are tired of getting cookie cutter bids from people who post on projects, have not looked at the job requirements, and cannot do the job. Please provide a comment specific to this job in your bid.
Hello,
I have experience in various front end design and web design.
I'm very interested in your job post involving these skills.
I recently worked in an IT company based in India.
And I am a skilled designer cum programmer.
I have a good command on XHTML, CSS, JQUERY, Flash, PHP, AS3, GRAPHICS DESIGN.
I have worked as a designer and programmer for open source software like Wordpress, Joomla.
Please check your PMB.
I have an experience of 2 years in solving date related problems in my project works in a leading Software Solutions Company. Please contact me in my email id with the project details.