Super User

Meter dial animated on view port.

view img:-

Html:-

</div>

css:-

.factMeterBody {

width: 48%;

margin-left: 35px;

}

.bidFactBdy {

width: 100%;

height: auto;

display: flex;

flex-wrap: wrap;

}

.factMeterBody .bidFactBdy.meterFct {

height: 100%;

}

.meterFt {

width: 440px;

height: auto;

margin-right: 20px;

margin: 0 auto;

border-bottom: 1px solid #545454;

padding-bottom: 20px;

margin-bottom: 15px;

}

.fact__meter {

max-width: 100%;

margin: 0 auto;

background: url(../../img/meter_arrow.png) no-repeat 0 0;

width: 100%;

height: 225px;

background-size: 100%;

position: relative;

background-color: #000;

}

.fact__meter .meter__arrow {

background: url(../../img/meter_arrow.png) no-repeat 0 0;

width: 172px;

height: 98px;

display: block;

position: absolute;

bottom: 0px;

left: calc(50% - 10px);

background-size: 100% 140px;

transform-origin: 12px 82px;

transition: all 1s 500ms ease;

transform: rotate(-150deg);

}

.fact__meter .meter__arrow.animate[data-meter="1"] {

transform: rotate(-8deg);

}

.fact__meter .meter__arrow.animate[data-meter="2"] {

transform: rotate(-52deg);

}

.fact__meter .meter__arrow.animate[data-meter="3"] {

transform: rotate(-103deg);

}

.fact__meter .meter__arrow.animate[data-meter="4"] {

transform: rotate(-150deg);

}

.fact__meter .meter__arrow.animate[data-meter="5"] {

transform: rotate(-150deg);

}

js:-

let meterFt = document.querySelector('.meterFt');

let mtrArrow = document.querySelector('.meter__arrow');

