We Keep Coding

Create a function that generates circular borders with n separate parts and places an event listener on each one. HTML5

I need to create a series of circles that meet the following pattern:
Circle Style
But I need to generate a function to create a circle divided into n parts, not just 2 that follows the same design pattern as the image. I was able to create 4 circles with that pattern, for that I used the following code:
.circle,
.circle1,
.circle2,
.circle3 {
position: relative;
padding: 0;
margin: 1em auto;
width: 310px;
height: 310px;
border-radius: 50%;
list-style: none;
overflow: hidden;
display: grid;
gap: 1rem;
justify-content: center;
align-items: center;
transition: 1s ease-in-out;
}
.circle {
grid-template-columns: 1fr;
}
.circle1 {
grid-template-columns: 1fr 1fr;
}
.circle2 {
grid-template-columns: 1fr 1fr; /* splitting the circle into 2, equally sized columns/semi-circles */
grid-template-areas: 'up1 up2' 'down down';
justify-content: center;
align-items: center;
transition: 1s ease-in-out;
}
.circle3 {
grid-template-columns: 1fr 1fr; /* splitting the circle into 2, equally sized columns/semi-circles */
grid-template-rows: 1fr 1fr;
justify-content: center;
align-items: center;
transition: 1s ease-in-out;
}
li.inner-circle-one {
position: absolute;
top: 50%;
left: 50%;
margin: -145px 0px 0px -145px;
width: 290px;
height: 290px;
border-radius: 50%;
display: grid;
grid-template-columns: 1fr;
background-color: white;
z-index: 99;
}
li.inner-circle {
position: absolute;
top: 50%;
left: 50%;
margin: -145px 0px 0px -145px;
width: 290px;
height: 290px;
border-radius: 50%;
display: grid;
grid-template-columns: 1fr 1fr;
background-color: white;
z-index: 99;
}
li.slide,
li.slide1,
li.slide2,
li.slide3,
li.slide4,
li.slide5,
li.slide6,
li.slide7,
li.slide8,
li.slide9 {
overflow: hidden;
width: 100%;
height: 100%;
position: relative;
}
.text {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 5rem;
}
.slide,
.slide1,
.slide2,
.slide3,
.slide4,
.slide5,
.slide6,
.slide7,
.slide8,
.slide9 {
cursor: pointer;
background: gray;
transition: 1s ease-in-out;
}
.slide:hover,
.slide1:hover,
.slide2:hover,
.slide3:hover,
.slide4:hover,
.slide5:hover,
.slide6:hover,
.slide7:hover,
.slide8:hover,
.slide9:hover {
transform: scale(1.1);
}
.slide1:hover {
transform: translate(-10px);
}
.slide2:hover {
transform: translate(10px);
}
.slide.purple,
.slide1.purple,
.slide2.purple,
.slide3.purple,
.slide4.purple,
.slide5.purple,
.slide6.purple,
.slide7.purple,
.slide8.purple,
.slide9.purple {
background-color: purple;
}
.slide3 {
grid-area: up1;
}
.slide4 {
grid-area: up2;
}
.slide5 {
grid-area: down;
}
.inner-text {
position: absolute;
z-index: 100;
text-align: center;
left: 140px;
color: grey;
font-weight: bold;
font-size: 1.3rem;
}
<ul class="circle">
<li class="inner-circle-one"></li>
<li class="slide">
<div class="text"></div>
</li>
<li class="inner-text"><span id="number">0</span>/1</li>
</ul>
<ul class="circle1">
<li class="inner-circle"></li>
<li class="slide1">
<div class="text"></div>
</li>
<li class="slide2">
<div class="text"></div>
</li>
<li class="inner-text"><span id="number1">0</span>/2</li>
</ul>
<ul class="circle2">
<li class="inner-circle"></li>
<li class="slide3">
<div class="text"></div>
</li>
<li class="slide4">
<div class="text"></div>
</li>
<li class="slide5">
<div class="text"></div>
</li>
<li class="inner-text"><span id="number2">0</span>/3</li>
</ul>
<ul class="circle3">
<li class="inner-circle"></li>
<li class="slide6">
<div class="text"></div>
</li>
<li class="slide7">
<div class="text"></div>
</li>
<li class="slide8">
<div class="text"></div>
</li>
<li class="slide9">
<div class="text"></div>
</li>
<li class="inner-text"><span id="number2">0</span>/4</li>
</ul>
But I want to generate a circle with any number of parts that follow the same layout with a javascript function, with for example:
function generateCircleBorders(n) {
//Put your code here
}
Is that possible?

