├── Asset JavaScript ├── Workshop 1 - โปรแกรมแปลงสกุลเงิน │ ├── Dropdown.txt │ └── money.png ├── Workshop 21 - Expand Card Effect │ └── image │ │ ├── Picture1.jpg │ │ ├── Picture2.jpg │ │ ├── Picture3.jpg │ │ ├── Picture4.jpg │ │ ├── Picture5.jpg │ │ ├── Picture6.jpg │ │ └── Picture7.jpg ├── Workshop 22 - Product Scroll Animation │ └── image │ │ ├── Picture1.jpg │ │ ├── Picture2.jpg │ │ ├── Picture3.jpg │ │ ├── Picture4.jpg │ │ ├── Picture5.jpg │ │ ├── Picture6.jpg │ │ ├── Picture7.jpg │ │ └── Picture8.jpg ├── Workshop 23 - Split Page Content │ └── image │ │ ├── Content1.jpg │ │ └── Content2.jpg ├── Workshop 26 - ประเมินความพึงพอใจ │ └── image │ │ ├── heart.svg │ │ ├── neutral.svg │ │ ├── sad.svg │ │ └── smile.svg ├── Workshop 28 - Vertical Content │ └── image │ │ ├── Picture1.jpg │ │ ├── Picture2.jpg │ │ ├── Picture3.jpg │ │ └── Picture4.jpg ├── Workshop 3 - Light Dark Mode │ ├── hacker_dark.svg │ └── hacker_light.svg └── Workshop 8 - Music API │ ├── cover │ ├── Contra.jpg │ ├── HavestMoon.jpg │ └── Mario.jpg │ └── music │ ├── Contra.mp3 │ ├── HavestMoon.mp3 │ └── Mario.mp3 ├── README.md ├── Workshop 1 - โปรแกรมแปลงสกุลเงิน ├── img │ └── money.png ├── index.html ├── script.js └── style.css ├── Workshop 10 - นับถอยหลังปีใหม่ ├── index.html ├── script.js └── style.css ├── Workshop 11 - Form Validation ├── index.html ├── script.js └── style.css ├── Workshop 12 - Unsplash API ├── index.html ├── script.js └── style.css ├── Workshop 13 - Kanban board ├── index.html ├── script.js └── style.css ├── Workshop 14 - Picture in Picture ├── index.html ├── script.js └── style.css ├── Workshop 15 - จองที่นั่งโรงภาพยนตร์ ├── index.html ├── script.js └── style.css ├── Workshop 16 - ข้อมูลภาพยนตร์ ├── index.html ├── script.js └── style.css ├── Workshop 17 - เกมทายปัญหา Memory Card ├── index.html ├── script.js └── style.css ├── Workshop 18 - Menu Slider ├── index.html ├── logo.png ├── script.js └── style.css ├── Workshop 19 - Speech To Text ├── index.html ├── script.js └── style.css ├── Workshop 2 - โปรแกรมบัญชีรายรับ-รายจ่าย ├── index.html ├── script.js └── style.css ├── Workshop 20 - ข้อมูลสภาพอากาศ ├── index.html ├── script.js └── style.css ├── Workshop 21 - Expand Card Effect ├── image │ ├── Picture1.jpg │ ├── Picture2.jpg │ ├── Picture3.jpg │ ├── Picture4.jpg │ ├── Picture5.jpg │ ├── Picture6.jpg │ └── Picture7.jpg ├── index.html ├── script.js └── style.css ├── Workshop 22 - Product Scroll Animation ├── image │ ├── Picture1.jpg │ ├── Picture2.jpg │ ├── Picture3.jpg │ ├── Picture4.jpg │ ├── Picture5.jpg │ ├── Picture6.jpg │ ├── Picture7.jpg │ └── Picture8.jpg ├── index.html ├── script.js └── style.css ├── Workshop 23 - SplitPageContent ├── image │ ├── Content1.jpg │ └── Content2.jpg ├── index.html ├── script.js └── style.css ├── Workshop 24 - Quiz Application ├── Quiz.txt ├── index.html ├── script.js └── style.css ├── Workshop 25 - Text Keyboard Effect ├── index.html ├── script.js └── style.css ├── Workshop 26 - ประเมินความพึงพอใจ ├── image │ ├── heart.svg │ ├── neutral.svg │ ├── sad.svg │ └── smile.svg ├── index.html ├── script.js └── style.css ├── Workshop 27 - Image Carousel ├── index.html ├── script.js └── style.css ├── Workshop 28 - Vertical Content ├── image │ ├── Picture1.jpg │ ├── Picture2.jpg │ ├── Picture3.jpg │ └── Picture4.jpg ├── index.html ├── script.js └── style.css ├── Workshop 29 - Content Loading ├── index.html ├── script.js └── style.css ├── Workshop 3 - Light Dark Mode ├── img │ ├── undraw_Freelancer_dark.svg │ ├── undraw_Freelancer_light.svg │ ├── undraw_Projections_dark.svg │ ├── undraw_Projections_light.svg │ ├── undraw_Raining_dark.svg │ └── undraw_Raining_light.svg ├── index.html ├── script.js └── style.css ├── Workshop 30 - Review Content ├── Content.txt ├── index.html ├── script.js └── style.css ├── Workshop 4 - ค้นหาเนื้อเพลง ├── index.html ├── script.js └── style.css ├── Workshop 5 - เกมพิมพ์เร็ว ├── index.html ├── script.js └── style.css ├── Workshop 6 - Text Reveal ├── index.html ├── script.js └── style.css ├── Workshop 7 - เครื่องคิดเลข ├── index.html ├── script.js └── style.css ├── Workshop 8 - Music API ├── cover │ ├── Contra.jpg │ ├── HavestMoon.jpg │ └── Mario.jpg ├── index.html ├── music │ ├── Contra.mp3 │ ├── HavestMoon.mp3 │ └── Mario.mp3 ├── script.js └── style.css └── Workshop 9 - โปรแกรมตารางนัดหมาย ├── index.html ├── script.js └── style.css /Asset JavaScript/Workshop 1 - โปรแกรมแปลงสกุลเงิน/Dropdown.txt: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 1 - โปรแกรมแปลงสกุลเงิน/money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 1 - โปรแกรมแปลงสกุลเงิน/money.png -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture1.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture2.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture3.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture4.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture5.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture6.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 21 - Expand Card Effect/image/Picture7.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture1.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture2.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture3.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture4.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture5.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture6.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture7.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 22 - Product Scroll Animation/image/Picture8.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 23 - Split Page Content/image/Content1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 23 - Split Page Content/image/Content1.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 23 - Split Page Content/image/Content2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 23 - Split Page Content/image/Content2.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 26 - ประเมินความพึงพอใจ/image/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 26 - ประเมินความพึงพอใจ/image/neutral.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 26 - ประเมินความพึงพอใจ/image/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 26 - ประเมินความพึงพอใจ/image/smile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 28 - Vertical Content/image/Picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 28 - Vertical Content/image/Picture1.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 28 - Vertical Content/image/Picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 28 - Vertical Content/image/Picture2.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 28 - Vertical Content/image/Picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 28 - Vertical Content/image/Picture3.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 28 - Vertical Content/image/Picture4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 28 - Vertical Content/image/Picture4.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 3 - Light Dark Mode/hacker_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 3 - Light Dark Mode/hacker_light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 8 - Music API/cover/Contra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 8 - Music API/cover/Contra.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 8 - Music API/cover/HavestMoon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 8 - Music API/cover/HavestMoon.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 8 - Music API/cover/Mario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 8 - Music API/cover/Mario.jpg -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 8 - Music API/music/Contra.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 8 - Music API/music/Contra.mp3 -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 8 - Music API/music/HavestMoon.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 8 - Music API/music/HavestMoon.mp3 -------------------------------------------------------------------------------- /Asset JavaScript/Workshop 8 - Music API/music/Mario.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Asset JavaScript/Workshop 8 - Music API/music/Mario.mp3 -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## 🎓 พื้นฐานที่ต้องเรียนมาก่อน 2 | - [HTML5](https://youtu.be/0hfeNPM7piw) 3 | - [CSS3](https://youtu.be/HcInSUzhaUc) 4 | - [JavaScript](https://youtu.be/AbjY-ajKgSI) 5 | - [JavaScript ES6](https://youtu.be/ReGM0zubxfI) 6 | 7 | ## โค้ดประกอบการสอน (Source Code) 8 | | ลำดับที่ | หัวข้อ |ตัวอย่างโปรเจกต์ (Live Preview)| 9 | |:----:|:------------------------------------------:|:------------------------:| 10 | | 1 | [โปรแกรมแปลงสกุลเงิน](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%201%20-%20%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B9%81%E0%B8%9B%E0%B8%A5%E0%B8%87%E0%B8%AA%E0%B8%81%E0%B8%B8%E0%B8%A5%E0%B9%80%E0%B8%87%E0%B8%B4%E0%B8%99) |[Live Preview](https://codepen.io/kongruksiamstudio/full/RwzRLrZ)| 11 | | 2 | [โปรแกรมบัญชีรายรับ-รายจ่าย](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%202%20-%20%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B8%9A%E0%B8%B1%E0%B8%8D%E0%B8%8A%E0%B8%B5%E0%B8%A3%E0%B8%B2%E0%B8%A2%E0%B8%A3%E0%B8%B1%E0%B8%9A-%E0%B8%A3%E0%B8%B2%E0%B8%A2%E0%B8%88%E0%B9%88%E0%B8%B2%E0%B8%A2) |[Live Preview](https://codepen.io/kongruksiamstudio/full/dyBXVMN)| 12 | | 3 | [Light Dark Mode](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%203%20-%20Light%20Dark%20Mode) |[Live Preview](https://codepen.io/kongruksiamstudio/full/RwzRLey)| 13 | | 4 | [ค้นหาเนื้อเพลง](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%204%20-%20%E0%B8%84%E0%B9%89%E0%B8%99%E0%B8%AB%E0%B8%B2%E0%B9%80%E0%B8%99%E0%B8%B7%E0%B9%89%E0%B8%AD%E0%B9%80%E0%B8%9E%E0%B8%A5%E0%B8%87) |-| 14 | | 5 | [เกมพิมพ์เร็ว](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%205%20-%20%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%9E%E0%B8%B4%E0%B8%A1%E0%B8%9E%E0%B9%8C%E0%B9%80%E0%B8%A3%E0%B9%87%E0%B8%A7) |[Live Preview](https://codepen.io/kongruksiamstudio/full/NWZraRO)| 15 | | 6 | [Text Reveal](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%206%20-%20Text%20Reveal) |[Live Preview](https://codepen.io/kongruksiamstudio/full/OJeXxpE)| 16 | | 7 | [เครื่องคิดเลข](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%207%20-%20%E0%B9%80%E0%B8%84%E0%B8%A3%E0%B8%B7%E0%B9%88%E0%B8%AD%E0%B8%87%E0%B8%84%E0%B8%B4%E0%B8%94%E0%B9%80%E0%B8%A5%E0%B8%82) |[Live Preview](https://codepen.io/kongruksiamstudio/full/YzoWrVx)| 17 | | 8 | [Music API](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%208%20-%20Music%20API) |-| 18 | | 9 | [โปรแกรมตารางนัดหมาย](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%209%20-%20%E0%B9%82%E0%B8%9B%E0%B8%A3%E0%B9%81%E0%B8%81%E0%B8%A3%E0%B8%A1%E0%B8%95%E0%B8%B2%E0%B8%A3%E0%B8%B2%E0%B8%87%E0%B8%99%E0%B8%B1%E0%B8%94%E0%B8%AB%E0%B8%A1%E0%B8%B2%E0%B8%A2) |[Live Preview](https://codepen.io/kongruksiamstudio/full/abgZLwN)| 19 | | 10 | [นับถอยหลังปีใหม่](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2010%20-%20%E0%B8%99%E0%B8%B1%E0%B8%9A%E0%B8%96%E0%B8%AD%E0%B8%A2%E0%B8%AB%E0%B8%A5%E0%B8%B1%E0%B8%87%E0%B8%9B%E0%B8%B5%E0%B9%83%E0%B8%AB%E0%B8%A1%E0%B9%88) |[Live Preview](https://codepen.io/kongruksiamstudio/full/RwzRLgj)| 20 | | 11 | [Form Validation](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2011%20-%20Form%20Validation) |[Live Preview](https://codepen.io/kongruksiamstudio/full/KKjMXqY)| 21 | | 12 | [Unsplash API](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2012%20-%20Unsplash%20API) |[Live Preview](https://codepen.io/kongruksiamstudio/full/LYKZzjW)| 22 | | 13 | [Kanban board](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2013%20-%20Kanban%20board) |[Live Preview](https://codepen.io/kongruksiamstudio/full/PorzJKa)| 23 | | 14 | [Picture in Picture](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2014%20-%20Picture%20in%20Picture) |[Live Preview](https://codepen.io/kongruksiamstudio/full/XWLKeem)| 24 | | 15 | [จองที่นั่งโรงภาพยนตร์](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2015%20-%20%E0%B8%88%E0%B8%AD%E0%B8%87%E0%B8%97%E0%B8%B5%E0%B9%88%E0%B8%99%E0%B8%B1%E0%B9%88%E0%B8%87%E0%B9%82%E0%B8%A3%E0%B8%87%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%A2%E0%B8%99%E0%B8%95%E0%B8%A3%E0%B9%8C) |-| 25 | | 16 | [ข้อมูลภาพยนตร์](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2016%20-%20%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%A2%E0%B8%99%E0%B8%95%E0%B8%A3%E0%B9%8C) |[Live Preview](https://codepen.io/kongruksiamstudio/full/GRbqMMx)| 26 | | 17 | [เกมทายปัญหา Memory Card](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2017%20-%20%E0%B9%80%E0%B8%81%E0%B8%A1%E0%B8%97%E0%B8%B2%E0%B8%A2%E0%B8%9B%E0%B8%B1%E0%B8%8D%E0%B8%AB%E0%B8%B2%20Memory%20Card) |[Live Preview](https://codepen.io/kongruksiamstudio/full/abgZLVZ)| 27 | | 18 | [Menu Slider](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2018%20-%20Menu%20Slider) |[Live Preview](https://codepen.io/kongruksiamstudio/full/RwzRLxQ)| 28 | | 19 | [Speech To Text](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2019%20-%20Speech%20To%20Text) |-| 29 | | 20 | [ข้อมูลสภาพอากาศ](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2020%20-%20%E0%B8%82%E0%B9%89%E0%B8%AD%E0%B8%A1%E0%B8%B9%E0%B8%A5%E0%B8%AA%E0%B8%A0%E0%B8%B2%E0%B8%9E%E0%B8%AD%E0%B8%B2%E0%B8%81%E0%B8%B2%E0%B8%A8) |-| 30 | | 21 | [Expand Card Effect](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2021%20-%20Expand%20Card%20Effect) |[Live Preview](https://codepen.io/kongruksiamstudio/full/NWZrayo)| 31 | | 22 | [Product Scroll Animation](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2022%20-%20Product%20Scroll%20Animation) |[Live Preview](https://codepen.io/kongruksiamstudio/full/oNrLGde)| 32 | | 23 | [SplitPageContent](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2023%20-%20SplitPageContent) |[Live Preview](https://codepen.io/kongruksiamstudio/full/MWMeEXY)| 33 | | 24 | [Quiz Application](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2024%20-%20Quiz%20Application) |-| 34 | | 25 | [Text Keyboard Effect](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2025%20-%20Text%20Keyboard%20Effect) |[Live Preview](https://codepen.io/kongruksiamstudio/full/zYVBELB)| 35 | | 26 | [ประเมินความพึงพอใจ](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2026%20-%20%E0%B8%9B%E0%B8%A3%E0%B8%B0%E0%B9%80%E0%B8%A1%E0%B8%B4%E0%B8%99%E0%B8%84%E0%B8%A7%E0%B8%B2%E0%B8%A1%E0%B8%9E%E0%B8%B6%E0%B8%87%E0%B8%9E%E0%B8%AD%E0%B9%83%E0%B8%88) |[Live Preview](https://codepen.io/kongruksiamstudio/full/gONMGdd)| 36 | | 27 | [Image Carousel](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2027%20-%20Image%20Carousel) |[Live Preview](https://codepen.io/kongruksiamstudio/full/zYVBEMK)| 37 | | 28 | [Vertical Content](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2028%20-%20Vertical%20Content) |[Live Preview](https://codepen.io/kongruksiamstudio/full/dyBXVQZ)| 38 | | 29 | [Content Loading](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2029%20-%20Content%20Loading) |[Live Preview](https://codepen.io/kongruksiamstudio/full/ExBywGZ)| 39 | | 30 | [Review Content](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2030%20-%20Review%20Content) |-| 40 | 41 | -------------------------------------------------------------------------------- /Workshop 1 - โปรแกรมแปลงสกุลเงิน/img/money.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 1 - โปรแกรมแปลงสกุลเงิน/img/money.png -------------------------------------------------------------------------------- /Workshop 1 - โปรแกรมแปลงสกุลเงิน/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | โปรแกรมแปลงสกุลเงิน 7 | 8 | 9 | 10 |

โปรแกรมแปลงสกุลเงิน

