Click here to Skip to main content
15,400,390 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
Hello, I'm a beginner at programmation and I'm currently working on a HTML/CSS/JS script that makes a 5-star branch and then allows to add other branches if I click on the button in the middle of the star. Currently, the new branches do add up, but they are not centered and the previously existing branches are following a bizarre pattern.

What I have tried:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="dm.css">
	<title>DM</title>
</head>
<body>
	<div id="main" style="--compteur-branches:5;"> 
		<div id="centre">
			<div class="image" id="image1" style="--image-numero:0;"></div>
			<div class="image" id="image2" style="--image-numero:1;"></div>
			<div class="image" id="image3" style="--image-numero:2;"></div>
			<div class="image" id="image4" style="--image-numero:3;"></div>
			<div class="image" id="image5" style="--image-numero:4;"></div>
			<button id="bouton">
				Cliquer pour ajouter une branche
			</button>
		</div>
	</div>
</body>
<script type="text/javascript" src="dm.js"></script>
</html>


------

main{
	font-family: "Montserrat", sans-serif;
}

div#main {
	width: 900px;
	height: 900px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;

}

div#centre {
	position: absolute;
	height: 0px;
	width: 100%;
	top: 50%;
	left: 50%;
	display: inline-block;
}

button#bouton{
	width: 200px;
	height: 200px;
	filter: drop-shadow(0px 0px 8px black);
	border: 1px black solid;
	border-top-left-radius: 100px;
	border-top-right-radius: 100px;
	border-bottom-left-radius: 100px;
	border-bottom-right-radius: 100px;
	z-index: 1;
	left: 50%;
	top: 0px;
	position: absolute;
}

div#centre > div { 
	position: absolute;
	z-index: 0;
	background-repeat: no-repeat;
	--angle: calc(90deg + var(--image-numero) * 360deg / var(--compteur-branches));
	transform: rotate(var(--angle));
}


.image {
	transform: rotate(calc(-1 * var(--angle)));
	filter: hue-rotate(var(--angle));
	background-image: url(./branch.png);
	background-repeat: no-repeat;
	transform-origin: top;
	width: 200px;
	height: 344px;
	position: absolute;
	left: 50%;
	top: 100px;
}


------

console.log("Test")

window.addEventListener('DOMContentLoaded', () => {
  const centre = document.getElementById("centre");

  let compteurBranches = 0;
  centre.querySelectorAll(":scope > div").forEach(el => {
    el.style.setProperty("--image-numero", compteurBranches);
    compteurBranches++;
  });

  centre.style.setProperty("--compteur-branches", compteurBranches);

  document.getElementById("bouton").addEventListener("click", (event) => {
    event.preventDefault();

    const imageNumero = compteurBranches;
    const html = `<div style="--image-numero:${imageNumero};"><img src="branch.png" class="image"></div>`;
    centre.insertAdjacentHTML("afterbegin", html);

    compteurBranches++;
    centre.style.setProperty("--compteur-branches", compteurBranches); 
  });
});
Posted
Updated 16-Dec-21 2:54am

1 solution

Take out the changes which you have made to the code I gave you on Tuesday[^] - specifically, the transform-origin, position, left, and top properties for the .image class.

The background-repeat on both .image and div#centre > div serves no purpose, since neither element has a background set.

Updated demo[^]

Now the only issue is that your taller images don't quite line up on the centre of the button. You can improve that by adding margins to the button to make it take the same height as the images, and increasing the translation value to account for the new image height.

Demo[^]
   
Comments
Richard MacCutchan 16-Dec-21 10:23am
   
Re your comment at I need help with complex HTTPWebRequest in VB.NET[^]: thanks, but I already deleted it.
Emile123 16-Dec-21 12:34pm
   
Hello, thank you for the response but the result isn't what I'm looking for, on your demo, the images are around the button while my star looks like this (https://zupimages.net/viewer.php?id=21/50/i4fh.png) and I'd like to add new branches that are as centered as the 5 first ones
Richard Deeming 17-Dec-21 3:26am
   
You're not going to be able to do that with static images - the branches would need to change size to fit more in.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900