You can avoid a lot of math calculations by making use of CSS rotate and clip path.
You do need a little Javascript, to create the clip path we need the tan of an angle (360 degrees minus the gap required) / number of segments.
This method creates as many segments as are required (set the Javascript const num to the number required), rotates them about the center of the circle, clips them and adds an event listener to each.
Note that this method requires an acute angle, so the number of segments has to be 4 or above. If you need help adding the special code for 1-3 let me know.
const num = 3; //set this to the number required
const container = document.querySelector('.container');
container.style.setProperty('--num', num);
container.style.setProperty('--tan', Math.tan(((360 - num * 10) / num) * Math.PI / 180)); //10 is degrees of each gap
for (let i = 0; i < num; i++) {
const segment = document.createElement('div');
segment.style.setProperty('--n', i);
segment.id = 'Segment' + (i + 1);
container.append(segment);
segment.addEventListener('click', function() {
alert(segment.id);
});
}
container.classList.add('num' + num);
.container {
--d: 50vmin;
/* the diameter of the circle */
--bW: 10%;
/* the width of the border */
--r: calc(var(--d) / 2);
width: var(--d);
height: var(--d);
border-radius: 50%;
position: relative;
overflow: hidden;
}
.container::after {
content: '';
background: white;
width: calc(100% - var(--bW));
height: calc(100% - var(--bW));
position: absolute;
z-index: 1;
border-radius: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.container div {
clip-path: polygon(0 0, 0 var(--r), calc(var(--tan) * var(--r)) 0);
background: black;
width: 100%;
height: 100%;
position: absolute;
transform: translateX(var(--r)) rotate(calc((360deg / var(--num)) * var(--n)));
transform-origin: left center;
}
.container.num1 div {
transform: translateX(0);
clip-path: none;
}
.container.num2 div {
clip-path: polygon(3% 0, 0 var(--r), 3% var(--d), var(--d) var(--d), var(--d) 0);
}
.container.num3 div {
clip-path: polygon(35% 0, 0 var(--r), 35% var(--d), var(--d) var(--d), var(--d) 0);
}
<div class="container">
</div>

Using a canvas we can easily draw arcs. The trick is to see if mouse is hover a section, but simple geometry should help (distance and angle).
const size = 200;
const n = 7;
const width = 40;
var radius = size / 2 - width / 2
var canvas = document.querySelector("canvas")
canvas.width = size;
canvas.height = size;
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, size, size);
var arc = 360 / n;
var rad = Math.PI / 180;
function draw_circle(color) {
for (var i = 0; i < n; i++) {
draw_arc(i, color)
}
}
function draw_arc(i, color) {
ctx.beginPath();
ctx.lineWidth = width;
ctx.strokeStyle = color;
ctx.arc(size * 0.5, size * 0.5, radius, arc * i * rad, arc * (i + 0.95) * rad, false);
ctx.stroke();
ctx.closePath();
}
draw_circle("black");
canvas.addEventListener('mousemove', function(ev) {
var cx = ev.offsetX
var cy = ev.offsetY
var x = size / 2 - cx;
var y = size / 2 - cy;
var distance = Math.sqrt(x * x + y * y);
var alpha = (Math.atan2(y, x) / rad + 180) % 360
var arc = Math.floor(alpha / 360 * n)
draw_circle("black");
if (Math.abs(distance - radius) < width / 2) {
draw_arc(arc, "red");
}
})
<canvas></canvas>

How to create infinite loop slider using offset in vanilla JS?

