Skip to content

Commit 322368c

Browse files
dionarya23dionarya23
committed
first commit
0 parents  commit 322368c

File tree

5 files changed

+275
-0
lines changed

5 files changed

+275
-0
lines changed

‎README.md

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
# QuranSaya.JS
2+
QuranSaya.Js merupakan sebuah plugin jQuery, yang dapat menampilkan terjemahan ayat-ayat suci Al-Quran pada sebuah website
3+
4+
Untuk demo dan contoh pemakaian anda bisa dilihat di https://dionarya6661.github.io/quransayajs
5+
6+
### Instalasi
7+
Pertama anda perlu file jquery dan quransaya.js dan kemudian letakan kedua file tersebut seperti ini:
8+
```html
9+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
10+
<script src="quransaya.js"></script>
11+
```
12+
13+
### Cara Penggunaan
14+
untuk pegunaan sangat mudah sekali perhatikan kode berikut:
15+
16+
```html
17+
<div id="selector">
18+
</div>
19+
20+
<script>
21+
//kode berikut ini nanti nya akan menampilkan ayat dari Surat Al-Baqarah ayat 255
22+
$('#selector').quransaya({
23+
surat: 2, //dapat diisi dengan angka 1 sampai 114
24+
ayat: 255
25+
});
26+
</script>
27+
```
28+
29+
Catatan: untuk parameter surat anda dapat mengisi nya dengan no 1 sampai 114 sesuai dengan jumlah surat yang ada pada Al-Qur'an.
30+
31+
### Mempercantik Tampilan
32+
Untuk mempercantik tampilan anda bisa menambahkan file quransaya.css pada web anda dan anda juga bisa mengatur warna background pada tampilan text seperti ini:
33+
```html
34+
<link rel="stylesheet" href="quransaya.css">
35+
36+
<div id="selector"></div>
37+
38+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
39+
<script src="quransaya.js"></script>
40+
<script>
41+
$('#selector').quransaya({
42+
surat: 2, //dapat diisi dengan angka 1 sampai 114
43+
ayat: 255,
44+
warna: 'green' //untuk warna anda dapat memilih, ada 19 warna yang sudah disediakan
45+
});
46+
</script>
47+
```
48+
49+
### Daftar Warna
50+
51+
* amber
52+
* aqua
53+
* light-blue
54+
* brown
55+
* cyan
56+
* blue-gray
57+
* green
58+
* light-green
59+
* indigo
60+
* khaki
61+
* lime
62+
* orange
63+
* deep-orange
64+
* pink
65+
* purple
66+
* red
67+
* sand
68+
* teal
69+
* yellow
70+
71+
### PERHATIAN
72+
Semua data berasal dari website https://quransaya.id, Insyaallah semua data akurat namun jika anda mememukan kesalahan data anda dapat menghubungi di email quransaya.id@gmail.com

‎index.html

