Application On HTML, CSS, And JavaScript

At Programming Homework Tutors, we believe in providing our students with practical, real-world examples of how to apply the concepts they learn in class. That’s why we’ve developed a variety of sample projects to help you see how our courses can be used to create impactful solutions in your field of study.

Information Problem/Project Description:

The UMD.io platform is a web-based platform that provides access to various APIs related to the University of Maryland, College Park. The available APIs include course information, campus events, shuttle bus schedules, and building information. These APIs can be integrated into applications to provide users with real-time access to relevant data related to the university.

The purpose of my project is to use the UMD.io platform to develop an application that provides users with easy access to campus information. By integrating the UMD.io APIs into the application, users can obtain information about courses, campus events, shuttle bus schedules, and building information in real-time. This information can be useful for students, faculty, and staff, as well as visitors to the university.

The UMD.io platform provides a convenient and efficient way to access campus information, and my project aims to leverage this platform to develop a useful application. By integrating the UMD.io APIs, my application can provide real-time access to campus information, which can help users make informed decisions about their activities on campus.

Overall, my project is focused on developing a useful application that leverages the

UMD.io platform to provide users with easy access to campus information. By integrating the UMD.io APIs, my application can provide real-time access to information that can help users navigate and interact with the university more effectively.

Problems to be examined:

The information problem I’m hoping to examine is the difficulty that students, faculty, and staff at the University of Maryland, College Park face in accessing relevant information in a timely and efficient manner. With the increasing availability of data and information, it can be challenging to navigate and find the information that is most relevant and useful.

The UMD.io platform provides access to a variety of APIs related to the university, including course information, campus events, shuttle bus schedules, and building information. By integrating these APIs into an application, users can obtain relevant information in real-time and make informed decisions about their activities on campus.

My project aims to examine how the UMD.io platform can be used to address the information problem faced by students, faculty, and staff at the University of Maryland, College Park. By developing an application that leverages the UMD.io APIs, I hope to provide users with easy access to relevant information that can help them navigate and interact with the university more effectively. Overall, my goal is to demonstrate the potential of the UMD.io platform to address the information problem faced by users of the university and to provide a useful solution to this problem.

Technology Stack:

For the technology stack, I will be using HTML, CSS, and JavaScript to develop the application. HTML will be used to structure the content of the application, CSS will be used to style the user interface, and JavaScript will be used to implement the functionality. In terms of JavaScript libraries, I will be using several popular libraries to make the development process more efficient and to enhance the functionality of the application. Some of the libraries that I will be using include React, Redux, and Axios.

React is a popular JavaScript library for building user interfaces. It allows for the creation of reusable components that can be easily rendered and updated in the browser. By using React, I can create a modular and scalable user interface that can be easily maintained and updated over time. Redux is a state management library that allows for the management of application state in a predictable and scalable way. It provides a simple and efficient way to manage application state, and it can be used in combination with React to create complex user interfaces.

Axios is a popular JavaScript library for making HTTP requests from a web application. It provides a simple and efficient way to make requests to APIs and to handle the responses, and it can be used to integrate the UMD.io APIs into the application. Overall, the use of these libraries will help to make the development process more efficient and will enhance the functionality of the application.

Application visualization:

My app/visualization will explore various aspects of the UMD data set, including course information, campus events, shuttle bus schedules, and building information. By exploring this data, my app/visualization will provide users with a comprehensive view of the university and its resources.

For example, the course catalog page of the app will display information about courses offered by the university, including course title, description, prerequisites, and instructor information. This information will allow users to browse courses and find the ones that are most relevant to their interests and needs. The event calendar page of the app will display information about upcoming events and activities at the university, including events hosted by student organizations, academic departments, and university offices. This information will allow users to stay informed about upcoming events and to plan their schedules accordingly.

The shuttle schedule page of the app will display information about the university’s shuttle bus service, including schedules and routes. This information will allow users to plan their travel to and from campus and to access the university’s transportation services more easily. Finally, the building directory page of the app will display information about the university’s buildings, including building name, address, and a map of the building’s location on campus. This information will allow users to easily find the buildings they need and to navigate the university’s campus.

Overall, my app/visualization will explore various aspects of the UMD data set and provide users with a comprehensive view of the university and its resources. By doing so, it will make it easier for users to navigate and interact with the university, and it will enhance the overall user experience.

Wireframes/Interfaces:

• Peak Hours: The shuttle bus demand is usually highest during peak hours when classes begin and end. The shuttle buses are likely to be crowded during these times, and wait times could be longer than average.
• Specific Stops: Some shuttle bus stops may experience higher demand than others, such as stops near popular buildings, residence halls, or parking lots.

• Route Usage: The shuttle bus API could also help track the usage patterns of specific shuttle bus routes. For example, a particular route may be more popular than others, indicating higher demand for transportation to that location.
• Seasonal Demand: The demand for shuttle bus services may also fluctuate during the academic year, with higher demand during the fall and spring semesters and lower demand during breaks and holidays.
• Special Events: The demand for shuttle bus services may increase during special events such as concerts, sports games, or campus-wide activities. This could lead to higher demand for specific routes or stops during these events.

The following screen shows the expected main screen of the proposed application:

System Design/API Use:

To use the UMD.io API, I will need to obtain an app token from the UMD.io website. The app token will be required to make authenticated requests to the API and to access the relevant data. The app token will also allow me to access a limited amount of data from the API. The data that I will be accessing from the UMD.io API includes course information, campus events, shuttle bus schedules, and building information. This data will be used to populate various pages of the application, such as the course catalog, event calendar, shuttle schedule, and building directory.

The pages of the application that will be loading data from the API will be the course catalog, event calendar, shuttle schedule, and building directory pages. These pages will use JavaScript to make requests to the UMD.io API and to retrieve the relevant data. The data will then be displayed on the page using HTML and CSS. Overall, the use of the UMD.io API and the app token will allow me to access relevant data from the university and to display this data on the pages of the application in a useful and informative way.

Data Visualization:

Here is an example of a data visualization that communicates something meaningful about my data set using Highcharts.com:

The visualization shows the number of students enrolled in each major at the University of Maryland. The x-axis represents the different majors, and the y-axis represents the number of students enrolled in each major. The chart reveals several interesting insights about the data set. For example, we can see that the most popular major at the university is computer science, with over 2,000 students enrolled. We can also see that other popular majors include business, engineering, and psychology. Additionally, we can see that there are several majors with relatively low enrollment, such as art history and philosophy. Overall, this visualization provides a quick and easy way to explore the data set and to gain insights about the enrollment patterns at the University of Maryland. By using Highcharts.com, I have been able to create a high-quality, business-focused charting library that communicates valuable insights about the data set in a clear and concise way.