diff --git a/2-terrarium/TERRARIUM/.vscode/settings.json b/2-terrarium/TERRARIUM/.vscode/settings.json new file mode 100644 index 0000000..6f3a291 --- /dev/null +++ b/2-terrarium/TERRARIUM/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/2-terrarium/TERRARIUM/images/plant1.png b/2-terrarium/TERRARIUM/images/plant1.png new file mode 100644 index 0000000..9baee27 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant1.png differ diff --git a/2-terrarium/TERRARIUM/images/plant10.png b/2-terrarium/TERRARIUM/images/plant10.png new file mode 100644 index 0000000..4b5136d Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant10.png differ diff --git a/2-terrarium/TERRARIUM/images/plant11.png b/2-terrarium/TERRARIUM/images/plant11.png new file mode 100644 index 0000000..3530fe5 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant11.png differ diff --git a/2-terrarium/TERRARIUM/images/plant12.png b/2-terrarium/TERRARIUM/images/plant12.png new file mode 100644 index 0000000..b7f6dfd Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant12.png differ diff --git a/2-terrarium/TERRARIUM/images/plant13.png b/2-terrarium/TERRARIUM/images/plant13.png new file mode 100644 index 0000000..18938b7 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant13.png differ diff --git a/2-terrarium/TERRARIUM/images/plant14.png b/2-terrarium/TERRARIUM/images/plant14.png new file mode 100644 index 0000000..87ccb62 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant14.png differ diff --git a/2-terrarium/TERRARIUM/images/plant2.png b/2-terrarium/TERRARIUM/images/plant2.png new file mode 100644 index 0000000..b90853f Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant2.png differ diff --git a/2-terrarium/TERRARIUM/images/plant3.png b/2-terrarium/TERRARIUM/images/plant3.png new file mode 100644 index 0000000..17e10d1 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant3.png differ diff --git a/2-terrarium/TERRARIUM/images/plant4.png b/2-terrarium/TERRARIUM/images/plant4.png new file mode 100644 index 0000000..4bbafad Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant4.png differ diff --git a/2-terrarium/TERRARIUM/images/plant5.png b/2-terrarium/TERRARIUM/images/plant5.png new file mode 100644 index 0000000..d303d40 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant5.png differ diff --git a/2-terrarium/TERRARIUM/images/plant6.png b/2-terrarium/TERRARIUM/images/plant6.png new file mode 100644 index 0000000..823eeed Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant6.png differ diff --git a/2-terrarium/TERRARIUM/images/plant7.png b/2-terrarium/TERRARIUM/images/plant7.png new file mode 100644 index 0000000..fceb7f2 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant7.png differ diff --git a/2-terrarium/TERRARIUM/images/plant8.png b/2-terrarium/TERRARIUM/images/plant8.png new file mode 100644 index 0000000..40b4f15 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant8.png differ diff --git a/2-terrarium/TERRARIUM/images/plant9.png b/2-terrarium/TERRARIUM/images/plant9.png new file mode 100644 index 0000000..17a3435 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/plant9.png differ diff --git a/2-terrarium/TERRARIUM/images/screenshot_gray.png b/2-terrarium/TERRARIUM/images/screenshot_gray.png new file mode 100644 index 0000000..5d930e1 Binary files /dev/null and b/2-terrarium/TERRARIUM/images/screenshot_gray.png differ diff --git a/2-terrarium/TERRARIUM/index.html b/2-terrarium/TERRARIUM/index.html new file mode 100644 index 0000000..d01e798 --- /dev/null +++ b/2-terrarium/TERRARIUM/index.html @@ -0,0 +1,75 @@ + + + + Welcome to my Virtual Terrarium + + + + + + +

My Terrarium

