css Archives - Codeplaners https://codeplaners.com/tag/css/ Code Solution Wed, 01 Jan 2025 06:37:13 +0000 en-US hourly 1 https://wordpress.org/?v=6.1.7 https://codeplaners.com/wp-content/uploads/2020/09/cropped-favicon-social-32x32.png css Archives - Codeplaners https://codeplaners.com/tag/css/ 32 32 Attribute Types of ol and ul https://codeplaners.com/attribute-types-of-ol-and-ul/ https://codeplaners.com/attribute-types-of-ol-and-ul/#respond Sun, 29 Dec 2024 04:47:04 +0000 https://codeplaners.com/?p=1692 This post was last updated on January 1st, 2025 at 06:37 amHi Dev, Today in this article we will understand how many attribute types of ol and ul are there in HTML and how to use them. Let’s discuss the attribute types of ol and ul. So let’s follow few step to create example of … Continue reading "Attribute Types of ol and ul"

The post Attribute Types of ol and ul appeared first on Codeplaners.

]]> This post was last updated on January 1st, 2025 at 06:37 am

Hi Dev,

Today in this article we will understand how many attribute types of ol and ul are there in HTML and how to use them. Let’s discuss the attribute types of ol and ul.

So let’s follow few step to create example of attribute types of ol and ul.

ul type Attribute

<ul type="disc">
<ul type="circle">
<ul type="square">

Example ul type attribute: 

<!DOCTYPE html>
<html>

<head>
   <title>HTML ul type attribute</title>
</head>

<body>
   <h1>codeplaners</h1>

   <h2>HTML ul type attribute</h2>

   <ul type="disc">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ul>

   <ul type="circle">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ul>

   <ul type="square">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ul>
</body>

</html>

Preview:-
HTML ul type attribute

ol type Attribute

<ol type="1">
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">

Example ol type attribute: 

<!DOCTYPE html>
<html>

<head>
   <title>HTML ol type attribute</title>
</head>

<body>
   <h1>codeplaners</h1>

   <h2>HTML ol type attribute</h2>

   <ol type="1">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ol>

   <ol type="a">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ol>

   <ol type="A">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ol>
<ol type="i">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ol>
<ol type="I">
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
      <li>Lorem Text</li>
   </ol>


</body>

</html>

Preview:-
HTML ul type attribute

I hope it will assist you…

The post Attribute Types of ol and ul appeared first on Codeplaners.

]]> https://codeplaners.com/attribute-types-of-ol-and-ul/feed/ 0 Social Media Icon With pop-up Effect Example https://codeplaners.com/social-media-icon-with-pop-up-effect-example/ https://codeplaners.com/social-media-icon-with-pop-up-effect-example/#respond Sat, 25 Mar 2023 08:53:15 +0000 https://codeplaners.com/?p=1475 This post was last updated on May 13th, 2023 at 01:16 amHi Dev, Today, i will show you social media icon with pop-up effect example. This article will give you simple example of social media icon with pop-up effect example. you will social media icon with pop-up effect example. In this article, we will implement … Continue reading "Social Media Icon With pop-up Effect Example"

The post Social Media Icon With pop-up Effect Example appeared first on Codeplaners.

]]> This post was last updated on May 13th, 2023 at 01:16 am

Hi Dev,

Today, i will show you social media icon with pop-up effect example. This article will give you simple example of social media icon with pop-up effect example. you will social media icon with pop-up effect example. In this article, we will implement a social media icon with pop-up effect example.

