JavaScript Web Solutions – Project Examples

Solutions that run in the browser: an expression parser built into someone else's platform, an interface for editing data without touching the source file, improvements to an existing image tool, a form that remembers what was typed, a category filter that works without reloading the page, and barcode scanning with a phone camera. What they have in common is that everything seems to just work for the user, while behind it is carefully written JavaScript that fits into what already exists. I do this kind of work as part of my web development service.

Standalone JavaScript parser for calculations and conditional expressions

Built in the third quarter of 2022.

Problem

The client envisioned a fast and clear JavaScript parser for arithmetic calculations, to be built into a no-code platform as a plugin. The parser had to take variables passed in JSON form — numbers, arrays and objects — and use them in expressions that stay clear and simple to display, for example (a+b) (c[1]+c[2]) * (d.green + d.blue). Conditional expressions were also wanted, such as if(a>3, d.green, d.blue). The biggest challenge was the requirement that all functionality fit into a single library, with no external dependencies at all.

Solution

A standalone parser was built that performs arithmetic on JSON variables and understands and executes conditional expressions:

  • variable interpretation: variables passed through JSON are reliably read and separated, including arrays and nested objects;
  • clear expressions: a user interface makes it easy to build and interpret expressions;
  • conditional logic: conditional expressions give the parser considerably more flexibility;
  • no dependencies: the parser is fully standalone, so it can be built into the no-code platform without obstacles.

Technologies used

Result

The platform got a library that evaluates expressions with variables and conditions without pulling in a single external dependency.

Interface for editing an XML activity schedule

Built in the first quarter of 2021.

Problem

A weekly schedule of activities and their parameters was stored in an XML document. The client asked for a simple, clear browser interface for changing and saving the activities for each day. The request also included input fields that change depending on the type of media selected for an activity.

Solution

A web interface was built that fits the existing XML structure exactly:

  • day selection: the user picks any day from Sunday to Saturday and edits the activities for that day;
  • activity settings: start time and sound, which can be switched on or off for each activity;
  • media type selection from a drop-down list for each activity;
  • fields that adapt to the selection: an online video shows a field for the link, while a presentation shows the settings that apply to it;
  • saving changes back to the XML document on the server.

Technologies used

Result

The activity schedule is edited through a form in the browser, with fields that adapt to the selection, instead of by editing the XML file by hand.

Image cropping tool enhancement

Built in the fourth quarter of 2020.

Problem

The client had a finished browser tool that lets users upload an image, resize it, move it and crop a chosen part, and the tool faithfully reflects the changes in the output image. The core functions and page layout worked well and were not to be changed, but the client needed two significant enhancements to make the tool more useful. The job, then, was work inside someone else's existing code, with documentation and source code available.

Solution

The goal was to extend the tool's capabilities without touching its core functions:

  • core functions preserved: resizing, moving and cropping parts of the image work as before;
  • two new enhancements, built to the client's requirements;
  • fitting into the existing code, keeping the predefined HTML layout;
  • ease of use: the new enhancements are as intuitive to use as the rest of the tool.

Technologies used

Result

The tool gained the requested capabilities, while users still work the same way and in the same layout they are used to.

A form that remembers entered data

Built in the third quarter of 2021.

Problem

The client had an HTML5 form on their website and wanted to spare users from typing the same thing again. Data from two specific fields had to be remembered, in cookies or in LocalStorage, and filled back into those fields on the next visit. The client believed the form might already use LocalStorage to some extent, but was not sure whether it actually worked.

Solution

The goal was to save specific entries and reuse them without any problems on later visits:

  • saving in LocalStorage: data from the two fields is reliably saved as soon as it is entered in the form;
  • automatic filling: when the page opens, it checks whether saved data exists and fills the matching fields;
  • fast and accurate data retrieval, with no lag and no errors in how the form works.

Technologies used

Result

A visitor who comes back to the page finds the fields already filled in, and the issue was solved quickly.

Client feedback

★★★★★5/5

“He did a great job in solving the issue and was very responsive and quick.”

Multi-step category filter on WordPress

Built in the third quarter of 2021.

Problem

A WordPress website needed a two-step category filter: choosing a top-level category in the first list should immediately fill the second list with its subcategories, without reloading the page. Subcategories stay hidden until a top-level category is selected, and after a subcategory is chosen, a "next" button leads to the page with that category's content. The job had to be done without plugins, with the focus on functionality rather than styling.

Solution

An interactive multi-step filter was built, without a single plugin:

  • dynamic loading: subcategories load in the background based on the selected top-level category;
  • no page reload during the whole filtering process, so working with the filter is smooth;
  • hidden subcategories until a top-level category is selected;
  • moving to the category page: the "next" button leads to the page with the selected subcategory's content.

Technologies used

Result

Visitors reach the content they want in two quick choices, and the website is not weighed down by yet another plugin.

Camera barcode scanning in a mobile web application

Built in the third quarter of 2019.

Problem

The client had an existing web application, built in Visual Studio 2017 with jQuery and Bootstrap, used on Android and iOS phones. The application lacked barcode scanning, and the client also wanted subtle additions on screen while the camera is on, such as the date and context-dependent text. Everything had to work equally well on both mobile platforms.

Solution

Barcode scanning was built into the existing project, keeping it responsive on phones:

  • barcode scanning with the phone camera, simple to use;
  • responsive operation: the new features work on Android and iOS devices;
  • camera screen additions: the date and context-dependent text appear over the camera image while it is active.

Technologies used

Result

The application gained barcode scanning on phones of both platforms, with clear information on screen while the camera is on.

Client feedback

★★★★★5/5

“Dejan's contribution to our project has been nothing short of stellar. His expertise and dedication are evident in the quality of work he delivered. It's a privilege to have worked with such a skilled freelancer. Highly recommended! Great job, Dejan!”

Do you need a similar solution?

What development includes, how the price is set and how the work proceeds is described on the web development page. See complete websites built on my platforms among the websites built on NoEmStilOK CMS and the websites built on the Dozet WordPress theme, and find other work among the web application and JavaScript references.