CODEWITHSUNDEEP
htmlcss
Anan Saadi
Anan Saadi

Reputation: 338

How can I rotate a circle with items inside it?

I have been trying to rotate a circle with the items inside of it using a button, when I change the rotate value of the circle directly in css it works fine but there appears to be a problem in the html code. html code:

<html>

<head>
<title>web desgin test</title>
<link rel="stylesheet" href="style.css">

</head>

<body>
<div class="main">
    <nav>
        <div class="logo">
            <img 
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/logo.png" 
alt="">
        </div>
        <div class="links">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Phone</a></li>
                <li><a href="#">Accessories</a></li>
                <li><a href="#">Cart</a></li>
            </ul>
        </div>
    </nav>
    <div class="information">
        <img 
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/mobile.png" 
class="mobile">
        <div id="circle">
            <div class="feature one">
                <img 
src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/camera.png" 
alt="">
                <div>
                    <h1>Camera</h1>
                    <p>108MP Main camera</p>
                </div>
            </div>
            <div class="feature two">
                <img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/processor.png" alt="">
                <div>
                    <h1>processor</h1>
                    <p>Exynos 990</p>
                </div>
            </div>
            <div class="feature three">
                <img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/display.png" alt="">
                <div>
                    <h1>Display</h1>
                    <p>6.9 inch, 1440px</p>
                </div>
            </div>
            <div class="feature four">
                <img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/battery.png" alt="">
                <div>
                    <h1>Battery</h1>
                    <p>4500 mA</p>
                </div>
            </div>


        </div>
    </div>
    <div class="controls">
        <img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="upBtn">
        <h3>Features</h3>
        <img src="C:/Users/USER/Downloads/RealPhone_WebPage_Images/images/arrow.png" id="downBtn">
    </div>
</div>
<script>
    var circle = document.getElementById('circle');
    var upBtn = document.getElementById('upBtn');
    var downBtn = document.getElementById('downBtn');

    var rotateValue = circle.style.transform();
    var rotateSum;

    upBtn.onclick = function() {
        rotateSum = rotateValue + "rotate(-90deg)";
        circle.style.transform = rotateSum;
        rotateValue = rotateSum;
    }
</script>

css code:

  #circle {
  width: 1000px;
  height: 1000px;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  transform: rotate(0deg);
  .controls {
    position: absolute;
    right: 10%;
    top: 50%;`enter code here`
    transform: translateY(-50%);
    text-align: center;
  }
  .controls h3 {
    margin: 15px 0;
    color: #fff;
  }
  #upBtn {
    width: 15px;
    cursor: pointer;
  }
  #downBtn {
    width: 15px;
    cursor: pointer;
    transform: rotate(180deg);
  }

................................................................................

Upvotes: 0

Views: 268

Answers (2)

Qiqke
Qiqke

Reputation: 486

There is no circle in your html code... So when you do this :

var circle = document.getElementById(circle);

var circle is null, because there is not a html element where its id is circle, and you are trying to take one called like that Also, when you do this:

document.getElementById(circle); is going to look for a string in every id, so it should be :

document.getElementById('circle');

edit: for been clear, when you use selector, you are looking for a matching string, when you do this:

var circle = document.getElementById(circle);
var upBtn = document.getElementById(upBtn);
var downBtn = document.getElementById(downBtn);

It should be this:

var circle = document.getElementById('circle');
var upBtn = document.getElementById('upBtn');
var downBtn = document.getElementById('downBtn');

In the firt one you are sayin look for a string with the value os circle

var circle = 'notCircle'
var circle = document.getElementById(circle);
console.log(circle)

In the second you are looking direclty for x string on html ids

Upvotes: 1

Yalcin Kilic
Yalcin Kilic

Reputation: 800

Your variable declarations are wrong if for example the id is #circle

document.getElementById(circle); --> document.getElementById('circle');

It is better when you post all html according to this function

Upvotes: 1

Related Questions