Ionic Demo

Welcome to the Ionic Demo, an application developed to showcase practical features using the Ionic framework. This project was created as part of the Advanced Topics in Programming course at the University.

This project serves as a hands-on introduction to mobile app development using Ionic, demonstrating how to integrate various features into a single application.

The Ionic Demo is a simple yet functional app containing four distinct routines that illustrate the integration of native technologies and common functionalities in modern applications. Below is a brief description of each feature.

---

Features

1. To-do List

This feature allows users to create and delete tasks in a list. The interface is simple and intuitive, using Ionic components to build an interactive list where tasks can be easily added or removed.
The code for this feature is located in the following files:

• todo.page.ts
• todo.page.html

2. Interactive Map

The app includes an interactive map feature that lets users view a world map. It integrates with the device's GPS to display the user's real-time location. Additionally, there is a button to center the map on the user's current location.
This feature is implemented in the following files:

• interactive-map.page.ts
• interactive-map.page.html

3. Incremental Counter

This routine enables users to increment or decrement a number on the screen. It is a simple functionality that demonstrates the use of Ionic components to create a responsive user interface.
The code for this feature can be found in the following files:

• incremental-counter.page.ts
• incremental-counter.page.html

4. Stopwatch

Although the specific code for the stopwatch is not included in the provided snippets, this feature allows users to start a timer that displays the elapsed time in seconds from the moment the button is clicked.
The code for this feature is located in the following files:

• stopwatch.page.ts
• stopwatch.page.html

Project Structure

The project is structured into different pages, each representing a distinct feature. Each page consists of:

• A TypeScript file containing the application logic.
• An HTML file defining the user interface.
• Associated SCSS files for styling.

Technologies Used

• Ionic Framework: Used to build the user interface and overall app experience.
• Angular: Framework used for structuring the project and managing components.
• Leaflet: Open-source JavaScript library used for building virtual mapping applications.