Fortunes Version 1.0
Fortune sayings for integration into your website
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus.
Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo.
Download »Fortunes« 1.0
»Fortunes« is offered in the current version 1.0 as freeware. If you like it, you can donate a freely definable amount to Kruse-IT GmbH.
If the web component is used on your own website, a link to this website should be integrated.
Installation Guide
The download points to the ZIP file website-fortunes-1.0.zip with the following content:
website-fortunes.js |
- | Javascript containing the web component |
fortunes.html |
- | Demo HTML which can be used as an example for the integration into the own website |
fortunes-data-A-de.json |
- | ca. 100 fortunes in German |
fortunes-data-B-en.json |
- | ca. 3800 fortunes in English from the 80's |
Please follow the instuctions below to include the fortunes web component on your own website:
- Unpack the Zip file
website-fortunes-1.0.zipand upload its content into the preferred folder of your website - Cut & paste the fortunes web component tag (
fortune-card-listorfortune-card) from the sample HTML file (fortunes.html) into your website
- Adjust the path of the
fortunes-data*.jsonin the configstring of web component tag so that is correctly pointing to the folder of your website - Include the web component javascript file (
website-fortunes.js) correctly as module
Configuration - fortune card list
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
<fortune-card-list class="fortune-card-default" configstring='{
"fortuneData": "components/fortunes-data-03.json",
"wikipediaUrl": "https://en.wikipedia.org/wiki/",
"canNavigate": true,
"length": 6}'>
</fortune-card-list>
| Tag Property | Configstring Property | Description |
|---|---|---|
class |
The CSS class name(s) of the style(s) to be applied (a) to the whole list and/ or (b) to each fortune card. The styling is done over CSS-variables, contained in a style class. | |
configstring |
A string containing a json content with the properties below | |
configstring |
fortuneData |
Relative or absolute path to the fortune data json file. This path must ALWAYS point to your website - if the protocol (http(s)) and or the host is different from your website the browser won't allow to access it' |
configstring |
wikipediaUrl |
URL of a knowledge database like wikepedia. The search phrase will be added to the end of the given url |
configstring |
canNavigate |
Boolean whether the navigaton bar of a fortune card should be displayed or not |
configstring |
length |
Maximal number of the fortunes cards to be displayed in the list |
Configuration - single fortune card
Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum.
<fortune-card class="fortune-card-yellowgreen" configstring='{
"fortuneData": "fortunes-data-01.json",
"fortuneIndex": 28,
"wikipediaUrl": "https://de.wikipedia.org/wiki/"
"canNavigate": true}'>
</fortune-card>
| Tag Property | Configstring Property | Description |
|---|---|---|
class |
The CSS class name of the style to be applied to the fortune card. The styling is done over CSS-variables, contained in a style class. | |
configstring |
A string containing a json content with the properties below | |
configstring |
fortuneData |
Relative or absolute path to the fortune data json file. This path must ALWAYS point to your website - if the protocol (http(s)) and or the host is different from your website the browser won't allow to access it' |
configstring |
fortuneIndex |
The index of the fortunes card be displayed or null for a random index. The random mechanism ensures that no card will be displayed twice. |
configstring |
wikipediaUrl |
URL of a knowledge database like wikepedia. The search phrase will be added to the end of the given url |
configstring |
canNavigate |
Boolean whether the navigaton bar of a fortune card should be displayed or not |
Styling
| Scope | CSS-Variable Property | Default Value | Description |
|---|---|---|---|
fortune-card-list |
xzy |
Lorem ispum | |
fortune-card |
--fortune-width |
100% | Lorem ispum |
Styling-Sample "fortune-card-blue"
<script language="JavaScript" type="module" src="components/website-fortunes.js" defer=""></script>
.fortune-card-blue {
display: contents;
--fortune-background-color: rgba(77, 135, 199, 0.1);
--fortune-quote-mark-color: rgba(77, 135, 199, 1.0);
--fortune-quote-mark-opacity: 0.5;
--fortune-border: 1px solid rgba(77, 135, 199, 0.25);
--fortune-button-hover-color: rgba(77, 135, 199, 0.15);
}
<fortune-card class="fortune-card-blue" configstring='{
"fortuneData": "components/fortunes-data-03.json",
"fortuneIndex": 22,
"canNavigate": true }'>
</fortune-card>
Styling-Sample "fortune-card-yellowgreen"
<script language="JavaScript" type="module" src="components/website-fortunes.js" defer=""></script>
.fortune-card-yellowgreen {
display: contents;
--fortune-background-color: rgba(153, 205, 50, 0.15);
--fortune-quote-mark-color: rgba(153, 205, 50, 1.0);
--fortune-quote-mark-opacity: 0.15;
--fortune-quote-mark-size: 92px;
--fortune-quote-mark-margin: -20px -16px 0 0;
--fortune-quote-font-family: "Times New Roman";
--fortune-quote-font-size: 18px;
--fortune-foreground-color: rgb(68, 76, 72);
--fortune-quote-text-align: center;
--fortune-author-text-align: center;
--fortune-accent-color: rgb(68, 115, 68);
--fortune-border: 1px solid rgba(153, 205, 50, 0.25);
--fortune-border-radius: 8px;
--fortune-background-color: rgba(153, 205, 50, 0.15);
}
<fortune-card class="fortune-card-yellowgreen" configstring='{
"fortuneData": "components/fortunes-data-01.json",
"fortuneIndex": 3,
"canNavigate": false }'>
</fortune-card>