Scribd
Upload
13 views10 pages

Activite Localstorage

Code activite local storage at html 5

Uploaded by

civillab82
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
13 views10 pages

Activite Localstorage

Code activite local storage at html 5

Uploaded by

civillab82
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/ 10

Third copy:

Index.html:
<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="index.css" />

</head>

<body id="myPage" onload="load()">

<h1> Choose a theme: </h1>

<input type="button" id="b1" value="Theme Day" />

<input type="button" id="b2" value="Theme Night" />

<p id="p1"> This is an example of use of HTML 5 Local Storage API </p>

<form method="post" action="file.php" >

<input type="button" id="b3" value="Change Text" onclick="save()" />

<p> write a text to put it above and than click Change Text </p>

<textarea id="p2" cols="47" rows="10"></textarea>

</form>

<canvas id="myCanvas" width="600" height="500" style="border:0px


solid #c3c3c3;"></canvas>

<script src="index.js" type="text/javascript"></script>

</body>

</html>
Index.css:
.day {

background-color:lightgray;

color:black;

.night {

background-color:black;

color:white;

Index.js:
function ChangeText() {

var x=document.getElementById("p2").value

document.getElementById("p1").innerHTML=x;

localStorage.setItem("comment", x);

function load() {

if(localStorage.getItem("comment")) {

document.getElementById("p1").innerHTML=localStorage.getItem("comment");

}
function applyTheme(theme) {

document.getElementById("myPage").className=theme;

localStorage.setItem("theme", theme);

function applyDayTheme() {

applyTheme("day");

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FFD700";

ctx.beginPath();

ctx.arc(140,130,100,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

ctx.font="20px serif";

ctx.fillStyle="Black";

ctx.fillText("The Sun",105,270);

function applyNightTheme() {

applyTheme("night");

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#D3D3D3";

ctx.beginPath();

ctx.arc(140,130,100,0,Math.PI*2,true);
ctx.closePath();

ctx.fill();

ctx.font="20px serif";

ctx.fillText("The Moon",100,270);

function addButtonsListeners() {

document.getElementById("b1").addEventListener("click", applyDayTheme);

document.getElementById("b2").addEventListener("click",
applyNightTheme);

document.getElementById("b3").addEventListener("click", ChangeText);

function initiate() {

if(localStorage.getItem("theme")===null)

applyDayTheme();

else

applyTheme(localStorage.getItem("theme"));

addButtonsListeners();

initiate();
Second copy:

Index.html:
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="index.css" />

</head>

<body id="myPage">

<h1> Choose a theme: </h1>

<input type="button" id="b1" value="Theme Day" />

<input type="button" id="b2" value="Theme Night" />

<p> This is an example of use of HTML 5 Local Storage API </p>

<canvas id="myCanvas" width="600" height="500" style="border:0px solid


#c3c3c3;"></canvas>

<script src="index.js" type="text/javascript"></script>

</body>

</html>
Index.css:
.day {

background-color:lightgray;

color:black;

.night {

background-color:black;

color:white;

Index.js:
function applyTheme(theme) {

document.getElementById("myPage").className=theme;

localStorage.setItem("theme", theme);

function applyDayTheme() {

applyTheme("day");

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FFD700";

ctx.beginPath();

ctx.arc(150,130,100,0,Math.PI*2,true);
ctx.closePath();

ctx.fill();

ctx.font="20px serif";

ctx.fillStyle="Black";

ctx.fillText("The Sun",115,270);

function applyNightTheme() {

applyTheme("night");

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#D3D3D3";

ctx.beginPath();

ctx.arc(150,130,100,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

ctx.font="20px serif";

ctx.fillText("The Moon",110,270);

function addButtonsListeners() {

document.getElementById("b1").addEventListener("click", applyDayTheme);

document.getElementById("b2").addEventListener("click",
applyNightTheme);

}
function initiate() {

if(localStorage.getItem("theme")===null)

applyDayTheme();

else

applyTheme(localStorage.getItem("theme"));

addButtonsListeners();

initiate();
First copy:
Index.html:
<!DOCTYPE html>
<html>

<head>

<meta charset="utf-8"/>

<link rel="stylesheet" type="text/css" href="index.css" />

</head>

<body id="myPage">

<h1> Choose a theme: </h1>

<input type="button" id="b1" value="Theme Day" />

<input type="button" id="b2" value="Theme Night" />

<p> This is an example of use of HTML 5 Local Storage API </p>

<script src="index.js" type="text/javascript"></script>

</body>

</html>

Index.css:
.day {

background-color:lightgray;

color:black;

.night {

background-color:black;

color:white;

}
Index.js:
function applyTheme(theme) {

document.getElementById("myPage").className=theme;

localStorage.setItem("theme", theme);

function applyDayTheme() {

applyTheme("day");

function applyNightTheme() {

applyTheme("night");

function addButtonsListeners() {

document.getElementById("b1").addEventListener("click", applyDayTheme);

document.getElementById("b2").addEventListener("click",
applyNightTheme);

function initiate() {

if(localStorage.getItem("theme")===null)

applyDayTheme();

else

applyTheme(localStorage.getItem("theme"));

addButtonsListeners();

initiate();

You might also like