Skip to main content

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] {
    width: 49%;
    height:100%;
	background-color: green;
    border: none;
	display:inline-block;
	color:white;
	padding-left:20px;
	padding-right:20px;
	text-align:center;
}
</style>
<body id="bdy">
<center>
<h2>Enter The Square</h2>
<table id="tbl">
</table>
<div>
<input type="button" value="Check" />
<input type="button" value="Clear"/>
</div>
</center>
</body>
<script>
const body=document.getElementById("bdy");
const table=document.getElementById("tbl");
for(let i=0;i<3;i++)
{
	table.innerHTML+=`<tr>`;
		table.innerHTML+=`<td><input type='text'> <input type='text'> <input type='text'></td>`;
	table.innerHTML+=`</tr>`;
}
</script>
</html>

Comments

  1. AnonymousMay 31, 2018 at 4:49 AM

    <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%;
    }
    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. AnonymousMay 31, 2018 at 4:53 AM

    <html>
    <head>
    <title>
    User:Login
    </title>
    </head>
    <style>
    h2{
    text-align:center;
    margin-top:10%;
    }
    .text{
    display:block;
    margin-top:5%;
    border:2px solid #000055;
    border-radius:5px;
    padding-left:5px;
    width:90%;
    height:10%;
    }
    p{
    height:20px;
    display:block;
    }
    div{
    border-color:black;
    border-style:solid;
    border-width:thin;
    width:28%;
    margin-bottom:1px;
    }
    .container{
    border:none;
    width:100%;
    }
    input[type=button]{
    border:none;
    width:49%;
    height:10%;
    background-color:#000055;
    color:white;
    }
    input[type=button]:hover,input[type=button]:active{
    background-color:#5555aa;
    }
    .textcontainer{
    height:68%;
    background-color:#f0f0f0;
    margin-top:4%;
    }
    .buttoncontainer{
    background-color:#000055;
    }
    img{
    width:40%;
    height:35%;
    border-radius:100px;
    }
    </style>
    <body>
    <div class="container">
    <center>
    <div class="textcontainer">
    <h2>
    Login
    </h2>
    <img src="user.jpg"/>
    <input type="Text" class="text" placeholder="username" id="username" required />
    <p id="uerror"></p>
    <input type="password" class="text" placeholder="password" id="password" required />
    <p id="perror"></p>
    </div>
    <div class="buttoncontainer">
    <input type="button" value="login" onclick="login();"/>
    <input type="button" value="signup" onclick="signup();"/>
    </div>
    </center>
    </div>
    </body>
    <script>
    function login()
    {
    if(validate())
    {
    username=document.getElementById("username").value;
    password=document.getElementById("password").value;
    let cook=document.cookie.includes(`=${username}`);
    if(cook===false)
    {
    document.cookie=`username=${username},password=${password},account=new;`;
    }
    window.location="signup.html";
    }
    }
    function signup()
    {
    if(validate())
    {
    document.cookie=`username=${username},password=${password},account=new;`;
    window.location="signup.html";
    }
    }
    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];
    }
    console.log(a);
    return a;
    }
    function validate()
    { let flag=true;
    username=document.getElementById("username").value;
    password=document.getElementById("password").value;
    let x=getCookieAsArray();
    console.log(x);
    if(username=="")
    {
    flag=false;
    document.getElementById("username").style.border="2px solid #aa0000";
    document.getElementById("uerror").innerHTML="username can not be blank!";
    document.getElementById("uerror").style.color="#770000";
    }
    if(password=="")
    {
    flag=false;
    document.getElementById("password").style.border="2px solid #aa0000";
    document.getElementById("perror").innerHTML="password can not be blank!";
    document.getElementById("perror").style.color="#770000";
    }
    else if(password.length<8)
    {
    flag=false;
    document.getElementById("password").style.border="2px solid #aa0000";
    document.getElementById("perror").innerHTML="password is less than 8 characters!";
    document.getElementById("perror").style.color="#770000";
    }else if(username===x[0] && password!==x[1])
    {
    flag=false;
    document.getElementById("password").style.border="2px solid #aa0000";
    document.getElementById("perror").innerHTML="password is incorrect!";
    document.getElementById("perror").style.color="#770000";
    }
    return flag;
    }
    </script>
    </html>

    ReplyDelete

Post a Comment

Popular posts from this blog

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

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 ho
9 comments
Read more