11 |
12 |
13 | 67 | 68 |
69 |
70 | 71 |
อัตราการแลกเปลี่ยน
72 |
73 |
74 | 128 | 129 |
130 |
131 | 132 | 133 | 134 | -------------------------------------------------------------------------------- /Workshop 1 - โปรแกรมแปลงสกุลเงิน/script.js: -------------------------------------------------------------------------------- 1 | const currency_one=document.getElementById('currency-one'); 2 | const currency_two=document.getElementById('currency-two'); 3 | 4 | const amount_one=document.getElementById('amount-one'); 5 | const amount_two=document.getElementById('amount-two'); 6 | 7 | const rateText=document.getElementById('rate'); 8 | const swap=document.getElementById('btn'); 9 | 10 | 11 | currency_one.addEventListener('change',calculateMoney); 12 | currency_two.addEventListener('change',calculateMoney); 13 | amount_one.addEventListener('input',calculateMoney); 14 | amount_two.addEventListener('input',calculateMoney); 15 | 16 | function calculateMoney(){ 17 | const one = currency_one.value; 18 | const two = currency_two.value; 19 | fetch(`https://api.exchangerate-api.com/v4/latest/${one}`) 20 | .then(res=>res.json()).then(data=>{ 21 | const rate=data.rates[two]; 22 | rateText.innerText=`1 ${one} = ${rate} ${two}`; 23 | amount_two.value=(amount_one.value*rate).toFixed(2); 24 | }) 25 | } 26 | swap.addEventListener('click',()=>{ 27 | // USD => THB || THB => USD 28 | // TEMP => USD || THB = TEMP (USD) 29 | const temp = currency_one.value; // ต้นทาง 30 | currency_one.value=currency_two.value; 31 | currency_two.value = temp; 32 | calculateMoney(); 33 | }) 34 | 35 | calculateMoney(); -------------------------------------------------------------------------------- /Workshop 1 - โปรแกรมแปลงสกุลเงิน/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | font-family: 'Kanit', sans-serif; 5 | } 6 | body{ 7 | background-color: #f4f4f4f4; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | height: 100vh; 13 | margin:0; 14 | padding: 20px; 15 | } 16 | .btn{ 17 | background-color: orange; 18 | cursor: pointer; 19 | border-radius: 5px; 20 | font-size: 12px; 21 | padding: 5px 12px; 22 | } 23 | .money-img{ 24 | width: 215px; 25 | } 26 | .currency{ 27 | padding: 40px 0; 28 | display: flex; 29 | align-items: center; 30 | justify-content: space-between; 31 | } 32 | .currency select{ 33 | padding:10px 20px 10px 10px; 34 | border:1px solid #dedede; 35 | font-size:16px; 36 | background:transparent; 37 | appearance: none; 38 | } 39 | .currency input{ 40 | border:0; 41 | background: transparent; 42 | font-size:30px; 43 | text-align: right; 44 | } 45 | .swap-container{ 46 | display: flex; 47 | align-items: center; 48 | justify-content: space-between; 49 | } 50 | .rate{ 51 | font-size:20px; 52 | padding:0 10px; 53 | } 54 | select:focus,input:focus,button:focus{ 55 | outline: 0; 56 | } -------------------------------------------------------------------------------- /Workshop 10 - นับถอยหลังปีใหม่/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | CountDown Workshop 7 | 8 | 9 | 10 |

Happy New Years | 2021

11 |
12 |
13 |

00

14 | วัน 15 |
16 |
17 |

00

18 | ชั่วโมง 19 |
20 |
21 |

00

22 | นาที 23 |
24 |
25 |

00

26 | วินาที 27 |
28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Workshop 10 - นับถอยหลังปีใหม่/script.js: -------------------------------------------------------------------------------- 1 | const days=document.getElementById('days'); 2 | const hours=document.getElementById('hours'); 3 | const minutes=document.getElementById('minutes'); 4 | const second=document.getElementById('seconds'); 5 | 6 | const currentYear=new Date().getFullYear(); 7 | const newYearTime=new Date(`January 01 ${currentYear+1} 00:00:00`); 8 | 9 | function updateCountDown(){ 10 | const currentTime=new Date(); 11 | const diff=newYearTime-currentTime; 12 | const d=Math.floor(diff/1000/60/60/24); 13 | const h=Math.floor(diff/1000/60/60)%24; 14 | const m=Math.floor(diff/1000/60)%60; 15 | const s=Math.floor(diff/1000)%60; 16 | days.innerHTML=d; 17 | hours.innerHTML=h<10?'0'+h:h; 18 | minutes.innerHTML= m<10?'0'+m:m; 19 | second.innerHTML=s<10?'0'+s:s; 20 | } 21 | 22 | setInterval(updateCountDown,1000); -------------------------------------------------------------------------------- /Workshop 10 - นับถอยหลังปีใหม่/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab&display=swap'); 2 | 3 | *{ 4 | font-family: 'Roboto Slab', serif; 5 | box-sizing: border-box; 6 | } 7 | body{ 8 | background-image: url('https://images.unsplash.com/photo-1477738224882-4eba549a81ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80'); 9 | background-repeat: no-repeat; 10 | background-size: cover; 11 | background-position: center center; 12 | height: 100vh; 13 | display: flex; 14 | margin:0; 15 | color:#fff; 16 | overflow: hidden; 17 | flex-direction: column; 18 | text-align: center; 19 | align-items: center; 20 | justify-content: center; 21 | } 22 | body::after{ 23 | content:""; 24 | position: absolute; 25 | top:0; 26 | left: 0; 27 | width: 100%; 28 | height: 100%; 29 | background-color: rgba(0, 0, 0,0.5); 30 | } 31 | body *{ 32 | z-index:1; 33 | } 34 | h1{ 35 | font-size:50px; 36 | margin : -80px 0 40px; 37 | } 38 | .countdown{ 39 | display: flex; 40 | transform: scale(2); 41 | } 42 | .time{ 43 | display: flex; 44 | flex-direction: column; 45 | align-items: center; 46 | justify-content: center; 47 | margin:15px; 48 | } 49 | .time h2{ 50 | margin : 0 0 5px; 51 | } 52 | @media(max-width:500px){ 53 | h1{ 54 | font-size:35px; 55 | } 56 | .time{ 57 | margin:5px; 58 | } 59 | .time h2{ 60 | font-size:12px; 61 | margin:0; 62 | } 63 | .time small{ 64 | font-size: 10px; 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /Workshop 11 - Form Validation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Form Validation 7 | 8 | 9 | 10 |
11 |
12 |

แบบฟอร์มลงทะเบียน

13 |
14 | 15 | 16 | error message 17 |
18 |
19 | 20 | 21 | error message 22 |
23 |
24 | 25 | 26 | error message 27 |
28 |
29 | 30 | 31 | error message 32 |
33 | 34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Workshop 11 - Form Validation/script.js: -------------------------------------------------------------------------------- 1 | const form=document.getElementById('form'); 2 | const username=document.getElementById('username'); 3 | const email=document.getElementById('email'); 4 | const password1=document.getElementById('password'); 5 | const password2=document.getElementById('re-password'); 6 | 7 | form.addEventListener('submit',function(e){ 8 | e.preventDefault(); 9 | checkInput([username,email,password1,password2]); 10 | if(!validateEmail(email.value.trim())){ 11 | showerror(email,'อีเมลไม่ถูกต้อง'); 12 | }else{ 13 | showsuccess(email); 14 | } 15 | checkPassword(password1,password2); 16 | checkInputLength(username,5,10); 17 | checkInputLength(password1,5,12); 18 | }); 19 | 20 | function showerror(input,message){ 21 | const formControl=input.parentElement; 22 | formControl.className='form-control error'; 23 | const small=formControl.querySelector('small'); 24 | small.innerText=message; 25 | } 26 | 27 | function showsuccess(input){ 28 | const formControl=input.parentElement; 29 | formControl.className='form-control success'; 30 | } 31 | 32 | function validateEmail(email) { 33 | const re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 34 | return re.test(String(email).toLowerCase()); 35 | } 36 | 37 | function checkInput(inputArray){ 38 | inputArray.forEach(function(input){ 39 | if(input.value.trim() === ''){ 40 | showerror(input,`กรุณาป้อน ${getInputCase(input)}`); 41 | }else{ 42 | showsuccess(input); 43 | } 44 | }); 45 | } 46 | 47 | function getInputCase(input){ 48 | return input.id.charAt(0).toUpperCase()+input.id.slice(1); 49 | } 50 | 51 | function checkPassword(password1,password2){ 52 | if(password1.value !== password2.value){ 53 | showerror(password2,'รหัสผ่านไม่ตรงกัน'); 54 | } 55 | } 56 | 57 | function checkInputLength(input,min,max){ 58 | if(input.value.length<=min){ 59 | showerror(input,`${getInputCase(input)} ต้องมากกว่า ${min} ตัวอักษร`) 60 | }else if(input.value.length>max){ 61 | showerror(input,`${getInputCase(input)} ต้องไม่เกิน ${max} ตัวอักษร`) 62 | }else{ 63 | showsuccess(input); 64 | } 65 | } -------------------------------------------------------------------------------- /Workshop 11 - Form Validation/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap'); 2 | 3 | *{ 4 | font-family: 'Kanit', sans-serif; 5 | box-sizing: border-box; 6 | } 7 | body{ 8 | background-color: #fafafa; 9 | display: flex; 10 | align-items: center; 11 | justify-content: center; 12 | min-height: 100vh; 13 | margin: 0; 14 | } 15 | .container{ 16 | background-color: #fff; 17 | border-radius: 5px; 18 | box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); 19 | width: 400px; 20 | } 21 | .form{ 22 | padding: 30px 40px; 23 | } 24 | h2{ 25 | text-align: center; 26 | margin:0 0 0 20px; 27 | } 28 | .form-control{ 29 | position: relative; 30 | margin-bottom: 10px; 31 | padding-bottom: 20px; 32 | } 33 | .form-control label{ 34 | color:#777; 35 | display: block; 36 | margin-bottom: 5px; 37 | } 38 | .form-control input{ 39 | border:2px solid #f0f0f0; 40 | border-radius: 4px; 41 | display: block; 42 | width: 100%; 43 | padding: 10px; 44 | font-size:14px; 45 | } 46 | .form-control input:focus{ 47 | outline: 0; 48 | border-color: #777; 49 | } 50 | .form-control.error input{ 51 | border-color:red; 52 | } 53 | .form-control.success input{ 54 | border-color:green; 55 | } 56 | .form-control small{ 57 | color:red; 58 | position: absolute; 59 | bottom:0; 60 | left:0; 61 | visibility: hidden; 62 | } 63 | .form-control.error small{ 64 | visibility: visible; 65 | } 66 | .form button{ 67 | cursor: pointer; 68 | background-color: #3498db; 69 | color:#fff; 70 | border:2px solid #3498db; 71 | margin-top:20px; 72 | width: 100%; 73 | display: block; 74 | font-size: 16px; 75 | padding: 10px; 76 | } -------------------------------------------------------------------------------- /Workshop 12 - Unsplash API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Infinite Scrolling 7 | 8 | 9 | 10 |

Infinite Scroll | Unsplash API

11 |
12 | 13 | 14 | -------------------------------------------------------------------------------- /Workshop 12 - Unsplash API/script.js: -------------------------------------------------------------------------------- 1 | const count=10; 2 | const apiKey='1ciBsSO5u9xQPS9kHRmU8wKhp-A46YxnbjREHzafW9s'; 3 | const apiUrl=`https://api.unsplash.com/photos/random?client_id=${apiKey}&count=${count}`; 4 | 5 | 6 | const imageContainer=document.getElementById('img-container'); 7 | let photoArrays=[]; 8 | 9 | async function getPhotos(){ 10 | try{ 11 | const response = await fetch(apiUrl); 12 | photoArrays=await response.json(); 13 | displayImage(); 14 | }catch(err){ 15 | console.log(err); 16 | } 17 | } 18 | function displayImage(){ 19 | photoArrays.forEach((photo)=>{ 20 | const item=document.createElement('a'); 21 | item.setAttribute('href',photo.links.html); 22 | item.setAttribute('target','_blank'); 23 | 24 | const img=document.createElement('img'); 25 | img.setAttribute('src',photo.urls.regular); 26 | img.setAttribute('title',photo.alt_description); 27 | img.setAttribute('alt',photo.alt_description); 28 | 29 | item.appendChild(img); 30 | imageContainer.appendChild(item); 31 | }); 32 | } 33 | getPhotos(); 34 | 35 | window.addEventListener('scroll',()=>{ 36 | if(window.innerHeight+window.scrollY>=document.body.offsetHeight-100){ 37 | // ดึงภาพมาแสดงผล 38 | // alert("ดึงภาพมาแสดงผล"); 39 | getPhotos(); 40 | } 41 | }); -------------------------------------------------------------------------------- /Workshop 12 - Unsplash API/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | margin: 0; 6 | } 7 | h1{ 8 | text-align: center; 9 | margin-top: 25px; 10 | margin-bottom: 15px; 11 | font-size: 40px; 12 | letter-spacing: 4px; 13 | } 14 | .img-container{ 15 | margin: 10px 20%; 16 | } 17 | .img-container img{ 18 | width: 100%; 19 | margin-top:5px; 20 | } 21 | @media screen and (max-width:600px){ 22 | h1{ 23 | font-size: 20px; 24 | } 25 | .img-container{ 26 | margin:10px; 27 | } 28 | } -------------------------------------------------------------------------------- /Workshop 13 - Kanban board/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Kanban Board 7 | 8 | 9 | 10 |

แผนผังการทำงาน

11 |
12 | 58 |
59 | 60 | 61 | -------------------------------------------------------------------------------- /Workshop 13 - Kanban board/script.js: -------------------------------------------------------------------------------- 1 | const drag_item=document.querySelectorAll('.drag-item'); 2 | const drag_list=document.querySelectorAll('.drag-item-list'); 3 | 4 | let selectItem; 5 | 6 | // รายการ 7 | drag_item.forEach((item)=>{ 8 | item.addEventListener('dragstart',onDragStart); 9 | }); 10 | 11 | // หมวดหมู่ 12 | drag_list.forEach((list)=>{ 13 | list.addEventListener('dragover',onDragOver); 14 | list.addEventListener('dragenter',onDragEnter); 15 | list.addEventListener('drop',onDrop); 16 | }); 17 | function onDrop(){ 18 | this.append(selectItem); 19 | selectItem=null; 20 | } 21 | function onDragStart(){ 22 | selectItem=this; 23 | console.log(selectItem); 24 | } 25 | 26 | function onDragEnter(e){ 27 | e.preventDefault(); 28 | } 29 | function onDragOver(e){ 30 | e.preventDefault(); 31 | } -------------------------------------------------------------------------------- /Workshop 13 - Kanban board/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --category-1:#a2622d; 3 | --category-2:#1b6161; 4 | --category-3:#248224; 5 | --category-4:#a22d22; 6 | } 7 | 8 | html{ 9 | box-sizing: border-box; 10 | } 11 | 12 | body{ 13 | margin:0; 14 | background-image: url('https://cdn.pixabay.com/photo/2016/03/26/13/09/notebook-1280538_960_720.jpg'); 15 | background-size: cover; 16 | background-position: 50% 60%; 17 | background-attachment: fixed; 18 | color: white; 19 | overflow-y: hidden; 20 | } 21 | h1{ 22 | letter-spacing: 2px; 23 | text-shadow: 2px 2px 5px black; 24 | } 25 | .main-title{ 26 | text-align: center; 27 | font-size: 3rem; 28 | } 29 | ul{ 30 | list-style-type: none; 31 | margin: 0; 32 | padding: 0; 33 | overflow: hidden; 34 | } 35 | .drag-container{ 36 | margin:20px; 37 | } 38 | .drag-list{ 39 | display: flex; 40 | align-items: flex-start; 41 | } 42 | .drag-column{ 43 | flex:1; 44 | margin:0 10px; 45 | position: relative; 46 | background-color: rgba(0, 0, 0, 0.4); 47 | border-radius: 10px; 48 | overflow-x: hidden; 49 | } 50 | .header{ 51 | display: flex; 52 | justify-content: center; 53 | margin:10px; 54 | border-radius: 10px; 55 | } 56 | .header h1{ 57 | font-size: 1.25rem; 58 | } 59 | .backlog-column .header{ 60 | background-color: var(--category-1); 61 | } 62 | .progress-column .header{ 63 | background-color: var(--category-2); 64 | } 65 | .complete-column .header{ 66 | background-color: var(--category-3); 67 | } 68 | .reject-column .header{ 69 | background-color: var(--category-4); 70 | } 71 | .custom-scroll{ 72 | overflow-y: auto; 73 | max-height: 52vh; 74 | } 75 | .drag-item-list{ 76 | min-height: 50px; 77 | } 78 | .drag-item{ 79 | margin:10px; 80 | padding: 10px; 81 | height: fit-content; 82 | background-color: rgba(0, 0, 0, 0.8); 83 | border-radius: 10px; 84 | line-height: 1.5rem; 85 | letter-spacing: 1px; 86 | cursor: pointer; 87 | } -------------------------------------------------------------------------------- /Workshop 14 - Picture in Picture/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ระบบแชร์หน้าจอขนาดเล็ก 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /Workshop 14 - Picture in Picture/script.js: -------------------------------------------------------------------------------- 1 | const videoEl=document.getElementById('video'); 2 | const btnRequest=document.getElementById('requestbtn'); 3 | const btnShare=document.getElementById('sharebtn'); 4 | 5 | 6 | btnRequest.addEventListener('click',()=>{ 7 | selectMediaStream(); 8 | }); 9 | 10 | btnShare.addEventListener('click',async ()=>{ 11 | btnShare.disabled=true; 12 | await videoEl.requestPictureInPicture(); 13 | btnShare.disabled=false; 14 | }); 15 | 16 | // ส่งคำขอเข้าถึงอุปกรณ์ 17 | async function selectMediaStream(){ 18 | try { 19 | const mediaStream=await navigator.mediaDevices.getDisplayMedia(); 20 | videoEl.srcObject=mediaStream; 21 | videoEl.onloadedmetadata=()=>{ 22 | videoEl.play(); 23 | } 24 | } catch (error) { 25 | console.log(error); 26 | } 27 | } -------------------------------------------------------------------------------- /Workshop 14 - Picture in Picture/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | margin:0; 6 | height: 100vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | background: rgb(37, 37, 37); 11 | } 12 | .button-container{ 13 | border: 2px solid black; 14 | padding: 10px; 15 | border-radius: 7px; 16 | box-shadow: inset 0 20px 4px -19px rgba(255, 255, 255, 0.7); 17 | display: flex; 18 | margin-right: 5px; 19 | } 20 | button{ 21 | cursor: pointer; 22 | outline: none; 23 | width: 200px; 24 | height: 75px; 25 | font-size: 25px; 26 | } -------------------------------------------------------------------------------- /Workshop 15 - จองที่นั่งโรงภาพยนตร์/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ระบบจองที่นั่งโรงภาพยนตร์ 7 | 8 | 9 | 10 |
11 | 12 | 17 |
18 | 32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |

เลือกจำนวน 96 | 0 ที่นั่ง 97 | ยอดชำระเงิน 0 บาท 98 |

99 | 100 | 101 | -------------------------------------------------------------------------------- /Workshop 15 - จองที่นั่งโรงภาพยนตร์/script.js: -------------------------------------------------------------------------------- 1 | const container=document.querySelector('.container'); 2 | const seats=document.querySelectorAll('.row .seat:not(.occupied)'); 3 | 4 | const count=document.getElementById('count'); 5 | const total=document.getElementById('total'); 6 | 7 | const movieSelect=document.getElementById('movie'); 8 | 9 | let price = +movieSelect.value; 10 | 11 | 12 | container.addEventListener('click',e=>{ 13 | if(e.target.classList.contains('seat') && !e.target.classList.contains('occupied')){ 14 | e.target.classList.toggle('selected'); 15 | updateSelected(); 16 | } 17 | }); 18 | 19 | movieSelect.addEventListener('change',e=>{ 20 | price= +e.target.value; 21 | setMovieData(e.target.selectedIndex,e.target.value); 22 | updateSelected(); 23 | }); 24 | 25 | function updateSelected(){ 26 | const selectedSeats=document.querySelectorAll('.row .seat.selected'); 27 | const countseats=selectedSeats.length; // 2 28 | const seatsIndex=[...selectedSeats].map(seat=>[...seats].indexOf(seat)); 29 | localStorage.setItem("selectedSeats",JSON.stringify(seatsIndex)); 30 | count.innerText=countseats; 31 | total.innerText=countseats*price; 32 | } 33 | function setMovieData(movieIndex,moviePrice){ 34 | localStorage.setItem("movieIndex",movieIndex); 35 | localStorage.setItem("moviePrice",moviePrice); 36 | } 37 | 38 | function showDatatoUI(){ 39 | const selectedSeats=JSON.parse(localStorage.getItem("selectedSeats")); // 24-27 40 | const selectmoveIndex=localStorage.getItem("movieIndex"); // ตำแหน่งหนังที่เรากดจองไว้ 41 | seats.forEach((seat,index)=>{ 42 | if(selectedSeats.indexOf(index)>-1){ 43 | seat.classList.add('selected'); 44 | } 45 | }); 46 | if(selectmoveIndex !=null){ 47 | movieSelect.selectedIndex=selectmoveIndex; 48 | } 49 | } 50 | 51 | showDatatoUI(); 52 | updateSelected(); -------------------------------------------------------------------------------- /Workshop 15 - จองที่นั่งโรงภาพยนตร์/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background-color: #242323; 6 | color:#fff; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-content: center; 11 | height: 100vh; 12 | margin:0; 13 | } 14 | .movie-container{ 15 | margin:20px 0; 16 | } 17 | .movie-container select{ 18 | background-color: #fff; 19 | border:0; 20 | border-radius: 5px; 21 | font-size: 14px; 22 | padding: 5px 15px 5px 15px; 23 | appearance: none; 24 | } 25 | .seat{ 26 | background-color: #444451; 27 | height: 12px; 28 | width: 15px; 29 | margin:3px; 30 | border-top-left-radius: 10px; 31 | border-top-right-radius: 10px; 32 | } 33 | .row{ 34 | display: flex; 35 | } 36 | .seat.selected{ 37 | background-color:greenyellow; 38 | } 39 | .seat.occupied{ 40 | background-color:red; 41 | } 42 | .seat:nth-of-type(2){ 43 | margin-right: 18px; 44 | } 45 | .seat:nth-last-of-type(2){ 46 | margin-left: 18px; 47 | } 48 | .showcase{ 49 | list-style: none; 50 | background: rgba(0, 0, 0, 0.1); 51 | padding: 5px 10px; 52 | display: flex; 53 | color:#777; 54 | justify-content: space-between; 55 | border-radius: 5px; 56 | } 57 | .showcase li{ 58 | display: flex; 59 | align-items: center; 60 | justify-content: center; 61 | margin:0 10px; 62 | } 63 | .showcase li small{ 64 | margin-left: 2px; 65 | } 66 | .showcase.seat:not(.occupied):hover{ 67 | cursor: default; 68 | transform: scale(1); 69 | } 70 | .seat:not(.occupied):hover{ 71 | cursor: pointer; 72 | transform: scale(1.2); 73 | } 74 | .screen{ 75 | background-color: #fff; 76 | width: 100%; 77 | height: 70px; 78 | margin:10px 0; 79 | box-shadow: 0 3px 10px rgba(255, 255, 255, 0.7); 80 | transform: rotateX(-45deg); 81 | } 82 | .container{ 83 | perspective: 1000px; 84 | margin-bottom: 30px; 85 | } 86 | p.text span{ 87 | color:greenyellow; 88 | } 89 | p.text{ 90 | margin:5px 0; 91 | } -------------------------------------------------------------------------------- /Workshop 16 - ข้อมูลภาพยนตร์/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Movies App (TMDb) 7 | 8 | 9 | 10 | 27 |
28 | 29 | 30 | -------------------------------------------------------------------------------- /Workshop 16 - ข้อมูลภาพยนตร์/script.js: -------------------------------------------------------------------------------- 1 | const apiKey="6bf2e023c8345d10623e24d02a4b8001"; 2 | let years="2020"; 3 | const url=` 4 | https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&language=en-US&sort_by=popularity.desc&page=1&year=${years}`; 5 | 6 | const content=document.getElementById('content'); 7 | const urlPoster=`https://image.tmdb.org/t/p/w500/`; 8 | 9 | const dropdown=document.getElementById('years'); 10 | 11 | async function displayMovies(url){ 12 | const response = await fetch(url); 13 | const movies=await response.json(); 14 | 15 | while(content.firstChild){ 16 | content.removeChild(content.firstChild); 17 | } 18 | movies.results.forEach(data=>{ 19 | const movieEl=document.createElement('div'); 20 | movieEl.classList.add('movie'); 21 | const title=document.createElement('h2'); 22 | const poster=document.createElement('img'); 23 | title.innerHTML=`${data.title.substring(0,24)}`; 24 | poster.src=`${urlPoster}${data.poster_path}`; 25 | movieEl.appendChild(title); 26 | movieEl.appendChild(poster); 27 | content.appendChild(movieEl); 28 | }); 29 | } 30 | 31 | dropdown.addEventListener('change',()=>{ 32 | years=dropdown.value; 33 | const updateUrl=` 34 | https://api.themoviedb.org/3/discover/movie?api_key=${apiKey}&language=en-US&sort_by=popularity.desc&page=1&year=${years}`; 35 | displayMovies(updateUrl); 36 | }); 37 | displayMovies(url); -------------------------------------------------------------------------------- /Workshop 16 - ข้อมูลภาพยนตร์/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | display: flex; 8 | flex-direction: column; 9 | flex-wrap: wrap; 10 | } 11 | nav{ 12 | width: 100%; 13 | height: 60px; 14 | background-color: rgb(38, 38, 38); 15 | display: flex; 16 | align-items: center; 17 | justify-content: flex-start; 18 | border-bottom: 1px solid white; 19 | } 20 | nav h2{ 21 | margin: 0 20px; 22 | color:#fff; 23 | } 24 | nav a{ 25 | text-decoration: none; 26 | } 27 | select{ 28 | padding: 5px; 29 | outline: none; 30 | font-size: 1.2em; 31 | margin:10px; 32 | width: 320px; 33 | border-radius: 5px; 34 | } 35 | .content div{ 36 | width: 300px; 37 | height: 350px; 38 | margin:20px 15px; 39 | background: #333; 40 | } 41 | img{ 42 | width: 100%; 43 | height: 100%; 44 | object-fit: cover; 45 | } 46 | .content{ 47 | display:flex; 48 | flex-wrap: wrap; 49 | justify-content: center; 50 | } 51 | h2{ 52 | color:#fff; 53 | text-align: center; 54 | font-size: 1.3em; 55 | } 56 | .movie:hover{ 57 | opacity: 90%; 58 | transform: scale(0.98); 59 | } -------------------------------------------------------------------------------- /Workshop 17 - เกมทายปัญหา Memory Card/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | เกมทายปัญหา | Memory Card 7 | 8 | 9 | 10 | 11 | 14 |

เกมทายปัญหา 15 | 18 |

19 |
20 | 21 | 30 |
31 |

32 | เพิ่มคำถาม 33 | 36 |

37 |
38 | 39 | 40 |
41 |
42 | 43 | 44 |
45 | 48 |
49 | 50 | 51 | -------------------------------------------------------------------------------- /Workshop 17 - เกมทายปัญหา Memory Card/script.js: -------------------------------------------------------------------------------- 1 | // const card=document.querySelector('.card'); 2 | const showBtn=document.getElementById('show'); 3 | const hiddenBtn=document.getElementById('btn-hidden'); 4 | const addContainer=document.getElementById('add-container'); 5 | const cardContainer=document.getElementById('card-container'); 6 | const nextBtn=document.getElementById('next'); 7 | const prevBtn=document.getElementById('prev'); 8 | const currentEl=document.getElementById('current'); 9 | const clearBtn=document.getElementById('clear'); 10 | const questionEl=document.getElementById('question'); 11 | const answerEl=document.getElementById('answer'); 12 | 13 | const addCard=document.getElementById('add-card'); 14 | 15 | let currentActiveCard=0; 16 | let cardsEl=[]; // เก็บจำนวนคำถามทั้งหมด 17 | const cardData=getCardData(); 18 | 19 | function createCard(){ 20 | cardData.forEach((data,index)=>{ 21 | createSingleCard(data,index); 22 | }); 23 | } 24 | 25 | function createSingleCard(data,index){ 26 | const card=document.createElement('div'); 27 | card.classList.add('card'); 28 | 29 | if(index==0){ 30 | card.classList.add('active'); 31 | } 32 | card.innerHTML=` 33 |
34 |
35 |

${data.question}

36 |
37 |
38 |

${data.answer}

39 |
40 |
41 | `; 42 | card.addEventListener('click',()=>card.classList.toggle("show-answer")); 43 | cardsEl.push(card); 44 | cardContainer.appendChild(card); 45 | updateCurrentQuestion(); 46 | } 47 | 48 | function updateCurrentQuestion(){ 49 | currentEl.innerText = `${currentActiveCard+1} / ${cardsEl.length}`; 50 | } 51 | 52 | createCard(); 53 | // card.addEventListener('click',()=>card.classList.toggle("show-answer")); 54 | showBtn.addEventListener('click',()=>addContainer.classList.add('show')); 55 | hiddenBtn.addEventListener('click',()=>addContainer.classList.remove('show')); 56 | nextBtn.addEventListener('click',()=>{ 57 | 58 | cardsEl[currentActiveCard].className = 'card left'; 59 | currentActiveCard = currentActiveCard+1; 60 | if(currentActiveCard>cardsEl.length-1){ // จำนวน 4 , 0,1,2,3 61 | currentActiveCard=cardsEl.length-1; 62 | } 63 | cardsEl[currentActiveCard].className = 'card active'; 64 | updateCurrentQuestion(); 65 | }); 66 | 67 | prevBtn.addEventListener('click',()=>{ 68 | 69 | cardsEl[currentActiveCard].className = 'card right'; 70 | currentActiveCard = currentActiveCard-1; 71 | if(currentActiveCard<0){ // จำนวน 4 , 0,1,2,3 72 | currentActiveCard=0; 73 | } 74 | cardsEl[currentActiveCard].className = 'card active'; 75 | updateCurrentQuestion(); 76 | }); 77 | 78 | 79 | addCard.addEventListener('click',()=>{ 80 | const question=questionEl.value; 81 | const answer=answerEl.value; 82 | if(question.trim() && answer.trim()){ 83 | const newCard={question,answer}; 84 | createSingleCard(newCard); 85 | questionEl.value = ''; 86 | answerEl.value= ''; 87 | addContainer.classList.remove('show'); 88 | cardData.push(newCard); 89 | setCardData(cardData); 90 | } 91 | }); 92 | 93 | function setCardData(cards){ 94 | localStorage.setItem('cards',JSON.stringify(cards)); 95 | window.location.reload(); 96 | } 97 | 98 | function getCardData(){ 99 | const cards=JSON.parse(localStorage.getItem('cards')); 100 | return cards === null ? [] : cards; 101 | } 102 | 103 | clearBtn.addEventListener('click',()=>{ 104 | localStorage.clear(); 105 | cardContainer.innerHTML =''; 106 | window.location.reload(); 107 | }); -------------------------------------------------------------------------------- /Workshop 17 - เกมทายปัญหา Memory Card/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background: #fff; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | margin:0; 12 | overflow: hidden; 13 | } 14 | h1{ 15 | position: relative; 16 | } 17 | h1 button{ 18 | position: relative; 19 | right: 0; 20 | transform: translate(120%,-50%); 21 | z-index:2; 22 | } 23 | .btn{ 24 | background-color: #fff; 25 | border:1px solid #999; 26 | border-radius: 3px; 27 | font-size: 14px; 28 | margin-top: 20px; 29 | padding: 10px 15px; 30 | outline: none; 31 | cursor: pointer; 32 | } 33 | .btn-small{ 34 | font-size: 12px; 35 | padding: 5px 10px; 36 | } 37 | .clear{ 38 | position: absolute; 39 | bottom: 30px; 40 | left:30px; 41 | } 42 | .cards{ 43 | perspective: 1000px; 44 | position: relative; 45 | width: 500px; 46 | height: 300px; 47 | max-width: 100%; 48 | } 49 | .card{ 50 | position: absolute; 51 | font-size: 1.5em; 52 | top:0; 53 | left:0; 54 | opacity: 0; 55 | width: 100%; 56 | height: 100%; 57 | transform: translateX(50%) rotateY(-10deg); 58 | transition: transform 0.4s ease , opacity 0.4s ease; 59 | } 60 | .card.active{ 61 | opacity: 1; 62 | transform: translateX(0) rotateY(0); 63 | cursor: pointer; 64 | z-index:10; 65 | } 66 | .inner-card{ 67 | box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3); 68 | border-radius: 4px; 69 | width: 100%; 70 | height: 100%; 71 | position: relative; 72 | transform-style: preserve-3d; 73 | transition: transform 0.4s ease; 74 | } 75 | 76 | .inner-card-front,.inner-card-back{ 77 | backface-visibility: hidden; 78 | position: absolute; 79 | top:0; 80 | left:0; 81 | display: flex; 82 | align-items: center; 83 | justify-content: center; 84 | width: 100%; 85 | height: 100%; 86 | background: #fff; 87 | } 88 | .card.show-answer .inner-card{ 89 | transform: rotateX(180deg); 90 | } 91 | .inner-card-front{ 92 | transform: rotateX(0deg); 93 | z-index: 2; 94 | } 95 | .inner-card-back{ 96 | transform: rotateX(180deg); 97 | } 98 | .inner-card-front::after , .inner-card-back::after{ 99 | content: "Flip"; 100 | position: absolute; 101 | top:10px; 102 | right:10px; 103 | font-weight: bold; 104 | font-size: 16px; 105 | color:#ddd; 106 | } 107 | 108 | .navigation{ 109 | display: flex; 110 | margin:20px 0; 111 | } 112 | .navigation .nav-button{ 113 | border:none; 114 | background: transparent; 115 | cursor: pointer; 116 | font-size: 16px; 117 | } 118 | .navigation p{ 119 | margin:0 25px; 120 | } 121 | .btn-hidden{ 122 | border:0; 123 | background: transparent; 124 | } 125 | .add-container{ 126 | background-color: #f0f0f0; 127 | border-top:2px solid #eee; 128 | display: flex; 129 | flex-direction: column; 130 | align-items: center; 131 | justify-content: center; 132 | padding: 10px 0; 133 | position: absolute; 134 | top:0; 135 | bottom: 0; 136 | width: 100%; 137 | opacity: 0; 138 | z-index:-1; 139 | transition: 0.3s ease; 140 | } 141 | 142 | .add-container.show{ 143 | opacity: 1; 144 | z-index:2; 145 | } 146 | .add-container h3{ 147 | margin: 10px 0; 148 | } 149 | .add-container label{ 150 | display: block; 151 | margin:20px 0 10px; 152 | } 153 | .form-group textarea{ 154 | border:1px solid #aaa; 155 | border-radius: 3px; 156 | font-size: 16px; 157 | padding: 12px; 158 | min-width: 500px; 159 | min-height: 50%; 160 | outline:none; 161 | } 162 | .card.left{ 163 | transform: translate(-50%) rotateY(10deg); 164 | } -------------------------------------------------------------------------------- /Workshop 18 - Menu Slider/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Menu Slider | Workshop 7 | 8 | 9 | 10 | 11 | 21 |
22 | 25 |

ก้องรักสยาม.คอม

26 |

เรียนรู้การสร้างเกมและเขียนโปรแกรม

27 | 28 |
29 |
30 |

Web Development

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor dolorum praesentium, voluptas quis placeat dolores nulla quasi dicta laborum nostrum nam cupiditate odit deleniti pariatur eum fugit natus? Cum, minus!

32 |

Game Development

33 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis non, a quas illum hic eveniet architecto explicabo sit aliquid nisi autem fugiat id earum sunt obcaecati, vel qui nihil minima?

34 |
35 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /Workshop 18 - Menu Slider/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 18 - Menu Slider/logo.png -------------------------------------------------------------------------------- /Workshop 18 - Menu Slider/script.js: -------------------------------------------------------------------------------- 1 | const toggle=document.getElementById('toggle'); 2 | 3 | const open=document.getElementById('open'); 4 | const modal=document.getElementById('modal'); 5 | const close=document.getElementById('close'); 6 | 7 | toggle.addEventListener('click',()=>{ 8 | document.body.classList.toggle('show-nav'); 9 | }); 10 | 11 | open.addEventListener('click',()=>{ 12 | modal.classList.add('show-modal'); 13 | }); 14 | 15 | close.addEventListener('click',()=>{ 16 | modal.classList.remove('show-modal'); 17 | }); 18 | 19 | window.addEventListener('click',e=>e.target == modal ? modal.classList.remove('show-modal') : false); -------------------------------------------------------------------------------- /Workshop 18 - Menu Slider/style.css: -------------------------------------------------------------------------------- 1 | :root{ 2 | --primary-color:#303366; 3 | --secondary-color:red; 4 | --modal-delay:1s; 5 | } 6 | 7 | *{ 8 | box-sizing: border-box; 9 | } 10 | body{ 11 | margin:0; 12 | } 13 | nav{ 14 | background-color: var(--primary-color); 15 | border-right: 2px solid rgba(200, 200, 200, 0.1); 16 | color:#fff; 17 | position: fixed; 18 | top:0; 19 | left: 0; 20 | width: 200px; 21 | height: 100vh; 22 | z-index: 100; 23 | transform: translateX(-100%); 24 | } 25 | nav .logo{ 26 | padding: 30px 0; 27 | text-align: center; 28 | } 29 | nav .logo img{ 30 | width: 75px; 31 | height: 75px; 32 | border-radius: 50%; 33 | } 34 | nav ul{ 35 | padding: 0; 36 | list-style-type: none; 37 | margin:0; 38 | } 39 | nav ul li{ 40 | border-bottom: 2px solid rgba(200, 200, 200, 0.1); 41 | padding: 20px; 42 | } 43 | nav ul li a{ 44 | color:#fff; 45 | text-decoration: none; 46 | } 47 | nav ul li a:hover{ 48 | text-decoration: underline; 49 | } 50 | 51 | header{ 52 | background-color: var(--primary-color); 53 | color:#fff; 54 | font-size: 130%; 55 | position: relative; 56 | text-align: center; 57 | padding: 40px 15px; 58 | } 59 | header h1{ 60 | margin:0; 61 | } 62 | header p{ 63 | margin:30px; 64 | } 65 | 66 | button, input[type="submit"]{ 67 | background-color: var(--secondary-color); 68 | border: 0; 69 | border-radius: 5px; 70 | color:#fff; 71 | padding: 8px 12px; 72 | cursor: pointer; 73 | } 74 | .toggle{ 75 | background: rgba(0,0,0,0.2); 76 | position: absolute; 77 | top:20px; 78 | left:20px; 79 | } 80 | .create-account{ 81 | padding: 12px 30px; 82 | } 83 | .container{ 84 | padding: 15px; 85 | margin:0 auto; 86 | max-width: 100%; 87 | width: 800px; 88 | } 89 | 90 | body.show-nav{ 91 | transform: translateX(200px); 92 | } 93 | body{ 94 | transition: transform 0.3s ease; 95 | } 96 | 97 | .modal-container{ 98 | display: none; 99 | background-color: rgba(0, 0, 0, 0.6); 100 | position: fixed; 101 | top:0; 102 | left: 0; 103 | right: 0; 104 | bottom: 0; 105 | } 106 | .modal{ 107 | background-color: #fff; 108 | border-radius: 5px; 109 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 110 | position: absolute; 111 | overflow: hidden; 112 | top:50%; 113 | left: 50%; 114 | transform: translate(-50%,-50%); 115 | max-width: 100%; 116 | width: 400px; 117 | } 118 | .modal-container.show-modal{ 119 | display: block; 120 | } 121 | 122 | .modal{ 123 | animation:modalOpen; 124 | animation-duration: var(--modal-delay); 125 | } 126 | 127 | .modal-header{ 128 | background-color: var(--primary-color); 129 | color:#fff; 130 | padding: 15px; 131 | } 132 | .modal-header h3{ 133 | margin:0; 134 | } 135 | .modal-content{ 136 | padding: 20px; 137 | } 138 | 139 | .modal-form div{ 140 | margin:15px 0; 141 | } 142 | .modal-form label{ 143 | display: block; 144 | margin-bottom: 5px; 145 | } 146 | 147 | .modal-form .form-input{ 148 | padding: 8px; 149 | width: 100%; 150 | } 151 | .close-btn{ 152 | position: absolute; 153 | top:0; 154 | right:0; 155 | background-color: transparent; 156 | font-size: 25px; 157 | } 158 | @keyframes modalOpen{ 159 | from{ 160 | opacity: 0; 161 | } 162 | to{ 163 | opacity: 1; 164 | } 165 | } -------------------------------------------------------------------------------- /Workshop 19 - Speech To Text/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Speech to Text 7 | 8 | 9 | 10 |

แปลงเสียงพูดเป็นข้อความ

11 |

12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /Workshop 19 - Speech To Text/script.js: -------------------------------------------------------------------------------- 1 | const SpeechRecognize=window.SpeechRecognition || window.webkitSpeechRecognition; 2 | 3 | const recognize=new SpeechRecognize(); 4 | const btn=document.querySelector('.control'); 5 | 6 | function recordVoice(){ 7 | const isRecord=btn.classList.contains('record'); 8 | 9 | if(isRecord){ 10 | recognize.start(); 11 | btn.classList.remove('record'); 12 | btn.classList.add('pause'); 13 | btn.innerText="Pause"; 14 | }else{ 15 | recognize.stop(); 16 | btn.classList.remove('pause'); 17 | btn.classList.add('record'); 18 | btn.innerText="Record"; 19 | } 20 | } 21 | function setVoicetoText(e){ 22 | let message=document.querySelector('.message'); 23 | message.innerText+=e.results[0][0].transcript; 24 | } 25 | function continueRecord(){ 26 | const isPause=btn.classList.contains('pause'); 27 | 28 | if(isPause){ 29 | recognize.start(); 30 | } 31 | } 32 | 33 | function setUpVoice(){ 34 | recognize.lang="th-TH"; 35 | btn.addEventListener('click',recordVoice); 36 | recognize.addEventListener('result',setVoicetoText); 37 | recognize.addEventListener('end',continueRecord); 38 | } 39 | 40 | setUpVoice(); -------------------------------------------------------------------------------- /Workshop 19 - Speech To Text/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | width: 100vw; 6 | height: 100vh; 7 | font-size:1.5em; 8 | margin:0; 9 | display: flex; 10 | flex-direction: column; 11 | align-items: center; 12 | } 13 | .control{ 14 | border:none; 15 | outline:none; 16 | } 17 | .control:active{ 18 | transform: scale(0.98); 19 | } 20 | .record{ 21 | color:#fff; 22 | background: red; 23 | } 24 | .pause{ 25 | color:#fff; 26 | background: blue; 27 | } 28 | .title{ 29 | color:#fff; 30 | background: orange; 31 | margin:0; 32 | padding: 20px; 33 | text-align: center; 34 | width: 100vw; 35 | } -------------------------------------------------------------------------------- /Workshop 2 - โปรแกรมบัญชีรายรับ-รายจ่าย/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | โปรแกรมบัญชีรายรับ - รายจ่าย 7 | 8 | 9 | 10 |

โปรแกรมบัญชีรายรับ - รายจ่าย

11 |
12 |

ยอดคงเหลือ (บาท)

13 |

฿0.00

14 |
15 |
16 |

รายรับ

17 |

฿5000

18 |
19 |
20 |

รายจ่าย

21 |

฿200

22 |
23 |
24 |

ประวัติธุรกรรม

25 | 26 |

เพิ่มธุรกรรม

27 |
28 |
29 | 30 | 31 |
32 |
33 | 36 | 37 |
38 | 39 |
40 |
41 | 42 | 43 | -------------------------------------------------------------------------------- /Workshop 2 - โปรแกรมบัญชีรายรับ-รายจ่าย/script.js: -------------------------------------------------------------------------------- 1 | // อ้างอิง element ใน index.html 2 | const balance = document.getElementById('balance'); 3 | const money_plus = document.getElementById('money-plus'); 4 | const money_minus = document.getElementById('money-minus'); 5 | const list = document.getElementById('list'); 6 | const form = document.getElementById('form'); 7 | const text = document.getElementById('text'); 8 | const amount = document.getElementById('amount'); 9 | 10 | let transactions=[]; 11 | 12 | function init(){ 13 | list.innerHTML=''; 14 | transactions.forEach(addDataToList); 15 | calculateMoney(); 16 | } 17 | function addDataToList(transactions){ 18 | const symbol = transactions.amount < 0 ?'-':'+'; 19 | const status = transactions.amount < 0 ? 'minus':'plus'; 20 | const item=document.createElement('li'); 21 | result = formatNumber(Math.abs(transactions.amount)); 22 | item.classList.add(status); 23 | item.innerHTML=`${transactions.text}${symbol}${result}`; 24 | list.appendChild(item) 25 | } 26 | function formatNumber(num) { 27 | return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,') 28 | } 29 | function autoID(){ 30 | return Math.floor(Math.random()*1000000) 31 | } 32 | 33 | function calculateMoney(){ 34 | const amounts=transactions.map(transactions=>transactions.amount); 35 | //คำนวณยอดคงเหลือ 36 | const total=amounts.reduce((result,item)=>(result+=item),0).toFixed(2); 37 | // คำนวณรายรับ 38 | const income=amounts.filter(item=>item>0).reduce((result,item)=>(result+=item),0).toFixed(2); 39 | // คำนวณรายจ่าย 40 | const expense=(amounts.filter(item=>item<0).reduce((result,item)=>(result+=item),0)*-1).toFixed(2); 41 | 42 | // แสดงผลทางจอภาพ 43 | balance.innerText=`฿`+formatNumber(total); 44 | money_plus.innerText=`฿`+formatNumber(income); 45 | money_minus.innerText=`฿`+formatNumber(expense); 46 | } 47 | 48 | function removeData(id){ 49 | transactions=transactions.filter(transactions=>transactions.id !==id); 50 | init(); 51 | } 52 | function addTransaction(e){ 53 | e.preventDefault(); 54 | if(text.value.trim() === '' || amount.value.trim() === ''){ 55 | alert("กรุณาป้อนข้อมูลให้ครบ"); 56 | }else{ 57 | const data={ 58 | id:autoID(), 59 | text:text.value, 60 | amount:+amount.value 61 | } 62 | 63 | transactions.push(data); 64 | addDataToList(data); 65 | calculateMoney(); 66 | text.value=''; 67 | amount.value=''; 68 | } 69 | } 70 | 71 | form.addEventListener('submit',addTransaction); 72 | init(); 73 | 74 | -------------------------------------------------------------------------------- /Workshop 2 - โปรแกรมบัญชีรายรับ-รายจ่าย/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap'); 2 | 3 | :root{ 4 | --box-shadow:0 1px 3px rgba(0,0,0,0.12) 5 | } 6 | *{ 7 | box-sizing: border-box; 8 | font-family: 'Kanit', sans-serif; 9 | } 10 | body{ 11 | font-family: 'Kanit', sans-serif; 12 | background-color: #f7f7f7; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | min-height: 100vh; 18 | margin:0; 19 | } 20 | .container{ 21 | margin:30px auto; 22 | width: 350px; 23 | } 24 | h1{ 25 | letter-spacing: 1px; 26 | margin:0; 27 | } 28 | h3{ 29 | border-bottom: 1px solid #bbb; 30 | padding-bottom: 10px; 31 | margin:40px 0 10px; 32 | } 33 | h4{ 34 | margin:0; 35 | } 36 | .income-expense-container{ 37 | display: flex; 38 | justify-content: space-between; 39 | background-color: #fff; 40 | box-shadow: var(--box-shadow); 41 | padding: 20px; 42 | margin:20px 0; 43 | } 44 | .income-expense-container>div{ 45 | flex:1; 46 | text-align: center; 47 | } 48 | .income-expense-container>div:first-of-type{ 49 | border-right: 1px solid #dedede; 50 | } 51 | .money{ 52 | font-size:20px; 53 | letter-spacing: 1px; 54 | margin:5px 0; 55 | } 56 | .money.plus{ 57 | color:#2ecc71; 58 | } 59 | .money.minus{ 60 | color:red; 61 | } 62 | label{ 63 | display: inline-block; 64 | margin:10px 0; 65 | } 66 | input[type="text"],input[type="number"]{ 67 | border:1px solid #dedede; 68 | border-radius: 2px; 69 | display: block; 70 | font-size:16px; 71 | padding:10px; 72 | width: 100%; 73 | } 74 | .btn{ 75 | font-family: 'Kanit', sans-serif; 76 | background-color: purple; 77 | cursor: pointer; 78 | color:#fff; 79 | box-shadow: var(--box-shadow); 80 | display: block; 81 | margin:10px 0 30px; 82 | padding: 10px; 83 | font-size:16px; 84 | width: 100%; 85 | } 86 | .list{ 87 | list-style-type: none; 88 | padding: 0; 89 | margin-bottom: 40px; 90 | } 91 | .list li{ 92 | background-color: #fff; 93 | box-shadow: var(--box-shadow); 94 | color:#333; 95 | display: flex; 96 | justify-content: space-between; 97 | position: relative; 98 | padding: 10px; 99 | margin:10px 0; 100 | } 101 | .list li.plus{ 102 | border-right:5px solid #2ecc71; 103 | } 104 | .list li.minus{ 105 | border-right:5px solid red; 106 | } 107 | .delete-btn{ 108 | cursor: pointer; 109 | background-color:red; 110 | color:#fff; 111 | border:0; 112 | font-size:20px; 113 | line-height: 20px; 114 | padding: 2px 5px; 115 | position: absolute; 116 | top:50%; 117 | left:0; 118 | transform:translate(-100%,-50%); 119 | opacity: 0; 120 | transition:opacity 0.3s ease; 121 | } 122 | .list li:hover .delete-btn{ 123 | opacity: 1; 124 | } 125 | .btn:focus,.delete-btn:focus{ 126 | outline: 0; 127 | } -------------------------------------------------------------------------------- /Workshop 20 - ข้อมูลสภาพอากาศ/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Open Weather API 7 | 8 | 9 | 10 |
11 |
12 |

Weather API

13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 |

Bangkok

21 |

TH

22 |
23 |
24 |
25 |

35

26 | max : 37, min : 21 27 |
28 |
29 |
Hot
30 |
100
31 |
4.0
32 |
33 |
34 |
35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Workshop 20 - ข้อมูลสภาพอากาศ/script.js: -------------------------------------------------------------------------------- 1 | let city="Tokyo"; 2 | const apiKey="caa3217f8f0c63e56472f590aafaa87f"; 3 | 4 | const form=document.getElementById('form'); 5 | const search=document.getElementById('search'); 6 | 7 | 8 | function setData(){ 9 | showWeather(); 10 | } 11 | 12 | async function showWeather(){ 13 | try { 14 | const url=`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`; 15 | const response=await fetch(url); 16 | const data=await response.json(); 17 | showDataToUI(data); 18 | } catch (error) { 19 | console.log(error); 20 | } 21 | } 22 | 23 | function showDataToUI(data){ 24 | const city=document.getElementById('city'); 25 | const state=document.getElementById('state'); 26 | const weather=document.getElementById('weather'); 27 | const status=document.getElementById('status'); 28 | const humidity=document.getElementById('humidity'); 29 | const wind=document.getElementById('wind'); 30 | 31 | city.innerText=data.name; 32 | state.innerText=data.sys.country; 33 | weather.children[0].innerHTML=calculate(parseInt(data.main.temp))+" C°"; 34 | weather.children[1].innerHTML="min :"+calculate(parseInt(data.main.temp_min))+" C°"+" max : "+calculate(parseInt(data.main.temp_max))+" C°"; 35 | 36 | // status 37 | status.innerText=data.weather[0].main; 38 | humidity.innerText="Humidity:"+data.main.humidity; 39 | wind.innerText="Wind :"+data.wind.speed; 40 | } 41 | 42 | function calculate(k){ 43 | return k-273; 44 | } 45 | function callDataAPI(e){ 46 | e.preventDefault(); 47 | city=search.value; 48 | showWeather(); 49 | } 50 | 51 | form.addEventListener('submit',callDataAPI); 52 | setData(); -------------------------------------------------------------------------------- /Workshop 20 - ข้อมูลสภาพอากาศ/style.css: -------------------------------------------------------------------------------- 1 | body{ 2 | width: 100vw; 3 | height: 100vh; 4 | margin:0; 5 | text-align: center; 6 | color:#515151; 7 | background: #43c9ce; 8 | background: linear-gradient(45deg,#185aad,#43cea2); 9 | } 10 | main{ 11 | display: flex; 12 | flex-direction: column; 13 | align-items: center; 14 | justify-content: center; 15 | } 16 | header{ 17 | color:#fff; 18 | margin-top:5%; 19 | } 20 | section{ 21 | margin-top: 7%; 22 | } 23 | #card{ 24 | width: 500px; 25 | box-shadow: 0 10px 0 #515154; 26 | } 27 | #weather{ 28 | display: flex; 29 | flex-direction: column; 30 | justify-content: center; 31 | color:#fff; 32 | background:orange; 33 | height: 10vh; 34 | padding: 20px 0; 35 | border:1px solid orange; 36 | border-top-left-radius: 10px; 37 | border-top-right-radius: 10px; 38 | } 39 | #weather>h1{ 40 | margin:0; 41 | font-size:3em; 42 | } 43 | #location{ 44 | color:#fff; 45 | } 46 | #city{ 47 | margin:0; 48 | font-size:2em; 49 | } 50 | #state{ 51 | margin-top:0; 52 | } 53 | #info{ 54 | display: flex; 55 | background-color: #fff; 56 | border:1px solid #e6e6e6; 57 | border-bottom-left-radius: 10px; 58 | border-bottom-right-radius: 10px; 59 | } 60 | #info>*{ 61 | border-right:1px solid #e6e6e6; 62 | padding:20px; 63 | flex:1; 64 | } 65 | #info>*:last-child{ 66 | border:none; 67 | } 68 | form{ 69 | position: relative; 70 | width: 500px; 71 | max-width: 100%; 72 | } 73 | form input{ 74 | border:0; 75 | border-radius: 50px; 76 | font-size:16px; 77 | padding: 15px 30px; 78 | width: 40%; 79 | outline: none; 80 | } 81 | button{ 82 | cursor: pointer; 83 | } 84 | button:active{ 85 | transform: scale(0.8); 86 | } 87 | form>button{ 88 | background-color:rgb(194, 0, 178); 89 | border:0; 90 | border-radius:50px; 91 | padding:13px 30px; 92 | color:#fff; 93 | right:2px; 94 | top:2px; 95 | } -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture1.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture2.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture3.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture4.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture5.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture6.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/image/Picture7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 21 - Expand Card Effect/image/Picture7.jpg -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 7 สิ่งมหัศจรรย์ของโลก 8 | 9 | 10 | 11 |
12 |
13 |

1.ชิเชน อิตซา

14 |
15 |
16 |

2.คริชตู เรเดงโตร์

17 |
18 |
19 |

3.กำแพงเมืองจีน

20 |
21 |
22 |

4.มาชูปิกชู

23 |
24 |
25 |

5.นครเพตรา

26 |
27 |
28 |

6.โคลอสเซียม

29 |
30 |
31 |

7.ทัชมาฮาล

32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/script.js: -------------------------------------------------------------------------------- 1 | const items = document.querySelectorAll('.item'); 2 | 3 | items.forEach((item)=>{ 4 | item.addEventListener('click',()=>{ 5 | removeActive(); 6 | item.classList.add('active'); 7 | }) 8 | }); 9 | 10 | function removeActive(){ 11 | items.forEach((item)=>{ 12 | item.classList.remove('active'); 13 | }); 14 | } -------------------------------------------------------------------------------- /Workshop 21 - Expand Card Effect/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | display: flex; 6 | justify-content: center; 7 | align-items: center; 8 | height: 100vh; 9 | overflow: hidden; 10 | margin: 0; 11 | } 12 | .container{ 13 | display: flex; 14 | width: 90vw; 15 | } 16 | .item{ 17 | background-size: cover; 18 | background-repeat: no-repeat; 19 | background-position: center; 20 | height: 80vh; 21 | border-radius: 50px; 22 | cursor: pointer; 23 | color:whitesmoke; 24 | flex:0.5; 25 | margin: 10px; 26 | position: relative; 27 | transition: flex 0.7s ease-in; 28 | opacity: 0.7; 29 | } 30 | 31 | .item.active{ 32 | flex:4; 33 | opacity: 1; 34 | } 35 | .item.active h3{ 36 | opacity: 1; 37 | transition: opacity 0.3s ease-in; 38 | } 39 | 40 | .item h3{ 41 | font-size: 24px; 42 | position: absolute; 43 | bottom: 20px; 44 | left:20px; 45 | margin:0; 46 | opacity: 0; 47 | background-color: #333; 48 | } 49 | 50 | @media(max-width:500px){ 51 | .container{ 52 | width: 100vw; 53 | } 54 | .item:nth-of-type(6),.item:nth-of-type(7){ 55 | display: none; 56 | } 57 | } -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture1.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture2.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture3.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture4.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture5.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture6.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture7.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/image/Picture8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 22 - Product Scroll Animation/image/Picture8.jpg -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Product Scroll Animation 8 | 9 | 10 | 11 |

เลื่อนเพื่อดูหมวดหมู่สินค้า

12 |
13 |

เตียง

14 |
15 |
16 |

รองเท้า

17 |
18 |
19 |

กล้องถ่ายรูป

20 |
21 |
22 |

ของเล่น

23 |
24 |
25 |

เสื้อผ้า

26 |
27 |
28 |

หมวก

29 |
30 |
31 |

กีต้าร์

32 |
33 |
34 |

หนังสือ

35 |
36 | 37 | 38 | -------------------------------------------------------------------------------- /Workshop 22 - Product Scroll Animation/script.js: -------------------------------------------------------------------------------- 1 | const categories = document.querySelectorAll('.category'); 2 | 3 | window.addEventListener('scroll',showCategory) 4 | 5 | 6 | function showCategory(){ 7 | const calculateHeight = window.innerHeight-20; 8 | 9 | categories.forEach(category=>{ 10 | const topPosition = category.getBoundingClientRect().top; 11 | if(topPosition 2 | 3 | 4 | 5 | 6 | 7 | เว็บไซต์ประกาศรับสมัครงาน 8 | 9 | 10 | 11 |
12 |
13 |

Graphic Design

14 | สมัครงาน 15 |
16 |
17 |

Programmer

18 | สมัครงาน 19 |
20 |
21 | 22 | 23 | -------------------------------------------------------------------------------- /Workshop 23 - SplitPageContent/script.js: -------------------------------------------------------------------------------- 1 | const left = document.querySelector('.left'); 2 | const right = document.querySelector('.right'); 3 | 4 | const container = document.querySelector('.container'); 5 | 6 | left.addEventListener('mouseenter',()=>{ 7 | container.classList.add('hover-left'); 8 | }); 9 | 10 | left.addEventListener('mouseleave',()=>{ 11 | container.classList.remove('hover-left'); 12 | }); 13 | 14 | 15 | right.addEventListener('mouseenter',()=>{ 16 | container.classList.add('hover-right'); 17 | }); 18 | 19 | right.addEventListener('mouseleave',()=>{ 20 | container.classList.remove('hover-right'); 21 | }); -------------------------------------------------------------------------------- /Workshop 23 - SplitPageContent/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | height: 100vh; 6 | overflow: hidden; 7 | margin:0; 8 | } 9 | 10 | .container{ 11 | position: relative; 12 | width: 100%; 13 | height: 100%; 14 | background-color: #333; 15 | } 16 | 17 | .content{ 18 | position: absolute; 19 | width: 50%; 20 | height: 100%; 21 | overflow: hidden; 22 | } 23 | 24 | .content.left{ 25 | left: 0; 26 | background-image: url("image/Content1.jpg"); 27 | background-repeat: no-repeat; 28 | background-size: cover; 29 | } 30 | .content.right{ 31 | right:0; 32 | background-image: url("image/Content2.jpg"); 33 | background-repeat: no-repeat; 34 | background-size: cover; 35 | } 36 | 37 | /* Overlay */ 38 | 39 | .content::before{ 40 | content:''; 41 | background-color: rgba(0, 0, 0, 0.5); 42 | width: 100%; 43 | height: 100%; 44 | position: absolute; 45 | } 46 | 47 | h1{ 48 | font-size: 4rem; 49 | color: #fff; 50 | top:50%; 51 | left:50%; 52 | position: absolute; 53 | white-space: nowrap; 54 | transform: translateX(-50%); 55 | } 56 | 57 | /* Button */ 58 | .btn{ 59 | position: absolute; 60 | left:50%; 61 | top:70%; 62 | transform: translateX(-50%); 63 | color:#fff; 64 | text-decoration: none; 65 | padding: 1.5rem; 66 | border:#fff solid 0.2rem; 67 | font-size: 1.2rem; 68 | width: 15rem; 69 | display: flex; 70 | align-items: center; 71 | justify-content: center; 72 | font-weight: bold; 73 | } 74 | 75 | .content.left .btn:hover{ 76 | background-color: orangered; 77 | } 78 | 79 | .content.right .btn:hover{ 80 | background-color: green; 81 | } 82 | 83 | /* กำหนดพื้นที่ */ 84 | .hover-left .left{ 85 | width:65% 86 | } 87 | .hover-left .right{ 88 | width:35% 89 | } 90 | 91 | .hover-right .right{ 92 | width:65% 93 | } 94 | .hover-right .left{ 95 | width:35% 96 | } 97 | 98 | /* Effect */ 99 | .content.left,.content.right,.content.left::before,.content.right::before{ 100 | transition: all 1s ease-in-out; 101 | } -------------------------------------------------------------------------------- /Workshop 24 - Quiz Application/Quiz.txt: -------------------------------------------------------------------------------- 1 | const questionData = [ 2 | { 3 | question:"1.ข้อใดไม่ใช่ระบบปฏิบัติการ", 4 | a:"ระบบปฏิบัติการดอส", 5 | b:"ไมโครซอฟท์เวิร์ด", 6 | c:"ไมโครซอฟต์วินโดวส์", 7 | d:"ระบบปฏิบัติการแอนดรอยด์", 8 | correct:"b" 9 | }, 10 | { 11 | question:"2.ข้อใดคือโปรแกรม Web Browser", 12 | a:"Google Chrome", 13 | b:"Keyboard", 14 | c:"Mouse", 15 | d:"Monitor", 16 | correct:"a" 17 | }, 18 | { 19 | question:"3.ข้อใดคือฮา์ดแวร์", 20 | a:"Keyboard", 21 | b:"Mouse", 22 | c:"Monitor", 23 | d:"ถูกทุกข้อ", 24 | correct:"d" 25 | } 26 | ] 27 | -------------------------------------------------------------------------------- /Workshop 24 - Quiz Application/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ข้อสอบออนไลน์ | Quiz Application 8 | 9 | 10 | 11 |
12 |
13 |

คำถาม

14 |
    15 |
  • 16 | 17 | 18 |
  • 19 |
  • 20 | 21 | 22 |
  • 23 |
  • 24 | 25 | 26 |
  • 27 |
  • 28 | 29 | 30 |
  • 31 |
32 |
33 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Workshop 24 - Quiz Application/script.js: -------------------------------------------------------------------------------- 1 | const questionData = [ 2 | { 3 | question:"1.ข้อใดไม่ใช่ระบบปฏิบัติการ", 4 | a:"ระบบปฏิบัติการดอส", 5 | b:"ไมโครซอฟท์เวิร์ด", 6 | c:"ไมโครซอฟต์วินโดวส์", 7 | d:"ระบบปฏิบัติการแอนดรอยด์", 8 | correct:"b" 9 | }, 10 | { 11 | question:"2.ข้อใดคือโปรแกรม Web Browser", 12 | a:"Google Chrome", 13 | b:"Keyboard", 14 | c:"Mouse", 15 | d:"Monitor", 16 | correct:"a" 17 | }, 18 | { 19 | question:"3.ข้อใดคือฮา์ดแวร์", 20 | a:"Keyboard", 21 | b:"Mouse", 22 | c:"Monitor", 23 | d:"ถูกทุกข้อ", 24 | correct:"d" 25 | } 26 | ]; 27 | 28 | const questionEl=document.getElementById('question'); 29 | const answerEls=document.querySelectorAll('.answer'); 30 | const container = document.querySelector('.question-container'); 31 | const choiceA=document.getElementById('a-text'); 32 | const choiceB=document.getElementById('b-text'); 33 | const choiceC=document.getElementById('c-text'); 34 | const choiceD=document.getElementById('d-text'); 35 | 36 | const submitBtn=document.getElementById('submit'); 37 | 38 | let currentQuestion = 0; 39 | let score=0; 40 | loadQuestion(); 41 | 42 | function loadQuestion(){ 43 | checkChoice(); 44 | const currentQuizData = questionData[currentQuestion]; 45 | questionEl.innerText=currentQuizData.question; 46 | choiceA.innerText=currentQuizData.a; 47 | choiceB.innerText=currentQuizData.b; 48 | choiceC.innerText=currentQuizData.c; 49 | choiceD.innerText=currentQuizData.d; 50 | } 51 | 52 | function checkChoice(){ 53 | answerEls.forEach(answerEl=>answerEl.checked=false); 54 | } 55 | 56 | submitBtn.addEventListener('click',()=>{ 57 | //ตรวจสอบตัวเลือก 58 | let answer = getChoiceAnswer(); 59 | if(answer){ 60 | if(answer === questionData[currentQuestion].correct){ 61 | score++; 62 | } 63 | currentQuestion++; 64 | if(currentQuestionคุณได้คะแนน ${score}/${questionData.length}`; 68 | } 69 | } 70 | }); 71 | 72 | function getChoiceAnswer(){ 73 | let answer; 74 | answerEls.forEach(answerEl=>{ 75 | if(answerEl.checked){ 76 | answer = answerEl.id; 77 | } 78 | }); 79 | return answer; 80 | } -------------------------------------------------------------------------------- /Workshop 24 - Quiz Application/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background: #b8c6db; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin:0; 13 | } 14 | .question-container{ 15 | background: #fff; 16 | border-radius: 10px; 17 | width: 600px; 18 | overflow: hidden; 19 | box-shadow: 0 0 10px 2px rgba(100, 100, 100, 0.1); 20 | } 21 | .question-header{ 22 | padding: 4rem; 23 | } 24 | h2{ 25 | padding: 1rem; 26 | text-align: center; 27 | margin:0; 28 | } 29 | ul{ 30 | list-style-type: none; 31 | } 32 | ul li{ 33 | font-size: 1.2rem; 34 | margin:1rem 0; 35 | } 36 | 37 | ul li label{ 38 | cursor: pointer; 39 | } 40 | button{ 41 | background-color: purple; 42 | color: #fff; 43 | border: none; 44 | display: block; 45 | width: 100%; 46 | cursor: pointer; 47 | font-size: 1.1rem; 48 | padding: 1.3rem; 49 | } -------------------------------------------------------------------------------- /Workshop 25 - Text Keyboard Effect/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Text Keyboard Effect 8 | 9 | 10 | 11 |

12 |
13 | 14 | 15 |
16 | 17 | 18 | -------------------------------------------------------------------------------- /Workshop 25 - Text Keyboard Effect/script.js: -------------------------------------------------------------------------------- 1 | const textEl=document.getElementById('text'); 2 | const speedEl=document.getElementById('speed'); 3 | 4 | const text = "ยินดีต้อนรับเข้าสู่หน้าแรกของเว็บไซต์"; 5 | let speed = 300/speedEl.value; 6 | 7 | let characterId=1; 8 | 9 | writeText(); 10 | 11 | function writeText(){ 12 | textEl.innerText=text.slice(0,characterId); 13 | characterId++; 14 | if(characterId>text.length){ 15 | characterId=1; 16 | } 17 | setTimeout(writeText,speed); 18 | } 19 | 20 | speedEl.addEventListener('input',(e)=>{ 21 | speed=300/e.target.value; 22 | }); -------------------------------------------------------------------------------- /Workshop 25 - Text Keyboard Effect/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background-color: #333; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | } 14 | div{ 15 | position: absolute; 16 | background: whitesmoke; 17 | padding: 10px 20px; 18 | bottom: 20px; 19 | font-size: 18px; 20 | } 21 | input{ 22 | width: 50px; 23 | padding: 5px; 24 | font-size: 18px; 25 | background-color: darksalmon; 26 | border: none; 27 | text-align: center; 28 | } 29 | input:focus{ 30 | outline: none; 31 | } 32 | 33 | .text{ 34 | color: #fff; 35 | } -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/image/heart.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/image/neutral.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/image/sad.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/image/smile.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | 8 | 9 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ระบบประเมินความพึงพอใจ 8 | 9 | 10 | 11 |
12 | คุณมีความพึงพอใจในบริการของเราระดับใด 13 |
14 |
15 | 16 | ไม่พอใจ 17 |
18 |
19 | 20 | เฉยๆ 21 |
22 |
23 | 24 | พอใจมาก 25 |
26 |
27 | 28 |
29 | 30 | 31 | -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/script.js: -------------------------------------------------------------------------------- 1 | const ratingContainer = document.querySelector('.ratings-container'); 2 | const ratings = document.querySelectorAll('.rating'); 3 | const panel = document.getElementById('panel'); 4 | const sendBtn = document.getElementById('send'); 5 | 6 | 7 | let selected; 8 | ratingContainer.addEventListener('click',(e)=>{ 9 | if(e.target.parentNode.classList.contains('rating')){ 10 | removeActive(); 11 | e.target.parentNode.classList.add('active'); 12 | selected = e.target.nextElementSibling.innerHTML; 13 | } 14 | }); 15 | 16 | function removeActive(){ 17 | for(let i=0 ;i{ 23 | panel.innerHTML=` 24 | 25 | ขอบคุณที่ใช้บริการของเรา 26 |
27 | ผลการประเมิน : ${selected} 28 | `; 29 | }); -------------------------------------------------------------------------------- /Workshop 26 - ประเมินความพึงพอใจ/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background-color: #fefaf2; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 100vh; 10 | overflow: hidden; 11 | margin: 0; 12 | } 13 | .container{ 14 | background: #fff; 15 | display: flex; 16 | flex-direction: column; 17 | align-items: center; 18 | justify-content: center; 19 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 20 | border-radius: 4px; 21 | padding: 30px; 22 | max-width: 400px; 23 | font-size: 90%; 24 | text-align: center; 25 | } 26 | .container strong{ 27 | line-height: 20px; 28 | } 29 | .ratings-container{ 30 | display: flex; 31 | margin: 20px 0; 32 | } 33 | .rating{ 34 | flex: 1; 35 | cursor: pointer; 36 | padding: 20px; 37 | margin:10px 5px; 38 | } 39 | 40 | .rating img{ 41 | width: 50px; 42 | } 43 | .rating small{ 44 | color:#555; 45 | display: inline-block; 46 | margin:10px 0 0 ; 47 | } 48 | 49 | .rating:hover,.rating.active{ 50 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 51 | border-radius: 4px; 52 | } 53 | 54 | .btn{ 55 | background: #302d2b; 56 | color:#fff; 57 | border:0; 58 | padding: 12px 30px; 59 | border-radius: 4px; 60 | cursor: pointer; 61 | } 62 | 63 | .img-complete{ 64 | width: 30px; 65 | margin-bottom: 10px; 66 | } -------------------------------------------------------------------------------- /Workshop 27 - Image Carousel/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Image Carousel Slider 8 | 9 | 10 | 11 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /Workshop 27 - Image Carousel/script.js: -------------------------------------------------------------------------------- 1 | const container = document.getElementById('container'); 2 | const imgs = document.querySelectorAll('#container img'); 3 | 4 | const leftBtn = document.getElementById('left'); 5 | const rightBtn = document.getElementById('right'); 6 | 7 | //สร้างตัวนับภาพ 8 | let idx = 0; 9 | 10 | let interval = setInterval(slide,2000); 11 | 12 | function slide(){ 13 | idx++; 14 | changeImage(); 15 | } 16 | 17 | function changeImage(){ 18 | // console.log(imgs.length); 19 | if(idx>imgs.length-1){ 20 | idx=0; 21 | }else if(idx<0){ 22 | idx=imgs.length-1; 23 | } 24 | container.style.transform=`translateX(${-idx*500}px)`; 25 | // console.log(`translateX(${-idx*500}px)`); 26 | } 27 | 28 | leftBtn.addEventListener('click',()=>{ 29 | idx--; 30 | changeImage(); 31 | resetInterval(); 32 | }); 33 | 34 | rightBtn.addEventListener('click',()=>{ 35 | idx++; 36 | changeImage(); 37 | resetInterval(); 38 | }); 39 | 40 | function resetInterval(){ 41 | clearInterval(interval); 42 | interval = setInterval(slide,2000); 43 | } -------------------------------------------------------------------------------- /Workshop 27 - Image Carousel/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | height: 100vh; 10 | margin:0; 11 | } 12 | 13 | img{ 14 | width: 500px; 15 | height: 500px; 16 | object-fit: cover; 17 | } 18 | 19 | .carousel{ 20 | width: 500px; 21 | overflow: hidden; 22 | height: 530px; 23 | box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 24 | } 25 | .image-container{ 26 | display: flex; 27 | transform: translateX(0); 28 | transition: transform 0.5s ease-in-out; 29 | } 30 | 31 | .button-container{ 32 | display: flex; 33 | justify-content: space-between; 34 | } 35 | .btn{ 36 | background: purple; 37 | color:#fff; 38 | border:none; 39 | padding: 0.5rem; 40 | width: 49.5%; 41 | cursor: pointer; 42 | } 43 | .btn:hover{ 44 | opacity: 0.9; 45 | } -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/image/Picture1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 28 - Vertical Content/image/Picture1.jpg -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/image/Picture2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 28 - Vertical Content/image/Picture2.jpg -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/image/Picture3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 28 - Vertical Content/image/Picture3.jpg -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/image/Picture4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 28 - Vertical Content/image/Picture4.jpg -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | ดูรายละเอียดที่พัก 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |

ห้องนอน

16 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quibusdam.

17 |
18 |
19 |

ห้องนั่งเล่น

20 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quibusdam.

21 |
22 |
23 |

ห้องครัว

24 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quibusdam.

25 |
26 |
27 |

ห้องน้ำ

28 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis, quibusdam.

29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 | 41 | 44 |
45 |
46 | 47 | 48 | -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/script.js: -------------------------------------------------------------------------------- 1 | const slideContainer = document.querySelector('.slider-container'); 2 | const slideRight = document.querySelector('.right-content'); 3 | const slideLeft = document.querySelector('.left-content'); 4 | const upButton = document.querySelector('.up-button'); 5 | const downButton = document.querySelector('.down-button'); 6 | 7 | 8 | //จำนวนภาพ Slide 9 | const slideLength = slideRight.querySelectorAll('div').length; 10 | 11 | let activeIndex = 0; 12 | 13 | upButton.addEventListener('click',()=>changeImage("up")); 14 | downButton.addEventListener('click',()=>changeImage("down")); 15 | 16 | // 0 - 3 17 | function changeImage(direction){ 18 | const slideHeight = slideContainer.clientHeight; 19 | if(direction=="up"){ 20 | activeIndex++; 21 | if(activeIndex>slideLength-1){ 22 | activeIndex=0; 23 | } 24 | }else if(direction=="down"){ 25 | activeIndex--; 26 | if(activeIndex<0){ 27 | activeIndex=slideLength-1; 28 | } 29 | } 30 | slideLeft.style.transform = `translateY(-${activeIndex*slideHeight}px)`; 31 | slideRight.style.transform = `translateY(-${activeIndex*slideHeight}px)`; 32 | } -------------------------------------------------------------------------------- /Workshop 28 - Vertical Content/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body{ 8 | height: 100vh; 9 | } 10 | .slider-container{ 11 | position: relative; 12 | overflow: hidden; 13 | width: 100vw; 14 | height: 100vh; 15 | } 16 | .left-content{ 17 | width: 35%; 18 | height: 100%; 19 | position: absolute; 20 | top:0; 21 | left:0; 22 | transition: transform 0.5s ease-in-out; 23 | } 24 | .left-content>div{ 25 | width: 100%; 26 | height: 100%; 27 | display: flex; 28 | flex-direction: column; 29 | align-items: center; 30 | justify-content: center; 31 | color: #fff; 32 | text-align: center; 33 | } 34 | .left-content h1{ 35 | font-size: 40px; 36 | margin-bottom: 10px; 37 | margin-top: -30px; 38 | } 39 | .right-content{ 40 | width: 65%; 41 | height: 100%; 42 | position: absolute; 43 | top:0; 44 | left:35%; 45 | transition: transform 0.5s ease-in-out; 46 | } 47 | .right-content>div{ 48 | background-repeat: no-repeat; 49 | background-size: cover; 50 | background-position: center center; 51 | width: 100%; 52 | height: 100%; 53 | } 54 | 55 | .slider-container .action-button button{ 56 | position: absolute; 57 | left:35%; 58 | top:45%; 59 | z-index: 100; 60 | } 61 | .slider-container .action-button .down-button{ 62 | transform: translateX(-100%); 63 | } 64 | .slider-container .action-button .up-button{ 65 | transform: translateY(-100%); 66 | } -------------------------------------------------------------------------------- /Workshop 29 - Content Loading/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Content Loading 8 | 9 | 10 | 11 |
12 | 15 |
16 |

17 |   18 |

19 |

20 |   21 |

22 |
23 |
24 |   25 |
26 |
27 | 28 |   29 | 30 | 31 |   32 | 33 |
34 |
35 |
36 |
37 | 38 | 39 | -------------------------------------------------------------------------------- /Workshop 29 - Content Loading/script.js: -------------------------------------------------------------------------------- 1 | const header = document.getElementById('header'); 2 | const title =document.getElementById('title'); 3 | const description = document.getElementById('description'); 4 | const profile_img = document.getElementById('profile_img'); 5 | const seller_name = document.getElementById('name'); 6 | const price = document.getElementById('price'); 7 | 8 | const animated_bg = document.querySelectorAll('.animated_bg'); 9 | const animated_text = document.querySelectorAll('.animated_text'); 10 | 11 | setTimeout(showContent,2000); 12 | 13 | function showContent(){ 14 | header.innerHTML=` 15 | 16 | `; 17 | title.innerHTML=`โซฟา`; 18 | description.innerHTML= 19 | ` 20 | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut delectus atque similique architecto id autem. 21 | `; 22 | profile_img.innerHTML=``; 23 | seller_name.innerHTML=`พิมลดา`; 24 | price.innerHTML=`ราคา 20,000 บาท`; 25 | animated_bg.forEach(el=>el.classList.remove('animated_bg')); 26 | animated_text.forEach(el=>el.classList.remove('animated_text')); 27 | } -------------------------------------------------------------------------------- /Workshop 29 - Content Loading/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | 5 | body{ 6 | background-color: #ecf0f1; 7 | display: flex; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | } 14 | .card{ 15 | width: 350px; 16 | overflow: hidden; 17 | border-radius: 10px; 18 | box-shadow: 0 20px 10px rgba(0, 0, 0,0.2); 19 | } 20 | img{ 21 | max-width: 100%; 22 | } 23 | .card-header{ 24 | height: 200px; 25 | } 26 | .card-header img{ 27 | object-fit: cover; 28 | width: 100%; 29 | height: 100%; 30 | } 31 | .card-content{ 32 | background-color: #fff; 33 | padding: 30px; 34 | } 35 | .card-title{ 36 | height: 20px; 37 | margin:0; 38 | } 39 | .card-description{ 40 | color: #777; 41 | margin:10px 0 20px; 42 | } 43 | .seller{ 44 | display: flex; 45 | } 46 | .profile_img{ 47 | border-radius: 50%; 48 | overflow: hidden; 49 | width: 40px; 50 | height: 40px; 51 | } 52 | .seller-info{ 53 | display: flex; 54 | flex-direction: column; 55 | justify-content: space-around; 56 | margin-left:10px; 57 | width: 100px; 58 | } 59 | .seller-info small{ 60 | color:#999; 61 | margin-top: 5px; 62 | } 63 | 64 | /* Effect Loading Animation */ 65 | .animated_bg{ 66 | background-image: linear-gradient( 67 | to right, 68 | #f6f7f8 0%, 69 | #edeef1 10%, 70 | #f6f7f8 20%, 71 | #f6f7f8 100% 72 | ); 73 | background-size: 200% 100%; 74 | animation: animatedPlay 1s linear infinite; 75 | } 76 | .animated_text{ 77 | border-radius: 50px; 78 | display: inline-block; 79 | margin:0; 80 | height: 10px; 81 | width: 100%; 82 | } 83 | 84 | @keyframes animatedPlay{ 85 | 0%{ 86 | background-position: 50% 0; 87 | } 88 | 100%{ 89 | background-position: -150% 0; 90 | } 91 | } -------------------------------------------------------------------------------- /Workshop 3 - Light Dark Mode/img/undraw_Projections_dark.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Workshop 3 - Light Dark Mode/img/undraw_Projections_light.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Workshop 3 - Light Dark Mode/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Dark & Light Mode | Workshop 7 | 8 | 9 | 10 | 11 |
12 | 13 | โหมดกลางวัน 14 | 15 | 16 | 20 |
21 | 26 |
27 |
28 |

ก้องรักสยาม สตูดิโอ

29 |

เขียนโปรแกรม สร้างเกม และพัฒนาเว็บไซต์

30 |
31 |
32 |
33 |

ผลงานด้านต่างๆ

34 |
35 |
36 |

พัฒนาเว็บไซต์

37 | 38 |
39 |
40 |

สร้างเกม 2 มิติ

41 | 42 |
43 |
44 |

ฟรีแลนด์

45 | 46 |
47 |
48 |
49 |
50 | 56 |
57 | 58 | 59 | -------------------------------------------------------------------------------- /Workshop 3 - Light Dark Mode/script.js: -------------------------------------------------------------------------------- 1 | const switchToggle=document.querySelector('input[type="checkbox"]'); 2 | const toggleIcon=document.getElementById('toggle-icon'); 3 | const nav=document.getElementById('nav'); 4 | const image1=document.getElementById('image1'); 5 | const image2=document.getElementById('image2'); 6 | const image3=document.getElementById('image3'); 7 | 8 | function switchMode(e){ 9 | if(e.target.checked){ 10 | document.documentElement.setAttribute('data-theme','dark'); 11 | darkMode(); 12 | imageSwitchMode('dark'); 13 | }else{ 14 | document.documentElement.setAttribute('data-theme','light'); 15 | lightMode(); 16 | imageSwitchMode('light'); 17 | } 18 | } 19 | function darkMode(){ 20 | toggleIcon.children[0].textContent="โหมดกลางคืน"; 21 | toggleIcon.children[1].classList.replace('fa-sun','fa-moon'); 22 | nav.style.backgroundColor='rgb(0 0 0 / 50%)'; 23 | } 24 | function lightMode(){ 25 | toggleIcon.children[0].textContent="โหมดกลางวัน"; 26 | toggleIcon.children[1].classList.replace('fa-moon','fa-sun'); 27 | nav.style.backgroundColor='rgb(255 255 255 / 50%)'; 28 | } 29 | 30 | function imageSwitchMode(mode){ 31 | image1.src=`img/undraw_Projections_${mode}.svg`; 32 | image2.src=`img/undraw_Raining_${mode}.svg`; 33 | image3.src=`img/undraw_Freelancer_${mode}.svg`; 34 | } 35 | switchToggle.addEventListener('change',switchMode); -------------------------------------------------------------------------------- /Workshop 30 - Review Content/Content.txt: -------------------------------------------------------------------------------- 1 | const userdata = [ 2 | { 3 | name:"พิมลี่พลอย", 4 | job:"พนักงานประจำ", 5 | text:"อากาศดี อาหารอร่อย ห้องพักสะอาดมาก", 6 | image:"https://randomuser.me/api/portraits/women/86.jpg" 7 | }, 8 | { 9 | name:"ก้อง รักสยาม", 10 | job:"โปรแกรมเมอร์", 11 | text:"อากาศดีมากครับ อาหารสะอาดอร่อย เจ้าของร้านใจดีมาก จะมาอุดหนุนใหม่นะครับ", 12 | image:"https://randomuser.me/api/portraits/men/12.jpg" 13 | }, 14 | { 15 | name:"พี่ตูนคนหล่อ", 16 | job:"รับราชการ", 17 | text:"อาหารสะอาดอร่อย วิวที่ร้านสวยมาก เจ้าของร้านใจดีและอากาศดีมากครับ ", 18 | image:"https://randomuser.me/api/portraits/men/13.jpg" 19 | }, 20 | { 21 | name:"พี่โจโจ้", 22 | job:"นักเขียน", 23 | text:"อาหารอร่อย วิวสวย แต่ที่จอดรถน้อยไปหน่อย!", 24 | image:"https://randomuser.me/api/portraits/men/14.jpg" 25 | }, 26 | { 27 | name:"น้องตั๊กแตน", 28 | job:"พนักงานโรงแรม", 29 | text:"ราคาเป็นกันเอง อาหารโคตรอร่อย เจ้าของร้านและพนักงานน่ารัก", 30 | image:"https://randomuser.me/api/portraits/women/33.jpg" 31 | } 32 | ]; -------------------------------------------------------------------------------- /Workshop 30 - Review Content/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | กระดานรีวิว 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |

17 | อากาศดี อาหารอร่อย ห้องพักสะอาดมาก 18 |

19 |
20 | 21 |
22 |
พิมลี่พลอย
23 |
พนักงานประจำ
24 |
25 |
26 |
27 | 28 | 29 | -------------------------------------------------------------------------------- /Workshop 30 - Review Content/script.js: -------------------------------------------------------------------------------- 1 | const userdata = [ 2 | { 3 | name:"พิมลี่พลอย", 4 | job:"พนักงานประจำ", 5 | text:"อากาศดี อาหารอร่อย ห้องพักสะอาดมาก", 6 | image:"https://randomuser.me/api/portraits/women/60.jpg" 7 | }, 8 | { 9 | name:"ก้อง รักสยาม", 10 | job:"โปรแกรมเมอร์", 11 | text:"อากาศดีมากครับ อาหารสะอาดอร่อย เจ้าของร้านใจดีมาก จะมาอุดหนุนใหม่นะครับ", 12 | image:"https://randomuser.me/api/portraits/men/12.jpg" 13 | }, 14 | { 15 | name:"พี่ตูนคนหล่อ", 16 | job:"รับราชการ", 17 | text:"อาหารสะอาดอร่อย วิวที่ร้านสวยมาก เจ้าของร้านใจดีและอากาศดีมากครับ ", 18 | image:"https://randomuser.me/api/portraits/men/13.jpg" 19 | }, 20 | { 21 | name:"พี่โจโจ้", 22 | job:"นักเขียน", 23 | text:"อาหารอร่อย วิวสวย แต่ที่จอดรถน้อยไปหน่อย!", 24 | image:"https://randomuser.me/api/portraits/men/14.jpg" 25 | }, 26 | { 27 | name:"น้องตั๊กแตน", 28 | job:"พนักงานโรงแรม", 29 | text:"ราคาเป็นกันเอง อาหารโคตรอร่อย เจ้าของร้านและพนักงานน่ารัก", 30 | image:"https://randomuser.me/api/portraits/women/33.jpg" 31 | } 32 | ]; 33 | 34 | const review = document.querySelector('.review'); 35 | const userImage = document.querySelector('.user-image'); 36 | const userName = document.querySelector('.user-name'); 37 | const userJob=document.querySelector('.user-job'); 38 | 39 | let activeIndex = 1; 40 | 41 | function showReview(){ 42 | const {name,job,text,image} = userdata[activeIndex]; 43 | review.innerHTML=text; 44 | userImage.src=image; 45 | userName.innerHTML=name; 46 | userJob.innerHTML=job; 47 | activeIndex++; 48 | 49 | if(activeIndex>userdata.length-1){ 50 | activeIndex=0; 51 | } 52 | } 53 | 54 | setInterval(showReview,10000); -------------------------------------------------------------------------------- /Workshop 30 - Review Content/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background-color: #f4f4f4; 6 | display: flex; 7 | flex-direction: column; 8 | align-items: center; 9 | justify-content: center; 10 | height: 100vh; 11 | overflow: hidden; 12 | margin: 0; 13 | padding: 10px; 14 | } 15 | .container{ 16 | background-color: palevioletred; 17 | color: #fff; 18 | border-radius: 15px; 19 | margin: 20px auto; 20 | padding: 50px 80px; 21 | max-width: 768px; 22 | position: relative; 23 | } 24 | .fa-quote{ 25 | position: absolute; 26 | top: 70px; 27 | } 28 | .fa-quote-left{ 29 | left:40px; 30 | } 31 | .fa-quote-right{ 32 | right:40px; 33 | } 34 | .review{ 35 | line-height: 28px; 36 | text-align: justify; 37 | } 38 | .user{ 39 | display: flex; 40 | align-items: center; 41 | justify-content: center; 42 | } 43 | .user .user-image{ 44 | border-radius: 50%; 45 | width: 75px; 46 | height: 75px; 47 | object-fit: cover; 48 | } 49 | .user .user-details{ 50 | margin-left: 10px; 51 | } 52 | .user .user-name{ 53 | margin:0; 54 | } 55 | .progress-bar{ 56 | background-color: #fff; 57 | height: 4px; 58 | width: 100%; 59 | transform-origin: left; 60 | animation : processing 10s linear infinite; 61 | } 62 | 63 | @keyframes processing{ 64 | 0%{ 65 | transform: scaleX(0); 66 | } 67 | } -------------------------------------------------------------------------------- /Workshop 4 - ค้นหาเนื้อเพลง/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | ค้นหาเพลงไทย - สากล 7 | 8 | 9 | 10 |
11 |

ค้นหาเพลงไทย - สากล

12 |
13 | 14 | 15 |
16 |
17 |
18 |
19 | 20 | 21 | -------------------------------------------------------------------------------- /Workshop 4 - ค้นหาเนื้อเพลง/script.js: -------------------------------------------------------------------------------- 1 | const form=document.getElementById('form'); 2 | const search= document.getElementById('search'); 3 | const result=document.getElementById('result'); 4 | const more=document.getElementById('more'); 5 | 6 | 7 | const apiURL="https://api.lyrics.ovh/"; 8 | 9 | form.addEventListener('submit',e=>{ 10 | e.preventDefault(); 11 | const songtxt=search.value.trim(); 12 | 13 | if(!songtxt){ 14 | alert("ป้อนข้อมูลไม่ถูกต้อง"); 15 | }else{ 16 | searchLyrics(songtxt); 17 | } 18 | }); 19 | 20 | async function searchLyrics(song){ 21 | const res = await fetch(`${apiURL}/suggest/${song}`); 22 | const allSongs = await res.json(); 23 | showData(allSongs); 24 | } 25 | 26 | function showData(songs){ 27 | result.innerHTML=` 28 |
    29 | ${songs.data.map(song=> 30 | `
  • 31 | 32 | ${song.artist.name} - ${song.title} 33 | 34 | 38 |
  • ` 39 | ).join("")} 40 |
41 | `; 42 | if(songs.next || songs.prev){ 43 | more.innerHTML=` 44 | ${songs.prev ? `` : ''} 45 | ${songs.next ? `` : ''} 46 | `; 47 | }else{ 48 | more.innerHTML=""; 49 | } 50 | } 51 | 52 | async function getMoreSongs(songsUrl){ 53 | const res = await fetch(`https://cors-anywhere.herokuapp.com/${songsUrl}`); 54 | const allSongs = await res.json(); 55 | showData(allSongs); 56 | } 57 | 58 | result.addEventListener('click',e=>{ 59 | const clickEl=e.target; 60 | 61 | if(clickEl.tagName=="BUTTON"){ 62 | const artist = clickEl.getAttribute('data-artist'); 63 | const songName = clickEl.getAttribute('data-song'); 64 | 65 | getLyrics(artist,songName); 66 | } 67 | }); 68 | 69 | 70 | async function getLyrics(artist,songName){ 71 | const res = await fetch(`${apiURL}/v1/${artist}/${songName}`); 72 | const data = await res.json(); 73 | const lyrics = data.lyrics.replace(/(\r\n|\r|\n)/g,"
"); 74 | console.log(data); 75 | if(lyrics){ 76 | result.innerHTML = `

77 | ${artist} - ${songName} 78 |

79 | ${lyrics} 80 | `; 81 | }else{ 82 | result.innerHTML = `

83 | ${artist} - ${songName} 84 |

85 | ไม่มีข้อมูลเนื้อเพลงนี้ 86 | `; 87 | } 88 | more.innerHTML=''; 89 | } -------------------------------------------------------------------------------- /Workshop 4 - ค้นหาเนื้อเพลง/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background-color: #fff; 6 | margin:0; 7 | } 8 | header{ 9 | background-image: url('https://cdn.pixabay.com/photo/2015/05/07/11/02/guitar-756326_960_720.jpg'); 10 | background-position: center center; 11 | background-repeat: no-repeat; 12 | background-size: cover; 13 | color:#fff; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | padding: 100px; 19 | position: relative; 20 | } 21 | button{ 22 | cursor: pointer; 23 | } 24 | button:active{ 25 | transform: scale(0.95); 26 | } 27 | input:focus,button:focus{ 28 | outline: none; 29 | } 30 | form{ 31 | position: relative; 32 | width: 500px; 33 | max-width: 100%; 34 | } 35 | form input{ 36 | border:0; 37 | border-radius: 50px; 38 | font-size: 16px; 39 | padding: 15px 30px; 40 | width: 100%; 41 | } 42 | form button{ 43 | background-color: orange; 44 | border:0; 45 | border-radius: 50px; 46 | color:#fff; 47 | font-size: 16px; 48 | padding: 13px 30px; 49 | position: absolute; 50 | top:1px; 51 | right: 1px; 52 | } 53 | header::after{ 54 | content:""; 55 | background-color: rgba(0, 0, 0, 0.4); 56 | position: absolute; 57 | width: 100%; 58 | height: 100%; 59 | top:0; 60 | left:0; 61 | } 62 | header *{ 63 | z-index: 1; 64 | } 65 | header h1{ 66 | margin: 0 0 30px; 67 | } 68 | 69 | ul.songs{ 70 | list-style-type: none; 71 | padding:0; 72 | } 73 | .btn{ 74 | background-color: orange; 75 | border-radius: 10px; 76 | padding: 4px 10px; 77 | border:0; 78 | } 79 | .btn:hover{ 80 | transform: scale(0.98); 81 | } 82 | ul.songs li{ 83 | display: flex; 84 | align-items: center; 85 | justify-content: space-between; 86 | margin:10px 0; 87 | } 88 | .container{ 89 | margin: 30px auto; 90 | max-width: 100%; 91 | width: 500px; 92 | } 93 | 94 | .more{ 95 | display: flex; 96 | justify-content: center; 97 | } 98 | .more .btn{ 99 | margin:4px; 100 | } -------------------------------------------------------------------------------- /Workshop 5 - เกมพิมพ์เร็ว/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Speed Typing 7 | 8 | 9 | 10 | 11 | 14 |
15 |
16 | 17 | 22 |
23 |
24 |
25 |

เกมพิมพ์เร็ว | Speed Typing

26 |

27 | 28 |

เวลา วินาที

29 |

0 คะแนน

30 |
31 |
32 | 33 | 34 | -------------------------------------------------------------------------------- /Workshop 5 - เกมพิมพ์เร็ว/script.js: -------------------------------------------------------------------------------- 1 | const wordEl=document.getElementById('word'); 2 | const textEl=document.getElementById('text'); 3 | const scoreEl=document.getElementById('score'); 4 | const timeEl=document.getElementById('time'); 5 | 6 | const btnLevelEl=document.getElementById('level-btn'); 7 | const settingsEl=document.getElementById('settings'); 8 | const levelFormEl=document.getElementById('level-form'); 9 | const levelEl=document.getElementById('level'); 10 | const gameoverEl=document.getElementById('gameover-container'); 11 | 12 | const words =["หมู","แมว","ไก่","จระเข้"]; 13 | 14 | let randomText; 15 | let score=0; 16 | let time=10;// easy => 15 , medium => 10 , hard=> 5 17 | const saveMode=localStorage.getItem('mode') !== null ? localStorage.getItem('mode') : 'medium'; 18 | 19 | let level='medium'; 20 | 21 | const timeInterval=setInterval(updateTime,1000); 22 | 23 | function getRandomWord(){ 24 | return words[Math.floor(Math.random()*words.length)] 25 | } 26 | 27 | function displayWordToUI(){ 28 | randomText=getRandomWord(); 29 | wordEl.innerHTML = randomText; 30 | timeEl.innerHTML=time; 31 | } 32 | textEl.addEventListener('input',(e)=>{ 33 | const inputText=e.target.value; 34 | 35 | if(inputText === randomText){ 36 | if(saveMode == 'easy'){ 37 | time+=5; 38 | }else if(saveMode == 'medium'){ 39 | time+=3; 40 | }else{ 41 | time+=2; 42 | } 43 | displayWordToUI(); 44 | updateScore(); 45 | e.target.value=''; 46 | } 47 | }); 48 | 49 | function updateScore(){ 50 | score+=10; 51 | scoreEl.innerHTML=score; 52 | } 53 | 54 | function updateTime(){ 55 | time--; 56 | timeEl.innerHTML=time; 57 | if(time === 0){ 58 | clearInterval(timeInterval); 59 | gameOver(); 60 | } 61 | } 62 | function gameOver(){ 63 | gameoverEl.innerHTML=` 64 |

จบเกมแล้วนะครับ

65 |

คะแนนของคุณ = ${score} แต้ม

66 | 67 | `; 68 | gameoverEl.style.display='flex'; 69 | } 70 | btnLevelEl.addEventListener('click',()=>{ 71 | settingsEl.classList.toggle('hide'); 72 | }); 73 | 74 | levelEl.addEventListener('change',(e)=>{ 75 | level=e.target.value; 76 | localStorage.setItem("mode",level); 77 | }); 78 | 79 | function startGame(){ 80 | levelEl.value=saveMode; 81 | if(saveMode == 'easy'){ 82 | time=15; 83 | }else if(saveMode == 'medium'){ 84 | time=10; 85 | }else{ 86 | time=5; 87 | } 88 | displayWordToUI(); 89 | } 90 | startGame(); 91 | textEl.focus(); -------------------------------------------------------------------------------- /Workshop 5 - เกมพิมพ์เร็ว/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Kanit&family=Pridi&display=swap'); 2 | *{ 3 | box-sizing: border-box; 4 | font-family: 'Kanit', sans-serif; 5 | } 6 | body{ 7 | background-color: #2c3e50; 8 | display: flex; 9 | align-items: center; 10 | justify-content: center; 11 | min-height: 100vh; 12 | margin:0; 13 | } 14 | .level-btn{ 15 | cursor: pointer; 16 | font-size: 14px; 17 | border-radius: 4px; 18 | padding: 5px 15px; 19 | position: absolute; 20 | bottom: 30px; 21 | left: 30px; 22 | } 23 | .settings{ 24 | position: absolute; 25 | top:0; 26 | left: 0; 27 | width: 100%; 28 | background-color: rgba(0, 0, 0, 0.3); 29 | height: 70px; 30 | display: flex; 31 | align-items: center; 32 | justify-content: center; 33 | transform: translateY(0); 34 | transition: transition 0.3s ease-in-out; 35 | } 36 | .settings.hide{ 37 | transform: translateY(-100%); 38 | } 39 | select{ 40 | width: 200px; 41 | padding: 5px; 42 | appearance: none; 43 | border-radius: 5px; 44 | } 45 | label{ 46 | color:white; 47 | } 48 | .container{ 49 | background-color: #34495e; 50 | padding: 20px; 51 | border-radius: 4px; 52 | box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3); 53 | color:#fff; 54 | position: relative; 55 | text-align: center; 56 | width: 500px; 57 | } 58 | h2{ 59 | background-color: rgba(0, 0, 0, 0.3); 60 | padding: 8px; 61 | margin: 0 0 40px; 62 | } 63 | .word{ 64 | margin:0; 65 | color:yellow; 66 | } 67 | input{ 68 | border:0; 69 | border-radius: 2px; 70 | font-size: 18px; 71 | width: 300px; 72 | padding: 12px 20px; 73 | margin-top: 10px; 74 | } 75 | .time-container{ 76 | position: absolute; 77 | top:60px; 78 | left: 25px; 79 | color:greenyellow; 80 | } 81 | .score-container{ 82 | position: absolute; 83 | top:60px; 84 | right:25px; 85 | } 86 | .gameover-container{ 87 | background: inherit; 88 | position: absolute; 89 | top:0; 90 | left: 0; 91 | width: 100%; 92 | height: 100%; 93 | z-index: 1; 94 | align-items: center; 95 | justify-content: center; 96 | flex-direction: column; 97 | display: none; 98 | } -------------------------------------------------------------------------------- /Workshop 6 - Text Reveal/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Text-Reveal Effect 7 | 8 | 9 | 10 |
11 |
12 | 13 |
14 |

ธรรมชาติ

15 |

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Velit voluptate ipsum, magni mollitia alias ducimus facilis voluptatem ratione, modi ullam vitae, soluta ea nam quibusdam expedita inventore nisi? Quidem perferendis illo cumque autem expedita eveniet nulla magnam recusandae similique dolore sequi eligendi magni voluptatum in libero, blanditiis repellat est numquam eaque! Eum quasi sint explicabo. Aliquid velit, fugit quaerat, nam omnis commodi corporis et autem blanditiis maxime nihil asperiores optio fugiat necessitatibus! Corrupti earum repellendus, sequi quo fuga culpa? Incidunt sit sint esse cum tempora cumque rem, asperiores magni deleniti doloribus ex et ipsam beatae similique fuga repudiandae nesciunt. Commodi.Lorem, ipsum dolor sit amet consectetur adipisicing elit. Et hic voluptas, quis eius perspiciatis aspernatur atque ratione aut reiciendis, quae culpa, animi porro veritatis perferendis unde placeat magnam nulla dolorem itaque aperiam consequatur repellendus laborum. Iste placeat distinctio id ad accusantium ex eaque nam, alias saepe nihil sint adipisci maiores!

16 |
17 |
18 | 19 |
20 | 21 |
22 |

ภูเขา

23 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora delectus eius eveniet dolore accusamus deleniti, illo maiores iusto quasi ducimus facilis. Corrupti molestias culpa inventore, odio vero amet eum vel beatae quis dolor odit ex harum molestiae tenetur, placeat perspiciatis esse. Quibusdam, quo nam dolorem sunt vitae ducimus atque in.

24 |
25 |
26 | 27 |
28 | 29 |
30 |

กวาง

31 |

Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto iste, quisquam suscipit, similique voluptate odit libero exercitationem blanditiis rerum veritatis quia vitae. Accusantium eaque dignissimos delectus natus! Numquam, porro cumque quas modi assumenda ea similique sunt odit deserunt. Nemo, esse. Rem dolores obcaecati expedita dolorum nam, atque culpa excepturi ratione inventore aliquid tempore eos mollitia debitis, dignissimos officiis quaerat ut.

32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Workshop 6 - Text Reveal/script.js: -------------------------------------------------------------------------------- 1 | const contents=document.querySelectorAll('.content'); 2 | 3 | document.addEventListener('scroll',showText); 4 | 5 | function showText(){ 6 | 7 | contents.forEach((section)=>{ 8 | const imgEl=section.querySelector('img'); 9 | const textEl=section.querySelector('.text'); 10 | 11 | const scrollPos=window.pageYOffset; 12 | // 500 + 100 / 50 13 | // 502 => แสดงข้อความ 14 | const textPos = imgEl.offsetTop + imgEl.offsetHeight / 50 ; 15 | if(scrollPos > textPos){ 16 | // แสดงเนื้อหาออกมา 17 | textEl.classList.add('show-reveal'); 18 | }else{ 19 | // ปิดการแสดงเนื้อหา 20 | textEl.classList.remove('show-reveal'); 21 | } 22 | }); 23 | } -------------------------------------------------------------------------------- /Workshop 6 - Text Reveal/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | margin:0; 6 | display: flex; 7 | justify-content: center; 8 | align-items: center; 9 | } 10 | .container{ 11 | width: 700px; 12 | max-width: 100%; 13 | margin:0 auto; 14 | padding: 10px; 15 | } 16 | img{ 17 | width: 700px; 18 | max-width: 100%; 19 | } 20 | .text{ 21 | opacity: 0; 22 | transform: translateY(15px); 23 | transition: 0.5s all ease; 24 | } 25 | .text.show-reveal{ 26 | opacity: 1; 27 | transform: translateY(0px); 28 | } 29 | -------------------------------------------------------------------------------- /Workshop 7 - เครื่องคิดเลข/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | เครื่องคิดเลข 7 | 8 | 9 | 10 |
11 |
12 |

0

13 |
14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 |
33 |
34 | 35 | 36 | -------------------------------------------------------------------------------- /Workshop 7 - เครื่องคิดเลข/script.js: -------------------------------------------------------------------------------- 1 | const calculatorDisplay = document.querySelector('h1'); 2 | const inputBtn = document.querySelectorAll('button'); // array 3 | const clearBtn=document.getElementById('clear-btn'); 4 | 5 | 6 | const calculate={ 7 | "/":(firstNumber,secondNumber)=> secondNumber!=0 ? firstNumber/secondNumber : "error", 8 | "*":(firstNumber,secondNumber) => firstNumber * secondNumber, 9 | "+":(firstNumber,secondNumber) => firstNumber + secondNumber, 10 | "-":(firstNumber,secondNumber) => firstNumber - secondNumber, 11 | "=":(firstNumber,secondNumber) => secondNumber 12 | } 13 | 14 | let firstValue = 0; // ตัวเลขที่ 1 15 | let operatorValue = ''; // เก็บตัวดำเนินการ 16 | let waitForNext = false; // เก็บสถานะของตัวเลขและตัวดำเนินการ 17 | 18 | function setNumberValue(number){ 19 | if(waitForNext){ 20 | calculatorDisplay.textContent=number; 21 | waitForNext=false; 22 | }else{ 23 | const displayValue = calculatorDisplay.textContent; 24 | calculatorDisplay.textContent = displayValue === '0' ? number : displayValue+number; 25 | } 26 | } 27 | 28 | function callOperator(operator){ 29 | const currentValue=Number(calculatorDisplay.textContent); 30 | if(operatorValue && waitForNext){ 31 | operatorValue=operator; 32 | return; 33 | } 34 | if(!firstValue){ 35 | firstValue=currentValue; // ค่าเริ่มต้น 36 | }else{ 37 | const result = calculate[operatorValue](firstValue,currentValue); 38 | calculatorDisplay.textContent=result; 39 | firstValue=result; 40 | if(firstValue === "error"){ 41 | resetAll(); 42 | } 43 | } 44 | operatorValue=operator; 45 | waitForNext=true; 46 | 47 | } 48 | 49 | function addDecimal(){ 50 | if(waitForNext) return; 51 | if(!calculatorDisplay.textContent.includes(".")){ 52 | calculatorDisplay.textContent = `${calculatorDisplay.textContent}.`; 53 | } 54 | } 55 | 56 | inputBtn.forEach((input)=>{ 57 | // ปุ่มตัวเลข 0-9 58 | if(input.classList.length === 0){ 59 | input.addEventListener('click',()=>setNumberValue(input.value)); 60 | }else if (input.classList.contains("operator")){ 61 | input.addEventListener('click',()=>callOperator(input.value)); 62 | }else if(input.classList.contains("decimal")){ 63 | input.addEventListener('click',()=>addDecimal()); 64 | } 65 | }); 66 | 67 | function resetAll(){ 68 | firstValue=0; 69 | operatorValue=''; 70 | waitForNext=false; 71 | calculatorDisplay.textContent='0'; 72 | } 73 | clearBtn.addEventListener('click',()=>resetAll()); -------------------------------------------------------------------------------- /Workshop 7 - เครื่องคิดเลข/style.css: -------------------------------------------------------------------------------- 1 | html{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | margin:0; 6 | min-height: 100vh; 7 | display: flex; 8 | justify-content: center; 9 | align-items: center; 10 | background-color: whitesmoke; 11 | } 12 | .calculator{ 13 | background: white; 14 | width: 400px; 15 | border-radius: 12px; 16 | box-shadow: 0 5px 30px -5px rgba(0, 0, 0, 0.6); 17 | } 18 | .calculator-display{ 19 | background-color: black; 20 | color:white; 21 | display: flex; 22 | align-items: center; 23 | justify-content: flex-end; 24 | border-radius: 10px 10px 0 0; 25 | } 26 | .calculator-display h1{ 27 | margin:0; 28 | font-size: 45px; 29 | padding: 25px; 30 | font-weight: 100; 31 | overflow-x: auto; 32 | } 33 | .calculator-button{ 34 | display: grid; 35 | grid-template-columns: repeat(4,1fr); 36 | grid-gap: 10px; 37 | padding: 10px; 38 | } 39 | .equal{ 40 | grid-column: -2; 41 | grid-row: 2/span 4; 42 | } 43 | button{ 44 | min-height: 50px; 45 | font-size: 20px; 46 | font-weight: 100; 47 | border:none; 48 | border-radius: 5px; 49 | cursor: pointer; 50 | outline: none; 51 | background-color: rgb(199, 199, 199); 52 | } 53 | button:hover{ 54 | filter: brightness(110%); 55 | } 56 | button:active{ 57 | transform: translateY(1px); 58 | } 59 | .operator , .equal{ 60 | background: orange; 61 | color:white; 62 | font-size:30px; 63 | } 64 | 65 | @media screen and (max-width:600px){ 66 | .calculator{ 67 | width: 95%; 68 | } 69 | } -------------------------------------------------------------------------------- /Workshop 8 - Music API/cover/Contra.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 8 - Music API/cover/Contra.jpg -------------------------------------------------------------------------------- /Workshop 8 - Music API/cover/HavestMoon.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 8 - Music API/cover/HavestMoon.jpg -------------------------------------------------------------------------------- /Workshop 8 - Music API/cover/Mario.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 8 - Music API/cover/Mario.jpg -------------------------------------------------------------------------------- /Workshop 8 - Music API/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Custom Music API 7 | 8 | 9 | 10 | 11 |

โปรแกรมเล่นเพลง (Music API)

12 |
13 |
14 |

เพลงมาริโอ้

15 |
16 |
17 |
18 |
19 | 20 |
21 | 22 |
23 | 34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /Workshop 8 - Music API/music/Contra.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 8 - Music API/music/Contra.mp3 -------------------------------------------------------------------------------- /Workshop 8 - Music API/music/HavestMoon.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 8 - Music API/music/HavestMoon.mp3 -------------------------------------------------------------------------------- /Workshop 8 - Music API/music/Mario.mp3: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kongruksiamza/javascript-workshop/0c252d0089bf0c82d3adf1b60e7e2704cbcf89e8/Workshop 8 - Music API/music/Mario.mp3 -------------------------------------------------------------------------------- /Workshop 8 - Music API/script.js: -------------------------------------------------------------------------------- 1 | const music_container = document.getElementById('music-container'); 2 | const playBtn=document.getElementById('play'); 3 | const prevBtn=document.getElementById('prev'); 4 | const nextBtn=document.getElementById('next'); 5 | const audio=document.getElementById('audio'); 6 | const progress=document.getElementById('progress'); 7 | const progress_container=document.getElementById('progress-container'); 8 | const title=document.getElementById('title'); 9 | const cover=document.getElementById('cover'); 10 | 11 | 12 | const songs=["Contra","HavestMoon","Mario"]; 13 | let index=2; 14 | 15 | function loadSongs(song){ 16 | title.innerText=`เพลง ${song} .mp3`; 17 | cover.src=`cover/${song}.jpg`; 18 | audio.src=`music/${song}.mp3`; 19 | } 20 | 21 | loadSongs(songs[index]) 22 | 23 | playBtn.addEventListener('click',()=>{ 24 | const isPlay=music_container.classList.contains('play');// เช็คว่าเล่นเพลงหรือไม่ 25 | 26 | if(isPlay){ 27 | pauseSong(); // หยุดเล่น 28 | }else{ 29 | playSong(); // เล่นเพลง 30 | } 31 | }); 32 | prevBtn.addEventListener('click',()=>{ 33 | index--; 34 | if(index<0){ 35 | index=songs.length-1; 36 | } 37 | loadSongs(songs[index]); 38 | playSong(); 39 | }); 40 | nextBtn.addEventListener('click',nextSong); 41 | 42 | function nextSong(){ 43 | index++; 44 | if(index>songs.length-1){ 45 | index=0; 46 | } 47 | loadSongs(songs[index]); 48 | playSong(); 49 | } 50 | 51 | function playSong(){ 52 | music_container.classList.add('play'); 53 | playBtn.querySelector('i.fas').classList.remove('fa-play'); 54 | playBtn.querySelector('i.fas').classList.add('fa-pause'); 55 | audio.play(); 56 | } 57 | 58 | function pauseSong(){ 59 | music_container.classList.remove('play'); 60 | playBtn.querySelector('i.fas').classList.remove('fa-pause'); 61 | playBtn.querySelector('i.fas').classList.add('fa-play'); 62 | audio.pause(); 63 | } 64 | 65 | audio.addEventListener('timeupdate',updateProgress); 66 | 67 | function updateProgress(e){ 68 | const {duration,currentTime} = e.srcElement; 69 | const progressPercent=(currentTime/duration)*100; 70 | progress.style.width=`${progressPercent}%`; 71 | } 72 | 73 | progress_container.addEventListener('click',setProcess); 74 | 75 | function setProcess(e){ 76 | const width=this.clientWidth; 77 | const clickX=e.offsetX; 78 | const duration=audio.duration; 79 | audio.currentTime=(clickX/width)*duration; 80 | } 81 | audio.addEventListener('ended',nextSong); -------------------------------------------------------------------------------- /Workshop 8 - Music API/style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | box-sizing: border-box; 3 | } 4 | body{ 5 | background:linear-gradient(0deg,#185aad,#43cea2); 6 | height: 100vh; 7 | display: flex; 8 | flex-direction: column; 9 | align-items: center; 10 | justify-items: center; 11 | margin:0; 12 | } 13 | .music-container{ 14 | background-color: #fff; 15 | border-radius: 15px; 16 | box-shadow: 0 20px 20px 0 rgba(0, 0, 0, 0.6); 17 | display: flex; 18 | padding: 20px 30px; 19 | position: relative; 20 | margin:100px 0; 21 | z-index:10; 22 | } 23 | .img-container{ 24 | position: relative; 25 | width: 100px; 26 | } 27 | .img-container img{ 28 | width: inherit; 29 | height: 100px; 30 | border-radius: 50%; 31 | object-fit: cover; 32 | position: absolute; 33 | bottom: 0; 34 | left: 0; 35 | animation :rotate 5s linear infinite; 36 | animation-play-state: paused; 37 | } 38 | 39 | @keyframes rotate{ 40 | from{ 41 | transform: rotate(0deg); 42 | } 43 | to{ 44 | transform: rotate(360deg); 45 | } 46 | } 47 | 48 | .music-container.play .img-container img{ 49 | animation-play-state: running; 50 | } 51 | 52 | .navigation{ 53 | display: flex; 54 | align-items: center; 55 | justify-content: center; 56 | z-index:1; 57 | } 58 | 59 | .action-btn{ 60 | background: #fff; 61 | border:0; 62 | color:#dfdbdf; 63 | font-size: 20px; 64 | padding: 10px; 65 | margin:0 20px; 66 | } 67 | .action-btn:focus{ 68 | outline: 0; 69 | } 70 | .action-btn:active{ 71 | transform: scale(0.98); 72 | } 73 | .music-info{ 74 | background-color: rgba(255, 255, 255, 0.5); 75 | border-radius: 15px 15px 0 0; 76 | position: absolute; 77 | top:0; 78 | width: calc(100%-40px); 79 | left:20px; 80 | opacity: 0; 81 | transform: translateY(0%); 82 | padding: 10px 10px 10px 150px; 83 | transition: transform 0.3s ease-in , opacity 0.3s ease-in; 84 | } 85 | .music-container.play .music-info{ 86 | transform: translateY(-100%); 87 | opacity: 1; 88 | } 89 | .music-info h4{ 90 | margin:0; 91 | } 92 | .progress-container{ 93 | background-color: #fff; 94 | width: 100%; 95 | height: 4px; 96 | border-radius: 5px; 97 | cursor: pointer; 98 | margin:10px 0; 99 | } 100 | .progress{ 101 | background-color: red; 102 | width: 0%; 103 | height: 100%; 104 | border-radius: 5px; 105 | transition: width 0.1s linear; 106 | } -------------------------------------------------------------------------------- /Workshop 9 - โปรแกรมตารางนัดหมาย/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | โปรแกรมตารางนัดหมาย 7 | 8 | 9 | 10 | 11 |
12 |
13 |

ตารางนัดหมาย

14 |
15 | 16 | 17 | 18 | 19 | 20 |
21 |
22 | 32 | 37 |
38 | 39 | 40 | -------------------------------------------------------------------------------- /Workshop 9 - โปรแกรมตารางนัดหมาย/script.js: -------------------------------------------------------------------------------- 1 | const countDownForm=document.getElementById('countDownForm'); 2 | const inputContainer=document.getElementById('input-container'); 3 | const dateEl=document.getElementById('date-picker'); 4 | const countDownEl=document.getElementById('countdown'); 5 | 6 | const countdownTitleEl=document.getElementById('countdown-title'); 7 | const countdownButtonEl=document.getElementById('countdown-button'); 8 | const timeEl=document.querySelectorAll('span'); 9 | 10 | const completeEl=document.getElementById('complete'); 11 | const completeInfoEl=document.getElementById('complete-info'); 12 | const completeButtonEl=document.getElementById('complete-button'); 13 | 14 | 15 | // ตัวแปรควบคุมการทำงาน 16 | 17 | let countDownTitle=''; 18 | let countDownDate=''; 19 | 20 | let countDownValue=Date;// เก็บวันที่เลือกจากฟอร์ม 21 | let countDownActive;//ตัวนับเวลา 22 | let saveCountDown; // เก็บข้อมูลหัวข้อและวันแจ้งเตือน (object) 23 | 24 | // ตัวแปรแปลงหน่วยเวลา 25 | const second= 1000; 26 | const minute=second*60; 27 | const hour=minute*60; 28 | const day=hour*24; 29 | 30 | 31 | countDownForm.addEventListener('submit',updateCountDown); 32 | 33 | function updateCountDown(e){ 34 | e.preventDefault(); 35 | countDownTitle=e.srcElement[0].value; 36 | countDownDate=e.srcElement[1].value; 37 | 38 | if(countDownTitle === ''){ 39 | alert("ป้อนข้อมูลไม่ครบ"); 40 | }else{ 41 | saveCountDown={title:countDownTitle,date:countDownDate}; 42 | localStorage.setItem("countDown",JSON.stringify(saveCountDown)); 43 | countDownValue=new Date(countDownDate).getTime();//เวลาที่ตั้งไว้ 44 | setUpTime(); 45 | } 46 | } 47 | 48 | function setUpTime(){ 49 | countDownActive=setInterval(()=>{ 50 | // ตั้งเอาไว้ - ปัจจุบัน 51 | const now = new Date().getTime(); 52 | const distance = countDownValue - now; 53 | const days = Math.floor(distance/day); 54 | const hours=Math.floor((distance%day)/hour); 55 | const minutes=Math.floor((distance%hour)/minute); 56 | const seconds=Math.floor((distance%minute)/second); 57 | inputContainer.hidden=true; 58 | if(distance>0){ 59 | countDownEl.hidden=true; 60 | completeEl.hidden=false; 61 | completeInfoEl.textContent = `${countDownTitle} วันที่ ${countDownDate}`; 62 | clearInterval(countDownActive); 63 | }else{ 64 | countdownTitleEl.textContent = `${countDownTitle}`; 65 | // นับถอยหลังเรื่อยๆ 66 | timeEl[0].textContent=`${days}`; 67 | timeEl[1].textContent=`${hours}`; 68 | timeEl[2].textContent=`${minutes}`; 69 | timeEl[3].textContent=`${seconds}`; 70 | countDownEl.hidden=false; 71 | completeEl.hidden=true; 72 | } 73 | 74 | },second); 75 | } 76 | 77 | 78 | function callDatainStore(){ 79 | if(localStorage.getItem("countDown")){ 80 | inputContainer.hidden=true; 81 | saveCountDown=JSON.parse(localStorage.getItem("countDown")); 82 | countDownTitle=saveCountDown.title; 83 | countDownDate=saveCountDown.date; 84 | countDownValue=new Date(countDownDate).getTime(); 85 | setUpTime(); 86 | } 87 | } 88 | 89 | function reset(){ 90 | localStorage.removeItem("countDown"); 91 | countDownEl.hidden=true; 92 | completeEl.hidden=true; 93 | inputContainer.hidden=false; 94 | clearInterval(countDownActive); 95 | countDownTitle=''; 96 | countDownDate=''; 97 | } 98 | 99 | callDatainStore(); 100 | 101 | countdownButtonEl.addEventListener('click',reset); 102 | completeButtonEl.addEventListener('click',reset); --------------------------------------------------------------------------------