Kuwait Prayer Times based on AlAdhan API services
Amiri font used for Arabic text
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
- 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
<!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>Add the following styling to center prayer times table in a <div> element
#q8prayers table{
margin-right: auto;
margin-left: auto;
}