Fortunes Version 1.0
Fortune sayings for integration into your website
»Fortunes« is a web component that can display one or more sayings on a web page.
It is responsive (also suitable for mobile devices), can be customised to the styling of the website, has a very small footprint (< 100KB) and the fortunes database can be easily expanded or replaced.
For the time being »Fortunes« is offered in the version 1.0 as freeware. If you like it, you can donate a freely definable amount to Kruse-IT GmbH using PayPal.Me/KruseIT.
If the web component is used on your own website, a link to this website should be integrated.
Download »Fortunes« 1.0
Please click on the download icon above or »here« to dowload the »Fortunes« web component as ZIP-file.
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 - general
The »Fortunes« comes with two web components (fortune-card and fortune-card-list) and two sample fortunes data files.
The fortune-card-list contains offer a list of fortunes cards. The fortune-card displays a single fortune. The configuration of both web components are very similar. In fact the most settings done for the fortune-card-list are passed directly to the fortune-card.
A fortune data file is JSON based with a very simple structue, containing a list with fortunes, each with two properties.
The content of each property can contain Markdown Annotations. To force a line break the <br/> tag may be used in addition to the markdowns.
[
{
"quote": "Ich denke *nie* an die Zukunft.<br/>Sie kommt **früh** genug.",
"author": "Albert Einstein, Physiker"
},
{ ... }
]
Configuration - fortune card list
The fortune-card-list displays a number of fortune-cards on a panel. Two attributes are used for configuration: The ‘class’ attribute for transferring one or more CSS classes to the component and the ‘configstring’ attribute.
The latter contains a JSON object in string form and allows the most important parameters of the web component to be set:
<fortune-card-list class="fortune-card-default" configstring='{
"fortuneData": "components/fortunes-data-B-en.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 and/or the host are 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 ('true' or 'false') whether the navigaton bar of a fortune card should be displayed or not. The navigation bar contains the forth/back and the random buttons and the possibility to enter the card index directly. |
configstring |
length |
Maximal number of the fortunes cards to be displayed in the list. The number of fortunes in the fortuneData is limiting the maximal number of displayed fortunes. |
Configuration - single fortune card
The fortune-card displays a single forune in a card. Two attributes are used for configuration: The ‘class’ attribute for transferring one or more CSS classes to the component and the ‘configstring’ attribute.
The latter contains a JSON object in string form and allows the most important parameters of the web component to be set:
<fortune-card class="fortune-card-yellowgreen" configstring='{
"fortuneData": "fortunes-data-A-de.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 and/or the host are different from your website the browser won't allow to access it. |
configstring |
fortuneIndex |
The index of the fortunes card to be displayed or 'null' for a random index. The random mechanism ensures that no card will be displayed twice. If the given index is not existing, the first card (index 0) will be displayed. |
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 ('true' or 'false') whether the navigaton bar of a fortune card should be displayed or not. The navigation bar contains the forth/back and the random buttons and the possibility to enter the card index directly. |
Styling
The styling is done by CSS variables. The variables for one style can be grouped in a CSS class, which then can be passed to the fortunes web components in the "class" attribute (see the styling examples below).
In case you have a fortunes card list, the class attribute may contain both style classes - the one for the fortune class list and the one for the single fortunes card.
| Scope | CSS-Variable Property | Default Value | Description |
|---|---|---|---|
fortune-card-list | --fortune-list-gap | 12px | The gap between each fortune card in the list |
fortune-card-list | --fortune-list-flex-wrap | wrap | The wrap behaviour of the fortune cards in the list (wrap|nowrap) |
fortune-card-list | --fortune-list-align-self | flex-start | The alignment of each fortune card in the list |
fortune-card | --fortune-width | 100% | The width of a fortune card |
fortune-card | --fortune-min-width | 320px | The minimal width of a fortune card |
fortune-card | --fortune-height | auto | The height of a fortune card |
fortune-card | --fortune-min-height | 72px | The minimal width of a fortune card |
fortune-card | --fortune-margin | 0px 0px 0px 0px | The margin of a fortune card |
fortune-card | --forutne-padding | 12px 16px 8px 16px | The padding of a fortune card |
fortune-card | --fortune-border | 1px solid #e0e0e0 | The border of a fortune card |
fortune-card | --fortune-border-radius | 4px | The border radius of a fortune card |
fortune-card | --fortune-accent-color | #4d87c7 | The accent color of a fortune card, used some elements like quote mark, author and buttons |
fortune-card | --fortune-foreground-color | #444444 | The foreground color of the fortune card |
fortune-card | --fortune-background-color | rgba(white, 0) | The background color of the fortune card |
fortune-card | --fortune-header-color | $fortune-accent-color | The foreground color of the header (index number, buttons) |
fortune-card | --fortune-header-font-family | "Arial" | The font name of the header (index number, buttons) |
fortune-card | --fortune-header-font-size | 14px | The font size of the header (index number, buttons) |
fortune-card | --fortune-header-font-style | normal | The font style of the header (index number, buttons) |
fortune-card | --fortune-quote-mark-color | $fortune-accent-color | The quote mark color |
fortune-card | --fortune-quote-mark-opacity | 0.2 | The quote mark opacity |
fortune-card | --fortune-quote-mark-size | 68px | The quote mark size (used for both width and height) |
fortune-card | --fortune-quote-mark-margin | -14px -8px 0 0 | The quote mark margin from the top left corner, used for positioning |
fortune-card | --fortune-quote-font-family | "Arial" | The font name of the quote text |
fortune-card | --fortune-quote-font-size | 16px | The font size of the quote text |
fortune-card | --fortune-quote-font-style | normal | The font style of the quote text |
fortune-card | --fortune-quote-text-align | start | The text alignment of the quote text |
fortune-card | --fortune-author-font-family | "Arial" | The font name of the author text |
fortune-card | --fortune-author-font-size | 16px | The font size of the author text |
fortune-card | --fortune-author-font-style | italic | The font style of the author text |
fortune-card | --fortune-author-text-align | start | The text alignment of the author text |
fortune-card | --fortune-author-margin | 12px 0 0 0 | The margin of the author text, used for positioning |
fortune-card | --fortune-button-hover-color | #f0f0f0 | The hover color for focusable elements, used for background or border |
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-B-en.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-A-de.json",
"fortuneIndex": 3,
"canNavigate": false }'>
</fortune-card>