A recipe ingredients quantities converter focused on ease of use.
You may read the example section below for basic documentation in French language.
Download the repository and include the scripts from the dist
directory in your page.
<script src="cookie-converter.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cookie-converter-lc_en.min.js" type="text/javascript" charset="utf-8"></script>
Then, define a container.
<div id="cookieconv"></div>
Just call CookieConverter.create()
with some options to launch the app. Check the available options further in this document.
var cc = CookieConverter.create({
el: '#cookieconv',
locale: 'en' // tip : 'en' is in fact the defaut value, just skip it !
})
The converter is wrapped into the container you provide, and then re-wrapped in a div.cookie-converter
. The two parts of the application (source recipe and converted recipe, with their relative servings dropdowns) are wrapped in a div.cconv-block
. Check the main template for more informations about structure.
Some basic CSS is defined for you automatically to create buttons on quantities.
<style type="text/css">
/* Some font style on quantities buttons */
.cookie-converter .qtty {
font-family: monospace;
}
/* Show the thow recipe blocks side by side with a responsive min-width */
@media screen and (min-width: 650px){
.cconv-block {
float:left;
width:45%;
box-sizing: border-box;
}
.cconv-block + .cconv-block {
margin-left:5%;
}
}
</style>
Key | Required | Default | Description |
---|---|---|---|
convert |
No | {from:6, to:2} |
A javascript object specifying the initial values for quantity convertion at page load. You must provide both from and to properties. |
el |
Yes | A CSS selector targetting the application container | |
hash |
No | true |
Decide if the application will read the URL hash and priorize its content. Allows permalinks. |
locale |
No | 'en' |
The application i18n locale |
minRecipeRows |
No | 5 |
The minimum rows of the input recipe textarea element |
recipe |
No | '' |
A String containing the recipe shown at page load |
To create a new traduction, just define a new key into the CookieConverter.i18n
namespace and then call .setLocale(key)
with this key or create a fresh converter. There are only a few defined entries at the moment. Feel free to submit your lang file in a pull-request.
// Define a locale module on the fly
;(function(){
var lc = window.CookieConverter.i18n.dog = {}
lc.ratio_from_before = "Woo Woo"
lc.ratio_from_after = "Wooof"
lc.ratio_more = "Woof !"
lc.ratio_to_before = "Wooo Woo"
lc.ratio_to_after = "Wooof"
}())
// Into parent app scope
var cc = CookieConverter.create({
el: '#cookieconv',
locale: 'dog'
})
Download the repository and open dist/index.html
in your browser.
Check its source for basic French documentation.
The application is built with nodejs and Webpack.
git clone https://github.com/niahoo/cookie-converter.git cconv
cd cconv
npm install -g webpack
npm install
npm run dev
- Provide bootstrap support
- English example
- Use webpack merge