Skip to content

Commit 9488281

Browse files
rikreddy97rikreddy97
committed
webstorage API
1 parent 4375606 commit 9488281

File tree

3 files changed

+299
-0
lines changed

3 files changed

+299
-0
lines changed

‎JavaScript/westorage API/css/main.css

Lines changed: 228 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,228 @@
1+
* {
2+
margin: 0;
3+
padding: 0;
4+
-webkit-box-sizing: border-box;
5+
box-sizing: border-box;
6+
}
7+
8+
html {
9+
font-family: Arial, Helvetica, sans-serif;
10+
font-size: 16px;
11+
}
12+
13+
body {
14+
min-height: 100vh;
15+
display: -webkit-box;
16+
display: -ms-flexbox;
17+
display: flex;
18+
-webkit-box-orient: vertical;
19+
-webkit-box-direction: normal;
20+
-ms-flex-direction: column;
21+
flex-direction: column;
22+
-webkit-box-pack: center;
23+
-ms-flex-pack: center;
24+
justify-content: center;
25+
-webkit-box-align: center;
26+
-ms-flex-align: center;
27+
align-items: center;
28+
}
29+
30+
main {
31+
display: -webkit-box;
32+
display: -ms-flexbox;
33+
display: flex;
34+
-webkit-box-orient: vertical;
35+
-webkit-box-direction: normal;
36+
-ms-flex-direction: column;
37+
flex-direction: column;
38+
-webkit-box-pack: center;
39+
-ms-flex-pack: center;
40+
justify-content: center;
41+
-webkit-box-align: center;
42+
-ms-flex-align: center;
43+
align-items: center;
44+
background-color: #708090;
45+
border: 1px solid #000;
46+
width: 100%;
47+
}
48+
49+
.height100 {
50+
height: 100px;
51+
}
52+
.purple {
53+
background-color: purple;
54+
}
55+
.blue {
56+
background-color: blue;
57+
}
58+
.darkblue {
59+
background-color: #00008b;
60+
}
61+
.black {
62+
background-color: #000;
63+
}
64+
65+
nav {
66+
display: -webkit-box;
67+
display: -ms-flexbox;
68+
display: flex;
69+
-webkit-box-pack: justify;
70+
-ms-flex-pack: justify;
71+
justify-content: space-between;
72+
-webkit-box-align: center;
73+
-ms-flex-align: center;
74+
align-items: center;
75+
padding: 1rem;
76+
width: 100%;
77+
height: 48px;
78+
position: fixed;
79+
top: 0;
80+
border-bottom: 1px solid #fff;
81+
z-index: 2;
82+
background-color: #000;
83+
color: #fff;
84+
}
85+
86+
section {
87+
display: -webkit-box;
88+
display: -ms-flexbox;
89+
display: flex;
90+
-webkit-box-orient: vertical;
91+
-webkit-box-direction: normal;
92+
-ms-flex-direction: column;
93+
flex-direction: column;
94+
-webkit-box-pack: center;
95+
-ms-flex-pack: center;
96+
justify-content: center;
97+
-webkit-box-align: center;
98+
-ms-flex-align: center;
99+
align-items: center;
100+
width: 100%;
101+
height: 100vh;
102+
z-index: 1;
103+
padding-top: 48px;
104+
}
105+
106+
/* Depending on the view example (1, 2, or 3),
107+
you will want to set display:none for the other two
108+
and display:flex for the example you want to see. */
109+
.view1 {
110+
display: -webkit-box;
111+
display: -ms-flexbox;
112+
display: flex;
113+
-webkit-box-orient: horizontal;
114+
-webkit-box-direction: normal;
115+
-ms-flex-direction: row;
116+
flex-direction: row;
117+
-ms-flex-wrap: wrap;
118+
flex-wrap: wrap;
119+
-webkit-box-pack: space-evenly;
120+
-ms-flex-pack: space-evenly;
121+
justify-content: space-evenly;
122+
background-color: #d3d3d3;
123+
color: #000;
124+
}
125+
126+
.view1 div {
127+
display: -webkit-box;
128+
display: -ms-flexbox;
129+
display: flex;
130+
-webkit-box-orient: vertical;
131+
-webkit-box-direction: normal;
132+
-ms-flex-direction: column;
133+
flex-direction: column;
134+
-webkit-box-pack: center;
135+
-ms-flex-pack: center;
136+
justify-content: center;
137+
-webkit-box-align: center;
138+
-ms-flex-align: center;
139+
align-items: center;
140+
width: 100px;
141+
height: 100px;
142+
background-color: #000;
143+
color: #fff;
144+
margin: 10px;
145+
}
146+
147+
.view2 {
148+
display: -webkit-box;
149+
display: -ms-flexbox;
150+
display: flex;
151+
-webkit-box-orient: vertical;
152+
-webkit-box-direction: normal;
153+
-ms-flex-direction: column;
154+
flex-direction: column;
155+
-webkit-box-pack: center;
156+
-ms-flex-pack: center;
157+
justify-content: center;
158+
-webkit-box-align: center;
159+
-ms-flex-align: center;
160+
align-items: center;
161+
display: none;
162+
color: #fff;
163+
max-width: 400px;
164+
max-height: 60%;
165+
padding-top: 0;
166+
}
167+
168+
.view2 div {
169+
display: -webkit-box;
170+
display: -ms-flexbox;
171+
display: flex;
172+
-webkit-box-orient: vertical;
173+
-webkit-box-direction: normal;
174+
-ms-flex-direction: column;
175+
flex-direction: column;
176+
-webkit-box-pack: center;
177+
-ms-flex-pack: center;
178+
justify-content: center;
179+
-webkit-box-align: center;
180+
-ms-flex-align: center;
181+
align-items: center;
182+
width: 200px;
183+
height: 200px;
184+
color: #fff;
185+
margin: 10px;
186+
}
187+
188+
.view3 {
189+
display: -webkit-box;
190+
display: -ms-flexbox;
191+
display: flex;
192+
-webkit-box-orient: vertical;
193+
-webkit-box-direction: normal;
194+
-ms-flex-direction: column;
195+
flex-direction: column;
196+
-webkit-box-pack: center;
197+
-ms-flex-pack: center;
198+
justify-content: center;
199+
-webkit-box-align: center;
200+
-ms-flex-align: center;
201+
align-items: center;
202+
display: none;
203+
background-color: #d3d3d3;
204+
border: 1px solid #000;
205+
max-width: 400px;
206+
padding: 2rem;
207+
}
208+
209+
.view3 form label {
210+
color: #000;
211+
margin-right: 1rem;
212+
font-size: 1.5rem;
213+
}
214+
215+
.view3 form input {
216+
width: 100%;
217+
line-height: 1.5rem;
218+
font-size: 1.5rem;
219+
}
220+
221+
.view3 form button {
222+
display: block;
223+
margin-top: 1rem;
224+
margin-left: auto;
225+
font-size: 1.25rem;
226+
padding: 0.75rem;
227+
border-radius: 10px;
228+
}