So, let’s follow few steps to create example of social media icon with pop-up effect example.

Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>social media icon with pop-up effect example - codeplaners</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <style>
        /*
    Auther: Abdelrhman Said
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

*:focus,
*:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  display: grid;
  height: 100%;
  width: 100%;
  font-family: "Poppins", sans-serif;
  place-items: center;
  background: linear-gradient(315deg, #ffffff, #d7e1ec);
}

.wrapper {
  display: inline-flex;
  list-style: none;
}

.wrapper .icon {
  position: relative;
  background: #ffffff;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877f2;
  color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1da1f2;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #e4405f;
  color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background: #333333;
  color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background: #cd201f;
  color: #ffffff;
}

    </style>
</head>
<body>
   


    <ul class="wrapper">
        <li class="icon facebook">
          <span class="tooltip">Facebook</span>
          <span><i class="fa fa-facebook"></i></span>
        </li>
        <li class="icon twitter">
          <span class="tooltip">Twitter</span>
          <span><i class="fa fa-twitter"></i></span>
        </li>
        <li class="icon instagram">
          <span class="tooltip">Instagram</span>
          <span><i class="fa fa-instagram"></i></span>
        </li>
        <li class="icon github">
          <span class="tooltip">Github</span>
          <span><i class="fa fa-github"></i></span>
        </li>
        <li class="icon youtube">
          <span class="tooltip">Youtube</span>
          <span><i class="fa fa-youtube"></i></span>
        </li>
      </ul>
    
</body>
</html>

I hope it will assist you…

The post Social Media Icon With pop-up Effect Example appeared first on Codeplaners.

]]> https://codeplaners.com/social-media-icon-with-pop-up-effect-example/feed/ 0 Login Form CSS and Html Example https://codeplaners.com/login-form-css-and-html-example/ https://codeplaners.com/login-form-css-and-html-example/#respond Fri, 24 Mar 2023 09:30:36 +0000 https://codeplaners.com/?p=1468 Hi Dev, Today, i we will show you Login Form CSS and Html example. This article will give you simple example of Login Form CSS and Html example. you will Login Form CSS and Html example. In this article, we will implement a Login Form CSS and Html example. So, let’s follow few steps to … Continue reading "Login Form CSS and Html Example"

The post Login Form CSS and Html Example appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you Login Form CSS and Html example. This article will give you simple example of Login Form CSS and Html example. you will Login Form CSS and Html example. In this article, we will implement a Login Form CSS and Html example.

So, let’s follow few steps to create example of Login Form CSS and Html example.

Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form CSS and Html example - codeplaners</title>
<style>
    html {
  height: 100%;
}
body {
  margin:0;
  padding:0;
  font-family: sans-serif;
  background: linear-gradient(#141e30, #243b55);
}

.login-box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 400px;
  padding: 40px;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,.5);
  box-sizing: border-box;
  box-shadow: 0 15px 25px rgba(0,0,0,.6);
  border-radius: 10px;
}

.login-box h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
}

.login-box .user-box {
  position: relative;
}

.login-box .user-box input {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  margin-bottom: 30px;
  border: none;
  border-bottom: 1px solid #fff;
  outline: none;
  background: transparent;
}
.login-box .user-box label {
  position: absolute;
  top:0;
  left: 0;
  padding: 10px 0;
  font-size: 16px;
  color: #fff;
  pointer-events: none;
  transition: .5s;
}

.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label {
  top: -20px;
  left: 0;
  color: #f49003;
  font-size: 12px;
}

.login-box form a {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  color: #f49003;
  font-size: 16px;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  transition: .5s;
  margin-top: 40px;
  letter-spacing: 4px
}

.login-box a:hover {
  background: #f49003;
  color: #fff;
  border-radius: 5px;
  box-shadow: 0 0 5px #f49003,
              0 0 25px #f49003,
              0 0 50px #f49003,
              0 0 100px #f49003;
}

.login-box a span {
  position: absolute;
  display: block;
}

.login-box a span:nth-child(1) {
  top: 0;
  left: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, transparent, #f49003);
  animation: btn-anim1 1s linear infinite;
}

@keyframes btn-anim1 {
  0% {
    left: -100%;
  }
  50%,100% {
    left: 100%;
  }
}

.login-box a span:nth-child(2) {
  top: -100%;
  right: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, transparent, #f49003);
  animation: btn-anim2 1s linear infinite;
  animation-delay: .25s
}

@keyframes btn-anim2 {
  0% {
    top: -100%;
  }
  50%,100% {
    top: 100%;
  }
}

.login-box a span:nth-child(3) {
  bottom: 0;
  right: -100%;
  width: 100%;
  height: 2px;
  background: linear-gradient(270deg, transparent, #f49003);
  animation: btn-anim3 1s linear infinite;
  animation-delay: .5s
}

@keyframes btn-anim3 {
  0% {
    right: -100%;
  }
  50%,100% {
    right: 100%;
  }
}

.login-box a span:nth-child(4) {
  bottom: -100%;
  left: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(360deg, transparent, #f49003);
  animation: btn-anim4 1s linear infinite;
  animation-delay: .75s
}

@keyframes btn-anim4 {
  0% {
    bottom: -100%;
  }
  50%,100% {
    bottom: 100%;
  }
}

</style>
</head>

<body>
    <div class="login-box">
  <h2>Login</h2>
  <form>
    <div class="user-box">
      <input type="text" name="" required="">
      <label>Username</label>
    </div>
    <div class="user-box">
      <input type="password" name="" required="">
      <label>Password</label>
    </div>
    <a href="#">
      <span></span>
      <span></span>
      <span></span>
      <span></span>
      Submit
    </a>
  </form>
</div>
</body>
</html>

I hope it will assist you…

The post Login Form CSS and Html Example appeared first on Codeplaners.

]]> https://codeplaners.com/login-form-css-and-html-example/feed/ 0 Clock In Javascript Example https://codeplaners.com/clock-in-javascript-example/ https://codeplaners.com/clock-in-javascript-example/#respond Fri, 24 Mar 2023 09:17:15 +0000 https://codeplaners.com/?p=1465 Hi Dev, Today, i we will show you Clock In Javascript Example. This article will give you simple example of Clock In Javascript Example. you will Clock In Javascript Example. In this article, we will implement a Clock In Javascript Example. So, let’s follow few steps to create example of Clock In Javascript Example. Example … Continue reading "Clock In Javascript Example"

The post Clock In Javascript Example appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you Clock In Javascript Example. This article will give you simple example of Clock In Javascript Example. you will Clock In Javascript Example. In this article, we will implement a Clock In Javascript Example.

So, let’s follow few steps to create example of Clock In Javascript Example.

Example

index.html

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Clock In Javascript Example - codeplaners</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=DM+Sans&amp;display=swap'>
 <style>
    * {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),10%,10%);
	--primary: hsl(var(--hue),90%,55%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (20 - 16) * (100vw - 320px) / (1280 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	font: 1em/1.5 "DM Sans", sans-serif;
	height: 100vh;
	display: grid;
	place-items: center;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}

.clock {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
}
.clock__block {
	background-color: hsl(var(--hue),10%,90%);
	border-radius: 0.5rem;
	box-shadow: 0 1rem 2rem hsla(var(--hue),90%,50%,0.3);
	font-size: 3em;
	line-height: 2;
	margin: 0.75rem;
	overflow: hidden;
	text-align: center;
	width: 6rem;
	height: 6rem;
	transition:
		background-color var(--trans-dur),
		box-shadow var(--trans-dur);
}
.clock__block--small {
	border-radius: 0.25rem;
	box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,50%,0.3);
	font-size: 1em;
	line-height: 3;
	width: 3rem;
	height: 3rem;
}
.clock__colon {
	display: none;
	font-size: 2em;
	opacity: 0.5;
	position: relative;
}
.clock__colon:before,
.clock__colon:after {
	background-color: currentColor;
	border-radius: 50%;
	content: "";
	display: block;
	position: absolute;
	top: -0.05em;
	left: -0.05em;
	width: 0.1em;
	height: 0.1em;
	transition: background-color var(--trans-dur);
}
.clock__colon:before {
	transform: translateY(-200%);
}
.clock__colon:after {
	transform: translateY(200%);	
}
.clock__digit-group {
	display: flex;
	flex-direction: column-reverse;
}
.clock__digits {
	width: 100%;
	height: 100%;
}
.clock__block--bounce {
	animation: bounce 0.75s; 
}
.clock__block--bounce .clock__digit-group {
	animation: roll 0.75s ease-in-out forwards; 
	transform: translateY(-50%);
}
.clock__block--delay1,
.clock__block--delay1 .clock__digit-group {
	animation-delay: 0.1s;
}
.clock__block--delay2,
.clock__block--delay2 .clock__digit-group {
	animation-delay: 0.2s;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),10%,10%);
		--fg: hsl(var(--hue),10%,90%);
	}
	.clock__block {
		background-color: hsl(var(--hue),90%,40%);
		box-shadow: 0 1rem 2rem hsla(var(--hue),90%,60%,0.4);
	}
	.clock__block--small {
		box-shadow: 0 0.5rem 2rem hsla(var(--hue),90%,60%,0.4);
	}
}

/* Beyond mobile */
@media (min-width: 768px) {
	.clock {
		flex-direction: row;
	}
	.clock__colon {
		display: inherit;
	}
}

