Skip to content
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

This PR is the solution to the 'bank-project' #4 #36

Open
wants to merge 9 commits into
base: main
Choose a base branch
from
Open

This PR is the solution to the 'bank-project' #4 #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
5f08c04
Created solution.md
Harshith-2208 Nov 10, 2024
e84b69e
Updated codes
Harshith-2208 Nov 16, 2024
690b11b
Solution.md file
Harshith-2208 Nov 16, 2024
edcd7b4
removed 1 file
Harshith-2208 Nov 16, 2024
61b17ab
Updated Solution.md
Harshith-2208 Nov 27, 2024
9d9f789
Delete Solution.md
Harshith-2208 Nov 27, 2024
73ad62e
Code files
Harshith-2208 Nov 28, 2024
c2aee85
Added Images
Harshith-2208 Nov 28, 2024
ef64d30
Solution.md
Harshith-2208 Nov 27, 2024
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
45 changes: 45 additions & 0 deletions TERRARIUM/assignment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>
<head>
<title>Assignment</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<h1>ALL ABOUT ME</h1>
<div id="page">
<div id="right-container" class="container">
<div class="image holder">
<img class="image" alt="image" id="image1" src="" />
</div>
<div class="image holder">
<img class="image" alt="image" id="image2" src="" />
</div>
</div>
<div id="left-container" class="container">
<div class="Text">
<h2>A Brief Intro</h2>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
</div>
<div class="Text">
<h2>My Educational Qualifications</h2>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
</div>
<div class="Text">
<h2>My Achievments</h2>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
<p>.....................</p>
</div>
</div>
</div>
</body>
</html>
Binary file added TERRARIUM/images/Chrome.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added TERRARIUM/images/Firefox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added TERRARIUM/images/Graphical mockup.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
0 2-terrarium/images/plant1.png → TERRARIUM/images/plant1.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant10.png → TERRARIUM/images/plant10.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant11.png → TERRARIUM/images/plant11.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant12.png → TERRARIUM/images/plant12.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant13.png → TERRARIUM/images/plant13.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant14.png → TERRARIUM/images/plant14.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant2.png → TERRARIUM/images/plant2.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant3.png → TERRARIUM/images/plant3.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant4.png → TERRARIUM/images/plant4.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant5.png → TERRARIUM/images/plant5.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant6.png → TERRARIUM/images/plant6.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant7.png → TERRARIUM/images/plant7.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant8.png → TERRARIUM/images/plant8.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/plant9.png → TERRARIUM/images/plant9.png
View file
Open in desktop
File renamed without changes
0 2-terrarium/images/screenshot_gray.png → TERRARIUM/images/screenshot_gray.png
View file
Open in desktop
File renamed without changes
71 changes: 71 additions & 0 deletions TERRARIUM/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
<!DOCTYPE html>
<html>
<head>
<title>Welcome to my Virtual Terrarium</title>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<h1 style="color: red">My Terrarium</h1>
<div id="page">
<div id="left-container" class="flex-container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant1" src="./images/plant1.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant2" src="./images/plant2.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant3" src="./images/plant3.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant4" src="./images/plant4.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant5" src="./images/plant5.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant6" src="./images/plant6.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant7" src="./images/plant7.png" />
</div>
</div>
<div id="right-container" class="flex-container">
<div class="plant-holder">
<img class="plant" alt="plant" id="plant8" src="./images/plant8.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant9" src="./images/plant9.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant10" src="./images/plant10.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant11" src="./images/plant11.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant12" src="./images/plant12.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant13" src="./images/plant13.png" />
</div>
<div class="plant-holder">
<img class="plant" alt="plant" id="plant14" src="./images/plant14.png" />
</div>
</div>
<div id="terrarium">
<div class="jar-top"></div>
<div class="jar-walls">
<div class="jar-glossy-long"></div>
<div class="jar-glossy-short"></div>
</div>
<div class="dirt"></div>
<div class="jar-bottom"></div>
</div>
</div>
</body>
</html>
78 changes: 78 additions & 0 deletions TERRARIUM/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
dragElement(document.getElementById('plant1'));
dragElement(document.getElementById('plant2'));
dragElement(document.getElementById('plant3'));
dragElement(document.getElementById('plant4'));
dragElement(document.getElementById('plant5'));
dragElement(document.getElementById('plant6'));
dragElement(document.getElementById('plant7'));
dragElement(document.getElementById('plant8'));
dragElement(document.getElementById('plant9'));
dragElement(document.getElementById('plant10'));
dragElement(document.getElementById('plant11'));
dragElement(document.getElementById('plant12'));
dragElement(document.getElementById('plant13'));
dragElement(document.getElementById('plant14'));

