Why is this not working? The Javascript is not working. This have to capture de click event and then show us a random pick, sometimes HEAD sometimes TAILS. I think is because of the JS but I´m studying this in class and I´m really new on this. If somebody could explain it in Spanish it would be great! Thank you! :) HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<title>CARA O CRUZ</title>
<link href="011_HeadsorTails_Student.css" rel="stylesheet" />
<!--Insert jQuery Library-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="contenedor">
<div class="contenedor_2">
<div class="text"><p> HEADS <br>and<br> TAILS</p>
</div>
<div class="monedas" id="coin">
<img src="img/HeadandTail1.png" alt="" id="heads" onclick="coinFlip()";>
<img src="img/HeadandTail2.png" alt="" id="tails">
</div>
<div class="boton">
<input type="text" value="Throw the coin" id="throw" onclick="coinFlip()";>
</div>
</div>
</div>
</body>
<!--.js file-->
<script src="011_HeadsorTails_Student.js"></script>
</html>
CSS
html {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
*{box-sizing: border-box;}
body {font-family: Arial, Helvetica, sans-serif;}
.contenedor {
width: 100vw;
height: 100vh;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
}
.contenedor_2{
width: 80vw;
height: 500px;
max-width: 1024px;
display: flex;
justify-content: center;
align-items: center;
}
.text, .boton {
width: 50%;
text-align: center;
}
p {
font-weight: 800;
font-size: 2.5em;
}
.monedas {
display: flex;
padding: 200px;
}
input {
height: 50px;
font-size:1.5em;
padding: 10px;
color:white;
background-color: black;
text-align: center;
border-radius: 15px;
}
img {
position: absolute;
width: 200px;
height: 200px;
margin-top: -100px;
margin-left: -100px;
border-radius: 50%;
animation: 1s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
#heads {
animation-name: heads;
}
#tails {
animation-name: tails;
}
@keyframes tails {
0%{ z-index:10;
transform:rotateX(0deg);
}
25%{ z-index:5;
transform:rotateX(90deg);
}
50%{ z-index:5;
transform:rotateX(180deg);
}
75%{ z-index:10;
transform:rotateX(180deg);
}
100%{ z-index:10;
transform:rotateX(360deg);
}
}
@keyframes heads {
0%{ z-index:5;
transform:rotateX(0deg);
}
25%{ z-index:5;
transform:rotateX(90deg);
}
50%{ z-index:10;
transform:rotateX(180deg);
}
75%{ z-index:10;
transform:rotateX(180deg);
}
100%{ z-index:5;
transform:rotateX(360deg);
}
}
/*en pantallas menores de 700px*/
@media (max-width: 700px){
.contenedor{
display: flex;
flex-direction: column;
}
.contenedor_2{
display: flex;
flex-direction: column;
}
p{
margin-left: 0px;
}
.text, .boton {
flex-direction: column;
width: auto;
text-align: center;
}
.monedas {
display: flex;
padding: 200px;
}
}
JS
$(document).ready(init);
function coinFlip() {
function flip(){
return Math.floor((Math.random() * 2) + 1)
}
var result = flip();
if (result === 1){
document.getElementById("coin").src="img/HeadandTail1.png";
} else if (result === 2) {
document.getElementById("coin").src="img/HeadandTail2.png";
}
}
Aucun commentaire:
Enregistrer un commentaire