/* Animations */
@keyframes bounce {
	from,
	to {
		animation-timing-function: ease-in;
		transform: translateY(0);
	}
	50% {
		animation-timing-function: ease-out;
		transform: translateY(15%);
	}
}
@keyframes roll {
	from {
		transform: translateY(-50%);
	}
	to {
		transform: translateY(0);
	}
}
 </style>

</head>
<body>
<!-- partial:index.partial.html -->
<div class="clock" aria-label="00:00:00 AM">
	<div class="clock__block clock__block--delay2" aria-hidden="true" data-time-group>
		<div class="clock__digit-group">
			<div class="clock__digits" data-time="a">00</div>
			<div class="clock__digits" data-time="b">00</div>
		</div>
	</div>
	<div class="clock__colon"></div>
	<div class="clock__block clock__block--delay1" aria-hidden="true" data-time-group>
		<div class="clock__digit-group">
			<div class="clock__digits" data-time="a">00</div>
			<div class="clock__digits" data-time="b">00</div>
		</div>
	</div>
	<div class="clock__colon"></div>
	<div class="clock__block" aria-hidden="true" data-time-group>
		<div class="clock__digit-group">
			<div class="clock__digits" data-time="a">00</div>
			<div class="clock__digits" data-time="b">00</div>
		</div>
	</div>
	<div class="clock__block clock__block--delay2 clock__block--small" aria-hidden="true" data-time-group>
		<div class="clock__digit-group">
			<div class="clock__digits" data-time="a">PM</div>
			<div class="clock__digits" data-time="b">AM</div>
		</div>
	</div>
