Skip to content

FrontEnd Exercises done #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
chaitanya-191855 wants to merge 6 commits into
base: main
Choose a base branch
from
Open

FrontEnd Exercises done #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
84ea71c
exercises1-6 done
chaitanya-191855 Dec 12, 2022
979560d
exercise7,8 done
chaitanya-191855 Dec 13, 2022
51135f1
exercises7&8 done
chaitanya-191855 Dec 13, 2022
724287a
exercises9 done
chaitanya-191855 Dec 14, 2022
2a6e2a8
exercises1-9 completed
chaitanya-191855 Dec 14, 2022
5c8668d
final correction of exercise9
chaitanya-191855 Dec 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 41 additions & 1 deletion src/exercises/1/1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,44 @@

- The data once set, should be available even after the browser is closed and reopened.
- HINT : Use browsers local storage.
-->
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
label {
display: inline-block;
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<div class="pages">
<a href="./page2.html">Page2</a></div><br>
</div>
<div>
<label for="Id">Id</label>
<input type="text" id="Id" required /><br />
<label for="Enter">Click to store</label>
<button id="submit">submit</button>
</div>
<div id="output"></div>
</body>
<script>
let data = document.getElementById("submit");
data.addEventListener("click", () => {
let id = document.getElementById("Id").value;
let obj = JSON.parse(localStorage.getItem(id));
let output = `
<p>Name of the employee : ${obj.name}</p>
<p>ID of the employee : ${obj.id}</p>
<p>DOB of the employee : ${obj.DOB}</p>
<p>Experience of the employee : ${obj.experience}</p>`;
document.getElementById("output").innerHTML = output;
});
</script>
</html>
49 changes: 49 additions & 0 deletions src/exercises/1/page2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
label {
display: inline-block;
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<div>
<a href="./1.html">Home page</a>
</div>
<div>
<label for="name">Name</label>
<input type="text" id="name" required /><br />
<label for="Id">Id</label>
<input type="text" id="Id" required /><br />
<label for="DOB">Date of birth</label>
<input type="text" id="DOB" required /><br />
<label for="experience">Experience</label>
<input type="text" id="experience" required /><br />
<label for="Enter">Click to store</label>
<button id="submit">submit</button>
</div>
</body>
<script>
let data = document.getElementById("submit");
data.addEventListener("click", () => {
let name = document.getElementById("name").value;
let id = document.getElementById("Id").value;
let DOB = document.getElementById("DOB").value;
let experience = document.getElementById("experience").value;
let obj = {
name: name,
id: id,
DOB: DOB,
experience: experience,
};
localStorage.setItem(id, JSON.stringify(obj));
alert("Successfully stored");
});
</script>
</html>
45 changes: 44 additions & 1 deletion src/exercises/2/2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,47 @@

- The data once set, should be available only in that tab. If the same html is opened in a new tab, data should not be available
- HINT : Use browsers session storage.
-->
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
label {
display: inline-block;
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<div class="pages">
<a href="./page2.html">Page2</a></div><br>
</div>
<div>
<label for="Id">Id</label>
<input type="text" id="Id" required /><br />
<label for="Enter">Click to get Employee Data</label>
<button id="submit">submit</button>
</div>
<div id="output"></div>
</body>
<script>
let data = document.getElementById("submit");
data.addEventListener("click", () => {
let id = document.getElementById("Id").value;
let obj = JSON.parse(sessionStorage.getItem(id));
if(obj===null){
return alert("not found");
}
let output = `
<p>Name of the employee : ${obj.name}</p>
<p>ID of the employee : ${obj.id}</p>
<p>DOB of the employee : ${obj.DOB}</p>
<p>Experience of the employee : ${obj.experience}</p>`;
document.getElementById("output").innerHTML = output;
});
</script>
</html>
49 changes: 49 additions & 0 deletions src/exercises/2/page2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
label {
display: inline-block;
width: 200px;
text-align: left;
}
</style>
</head>
<body>
<div>
<a href="./2.html">Home page</a>
</div>
<div>
<label for="name">Name</label>
<input type="text" id="name" required /><br />
<label for="Id">Id</label>
<input type="text" id="Id" required /><br />
<label for="DOB">Date of birth</label>
<input type="text" id="DOB" required /><br />
<label for="experience">Experience</label>
<input type="text" id="experience" required /><br />
<label for="Enter">Click to store</label>
<button id="submit">submit</button>
</div>
</body>
<script>
let data = document.getElementById("submit");
data.addEventListener("click", () => {
let name = document.getElementById("name").value;
let id = document.getElementById("Id").value;
let DOB = document.getElementById("DOB").value;
let experience = document.getElementById("experience").value;
let obj = {
name: name,
id: id,
DOB: DOB,
experience: experience,
};
sessionStorage.setItem(id, JSON.stringify(obj));
alert("Successfully stored");
});
</script>
</html>
46 changes: 45 additions & 1 deletion src/exercises/3/3.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,48 @@
<!--
Create a html page with 4 divs. One inside other and centered in the page.
Check the sample image for reference.
-->
-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.Div1 {
width: 80%;
height: 80%;
padding: 10%;
background-color: blue;
}
.Div2 {
width: 70%;
height:70%;
padding: 10%;
background-color: greenyellow;
}
.Div3 {
width: 70%;
height: 70%;
padding: 10%;
background-color: red;
}
.Div4 {
width: 70%;
height: 70%;
padding: 10%;
background-color: gray;
}
</style>
</head>
<body></body>
<div class="Div1">
<div class="Div2">
<div class="Div3">
<div class="Div4">
</div>
</div>
</div>
</div>
</body>
</html>
61 changes: 60 additions & 1 deletion src/exercises/4/4.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,61 @@
<!--Create a html page with 4 divs, each at one corner. All the divs should occupy 100% space with each div occupying 25% of the space.
Check the sample image for reference.-->
Check the sample image for reference.-->

<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.main {
width: 100%;
height: 100%;
}
.A {
width: 100%;
height: 50%;
}
.Aa {
width: 50%;
height: 100%;
float: left;
background-color: red;
}
.Ab {
width: 50%;
height: 100%;
float: right;
background-color: violet;
}
.B {
width: 100%;
height: 50%;
}
.Ba {
width: 50%;
height: 100%;
float: left;
background-color: yellow;
}
.Bb {
width: 50%;
height: 100%;
float: right;
background-color: greenyellow;
}
</style>
</head>
<body>
<div class="main">
<div class="A">
<div class="Aa"></div>
<div class="Ab"></div>
</div>
<div class="B">
<div class="Ba"></div>
<div class="Bb"></div>
</div>
</div>
</body>
</html>
53 changes: 52 additions & 1 deletion src/exercises/5/5.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,53 @@
<!--Create a html page with 4 divs, each at one corner. Height and Width of each div is 10px,10px
Check the sample image for reference.-->
Check the sample image for reference.-->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.main {
width: 100%;
height: 100%;
background-color: white;
}
.A,
.B,
.C,
.D {
width: 25%;
height: 25%;
position: absolute;
}
.A {
top: 0px;
left: 0px;
background-color: red;
}
.B {
top: 0px;
right: 0px;
background-color: blue;
}
.C {
bottom: 0px;
left: 0px;
background-color: greenyellow;
}
.D {
bottom: 0px;
right: 0px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="main">
<div class="A">A</div>
<div class="B">B</div>
<div class="C">C</div>
<div class="D">D</div>
</div>
</body>
</html>
Loading