+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+#left-container {
+ background-color: #eee;
+ width: 200px;
+ left: 0px;
+ top: 0px;
+ position: absolute;
+ height: 940px;
+ padding: 10px;
+}
+
+#right-container {
+ background-color: #eee;
+ width: 200px;
+ right: 0px;
+ top: 0px;
+ position: absolute;
+ height: 940px;
+ padding: 10px;
+}
+
+
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-content: center;
+}
+```
+
+I made sure to check if the elements are aligning properly in different browsers
+
+**Chrome**
+
+
+**Firefox**
+
+
+# 3. Sub Topic
+## Assignment
+
+
+**MutationObserver**
+The `MutationObserver` interface provides the ability to watch for changes being made in
+a webpage. We can define a callback function which will be executed when the element being
+watched undergoes some specific changes. It is extremely useful as it reacts instantly to updates, hence it is used extensively in chat applications. An example of this when
+a person sends a message to another person, the `MutationObserver` will detect it and
+immediately trigger notifications.
+
+
+## Challenge
+
+I added an event listener which makes the plants go inside the container when they are
+double clicked. The event listener sets a random position for the plant based on the
+dimensions of the container to ensure that they dont clutter up at a single point.
+
+```javascript
+
+document.querySelectorAll(".plant").forEach((plant) => {
+ plant.addEventListener("dblclick", () => {
+ const interior = document.querySelector(".jar-walls");
+ interior.appendChild(plant);
+ plant.style.position = "absolute";
+ plant.style.zIndex = "3";
+
+ const jarRect = interior.getBoundingClientRect();
+
+ const randomX = Math.random() * (jarRect.width - plant.width);
+ const randomY = Math.random() * (jarRect.height - plant.height);
+
+
+ plant.style.left = `${randomX}px`;
+ plant.style.top = `${randomY}px`;
+ });
+});
+```
diff --git a/2-terrarium/terrarium-solution/style.css b/2-terrarium/terrarium-solution/style.css
new file mode 100644
index 0000000..2510741
--- /dev/null
+++ b/2-terrarium/terrarium-solution/style.css
@@ -0,0 +1,135 @@
+body {
+ font-family: helvetica, arial, sans-serif;
+}
+
+h1 {
+ color: #3a241d;
+ text-align: center;
+}
+
+button{
+ border-radius: 30px;
+ width: 80px;
+ color:black;
+ background-color: grey;
+ display: block;
+ margin: 0 auto;
+}
+
+button:hover{
+ color:white;
+ background-color: rgb(189, 38, 0);
+}
+#left-container {
+ background-color: #eee;
+ width: 200px;
+ left: 0px;
+ top: 0px;
+ position: absolute;
+ height: 940px;
+ padding: 10px;
+}
+
+#right-container {
+ background-color: #eee;
+ width: 200px;
+ right: 0px;
+ top: 0px;
+ position: absolute;
+ height: 940px;
+ padding: 10px;
+}
+
+
+.container{
+ display: flex;
+ flex-direction: column;
+ justify-content: space-evenly;
+ align-content: center;
+}
+
+.plant-holder {
+ position: relative;
+ height: 11%;
+ left: -10px;
+
+}
+
+.plant {
+ position: absolute;
+ max-width: 150%;
+ max-height: 150%;
+ z-index: 3;
+
+}
+.jar-walls {
+ height: 80%;
+ width: 60%;
+ border-radius: 1rem;
+ position: absolute;
+ bottom: 5px;
+ left: 20%;
+ background: rgba(209, 225, 223, 0.5);
+ transform: scale(1);
+ opacity: 1;
+ 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{
+ position: absolute;
+ background: #e0fffb;
+ border-radius: 1rem 1rem 1rem 1rem;
+ z-index:-1;
+ bottom: 15%;
+ left: 5%;
+ height: 20%;
+ width: 3.5%;
+ opacity:0.9;
+
+}
+.jar-glossy-short{
+ position: absolute;
+ background: #e0fffb;
+ border-radius: 1rem 1rem 1rem 1rem;
+ z-index:-1;
+ bottom: 40%;
+ left: 5%;
+ height: 5%;
+ width: 3.5%;
+ opacity:0.9;
+
+}
+
+.jar-walls .plant{ transform: scale(0.4) !important;}
\ No newline at end of file
+ 
+ 
+ 
+ 
+ 
+ 
+