</div>
<!-- partial -->
 <script>
    window.addEventListener("DOMContentLoaded",() => {
	const clock = new BouncyBlockClock(".clock");
});

class BouncyBlockClock {
	constructor(qs) {
		this.el = document.querySelector(qs);
		this.time = { a: [], b: [] };
		this.rollClass = "clock__block--bounce";
		this.digitsTimeout = null;
		this.rollTimeout = null;
		this.mod = 0 * 60 * 1000;

		this.loop();
	}
	animateDigits() {
		const groups = this.el.querySelectorAll("[data-time-group]");

		Array.from(groups).forEach((group,i) => {
			const { a, b } = this.time;

			if (a[i] !== b[i]) group.classList.add(this.rollClass);
		});

		clearTimeout(this.rollTimeout);
		this.rollTimeout = setTimeout(this.removeAnimations.bind(this),900);
	}
	displayTime() {
		// screen reader time
		const timeDigits = [...this.time.b];
		const ap = timeDigits.pop();

		this.el.ariaLabel = `${timeDigits.join(":")} ${ap}`;

		// displayed time
		Object.keys(this.time).forEach(letter => {
			const letterEls = this.el.querySelectorAll(`[data-time="${letter}"]`);

			Array.from(letterEls).forEach((el,i) => {
				el.textContent = this.time[letter][i];
			});
		});
	}
	loop() {
		this.updateTime();
		this.displayTime();
		this.animateDigits();
		this.tick();
	}
	removeAnimations() {
		const groups = this.el.querySelectorAll("[data-time-group]");
	
		Array.from(groups).forEach(group => {
			group.classList.remove(this.rollClass);
		});
	}
	tick() {
		clearTimeout(this.digitsTimeout);
		this.digitsTimeout = setTimeout(this.loop.bind(this),1e3);	
	}
	updateTime() {
		const rawDate = new Date();
		const date = new Date(Math.ceil(rawDate.getTime() / 1e3) * 1e3 + this.mod);
		let h = date.getHours();
		const m = date.getMinutes();
		const s = date.getSeconds();
		const ap = h < 12 ? "AM" : "PM";

		if (h === 0) h = 12;
		if (h > 12) h -= 12;

		this.time.a = [...this.time.b];
		this.time.b = [
			(h < 10 ? `0${h}` : `${h}`),
			(m < 10 ? `0${m}` : `${m}`),
			(s < 10 ? `0${s}` : `${s}`),
			ap
		];

		if (!this.time.a.length) this.time.a = [...this.time.b];
	}
}
 </script>

</body>
</html>

I hope it will assist you…

The post Clock In Javascript Example appeared first on Codeplaners.

]]> https://codeplaners.com/clock-in-javascript-example/feed/ 0 How to create JavaScript Quiz Example https://codeplaners.com/how-to-create-javascript-quiz-example/ https://codeplaners.com/how-to-create-javascript-quiz-example/#respond Fri, 10 Feb 2023 03:40:06 +0000 https://codeplaners.com/?p=1459 Hi Dev, Today, i we will show you How to create JavaScript Quiz Example. This article will give you simple example of How to create JavaScript Quiz Example. you will How to create JavaScript Quiz Example. In this article, we will implement a How to create JavaScript Quiz Example. So, let’s follow few steps to … Continue reading "How to create JavaScript Quiz Example"

