How to add several branches to a star?

Question

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 15-Dec-21 13:42pm

Emile123

Updated 16-Dec-21 2:54am

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Richard Deeming · Answer 1 · 2021-12-16T02:54:00

Solution 1

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[^]

Posted 16-Dec-21 2:54am

Richard Deeming

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.