PoE-Fansite
所属分类：collect
开发工具：Handlebars
文件大小：0KB
下载次数：0
上传日期：2020-12-23 08:31:07
上 传 者：
sh-1993
说明： OSU CS290（Web开发）的最终项目-2020年夏季。该项目是创建一个基本的网站与我们选择的任何主题。作为一名长期玩家和流亡之路（在线动作RPG）的大粉丝，我决定利用这个机会来娱乐，并创建一个粉丝网站。
(Final Project for OSU CS290 (Web Development) - Summer 2020. The project is to create a basic website with any theme of our choice. Being a long time player and big fan of Path of Exile (online action RPG), I decided to use this opportunity for fun and create a fansite.)
文件列表:
index.js (2162, 2020-12-23)
package.json (372, 2020-12-23)
public/ (0, 2020-12-23)
public/JS/ (0, 2020-12-23)
public/JS/API-source.js (528, 2020-12-23)
public/JS/script.js (3173, 2020-12-23)
public/JS/subscribe.js (1122, 2020-12-23)
public/bootstrap.css (145875, 2020-12-23)
public/img/ (0, 2020-12-23)
public/img/1.png (3106590, 2020-12-23)
public/img/2.png (735512, 2020-12-23)
public/img/3.png (2055511, 2020-12-23)
public/img/C_Hat02.png (3387, 2020-12-23)
public/img/W_Book01.png (3312, 2020-12-23)
public/img/W_Sword006.png (3283, 2020-12-23)
public/img/background.jpg (500140, 2020-12-23)
public/img/banner.png (783124, 2020-12-23)
public/img/bg0.jpg (5301084, 2020-12-23)
public/img/bg1.jpg (2697855, 2020-12-23)
public/img/bg2.jpg (2092693, 2020-12-23)
public/img/bg3.jpg (252764, 2020-12-23)
public/img/email.png (5526, 2020-12-23)
public/img/fruit1.png (3120, 2020-12-23)
public/img/fruit10.png (3607, 2020-12-23)
public/img/fruit11.png (3213, 2020-12-23)
public/img/fruit2.png (3349, 2020-12-23)
public/img/fruit3.png (3255, 2020-12-23)
public/img/fruit4.png (3272, 2020-12-23)
public/img/fruit5.png (3404, 2020-12-23)
public/img/fruit6.png (3331, 2020-12-23)
public/img/fruit7.png (3397, 2020-12-23)
public/img/fruit8.png (3492, 2020-12-23)
public/img/fruit9.png (3480, 2020-12-23)
public/img/github.png (6400, 2020-12-23)
public/img/icons8-github-64.png (4268, 2020-12-23)
public/img/image1.jpg (260181, 2020-12-23)
public/img/image1.png (3458340, 2020-12-23)
public/img/image10.jpg (168392, 2020-12-23)
public/img/image11.jpg (1631599, 2020-12-23)
... ...
# CS290 - Final Project
### Overview
My final project is a simple Path of Exile fansite created using tools that were taught throughout the academic term. The webpage is created using HTML/CSS, JavaScript, Node.js, Express, and Bootstrap.
### Screenshot / Preview
Hosted on: http://flip1.engr.oregonstate.edu:17590/
Note: (for instructors/graders) you must first be logged in to OSU's VPN.
# Project Features / Requirements
#### Homepage
* (Picture carousel) - includes autoplay and forward/back buttons. (Bootstrap 4)
* (Links) -located at the bottom of the page that leads to other parts of the website. (HTML/CSS)
#### News
* (Unordered HTML list) - entries describe Path of Exile's development timeline. (HTML/CSS)
* (Scrollbox) - entries located inside a scrollbox.
#### Media
* (Videos) - two YouTube embedded videos. (HTML)
* (Download buttons) - you can have some fruit images. (HTML/CSS)
#### Ladder
* (Scroll/Other) - a table with player ranking data from Path of Exile's official API. (JS/Ajax)
* (Link) - tiny source link below the table. (JS/DOM)
#### Contact Us
* (POST form) - leave a comment form, where the data is sent to http://web.engr.oregonstate.edu/~zhangluy/tools/class-content/form_tests/check_request.php (HTML)
* (POST form) - subscribe form, where the data is posted to https://httpbin.org/ and when returned it is added to the member table at the right side. (JS/Ajax)
#### General
* (Horizontal menu) - included in all pages, where buttons lead to internal or external pages. (JS/DOM)
* (Pictures) - different background images for most pages. (HTML/CSS)
* (Other) - server creation. (NodeJS/Express)
# References / Sources
#### Homepage
* Bootstrap 4 (picture carousel) - https://getbootstrap.com/docs/4.0/components/carousel/
* Bootstrap 4 (jumbotron) - https://getbootstrap.com/docs/4.0/components/jumbotron/
* Background image - https://www.reddit.com/r/pathofexile/comments/7i6kfo/help_me_expand_my_path_of_exile_wallpaper/
* Picture carousel images - captured by myself in-game - https://www.pathofexile.com/
* Readme link icon - https://www.deviantart.com/7soul1/art/420-Pixel-Art-Icons-for-RPG-129892453
#### News
* Background image - https://www.reddit.com/r/pathofexile/comments/7i6kfo/help_me_expand_my_path_of_exile_wallpaper/
* Development Timeline content - https://en.wikipedia.org/wiki/Path_of_Exile
* HTML li images - https://www.deviantart.com/7soul1/art/420-Pixel-Art-Icons-for-RPG-129892453
* li element spacing - https://stackoverflow.com/questions/4373046/css-control-space-between-bullet-and-li
* li bullet image change - https://love2dev.com/blog/customize-bulleted-list/ & https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image
#### Media
* Embedding videos - https://getbootstrap.com/docs/4.0/utilities/embed/ & https://www.w3schools.com/html/html_iframe.asp
* Embedded YouTube videos - GameSpot Trailers (YouTube channel)
* Download link images - https://www.deviantart.com/7soul1/art/420-Pixel-Art-Icons-for-RPG-129892453
* Background image - https://www.reddit.com/r/pathofexile/comments/46lxng/new_background_from_pathofexilecom_for_those_of/
#### Ladder
* API data - https://www.pathofexile.com/developer/docs/api-resource-ladders
* Background image - https://www.reddit.com/r/pathofexile/comments/dpk8v5/whats_your_favorite_1440p_poe_wallpaper/
* Ajax / API implementation - (Activity 5 - Ajax Interactions) - https://oregonstate.instructure.com/courses/1776072/assignments/7969401?module_item_id=19740559
#### Contact Us
* Leave a comment form - (HW2:HTML/CSS & CS290 Course Lecture) - https://eecs.oregonstate.edu/ecampus-video/CS290/core-content/html-css/html-forms.html
* Subscribe form - (Activity 5 - Ajax Interactions & HW4:DOM and Events)
* Background image - https://www.reddit.com/r/pathofexile/comments/8vb8m8/path_of_exile_wallpaper_1920x1080/
#### General
* link style - https://www.w3schools.com/css/css_link.asp
* button style - https://www.w3schools.com/css/css3_buttons.asp
* colors - https://www.w3schools.com/colors/colors_picker.asp
* background properties - https://www.w3schools.com/cssref/pr_background-attachment.asp*/
* div manipulation - https://stackoverflow.com/questions/5590214/make-child-div-stretch-across-width-of-page
* button manipulation - https://www.w3schools.com/howto/howto_css_round_buttons.asp
* button hover - https://developer.mozilla.org/en-US/docs/Web/CSS/:hover
# Future Development/Improvements
* transfer the hosting from OSU to a public server
# Author
[Daniel Yu](https://github.com/yu-daniel/PoE-Fansite/blob/master/https://github.com/kuckikirukia)
近期下载者：
相关文件：
收藏者：