iT邦幫忙

鐵人檔案

2018 iT 邦幫忙鐵人賽
回列表
Modern Web

JS30 錄 系列

鐵人鍊成 共 30 篇文章 | 18 人訂閱 訂閱系列文 團隊好想工作室第一屆鐵人賽
DAY 1

Day 1 - JS Drum Kit

任務內容 利用JS做出一組爵士鼓. HTML code如下, 類別keys內部包著九個類別為key, 但持有不同data-key屬性值的div標籤. 在外頭也有...

2017-12-20 ‧ 由 Arel 分享
DAY 2

Day 2 - JS & CSS Clock

任務目標 做一個會動的時鐘. 沒錯, 一個能夠顯示現在時間的時鐘. 一個時鐘會有什麼呢? 鐘面, 時針, 分針, 秒針, 鐘心. HTML結構如下, 來吧! &...

2017-12-21 ‧ 由 Arel 分享
DAY 3

Day 3 - CSS Variables

任務內容 這章的目的是學會如何宣告CSS變數, 在CSS內呼叫CSS變數, 以及用JS控制CSS變數. 下面有三條input range可以調整, 我們希望拖動...

2017-12-22 ‧ 由 Arel 分享
DAY 4

Day 4 - Array Cardio Part I

任務目標 陣列原型(Array Prototype)是個物件, 代表著陣列建構式的模型. 裡面存放著一些好用的方法與特性, 所有透過陣列建構式建立的陣列實例都可...

2017-12-23 ‧ 由 Arel 分享
DAY 5

Day 5 - Flex Panel Gallery

任務目標 盤踞在大台南市區的四大天王「火爆浪子」最近在經營網路形象, 他們需要一個頁面來一段魅力的展現, 要求如下: 四名天王都必須有等寬的展示空間 滑鼠點擊...

2017-12-24 ‧ 由 Arel 分享
DAY 6

Day 6 - Type Ahead

緣起 大家還記得果王大賽中, 因為水果被沒收而忿忿不平的老樹猴嗎? 詳情請參閱Day 4 - 果王大賽. 老樹猴在水果被沒收的打擊中, 萌生了一個偉大的計劃:...

2017-12-25 ‧ 由 Arel 分享
DAY 7

Day 7 - Array Cardio Part II

緣起 夜喧猴, 簡稱喧猴, 已經到了適婚年齡. 心急如焚的父母為他安排了許多相親活動. 但是相親活動最重要的是什麼? 沒錯, 就是不能犯法, 喧猴看著排山倒海的...

2017-12-26 ‧ 由 Arel 分享
DAY 8

Day 8 - HTML Canvas

任務目標 只要按住滑鼠就能在螢幕上畫畫, 線條大小, 顏色都會隨著畫筆移動的距離漸變. 像這樣 作法 <canvas> <canvas>...

2017-12-27 ‧ 由 Arel 分享
DAY 9

Day 9 - Dev Tools

任務目標 認識瀏覽器開發者工具列 (以Chrome舉例實作) 重點整理 Break On Attribute Modifications 從之前的練習中發現,...

2017-12-28 ‧ 由 Arel 分享
DAY 10

Day 10 - Hold Shift and Check Checkboxes

任務目標 喧猴結婚了. 開玩笑的, 喧猴為了體驗婚後生活, 模仿未來的老婆寫了一張家事清單給自己. 喧猴希望透過一件一件的完成清單上的事情來證明自己也是有當家庭...

2017-12-29 ‧ 由 Arel 分享