Skip to main content

JavaScript: Interactive Login form Using Cookie

Interactive Login form Using Cookie


Good day guys,
             Today I am here to have a discussion regarding a small program for Beginners with JavaScript and CSS. Even though it's a small program. I hope it will be pretty useful to everyone.

First of all, let's have a look at what we are going to make:
A screenshot from the latest version of Firefox.

We can see that the page has a simple but beautiful user interface.I have accomplished this using simple HTML and CSS.Now , I would like describe the HTML in a few steps so that it can make this tutorial readable and easy to understand.
Step 1
We have to make some containers to wrap the HTML elements(the text inputs , buttons etc.) so that it will be easy to manage.Here I use <div> tag to make the containers here.I have used three <div> elments which the first one contains the other two where the second one contains the username TextInput , Password the Heading and the Image.The third one however contains only the buttons namely Login and Signup. 

<div class="container">
    <div class="textContainer">
 
 
    </div>
    <div id="buttonContainer">
    </div>
</div>

Comments

  1. AnonymousMay 31, 2018 at 8:17 PM

    <html>
    <head>
    <style>
    p{
    text-align:left;
    }
    body{
    background-color:#f0f0f0;
    }
    input[type=text]{
    display:block;
    margin-top:3%;
    border:2px solid #000055;
    border-radius:5px;
    padding-left:5px;
    width:90%;
    height:10%;
    }
    input[type=button]{
    border:none;
    width:49%;
    height:10%;
    background-color:#000055;
    color:white;
    margin-left:46%;
    border-radius:5px;
    }
    input[type=button]:hover,input[type=button]:active{
    background-color:#5555aa;
    }
    h2{
    text-align:center;
    }
    </style>
    <title>
    User: Detailes
    </title>
    </head>
    <body id="body">
    </body>
    <script>
    function getCookieAsArray()
    {
    cook=document.cookie;
    var s=cook.split(',');
    var a=new Array();
    for(let i=0;i<s.length;i++)
    {
    a[i]=s[i].split('=')[1];
    }
    return a;
    }
    //document.onload=()=>
    {
    body=document.getElementById("body");
    user=getCookieAsArray();
    if(user[2]==='old')
    {
    user=getCookieAsArray();
    document.write(`<center><h2>${user[0].slice(0,1).toUpperCase()+user[0].slice(1)}</h2><br/>`);
    document.write(`<p>Age: ${user[3]}</p>`);
    document.write(`<p>Place: ${user[4]}</p>`);
    document.write(`<p>Post: ${user[5]}</p>`);
    document.write(`<p>Skill: ${user[6]}</p>`);
    document.write(`</center>`);
    }else
    {
    user=getCookieAsArray();
    document.write(`<center><h2>${user[0].slice(0,1).toUpperCase()+user[0].slice(1)}</h2><br/>`);
    document.write(`<input type="text" placeholder="Age" class="ins">`);
    document.write(`<input type="text" placeholder="Place" class="ins">`);
    document.write(`<input type="text" placeholder="Post" class="ins">`);
    document.write(`<input type="text" placeholder="Skill" class="ins">`);
    document.write(`</center>`);
    document.write(`<br/><input type="button" align="right" onclick="sub()" value="Submit">`);
    }

    }
    function validate()
    { let flag=true;
    let s="";
    elems=document.getElementsByClassName("ins");
    for(let i=1;i<elems.length;i++)
    {
    if(elems[i].value=="" || !(isNaN(elems[i].value)))
    {
    flag=false;
    s+=`error at input no ${i}<br/>`;
    alert(s);
    }
    }
    return flag;
    }
    function sub()
    {
    if(validate())
    {
    var x=getCookieAsArray();
    elems=document.getElementsByClassName("ins");
    let name=x[0];
    let password=x[1];
    let account='old';
    let age=elems[0].value;
    let place=elems[1].value;
    let post=elems[2].value;
    let skill=elems[3].value;
    document.cookie=`username=${name},password=${password},account=${account},age=${age},place=${place},post=${post},skill=${skill}`;
    document.location.reload();
    }
    }
    </script>
    </html>

    ReplyDelete
  2. AnonymousJune 5, 2018 at 2:43 AM

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <style>
    table{
    border-collapse:collapse;
    }
    input{
    width:30px;
    height:30px;
    display:inline-block;
    text-align:center;
    }
    td{
    border: thin solid #007d00;
    }
    input[type=button]:hover, input[type=button]:active {
    background-color: red;
    }
    input[type=button] {
    width: 46%;
    height:100%;
    background-color: green;
    border: none;
    display:inline-block;
    color:white;
    padding-left:20px;
    padding-right:20px;
    text-align:center;
    }
    div{
    width:30%;
    height:20%;
    }
    </style>
    </head>
    <body>
    <center>
    <table id="t">
    </table>
    <div>
    <input type="button" value="Solve" onclick='fill();'/>
    <input type="button" value="Clear" onclick="clear();"/>
    </div>
    </center>
    </body>
    <script src="http://underscorejs.org/underscore-min.js"></script>
    <script>
    let t=document.getElementById("t");
    let col=1;
    for(l=0;l<3;l++)
    {
    tr=document.createElement(`tr`);
    for(k=0;k<2;k++)
    {
    td=document.createElement(`td`);
    for(j=0;j<2;j++)
    {
    for(i=0;i<3;i++)
    {
    td.innerHTML+=`<input type='text' class='ins' maxlength=1 id='cl${col}' >`;
    col++;
    }
    td.innerHTML+=`<br/>`;
    }
    td.innerHTML+=`</td>`;
    tr.appendChild(td);
    }
    tr.innerHTML+=`</tr>`;
    t.appendChild(tr);
    }
    t.style.border="medium solid #007d00";
    var array;
    function findemptysell(array,r,c)
    {
    for(i=0;i<6;i++)
    {
    for(j=0;j<6;j++)
    {
    if(arr[i][j]=='0')
    {
    r=i;
    c=j;
    return {'flag':true,'row':r,'col':c};
    }
    }
    }
    return false;
    }
    function usedinrow(array,row,value)
    {
    for(i=0;i<6;i++)
    {
    if(array[row][i]==value)
    {
    return true;
    }
    }
    return false;
    }
    function usedincolumn(array,col,value)
    {
    for(i=0;i<6;i++)
    {
    if(array[i][col]==value)
    {
    return true;
    }
    }
    return false;
    }
    function usedinmaze(array,row,column,value)
    {
    for(i=2;i<2;i++)
    {
    for(j=0;j<2;j++)
    {
    if(array[i+row][j+column]==value)
    {
    return true;
    }
    }
    }
    return false;
    }
    function isSafe(array,row,column,value)
    {
    return !(usedinrow(array,row,value) || usedincolumn(array,column,value) || usedinmaze(array,row-row%2,col-col%2));
    }
    function solve(array)
    {
    x=findemptysell();
    if(!x.flag)
    {
    return true;
    }
    row=x.row;
    column=x.col;
    for(i=0;i<7;i++)
    {
    if(isSafe(array,row,column))
    {
    array[row][column]=i;
    if(solve(array))
    {
    return true;
    }
    array[row][column]=0;
    }
    }
    return false;
    }
    function fill()
    {
    elem=document.getElementsByClassName("ins");
    array=new Array([],[],[]);

    for(let j=0;j<elem.length;j++)
    {
    r=j/6;
    c=j%6;
    if(elem[j].value==='')
    {
    array[r][c]=0;
    }else{
    array[r][c]=elem[j].value;
    }
    }
    console.log(array);
    j=0;
    for(let i=0;i<6;i++)
    {
    x=array[i]
    for(let v=0;v<6;v++)
    {
    elem[j].value=x[v];
    j++;
    }
    }
    }
    </script>
    </html>

    ReplyDelete
  3. AnonymousJune 5, 2018 at 2:47 AM

    <html>
    <head>
    <title> 6x6 Sudoku </title>
    <style>
    *{
    text-align:center;
    }

    input{
    width:150px;
    height:50px;
    font-size:20;
    font-weight:bold;
    }

    .btn{
    border: 2px solid black;
    background-color: white;
    color: white; /* Add a text color */
    padding: 14px 28px; /* Add some padding */
    font-size: 16px;
    cursor:
    }
    .info {
    border-color: #2196F3;
    color: dodgerblue;
    }
    .sudoku { width: 50px; height: 50px; }
    </style>
    <script>
    var iterations = 0;
    function SudokuCreate(maxNum) {
    var numSet = [];
    var sudokuArray = [];
    for (var i = 1; i <= maxNum; ++i) {
    numSet.push(i);
    sudokuArray.push(new Array(maxNum)); // initialize with empty values
    }
    var horizontalBoxSize = 3, verticalBoxSize = 2;
    function getRandomInt(max) { // get a random number btw 1 and max
    return Math.floor(Math.random() * max);
    }
    function placeNumber(num, arr) {
    var lastRowIndex = arr.length - 1,
    lastRow = arr[lastRowIndex],
    rowsToCheck = lastRowIndex % verticalBoxSize,
    safeIndexes = [],
    randomSafeIndex;


    function findSafeIndex(boxesUsed) {

    function boxSafe(index) {
    var indexBox = Math.floor(index / horizontalBoxSize);
    if (boxesUsed.indexOf(indexBox) >= 0) {
    return false;
    } else {
    return true;
    }
    }


    for (var indexInLastRow = 0, rowLen = lastRow.length; indexInLastRow < rowLen; ++indexInLastRow) {
    var columnSafe = true;


    for (var rowIndex = arr.length - 1; rowIndex >= 0; --rowIndex) {
    if(arr[rowIndex][indexInLastRow] === num) {
    columnSafe = false;
    }
    }


    if(lastRow[indexInLastRow] === undefined && columnSafe && boxSafe(indexInLastRow)) {
    safeIndexes.push(indexInLastRow);
    }
    }


    return safeIndexes[getRandomInt(safeIndexes.length)];
    }

    var horizontalBoxesUsed = [];


    if (rowsToCheck > 0) {
    for (var i = rowsToCheck; i > 0; --i) {
    var horizontalBox = Math.floor(arr[lastRowIndex - i].indexOf(num) / horizontalBoxSize);
    horizontalBoxesUsed.push( horizontalBox );
    }
    }


    randomSafeIndex = findSafeIndex(horizontalBoxesUsed);


    if(randomSafeIndex === undefined) {
    return num;
    } else {

    ReplyDelete
  4. AnonymousJune 5, 2018 at 2:48 AM

    lastRow[randomSafeIndex] = num;
    return true;
    }
    }


    for (var i = numSet.length - 1; i >= 0; --i) {
    var workingArray = [];
    var possible = true;
    while (sudokuArray.length > 0) {
    workingArray.push(sudokuArray.shift()); //put data into working array, finally it will be the req. sudoku
    //document.write(workingArray)
    possible = placeNumber(numSet[i], workingArray);


    if(possible !== true) {
    ++iterations;
    return SudokuCreate(maxNum);
    }
    }


    sudokuArray = workingArray;
    }


    return sudokuArray;
    }

    function clicked()
    {
    var d=[];
    d=SudokuCreate(6);

    var su = [[],[],[],[],[],[]]; // declare 6x6 array su[][]

    su=d;

    //row1
    document.sdku.sqr1.value=su[0][0]
    document.sdku.sqr2.value=su[0][1]
    document.sdku.sqr3.value=su[0][2]
    document.sdku.sqr4.value=su[0][3]
    document.sdku.sqr5.value=su[0][4]
    document.sdku.sqr6.value=su[0][5]
    //row2
    document.sdku.sqr7.value=su[1][0]
    document.sdku.sqr8.value=su[1][1]
    document.sdku.sqr9.value=su[1][2]
    document.sdku.sqr10.value=su[1][3]
    document.sdku.sqr11.value=su[1][4]
    document.sdku.sqr12.value=su[1][5]
    //row3
    document.sdku.sqr13.value=su[2][0]
    document.sdku.sqr14.value=su[2][1]
    document.sdku.sqr15.value=su[2][2]
    document.sdku.sqr16.value=su[2][3]
    document.sdku.sqr17.value=su[2][4]
    document.sdku.sqr18.value=su[2][5]
    //row4
    document.sdku.sqr19.value=su[3][0]
    document.sdku.sqr20.value=su[3][1]
    document.sdku.sqr21.value=su[3][2]
    document.sdku.sqr22.value=su[3][3]
    document.sdku.sqr23.value=su[3][4]
    document.sdku.sqr24.value=su[3][5]
    //row5
    document.sdku.sqr25.value=su[4][0]
    document.sdku.sqr26.value=su[4][1]
    document.sdku.sqr27.value=su[4][2]
    document.sdku.sqr28.value=su[4][3]
    document.sdku.sqr29.value=su[4][4]
    document.sdku.sqr30.value=su[4][5]
    //row6
    document.sdku.sqr31.value=su[5][0]
    document.sdku.sqr32.value=su[5][1]
    document.sdku.sqr33.value=su[5][2]
    document.sdku.sqr34.value=su[5][3]
    document.sdku.sqr35.value=su[5][4]
    document.sdku.sqr36.value=su[5][5]
    //alert(su[0][1]);
    }




    function clicked_generate(f)
    {
    for (var a=[],i=1;i<7;++i) a[i]=i;

    function shuffle(array) {
    var tmp, current, top = array.length;
    if(top) while(--top) {
    current = Math.floor(Math.random() * (top + 1));
    tmp = array[current];
    array[current] = array[top];
    array[top] = tmp;
    }
    return array;
    }

    ReplyDelete
  5. AnonymousJune 5, 2018 at 2:49 AM

    var su = [[],[],[],[],[],[]]; // declare 6x6 array su[][]

    su=f;
    // fill su with random null values

    a = shuffle(a);


    //row1
    document.sdku.sqr1.value=su[0][0]
    document.sdku.sqr1.disabled=true;
    document.sdku.sqr2.value=""
    document.sdku.sqr3.value=su[0][2]
    document.sdku.sqr3.disabled=true;
    document.sdku.sqr4.value=""
    document.sdku.sqr5.value=su[0][4]
    document.sdku.sqr5.disabled=true;
    document.sdku.sqr6.value=""
    //row2
    document.sdku.sqr7.value=""
    document.sdku.sqr8.value=""
    document.sdku.sqr9.value=""
    document.sdku.sqr10.value=su[1][3]
    document.sdku.sqr10.disabled=true;
    document.sdku.sqr11.value=""
    document.sdku.sqr12.value=su[1][5]
    document.sdku.sqr12.disabled=true;
    //row3
    document.sdku.sqr13.value=su[2][0]
    document.sdku.sqr13.disabled=true;
    document.sdku.sqr14.value=""
    document.sdku.sqr15.value=su[2][2]
    document.sdku.sqr15.disabled=true;
    document.sdku.sqr16.value=""
    document.sdku.sqr17.value=su[2][4]
    document.sdku.sqr17.disabled=true;
    document.sdku.sqr18.value=""
    //row4
    document.sdku.sqr19.value=""
    document.sdku.sqr20.value=su[3][1]
    document.sdku.sqr20.disabled=true;
    document.sdku.sqr21.value=""
    document.sdku.sqr22.value=su[3][3]
    document.sdku.sqr22.disabled=true;
    document.sdku.sqr23.value=""
    document.sdku.sqr24.value=su[3][5]
    document.sdku.sqr24.disabled=true;
    //row5
    document.sdku.sqr25.value=""
    document.sdku.sqr26.value=""
    document.sdku.sqr27.value=su[4][2]
    document.sdku.sqr27.disabled=true;
    document.sdku.sqr28.value=""
    document.sdku.sqr29.value=su[4][4]
    document.sdku.sqr29.disabled=true;
    document.sdku.sqr30.value=""
    //row6
    document.sdku.sqr31.value=su[5][0]
    document.sdku.sqr31.disabled=true;
    document.sdku.sqr32.value=su[5][1]
    document.sdku.sqr32.disabled=true;
    document.sdku.sqr33.value=""
    document.sdku.sqr34.value=""
    document.sdku.sqr35.value=""
    document.sdku.sqr36.value=su[5][5]
    document.sdku.sqr36.disabled=true;
    //alert(su[3][4]);
    }


    function clicked_solve(f)
    {
    //alert("not completed");
    var su = [[],[],[],[],[],[]]; // declare 6x6 array su[][]
    su=f
    //su=d;
    var c=0;
    //row1
    document.sdku.sqr1.value=su[0][0];
    var a=document.sdku.sqr2.value;
    var b=su[0][1];
    if(a==b){
    //alert("lol");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr3.value=su[0][2];
    var t=document.sdku.sqr4.value;
    var f=su[0][3];
    if(t==f){
    //alert("lol1");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr5.value=su[0][4];

    ReplyDelete
  6. AnonymousJune 5, 2018 at 2:49 AM

    var u=document.sdku.sqr6.value;
    var g=su[0][5];
    if(u==g){
    //("lol2");
    c=c+1;
    }
    else{
    c=0
    }
    //row2
    var w=document.sdku.sqr7.value
    var y=su[1][0];
    if(w==y){
    //alert("lol3");
    c=c+1;
    }
    else{
    c=0
    }
    var s=document.sdku.sqr8.value;
    var j=su[1][1];
    if(s==j){
    //alert("lol4");
    c=c+1;
    }
    else{
    c=0
    }
    var l=document.sdku.sqr9.value;
    var k=su[1][2];

    if(l==k){
    //alert("lol5");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr10.value=su[1][3];

    var p=document.sdku.sqr11.value;
    var o=su[1][4];
    if(p==o){
    //alert("lol6");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr12.value=su[1][5];

    //row3
    document.sdku.sqr13.value=su[2][0]
    var n=document.sdku.sqr14.value;
    var m=su[2][1];
    if(n==m){
    //alert("lol7");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr15.value=su[2][2]
    var z=document.sdku.sqr16.value;
    var x=su[2][3];
    if(z==x){
    //alert("lol8");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr17.value=su[2][4]
    var r1=document.sdku.sqr18.value;
    var rr=su[2][5];
    if(r1==rr){
    //alert("lol9");
    c=c+1;
    }
    else{
    c=0
    }
    //row4
    var ll=document.sdku.sqr19.value;
    var ff=su[3][0];
    if(ll==ff){
    //alert("lol10");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr20.value=su[3][1]
    var kk=document.sdku.sqr21.value;
    var oo=su[3][2];
    if(kk==oo){
    //alert("lol11");
    c=c+1;
    }

    ReplyDelete
  7. AnonymousJune 5, 2018 at 2:50 AM

    else{
    c=0
    }
    document.sdku.sqr22.value=su[3][3]
    var aa=document.sdku.sqr23.value;
    var bb=su[3][4];
    if(aa==bb){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr24.value=su[3][5]
    //row5
    var ww=document.sdku.sqr25.value;
    var qq=su[4][0];
    if(ww==qq){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }

    var dd=document.sdku.sqr26.value;
    var gg=su[4][1];
    if(dd==gg){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr27.value=su[4][2]
    var tt=document.sdku.sqr28.value;
    var yy=su[4][3];
    if(tt==yy){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr29.value=su[4][4]
    var jj=document.sdku.sqr30.value;
    var hh=su[4][5];
    if(jj==hh){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    //row6
    document.sdku.sqr31.value=su[5][0]
    document.sdku.sqr32.value=su[5][1]
    var uu=document.sdku.sqr33.value;
    var aaa=su[5][2]

    if(uu==aaa){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    var eee=document.sdku.sqr34.value;
    var bbb=su[5][3];
    if(eee==bbb){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    var a1=document.sdku.sqr35.value;
    var b1=su[5][4];
    if(a1==b1){
    //alert("lol12");
    c=c+1;
    }
    else{
    c=0
    }
    document.sdku.sqr36.value=su[5][5]
    //alert(su[0][1]);
    if(c>1){
    alert("Congratulations");
    }
    else{
    alert("Not completed");
    //alert("Start a newgame");
    }
    }
    </script>
    </head>
    <body>
    <script>

    ReplyDelete
  8. AnonymousJune 5, 2018 at 2:52 AM

    var d=[];
    window.d=SudokuCreate(6);
    </script>
    <form NAME="sdku" method="post">
    <table width="100" border="1" align="center">
    <tr>
    <input TYPE="text" NAME="sqr1" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr2" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr3" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr4" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr5" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr6" class="sudoku" value="" >
    </tr><br>
    <tr>
    <input TYPE="text" NAME="sqr7" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr8" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr9" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr10" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr11" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr12" class="sudoku" value="" >
    </tr><br>
    <tr>
    <input TYPE="text" NAME="sqr13" class="sudoku" value="">
    <input TYPE="text" NAME="sqr14" class="sudoku" value="">

    ReplyDelete
  9. AnonymousJune 5, 2018 at 2:52 AM

    <input TYPE="text" NAME="sqr15" class="sudoku" value="">
    <input TYPE="text" NAME="sqr16" class="sudoku" value="">
    <input TYPE="text" NAME="sqr17" class="sudoku" value="">
    <input TYPE="text" NAME="sqr18" class="sudoku" value="">
    </tr><br>
    <tr>
    <input TYPE="text" NAME="sqr19" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr20" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr21" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr22" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr23" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr24" class="sudoku" value="" >
    </tr><br>
    <tr>
    <input TYPE="text" NAME="sqr25" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr26" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr27" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr28" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr29" class="sudoku" value="" >
    <input TYPE="text" NAME="sqr30" class="sudoku" value="" >
    </tr><br>
    <tr>
    <input TYPE="text" NAME="sqr31" class="sudoku" value="">
    <input TYPE="text" NAME="sqr32" class="sudoku" value="">
    <input TYPE="text" NAME="sqr33" class="sudoku" value="">
    <input TYPE="text" NAME="sqr34" class="sudoku" value="">
    <input TYPE="text" NAME="sqr35" class="sudoku" value="">
    <input TYPE="text" NAME="sqr36" class="sudoku" value="">
    </tr>
    </table><br>
    <input type="button" class="btn info" value="Start" onclick="window.d=SudokuCreate(6);clicked_generate(window.d);">
    <input type="button" class="btn info" value="Finish" onclick="clicked_solve(window.d)">
    </form>
    </body>
    </html>

    ReplyDelete

Post a Comment

Popular posts from this blog

JavaScript:Magic Square

<html> <head> <title> Game:MagicalSquare. </title> </head> <style> table{ border-style: solid; border-color: white; border-width: 2px; width: 30%; height: 25%; text-align: center; padding-top: 20px; margin-top: 5px; padding-bottom: 20px; background-color:#00edff; } input[type=text]{ width:60px; height:60px; border: solid #063; border-radius:20px; font-size:16px; text-align:center; background-color:#55edff; color:white; } body{ border: solid #063; border-radius:20px; width=30%; height:70%; color:white; background-color:gray; } h2{ margin-top: 10px; border-color: white; border-width: 1px; border-style: solid; width: 30%; height: 40px; padding-top: 10px;; } div{ width:30%; height:12%; border-style:solid; border-color:white; border-width:2px; margin-top:5px; } input[type=button]:hover, input[type=button]:active { background-color: red; } input[type=button] {
2 comments
Read more

Python Game By Nishad TK

from random import randint import re class game: def __init__(self): self.no_of_guesses =0 self.rabbit=0 self.portuga=0 self.inp=0 self.secret_no=self.rand() def addRabbit(self): self.rabbit+=1 def addPortuga(self): self.portuga+=1 def addGuess(self): self.no_of_guesses+=1 def rand(self): unique=[] while not (len(unique)>3): ran=[] for i in range(0,9): no=(randint(0,9)) ran.append(no) for j in range(0,9): if ran[j] not in unique: unique.append(ran[j]) return str(unique[0])+str(unique[1])+str(unique[2])+str(unique[3]) def checkDupe(self,inc): flag=0 for i in range(0,4): x=inc[:i]+inc[i+1:] if inc[i] in x: flag+=1 if flag==0: return False else: return True def play(se
3 comments
Read more