square rotates by clicking the button - javascript

Could somebody help me to make this square rotate after clicking the button in javascript? I am very beginner, have absolutely no clue. Maybe my css is not good enough, so I cannot find a solution in js?
All I can do is declare variables, that addEventListner should look like ("click", function()).
I can imagine function should contain initial position of this square (0), then add, for example 10deg to this initial position... And now I stuck.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Powiększ</title>
<style>
button {
padding: 10px;
font-size: 50px;
font-family: sans-serif;
background-color: transparent;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
background-color: #000;
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
}
</style>
</head>
<body>
<button>Obróć</button>
<div class="square"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Powiększ</title>
<style>
button {
padding: 10px;
font-size: 50px;
font-family: sans-serif;
background-color: transparent;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
background-color: #000;
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
</style>
</head>
<body>
<button onclick="myFunction()">Obróć</button>
<div class="square"></div>
<script>
var initioalRv = 20;
function myFunction() {
var elements = document.getElementsByClassName("square");
for (var i = 0; i < elements.length; i++) {
elements[i].style.transform = `rotate(${initioalRv}deg)`;
}
initioalRv += 20;
}
</script>
</body>
</html>
This solevs your problem. I changed your code a bit
Added onCLick to button.
Add some css to animate the rotation.
Added the javascript part.

You will need to use some javascript:
document.getElementById('btn').onclick = () => {
document.getElementById('square').style.transform = 'rotate(90deg)';
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Powiększ</title>
<style>
button {
padding: 10px;
font-size: 50px;
font-family: sans-serif;
background-color: transparent;
border: 2px solid black;
}
.square {
width: 100px;
height: 100px;
background-color: #000;
position: fixed;
top: calc(50% - 50px);
left: calc(50% - 50px);
transition: all 2s;
}
</style>
</head>
<body>
<button id="btn">Obróć</button>
<div id="square" class="square"></div>
</body>
</html>

Related

How can I count the amount of times a button has been clicked on a website?

I dont know anything about javascript but I just have to make this work, how can i count the number of times people have clicked a button? The code for it is below. I want to count the amount of times EVERYONE has clicked the button, like if i clicked the button from another PC.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap');
body{
background-color: #2e2e2e;
}
.mainBtn{
padding: 10px 20px;
border-radius: 6px;
border-width: 2px;
border-color: #2b2b2b;
border-style: solid;
font-size: 45px;
color: white;
font-family: 'Roboto', sans-serif;
background-color: #2b2b2b;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -60%);
transition: 0.3s;
}
.mainBtn:hover{
transition: 0.3s;
background-color: #383838;
border-radius: 6px;
border-width: 2px;
border-color: #383838;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device -width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Don't Do It. DT</title>
</head>
<body>
<button class="mainBtn">Button</button>
</body>
</html>
You can count the times each user clicks with localstorage (it is saved to their browser only) (Read here: https://www.w3schools.com/jsref/prop_win_localstorage.asp)
But if you were to track from all users, you would need a database for that. For web apps, I would recommend firebase.
You should write a javascript because that will make your button think nad count how many times a button is pressed.
Example-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device -width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Example</title>
</head>
<body>
<button onclick="myFunction()" class="mainBtn">Button</button>
<p>The button has been clicked</p>
<p id="demo"></p>
<script>
let count = 0;
function myFunction() {
count++;
document.getElementById("demo").innerHTML = count;
}
</script>
</body>
</html>
Click on Run Code Snippet For Demo
Check The Code Below code
#import url("https://fonts.googleapis.com/css2?family=Roboto:wght#900&display=swap");
body {
background-color: #2e2e2e;
}
.mainBtn {
padding: 10px 20px;
border-radius: 6px;
border-width: 2px;
border-color: #2b2b2b;
border-style: solid;
font-size: 45px;
color: white;
font-family: "Roboto", sans-serif;
background-color: #2b2b2b;
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -60%);
transition: 0.3s;
}
.mainBtn:hover {
transition: 0.3s;
background-color: #383838;
border-radius: 6px;
border-width: 2px;
border-color: #383838;
}
p {
color: aqua;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device -width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Don't Do It. DT</title>
</head>
<body>
<button onclick="myFunction()" class="mainBtn">Button</button>
<p>You Have Clicked Button</p>
<p id="demo"></p>
<script>
let count = 0;
function myFunction() {
count++;
document.getElementById("demo").innerHTML = count;
}
</script>
</body>
</html>

How to change the border radius of range input slider thumb on value?

Im using a range input slider for a site I'm making and need to increase the border radius of the slider thumb as you slide it, so from (0% to 50%).
I've looked at similar issues online but couldn't manage to solve it.
here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="slideContainer">
<input type="range" id="slider" class="slider" min="0" max="50" value="0">
</div>
</body>
</html>
.slideContainer{
position: fixed;
top: 25%;
right: -327px;
z-index: 100;
transform-origin: top left;
transform: rotate(90deg);
/*transform: translate(-50%,-50%) rotate(-90deg);*/
display: flex;
}
.slideContainer .slider {
width: 50vh;
-webkit-appearance: none;
height: 1.5vw;
position: relative;
background-color: #7A1E76;
outline: none;
border-radius: 3vw;
}
.slideContainer .slider::-webkit-slider-thumb {
-webkit-appearance: none;
background-color: #A5379B;
box-shadow: 0 0 0.75vw black;
height: 2vw;
width: 2vw;
border-radius: 0%;
cursor: pointer;
transition: .5s eas-in-out;
}
.slideContainer .slider::-webkit-slider-thumb:hover {
background-color: pink;
}
.slideContainer .slider::-webkit-slider-thumb:active {
box-shadow: 0 0 0 20px rgb(255,255,255,.1);
}
Thanks for you help.
You can change the border-radius of an element using JS.
var slider = document.querySelector("#slider");
myFunction = function(){
console.log(slider.value + "vw")
slider.style.borderRadius = slider.value + "vw";
}
For the JS, and For the HTML,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="slideContainer">
<input type="range" id="slider" onchange="myFunction()" style="border-radius: 3vw;" class="slider" min="0" max="50" value="0">
</div>
</body>
</html>

How to append / add a element onclick using javascript?

I am trying to append a new child when user clicks on a button. The new child is already defined with few CSS properties. Is it possible to do so ? I have tried a few codes, the best i could do is -
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
}
*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>
This was good uptil here but the problem is that when we click button the box is getting appended continously, i want it to append only once if the button is clicked once if twice then again and so on.. Please help me..Any help will be appreciated.
The problem is here:
animation: tweek 1s linear infinite;
The "infinite" is an attribute called animation-iteration-count. It defaults to 1, but since you have it set to infinite, it will continue to show this animation looping forever.
I have found the correct answer thanks to #iamjane who gave me the idea..
I have added timeout funtion which removes the element after a specific time..
var body = document.querySelector('body');
var bubbles = document.createElement("span")
function a1click(){
var size = Math.random() * 100;
bubbles.style.width = 100 + size+'px';
bubbles.style.height = 100 + size+'px';
body.appendChild(bubbles);
setTimeout(function(){
bubbles.remove();
},1000)
}
*{
margin: 0;
padding: 0;
}
#a1{
position: relative;
top: 250px;
left: 100px;
width: 30px;
height: 150px;
border: 2px solid #fff;
background: rgb(0, 0, 0);
float: left;
cursor: pointer;
perspective: 600;
}
span{
position: absolute;
top: 120px;
left: 60%;
width: 50px;
height: 50px;
background: black;
animation: tweek 1s linear;
transform-origin: top;
pointer-events: none;
}
#keyframes tweek {
0% {
transform: rotate(90deg) translate(300px);
}
100% {
transform: rotate(0deg) translate(250px);
opacity: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body onkeydown="keypress(event)">
<div id="a1" onclick="a1click()"></div>
<script src="script.js"></script>
</body>
</html>

hide popup when clicking outside

Here is a example of a javascript popup:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_popup
How would you modify this so that the popup disappears if you click anywhere outside the popup? I am using html5 and javascript within an epub3 document.
$('#trigger').bind('click touch', function(){
$('#tooltip').show();
});
$(document).bind('click touch', function(event) {
if (!$(event.target).parents().addBack().is('#trigger')) {
$('#tooltip').hide();
}
});
// Stop propagation to prevent hiding "#tooltip" when clicking on it
$('#tooltip').bind('click touch', function(event) {
event.stopPropagation();
});
* {
margin: 0;
padding: 0;
}
body,
html {
height: 100%;
}
body {
font-size: 14px;
line-height: 1.5;
font-family: Helvetica, Arial, sans-serif;
color: #000;
}
#container {
position: relative;
min-height: 100%;
width: 100%;
max-width: 960px;
margin: 0 auto;
zoom: 1;
}
#trigger {
width: 200px;
height: 200px;
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 22px;
line-height: 200px;
color: #fff;
background: #ccc;
cursor: pointer;
}
#trigger:hover {
background: #0A9E01;
}
#tooltip {
display: none;
position: absolute;
left: 10px;
top: 10px;
width: 250px;
padding: 20px;
font-size: 18px;
color: #fff;
background: #222222;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<!--Meta Tags-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="author" content="mihai vaduva" />
<meta name="email" content="" />
<meta name="copyright" content="" />
<meta name="distribution" content="global" />
<meta name="rating" content="general" />
<meta name="robots" content="noindex, nofollow" />
<meta name="description" content=""/>
<meta name="keywords" content=""/>
<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!--Title-->
<title>Antimath - Hide if click outside</title>
</head>
<body>
<!--container-->
<div id="container">
<noscript>
<p class="warning">You have JavaScript disabled or are viewing the site on a device that does no support JavaScript.Some features may not work properly.</p>
</noscript>
<div id="trigger">
Click Me !
</div>
<div id="tooltip">
Now click anywhere to hide it.
</div>
</div>
<!--/container-->
</body>
</html>