So I am working on this project and I made a slider that slides 3 pics at a time but when it comes to the last 3 pics it stops (because of the condition) but I want to make it into infinite loop and I want it to autoslide every 3 seconds. Does anybody know how I can rewrite this part of code to make this work?
const carousel = document.querySelector(".carouselSlides");
const card = carousel.querySelector(".card");
const leftButton = document.querySelector(".slideLeft");
const rightButton = document.querySelector(".slideRight");
const carouselWidth = carousel.offsetWidth;
const cardStyle = card.currentStyle || window.getComputedStyle(card);
const cardMarginRight = Number(cardStyle.marginRight.match(/\d+/g)[0]);
const cardCount = carousel.querySelectorAll(".card").length;
let offset = 0;
const maxX = -(
(cardCount / 3) * carouselWidth +
cardMarginRight * (cardCount / 3) -
carouselWidth -
cardMarginRight
);
leftButton.addEventListener("click", function() {
if (offset !== 0) {
offset += carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
rightButton.addEventListener("click", function() {
if (offset !== maxX) {
offset -= carouselWidth + cardMarginRight;
carousel.style.transform = `translateX(${offset}px)`;
}
});
.carouselContainer {
display: flex;
align-items: center;
justify-content: space-around;
position: relative;
overflow: hidden;
height: 58vh;
width: 92vw;
margin: 0 auto;
}
.carouselSlides {
display: flex;
margin: 0;
padding: 0;
list-style: none;
width: 100%;
position: absolute;
left: 0;
transition: all 1s ease;
}
.button-wrapper {
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.slideLeft {
position: relative;
color: #f1f1f1;
background-color: transparent;
border: none;
font-size: 4rem;
right: 26rem;
}
.slideRight {
position: relative;
color: #f1f1f1;
background-color: transparent;
border: none;
font-size: 4rem;
left: 26rem;
}
<div class="carouselContainer">
<div class="carouselSlides">
<div id="slide0" class="card">
<div class="card__thumbnail">
<span class="card__title">FADE</span>
<button class="morebtn" onclick="">READ MORE</button>
</div>
</div>
</div>
<div class="button-wrapper">
<button class="slideLeft">‹</button>
<button class="slideRight">›</button>
</div>
</div>

how to make a carousel(sliding) stop when the mouse pointer hovers over on the images

How to make carousel (slider) stop when the mouse pointer has hovered over on the image in GSAP?
I made a huge try in many ways on the internet but nothing suit for my code.
// wrapping the code with onload to execute JS immediately
window.onload = function() {
//variables for slide animation time
var slideDelay = 1.2; //the slides flow in every 1.5 seconds
var slideDuration = 0.2;
var slides = document.querySelectorAll(".slide");
var prevButton = document.querySelector("#prevButton");
var nextButton = document.querySelector("#nextButton");
var numSlides = slides.length;
//infinite slide rotation
for (var i = 0; i < numSlides; i++) {
TweenLite.set(slides[i], {
xPercent: i * 100
});
}
// auto animation (the timer can be added to auto animate after a certain idle-time)
var wrap = wrapPartial(-100, (numSlides - 1) * 100);
var timer = TweenLite.delayedCall(3, autoPlay);
var animation = TweenMax.to(slides, 1, {
xPercent: "+=" + (numSlides * 100),
ease: Linear.easeNone,
paused: true,
repeat: -1,
modifiers: {
xPercent: wrap
}
});
var proxy = document.createElement("div");
TweenLite.set(proxy, { x: "+=0" });
var transform = proxy._gsTransform;
var slideAnimation = TweenLite.to({}, 0.1, {});
var slideWidth = 0;
var wrapWidth = 0;
resize();
window.addEventListener("resize", resize);
// navigation with buttons
prevButton.addEventListener("click", function() {
animateSlides(1);
});
nextButton.addEventListener("click", function() {
animateSlides(-1);
});
function animateSlides(direction) {
timer.restart(true);
slideAnimation.kill();
var x = snapX(transform.x + direction * slideWidth);
slideAnimation = TweenLite.to(proxy, slideDuration, {
x: x,
onUpdate: updateProgress
});
}
// auto-play function for auto animation
function autoPlay() {
animateSlides(-1);
}
function updateProgress() {
animation.progress(transform.x / wrapWidth);
}
function snapX(x) {
return Math.round(x / slideWidth) * slideWidth;
}
//calculating the necessary width for slide animation
function resize() {
var norm = (transform.x / wrapWidth) || 0;
slideWidth = slides[0].offsetWidth;
wrapWidth = slideWidth * numSlides;
TweenLite.set(proxy, {
x: norm * wrapWidth
});
animateSlides(0);
slideAnimation.progress(1);
}
//returns the difference between the passed function's max and min value
function wrapPartial(min, max) {
var diff = max - min;
return function(value) {
var v = value - min;
return ((diff + v % diff) % diff) + min;
}
}
}
* {
box-sizing: border-box;
}
/* the main wrapper box */
main {
display: flex;
position: relative;
flex-direction: column;
width: 300px;
height: 250px;
overflow: hidden;
border: 3px solid #000000;
}
/* the header and navigations */
.controls {
padding: 10px;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
min-height: 60px;
border-bottom: 2px solid #000000;
}
.controls button {
width: 30px;
height: 30px;
border-radius: 50%;
border: none;
outline: none;
background-repeat: no-repeat;
background-size: 70%;
cursor: pointer;
background-color: #000;
background-position: center center;
}
.slides-container {
border-top: 2px solid ;
position: relative;
overflow: hidden;
display: flex;
flex: 1;
}
.slide {
position: absolute;
font-size: 90px;
font-weight: 700;
color: rgba(255,255,255,0.9);
display: flex;
align-items: center;
justify-content: center;
height: 100%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
.slides-inner {
position: relative;
height: 100%;
width: 100%;
overflow: hidden;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Varshath Gupta Solution</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/plugins/ModifiersPlugin.min.js"></script>
<script type="text/javascript" src="./script.js">
</script>
</head>
<body>
<!-- Main wrapper div for the header and slider components. -->
<div class="wrapper">
<main>
<!-- the header that includes the navigation buttons and the logo -->
<div class="controls">
<button id="prevButton" style="background-image: url(https://drive.google.com/uc?export=view&id=1o6S3UjO-DQFLXAGShYeN4bQXoI0yuxP0);"></button>
<div class="logo"><img width="80" src="https://logos.textgiraffe.com/logos/logo-name/Cartoon-designstyle-cartoon-m.png"/></div>
<button id="nextButton" style="background-image: url( https://drive.google.com/uc?export=view&id=1aptD-5krbPTtFRjZk_b2O8Ikx2x0F2TC);"></button>
</div>
<!-- the slider -->
<div class="slides-container">
<div class="slides-inner">
</div>
</div>
</div>
<div class="slide" style="background-image: url( https://drive.google.com/uc?export=view&id=1ngTIZMgHFHTSQO9vinuB666ruA3l-Vgq)"></div>
</div>
</div>
</div>
</main>
</div>
</body>
</html>

Javascript rotate triangular clip path according to cursor position

I need to create a clip-path triangle and one of its vertices need to be anchored in the center, and its shape rotates according to the movement of the cursor to form a kind of flashlight, but I am stuck with forming triangular with sides of the equal length and stretching it out to the edges of the screen. Also it's area tends to zero as moving to the middle of top/bottom side of the screen
Here is my code:
<div class="container">
some lorem ipsum here
</div>
/* css */
body{
box-sizing: border-box;
margin:0;
padding:0;
height: 100vh;
width:100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
}
.container{
font-size: 2rem;
clip-path: polygon(50% 50%,30% 100%,70% 100%);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
//js
let container = document.querySelector(".container");
window.addEventListener("mousemove", (e) => {
console.log(
Math.round((e.pageX / window.innerWidth) * 100),
Math.round((e.pageY / window.innerHeight) * 100)
);
const x = Math.round((e.pageX / window.innerWidth) * 100);
const y = Math.round((e.pageY / window.innerHeight) * 100);
container.style.clipPath = `polygon(50% 50%,${x}% ${y - 10}%,${x}% ${y + 10}%)`;
});

My math is probably rusty, but something like this may work for you:
var container = document.querySelector(".container");
var rayRadius = 0.3; /* Pi radians */
window.addEventListener("mousemove", (e) => {
let katX = window.innerWidth/2 - e.pageX;
let katY = window.innerHeight/2 - e.pageY;
let atan = Math.atan( katX/katY );
let ray1angle = atan + rayRadius;
let ray2angle = atan - rayRadius;
let cover = Math.max(window.innerWidth, window.innerHeight);
let ray1x = window.innerWidth/2 - Math.sign(katY)*Math.sign(ray1angle)*cover;
let ray1y = window.innerHeight/2 - Math.sign(katY)*1/Math.tan(ray1angle) * Math.sign(ray1angle)*cover;
let ray2x = window.innerWidth/2 - Math.sign(katY)*Math.sign(ray2angle)*cover;
let ray2y = window.innerHeight/2 - Math.sign(katY)*1/Math.tan(ray2angle) * Math.sign(ray2angle)*cover;
container.style.clipPath = `polygon(50% 50%,${ray1x}px ${ray1y}px,${ray2x}px ${ray2y}px)`;
});
body {
box-sizing: border-box;
margin: 0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
background-color: aliceblue;
}
.container {
background: rebeccapurple;
font-size: 2rem;
clip-path: polygon(50% 50%, 30% 100%, 70% 100%);
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
<div class="container">
some lorem ipsum here
</div>
Also on JS Fiddle.

How to move progress bar slider/pointer between two dates?

I have developed progress bar with html, css and javascript/jQuery.
Now am trying to move vertical line slider / pointer image as the days progress towards end date. Slider / Pointer should move only between start date and end date.
Here's the fiddle link I tried so far:
Updated JSFiddle link
Am having issues with javascript. Below is the code:
var start = new Date(2021, 3, 20),
end = new Date(2021, 4, 20),
today = new Date(),
p = Math.round(((today - start) / (end - start)) * 100) + '%';
// Update the progress bar
$('img').css("margin-left", p).after().append(p);
Also the slider / pointer is moving outside the container. Hope I get help from you all experts :)
Thanks,
Richa

Since today can be outside of the two dates, you'll need restrict p to 0-100.
Also, your image has very wide border on each side, which showed outside of the area.
var start = new Date(2021, 3, 20),
end = new Date(2021, 4, 20),
today = new Date(),
p = Math.max(0, Math.min(100, Math.round(((today - start) / (end - start)) * 100))) + "%";
// Update the progress bar
$('.indicator').css("width", p).find("span").text(p);
// update start/end dates
$('.ldate').text(start.getDate() + "/" + (start.getMonth()+1) + "/" + start.getFullYear());
$('.rdate').text(end.getDate() + "/" + (end.getMonth()+1) + "/" + end.getFullYear());
//demo
p = Math.max(0, Math.min(100, Math.round(((today - start) / (end - start)) * 100)));
!function slider()
{
$('.indicator').css("width", p + "%").find("span").text(p + "%");
if (++p > 100)
p = 0;
setTimeout(slider, 200);
}()
.container {
background: grey;
padding: 10px;
display: block;
position: relative;
}
.container .pbcolor {
display: flex;
flex-basis: 100%;
/* padding: 23px 10px; */
background: #ffedc4;
}
.container .mdate {
font-weight: bold;
display: flex;
flex-basis: 100%;
margin-top: 10px;
color: #fcfcfc;
}
.container .mdate .ldate {
display: inline-block;
flex-basis: 50%;
}
.container .mdate .rdate {
display: inline-block;
text-align: right;
flex-basis: 50%;
}
/* added */
.container .indicator {
min-width: 2px;
top: 0px;
/* border: 1px solid black; */
overflow: hidden;
background-image: url('https://www.linkpicture.com/q/vlt_1_1.png');
background-repeat: no-repeat;
background-size: contain;
background-position: right;
text-align: center;
}
.pbcolor
{
height: 65px;
line-height: 65px;
}
.indicator > img
{
height: 65px;
float: right;
}
.ltext
{
float: left;
position: absolute;
}
.rtext
{
float: right;
position: absolute;
right: 10px; /* same as padding in .container */
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="pbcolor">
<div class="ltext">Text on left</div>
<div class="indicator">
<!-- <img src="https://www.linkpicture.com/q/vlt_1_1.png"> -->
<span></span>
</div>
<div class="rtext">Text on right</div>
</div>
<div class="mdate">
<span class="ldate">20/4/2021</span><span class="rdate">20/5/2021</span>
</div>
</div>
If the image was 2px wide, it would be shown correctly, because of the "incorrect" dimensions it shows away from the right edge and before 25% it shows at wrong dimensions.