chicko structure

The Chicko.js library document A Little Comfort With Chicko Author: Alireza Fazeli Version: 0.01 Bio : chicko.js library is mini javaScript library We Made Chicko For You Contents 1 | What Is Exactly Chicko.js 1 1.1 v0.01 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.2 Installation and Update . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 1.3 About Pull Request . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1 2 how to use chicko.js 2 2.1 install chicko.js . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2 3 chicko.js functions 4 3.1 simple insertAdjacentHtml . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 3.2 show index of array (kIterate function) . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 3.3 VIterate function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 3.4 returnValue function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.5 returnTContent function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.6 cssStyleChanger function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.7 childStyle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 3.8 findInKeyObj function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.9 findInValueObj function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.10 findInKeyAndValeObj function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 3.11 windowSizeAlert function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.12 titleCaseConverter function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.13 InputClear function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.14 datesRegion function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 3.15 clockConsole function . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 4 modal window 9 4.1 how to use modal window . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 5 contact with author 11 Chapter 1 | What Is Exactly Chicko.js chicko.js is a mini javascript library. this library helps us easier work with javascript in DOM or something else. chicko.js is a functionality library with fast CDN.. Author Github: https://github.com/alirezafazeli8/ Chicko.js GitHub: https://github.com/alirezafazeli8/chicko j s Email: alirezafazeli2684@gmail.com 1.1 v0.01 this version is the first version of chicko.js. version 0.01 is basic javascript functionality and for the future, we have a lot of things to work better in your project. 1.2 Installation and Update for install, guide checks next lecture and or check repository readme. 1.2.1 Other Release Versions in chicko.js team just me (alireza fazeli). and I don’t have a team to update the chicko.js (NOTICE: better update) and if you wanna help me to update the chicko.js I’m so happy to send a message to me by email: alirezafazeli2684@gmail.com or send a pull request in GitHub to me. 1.3 About Pull Request just make new something, and pull it to chicko.js library. Chapter 2 how to use chicko.js chicko.js is very simple and ver simple you can use it in your project. 2.1 install chicko.js we have two options for install chicko.js. 1. we can install with chicko.js file, you can download the chicko.js file from the chicko.js github repository. https://github.com/alirezafazeli8/chicko j s 2. in solution 2 we can use chicko.js with CDN and chicko.js structure. (a). css link : 1 (b). javascript link : 1 (c). modal window js link: 1 3. html structure you can use and put in your project : 1 2 3 4 5 6 7 8 12 chicko structure 13 14 15 16 2.1 install chicko.js 17 19 20 3 Chapter 3 chicko.js functions 3.1 simple insertAdjacentHtml adjacentHtml(); function is help to you put HTML code in your HTML container easily. in adjacentHtml(); function we have 3 argument , first argument is your own element you want put HTML code and second argument is your position , where you want your HTML is be. Position : ’beforebegin’: Before the element itself. ’afterbegin’: Just inside the element, before its first child. ’beforeend’: Just inside the element, after its last child. ’afterend’: After the element itself. and the last parameter is the HTML code you want to be put on the container. sample code: 1 const htmlCode = ‘ 2 3

hello guys