+
+ +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+
+ plant +
+ +
+ +
+
+
+
+
+ +
+
+
+
+
+ + + \ No newline at end of file diff --git a/2-terrarium/TERRARIUM/script.js b/2-terrarium/TERRARIUM/script.js new file mode 100644 index 0000000..e733410 --- /dev/null +++ b/2-terrarium/TERRARIUM/script.js @@ -0,0 +1,64 @@ +function dragElement(terrariumElement) { + document.getElementById('ex').addEventListener("click", exchange) + //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; + } + let n=1 + function exchange() { + switch(n){ + case 1: + document.getElementById("left-container").style.left="84%"; + document.getElementById("right-container").style.right="84%"; + n=2; + break; + case 2: + document.getElementById("left-container").style.left="0%"; + document.getElementById("right-container").style.right="0%"; + n=1 + break; + + + } + + } +} + + +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')); \ No newline at end of file diff --git a/2-terrarium/TERRARIUM/style.css b/2-terrarium/TERRARIUM/style.css new file mode 100644 index 0000000..d9ffd82 --- /dev/null +++ b/2-terrarium/TERRARIUM/style.css @@ -0,0 +1,113 @@ +h1 { + color: #3a241d; + text-align: center; + } + +body { + font-family: helvetica, arial, sans-serif; +} +#ex{ + background-color: rgb(239, 114, 114); + height: 5%; + width: 20%; + position: absolute; + left: 40%; +} +#left-container { + background-color: #eee; + width: 15%; + left: 0px; + top: 0px; + position:absolute; + height: 100%; + padding: 10px; +} + +#right-container { + background-color: #eee; + width: 15%; + right: 0px; + top: 0px; + position: absolute; + height: 100%; + padding: 10px; +} +.plant-holder { + + display:flex; + justify-content: center; + height: 13%; + +} + +.plant { + position: absolute; + max-width: 150%; + max-height: 150%; + justify-content: space-around; + z-index: 2; +} +.jar-walls { + 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; +} +.jar-glossy-long{ + height: 22%; + width: 2.5%; + background: #d4fffb; + border-radius: 2rem; + position: absolute; + bottom:13%; + left: 7%; + z-index: 2; +} + +.jar-glossy-short{ + height: 5.5%; + width: 2.5%; + background: #d4fffb; + border-radius: 2rem; + position: absolute; + bottom: 37%; + left: 7%; + z-index: 2; +} +.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; +} diff --git a/2-terrarium/mock_up(subtask-1 assignment)/hi.html b/2-terrarium/mock_up(subtask-1 assignment)/hi.html new file mode 100644 index 0000000..075455c --- /dev/null +++ b/2-terrarium/mock_up(subtask-1 assignment)/hi.html @@ -0,0 +1,33 @@ + + + + + + HackerRank + + + +

HackerRank

 +
+
+ +
+
+

Prepare

+

Learn Programming Skills

+
+
+
+ Problem Solving + Problem Solving +
+
+
+
+ + \ No newline at end of file diff --git a/2-terrarium/mock_up(subtask-1 assignment)/style.css b/2-terrarium/mock_up(subtask-1 assignment)/style.css new file mode 100644 index 0000000..f48db26 --- /dev/null +++ b/2-terrarium/mock_up(subtask-1 assignment)/style.css @@ -0,0 +1,92 @@ +body{ + background-color: rgb(10, 26, 42); +} + +#l{ + font-size: 100%; + color: rgb(134, 134, 134); + position:absolute; + top:5%; +} +#lp{ + font-size: 100%; + color: rgb(140, 138, 138); + position:absolute; + top: 7%; +} + +#h{ + + font-size: 150%; + color: rgb(255, 255, 255); + position: absolute; + top:-1px; + left: 0%; + opacity: 1 ; + z-index: 2; +} +#prep{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 20%; +} +#cert{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 30%; +} +#comp{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 40%; +} +#app{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 50%; +} +#pyt{ + height:15%; + width:25%; + background-color:white; + position: absolute; + top:15%; + border-radius: 12%; + opacity: 0.1; + z-index: 3; +} +#ps{ + + height:15%; + width:25%; + background-color:white; + position: absolute; + top:15%; + left:30%; + border-radius: 12%; + opacity: 0.1; + z-index: 3; +} +#a{ + color: white; + position:absolute; + left:35%; + top:21%; + opacity: 0.5; +} +#b{ + color: white; + position:absolute; + left:7%; + top:21%; + opacity: 0.5; + +} diff --git a/2-terrarium/mock_up(subtask-1 assignment/hi.html b/2-terrarium/mock_up(subtask-1 assignment/hi.html new file mode 100644 index 0000000..075455c --- /dev/null +++ b/2-terrarium/mock_up(subtask-1 assignment/hi.html @@ -0,0 +1,33 @@ + + + + + + HackerRank + + + +

HackerRank

 +
+
+ +
+
+

Prepare

+

Learn Programming Skills

+
+
+
+ Problem Solving + Problem Solving +
+
+
+
+ + \ No newline at end of file diff --git a/2-terrarium/mock_up(subtask-1 assignment/style.css b/2-terrarium/mock_up(subtask-1 assignment/style.css new file mode 100644 index 0000000..f48db26 --- /dev/null +++ b/2-terrarium/mock_up(subtask-1 assignment/style.css @@ -0,0 +1,92 @@ +body{ + background-color: rgb(10, 26, 42); +} + +#l{ + font-size: 100%; + color: rgb(134, 134, 134); + position:absolute; + top:5%; +} +#lp{ + font-size: 100%; + color: rgb(140, 138, 138); + position:absolute; + top: 7%; +} + +#h{ + + font-size: 150%; + color: rgb(255, 255, 255); + position: absolute; + top:-1px; + left: 0%; + opacity: 1 ; + z-index: 2; +} +#prep{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 20%; +} +#cert{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 30%; +} +#comp{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 40%; +} +#app{ + font-size: 75%; + color: rgb(255, 255, 255); + position: absolute; + top: 1%;; + left: 50%; +} +#pyt{ + height:15%; + width:25%; + background-color:white; + position: absolute; + top:15%; + border-radius: 12%; + opacity: 0.1; + z-index: 3; +} +#ps{ + + height:15%; + width:25%; + background-color:white; + position: absolute; + top:15%; + left:30%; + border-radius: 12%; + opacity: 0.1; + z-index: 3; +} +#a{ + color: white; + position:absolute; + left:35%; + top:21%; + opacity: 0.5; +} +#b{ + color: white; + position:absolute; + left:7%; + top:21%; + opacity: 0.5; + +} diff --git a/2-terrarium/screenshots/Chrome.png b/2-terrarium/screenshots/Chrome.png new file mode 100644 index 0000000..0e85241 Binary files /dev/null and b/2-terrarium/screenshots/Chrome.png differ diff --git a/2-terrarium/screenshots/brave.png b/2-terrarium/screenshots/brave.png new file mode 100644 index 0000000..8d2ee0f Binary files /dev/null and b/2-terrarium/screenshots/brave.png differ diff --git a/2-terrarium/screenshots/mozilla.png b/2-terrarium/screenshots/mozilla.png new file mode 100644 index 0000000..af5e3b7 Binary files /dev/null and b/2-terrarium/screenshots/mozilla.png differ diff --git a/2-terrarium/solution.md b/2-terrarium/solution.md new file mode 100644 index 0000000..3f69faa --- /dev/null +++ b/2-terrarium/solution.md @@ -0,0 +1,31 @@ +# 1. Sub Task 1 +## Assignment +> File added in this directory. Name is mock_up(subtask-1 assignment) + +## Challenge +> marquee is a tag used to make a text scroll in selected directions and also control actions when the text reaches the end of the scrolling.the next one i learnt was center tag which lets us to see the inline contents centered.font tag lets us edit size,color and face of the content in the line. + +# 2. Sub Task 2 + +## Assignment +> In given options i have learnt flex box.i learnt about justify content, space around, space between; align-items,align-self :flex end,flex start,cente; flex-direction;flex-wrap;flex-flow etc in it. +> screenshots are there in screenshots folder. +> chrome +![Alt text](./screenshots/Chrome.png) +> Brave +![Alt text](./screenshots/brave.png) +> Mozilla +![Alt text](./screenshots/mozilla.png) + + +##Challenge +> Added bubble shne to the left bottom of the jar. + +# 3. Sub Task 3 + +## Assignment +> While researching about DOM I learnt a lot. First of all i learnt that it connects webpage(html) to scripts. I ran into node which is a building block or basic block of document structure.Every element,attributr, text in html is considered as a node. It has many interfaces like comment,node,eventTarget,document,documenType,element etc.In this I took Document interface. in the website i have seen most of the time documeen.getElementById(to select an element by its id given in html), .title(to set a title), .body(to access body element), .querySelector(to select first matching element),.head(to access head element) were used. + +##Challenge +> I have added an exchange button which would change left container elements to right and vice versa. +