iT邦幫忙

2021 iThome 鐵人賽

DAY 8
0
Modern Web

從零開始的寫web app 30天生活系列 第 8

Day 8 - 原型 (7): 完成

前言

今天完成原型剩下的工作吧。

帖子修正

回覆帖子

流程就是輸入要顯示的名字及回覆內容, 最後到點擊回覆按鈕發出。

  1. 先是輸入名字

https://ithelp.ithome.com.tw/upload/images/20210920/20140375My1p1HSvih.png

  1. 之後是回覆內容

https://ithelp.ithome.com.tw/upload/images/20210920/20140375UkWoAuvStv.png

  1. 最後是發出成功

這部分的帖子溢出了, 可以利用Clip content和Vertical scrolling去解決。

https://ithelp.ithome.com.tw/upload/images/20210920/20140375amwCYlSiAV.png

  1. 加上相對應的Navigations來連起這3個frames

https://ithelp.ithome.com.tw/upload/images/20210920/20140375kWyPtYEKxo.png

演示效果:

https://i.imgur.com/kjTcL6P.gif

返回主頁

一樣使用Navigation, 指向主頁。

這個比較簡單, 我就不演示了。

原型

基本上所有的頁面、功能都齊全了, 最後來個終極演示吧。

https://i.imgur.com/JeDwoqL.gif

也可以到這裡看prototype

結語

明天利用HTML, CSS, Javascript要寫主頁。

let 日數 : number = 0;
let 預覽數 : number = 0;
let 作品已完成 : boolean = false;

do {
    作品已完成 = 出文章();
    預覽數 = 看看預覽數();
    日數++;
} while (未完成作品);

console.log("預覽數日數死線什麼都不理了");
console.log("感謝願意閱讀的各位");

上一篇
Day 7 - 原型 (6): 預覽主頁
下一篇
Day 9 - HTML
系列文
從零開始的寫web app 30天生活10
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言