The post How to create JavaScript Quiz Example appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you How to create JavaScript Quiz Example. This article will give you simple example of How to create JavaScript Quiz Example. you will How to create JavaScript Quiz Example. In this article, we will implement a How to create JavaScript Quiz Example.

So, let’s follow few steps to create example of How to create JavaScript Quiz Example.

Example

index.html

<!DOCTYPE html>
<html>
<head>
	<title>Codeplaners Quiz</title>
<link rel="stylesheet" type="text/css" href="style.css">

</head>
<body>
	<div class="wrapper">
           <div class="question" id="questionBox">
           	
           </div>
           
           <div class="options">
           	  <ul id="ul">
           	  	  <li id="op1" onclick="button(this)"></li>
           	  	  <li id="op2" onclick="button(this)"></li>
           	  	  <li id="op3" onclick="button(this)"></li>
           	  	  <li id="op4" onclick="button(this)"></li>
           	  </ul>
           </div>
           <div class="score">
           	   <div class="next">
           	   	  <button type="button" onclick="next()" id="button">Next</button>
           	   </div>
           	   <div class="score-card">
           	   	  Score : <span id="scoreCard">0</span>
           	   </div>
               <div class="back">
                  <button type="button" onclick="back()" id="button">Back</button>
               </div>
                <div class="restart">
                  <button type="button" onclick="restart()" id="button">Restart</button>
               </div>
           </div>


	</div>
<script type="text/javascript">
  function restart(){
    location.reload();
  }
</script>


<script type="text/javascript">
     
   var ul=document.getElementById('ul');
   var btn=document.getElementById('button');
   var scoreCard=document.getElementById('scoreCard');
   var quizBox=document.getElementById('questionBox');
  var op1=document.getElementById('op1');
  var op2=document.getElementById('op2');
  var op3=document.getElementById('op3');
  var op4=document.getElementById('op4');

  

      var app={
                questions:[
                          {q:'What does the abbreviation HTML stand for?', options:['Hyper Text Markup Language','High Text Markup Language','Hyper Tabular Markup Language','None of these'],answer:1},
                          {q:'Correct HTML tag for the largest heading is ?',options:['h4','h1','h8','h9'],answer:2},

                          {q:'How many sizes of headers are available in HTML by default?',options:['5','1','3','6'],answer:4},

                          {q:'What is the smallest header in HTML by default?',options:['h1','h6','h3','h4'],answer:2},

                          {q:'How do you select an element with id "demo"?', options:['*demo','#demo','demo','.demo'],answer:2},
                         
                          ],
                index:0,
                load:function(){
                     if(this.index<=this.questions.length-1){
                        quizBox.innerHTML=this.index+1+". "+this.questions[this.index].q;      
                        op1.innerHTML=this.questions[this.index].options[0];
                        op2.innerHTML=this.questions[this.index].options[1];
                        op3.innerHTML=this.questions[this.index].options[2];
                        op4.innerHTML=this.questions[this.index].options[3];
                           this.scoreCard();
                        }
                        else{

                        quizBox.innerHTML="Quiz Over......!!!"      
                        op1.style.display="none";
                        op2.style.display="none";
                        op3.style.display="none";
                        op4.style.display="none";
                        btn.style.display="none";
                        }
                },
                 next:function(){
                    this.index++;
                    this.load();
                 },

                  back:function(){
                    this.index--;
                    this.load();
                 },
                check:function(ele){
                   
                         var id=ele.id.split('');
                         
                         if(id[id.length-1]==this.questions[this.index].answer){
                          this.score++;
                          ele.className="correct";
                          ele.innerHTML="Correct";
                          this.scoreCard();
                         }
                         else{
                          ele.className="wrong";
                          ele.innerHTML="Wrong";
                         }
                },
                notClickAble:function(){
                       for(let i=0;i<ul.children.length;i++){
                            ul.children[i].style.pointerEvents="none";
                       }
                },

                clickAble:function(){
                       for(let i=0;i<ul.children.length;i++){
                            ul.children[i].style.pointerEvents="auto";
                            ul.children[i].className=''

                       }
                },
                score:0,
                scoreCard:function(){
                  scoreCard.innerHTML=this.questions.length+"/"+this.score;
                }
 
           }


           window.onload=app.load();

           function button(ele){
                 app.check(ele);
                 app.notClickAble();
           }

         function  next(){
              app.next();
              app.clickAble();
         } 

             function  back(){
              app.back();
              app.clickAble();
         } 

</script>
</body>
</html>

