Scribd
Upload
10 views

CSS Practical 10

Uploaded by

Piush Gogi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS Practical 10

Uploaded by

Piush Gogi
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

PRACTICAL NO: 10

Develop a webpage for creating session and persistent cookies. Observe


the effects with browser cookies settings.

PROGRAM:

<!DOCTYPE html>
<html>
<head>
<title>Experiment 10</title>
<style>
body
{
background-image: url('i17.jpg');
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
margin: 0;
padding: 0;
color: white;
}
.container
{
padding: 50px;
width: 400px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 30px;
}
.cookieOutput
{
background-color: transparent;
height: 220px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
width: 200px;
margin: auto;
}
label
{
display: block;
font-weight: bold;
margin-bottom: 5px;
}
h1
{
text-align: left;
margin-top: 20px;
margin-bottom: 2px;
}
#createButton, #readButton, #expiryButton, #deleteButton
{
width: 55%;
padding: 5px;
font-weight: bold;
font-family: Times New Roman;
font-size: 14px;
background-color: white;
color: black;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>

<body>

<h1>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&
nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;SESSION AND
COOKIES</h1>

<div class="container">
<div class="cookieOutput">
<h3>CREATE COOKIE</h3>
<label for="cookieName">Cookie Name:</label>
<input type="text" id="cookieName" required><br><br>
<label for="cookieValue">Cookie Value:</label>
<input type="text" id="cookieValue" required><br><br>
<button type="submit" id="createButton"
onclick="createCookie()">Create Cookie</button>
</div>

<div class="cookieOutput">
<h3>READ A COOKIE</h3>
<label for="readCookieName">Cookie Name:</label>
<input type="text" id="readCookieName" required><br><br>
<button type="submit" id="readButton"
onclick="readCookie()">Read Cookie</button><br><br>
<div id="readCookieValue"></div>
</div>

<div class "cookieOutput">


<h3>SET EXPIRY DATE</h3>
<label for="expiryCookieName">Cookie Name:</label>
<input type="text" id="expiryCookieName" required><br><br>
<label for="expiryDays">Expiry Days:</label>
<input type="number" id="expiryDays" required><br><br>
<button type="submit" id="expiryButton"
onclick="setExpireCookie()">Set Expiry Date</button>
</div>

<div class="cookieOutput">
<h3>DELETE A COOKIE</h3>
<label for="deleteCookieName">Cookie Name:</label>
<input type="text" id="deleteCookieName" required><br><br>
<button type="submit" id="deleteButton"
onclick="deleteCookie()">Delete Cookie</button>
</div>
</div>

<script type="text/javascript">
function createCookie()
{
var name = document.getElementById('cookieName').value;
var value = document.getElementById('cookieValue').value;
document.cookie = name + "=" + value;
alert("Cookie Created.....\nName: " + name + "\nValue: " + value);
document.getElementById('cookieName').value = "";
document.getElementById('cookieValue').value = "";
}
function readCookie()
{
var name = document.getElementById("readCookieName").value;
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++)
{
var cookie = cookies[i].trim();
if (cookie.startsWith(name + "="))
{
var value = cookie.substring(name.length + 1);
alert("Read Cookie.....\nName: " + name + "\nValue: " +
value);
return;
}
}
alert("Cookie not found");
document.getElementById('readCookieName').value = "";
}
function setExpireCookie()
{
var name =
document.getElementById('expiryCookieName').value;
var days = document.getElementById('expiryDays').value;
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "expires=" + date.toUTCString();
document.cookie = name + "=; " + expires + "; path=/";
alert("Expiry Date Set for Cookie.....\nName: " + name +
"\nExpiry Days: " + days);
document.getElementById('expiryCookieName').value = "";
document.getElementById('expiryDays').value = "";
}
function deleteCookie()
{
var name =
document.getElementById("deleteCookieName").value;
document.cookie = name + '=; expires=Thu, 01 Jan 1970 00:00:00
UTC; path=/;';
alert("Cookie Deleted.....\nName: " + name);
document.getElementById('deleteCookieName').value = "";
}
</script>
</body>
</html>
OUTPUT:

You might also like