I have a quick question, I have a random function in my code, and I would like that random function to randomize 9 numbers, and depending in the number that returns, that would display the number of happy faces on my html.
My first question is how do I connect the function with my happy faces, and the second is, should I have all nine happy faces on my html, or should I just have one, and generate the others (depending on the random number) dynamically. right now I have a display: none on the css, I just commented out so you guys could see it.
I added some of the code here
'use strict';
$(document).ready(init);
var globalNum;
function init(){
$('.number').click(clickNum);
console.log('hello from jQuery!');
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getRandomInt(1,9));
function clickNum(){
var num = $(this).text();
console.log(num)
// addNumToDisplay(num);
}
// function displayNum(num){
// globalNum =
// var currentNumber = $('.number').text(num);
// console.log(currentNumber);
// }
* {
/*outline: 2px solid red;*/
}
p {
padding: 50%;
font-size: 32px;
font-weight: bold;
text-align: center;
background: #dbdfe5;
}
body {
padding-top: 60px;
padding-bottom: 40px;
}
.col-sm-8 {
width: 80%;
height: 200px;
}
.jumbotron {
width: 800px;
margin: 0 auto;
height: auto;
}
.fa-smile-o {
background-color: yellow;
border-radius: 50%;
height: .9em;
width: .9em;
/*display: none;*/
}
.btn-group {
position: relative;
left: 40%;
}
.numbers {
margin-top: 15px;
width: 900px;
}
.number {
font-size: 40px;
letter-spacing: 10px;
}
#right {
position: relative;
height: 80px;
width: 120px;
font-size: 30px;
background-color: lime;
color: white;
}
.rightButton {
margin-left: 50px;
position: absolute;
}
#result {
font-size: 30px;
margin-left: 40px;
padding: 30px;
background-color: white;
border: 1px solid black;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game 5</title>
<link rel="stylesheet" href="http://ift.tt/1jAc5cP" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link href="http://ift.tt/1PinXyn" rel="stylesheet" integrity="sha384-XdYbMnZ/QjLh6iI4ogqCTaIjrFk87ip+ekIjefZch0Y+PvJ8CDYtEs1ipDmPorQ+" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="jumbotron firstBlock">
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
<i class="fa fa-smile-o fa-4x"></i>
</div>
<div class="btn-group" role="group" aria-label="...">
<button type="button" class="btn btn-primary">Restart</button>
<button type="button" class="btn btn-warning">Reroll</button>
<button type="button" class="btn btn-success">Check</button>
</div>
<div class="jumbotron numbers">
<button class="number">1</button>
<button class="number">2</button>
<button class="number">3</button>
<button class="number">4</button>
<button class="number">5</button>
<button class="number">6</button>
<button class="number">7</button>
<button class="number">8</button>
<button class="number">9</button>
<span class="right">
<span id="result">5</span>
<span class="rightButton">
<button id="right">Right!</button>
</span>
</span>
</div>
</div>
<script src="http://ift.tt/1L6zqzP"></script><script src="http://ift.tt/1jAc4pg" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire