Add files via upload

assets/css/style.css

@@ -0,0 +1,64 @@
+main{
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+}
+
+.center{
+    text-align: center;
+    background-color: aqua;
+    grid-column: 2;
+}
+
+header{
+    text-align: center;
+    background-color: blueviolet;
+}
+
+.left{
+    background-color: rgb(230, 224, 224);
+    grid-column: 1;
+}
+
+.left_list{
+    color: black;
+}
+
+.left_li{
+    padding-bottom: 10px;
+}
+
+.left_li:hover{
+    cursor: pointer;
+}
+
+.center_div{
+    display: yes;
+    border-width: 10px;
+    padding-bottom:50px;
+}
+
+img{
+    max-width: 50px;
+}
+
+.bold{
+    font-weight: bold;
+}
+
+.surpriseButton{
+    display: none;
+    text-align: center;
+}
+
+#container {
+    width: 400px;
+    height: 400px;
+    position: relative;
+    background: yellow;
+  }
+  #animate {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    background-color: red;
+  }

assets/js/clickonlist.js

@@ -0,0 +1,27 @@
+var ol1 = document.getElementById("left_ol1");
+var ol2 = document.getElementById("left_ol2");
+//allow user to select the data by clicking on the menu
+const selectData =(e)=>{
+    console.log(e.target);
+    //activate modal for the selected data
+    displayModal(e.target);
+}
+
+const displayModal = (e) =>{
+    document.querySelector(".ini").style.display="none";
+    let centerDivs=document.querySelector(".center_div");
+    centerDivs.style.display="none";
+    for (i in centerDivs){
+    if (e.index===i.index){
+        centerDivs[i].syle.display="block"
+    }
+    }
+}
+
+ol1.addEventListener("click", selectData);
+ol2.addEventListener("click", selectData);
+
+modals_list=[];
+selector_list=document.querySelector("li");
+
+