‎JavaScript/westorage API/index.html

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>My Page</title>
8+
<link rel="stylesheet" href="css/main.css" />
9+
<script defer src="js/main.js"></script>
10+
</head>
11+
12+
<body>
13+
<nav>
14+
<h1>My Page</h1>
15+
</nav>
16+
<main>
17+
<section id="view1" class="view1">
18+
<div>1</div>
19+
<div>2</div>
20+
<div>3</div>
21+
<div>4</div>
22+
<div>5</div>
23+
<div>6</div>
24+
<div>7</div>
25+
<div>8</div>
26+
<div>9</div>
27+
<div>10</div>
28+
<div>11</div>
29+
<div>12</div>
30+
</section>
31+
<section id="view2" class="view2 darkblue">
32+
<div class="black">
33+
<h2>My 2nd View</h2>
34+
</div>
35+
</section>
36+
<section id="view3" class="view3">
37+
<form id="myForm">
38+
<label for="myTextInput">Text Input:</label>
39+
<input type="text" id="myTextInput" autocomplete="off" />
40+
<button type="submit">Submit</button>
41+
</form>
42+
</section>
43+
</main>
44+
45+
</body>
46+
47+
</html>

‎JavaScript/westorage API/js/main.js

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* Webstorage API is not part of DOM
2+
webstorage API is available in JS via global variable : window
3+
2 types of storages exist - localStorage & sessionStorage
4+
localStorage is persistant local storage & vice versa
5+
webstorage & retrieval happens using JSON*/
6+
7+
// window.alert("Hi"); //here window is the global variable
8+
// alert("hello"); //window need not be used
9+
10+
const myObj ={
11+
name :"bittu",
12+
hobbies:["eat","code","sleep"],
13+
logName: function(){
14+
console.log(this.name);
15+
}
16+
};
17+
18+
const myArray =["eat", "code", "repeat"];
19+
sessionStorage.setItem("mySessionStorage",JSON.stringify(myObj));
20+
const webStorage = JSON.parse(sessionStorage.getItem("mySessionStorage"));
21+
console.log(webStorage);
22+
23+
24+

0 commit comments

Comments
 (0)