https://github.com/kongruksiamza/javascript-workshop
โค้ดประกอบเนื้อหา JavaScript Workshop | KongRuksiam
https://github.com/kongruksiamza/javascript-workshop
Last synced: 8 months ago
JSON representation
โค้ดประกอบเนื้อหา JavaScript Workshop | KongRuksiam
- Host: GitHub
- URL: https://github.com/kongruksiamza/javascript-workshop
- Owner: kongruksiamza
- Created: 2021-04-26T06:54:07.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2025-01-01T13:47:16.000Z (9 months ago)
- Last Synced: 2025-01-01T14:29:18.083Z (9 months ago)
- Language: HTML
- Size: 10 MB
- Stars: 21
- Watchers: 4
- Forks: 19
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## 🎓 พื้นฐานที่ต้องเรียนมาก่อน
- [HTML5](https://youtu.be/0hfeNPM7piw)
- [CSS3](https://youtu.be/HcInSUzhaUc)
- [JavaScript](https://youtu.be/AbjY-ajKgSI)
- [JavaScript ES6](https://youtu.be/ReGM0zubxfI)
## โค้ดประกอบการสอน (Source Code)
| ลำดับที่ | หัวข้อ |ตัวอย่างโปรเจกต์ (Live Preview)|
|:----:|:------------------------------------------:|:------------------------:|
| 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)|
| 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)|
| 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)|
| 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) |-|
| 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)|
| 6 | [Text Reveal](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%206%20-%20Text%20Reveal) |[Live Preview](https://codepen.io/kongruksiamstudio/full/OJeXxpE)|
| 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)|
| 8 | [Music API](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%208%20-%20Music%20API) |-|
| 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)|
| 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)|
| 11 | [Form Validation](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2011%20-%20Form%20Validation) |[Live Preview](https://codepen.io/kongruksiamstudio/full/KKjMXqY)|
| 12 | [Unsplash API](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2012%20-%20Unsplash%20API) |[Live Preview](https://codepen.io/kongruksiamstudio/full/LYKZzjW)|
| 13 | [Kanban board](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2013%20-%20Kanban%20board) |[Live Preview](https://codepen.io/kongruksiamstudio/full/PorzJKa)|
| 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)|
| 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) |-|
| 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)|
| 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)|
| 18 | [Menu Slider](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2018%20-%20Menu%20Slider) |[Live Preview](https://codepen.io/kongruksiamstudio/full/RwzRLxQ)|
| 19 | [Speech To Text](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2019%20-%20Speech%20To%20Text) |-|
| 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) |-|
| 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)|
| 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)|
| 23 | [SplitPageContent](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2023%20-%20SplitPageContent) |[Live Preview](https://codepen.io/kongruksiamstudio/full/MWMeEXY)|
| 24 | [Quiz Application](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2024%20-%20Quiz%20Application) |-|
| 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)|
| 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)|
| 27 | [Image Carousel](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2027%20-%20Image%20Carousel) |[Live Preview](https://codepen.io/kongruksiamstudio/full/zYVBEMK)|
| 28 | [Vertical Content](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2028%20-%20Vertical%20Content) |[Live Preview](https://codepen.io/kongruksiamstudio/full/dyBXVQZ)|
| 29 | [Content Loading](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2029%20-%20Content%20Loading) |[Live Preview](https://codepen.io/kongruksiamstudio/full/ExBywGZ)|
| 30 | [Review Content](https://github.com/kongruksiamza/javascript-workshop/tree/main/Workshop%2030%20-%20Review%20Content) |-|
## 📢 ติดตามข่าวสารอื่นๆของเราได้ที่