let observer = new IntersectionObserver(

(entries, observer) => {

entries.forEach((entry) => {

if (entry.intersectionRatio == 1) {

mtrArrow.classList.add('animate');

}

});

{ threshold: 1}

);

observer.observe(meterFt);

</script>

Supporting img :-

Custom Counter js

URL:-

https://jsfiddle.net/pawangupta18/1uqd635L/4/

Html:-

</div>

<button class="btn" id="start" onclick="start()">Start</button>

<button class="btn" id="reset" onclick="reset()">Reset</button>

</div>

Css:-

*{margin: 0px; padding: 0px; list-style: none; box-sizing: border-box;}

body{margin: 0px; padding: 0px; list-style: none; height: 100vh; background-color: #2c3e50;}

.container{ width: 1270px; margin: 0 auto; color: #d7dfe4;}

.digit{font-size: 150px; font-weight: bold;}

.text{font-size: 40px; font-weight: bold;}

#btn-container{text-align: center; margin-top: 40px;}

.btn{ padding: 7px 35px; font-size: 15px; margin: 0 10px; color: #fff; border: none; cursor: pointer;}

#time {text-align: center;}

#start{background-color: #1abc9c;}

#stop{background-color: #3498db;}

#reset{background-color: #e74c3c;}

JS:-

var hr = 0;

var min = 0;

var sec = 0;

var count = 0;

var time = false;

function start(){

time = true;

stopwatch();

}

function stop(){

time = false;

}

function reset(){

time = false;

hr = 0;

min = 0;

sec = 0;

count = 0;

document.getElementById("hr").innerHTML = "00";

document.getElementById("min").innerHTML = "00";

document.getElementById("sec").innerHTML = "00";

document.getElementById("count").innerHTML = "00";

}

function stopwatch(){

if(time == true){

count = count+1;

if(count == 100){

sec = sec+1;

count = 0;

}

if(sec == 60){

min = min+1;

sec = 0;

}

if(min == 60){

hr = hr+1;

min = 0;

sec = 0;

}

var hrstring = hr;

var minstring = min;

var secstring = sec;

var countstring = count;

if(hr < 10){

hrstring = "0" + hrstring;

}

if(min < 10){

minstring = "0" + minstring;

}

if(sec < 10){

secstring = "0" + secstring;

}

if(count < 10){

countstring = "0" + countstring;

}

document.getElementById("hr").innerHTML = hrstring;

document.getElementById("min").innerHTML = minstring;

document.getElementById("sec").innerHTML = secstring;

document.getElementById("count").innerHTML = countstring;

setTimeout ("stopwatch()", 10)

}

</script>

Custom Slider

URL:-

https://jsfiddle.net/pawangupta18/rezqs7ao/

HTML:-

<div class="container">

<div class="slider-container">

<div class="slider">

<img src="https://jssors8.azureedge.net/demos/img/gallery/980x380/002.jpg" alt="slider 1">

<div class="caption">Caption text 1</div>

</div>

<div class="slider">

<div class="caption">Caption text 2</div>

</div>

<div class="slider">

<img src="https://wowslider.com/sliders/demo-9/data/images/1293441583_nature_forest_morning_in_the_forest_015232_.jpg" alt="slider 3">

<div class="caption">Caption text 3</div>

</div>

<div class="slider">

<img src="https://mail.chamedindia.com/images/main-slider/image-3.jpg" alt="slider 4">

<div class="caption">Caption text 4</div>

</div>

<div class="slider">

<img src="https://jssors8.azureedge.net/demos/img/gallery/980x380/023.jpg" alt="slider 5">

<div class="caption">Caption text 5</div>

</div>

<span class="arrow pre" onclick="controller(-1)"> ❮</span>

<span class="arrow next" onclick="controller(1)"> ❯</span>

</div>

css:-

<style>
*{margin: 0px; padding: 0px; list-style: none; box-sizing: border-box;}

body{margin: 0px; padding: 0px; list-style: none;}

.container{ width: 1270px; margin: 0 auto;}

.slider-container{width: 100%; height: auto; position: relative; }

.slider{width: 100%; height: auto; position: relative; height: 350px; overflow: hidden;}

.slider img{width: 100%; height: auto; display: block;}

.caption{position: absolute; left: 0px; bottom: 5px; z-index: 1; margin: 0 auto; text-align: center; background-color: #fff; padding: 15px 50px; color: #000; font-weight: bold; transform: translate(-50%, -20%); left: 50%; bottom: 0%;}

.slider{display: none;}

.slider-container .arrow {position: absolute; transform: translate(-50%, -50%); top: 45%; font-size: 25px; font-weight: bold; background-color: #fff; padding: 15px; border-radius: 50%;width: 45px;height: 45px;text-align: center;line-height: 15px;cursor: pointer;}

.slider-container .arrow.pre {left: 26px;}

.slider-container .arrow.next {right: -22px;}

.slider{display: none;}

</style>

js:-

<script>

let flag = 1;

function sliderShow(num){

let sliders = document.querySelectorAll(".slider");

if(num == sliders.length ){

flag = 0;

num = 0;

}

if(num < 0){

flag = sliders.length-1;

num = sliders.length-1;

}

for(let y of sliders){

y.style.display = "none";

}

sliders[num].style.display = "block";

};

sliderShow(flag);

function controller(x){

flag = flag + x;

sliderShow(flag);

}

</script>

World and Character Count js

live url:-

https://jsfiddle.net/pawangupta18/9hLzv0x1/2/

HTML:-

<div class="container">

<div class="worldCon">

<h2>World and Charactor Count</h2>

<div class="inpuArea"> <textarea rows="10" id="textbox"></textarea></div>

<div class="footerArea">

<div class="alinitem">Characters <span id="char">0</span></div>

<div class="alinitem">world Count <span id="word">0</span></div>

</div>

css:-

*{margin: 0px; padding: 0px; list-style: none;}

body{margin: 0px; padding: 0px; list-style: none;}

.container{width: 1170px; margin: 0 auto;}

.worldCon{width: 700px; margin: 0 auto; display: flex; flex-wrap: wrap;}

.worldCon h2 {

background-color: #1aabe3;

width: 100%;

height: auto;

text-align: center;

padding: 10px;

color: #fff;

}

.inpuArea{width: 100%; height: auto; text-align: center; padding: 20px}

.inpuArea textarea{width: 100%; height: auto;}

.footerArea{width: 100%; height: auto; display: flex;

flex-wrap: wrap; justify-content: space-between; padding: 15px;

background-color: #e1f7ff;}

.footerArea .alinitem{width:calc(50% - 10px); text-align: center;}

Js:-

<script type="text/javascript">

let textbox = document.querySelector("#textbox");

let cCount = document.querySelector("#char");

let wWord = document.querySelector("#word");

textbox.addEventListener("input", function(){

var text = this.value;

//console.log(text);

let charlenth = text.length;

cCount.innerHTML = charlenth;

text = text.trim();

let worDSplit = text.split(" ");

console.log(worDSplit);

let clineList = worDSplit.filter(function(el){

return el != "";

});

// console.log(clineList);

wWord.innerHTML = clineList.length;

});

</script>

ForEach loop in java script

HTML:-

<div class="row">

<div class="wrapContainer">

<div class="music_des">

<figure>

<a href=""><img src="" alt=""></a>

</figure>

<div class="contentPart">

<h3><a href="#">What is Lorem Ipsum? What is Lorem Ipsum? What is Lorem Ipsum? What is Lorem Ipsum? What is Lorem Ipsum?</a>

</h3>

<p class="listtxt">

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but al

<span class="plusSvg">

<style type="text/css">

</style>

<g>

<path class="" d="M5.47,38.1H0V11.9h5.47v1.77h-3.3v22.64h3.3V38.1z"></path>

<path class="" d="M32,25.35h-6.01v6h-1.98v-6h-6v-1.99h6v-6h1.98v6H32V25.35z"></path>

<path class="" d="M50,38.1h-5.46v-1.77h3.29V13.67h-3.29v-1.77H50V38.1z"></path>

</g>

</svg>

</span>

<span class="lodHiddenText">

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

<style type="text/css">

</style>

<g class="st0">

<path class="" d="M6.62,40.83H0V9.17h6.62v2.14H2.63v27.38h3.99V40.83z"></path>

<path class="" d="M30.03,25.86h-9.82v-2.32h9.82V25.86z"></path>

<path class="" d="M50,40.83h-6.6v-2.14h3.98V11.31H43.4V9.17H50V40.83z"></path>

</g>

</svg>

</span>

</p>

</div>

<div class="wrapContainer">

<div class="music_des">

<figure>

<a href=""><img src="" alt=""></a>

</figure>

<div class="contentPart">

<h3><a href="#">What is Lorem Ipsum? What is Lorem Ipsum? What is Lorem Ipsum? What is Lorem Ipsum? What is Lorem Ipsum?</a>

</h3>

<p class="listtxt">

<span class="plusSvg">

<style type="text/css">

</style>

<g>

<path class="" d="M5.47,38.1H0V11.9h5.47v1.77h-3.3v22.64h3.3V38.1z"></path>

<path class="" d="M32,25.35h-6.01v6h-1.98v-6h-6v-1.99h6v-6h1.98v6H32V25.35z"></path>

<path class="" d="M50,38.1h-5.46v-1.77h3.29V13.67h-3.29v-1.77H50V38.1z"></path>

</g>

</svg>

</span>

<span class="lodHiddenText">

<style type="text/css">

</style>

<g class="st0">

<path class="" d="M6.62,40.83H0V9.17h6.62v2.14H2.63v27.38h3.99V40.83z"></path>

<path class="" d="M30.03,25.86h-9.82v-2.32h9.82V25.86z"></path>

<path class="" d="M50,40.83h-6.6v-2.14h3.98V11.31H43.4V9.17H50V40.83z"></path>

</g>

</svg>

</span>

</p>

</div>

css:-

html {

font-size: 20px;

}

*::before,

*::after {

box-sizing: border-box;

padding: 0px;

margin: 0px;

}

body {

font-family: 'Open Sans', sans-serif;

background-color: #fff;

font-size: 20px;

line-height: 26px;

font-weight: 400;

}

.wrapContainer {

width: 100%;

height: auto;

}

.border_cell {

border-top: 1px solid #c5c5c5;

}

.border_cell.play {

background: #ee3523;

}

.music_des {

display: flex;

padding: 17px 20px;

flex-wrap: wrap;

border-bottom: 1px solid #c3c3c3;

}

.contentPart {

width: calc(100% - 80px);

height: auto;

}

figure,

figure img {

max-width: 100%;

display: block;

}

.music_des figure {

margin: 0 20px 0 0;

width: 60px;

height: 60px;

background-color: royalblue;

border-radius: 4px;

}

.music_des figure a {

margin: 0 20px 0 0;

width: 60px;

height: 60px;

}

.music_des figure a img {

width: 100%;

height: auto;

display: block;

}

.music_des h3 {

font-size: 15px;

font-weight: 500;

color: #000;

line-height: 20px;

font-family: 'Montserrat', sans-serif;

margin: 0;

width: calc(100% - 80px);

}

.music_des h3 a {

font-size: 15px;

font-weight: 500;

color: #EE3223;

line-height: 20px;

font-family: 'Montserrat', sans-serif;

margin: 0;

text-decoration: none;

}

.border_cell.play h3 a {

color: #fff;

}

.music_des p {

font-size: 15px;

font-weight: 500;

color: #000;

line-height: 20px;

word-wrap: break-word;

}

.plusSvg {

position: relative;

top: 6px;

cursor: pointer;

}

.lodHiddenText {

display: none;

}

.lodHiddenText svg.minus {

top: 11px;

position: relative;

cursor: pointer;

}

.minSvg {

cursor: pointer;

}

Js:-

const plusSvg = document.querySelectorAll(".plusSvg");

const minSvg = document.querySelectorAll(".minSvg");

const lodHiddenText = document.querySelectorAll(".lodHiddenText");

plusSvg.forEach(function(el){

el.addEventListener("click", function(){

//console.log(el.nextElementSibling)

el.nextElementSibling.style.display="inline";

//console.log(el);

el.style.display="none";

});

minSvg.forEach(function(pk){

pk.addEventListener("click", function(){

// el.previousElement.display = "none"

// console.log(el.parentElement);

pk.parentElement.style.display="none";

// console.log(el.parentElement.previousElementSibling);

pk.parentElement.previousElementSibling.style.display="inline-block";

});

</script>

If or If else and else condition in javascript

HTML:-

Js:-

const per = 80;

if(per >= 80 && per <= 100){

document.write("You are in marit");

}else if( per >= 60 && per < 80){

document.write("You are in First Division");

}else if(per >= 45 && per < 60){

document.write("You are in 2nd Division");

}else if(per >= 33 && per < 45){

document.write("You are in 3rd Division");

}else if(per < 33){

document.write("You are Fail");

}else{

document.write("Please Enter Vaild Percentage");

}

</script>

DOM Traversing in Javascript.

HTML:-

<div class="container">

<h1 id="heading"> Welcome to Code With Harry</h1>

<div id="myfirst" class="child red good" id="first">

<ul>

<li class="childul">this</li>

<li class="childul">is</li>

<li class="childul">a</li>

<li class="childul">list </li>

<li class="childul">of my dreams</li>

</ul>

</div>

<div class="mycon">

<ul>

<li>home </li>

<li>About </li>

<li>Services </li>

<li>Services 1</li>

<li>Blog </li>

<li>Contect Us </li>

</ul>

</div>

Js:-

<script type="text/javascript">

console.log("This is Java Scripts Traversion")

const containerR = document.querySelector(".container");

console.log(containerR.children[1].children[0].children[4]);

//or

console.log(containerR.children[2].children[0].children[3].nextElementSibling)

const myFirst = document.querySelector("#myfirst");

console.log(myFirst.children[0].children[2]);

</script>

Create element in JavaScript, Replace Element in JavaScript , and Replace Element with Child Node in JavaScript

HTML:-

<h1 id="heading"> Welcome to Code With My Code</h1>

<div id="myfirst" class="" id="first">child 1

<li class="childul">About</li>

<li class="childul">Service</li>

<li class="childul">Prodcut </li>

<li class="childul" id="lastChildId">Contect Us</li>

</ul>

</div>

CSS:-

--no--

js:-

<script type="text/javascript">

console.log("This is Create Remove and Replacing Element")

//Crete element in javaScript

const elem = document.createElement("li");

elem.className = "classNamePa";

elem.id = "idCreate";

elem.setAttribute("tital", "li Create by pawan");

elem.innerHTML = "<b> this is li create by pawan </b>";

console.log(elem);

const uls = document.querySelector("ul.this");

uls.appendChild(elem);

console.log(uls)

//Replace Element

const elem2 = document.createElement("h3");

elem2.id = "elem2";

elem2.className = "elem2";

elem2.setAttribute("tital", "set Attribute Tital")

let tnode = document.createTextNode("this is the create node");

elem2.appendChild(tnode);

//console.log(elem2);

elem.replaceWith(elem2);

//replace element with child node

let myuL = document.querySelector("#myul");

myuL.replaceChild(elem, document.querySelector("#fistChidId"))

console.log(myuL);

</script>

Super User

Meter dial animated on view port.

Custom Counter js

Custom Slider

World and Character Count js

ForEach loop in java script

If or If else and else condition in javascript

DOM Traversing in Javascript.

Create element in JavaScript, Replace Element in JavaScript , and Replace Element with Child Node in JavaScript

Shabina Khan

Indra The Tiger

anuj dahiya jaat

Offers on Amazon

Buy Here

Popular Posts

Facebook

Social Widget