Summary

Project 2 is a full-stack CRUD (Create, Read, Update, Delete) single-page application designed to manage a company's internal data systems. Built with HTML, CSS, JavaScript, jQuery, PHP and MySQL, the application enables users to manage personnel, departments and locations through an intuitive and responsive interface. The system incorporates dynamic modals, real-time search and filter functionality, powered by AJAX. Developed with a mobile-first approach it is fully responsive and optimised for both desktop and mobile environments.

Tech Stack

• HTML
• CSS
• JavaScript
• jQuery
• PHP
• MySQL

Functionality

On page load, the user is presented with a table of personnel records and a search bar to quickly locate individuals by name or other criteria. Three key action buttons are available in the top-right corner:

• Refresh: Resets the current view by clearing search or filter inputs.
• Filter: Opens a modal allowing the user to filter personnel by department or location using dynamic dropdowns populated from the database.
• Add: Opens a context-specific modal based on the active tab (Personnel, Department, or Location) to insert new records.

The application is organized into three tabs:

• Personnel Tab: Displays a searchable, filterable list of all employees with options to add, edit, or delete entries.
• Departments Tab: Shows a list of departments. Users can add new departments, update existing ones, or delete them—unless personnel are still linked to the department, enforcing data integrity.
• Locations Tab: Displays all available company locations. Deletion is restricted if departments are linked to the location, ensuring logical data consistency.

Each row within the tables includes Edit and Delete buttons, allowing for direct manipulation of data. All operations are handled asynchronously using AJAX and PHP for a smooth user experience.

Summary

Project 1 is a full-stack, mobile-first web application designed to provide detailed country profiles.

The application integrates various third-party APIs to display demographic, climatic, geographical and other relevant data for each country. Key features include real-time geolocation of the user, a world map overlay and a responsive, user-friendly interface optimised for both descktop and mobile devices.

The system fetches data from APIs such as OpenCage, Open Weather and Geonames, allowing users to explore country information such as population, weather forecasts, currencies and nearby points of interest.

Tech Stack

• HTML
• CSS
• JavaScript
• jQuery
• PHP
• Bootstrap
• MySQL
• Leaflet.js

Functionality

This project provides an interactive, mobile-first application that allows users to explore detailed country profiles. Upon page load, the app automatically geolocates the user and highlights their current country on the map. If the user is accessing the site online, they are prompted to allow location access. The interface is designed to function seamlessly across all devices, from mobile to desktop.

The left-hand side of the page features a series of icon buttons for quick access to various modals: demographic information, financial details, a currency calculator, relevant news, weather, and social links. The user can select a country from a dropdown menu at the top center, which updates the map and all modals with the new country’s information.

The map selector in the top-right corner allows users to choose different map views (e.g., outdoors, satellite, etc.) and overlays (airports, cities, museums, parks, restaurants, and more). Clicking on a cluster of markers zooms in for more detailed information about points of interest within the selected country.

The modals offer specific country data, including:

• Information Modal: Displays country name, population, flag, timezone, and other demographic details.
• Financial Modal: Provides currency details such as name, symbol, subunit, and ISO code.
• Calculator Modal: Allows users to convert currency amounts to USD using the selected country’s currency.
• News Modal: Displays the latest news articles relevant to the selected country.
• Weather Modal: Shows the weather forecast for today, tomorrow, and the following day.
• Links Modal: Provides links to Wikipedia and Google for the selected country, along with what3words suggestions based on location.

Overall, the application integrates multiple third-party APIs to deliver real-time data, creating an engaging and informative experience for users looking to explore countries in detail. Third-party APIs utilised in this project included: OpenCage, OPEN Weather, Geonames, Rest countries.

Summary

A simple application that retrieves country information using the GeoNames API.

The application makes use of cURL in PHP to handle API requests and returns country data in JSON format, which is then displayed on an HTML page using JavaScript and AJAX.

Tech Stack

• HTML
• CSS
• JavaScript
• PHP
• jQuery

Functionality

This app provides an interactive experience where users can select a country and language, seamlessly triggering an AJAX call to the PHP backend.

Behind the scenes, the backend uses cURL to fetch detailed country information from the GeoNames API, returning the results in JSON format.

This data is then dynamically displayed in a table on the frontend, updating in real-time as users input parameters like country code and language.

Additionally, users can enhance their exploration by selecting from a list of other available APIs, allowing them to access even more data and expand the app’s capabilities.