codereducer
v1.3.3
Published
Reduce the number of lines of code for getting some extensive UI/UX feature in your lovely website.
Downloads
73
Maintainers
Readme
Code Reducer
The base module for the codeReducer
library.
Overview
Code Reducer
is a versatile JavaScript library designed to simplify and enhance your web development projects. This library offers a range of features to streamline your code and create engaging user experiences.
Key Features
Dkit: With Dkit, manipulating the DOM becomes a breeze! Enjoy coding with Dkit.
Custom Cursors: Create custom cursors with magnetic effects, making your web applications visually engaging and interactive.
Captcha Generation: Generate captchas to verify human users and enhance security in your applications. Captchas expire within 2 minutes after generation.
Artex: Create an Chat bit just by creating a normal dataset. Get a fully functional chatbot assistant for your projects within just few lines of code. This is just a miniature version of A.R.T.E.X AI (under development, not yet released)
Installation
You can install codeReducer
via npm:
npm install codereducer
Can use it with HTML by including our CDN. Every features has its own CDN to make your code light weight.Make sure to add all CDN in body tag before all the script tags.
Usage
Here's how you can use the codeReducer
library in your JavaScript projects:
Dkit
In frameworks import using
import Dkit from "codereducer/dkit";
To use dkit in HTML use this CDN.
<script src="https://junaidparkar.github.io/Code-Reducer/dist/dkit/index.js" ></script>
To use dkit here are the methods
init()
This method initialize Dkit (DOM kit) tools.
let dkit = Dkit.init();
from()
This method can be used to select any element inside of specific element.
dkit.from("Any HTML element here").tag("input");
id()
This method can be used to select an element with the specified ID.
dkit.id("myId");
class()
This method can be used to select an element with the specified class name.
dkit.class("myClass");
tag()
This method can be used to select an element with the specified tag name.
dkit.tag("myTag");
query()
This method can be used to select an element using a CSS selector.
dkit.query(".myClass #myId");
create()
This method can be used to select a new HTML element with the specified tag.
dkit.create("div");
get()
This method is mandatory as it returns the currently selected HTML element. And also erases the collected element.
let element = dkit.get();
How to use in frameworks
Here's an example of how you might use Dkit to create a new div
element, add it to the DOM, and then manipulate it:
import Dkit from "codereducer/dkit";
or
<script src="https://junaidparkar.github.io/Code-Reducer/dist/dkit/index.js" ></script>
Now use like this
// Create a new div element
let div = Dkit.init().create("div").get();
// Add the div to the body of the document
document.body.appendChild(div);
Now get an list of all h3
tag from inside a div
tag with id myDiv
// target all h3 in div
let h3 = Dkit.init().id("myDiv").tag("h3").get();
use single call for multiple manipulations
import Dkit from "codereducer/dkit";
// initialize dKit
let kit = Dkit.init();
// get first element
let elem = kit.id("scroll1").tag("canvas").get();
// get span tag from inside of h1 tag
let span = kit.from("HTML element h1 tag").tag("span").get()
// use all elements
console.log(elem);
console.log(span);
With Dkit, manipulating the DOM becomes a breeze! Enjoy coding with Dkit.
Custom Cursor
- First import
custom cursor
in framework via
import CustomCursor from "codereducer/cursor";
or use this CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js" integrity="sha512-7eHRwcbYkK4d9g/6tD/mhkf++eoTHwpNM9woBxtPUBWm67zeAfFC+HrdoE2GanKeocly/VxeLvIqwvCdk7qScg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://junaidparkar.github.io/Code-Reducer/dist/cursor/index.js"></script>
- To use it just use it like this
let dom = Dkit.init();
dom.id("cursor-element"); // an empty div element
let c = new CustomCursor(dom.get(), false);
c.getCursor();
dom.revert();
- Only if using any framework you need to use an clean up function that will be
c.revert();
Create a magnetic effect after adding custom cursor.
Note: Custom cursor is mandatory in order to make magnetic effect
let magneticElements = [
document.getElementById("elem1"),
document.getElementById("elem2"),
];
c.makeMagnet(magneticElements);
if using frame works then for sure you will use References. And this can be implemented by
'use client'
import customCursor from 'codereducer/cursor'
import { useEffect, useRef } from 'react'
export default function Home() {
const myRef = useRef();
const setRef = (element) => {
if (element) {
myRef.current = [...(myRef.current || []), element];
}
};
useEffect(() => {
let c = new customCursor()
c.getCursor()
c.makeMagnet(myRef.current)
return () => {
c.revert()
}
}, []);
return (
<div ref={setRef}></div>
<h1 ref={setRef}></h1>
<a ref={setRef}></a>
)
Generate and verify captcha
- First import using
import captcha from "codereducer/captcha";
for CDN use
<script src="https://junaidparkar.github.io/Code-Reducer/dist/captcha/index.js" ></script>
- Initialize captcha
let dom = Dkit.init();
dom.id("canvas-tag");
// let capt = new captcha(dom.get(), "any colour for captcha font", "any 128 bit key")
let capt = new captcha(
dom.get(),
"#f5f5f5",
"6rRwhBidAD0dME9mSo8Rr88F9A8TLVcR"
);
dom.revert();
- Generate captcha
capt.createCaptha((token, status) => {
if (status) {
// store the token some where
} else {
reject("Error generating captcha");
}
});
- Verify captcha
cr.verifyCaptcha("userInput", "token", (status, message) => {
if (status) {
// Captcha verified successfully
} else {
console.log("failed");
// Captcha verification not successful
}
});
A Chatbot
- Before implementing a chatbot first prepare the dataset for it.
- Dataset must be in the following order. No errors are allowed in it.
Here is the format of dataset:
const intent = {
hello: {
patterns: ["hey jarvis", "hey buddy", "hello dear", "wake up"],
responses: [
"welcome back sir",
"Nice to see you again",
"How can I help you now?",
"Just talking to myself?",
],
},
silent: {
patterns: ["go to silent mode", "shut your mouth", "keep silent"],
responses: ["okay, Got into silent mode sir", "silent mode turned on"],
},
bye: {
patterns: [
"Bye jarvis",
"Nice to see you",
"good to see you",
"meet you soon",
"having a sleep",
],
responses: [
"Hope to see you soon",
"Have a good time sir",
"It was nice talking to you sir",
],
},
};
- Here keys "hello", "silent", "bye" represent intents and patterns under that key represents list of words which can trigger that particular intent.
- Patterns represent the array of all the questions that users can ask to chat bot
- Responses represents array of responses to be given by chatbot when user asks any question from patterns.
To implement it first import to your project by
- Import
import ChatBot from "codereducer/artex";
in HTML use this
<script src="https://junaidparkar.github.io/Code-Reducer/dist/artex/index.js"></script>
- Initialize
let bot = new ChatBot(intent, 80);
Here first parameter intent is the dataset you created and second is the temperature i.e randomness that you can vary from 0 to 100.
- Get response
bot.chat("Hey there");
Form validation
- Before you begin there are some points you need to remember very well. This feature only handle inputs with type mentioned here:
date
,datetime-local
,email
,file
,image
,number
,password
,tel
,text
,time
,url
,week
,hidden
- If you want to use custom required message on inputs instead of default, Then prepare a function that creates a message box and appends to your website. Make sure this function will recieve a message as a argument. An example has been given below
const showMessage = (message) => {
let dom = Dkit.init();
dom.revert();
let div = dom.create("div").get();
dom.revert();
let p = dom.create("p").get();
dom.revert();
p.textContent = message;
div.appendChild(p);
document.body.appendChild(div);
setTimeout(() => {
document.body.removeChild(div);
}, 2000);
};
- Now create another function which you wanna execute when form gets validate successfully, but here you won't recieve any arguments. Just like
const submitForm = () => {
console.log("form submmitted")
}
- Now you are ready to rock. Lets just import the stuffs
import FormValidator from "codereducer/form"
or
<script src="https://junaidparkar.github.io/Code-Reducer/dist/form/index.js" ></script>
Initialize the values.
Look at the keypoints carefully
form
is the HTML form element you want to validateisRequiredAll
is aboolean
value that says whether to add required keyword to all inputs or notrequiredNone
is anarray
not theHTMLCollection
. IfisRequiredAll
is true then that will set all inputs as a required input except those inputs which will me mentioned in thisarray
option
is anarray
ofobject
defining additional functionality. if you want to create custom required message instead of using default message i.e message of please fill this field. Here are the options you can provide.
option = [ { type: "checkbox", allowed_from: [{el: ["elem1", "elem2", ...], number_of_allowed: 2}, {el: ["elem3", "elem4", ...], number_of_allowed: 1}] // multiple checkbox set can be provided here in array and number_of_allowed should be greater than 0 and less than length of el },{ type: "custom_required", func: showMessage } ]
(Note) Any one option can also be passed
Now just start validation
let formV = new FormValidator("HTML form element", true, [], [
{
type: "checkbox",
allowed_from: [{el: ["HTML element1", "HTML element2"], number_of_allowed: 1}]
}, {
type: "custom_required",
func: showMessage
}
])
formV.validate(() => {
console.log("validation completed)
})
- A clean up function for frameworks
formV.revert()