4 5 ‘; 6 7 adjacentHtml(".container", "afterbegin", htmlCode); 3.2 show index of array (kIterate function) with this function, we can iterate on the array and show an index of all array we have on the console, and this function name is so funny but this is (kIterate). 1 const names = ["korosh", "dariush", "khashayar"]; 2 kIterate(names); // output => 0 1 2 3.3 VIterate function this function task is to log all array values on the console. 1 const names = ["korosh", "dariush", "khashayar"]; 2 vIterate(names); // output => korosh dariush khashayar 3.4 returnValue function 3.4 returnValue function this function task is to return what you want value in element.value. 1 returnValue("#inputButton", "Chicko.js"); 3.5 returnTContent function returnTContent function is made easier for you to equal something you want on textContent. 1 returnTContent(".container", "chicko.js"); 3.6 cssStyleChanger function cssStyleChanger function is to change your HTML style with CSS with what you want. in cssStyleChanger we have 3 arguments : element : you should put your element name with (class, id, attribute or any selector). propertyName : propertyName, this argument is for css style property names, what do you want to have CSS style on your element?put that. value : the value argument is for your property value, like (color: red;), red is value in css. 1 cssStyleChanger(".container", "backgroundColor", "red"); 3.7 childStyle childStyle is a fantastic function in chicko.js, childStyle with 3 arguments can change a child’s elements style in your HTML container with what you want. containerName : my element children have a parent element and the parent element actually name is a container. when we wanna change the element Child’s style should see that notice. propertyName : propertyName, this argument is for css style property names, what do you want to have CSS style on your element?put that. value : the value argument is for your property value, like (color: red;), red is value in css. 5 3.8 findInKeyObj function 3.8 findInKeyObj function findInKeyObj function can help you find your object key name if your key name is existed returned to you true, or not returned to you false. objectName : object name is you object name you want find your object key. Key : the key is the key name you want to know it existed? 1 const human = { 2 name1: "alireza", 3 name2: "mohammad", 4 name3: "sara", 5 }; 6 7 console.log(findInKeyObj(human, "name1")); // output => true 3.9 findInValueObj function findInValueObj function let you find you what you want value In any key object. objectName : object name is you object name you want find your object value. value : is that you value you want find in your object. 1 const human = { 2 name1: "alireza", 3 name2: "mohammad", 4 name3: "sara", 5 }; 6 7 console.log(findInValueObj(human, "alireza")); // output => true 3.10 findInKeyAndValeObj function findInKeyAndValeObj function can find for you in your object what key equal to what value object like : (password: "12345"). you want to check it with your specific condition and findInKeyAndValeObj returned to you answer with boolean. 1 const userInfo = { 2 username: "Mr Chicko", 3 password: "chicko123" 4 } 5 6 console.log(findInKeyAndValeObj(userInfo, "username", "Ms Chicko")); // output => false 7 console.log(findInKeyAndValeObj(userInfo, "password", "chicko123")); // output => true 6 3.11 windowSizeAlert function 3.11 windowSizeAlert function window Size Alert function can give access to you, you set window size and if user change window size greater or less than your size you can set message and function showed your message with alert to the user. and function size is should pixel size. 1 windowSizeAlert(500, "Hey Don’t Change Window Size"); 3.12 titleCaseConverter function titleCaseConverter function is a fantastic function in chicko.js and you give a sentence or paragraph and this makes you a capitalize word your sentence without title case word ( and, or, then, at, a, in, on, to). 1 const mySentence = "hello guys my name is mr Chicko and im so happy for talking with you, i live in iran and then sometime in usa or canada , how know that?"; 2 3 titleCaseConverter(mySentence); // output => HGello Guys My Name Is Mr Chicko and Im So Happy For Talking With You, I Live in Iran and then Sometime in Usa or Canada , how know that? 3.13 InputClear function we have some input elements in HTML and we want to clear the input so we have the InputClear function and this function maked this road easier for us. 1 InputClear("#textInput"); 3.14 datesRegion function datesRegion function show to you, your specif date region and your specific date. function arguments : region : region argument is your country or what you want region you want to enable in date format like (en-us, fa-ir ...) dates : in dates argument, you can write (now) and now show to you now date or set specific date like (1985, 10, 2). 1 console.log(datesRegion("ko-KR", "now")); // output => 2021. 9. 27. 7 3.15 clockConsole function 3.15 clockConsole function clock console is your local clock and when you call it , this run in the console. symbol : in the clock console, we have one optional argument and the name is a symbol, for showing formatting like (5:40:3 or 5-40-3). if you not putting something on the argument, the clock format is (:) symbol. 1 clockConsole(); // output like => 4:50:43 8 Chapter 4 modal window 4.1 how to use modal window 1. modal button: first of all we have modal button for open modal you can see that image . 1 2. modal window : we have nice modal window and with HTML structure you can use it or customize it with your own style. 1 2 3 4 NOTICE : for modal window you should use right html structure and enable modal window js link. 10 Chapter 5 contact with author Name : Alireza Fazeli Email : alirezafazeli2684@gmail.com Github : github.com/alirezafazeli8 Finish.

hello guys

Oh noes...

Reportar conductas abusivas

Detalles del documento PDF

Información de contacto

chicko_js.pdf