React Tutorial : Basic Form of React Code

Basic Form of React. import React, { useState } from ‘react’; // JS // const input = document.getElementById(‘myText’); // const inputValue = input.value // React // value, onChange const ControlledInputs = () => { const handleSubmit = (e) => { e.preventDefault(); console.log(‘Hello World…’); } return <> <article> <form className=”form”> <div className=”form-control”> <label htmlFor=”firstName”> Name : […]

React: Create Simple Counter Use Function, Inline CSS and Call function in React

React: Create Simple Counter Use Function, Inline CSS and Call function in React   import React, { useState } from ‘react’; const UseStateCounter = () => { const [value, setValue] = useState(0); const reset = () => { setValue(0); } return <> <section style={{ margin : ‘4rem 0’}}> <h2>Regular Counter</h2> <h1>{value}</h1> <button className=”btn” onClick={() => […]

Responsive with SASS Mixin use breakpoint on if condition

Responsive with SASS Mixin use breakpoint on if the condition SCSS Code _mixins.scss code @mixin response($breakpoint) { @if($breakpoint == xl){ @media(max-width: 1200px){ @content; } } @if($breakpoint == lg){ @media(max-width: 1000px){ @content; } } @if($breakpoint == md){ @media(max-width: 768px){ @content; } } } Use mixin in other SCSS files .first-nav{ grid-column: 7 / 10; grid-row: 1 […]

@each Loop with Index SASS Code

SCSS Code $socialMediaColors : 1 #3b5998, 2 #b31217, 3 #dc4e41, 4 #55acee, 5 #517fa4, 6 #0077b5; @each $color in $socialMediaColors { .social-icons-item:nth-child(#{nth($color, 1)}) .social-icons-link{ color: nth($color, 2); border: .1rem solid nth($color, 2); } } HTML Code <ul class=”social-icons”> <li class=”social-icons-item”> <a href=”#” class=”social-icons-link”> <i class=”fab fa-facebook”></i> </a> </li> <li class=”social-icons-item”> <a href=”#” class=”social-icons-link”> <i class=”fab […]

How to Check domain, URL or link does not has http or https and end with slash

Check a link start with HTTP or HTTPS How to check a link not start with http:// or https:// below code helps to add and find link does has it or not. if(pageUrl.indexOf(“http://”) == 0 || pageUrl.indexOf(“https://”) == 0 ){ pageUrl = pageUrl; }else{ pageUrl = “http://” + pageUrl; } add a slash and check […]

Create First React Component

import React from ‘react’; import ReactDom from ‘react-dom’; function Greeting(){ return( <div> <h4> this is john and this is my first componenet; </h4> </div> ); } ReactDom.render(<Greeting />, document.getElementById(‘root’)); Create element by React.createElement.   import React from ‘react’; import ReactDom from ‘react-dom’; const Great = () => { return React.createElement(‘h1’,{}, ‘Hello this element create by […]

how to remove increase and decrease number arrow when use input type number in form

Remove arrow when using input number. Facing problem with increase and decrease number arrow when using input type number in form or Ajax request fields. Use Below CSS Code input[type=”number”]::-webkit-outer-spin-button, input[type=”number”]::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; } Explain in the example below with the CodePen link. Full Code Below HTML <div class=”container”> <h2>Verify Your Account</h2> […]

JavaScript Operator and &&, or || define with logical condition

JavaScript Operator && (AND), ||(OR). They perform some operations on single or multiple values and provide results. and like that double pipes represent the logical OR operator. Logical AND Operator Double ampersand to represent the logical AND operator true && true; // true true && false; // false false && true; // false false && […]

How to get value store in cookie in browser by use simply jQuery

Get Value store Cookie into Chrome or other Web Browser with JQuery Easily. Below the code, describe how to store a specified cookie value into a variable and use it for further use. Cookie ‘_ga’ store in web browsers such as Chrome or Firefox, with using the jQuery get the value of cookie and store […]

How to wrapping text in a pre Tag with CSS code

How to Wrapping code in a <pre> tag with CSS The HTML pre tag is used to insert preformatted text into HTML files and documents. Its used to display code blocks with using present lines breaks, characters and spaces. HTML <pre> tag not allow to support text wrap, by default. If using <pre> tag in […]