Merge pull request #8 from vishwa-radhya/fixes

implemented dialog with cache facilitation
vishwa-radhya · May 30, 2024 · 8a90a4a · 8a90a4a
2 parents d6c96a4 + e2800fa
commit 8a90a4a
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 32 deletions.
diff --git a/index.html b/index.html
@@ -71,7 +71,7 @@ <h3 id="pokemon-id">id</h3>
             <li>The id ranges from 1-10277.</li>
             <li>There are some pokemons with both genders
             like Nidoran.</li>
-            <li>After a Successful pokemon search Tap on it to see Its Evolution Forms.</li>
+            <li style="color: rgb(84, 232, 94);">After a Successful pokemon search Tap on it to see Its Evolution Forms.</li>
             <li>If You encounter any problem<br>
             please refresh the page.</li>
         </ul>
@@ -86,6 +86,12 @@ <h3 id="pokemon-id">id</h3>
             <div class="evol-img-cont"></div>
         </div>
     </div>
+    <dialog id="dialog-ele">
+        <div>Do You Wish To See Evolution Forms</div>
+            <div>
+                <button>YES</button><button>NO</button>
+            </div>
+    </dialog>
     <script src="pokemon-evol.js"></script>
     <script src="script.js"></script>
 </body>

diff --git a/script.js b/script.js
@@ -25,6 +25,9 @@ const t_loader=document.getElementById('t-loader');
 const noAnimationMsg=document.getElementById('no-anim');
 const pokemonSoundElement=document.getElementById('music');
 const toolTip=document.getElementById('tooltip');
+const dialogElement=document.getElementById('dialog-ele');
+const acceptDialogBtn=document.getElementById('dialog-ele').children[1].children[0];
+const rejectDialogBtn=document.getElementById('dialog-ele').children[1].children[1];
 let isLoading = false;
 let isGlowing=false;
 let globalInput;
@@ -39,8 +42,8 @@ const evolChainCont=document.getElementById('evolution-chain-cont');
 let isNewImageLoaded=false;
 const fetchApi ='https://pokeapi-proxy.freecodecamp.rocks/api/pokemon/'
 const fetchApi2='https://pokeapi.co/api/v2/pokemon/';
-let data=[]
-
+let data=[];
+const cacheEvolData={};
 const fetchData=async()=>{
     try{
         t_loader.hidden=false;
@@ -51,8 +54,8 @@ const fetchData=async()=>{
     container.hidden=false;
     showToolTip();
     }catch(e){
-        alert('error occured try after few moments');
         t_loader.hidden=true;
+        alert('error occured try after few moments');
         return;
     }
 }
@@ -306,14 +309,24 @@ evolExitBtn.addEventListener('click',()=>{
     evolCont.classList.remove('evol-show');
     evolCont.classList.add('evol-hide');
 })
+
 imgView.addEventListener('click',()=>{
     if(isNewImageLoaded){
+        dialogElement.show();
+    }
+})
+
+acceptDialogBtn.addEventListener('click',()=>{
+        dialogElement.close();
         evolCont.classList.remove('evol-hide');
         evolCont.classList.add('evol-show');
         updateEvolContUI();
-    }
 })
 
