作業6：側欄 -- CSS Transition 與 JavaScript

[ccckmit]

請使用下列兩種方式做出可展開縮放的側欄

1. 使用 CSS Transition (滑鼠移入就展開，移出就縮小）
2. 使用 JavaScript (滑鼠點按就切換，展開或縮小）

(所有這次要交的作業有兩份， 1+2)

側欄拉開後，內容可放入你的個人網頁的各種頁面連結

1. 例如:自我介紹 / 作品 ....
2. 點選後會進入該頁面 ...

參考

1. https://www.w3schools.com/css/css3_transitions.asp
2. https://www.w3schools.com/jsref/event_onclick.asp

[ChadChenYu]

陳辰鈺,111210518

• 1.CSS 原始碼 網頁

---

• 2.JavaScript 原始碼 網頁

[Raylee123321]

李詠睿 111210508

1. CSS 原始碼:https://github.com/Raylee123321/wp/blob/master/%E4%BD%9C%E6%A5%AD6.html 網頁:https://raylee123321.github.io/wp/%E4%BD%9C%E6%A5%AD6.html

[Hfkem]

陳冠昀 111210503 1.css 網頁:https://hfkem.github.io/wp/html/0412.html 原始碼:https://github.com/Hfkem/wp/blob/master/html/0412.html 2.JavaScript 網頁:https://hfkem.github.io/wp/html/0412-2.html 原始碼:https://github.com/Hfkem/wp/blob/master/html/0412-2.html

作業2使用chatGPT輔助

[zerorezerorezero]

陳盈羽 111210521 1.CSS 網頁:https://zerorezerorezero.github.io/wp/javascript/HW6/CSSTrans.html 原始碼:https://github.com/zerorezerorezero/wp/blob/master/javascript/HW6/CSSTrans.html 2.JS 網頁:https://zerorezerorezero.github.io/wp/javascript/HW6/JSTrans.html 原始碼:https://github.com/zerorezerorezero/wp/blob/master/javascript/HW6/JSTrans.html

[taitaiwu]

吳佳泰 111210520

1. CSS版本
   • 原始碼:https://github.com/taitaiwu/wp/blob/master/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99.html
   • 網頁:https://taitaiwu.github.io/wp/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99.html
2. JavaScript版本
   • 原始碼:https://github.com/taitaiwu/wp/blob/master/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99(Javascript).html
   • 網頁:https://taitaiwu.github.io/wp/Homework6/%E5%80%8B%E4%BA%BA%E7%B6%B2%E7%AB%99(Javascript).html

[wakaba0972]

吳秉昭 111211543

1. css

• 原始碼: https://github.com/wakaba0972/wp/tree/master/HW/HW06/p1
• 網頁: wakaba0972.github.io/wp/HW/HW06/p1/index.html

2. js

• 原始碼: https://github.com/wakaba0972/wp/tree/master/HW/HW06/p2
• 網頁: wakaba0972.github.io/wp/HW/HW06/p2/index.html

flex的用法參考自網路

[C10H8Nai]

林瑋哲 110910112

• 代碼
• 網頁

把1跟2整合在一個網頁中了，初始頁面滑鼠可以滑動左側，點擊可以切換固定或解除固定，右側可以切換日夜模式

[HJH60]

姓名： 胡佳慧 學號： 111010141

-README

[tonytomtody]

蔡瑞哲 111210504 1.原始碼 網頁 2.原始碼 網頁

[linpeic]

林沛欣,111210522 1.css 原始碼 網頁 2.js 原始碼 網頁

[shain120]

黃冠勝 111210540

1.css 原始碼：https://github.com/shain120/wp/blob/master/html/hw6/css_sidebar.html 網頁：https://shain120.github.io/wp/html/hw6/css_sidebar.html

2.js 原始碼：https://github.com/shain120/wp/blob/master/html/hw6/js_sidebar.html 網頁：https://shain120.github.io/wp/html/hw6/js_sidebar.html

[Dogcatlionz]

吳昱礽 111210509

1.CSS

• 原始碼 : https://github.com/Dogcatlionz/wp/blob/master/Homework6/%E5%81%B4%E6%AC%84(css).html
• 網頁 : https://dogcatlionz.github.io/wp/Homework6/%E5%81%B4%E6%AC%84(css).html

2.JavaScript

• 原始碼 : https://github.com/Dogcatlionz/wp/blob/master/Homework6/%E5%81%B4%E6%AC%84(JavaScript).html
• 網頁 : https://dogcatlionz.github.io/wp/Homework6/%E5%81%B4%E6%AC%84(JavaScript).html

參考W3Schools範例，並參考ChatGPT之隱藏連結、定位和鼠標懸停時連結顏色

[Erkmrcl17]

李麗恩 111210559

1.CSS 原始碼：https://github.com/Erkmrcl17/wp/blob/master/HW6/index.html 網頁：https://erkmrcl17.github.io/wp/HW6/index.html

2.JavaScript 原始碼：https://github.com/Erkmrcl17/wp/blob/master/HW6/indexx.html 網頁：https://erkmrcl17.github.io/wp/HW6/indexx.html

[Linyowe]

建築二 111113344 林右緯 javascript: https://github.com/Linyowe/wp/blob/master/%E5%81%B4%E6%AC%84%20--%20CSS%20Transition%20%E8%88%87%20JavaScript/%E7%B6%B2%E9%A0%81%E4%BB%A3%E7%A2%BC.html

css: https://github.com/Linyowe/wp/blob/master/%E5%81%B4%E6%AC%84%20--%20CSS%20Transition%20%E8%88%87%20JavaScript/style.css

[cindycallista]

楊莉思 111210555

• css 原始碼 ：https://github.com/cindycallista/wp/blob/master/HW_6/css/index.html 網頁 : https://cindycallista.github.io/wp/HW_6/css/index.html
• javascript 原始碼 ：https://github.com/cindycallista/wp/blob/master/HW_6/js/index.html 網頁 : https://cindycallista.github.io/wp/HW_6/js/index.html

文字動畫部分參考 https://medium.com/@eltocino/keyframe-animations-and-basic-transforms-in-css-59684a25ba24

[codewhight]

林彥廷 111210510

css 原始碼:https://github.com/codewhight/wp/blob/master/JavaScript/HW4/%E5%81%B4%E6%AC%84_CSS.html

網頁:https://codewhight.github.io/wp/JavaScript/HW4/%E5%81%B4%E6%AC%84_CSS.html

js 原始碼:https://github.com/codewhight/wp/blob/master/JavaScript/HW4/%E5%81%B4%E6%AC%84_js.html

網頁:https://codewhight.github.io/wp/JavaScript/HW4/%E5%81%B4%E6%AC%84_js.html

使用chatgpt 協助debug

[peterwang0329]

汪章貴 111210513

1.CSS

• 網頁
• 原始碼

2. JS

• 網頁
• 原始碼

由ChatGPT提供未學習過的樣式的使用方法和效果，並自行變化應用於程式中 部分內容由ChatGPT優化或經ChatGPT指點

[Kumaaaaaaaaaaaakuaaaaa]

吳畇蓁

111210240

• 程式碼 : https://github.com/Kumaaaaaaaaaaaakuaaaaa/wp/tree/master/hw6%20
• 網頁css : https://kumaaaaaaaaaaaakuaaaaa.github.io/wp/hw6%20/%E5%81%B4%E6%AC%84%20--%20CSS%20Transition%20%E8%88%87%20JavaScript.html
• 網頁 : https://kumaaaaaaaaaaaakuaaaaa.github.io/wp/hw6%20/%E5%81%B4%E6%AC%84.html

[1100jimjim]

蘇湧竣 111210523

1.CSS 原始碼:https://github.com/1100jimjim/wp/blob/master/%E4%BD%9C%E6%A5%AD-6/%E5%81%B4%E6%AC%84.html 網頁:https://1100jimjim.github.io/wp/%E4%BD%9C%E6%A5%AD-6/%E5%81%B4%E6%AC%84.html

2.JavaScript 原始碼:https://github.com/1100jimjim/wp/blob/master/%E4%BD%9C%E6%A5%AD-6/%E6%8C%89%E5%81%B4%E6%AC%84.html 網頁:https://1100jimjim.github.io/wp/%E4%BD%9C%E6%A5%AD-6/%E6%8C%89%E5%81%B4%E6%AC%84.html

*以作業一改良

[Jonathan-es]

陳家盛 111210554

CSS 原始碼 ：https://github.com/Jonathan-es/wp/blob/master/hw6/n1.html 網頁 : https://jonathan-es.github.io/wp/hw6/n1

Javascript 原始碼 ：https://github.com/Jonathan-es/wp/blob/master/hw6/n2.html 網頁 : https://jonathan-es.github.io/wp/hw6/n2

使用ChatGPT

[emperoy]

羅翊宸 111110513

1.CSS 原始碼:https://github.com/emperoy/wp/blob/master/hw6/css.html 網頁: https://emperoy.github.io/wp/hw6/css.html

2.java script 原始碼:https://github.com/emperoy/wp/blob/master/hw6/java.html 網頁: https://emperoy.github.io/wp/hw6/java.html

[Rafu2102]

林明昌 111210534

原始碼: https://github.com/Rafu2102/wp/tree/master/js/hw6

1、CSS https://rafu2102.github.io/wp/js/hw6/css.html

2、JS https://rafu2102.github.io/wp/js/hw6/js.html

第二題參考chatgpt做展開按鈕

[456-An]

蘇奕安 111110509

1. CSS

• 網頁
• 原始碼

2. JavaScript

• 網頁
• 原始碼

---

作業詳情請見README

[Vanh3ll]

卓孝偉, 111210551 原始碼

CSS: https://github.com/Vanh3ll/wp/blob/master/hw6/6.1.html Java: https://github.com/Vanh3ll/wp/blob/master/hw6/6.2.html

網頁

CSS: https://vanh3ll.github.io/wp/hw6/6.1.html Java: https://vanh3ll.github.io/wp/hw6/6.2.html

題6.2 chatgpt debug

[yunuun]

黃湘芸 111210514 原始碼:https://github.com/yunuun/wp/tree/master/hw6 網頁: 1.https://[yunuun.github.io/wp/hw6/1.html](https://yunuun.github.io/wp/hw6/1.html) 2.https://[yunuun.github.io/wp/hw6/2.html](https://yunuun.github.io/wp/hw6/2.html)

[jerry92916]

陳宏傑 111210529 1.css 網頁 原始碼 2.javascript 網頁 原始碼

[CYR1225]

https://github.com/CYR1225/HW6.git

[Logan910115]

羅德耕 110910560 https://github.com/Logan910115/wp/tree/master/HW6

[Sakuraebi128]

黃瓘閎 111210541 css版 網頁:https://sakuraebi128.github.io/wp/Hw6/css.html 原始碼:https://github.com/Sakuraebi128/wp/blob/master/Hw6/css.html Js版 網頁:https://sakuraebi128.github.io/wp/Hw6/Java.html 原始碼:https://github.com/Sakuraebi128/wp/blob/master/Hw6/Java.html

[shanghua1002]

吳尚樺 111210505

1. css
   網頁
   原始碼

2. JavaScript
   網頁
   原始碼

[Kumaaaaaaaaaaaakuaaaaa]

吳畇蓁

111210240

程式碼 : https://github.com/Kumaaaaaaaaaaaakuaaaaa/wp/tree/master/hw6%20 網頁css : https://kumaaaaaaaaaaaakuaaaaa.github.io/wp/hw6%20/%E5%81%B4%E6%AC%84%20--%20CSS%20Transition%20%E8%88%87%20JavaScript.html 網頁 : https://kumaaaaaaaaaaaakuaaaaa.github.io/wp/hw6%20/%E5%81%B4%E6%AC%84.html

[110910234]

莊宸維 110910234

css 原始碼：https://github.com/110910234/wp/blob/master/hw6/css.html 網頁：https://110910234.github.io/wp/hw6/css.html

javascript 原始碼：https://github.com/110910234/wp/blob/master/hw6/JavaScript.html 網頁：https://110910234.github.io/wp/hw6/JavaScript.html

使用chatgpt

[hmzhen12]

胡眉真 111210548

CSS 原始碼：https://github.com/hmzhen12/wp/blob/master/HW6/index.html 網頁：https://hmzhen12.github.io/wp/HW6/index.html

Javascript 原始碼：https://github.com/hmzhen12/wp/blob/master/HW6/index2.html 網頁：https://hmzhen12.github.io/wp/HW6/index2.html

使用chatgpt

[VinsOrl]

林新興 111210556

CSS 原始碼：https://github.com/VinsOrl/wp/blob/master/HW6/index.html https://github.com/VinsOrl/wp/blob/master/HW6/style.css 網頁：https://vinsorl.github.io/wp/HW6/index.html

Javascript 原始碼：https://github.com/VinsOrl/wp/blob/master/HW6/indexx.html https://github.com/VinsOrl/wp/blob/master/HW6/script.js 網頁：https://vinsorl.github.io/wp/HW6/indexx.html

使用chatgpt

[zmgrl]

姓名：林佩吟 學號：111210545

CSS

• 原始碼
• 網頁

  JS

• 原始碼
• 網頁

  ---

  參考W3SChool

[daibao87]

林育民 111210507 CSS: 網頁:https://daibao87.github.io/hw6.1/index.html 原始碼:https://github.com/daibao87/daibao87.github.io/blob/main/hw6.1/index.html

Javascript: 網頁:https://daibao87.github.io/hw6.2/index.html 原始碼:https://github.com/daibao87/daibao87.github.io/tree/main/hw6.2

CSS個人所創作 Javascript部分參考Chatgpt

[yiting0418]

陳翊庭 111210512 原始碼 css網頁 js網頁

[CH623]

趙興華 111210515

CSS網頁 CSS原始碼 JS網頁 JS原始碼

[Micha1lyu]

余宸安 111210543 1. 原始碼 網頁 2. 原始碼 網頁

[LainGH0601]

王莉允 111010144 https://github.com/LainGH0601/wp/tree/master/homework/HOMEWORK6

[W100552733w]

葉俊成 111210544 css https://w100552733w.github.io/W100.github//hw6/index1.html java https://w100552733w.github.io/W100.github//hw6/index2.html

[julianalidya]

林小蓮 111210552

1. 網頁：https://julianalidya.github.io/wp/HW%206/1/index.html 原始碼：https://github.com/julianalidya/wp/blob/master/HW%206/1/index.html

2. 網頁：https://julianalidya.github.io/wp/HW%206/2/index.html 原始碼：https://github.com/julianalidya/wp/blob/master/HW%206/2/index.html

[Erhashh]

安吉斯 111210563 CSS 原始碼 ：https://github.com/Erhashh/wp/blob/master/HW6/hw6%20css.css 網頁 : https://erhashh.github.io/wp/HW6/hw6%20css.css Javascript 原始碼 ：https://github.com/Erhashh/wp/blob/master/HW6/hw6.js 網頁 : https://erhashh.github.io/wp/HW6/hw6.js

使用ChatGPT