Dalam tutorial ini, kami akan mencipta aplikasi web interaktif yang dipanggil CodePlay App menggunakan HTML, CSS, JavaScript, Bootstrap dan jQuery. Aplikasi ini membolehkan pengguna menulis kod dalam HTML, CSS dan JavaScript dan melihat output dalam masa nyata dalam iframe terbenam.
Kami akan menumpukan pada melaksanakan animasi yang lancar, reka bentuk responsif dan keupayaan penyuntingan kod yang lancar.
Untuk mengikuti tutorial ini, anda harus mempunyai pengetahuan asas tentang HTML, CSS, JavaScript, Bootstrap dan jQuery. Pastikan anda mempunyai editor teks dan pelayar web moden dipasang.
Buat Struktur Projek:
Sertakan Perpustakaan Diperlukan:
CodePlay App
Fail CSS (style.css) mentakrifkan gaya untuk aplikasi, termasuk reka letak dan keterlihatan panel.
*, *::before, *::after { margin: 0; padding: 0; } .inlineMenu { display: inline; } .active { background-color: green !important; } .hidden { display: none; } .panel { resize: none; border: none; outline: none; border-top: 1.3px solid grey; transition: opacity 0.5s ease-in-out; } .panel:not(:last-child) { border-right: 1.3px solid grey; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fadeIn { animation: fadeIn 0.5s; }
Fail JavaScript (main.js) mengendalikan tingkah laku dinamik, termasuk mengemas kini panel output dan mengurus keterlihatan panel berdasarkan saiz skrin.
$(document).ready(function () { $(".panel").height($(window).height() - $("header").height() - 10); function updateOutput() { $("iframe").contents().find("html").html(" " + $("#htmlPanel").val() + "