Cant click when I do a transform:translate (no jquery)

I want auto-adjust and auto-center a div of one game that I am working (HTML5), I have tried some css combinations, the perfect combination is it:
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
This centers the game great on all moment, but I cant click after use the "centered" class, I dont know whats the problem and its difficult find a solution searching on the net, anybody can help me with this?
The main .html file (with style and js) is there:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="pragma" content="no-cache"/>
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name ="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta charset="utf-8"/>
<!-- Set the title bar of the page -->
<title></title>
<!-- Set the background colour of the document -->
<style>
body {
background: #000000;
color:#cccccc;
margin: 0px;
padding: 0px;
border: 0px;
}
canvas {
image-rendering: optimizeSpeed;
-webkit-interpolation-mode: nearest-neighbor;
-ms-touch-action: none;
margin: 0px;
padding: 0px;
border: 0px;
}
:-webkit-full-screen #canvas {
width: 100%;
height: 100%;
}
div.gm4html5_div_class
{
margin: 0px;
padding: 0px;
border: 0px;
}
/* START - Login Dialog Box */
div.gm4html5_login
{
padding: 20px;
position: absolute;
border: solid 2px #000000;
background-color: #404040;
color:#00ff00;
border-radius: 15px;
box-shadow: #101010 20px 20px 40px;
}
div.gm4html5_cancel_button
{
float: right;
}
div.gm4html5_login_button
{
float: left;
}
div.gm4html5_login_header
{
text-align: center;
}
/* END - Login Dialog Box */
:-webkit-full-screen {
width: 100%;
height: 100%;
}
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="gm4html5_div_class centered" id="gm4html5_div_id">
<img src="html5game/splash.png" id="GM4HTML5_loadingscreen" alt="Loading screen" style="display:none;"/>
<!-- Create the canvas element the game draws to -->
<canvas id="canvas" width="1024" height="600">
<p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
</div>
<!-- Run the game code -->
<script type="text/javascript" src="html5game/SaveTheCity.js?LGLZB=1822663509"></script>
</body>

Categories