style.css

 body{
  background-color: #fff;
  margin:0;
  padding:0;
}
*{
  box-sizing: border-box;
  font-family: sans-serif;
}

.wrapper{
  height: 450px;
  width: 650px;
  background-color: white;
  margin:50px auto;
  border-radius: 8px;
  margin-top: 150px;

}

.wrapper .question{
  padding: 15px;
  background-color:#673ab7;
  border-radius: 8px;
  color:#ffffff;
  font-size:20px;
  float: left;
  width: 100%;

}
.wrapper .options{
  float: left;
  width: 100%;
}

.wrapper .options ul{
  list-style: none;
  padding: 0px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.wrapper .options ul li{
  display: inline-block;
  background-color:#000;
  width: 47%;
  padding: 15px;
  border-radius:8px;
  margin-top: 25px;
  font-size: 15px;
  color:#ffffff;
  box-shadow: 0px 3px 0px grey;
  cursor: pointer;
  outline: none;
  text-align: center;
}
.wrapper .options ul li:active{
  box-shadow: 0px 3px 0px transparent;  

}
.wrapper .options ul li.correct{
  background-color: #0fd40f;
  box-shadow: 0px 3px 0px #03a503;
}

.wrapper .options ul li.wrong{
  background-color: #e91e1e;
  box-shadow: 0px 3px 0px #cb0b0b;
}

.wrapper .score{
  float: left;
  width: 100%;
  padding:25px 0px;
}

.wrapper .score .next{
  width: 35%;
  float: right;
}
.wrapper .score .next button{
  padding: 15px 80px;
  color:white;
  background-color:#00b0ff;
  border:none;
  border-radius:8px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 3px 0px #00b0ff;
  outline: none;
}
.wrapper .score .next button:active{
box-shadow: 0px 3px 0px transparent;  
}



.wrapper .score .back{
  width: 35%;
  float: center;
}
.wrapper .score .back button{
  padding: 15px 80px;
  color:white;
  background-color:#00b0ff;
  border:none;
  border-radius:8px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 3px 0px #00b0ff;
  outline: none;
}
.wrapper .score .back button:active{
box-shadow: 0px 3px 0px transparent;  
}


.wrapper .score .restart{
  width: 1%;
  float: right;
  margin-top: 30px;
}
.wrapper .score .restart button{
  padding: 15px 64px;
  color:white;
  background-color:red;
  border:none;
  border-radius:8px;
  font-size: 15px;
  cursor: pointer;
  box-shadow: 0px 3px 0px #c97a06;
  outline: none;

}
.wrapper .score .restart button:active{
box-shadow: 0px 3px 0px transparent;  
}



.wrapper .score .score-card{
  width: 30%;
  float: right;
}
.wrapper .score .score-card{
  font-size: 20px;
  color:black;
  line-height: 50px;
  text-transform: uppercase;

}
.wrapper .score .score-card span{
  background-color: #4caf50;
  padding: 5px 15px;
  border-radius: 8px;
  color:#ffffff;

}

The post How to create JavaScript Quiz Example appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-create-javascript-quiz-example/feed/ 0 How to auto submit the form by the select option https://codeplaners.com/how-to-auto-submit-the-form-by-the-select-option/ https://codeplaners.com/how-to-auto-submit-the-form-by-the-select-option/#respond Thu, 14 Jul 2022 05:15:46 +0000 https://codeplaners.com/?p=1435 Hi Dev, Today, i we will show you How to auto submit the form by the select option. This article will give you simple example of How to auto submit the form by the select option. you will How to auto submit the form by the select option. In this article, we will implement a … Continue reading "How to auto submit the form by the select option"

The post How to auto submit the form by the select option appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you How to auto submit the form by the select option. This article will give you simple example of How to auto submit the form by the select option. you will How to auto submit the form by the select option. In this article, we will implement a How to auto submit the form by the select option.

So let’s follow few step to create example of How to auto submit the form by the select option.

<form action="https://codeplaners.com/" method="POST">
  <select name="myselect" id="myselect" onchange="this.form.submit()">
      <option value="1">One</option>
      <option value="2">Two</option>
      <option value="3">Three</option>
      <option value="4">Four</option>
  </select>
</form>

I hope it will assist you…

The post How to auto submit the form by the select option appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-auto-submit-the-form-by-the-select-option/feed/ 0 Disable Resizable Property Of Textarea Using CSS https://codeplaners.com/disable-resizable-property-of-textarea-using-css/ https://codeplaners.com/disable-resizable-property-of-textarea-using-css/#respond Sat, 09 Apr 2022 06:08:55 +0000 https://codeplaners.com/?p=1431 Hi Dev, Today, i we will show you disable resizable property of textarea using CSS. This article will give you simple example of disable resizable property of textarea using CSS. you will disable resizable property of textarea using CSS. In this article, we will implement a disable resizable property of textarea using CSS. So let’s … Continue reading "Disable Resizable Property Of Textarea Using CSS"

The post Disable Resizable Property Of Textarea Using CSS appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you disable resizable property of textarea using CSS. This article will give you simple example of disable resizable property of textarea using CSS. you will disable resizable property of textarea using CSS. In this article, we will implement a disable resizable property of textarea using CSS.

So let’s follow few step to create example of disable resizable property of textarea using CSS.

Example 1

<!DOCTYPE html>
<html lang="en">
<head>
<title>Remove Textarea Resizing</title>
<style>
    textarea {
        resize: none;
    }
</style>
</head>
<body>
    <textarea></textarea>
</body>
</html>

I hope it will assist you…

The post Disable Resizable Property Of Textarea Using CSS appeared first on Codeplaners.

]]> https://codeplaners.com/disable-resizable-property-of-textarea-using-css/feed/ 0 How To Custom Scrollbar In CSS https://codeplaners.com/how-to-custom-scrollbar-in-css/ https://codeplaners.com/how-to-custom-scrollbar-in-css/#respond Tue, 17 Aug 2021 05:41:48 +0000 https://codeplaners.com/?p=1247 Hi, Today, i we will show you how to custom scrollbar in CSS. This article will give you simple example of how to custom scrollbar in CSS. you will learn how to custom scrollbar in CSS. So let’s follow few step to create example of how to custom scrollbar in CSS. Example: body::-webkit-scrollbar { width: … Continue reading "How To Custom Scrollbar In CSS"

