https://github.com/rubyyy1118/rubyyy1118.github.io
General Education Course: Web Programming - Final Project
https://github.com/rubyyy1118/rubyyy1118.github.io
css3 html5 javascript web-design web-programming
Last synced: 10 months ago
JSON representation
General Education Course: Web Programming - Final Project
- Host: GitHub
- URL: https://github.com/rubyyy1118/rubyyy1118.github.io
- Owner: rubyyy1118
- License: other
- Created: 2021-06-02T09:59:35.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2024-10-22T12:08:20.000Z (about 1 year ago)
- Last Synced: 2025-01-17T02:09:24.434Z (11 months ago)
- Topics: css3, html5, javascript, web-design, web-programming
- Language: CSS
- Homepage: http://rubyyy1118.github.io
- Size: 12.6 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# NTPU Bubble Tea Shop Map
**Freshman General Education Course: Web Programming - Final Project**
### Project Overview
This project was developed as the final assignment for my freshman web programming course. The goal was to create a fully functional website, and I decided to design a **map of bubble tea shops** around National Taipei University. The website provides a comprehensive list of shops, along with a random drink suggestion feature to help users who can't decide what to order.
**Website Link**: [NTU Bubble Tea Map](https://rubyyy1118.github.io/)
---
### Key Features
1. **Interactive Map**:
The website includes an interactive map that displays the locations of various bubble tea shops around the university campus. This map helps students quickly locate nearby shops.
2. **Random Drink Suggestion**:
For users who are indecisive about what to drink, I implemented a slot machine-style **random drink suggestion feature**. With just one click, the website suggests a random drink, adding an element of fun and surprise.
3. **Promotional Offers Section**:
The website integrates a section displaying current promotions or discounts from different shops. This helps students quickly check for any deals before heading out to purchase their bubble tea.
---
### Technologies Used
- **HTML**: For structuring the website and creating the basic layout.
- **CSS**: For styling and making the website visually appealing.
- **JavaScript**: To implement the interactive features such as the random drink suggestion slot machine.
- **GitHub Pages**: For hosting the website online.
---
### Challenges Faced and Solutions
1. **Lack of Experience**:
As a social work major, I had no prior experience in web development. I overcame this by doing extra research and practicing with various tutorials. Through this process, I developed a strong understanding of how to structure websites using HTML and CSS.
2. **Implementing Random Drink Selector**:
One of the most challenging parts was the random drink selection feature. Initially, I struggled with understanding how to implement JavaScript logic. I solved this by breaking the problem down into smaller tasks, creating a list of available drinks, and using basic randomization functions to pick a drink.
3. **Cross-Browser Compatibility**:
Ensuring that the website worked smoothly across different browsers was another challenge. I tested the website on multiple browsers (Chrome, Firefox, Safari) and fixed issues related to styling and functionality for consistent user experience.
---
### Future Improvements
1. **Mobile Responsiveness**:
Currently, the website is primarily optimized for desktop use. In the future, I plan to make it fully responsive for mobile devices, ensuring that students can access it easily from their phones.
2. **More Interactive Features**:
I would like to add more interactive features, such as user reviews for each bubble tea shop or a “favorite shops” list that users can save for future reference.
3. **Real-Time Promotions**:
I hope to collaborate with local bubble tea shops to display real-time promotions on the site, allowing users to see the latest deals as they change.
4. **Multi-language Support**:
Currently, the website is in **Chinese only**, which limits accessibility for international students or tourists who may not speak the language. I plan to implement **multi-language support**, starting with an **English version**, and possibly expanding to other languages based on the user base. This could be achieved by using **language selection buttons** and integrating translation libraries or services like **i18next** or **Google Translate API** for dynamic content translation.