q8-prayertimes
v2.0.0
Published
Kuwait Prayer Times
Downloads
11
Readme
Kuwait Prayer Times
Kuwait Prayer Times based on AlAdhan API services
Amiri font used for Arabic text
Getting Started
Include our JavaScript before the closing body
<script src="https://q8p.io/js"></script>
Include our CSS in your project
<link rel="stylesheet" href="https://q8p.io/css">
Or by using Node.js
npm i q8-prayertimes
<script src="./node_modules/q8-prayertimes/dist/all.min.js"></script>
<link rel="stylesheet" href="./node_modules/q8-prayertimes/dist/all.min.css">
Create a div element with an id of q8prayers in your project
<div id="q8prayers"></div>
You can add more than one element in a single page
Options
- Languages
data-lang="en"Display prayer times in English (default)data-lang="ar"Display prayer times in Arabic
- Date Types:
data-date="gregorian"Display date in Gregorian format (default)data-date="hijri"Display date in Hijri format
- Themes:
data-theme="light"Display prayer times in ligh mode (default)data-theme="dark"Display prayer times in dark modedata-theme="black"Display prayer times in all black modedata-theme="white"Display prayer times in all white mode
- Table Sizes:
data-size="sm"Display table in small sizedata-size="md"Display table in medium size (default)data-size="lg"Display table in large sizedata-size="xl"Display table in xlarge size
Starter Template
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Q8 Prayer Times CSS -->
<link rel="stylesheet" href="https://q8p.io/css">
<title>Q8 Prayer Times Starter Template</title>
</head>
<body>
<!-- Q8 Prayer Times Element -->
<div id="q8prayers" data-lang="ar"></div>
<!-- Q8 Prayer Times JavaScript -->
<script src="https://q8p.io/js"></script>
</body>
</html>Hint
Add the following styling to center prayer times table in a <div> element
#q8prayers table{
margin-right: auto;
margin-left: auto;
}