Townhouse Landscaping Proposal Web App
Final project by Lara Lee for the course “Advanced
JavaScript” (CMST 488) at the University of Maryland.
Background
I presented this web app for the course “Advanced JavaScript” (CMST 488) at UMUC.
My roommate and I rent a 1,120 sqft. townhouse in Waldorf, Maryland. The townhouse was built in 1983 and purchased by the landlord in 2005. As per a verbal arrangement with the landlord, the renters must maintain and perform minor DIY upgrades to the rental property in preparation for final sale after said renters complete the lease.
The renters wish to develop a web app discussing modest landscaping plans for the townhouse front yard and back yard. The web app must do more than simply portray landscape design illustrations; it should be a stand-alone item containing all the requirements of a request.
My Role
Web Designer
Front-End Web Developer
(HTML, CSS, jQuery)
Agency
College Final



Lay of the Land: JavaScript Challenges
An essential component of this web app project is interactivity. Interactive features allow the landlord to immerse herself in the experience and provide immediate feedback on financial costs.
The scope of this web app project includes a hand-coded web app using front-end web development languages HTML, CSS, and the JavaScript library, jQuery. jQuery will address issues such as:
- Mouse Event Responses
- DOM Manipulation
- Mathematical Calculations
- String Manipulation
- Data Validation
- Asynchronous Loading





Custom Illustration
Since the web app focuses on a particular townhouse property, the graphics must be uniquely tailored.
I drew custom vector illustrations to capture the unique landscapes. Symbols are detailed enough to identify an object, but generic enough for the audience to embellish with her own visions.
Measurements from before are retained with proper to-scale proportions but the distracting lines and numbers are gone.
These graphics will compose the layers of materials needed to illustrate cost calculations of various landscape materials.

Responsive Web Design
Some layouts changed during the development phase.
For example, testing the yard designer page revealed the buttons and calculator weren’t accessible when positioned beneath the map unless the map was small — yet a small map reduces landscape details.
In the end, the calculator buttons moved beside the image so both are accessible and discernible at the same time.
Responsive web design is easier to accomplish in websites due to their modern-day technologies, but it’s not impossible to create responsive emails either. Check out my mobile-friendly emails for Smile Team!