1. แบบฟอร์มบัตรเครดิต
รูปแบบบัตรเครดิตสุดเท่พร้อมการโต้ตอบแบบย่อยที่ราบรื่นและสนุกสนาน รวมถึงการจัดรูปแบบตัวเลข การตรวจสอบ และการตรวจจับประเภทการ์ดอัตโนมัติ มันถูกสร้างขึ้นบน Vue.js และยังตอบสนองได้อย่างเต็มที่อีกด้วย (คุณสามารถดู .)
สิ่งที่คุณจะได้เรียนรู้:
- ดำเนินการและตรวจสอบแบบฟอร์ม
- จัดการเหตุการณ์ (เช่น เมื่อฟิลด์เปลี่ยนแปลง)
- ทำความเข้าใจวิธีการแสดงและวางองค์ประกอบบนเพจ โดยเฉพาะข้อมูลบัตรเครดิตที่ปรากฏด้านบนของแบบฟอร์ม
บทความนี้ได้รับการแปลโดยได้รับการสนับสนุนจาก EDISON Software ซึ่ง และ .
2. ฮิสโตแกรม
ฮิสโตแกรมเป็นแผนภูมิหรือกราฟที่แสดงข้อมูลหมวดหมู่ด้วยแท่งสี่เหลี่ยมที่มีความสูงและความยาวเป็นสัดส่วนกับค่าที่แสดง
สามารถใช้ในแนวตั้งหรือแนวนอน แผนภูมิแท่งแนวตั้งบางครั้งเรียกว่าแผนภูมิเส้น
สิ่งที่คุณจะได้เรียนรู้:
- แสดงข้อมูลในลักษณะที่มีโครงสร้างและเข้าใจได้
- นอกจากนี้: เรียนรู้วิธีใช้องค์ประกอบ
canvasและวิธีการวาดองค์ประกอบด้วย
คุณสามารถค้นหาข้อมูลประชากรโลกได้ โดยจะจัดเรียงตามปี
3. แอนิเมชั่นหัวใจของ Twitter
ย้อนกลับไปในปี 2016 Twitter ได้เปิดตัวแอนิเมชั่นที่น่าทึ่งนี้สำหรับทวีต ในปี 2019 มันยังคงดูเป็นส่วนหนึ่งอยู่ ดังนั้นทำไมไม่สร้างมันขึ้นมาเองล่ะ?
สิ่งที่คุณจะได้เรียนรู้:
- ทำงานกับแอตทริบิวต์ CSS
keyframes - จัดการและทำให้องค์ประกอบ HTML เคลื่อนไหว
- รวม JavaScript, HTML และ CSS
4. ที่เก็บ GitHub พร้อมฟังก์ชันการค้นหา
ไม่มีอะไรพิเศษที่นี่ ที่เก็บ GitHub เป็นเพียงรายการที่น่ายกย่อง
เป้าหมายคือการแสดงที่เก็บและอนุญาตให้ผู้ใช้สามารถกรองได้ ใช้ เพื่อรับพื้นที่เก็บข้อมูลสำหรับผู้ใช้แต่ละคน
หน้าโปรไฟล์ GitHub -
สิ่งที่คุณจะได้เรียนรู้:
- รับข้อมูลจาก API
- แสดงข้อมูลจาก API
- กรองและแสดงข้อมูลที่เกี่ยวข้องสำหรับการค้นหาแต่ละครั้ง
- ทางเลือก: หากคุณต้องการความท้าทาย ให้ใช้ สร้างโดยใช้ GraphQL .
5. แชทสไตล์ Reddit
การแชทเป็นวิธีการสื่อสารที่ได้รับความนิยมเนื่องจากความเรียบง่ายและใช้งานง่าย แต่อะไรคือสิ่งที่กระตุ้นให้เกิดห้องสนทนาสมัยใหม่ เว็บซ็อกเก็ต!
สิ่งที่คุณจะได้เรียนรู้:
- ใช้ WebSockets การสื่อสารแบบเรียลไทม์และการอัพเดตข้อมูล
- ทำงานกับระดับการเข้าถึงของผู้ใช้ (เช่น เจ้าของช่องแชทมีบทบาท
adminและคนอื่นๆ ในห้อง -user) - ประมวลผลและตรวจสอบแบบฟอร์ม - โปรดจำไว้ว่าหน้าต่างแชทสำหรับส่งข้อความคือ
input - สร้างและเข้าร่วมการแชทต่างๆ
- ทำงานกับข้อความส่วนตัว ผู้ใช้สามารถสนทนากับผู้ใช้รายอื่นเป็นการส่วนตัว โดยพื้นฐานแล้ว คุณจะต้องสร้างการเชื่อมต่อ WebSocket ระหว่างผู้ใช้สองคน
6. การนำทางแบบแถบ
สิ่งที่ทำให้การนำทางนี้ไม่ซ้ำใครคือคอนเทนเนอร์แบบป๊อปโอเวอร์จะแปลงให้พอดีกับเนื้อหา การเปลี่ยนแปลงนี้มีความสง่างามเมื่อเปรียบเทียบกับพฤติกรรมดั้งเดิมของการเปิดและปิดป๊อปโอเวอร์ใหม่
สิ่งที่คุณจะได้เรียนรู้:
- รวมภาพเคลื่อนไหว CSS เข้ากับการเปลี่ยนภาพ
- เนื้อหาสลัวและใช้คลาสที่ใช้งานกับองค์ประกอบลอย
ลองทำด้วยตัวเองก่อน แต่ถ้าคุณต้องการความช่วยเหลือ ลองดูสิ่งนี้ .
ที่มา: will.com