cook(tag [, first_parameter] [, second_parameter] [, third_parameter])

tag

represents the html tag, example "span", "div",etc.

first_parameter

second_parameter

, and

third_parameter

can either be any of the following.
The order of the parameters do NOT matter

string: this string will be the inner text of the created node, customizing how 'text' is interpreted can be modified, more here
Example:
```
cook('span', 'hello world')
```
array (of nodes): the nodes of the array in order as they are given will be the children Example:
```
cook('span', [
    cook('i', 'hello'),
    cook('b', 'world')
   ])
```
dictionary: this dictionary contains details of the created node, which include attributes, properties, events, and more. The keys have the corresponding values, note that the keys are case insensitive:

Key	Value	Result
text	string	the value will be the content of the node's internal text node using cook(tag, {text:value}) is equivalent to cook(tag,value)
html	string	the value will be the inner html of the node.
classes	array of strings	the created node will have css classes mentioned by the array in the order as given.
event	function	the value which is a function is attached to the node with the event 'event' examples of events: 'click', 'focus', 'keyup',etc.
attribute	string	the value is set as the value of the attribute 'attribute' example: 'title', 'data-timestamp', 'value', 'href',etc. any valid attribute for a node with tag 'tag' will work here.

Example:

cook('div',[
    cook('img', {src:'https://cdn.example.com/logo.png',
                title: 'Our Logo', alt: 'Image of our Logo',
                click:function(){lightbox(this.src)}}),
    cook('p', {class:'img-description',
                text: 'The above image is our current logo.'})]);

Write even lesser?

Using calls like

cook('span', ...), cook('div', ...), cook('li', ...)

to churn out those html nodes is possible, however would you want to further type lesser and improve readability of your code? Cook can help you here. An html tag represented by cook looks generically like:

tag(first_parameter, seconds_parameter, third_parameter)

this is equivalent to

cook(tag, first_parameter, second_parameter, third_parameter)

The html tags which can be represented in the above way are:

span, div, p, article, section,
aside, audio, video, figure, caption,
form , select, option, optgroup,
button, textarea, ul, ol, li, abbr,
table, tr, th, thead, tbody, tfoot,
td, colgroup, blockquote, br, hr,
h1, h2, h3, h4, h5, h6,
pre, b, i, u, strike, strong, sub, sup,
a, input, col, link, script, meta, iframe

Better readability? Aliases

To create a node with a 'u' tag the u() function can be used, li() function for 'li', p() for 'p'. Maybe you want to make your code more readable for yourself and/or for the others who work with it. For this cook.js has aliases to the lowly descriptive tag names like 'a', 'li', 'p', etc. Below is the complete list:

p(...)

paragraph(...)

a(...)

hyperlink(...)

b(...)

bold(...)

i(...)

underline(...)

u(...)

italic(...)

li(...)

list_item(...)

Let's make life simpler: deeper than html tag functions

So far we have functions as span(), div(), button(), etc. However there are some elements which we create which can be grouped distinctly. For example checkboxes?, wouldn't it be better if we could make a checkbox by having a checkbox() function rather than using input({'type':'checkbox'})? This section is about these types of functions.

radio(first_parameter, second_parameter, third_parameter)

equivalent to

input(first_parameter, second_parameter, third_parameter)

where the input is of type 'radio'.

checkbox(first_parameter, second_parameter, third_parameter)

equivalent to

input(first_parameter, second_parameter, third_parameter)

where the input is of type 'checkbox'.

textinput(first_parameter, second_parameter, third_parameter)

equivalent to

input(first_parameter, second_parameter, third_parameter)

where the input is of type 'text'.

Final notes

The text parameter
the 'text' parameter used in functions, eg:cook('span', text),div(text); will make the node have an internal text node of the the value mentioned by the text parameter
Thus if 'text' is specified as 'this is <b>important</b>', the text will actually be 'this is <b>important</b>', without the word 'important' boldened. However since one can look at text as a mere subset of innerHTML, cook.js offers you an option to treat this 'text' parameter (not the 'text' key of the details dictionary, this will remain the same) as the node's inner html, which will result in the text looking like 'this is important'.
The top of the cook.js file should have
```
/* Config */
    var default_text_not_html = true;
/* End Config */
```
As you can see, the default is set to
```
true
```
, you can set this to be
```
false
```
if your preference is to pass in the inner html as the text parameter.
Make snippets of your code look like html
Given that cook.js offers you a function for every html tag, you can start writing code which looks very similar to html, here is an example:

HTML Code	cook.js
<div> <p>Here are some popular search engines</p> <ul> <li> <a href="https://www.google.com">Google</a> </li> <li> <a href="https://www.bing.com">Bing</a> </li> <li> <a href="https://www.yahoo.com">Yahoo</a> </li> </ul> </div>	div([ p('Here are some popular search engines'), ul([ li([ a('Google', {href:'https://www.google.com'}) ]), li([ a('Bing', {href:'https://www.bing.com'}) ]), li([ a('Yahoo', {href:'https://www.yahoo.com'}) ]) ]) ]);

HTML Code

cook.js

<div>
  <p>Here are some popular search engines</p>
  <ul>
    <li>
      <a href="https://www.google.com">Google</a>
    </li>
    <li>
      <a href="https://www.bing.com">Bing</a>
    </li>
    <li>
      <a href="https://www.yahoo.com">Yahoo</a>
    </li>
  </ul>
</div>

div([
  p('Here are some popular search engines'),
  ul([
    li([
      a('Google', {href:'https://www.google.com'})
    ]),
    li([
      a('Bing', {href:'https://www.bing.com'})
    ]),
    li([
      a('Yahoo', {href:'https://www.yahoo.com'})
    ])
  ])
]);

Download Links

cook.js (~ 5.3 kb)

COOK.JS

Write even lesser?

Better readability? Aliases

Let's make life simpler: deeper than html tag functions

Final notes

The text parameter

Make snippets of your code look like html

Download Links