function dragElement(terrariumElement) {
//set 4 positions for positioning on the screen
let pos1 = 0,
pos2 = 0,
pos3 = 0,
pos4 = 0;
terrariumElement.onpointerdown = pointerDrag;
function pointerDrag(e) {
e.preventDefault();
console.log(e);
pos3 = e.clientX;
pos4 = e.clientY;
document.onpointermove = elementDrag;
document.onpointerup = stopElementDrag;

}
function elementDrag(e) {
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
console.log(pos1, pos2, pos3, pos4);
terrariumElement.style.top = terrariumElement.offsetTop - pos2 + 'px';
terrariumElement.style.left = terrariumElement.offsetLeft - pos1 + 'px';
}
function stopElementDrag() {
document.onpointerup = null;
document.onpointermove = null;
}

terrariumElement.addEventListener("dblclick", doSomething )

function doSomething(){
if(terrariumElement==document.getElementById('plant1'))
alert("plant1");
if(terrariumElement==document.getElementById('plant2'))
alert("plant2");
if(terrariumElement==document.getElementById('plant3'))
alert("plant3");
if(terrariumElement==document.getElementById('plant4'))
alert("plant4");
if(terrariumElement==document.getElementById('plant5'))
alert("plant5");
if(terrariumElement==document.getElementById('plant6'))
alert("plant6");
if(terrariumElement==document.getElementById('plant7'))
alert("plant7");
if(terrariumElement==document.getElementById('plant8'))
alert("plant8");
if(terrariumElement==document.getElementById('plant9'))
alert("plant9");
if(terrariumElement==document.getElementById('plant10'))
alert("plant10");
if(terrariumElement==document.getElementById('plant11'))
alert("plant11");
if(terrariumElement==document.getElementById('plant12'))
alert("plant12");
if(terrariumElement==document.getElementById('plant13'))
alert("plant13");
if(terrariumElement==document.getElementById('plant14'))
alert("plant14");
}
}
109 changes: 109 additions & 0 deletions TERRARIUM/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
body {
font-family: helvetica, arial, sans-serif;
}

h1 {
color: #3a241d;
text-align: center;
}
#left-container {
background-color: #eee;
width: 15%;
left: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}

#right-container {
background-color: #eee;
display: flex;
flex-direction: column;
width: 15%;
right: 0px;
top: 0px;
position: absolute;
height: 100%;
padding: 10px;
}


.plant-holder {
position: relative;
height: 13%;
left: -10px;
}

.plant {
display: flex;
justify-content: space-between ;
position: absolute;
max-width: 150%;
max-height: 150%;
z-index: 2;
}
.jar-walls {
display: flex;
-ms-flex-align: center;
height: 80%;
width: 60%;
background: #d1e1df;
border-radius: 1rem;
position: absolute;
bottom: 0.5%;
left: 20%;
opacity: 0.5;
z-index: 1;
}

.jar-top {
width: 50%;
height: 5%;
background: #d1e1df;
position: absolute;
bottom: 80.5%;
left: 25%;
opacity: 0.7;
z-index: 1;
}

.jar-bottom {
width: 50%;
height: 1%;
background: #d1e1df;
position: absolute;
bottom: 0%;
left: 25%;
opacity: 0.7;
}

.dirt {
width: 60%;
height: 5%;
background: #3a241d;
position: absolute;
border-radius: 0 0 1rem 1rem;
bottom: 1%;
left: 20%;
opacity: 0.7;
z-index: -1;
}
.jar-glossy-long{
width: 4%;
height:25%;
background-color: #e6fcfa;
position: absolute;
border-radius: 1rem 1rem 1rem 1rem;
bottom: 20%;
left : 5%
}
.jar-glossy-short{
width: 4%;
height:5%;
background-color: #e6fcfa;
position: absolute;
border-radius: 1rem 1rem 1rem 1rem;
bottom: 50%;
left : 5%
}
Binary file added bank-solution/Images/Dashboard.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bank-solution/Images/Login.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added bank-solution/Images/dailogbox.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
77 changes: 77 additions & 0 deletions bank-solution/Solution.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
# 4-bank-project
## 1-template-route
### Assignment
This assignment was to add title for each template and print 'Dashboard is shown' in console when dashboard page is displayed. Did the above task by adding title in routes function as shown below
```
const routes = {
'/login': { templateId: 'login' , title: 'Login' },
'/dashboard': { templateId: 'dashboard', init: updateDashboard , init:refresh , title: 'Dashboard'},
'/credit' : {templateId: 'credit', title:'Credit'},
};
```
and console.log for the printing 'Dashboard is shown'.
```
if (path =='/dashboard'){
console.log("Dashboard is shown");
}
```
### Challenge
Created a new template and route for the third page of the app that shows the credits.
```
<template id="credit">
<h1>Credits</h1>
<section>
<a href="/dashboard" onclick="onLinkClick(event)" class="link">Go back</a>
</section>
<section class="dashboard-cont">
<h2>Credits for the app</h2>
</section>
<p class="dashboard-cont">API</p>
</template>
```
And also added the below code in const routes
```
'/credit' : {templateId: 'credit', title:'Credit'}
```

## 2-forms
### Assignment
Done with styling the app both the login page and the dashboard page with giving a unique background colour.

![Login](https://github.com/Harshith-2208/div-it-up/blob/bank-project/bank-solution/Images/Login.png)

![Dashboard](https://github.com/Harshith-2208/div-it-up/blob/bank-project/bank-solution/Images/Dashboard.png)

### Challenge
Did the printing of error message in HTML using div tag with role as alert as shown
```
<div id="registerError" role="alert" style="color:red"></div>
```
and check if the account already exists using js and print it in red colour.
```
if (result.error) {
return updateElement('registerError', result.error);
}
```

## 3-data
### Assignment
Done with adding comments to the code .
### Challenge
I have added the media queries for the table in styles.css
```
@media (orientation: portrait) {
#table {
display: block;
width: 250px;
background-color: #fff;
padding: 40px 40px;
}
}
```

## 4- state-management
### Assignment
I have added the ADD TRANSACTION dialog box in the dashboard page by adding a dailog in html adding some functions in js and stying it by css.

![dailogbox](https://github.com/Harshith-2208/div-it-up/blob/bank-project/bank-solution/Images/dailogbox.png)
Loading