The post How To Custom Scrollbar In CSS appeared first on Codeplaners.

]]> Hi,

Today, i we will show you how to custom scrollbar in CSS. This article will give you simple example of how to custom scrollbar in CSS. you will learn how to custom scrollbar in CSS. So let’s follow few step to create example of how to custom scrollbar in CSS.

How To Custom Scrollbar In CSS

Example:

body::-webkit-scrollbar {
  width: 12px;               /* width of the entire scrollbar */
}

body::-webkit-scrollbar-track {
  background: orange;        /* color of the tracking area */
}

body::-webkit-scrollbar-thumb {
  background-color: blue;    /* color of the scroll thumb */
  border-radius: 20px;       /* roundness of the scroll thumb */
  border: 3px solid orange;  /* creates padding around scroll thumb */
}

I hope it will assist you…

The post How To Custom Scrollbar In CSS appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-custom-scrollbar-in-css/feed/ 0 Responsive Media Queries All Devices https://codeplaners.com/responsive-media-queries-all-devices/ https://codeplaners.com/responsive-media-queries-all-devices/#respond Sun, 30 May 2021 06:13:00 +0000 https://codeplaners.com/?p=908 Hi Dev, Today, i we will show you responsive media queries all devices. This article will give you simple example of responsive media queries all devices. you will learn responsive media queries all devices. So let’s follow few step to create example of responsive media queries all devices. HDTV Media Queries, 1920×1080 @media screen and … Continue reading "Responsive Media Queries All Devices"

The post Responsive Media Queries All Devices appeared first on Codeplaners.

]]> Hi Dev,

Today, i we will show you responsive media queries all devices. This article will give you simple example of responsive media queries all devices. you will learn responsive media queries all devices. So let’s follow few step to create example of responsive media queries all devices.

HDTV Media Queries, 1920×1080

@media screen and (min-width: 1080px) and (max-width: 1920px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

Widescreen Media Queries, 1280×800

@media screen and (min-width: 800px) and (max-width: 1280px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

iPad Landscape & Portrait Media Queries, 1024×768

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

iPad Landscape Media Queries, 1024×768

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:landscape) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

iPad Portrait Media Queries, 768×1024

@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .

}

Small Tablet Landscape/Portrait Media Queries, 800×600