+123
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>QuranSaya.JS</title>
5+
<meta name="description" content="QuranSaya.JS Plugin Jquery Sederhana Yang Bisa memunculkan ayat-ayat Al Quran">
6+
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<link rel="stylesheet" href="quransaya.css">
9+
<link rel="icon"
10+
type="image/png"
11+
href="https://d30y9cdsu7xlg0.cloudfront.net/png/1546-200.png">
12+
</head>
13+
<body>
14+
15+
<div class="w3-container w3-teal">
16+
<h1>QuranSaya.JS</h1>
17+
</div>
18+
19+
<br>
20+
<div class="w3-container">
21+
<div class="w3-row">
22+
<div class="w3-col m12 w3-center">
23+
<p>QuranSaya.Js merupakan sebuah
24+
plugin jQuery, yang dapat menampilkan
25+
terjemahan ayat-ayat suci Al-Quran pada sebuah website.
26+
Disini akan dijelaskan bagaimana cara menggunakan QuranSaya.JS</p>
27+
28+
<a href="https://github.com/dionarya6661/quransayajs" class="w3-btn w3-black w3-border w3-border-teal w3-round-xlarge">
29+
View On Github</a>
30+
</div>
31+
<div>
32+
</div>
33+
<br>
34+
<br>
35+
<br>
36+
37+
<hr>
38+
<h4><b>Contoh Penggunaan : </b></h4>
39+
<div class="w3-row">
40+
41+
<div class="w3-col m6">
42+
<div class="w3-panel w3-card-2 w3-light-grey">
43+
<h4>Kode seperti Ini:</h4>
44+
<div class="w3-code jsHigh notranslate">
45+
$('#selector').quransaya({surat: 16, ayat: 23});<br>
46+
//note surat bisa diisi dengan no 1 sampai 114
47+
</div>
48+
</div>
49+
</div>
50+
51+
<div class="w3-col m6 w3-center">
52+
<p id="surat"></p>
53+
</div>
54+
55+
</div>
56+
<br><br><hr>
57+
<div class="w3-row">
58+
<div class="w3-col m6">
59+
<div class="w3-panel w3-card-2 w3-light-grey">
60+
<h4>Contoh Penggunaan Memakai Warna:</h4>
61+
62+
<div class="w3-code htmlHigh">
63+
//pertama anda harus memakai file quransaya.css terlebi dahulu<br>
64+
&lt;link rel="stylesheet" href="quransaya.css">
65+
</div>
66+
67+
<div class="w3-code jsHigh">
68+
$('#selector').quransaya({surat: 16, ayat: 23, warna: 'green'});
69+
</div>
70+
</div>
71+
</div>
72+
73+
<div class="w3-col m6 w3-center">
74+
<blockquote class='w3-panel d-leftbar w3-green'>
75+
<p class='w3-large'><i>Tidak diragukan lagi bahwa sesungguhnya
76+
Allah mengetahui apa yang mereka rahasiakan
77+
dan apa yang mereka lahirkan. Sesungguhnya Allah
78+
tidak menyukai orang-orang yang sombong.</i></p>
79+
<p>(QS. An-Nahl:23)</p>
80+
</blockquote>
81+
</div>
82+
</div>
83+
<hr>
84+
85+
<div class="w3-row">
86+
<div class="w3-col m12">
87+
<h1>Daftar Warna: </h1><br>
88+
<div class="w3-quarter">
89+
<div class="w3-container w3-red w3-center w3-padding-16"><p>Red</p></div>
90+
<div class="w3-container w3-green w3-center w3-padding-16"><p>Green</p></div>
91+
<div class="w3-container w3-blue w3-center w3-padding-16"><p>Blue</p></div>
92+
<div class="w3-container w3-black w3-center w3-padding-16"><p>Black</p></div>
93+
</div>
94+
<div class="w3-quarter">
95+
<div class="w3-container w3-pink w3-center w3-padding-16"><p>Pink</p></div>
96+
<div class="w3-container w3-teal w3-center w3-padding-16"><p>Teal</p></div>
97+
<div class="w3-container w3-indigo w3-center w3-padding-16"><p>Indigo</p></div>
98+
<div class="w3-container w3-brown w3-center w3-padding-16"><p>Brown</p></div>
99+
</div>
100+
<div class="w3-quarter w3-hide-small">
101+
<div class="w3-container w3-orange w3-text-whie w3-center w3-padding-16"><p>Orange</p></div>
102+
<div class="w3-container w3-cyan w3-text-white w3-center w3-padding-16"><p>Cyan</p></div>
103+
<div class="w3-container w3-purple w3-center w3-padding-16"><p>Purple</p></div>
104+
<div class="w3-container w3-center w3-padding-16 w3-grey"><p>Gray</p></div>
105+
</div>
106+
<div class="w3-quarter w3-hide-small">
107+
<div class="w3-container w3-yellow w3-center w3-padding-16"><p>Yellow</p></div>
108+
<div class="w3-container w3-lime w3-center w3-padding-16"><p>Lime</p></div>
109+
</div>
110+
</div>
111+
112+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
113+
<script src="quransaya.js"></script>
114+
<script src="https://www.w3schools.com/lib/w3codecolor.js"></script>
115+
<script>
116+
$(document).ready(function(){
117+
$('#surat').quransaya({surat: 16, ayat: 23});
118+
119+
// $('#contoh1').quransaya({surat: 3, ayat: 23, warna:'green'});
120+
});
121+
</script>
122+
</body>
123+
</html>

