diff --git a/learn/terrarium/index.html b/learn/terrarium/index.html
index cbe4e6d2..6f97e37a 100644
--- a/learn/terrarium/index.html
+++ b/learn/terrarium/index.html
@@ -6,6 +6,7 @@
+
My Terrarium
diff --git a/learn/terrarium/script.js b/learn/terrarium/script.js
new file mode 100644
index 00000000..0c0bd23c
--- /dev/null
+++ b/learn/terrarium/script.js
@@ -0,0 +1,46 @@
+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;
+ }
+}
\ No newline at end of file