Screenshot

Penting

Untuk seberasa sayang, sebenarnya tidak usah dikonfigurasi lagi kalo menurut saya sudah pas. Namun, jika menurut kalian gak pas atau gimana silahkan saja ganti. Berikut ini panduan untuk mengubah codenya. Pastikan kalian mempunyai :

Text editor (bisa sublime/atom/notepad++/visual studio code).
Niat

Untuk demonya, bisa kesini.
Untuk yang mau donasi, bisa kesini.

Download

Untuk kalian yang tidak mempunyai text editor diatas, berikut ini link downloadnya :

Visual Studio Code : Visual Studio Code
Sublime Text : Sublime Text
Atom : Atom
Notepad++ : Notepad++

Untuk yang memakai hp, bisa menggunakan ini :

DroidEdit : DroidEdit
anWriter : anWriter
SoloLearn : SoloLearn

Kalau kalian sudah punya text editor, silahkan gunakan text editor yang biasa kalian pakai untuk ngoding. Text editor diatas hanya rekomendasi dari saya saja.

Ubah

index.html

Pada file index.html, terdapat code seperti dibawah ini

<div class="wadah">
    <div class="box">
        <button class="btn btn-1 btn-1c" id="tombolPopup">Click
            Me!</button>
        <h3 id="lope" class="tulisan">
            I <img src="asset/img/love.png" /> you.
        </h3>
        <h3 id="potek" class="tulisan">
            <img src="asset/img/broken.png" /> deh aku.
        </h3>
    </div>
</div>

Silahkan kalian ubah dengan kata-kata kalian.

Untuk code ini, akan tampil kalau yang menjawab benar-benar sayang.

<h3 id="lope" class="tulisan">
    I <img src="asset/img/love.png" /> you.
</h3>

Sementara untuk code ini, akan tampil kalau yang menjawab tidak sayang.

<h3 id="potek" class="tulisan">
    <img src="asset/img/broken.png" /> deh aku.
</h3>

Untuk gambarnya, silahkan ganti dengan gambar kalian. Untuk file gambarnya ada di asset > img, Tidak diganti juga gak masalah. Untuk file index.html cukup bagian itu saja yang diubah, sisanya tidak usah karna akan menimbulkan kerusakan pada tampilan kalau mencoba untuk mengeditnya.

main.js

Mengganti kata-kata

Untuk mengubah kata-kata yang muncul saat popup, silahkan ke folder asset > js > main.js nanti akan ketemu sebuah code yang tak perlu dipikirkan cukup cari tulisan-tulisan seperti :

Halo Pacarku
Aku ada pertanyaan nih buat kamu
dll

Atau cukup cari bagian yang ditulis didalam :

title :
text :

Mengganti gambar

Saat doi menjawab tidak sayang, maka akan menampilkan gambar seperti berikut :

Cukup cari tulisan seperti ini :

imageUrl

dan ganti link https://media.giphy.com/media/kzs3OEZTltXVSUQm7G/giphy.gif menjadi link gambar punya kalian.

Mengganti lagu

untuk mengganti lagu, silahkan masukkan lagu yang anda punya kedalam asset > audio. Setelah itu, masih didalam file main.js cari code seperti berikut :

$.playSound('asset/audio/mine.mp3');
$.playSound('asset/audio/sakit.mp3');

Untuk code ini, akan memutar lagu kalau yang menjawab benar-benar sayang.

$.playSound('asset/audio/mine.mp3');

Untuk code ini, akan memutar lagu kalau yang menjawab tidak sayang.

$.playSound('asset/audio/sakit.mp3');

Untuk menggantinya, silahkan ganti sakit.mp3 dan mine.mp3 dengan file lagu kalian yang sudah dimasukkan kedalam asset > audio.

Terima kasih

Terima kasih kepada :

SweetAlert2 : SweetAlert2
Confetti.js : Confetti.js
Hover.css : Hover.css
Jquery PlaySound : Jquery Playsound

mentadp/mainyuk