+rejectDialogBtn.addEventListener('click',()=>[
+    dialogElement.close()
+])
+
 const findPokemonEvolArr=(id)=>{
     for(let arr of Object.values(pokemonEvolMap)){
         if(arr.includes(id)){
@@ -322,20 +335,28 @@ const findPokemonEvolArr=(id)=>{
     }
 }
 
-const updateEvolContUI=async()=>{
-    evolChainCont.innerHTML='';
-    let evolutionArr=findPokemonEvolArr(globalPokemonId);
-    if(evolutionArr){
-        if(evolutionArr.length>=5){
-            evolCont.style.height='auto';
-        }else{
-            evolCont.style.height='min(300px,70vw)';
-        }
-        for(let i=0;i<evolutionArr.length;i++){
-            try{
-                const response=await fetch(fetchApi+evolutionArr[i].toString());
-                const result=await response.json();
-                const img=document.createElement('img');
+const evolImgFetcher=async(evolutionArrElement)=>{
+    const cacheKey=evolutionArrElement;
+    if(cacheEvolData[cacheKey]){
+        return cacheEvolData[cacheKey];
+    }
+    try{
+        const response=await fetch(fetchApi+evolutionArrElement.toString());
+        const result=await response.json();
+        cacheEvolData[cacheKey]=result;
+        return result;
+    }catch(e){
+        console.log(e);
+        const h2=document.createElement('h2');
+        h2.textContent='No Evolution Data Available at this Moment.';
+        h2.className='no-form-data';
+        evolChainCont.appendChild(h2);
+        return;
+    }
+}
+
+const evolContUiUpdateHandler=(result)=>{
+    const img=document.createElement('img');
                 const p=document.createElement('p');
                 const loader=document.createElement('div');
                 img.src=result.sprites.front_default;
@@ -357,14 +378,16 @@ const updateEvolContUI=async()=>{
                     loader.remove();
                     p.textContent='Image Not available';
                 }
-            }catch(e){
-                console.log(e);
-                const h2=document.createElement('h2');
-                h2.textContent='No Evolution Data Available at this Moment.';
-                h2.className='no-form-data';
-                evolChainCont.appendChild(h2);
-                return;
-            }
+}
+
+const updateEvolContUI=async()=>{
+    evolChainCont.innerHTML='';
+    let evolutionArr=findPokemonEvolArr(globalPokemonId);
+    if(evolutionArr){
+        for(let i=0;i<evolutionArr.length;i++){
+                let result;
+                result= await evolImgFetcher(evolutionArr[i]);
+                evolContUiUpdateHandler(result);
         }
         }else{
             console.log('no map included');
@@ -373,4 +396,5 @@ const updateEvolContUI=async()=>{
             h2.className='no-form-data';
             evolChainCont.appendChild(h2);
         }
-    }
+    }
+
diff --git a/styles.css b/styles.css
@@ -422,6 +422,11 @@ button{
         margin-top: 5px;
     }
  }
+ @media screen and (max-width:350px) {
+    #dialog-ele button{
+        flex: 1;
+    }
+ }
 
 input[type='search']::-webkit-search-cancel-button{
     -webkit-appearance: none;
@@ -543,7 +548,7 @@ input[type='search']::-webkit-search-cancel-button{
 
 #evolution-cont{
     width: min(500px,90vw);
-    height: min(300px,70vw);
+    height: auto;
     position: relative;
     top: -600px;
     border-radius: 10px;
@@ -553,6 +558,7 @@ input[type='search']::-webkit-search-cancel-button{
     flex-direction: column;
     background-color: #b1c4ec;
     box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
+    z-index: 5;
 }
 
 #exit-btn-cont{
@@ -585,21 +591,21 @@ input[type='search']::-webkit-search-cancel-button{
     border-top: 2px solid black;
     flex: 1;
     display: flex;
-    align-items: center;
+    align-items: stretch;
     justify-content: space-between;
     flex-wrap: wrap;
 }
 
 .evol-img-cont{
-    flex: 1;
-    height: 50%;
     margin-left: 3px;
     margin-bottom: 3px;
+    margin-top: 3px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     box-shadow: 0 2px 2px rgb(57, 56, 56);
+    flex: 1;
 }
 
 .no-form-data{
@@ -623,4 +629,39 @@ input[type='search']::-webkit-search-cancel-button{
 @keyframes img-loader-spin {
     0% { transform: rotate(0deg); }
     100% { transform: rotate(360deg); }
+}
+
+#dialog-ele{
+    border: 2px solid gray;
+    position: relative;
+    background-color: whitesmoke;
+    top: -500px;
+    width: min(200px,40vw);
+    border-radius: 5px;
+    z-index: 9;
+    box-shadow: -4px 0px 0px black,0px 1px 5px black;
+}
+#dialog-ele > *:first-child{
+    text-align:center;
+    font-size: 0.9rem;
+    font-weight: 500;
+    margin-top: -7px;
+    margin-bottom: 7px;
+}
+#dialog-ele > *:nth-child(2){
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+#dialog-ele button{
+    font-family: "Orbitron", sans-serif;
+    border-radius: 5px;
+    /* flex: 1; */
+}
+
+#dialog-ele button:active{
+    scale: 1.05;
+    background-color: rgb(247, 247, 247);
+    color: black;
 }