jQuery addClass example

Change class name on click in jQuery

by Jesse M

HTML

<style type="text/css">

			body{
		
		
			}
			div{
				touch-action: none;
			}
			.as{
				height: 300px;
				width: 300px;
			

				overflow: hidden;
				border-radius: 20px;
				top: 80px;
				left: calc(50% - 150px);
				overflow-wrap: break-word;
				outline: none;
				box-shadow:  0 5px 10px rgba(15,10,18,0.05), 0 15px 40px rgba(16,13,20,0.2);
			}
			.touch{
				height: 25px;
				width: 25px;
				border-radius: 100%;
				background-color: white;
				position: absolute;
				pointer-events: none;
				opacity: 0;
			}
			.d{
				position: absolute;
				height: 30px;
				width: 30px;
				background-color: red;
				border-radius: 100%;
				transform: translateX(-50%) translateY(-50%);

			}

			.wwsd{
				box-shadow:  0 5px 10px rgba(15,10,18,0.1), 0 15px 40px rgba(16,13,20,0.2);
				background-color: rgba(255,255,255,0.3);
				position: absolute;
				pointer-events: none;
				opacity: 0;
				transition-duration: 0.2s;

				height: calc(50% - 30px);
				width: 50%;
				border-radius: 10px;
			}
			#add{
				box-shadow:  0 5px 10px rgba(15,10,18,0.2), 0 15px 40px rgba(16,13,20,0.3);
				position: absolute;
				top: 10px;
				right: 10px;
				height: 40px;
				width: 40px;
				background-color: rgb(41, 103, 204);
				border-radius: 100%;
			}
			#delete{
				box-shadow:  0 5px 10px rgba(15,10,18,0.2), 0 15px 40px rgba(16,13,20,0.3);
				position: absolute;
				top: 10px;
				right: -50px;
				height: 40px;
				width: 40px;
				background-color: rgb(41, 103, 204);
				border-radius: 100%;
				transition-duration: 0.2s;
				background-size: contain;
				background-position: center;
			}
			.bar{
				outline: none;
			}
		</style>

			<div style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow: hidden;background-color: rgba(255,66,66,0.6);">
			</div>

			<div style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow: hidden;" id="con"  >
				<div style="position: absolute;top: 0;left: 0;height: 100%;width: 100%;overflow:...