Saya membuat halaman web sederhana yang akan menjadi semacam "App Store" yang akan menunjukkan kepada pengguna daftar perangkat lunak yang tersedia untuk diunduh. Saya terbatas dalam apa yang dapat saya gunakan karena ini akan menjadi situs SharePoint, jadi saya membatasinya hanya pada HTML, CSS, dan JavaScript. Karena kami akan mendapatkan perangkat lunak baru yang disetujui secara teratur, situs perlu diperbarui dengan item baru yang berarti menyalin dan menempelkan kode daripada menambahkan informasi perangkat lunak baru.

Apakah ada yang punya saran untuk digunakan kembali? Adakah proyek sebelumnya di mana Anda mengotomatiskan halaman web dengan cara ini? Saya sangat terbuka untuk saran.

P.S Saya bukan seorang pengembang web, tolong mudahkan kode saya.

Saya memiliki tiruan dasar situs tempat saya menggunakan kisi untuk menampilkan "kartu". Setiap kisi berisi beberapa kisi yang memiliki elemen unik.

HTML

    <main class="grid">
        <article>
            <img src="Assets/bananatag.png" alt="Sample Photo">
            <div class="text">
                <h3>Bananatag</h3>
                <p>Bananatag is an email tracking software launched in 2011. 
                    It notifies users whether the emails sent are successfully delivered and opened. 
                    Bananatag is used in email marketing where mass emails are sent to millions of 
                    targeted customers are response awaited.
                </p>
                <button onclick="alerts()">Request Software</button>
                <!-- <button onclick="requestPOST" id="APIPOST"> Request Software</button> -->
            </div>
        </article>
        <article>
                <img src="Assets/avaya.png" alt="Sample Photo">
                <div class="text">
                    <h3>Avaya Equinox</h3>
                    <p>Avaya Equinox for Windows turns your Windows PC into a powerful communications and collaboration 
                        system that can work in conjunction with your Avaya deskphone or enable you 
                        to work without compromise from anywhere. It provides SIP-based Voice-over-IP, IM/presence, web 
                        conferencing and point-to-point and multiparty video and easy to use 
                        contact centric workflows with contextual controls.
                    </p>
                    <button onclick="GET()"> Request Software</button>
                </div>
        </article>

CSS

.stack{
    padding: 20em;
    overflow: auto;
}
.grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
    align-items: stretch;
    object-fit: cover;
    padding: 1em;
}
/*nested*/
.grid > article{
    display: grid;
    background: #eee;
    grid-template-columns: repeat(2, 20% 80%);
    grid-auto-rows: 80%;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 6px 0px rgbs(0,0,0,0.3);
    padding: 1em;

}
.grid > article img{
    max-width: 75%;
    min-width: 70%;
    border: white;
    box-shadow: 2px 2px 6px 0px rgbs(0,0,0,0.3);
    grid-auto-rows: 70px;
}
.text{
    padding: 20px 20px;
}
.text > button{
    background: rgb(93, 84, 84);
    border: 0;
    color: white;
    padding: 10px;
    width: 100%;
}
0
binjamin 23 Oktober 2019, 22:33

1 menjawab

Jawaban Terbaik

Anda dapat membuat pabrik artikel:

  function createObject() {
    var result = document.createElement("article");
    result.innerHTML = "<img><div class=\"text\"><h3></h3><p></p><button>Request Software</button></div>";
    return result;
  }

Kemudian Anda dapat menambahkan konten ke objek prefabrikasi dengan fungsi ini

  function setObject(imgsrc,h3,p,onclick) {
    this.querySelector("img").src = imgsrc;
    this.querySelector("h3").innerHTML = h3;
    this.querySelector("p").innerHTML = p;
    this.querySelector("button").onclick = onclick;
  }

Dan gunakan seperti ini:

<div id="contents"></div>

<script>
  var obj = createObject(); // later you can deep copy it, or just create a new object
  setObject.call(obj, "img.jpg", "Test object", "Description", ()=>alert('test'));
  contents.appendChild(obj);
</script>
2
Jan Turoň 23 Oktober 2019, 19:57