Interactive UI for XML Editing

Project Overview

Client needed a straightforward and intuitive user interface (UI) developed primarily in HTML, JavaScript, and CSS to modify an XML document. The XML contained data representing weekly activities and their associated parameters. The UI was geared towards facilitating the editing of daily activities, with features such as choosing a day of the week, adjusting starting hours, and selecting appropriate media options. Moreover, depending on the chosen media type, certain input options like URL text boxes or specific configurations would dynamically appear.

Project Highlights

Objective

Develop a web-based interface that integrates seamlessly with the provided XML structure, offering users an intuitive platform to easily modify and save their daily activity data.

Key Features

• Day Selection: Users can pick any day from Sunday to Saturday and modify the activities associated with that day.
• Activity Settings: Each activity offers sound parameters that users can toggle between "off" and "on".
• Dynamic Media Options: A dropdown menu allows users to select the type of media associated with an activity.
• Contextual Input Fields: Depending on the chosen media, specific input fields or options dynamically appear. For instance, selecting "Amdocs_Youtube" triggers a text box for users to input a link, while "Power_Point" unveils other relevant configurations.

Technologies Used

• HTML/JavaScript Programming Language/CSS: Utilized for the creation of the frontend of the interactive UI.
• PHP Programming Language: Employed for backend processes, primarily for processing and saving the XML data modifications.

My Feedback

Working on this project was both challenging and rewarding. It was an enriching experience to integrate frontend technologies like HTML, JavaScript, and CSS with backend PHP to process the XML. Client was a great collaborator, and his clarity on the requirements contributed significantly to the project's success. I relish opportunities to blend frontend and backend technologies and look forward to similar engagements in the future.