มาฝึก Front-End Challenge | Product Card ( HTML CSS JS ) [ 13-100 ] 👨‍💻💯

[@PatiphanPhengpao]

Code - github.com/ohmiler/html-css-js-product-card-practical

[@sadty2143]

สุดยอดครับจารร

[@bounyuensengphachan8769]

ชอบมากครับ อาจารย์ที่โรงเรียนยังสอนไม่ดีเท่านี้

[@008นนทกร]

ดูมา13Ep.แล้วครับเข้าใจขึ้นเยอะเลยจารย์โอมสอนดีมากเลยครับ

[@nkachannel3568]

จารย์โอมสอนดีมากครับ เข้าใจสุดๆแล้วครับ❤

[@TGPCluB]

มาแต่เช้าเลยยยย

[@beankhanathip7621]

ชอบบบบมากครับ❤ รบกวนถ้ามีเวลา ฝากทำคลิบสอนโปรเจคนี้หน่อยครับ คือผมไปสอบสัมภาษณ์มาละไม่ผ่าน ใช html css js ครับ
< โปรเจค >
มีbox ที่มี tag table 9 ช่อง มีปุ่ม select & option ด้านล่างของ table ใส่สีใว้3สี หลังจากเลือกสี แล้วนำ mouse ไป click ที่ table ที่ว่าง table จะเปลี่ยนสีตามสีที่เราเลือก ผมคิดวิธีทำไม่ออกจริงๆ #คาใจ😅🎉

[@chinasitmaneebenjarat7319]

ผมลองเล่น ๆ ได้ประมาณนี้ป่าวครับ


Colorful Table

table {
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
td {
width: 50px;
height: 50px;
cursor: pointer;
}
select {
margin-bottom: 10px;
}


















Choose a color:

Red
Green
Blue


document.addEventListener('DOMContentLoaded', function() {
const table = document.getElementById('colorfulTable');
const colorSelect = document.getElementById('colorSelect');
table.addEventListener('click', function(event) {
const targetCell = event.target;
if (targetCell.tagName === 'TD') {
const selectedColor = colorSelect.value;
targetCell.style.backgroundColor = selectedColor;
}
});
});

[@NuengBit43]

จารย์ link mini project อยู่ไหนครับจารย์

[@PatiphanPhengpao]

github.com/ohmiler/html-css-js-product-card-practical

[@NuengBit43]

ต้องงั้นครับจารย์

[@artica2005]

มี Code ตัวอย่างป่าวครับ

[@PatiphanPhengpao]

github.com/ohmiler/html-css-js-product-card-practical