‎quransaya.css

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
.d-panel:after,.d-panel:before{content:"";display:table;clear:both}
2+
.d-panel{padding:0.01em 16px}.d-panel{margin-top:16px;margin-bottom:16px}
3+
.d-leftbar{border-left:6px solid #ccc!important}
4+
.d-amber,.d-hover-amber:hover{color:#000!important;background-color:#ffc107!important}
5+
.d-aqua,.d-hover-aqua:hover{color:#000!important;background-color:#00ffff!important}
6+
.d-blue,.d-hover-blue:hover{color:#fff!important;background-color:#2196F3!important}
7+
.d-light-blue,.d-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important}
8+
.d-brown,.d-hover-brown:hover{color:#fff!important;background-color:#795548!important}
9+
.d-cyan,.d-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important}
10+
.d-blue-grey,.d-hover-blue-grey:hover,.d-blue-gray,.d-hover-blue-gray:hover{color:#fff!important;background-color:#607d8b!important}
11+
.d-green,.d-hover-green:hover{color:#fff!important;background-color:#4CAF50!important}
12+
.d-light-green,.d-hover-light-green:hover{color:#000!important;background-color:#8bc34a!important}
13+
.d-indigo,.d-hover-indigo:hover{color:#fff!important;background-color:#3f51b5!important}
14+
.d-khaki,.d-hover-khaki:hover{color:#000!important;background-color:#f0e68c!important}
15+
.d-lime,.d-hover-lime:hover{color:#000!important;background-color:#cddc39!important}
16+
.d-orange,.d-hover-orange:hover{color:#000!important;background-color:#ff9800!important}
17+
.d-deep-orange,.d-hover-deep-orange:hover{color:#fff!important;background-color:#ff5722!important}
18+
.d-pink,.d-hover-pink:hover{color:#fff!important;background-color:#e91e63!important}
19+
.d-purple,.d-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important}
20+
.d-deep-purple,.d-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important}
21+
.d-red,.d-hover-red:hover{color:#fff!important;background-color:#f44336!important}
22+
.d-sand,.d-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important}
23+
.d-teal,.d-hover-teal:hover{color:#fff!important;background-color:#009688!important}
24+
.d-yellow,.d-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important}
25+
.d-large{font-size:18px!important}

‎quransaya.js

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
/*
2+
Creator: Dion Arya Pamungkas
3+
email: dionarya.p@gmail.com
4+
web: dionarya6661.github.io
5+
6+
Data Berasal dari quransaya.id jika anda menemukan kesalahan
7+
data bisa hubungi ke quransaya.id@gmail.com
8+
*/
9+
(function ($) {
10+
11+
var url = '';
12+
var listSurah = [
13+
'Al-Fatihah','Al-Baqarah','Ali-Imran',
14+
'An-Nisa', "Al-Ma'idah", "Al-An'am", "Al-A'raf", "Al-Anfal", "Al-Taubah", "Yunus", "Hud",
15+
"Yusuf", "Ar-Ra'd", "Ibrahim", "Al-Hijr", "An-Nahl", "Al-Isra", "Al-Kahfi", "Maryam", "Ta-ha",
16+
"Al-Anbiya", "Al-Hajj", "Al-Muminun", "An-Nur", "Al-Furqan", "Ash-Shu'araa", "An-Naml", "Al-Qashash",
17+
"Al-Kanbut", "Ar-Rum", "Luqman", "As-Sajdah", "Al-Ahzab", "Saba", "Faathir", "Ya-sin", "Ash-Shaffat",
18+
"Sad", "Az-Zumar", "Al-Mu'min", "Ha-mim", "Ash-Shura", "Az-Zukhru", "Ad-Dukhan", "Al-Jathiya", "Al-Ahqaf",
19+
"Muhammad", "Al-fath", "Al-Hujurat", "Qaaf", "Az-Zariyat", "At-Tur", "An-Najm", "Al-Qamar",
20+
"Ar-Rahman", "Al-Waaqi'ah", "Al-Hadid", "Al-Mujadila", "Al-Hasyr", "Al-Mumtahana", "As-Shaff",
21+
"Al-Jumu'ah", "Al-Munafik", "At-Tagabun", "At-Talaq", "At-tahrim", "Al-Mulk", "Al-Qalam", "Al-aqqa",
22+
"Al-Ma'arij", "Nuh", "Al-Jinn", "Al-Muzammil", "Al-Muddathth", "Al-Qiyamat", "Ad-Dahr",
23+
"Al-Murlsalat", "An-Nabaa", "An-Nazi'at", "Abasa", "At-takwir", "Al-Infitar", "Al-Mutaffife",
24+
"Al-Inshiqaq", "Al-Buruj", "At-Tariq", "Al-A'la", "Al-Ghashiya", "Al-Fajr", "Al-Balad",
25+
"Ash-Shams", "Al-Lail", "Adz-Dhuha", "Al-Syarh", "At-Tin", "Al-Alaq", "Al-Qadr", "Al-Baiyinah",
26+
"Al-Zalzalah", "Al-Adiyat", "Al-Qari'a", "At-Takathur","Al-Asr", "Al-Humaza", "Al-Fil", "Quraish",
27+
"Al-Ma'un", "Al-Kautsar", "Al-Kafirun", "An-nashr", "Al-Lahab", "Al-Ikhlas", "Al-Falaq", "Al-Nas"
28+
];
29+
30+
31+
$.fn.quransaya = function(parameter) {
32+
url = 'http://api.quransaya.id/surat/'+parameter.surat+'/ayat/'+parameter.ayat;
33+
ini = this;
34+
suratKe = parseInt(parameter.surat) - 1;
35+
ayatKe = parseInt(parameter.ayat);
36+
warna = 'd-'+parameter.warna;
37+
38+
$.getJSON(url, function( data ) {
39+
ini.append("<blockquote class='d-panel d-leftbar "+warna+"'><p class='d-large'><i>"+data[0].arti+"</i></p><p>(QS. "+listSurah[suratKe]+":"+ayatKe+")</p></blockquote>");
40+
});
41+
42+
return this;
43+
}
44+
45+
46+
}( jQuery ));

‎quransaya.min.js

+9
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)