Fortunes Version 1.0

Fortune sayings for integration into your website

Fortunes

»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.

Demo »Fortunes« 1.0 (German sayings, own blue styling)

Demo »Fortunes« 1.0 (English Sayings, default styling)

system_update_alt

Download »Fortunes« 1.0

Please click on the download icon above or »here« to dowload the »Fortunes« web component as ZIP-file.

construction

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.zip and upload its content into the preferred folder of your website
  • Cut & paste the fortunes web component tag (fortune-card-list or fortune-card) from the sample HTML file (fortunes.html) into your website
  • Adjust the path of the fortunes-data*.json in 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
settings

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"
  },
  { ... }
]
settings

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.
settings

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.
style

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-gap12pxThe gap between each fortune card in the list
fortune-card-list--fortune-list-flex-wrapwrapThe wrap behaviour of the fortune cards in the list (wrap|nowrap)
fortune-card-list--fortune-list-align-selfflex-startThe alignment of each fortune card in the list
fortune-card--fortune-width100%The width of a fortune card
fortune-card--fortune-min-width320pxThe minimal width of a fortune card
fortune-card--fortune-heightautoThe height of a fortune card
fortune-card--fortune-min-height72pxThe minimal width of a fortune card
fortune-card--fortune-margin0px 0px 0px 0pxThe margin of a fortune card
fortune-card--forutne-padding12px 16px 8px 16pxThe padding of a fortune card
fortune-card--fortune-border1px solid #e0e0e0The border of a fortune card
fortune-card--fortune-border-radius4pxThe border radius of a fortune card
fortune-card--fortune-accent-color#4d87c7The accent color of a fortune card, used some elements like quote mark, author and buttons
fortune-card--fortune-foreground-color#444444The foreground color of the fortune card
fortune-card--fortune-background-colorrgba(white, 0)The background color of the fortune card
fortune-card--fortune-header-color$fortune-accent-colorThe 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-size14pxThe font size of the header (index number, buttons)
fortune-card--fortune-header-font-stylenormalThe font style of the header (index number, buttons)
fortune-card--fortune-quote-mark-color$fortune-accent-colorThe quote mark color
fortune-card--fortune-quote-mark-opacity0.2The quote mark opacity
fortune-card--fortune-quote-mark-size68pxThe quote mark size (used for both width and height)
fortune-card--fortune-quote-mark-margin-14px -8px 0 0The 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-size16pxThe font size of the quote text
fortune-card--fortune-quote-font-stylenormalThe font style of the quote text
fortune-card--fortune-quote-text-alignstartThe 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-size16pxThe font size of the author text
fortune-card--fortune-author-font-styleitalicThe font style of the author text
fortune-card--fortune-author-text-alignstartThe text alignment of the author text
fortune-card--fortune-author-margin12px 0 0 0The margin of the author text, used for positioning
fortune-card--fortune-button-hover-color#f0f0f0The 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>
×