# [F2E - 前端精神時光屋](https://www.hexschool.com/2019/06/14/2019-06-14-the_f2e/) (第一周)
###### tags : `w3HexSchool` . `vue` . `F2E`
###### github : [andrew781026/F2E](https://github.com/andrew781026/F2E)

> 大家好 , 我是消息慢一步的 Tree 先生
> 在 2020 年的開頭 , 爬文時突然發現有 `F2E - 前端精神時光屋` 這樣的好東西
> 讓沒有 `設計師友人` 的在下 (~~其實也沒有工程師友人 XD~~) ,
> 也可以好好的向著 `前端的海洋` 展開偉大的征途
> 由於 `F2E - 前端精神時光屋` 的開賽期間為 `2019/07/08 ~ 2019/09/13`
> 在下看到時 , 已結束挑戰了 :disappointed:
> 不過這並不妨礙在下挑戰 9 週完成 , 就讓我們開始偉大的征途吧!

> 在此紀錄 , 在下的挑戰期間 `2020/02/03 ~ 2020/04/03`
> 其他偉人的成品 : https://challenge.thef2e.com/works

## 準備說明

第一周的挑戰 - 番茄鐘 , 我選擇的是有 "大番茄" 的那組設計圖

[畫面設計稿](https://xd.adobe.com/spec/6580ddf6-aa24-4706-5622-c26ee7975161-13b1/)

[PNG 素材](https://drive.google.com/drive/folders/10LNa66U45PhFQO0u_ogwymKs94zrOeCp)

#### 畫面截圖

## 畫面分析

我採取的技術是 vue.js , 以 vue 的基礎概念來說 , 我們可以將畫面分成幾個元件之後 , 再做合併 , 讓我們拆分畫面做元件吧!


我們可以將其分成 8 個區塊

### 1. 番茄說話 ( TomatoSpeaking )

### 2. 待辦事項 ( ToDoList )

### 3. 新建任務 ( NewMission )

### 4. 通知訊息 ( SnackBar )

### 5. 番茄 ( Tomato )

### 6. 分頁按鈕 ( RouterButton )

### 7. 進度條 ( ProgressBar )


### 8. 執行按鈕 ( PlayPauseButton )


## 備註
> 由於沒有做多螢幕尺寸處理 , Tomato 專案只在以下環境可正常顯示
>
> | 類型 | 數值 |
> | ----------------- |:----------------------- |
> | 螢幕解析度 | 1920 x 1080 |
> | 顯示寬高比 | 16 : 9 |
> | 螢幕尺寸 | 24 吋 |
> 如果不知道螢幕資訊 , 可用 [我的螢幕大小是幾吋？](https://tw.piliapp.com/actual-size/what-is-my-monitor-size/credit-card/) 做檢測

## 結語

原定要每周切版，結果最後做了 0.5 (番茄鐘沒做完) + 0.5 (接龍沒做完)