'Lottery Javascript

I have to make some kind of a lottery in javascript, html and css. My html and css are already done, the problem is that I don't know how to generate random numbers and show the previous roll. In the end it should look like this:End So when pushed on the button that should pop up. This is my other code (html and css)

The only thing I need is the javascript.

Html:

<!DOCTYPE html>
<html>
<head>
    <title>Hipster powered lottery</title>

    <link rel="stylesheet" type="text/css" href="assets/css/reset.css"/>
    <link rel="stylesheet" href="assets/css/style.css" type="text/css"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script src="assets/js/main.js"></script>

</head>
<body>
<div id="container" class="cf">
    <header>
        <h1>Hipster Powered Lottery</h1>

    </header>

    <section>
        <h2>Play with our wonderful lottery est. 1831</h2>
        <a href="#" id="generate" onclick="generatenumbers()">Generate my numbers!</a>
        <ul id="generated"></ul>

    </section>
    <aside>
        <h2>Previously generated set</h2>
        <ul id="previous"></ul>

    </aside>
</div>

</body>
</html>

CSS:


/*---------------------*/
/*   GENERAL ELEMENTS  */
/*---------------------*/


body {
    font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
    font-size: 1rem;
    color: #333333;
    background-color: #FFFFFF;
    padding-top: 1px;
    padding-bottom: 25px;
    background-image: url(../media/bg.gif);
}

h1 {
    background-image: url(../media/hipster-powered-lottery.png);
    background-position: top left;
    background-repeat: no-repeat;
    height: 196px;
    width: 395px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 15px;

    text-indent: 100%;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1%;
}

h2 {
    font-weight: bold;
    font-size: 1.4rem;
    text-align: center;
    margin-bottom: 15px;
}
/*---------------------*/
/*   GENERAL CLASSES   */
/*---------------------*/

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

.column {
    float: left;
}

.hide {
    display: none;
}

.errormessage {
    color: #FF0000;
}


/*---------------------*/
/* CONTAINING ELEMENTS */
/*---------------------*/

#container {
    width: 75%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 30px;
}

/*------------------------*/
/* PAGE SPECIFIC ELEMENTS */
/*------------------------*/

/* --- Generation --- */
#generate {
    text-align: center;
    width: 20%;
    display: block;
    background-color: #3c3c3c;
    color: #FFFFFF;
    text-decoration: none;
    border: 1px solid #3c3c3c;
    border-radius: 5px;
    margin-left: auto;
    margin-right: auto;
    font-weight: bold;
    line-height: 35px;
    padding: 3px;
    margin-bottom: 25px;
}

#generate:hover {
    background-color: #c83c3c;
    border-color: #c83c3c;
}
#generated {
    text-align: center;
    margin-bottom: 25px;
}
#generated li, #generated span {
    background-image: url(../media/number.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 101px;
    width: 101px;
    height: 101px;
    text-align: center;
    line-height: 101px;
    color: #FFFFFF;
    display: inline-block;
    margin-right: 25px;
    font-size: 1.6rem;
}

#generated .joker {
    background-image: url(../media/joker.png);
    width: 100px;
    height: 115px;
    line-height: 115px;
    background-size: 100px 115px;
    display: block;
    margin-left: auto; margin-right: auto;
    font-size: 2rem;
}


/* --- previous --- */
#previous {
    text-align: center;
}
#previous ul {
    margin-bottom: 10px;
}

#previous li, #previous .joker {
    display: inline;
    font-size: 1.6rem;
}
#previous li:after {
    content: " - "
}

#previous li:last-child:after {
    content: ""
}

Thanks

javascripthtmlcssrandom


Solution 1:[1]

function GenerateLottery() {
				                        var chr1 = Math.ceil(Math.random() * 40)+ '';
				                        var chr2 = Math.ceil(Math.random() * 40)+ '';
				                        var chr3 = Math.ceil(Math.random() * 40)+ '';
				                        var chr4 = Math.ceil(Math.random() * 40)+ '';
				                        var chr5 = Math.ceil(Math.random() * 40)+ '';
				                        var chr6 = Math.ceil(Math.random() * 40)+ '';
				                      

				                        var captchaCode = chr1 + ' ' + chr2 + ' ' + chr3 + ' ' + chr4 + ' ' + chr5 + ' '+ chr6;
				                        document.getElementById("txtLottery").value = captchaCode
				                        }
<body onload="GenerateLottery();">
<input class="form-control" disabled="" id="txtLottery" style="text-align: center; border: none; font-weight: bold; font-family: Modern; display:inline-block; pointer-events:none;" type="text">
</body>

Change the number 40 to your maximum number, This is all the help im giving, good luck adding this to your code.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1

Related Questions