Scribd
Upload
10 views

CSS Practical 10

Uploaded by

Piush Gogi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
10 views

CSS Practical 10

Uploaded by

Piush Gogi
Copyright
© © All Rights Reserved
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