@media screen and (min-width: 600px) and (max-width: 800px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

iPhone5/Android landscape (& narrow browser) Media Queries, 568×320

@media screen and (min-width: 320px) and (max-width:568px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

iPhone4/Android landscape (& narrow browser) Media Queries, 480×320

@media screen and (min-width: 320px) and (max-width:480px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

iPhone4/Android portrait Media Queries, 320

@media screen and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

Smaller devices, Android Landscape Media Queries, 320×240

@media screen and (min-width:240px) and (max-width:320px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

Smaller devices, Android Portrait Media Queries, 240×320 

@media screen and (max-width:240px) {
/* ADD YOUR CSS ADJUSTMENTS BELOW HERE */
. . .
}

The post Responsive Media Queries All Devices appeared first on Codeplaners.

]]> https://codeplaners.com/responsive-media-queries-all-devices/feed/ 0 How to Window Full Screen In JavaScript https://codeplaners.com/how-to-window-full-screen-in-javascript/ https://codeplaners.com/how-to-window-full-screen-in-javascript/#respond Fri, 28 May 2021 00:20:49 +0000 https://codeplaners.com/?p=869 Hello Dev, Today, i we will show you how to window full screen in javaScript. This article will give you simple example of how to window full screen in javaScript. you will learn how to window full screen in javaScript. So let’s follow few step to create example of how to window full screen in … Continue reading "How to Window Full Screen In JavaScript"

The post How to Window Full Screen In JavaScript appeared first on Codeplaners.

]]> Hello Dev,

Today, i we will show you how to window full screen in javaScript. This article will give you simple example of how to window full screen in javaScript. you will learn how to window full screen in javaScript.

So let’s follow few step to create example of how to window full screen in javaScript.

Window Full Screen In JavaScript

Example

<!DOCTYPE html>
<html>
<title>How to Window Full Screen In JavaScript - codeplaners</title>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<style type="text/css">
#fullscreen {
    margin: 40px auto 20px auto;
    height: 200px;
    width: 600px;
    background-color: #3f51b5;
    font-size: 20px;
    padding: 40px 0 0 0;
    text-align: center;
    box-sizing: border-box;
}
#fullscreen span {
    color: #fff;
    font-family: sans-serif;
}
#full-button {
    width: 200px;
    display: block;
    margin: 50px auto 0 auto;
    padding: 10px;
    background: #ffffff;
}
#fullscreen:-webkit-full-screen {
	width: 100%;
	height: 100%;
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}
#fullscreen:-moz-full-screen {
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}

#fullscreen:-ms-fullscreen {
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}
#fullscreen:fullscreen { 
	background-image: -webkit-linear-gradient(30deg,#FF9800,#E91E63 30%,#FF9800);
	margin: 0;
}

</style>

</head>

<body>
	<div id="fullscreen">
		<span>How to Window Full Screen In JavaScript - codeplaners</span>
		<button id="full-button">Enable Full Screen</button>
	</div>
</body>

<script>

/* Get into full screen */
function GoInFullscreen(fullscreen) {
	if(fullscreen.requestFullscreen)
		fullscreen.requestFullscreen();
	else if(fullscreen.mozRequestFullScreen)
		fullscreen.mozRequestFullScreen();
	else if(fullscreen.webkitRequestFullscreen)
		fullscreen.webkitRequestFullscreen();
	else if(fullscreen.msRequestFullscreen)
		fullscreen.msRequestFullscreen();
}

/* Get out of full screen */
function GoOutFullscreen() {
	if(document.exitFullscreen)
		document.exitFullscreen();
	else if(document.mozCancelFullScreen)
		document.mozCancelFullScreen();
	else if(document.webkitExitFullscreen)
		document.webkitExitFullscreen();
	else if(document.msExitFullscreen)
		document.msExitFullscreen();
}

/* Is currently in full screen or not */
function IsFullScreenCurrently() {
	var full_screen_fullscreen = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement || null;
	
	// If no fullscreen is in full-screen
	if(full_screen_fullscreen === null)
		return false;
	else
		return true;
}

$("#full-button").on('click', function() {
	if(IsFullScreenCurrently())
		GoOutFullscreen();
	else
		GoInFullscreen($("#fullscreen").get(0));
});

$(document).on('fullscreenchange webkitfullscreenchange mozfullscreenchange MSFullscreenChange', function() {
	if(IsFullScreenCurrently()) {
		$("#fullscreen span").text('How to Window Full Screen In JavaScript - codeplaners');
		$("#full-button").text('Disable Full Screen');
	}
	else {
		$("#fullscreen span").text('How to Window Full Screen In JavaScript - codeplaners');
		$("#full-button").text('Enable Full Screen');
	}
});

</script>
</html>

The post How to Window Full Screen In JavaScript appeared first on Codeplaners.

]]> https://codeplaners.com/how-to-window-full-screen-in-javascript/feed/ 0