Practise: June 2021

Saturday, June 26, 2021

restrict user to enter only alphabates

<-- KIRTISHIL PATIL-->

<!doctype html>

<head>

<title>Title</title>

<style>

.small {

color: #b0aeb8;

text-transform: capitalize;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.small-err {

color: #ff2525;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.input-err,

.input-err:focus {

border: 1px solid #ff2525;

box-shadow: 0 0 0 0.2rem #ff00003b;

}

</style>

</head>

<body>

<h1>User unable to enter alphabets strict to numbers only</h1>

<small class="small limiterr mt-2">Limit</small>

</div>

function isNumber(val, elem) {

val = val.trim();

var reg = /^\d+$/;

if (reg.test(val)) {

//normal css

$("#limit").removeClass("input-err");

$(".limiterr").removeClass("small-err");

} else {

//red css

$("#limit").addClass("input-err");

$(".limiterr").addClass("small-err");

$(elem).val("");

}

</script>

</body>

</html>

input box value trim and show error

<-- KIRTISHIL PATIL-->

<!doctype html>

<head>

<title>Title</title>

<style>

.small {

color: #b0aeb8;

text-transform: capitalize;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.small-err {

color: #ff2525;

font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;

}

.input-err,

.input-err:focus {

border: 1px solid #ff2525;

box-shadow: 0 0 0 0.2rem #ff00003b;

}

</style>

</head>

<body>

<h1>Input box trim whitespaces if value="" display error in red</h1>

<small class="small titleerr mb-4"> Enter title </small>

</div>

function onKeyUpTitle(val, e) {

val = val.trim();

if (val == "") {

$("#title").addClass("input-err");

$(".titleerr").addClass("small-err");

} else {

$("#title").removeClass("input-err");

$(".titleerr").removeClass("small-err");

}

</script>

</body>

</html>

toastr - easiest way to display notifications

<-- KIRTISHIL PATIL-->

<!doctype html>

<head>

<title>Toastr Example</title>

</link>

</head>

<body>

<h1>This is toastr(notifications)</h1>

function raiseToasterMessage(type, msg, title) {

toastr.options = {

closeButton: false,

newestOnTop: true,

positionClass: "toast-bottom-right",

preventDuplicates: false,

onclick: null,

};

toastr[type](msg, title);

}

var a = 11;

for (let i = 0; i < a; i++) {

if (i == 1) {

raiseToasterMessage("warning", "This is warning", "warning");

} else if (i == 2) {

raiseToasterMessage("error", "This is error", "error");

} else if (i == 3) {

raiseToasterMessage("success", "This is success", "success");

}

else if(i==4)

{

raiseToasterMessage("info", "This is info", "info");

}

</script>

</body>

</html>

Email validation using javascript

<-- KIRTISHIL PATIL-->

<!DOCTYPE html>

<head>

<title>EmailValidation</title>

</head>

<body>

Email: <input type="text" name="EMail">

</form>

// Email validation Code

function validateEmail() {

var emailID = document.myForm.EMail.value;

atpos = emailID.indexOf("@");

dotpos = emailID.lastIndexOf(".");

if (atpos < 1 || ( dotpos - atpos < 2 )) {

alert("Please enter correct email ID")

document.myForm.EMail.focus() ;

return false;

}

return( true );

}

</script>

</body>

</html>

Form validation

<-- KIRTISHIL PATIL -->

<!DOCTYPE html>

<head>

<title>Simple HTML Form</title>

</head>

<body>

<h2>Application Form</h2>

</div>

<label>Email Address</label>

</div>

<label>Mobile Number</label>

</div>

<label>Country</label>

<option>Select</option>

<option>Australia</option>

<option>India</option>

<option>United States</option>

<option>United Kingdom</option>

</select>

</div>

<label>Gender</label>

<label><input type="radio" name="gender" value="female"> Female</label>

</div>

</div>

<label>Hobbies <i>(Optional)</i></label>

<label><input type="checkbox" name="hobbies[]" value="sports"> Sports</label>

<label><input type="checkbox" name="hobbies[]" value="movies"> Movies</label>

<label><input type="checkbox" name="hobbies[]" value="music"> Music</label>

</div>

</div>

</form>

function printError(elemId, hintMsg) {

document.getElementById(elemId).innerHTML = hintMsg;

}

// Defining a function to validate form

function validateForm() {

// Retrieving the values of form elements

var name = document.contactForm.name.value;

var email = document.contactForm.email.value;

var mobile = document.contactForm.mobile.value;

var country = document.contactForm.country.value;

var gender = document.contactForm.gender.value;

var hobbies = [];

var checkboxes = document.getElementsByName("hobbies[]");

for(var i=0; i < checkboxes.length; i++) {

if(checkboxes[i].checked) {

// Populate hobbies array with selected values

hobbies.push(checkboxes[i].value);

}

// Defining error variables with a default value

var nameErr = emailErr = mobileErr = countryErr = genderErr = true;

// Validate name

if(name == "") {

printError("nameErr", "Please enter your name");

} else {

var regex = /^[a-zA-Z\s]+$/;

if(regex.test(name) === false) {

printError("nameErr", "Please enter a valid name");

} else {

printError("nameErr", "");

nameErr = false;

}

// Validate email address

if(email == "") {

printError("emailErr", "Please enter your email address");

} else {

// Regular expression for basic email validation

var regex = /^\S+@\S+\.\S+$/;

if(regex.test(email) === false) {

printError("emailErr", "Please enter a valid email address");

} else{

printError("emailErr", "");

emailErr = false;

}

// Validate mobile number

if(mobile == "") {

printError("mobileErr", "Please enter your mobile number");

} else {

var regex = /^[1-9]\d{9}$/;

if(regex.test(mobile) === false) {

printError("mobileErr", "Please enter a valid 10 digit mobile number");

} else{

printError("mobileErr", "");

mobileErr = false;

}

// Validate country

if(country == "Select")

printError("countryErr", "Please select your country");

} else {

printError("countryErr", "");

countryErr = false;

}

// Validate gender

if(gender == "") {

printError("genderErr", "Please select your gender");

} else {

printError("genderErr", "");

genderErr = false;

}

// Prevent the form from being submitted if there are any errors

if((nameErr || emailErr || mobileErr || countryErr || genderErr) == true) {

return false;

} else {

// Creating a string from input data for preview

var dataPreview = "You've entered the following details: \n" +

"Full Name: " + name + "\n" +

"Email Address: " + email + "\n" +

"Mobile Number: " + mobile + "\n" +

"Country: " + country + "\n" +

"Gender: " + gender + "\n";

if(hobbies.length) {

dataPreview += "Hobbies: " + hobbies.join(", ");

}

// Display input data in a dialog box before submitting the form

alert(dataPreview);

}

};

</script>

</body>

</html>

Base 64 javascript php

<-- KIRTISHIL PATIL-->

from js to php

elem taken from js function:-

location.href = "filename.php?elem=" +(btoa(elem));

form php to js

$elem = base64_decode($_GET["elem"]);

onclick btn redirect to new page:-

onclick="window.location.href='filename.php'

----start------

function encodeImgtoBase64(element) {

var fileUpload = document.getElementById("org_logo");

var regex = new RegExp("([a-zA-Z0-9s_\\.-:])+(.jpg|.png|.jpeg)$");

if (regex.test(fileUpload.value.toLowerCase())) {

var img = element.files[0];

var reader = new FileReader();

reader.onloadend = function (e) {

// $("#convertImg").attr("href", reader.result);

// $("#convertImg").text(reader.result);

var image = new Image();

image.src = e.target.result;

image.onload = function () {

var height = this.height;

var width = this.width;

if (height > 300 || width > 300) {

toastr.error(

"Please select image of dimension 300*300",

"",

(toastr.options.positionClass = "toast-bottom-right")

);

return false;

}

$(".org_logo_imag_holder").attr("src", reader.result);

temp_image = e.target.result;

return true;

};

reader.readAsDataURL(img);

} else {

toastr.error(

"Please select a valid Image format",

"",

(toastr.options.positionClass = "toast-bottom-right")

);

return false;

}

array imp function with dropdown don't display selected elements

<-- KIRTISHIL PATIL-->

<small class="small">Select Color</small>

</div>

</div>

var select_color_arr = ['red', 'green', 'blue', 'yellow', 'black'];

var selected_color_arr = {}; //to check push

var selected_color_cmp_array = [];

var properties_arr = ["drop 1", "drop 2", "drop 3"];

function propAppend()

{

for (let i = 0; i < properties_arr.length; i++)

{

var li = document.createElement('li');

$(li).addClass("list-group-item d-flex align-items-center justify-content-between text-capitalize");

li.textContent = properties_arr[i];

document.getElementById('proplist').appendChild(li);

$(li).append('<span class="d-flex align-items-center">\

<span class="colorMsg" id="color_' + properties_arr[i].replace(' ', '_') + '" class="text-capitalize"></span>\

<div class="dropdown ml-2">\

<button onclick="dropdown1(\'' + properties_arr[i].replace(' ', '_') + '\',\'' + properties_arr[i] + '\')" class="btn btn-light dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">\

Select Color\

</button>\

<div id="drp_dwn_list_' + properties_arr[i].replace(' ', '_') + '" class="dropdown-menu" aria-labelledby="dropdownMenuButton">\

</div>\

</span>');

}

propAppend();

function dropdown1(elem_id, key)

{

$('#drp_dwn_list_' + elem_id).empty();

var cmparr = Object.values(selected_color_arr);

for (var i in select_color_arr)

{

if(!cmparr.includes(select_color_arr[i]))

{

$('#drp_dwn_list_' + elem_id).append('<a onclick="selectedColor(\''+key+'\',\''+select_color_arr[i]+'\')" class="text-capitalize dropdown-item" href="#">' + select_color_arr[i] + '</a>');

}

function selectedColor(prop, values)

{

selected_color_arr[prop] = values;

$('#color_'+prop.replace(' ', '_')).css({"color":values});

$('#color_'+prop.replace(' ', '_')).text(values);

}

</script>

access variables from php to javascript - easiest way

<-- KIRTISHIL PATIL-->

var variable_name = <?php echo json_encode($php_variable, true); ?>;

Jquery basic events

<-- KIRTISHIL PATIL-->

<!DOCTYPE html>

<head>

<title>JQuery Basic</title>

integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="

crossorigin="anonymous"></script>

</head>

<body>

<h1>JQuery Basic</h1>

<h3>Kirtishil Patil</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, modi sed, enim temporibus nisi ducimus alias, exercitationem provident ipsum sit esse voluptates! Asperiores, repudiandae. Maxime sit laborum et inventore fugiat!</p>

<button id="but3">fadeOut</button>

<button id="but4">fadeIn</button>

</div>

<button id="but1">addClass</button>

<br>

<button id="but2">Submit</button>

<br>

<button id="slide">Slide</button>

</div>

<br>

datepicker()

draggable()

droppable()

$("img").attr("border","5px solid black")

$(document).ready(function(){

$("#but2").click(function(){

alert("Name: "+ $("#name").val());

})

$("#but1").click(function(){

$("img").addClass("styleClass");

})

$("img").click(function(){

$(this).hide();

})

$("input").on("keypress", function(){

$("p").hide();

})

$("#but3").click(function(){

$("img").fadeOut("slow");

})

$("#but4").click(function(){

$("img").fadeIn("fast");

})

$("#slide").on("click", function(){

$("#one").slideUp("slow");

})

$("#slide").on("click", function(){

$("#one").slideDown("fast");

})

</script>

<style>

.styleClass{

border: 5px solid red;

}

</style>

</body>

</html>

Basic PHP

<-- KIRTISHIL PATIL-->

<!DOCTYPE html>

<head>

<title>basic</title>

</head>

<body>

<?php

//variable declaration

echo "variable declaration";

echo "<br>";

$var1=10;

$var2=20;

echo "Add :",$var1+$var2;

echo "<br>";

//comparision op var_dump is function used for get to know about data types

echo "var_dump()";

echo "<br>";

echo "1==5 ";

echo var_dump(1==5);

echo "<br>";

//increment decrement

echo "increment decrement";

echo "<br>";

echo $var1++;

echo "<br>";

echo $var1--;

echo "<br>";

echo ++$var1;

echo "<br>";

echo --$var1;

echo "<br>";

//logical

// and (&&)

// or (||)

// xor

// not (!)

echo "logical";

echo "<br>";

$myvar =(true) and (true);

echo var_dump($myvar);

echo "<br>";

$myvar =(true) and (false);

echo var_dump($myvar);

echo "<br>";

$myvar =(false) and (true);

echo var_dump($myvar);

echo "<br>";

$myvar =(false) and (false);

echo var_dump($myvar);

echo "<br>";

//array

echo "array";

echo "<br>";

$var = array("c","cpp","ds");

echo "language $var[0],$var[1]";

echo "<br>";

echo count($var);

echo "<br>";

//associative array

// sort() - sort arrays in ascending order

// rsort() - sort arrays in descending order

// asort() - ascending order, according to the value

// ksort() - ascending order, according to the key

// arsort() - descending order, according to the value

// krsort() - descending order, according to the key

echo "associative array";

echo "<br>";

$marks = array("Kirtishil"=>90,"Sushil"=>89);

echo $marks["Kirtishil"];

echo "<br>";

//data types

echo "Data types";

echo "<br>";

$var3 = "This is string";

echo var_dump($var3);

echo "<br>";

echo "Type casting";

echo "<br>";

//type casting

// int - float

// float - double

// double - real

// real - int

// int - integer

// integer - bool

// bool - boolean

// boolean - string

// string - array

// array - object

$var3 = (array) $var3;

echo var_dump($var3);

echo "<br>";

$var3 = 12;

echo var_dump($var3);

echo "<br>";

$var3 = (float) $var3;

echo var_dump($var3);

echo "<br>";

$var3 = 12.76;

echo var_dump($var3);

echo "<br>";

$var3 = (double) $var3;

echo var_dump($var3);

echo "<br>";

$var3 = true;

echo var_dump($var3);

echo "<br>";

$var3 = (float) $var3;

echo var_dump($var3);

echo "<br>";

//constant

echo "constant";

echo "<br>";

define('K',358);

echo K;

echo "<br>";

echo var_dump(K);

echo "<br>";

This is container

<?php

echo "<br>";

//if else

$age = 23;

if($age>18)

{

echo "Adult";

}

else

{

echo "Kid";

}

//loops

$a = 0;

while($a <= 10){

echo "<br> the value of a is: ";

echo $a;

$a++;

}

echo "<br>";

// array iteration using loops

$lang = array("c","c++");

$a = 0;

while($a < count($lang)){

echo "<br> the value of lang is: ";

echo $lang[$a];

$a++;

}

echo "<br>";

//do while

$a = 200;

do {

echo "<br> the value of a is: ";

echo $a;

$a++;

} while($a < 10);

echo "<br>";

//for loop

for($a=0;$a<10;$a++){

echo $a,"<br>";

}

foreach($lang as $value){

echo $value,"<br>";

}

//associative

echo "<br>"."associative"."<br>";

$course = array("Java"=>100,"Python"=>200);

arsort($course);

foreach ($course as $cname => $price){

echo $cname." ".$price."<br>";

}

</div>

</body>

</html>

Basic Javascript

<-- KIRTISHIL PATIL -->

<!DOCTYPE html>

<head>

<title>Javascript</title>

</head>

<body>

<h1 id="hd">This is heading</h1>

<p id="par">This is paragraph</p>

// output

document.getElementById("hd").innerHTML = "added by script";

document.write("Added by js"); //should only be used for testing

alert("Alert???");

console.log(1+5);

console.warn("This is warning");

console.error("This is error");

//variables

var a=1;

let b=5;

b=10; //block level scope & reassign values

const c=20; //block level scope

//object

var obj = {

Kirtishil:23,

Sushil:21,

Buddha:24

}

console.log(obj);

// String operations

const name = 'Kirtishil';

const name2 = 'Patil';

console.log(name+name2);//concat

console.log(name.length);//length

console.log(name.toUpperCase());//big

console.log(name.toLowerCase());//small

console.log(name.substring(0,5));//start to end

console.log(name.split(''));//split into 1 char

//Arrays

const num = new Array(1,2,3,4,5);

console.log(num);

const fruits = ['apple', 'banana', 'orange'];

console.log(fruits);

fruits[3] = 'grapes';//Add

console.log(fruits);

fruits.push('mangoes');

fruits.unshift('straberries');

console.log(fruits);

fruits.pop();

console.log(fruits);

console.log(fruits.indexOf('apple'));

//loops

console.log("for Loop");

//for

for(let i=0;i<10;i++){

console.log(i);

}

console.log("while Loop");

//while

let i=0;

while(i<10){

console.log(i);

i++;

}

console.log("foreach Loop");

var arr = [1,2,3,4,5];

arr.forEach(function(element){

console.log(element);

})

</script>

</body>

</html>

All about HTML

<-- KIRTISHIL PATIL -->

<!DOCTYPE html>

<head>

<style>

table, th, td {

border: 1px solid black;

padding: 15px; /* space between the cell content and its borders */

text-align: center;

border-spacing: 5px;

/* border-collapse: collapse; borders collapse into one border */

}

</style>

</head>

<body>

<h1>Biggest</h1>

<h6>Smallest</h6>

<p>Paragraph</p>

<strong>Strong</strong>

<i>Italic</i>

<em>Emphasized</em>

<small>Small</small>

<del>Deleted</del>

<ins>Inserted</ins>

<sub>Subscript</sub>

<sup>Superscript</sup>

<br>

<marquee behavior="scroll" direction="left">Marquee</marquee>

<a href="http://www.google.com">Google</a>

<br>

<br>

<caption>Caption</caption>

<tr>

<td>First</td>

</tr>

<tr>

<th colspan="2">Colspan</th>

<td>Second</td>

</tr>

<tr>

</tr>

</table>

</ul>

</ol>

<dl>

<dt>Define term</dt>

<dd>Describe</dd>

<dt>Define term</dt>

<dd>Describe</dd>

</dl>

<div>

Block Level

</div>

<h1>This is h1 <span>Inline</span></h1>

😀

😁

😂

😃

😄

😅

😍

😎

😘

</p>

<label for="fname">First Name:</label><br>

<label for="phone">Enter your phone number:</label>

</select>

<br>

<button type="reset">reset</button>

</fieldset>

</form>

<nav>

</nav>

</body>

</html>

Coming soon...

This blog is used to help new web developers to discover new way of creating something different.

It is the easiest way for developer to get knowledge of whatever they want in a simple manner.

I hope all you guys help me to grow and manage to help you throughout our web development journey.

Let's learn together...

I'll start to upload new things ASAP...