Refocus · kishorer0ck · Aug 21, 2017 · Aug 21, 2017 · Aug 31, 2017
diff --git a/README.md b/README.md
@@ -59,3 +59,5 @@ A list of 151 Pokemon are present in the js/pokedex.json file. These following f
 ## CONTRIBUTING
 
 Send a pull request with what you worked on and we'll do a merge if everything seems fine.
+
+-- My first edit --
diff --git a/images/error.gif b/images/error.gif
diff --git a/index.html b/index.html
@@ -1,10 +1,95 @@
 <!DOCTYPE html>
-<html>
-<head>
-	<title>PokeDex!</title>
-	<link rel="stylesheet" type="text/css" href="style/main.css">
-</head>
-<body>
+ <html lang="en">
+ <head>
+    <meta charset="UTF-8">
+    <title>PokeDex!</title>
+    <link rel="stylesheet" href="style/main.css"/>
+   <!--  <script src="https://code.jquery.com/jquery-2.1.1.js"></script> -->
+        <script src="js/poke.js"></script>
+    <script src="js/data.js"></script>
+ </head>
+ <body>
+    <div class="Pokedex" id="pokedex">
+        <div class="Pokedex-left">
+            <div class="Pokedex-leftTop">
+                <div class="Btn Btn--coral Btn--big Btn--rounded" id="light"></div>
+                <div class="Btn Btn--red Btn--small Btn--rounded" id="red"></div>
+                <div class="Btn Btn--yellow Btn--small Btn--rounded" id="yellow"></div>
+                <div class="Btn Btn--green Btn--small Btn--rounded" id="green"></div>
+            </div>
+            <div class="Pokedex-window" >
+                <div class="Pokedex-sprite" id="sprite">
+
+                </div>
+            </div>
+            <div class="Pokedex-leftBottom">
+                <span class="Btn Btn--gray Btn--medium Btn--rounded close-button"></span>
+                <div class="Btn Btn--red Btn--mini Btn--round"></div>
+                <div class="Btn Btn--blue Btn--mini Btn--round"></div>
+                <!-- <form action="" class="Pokedex-search" id="search" onsubmit="return formSubmit();return false;"> -->
+                    <div class="Pokedex-search" id="pokenumber"></div>
+                    <div id="plus" class="plus">
+                        <div style="width:40px;height:40px;display: inline-block;"></div>
+                        <div class="Btn Btn--gray Btn--medium" style="width:40px;height:40px;cursor: default;"></div>
+                        <div style="width:40px;height:40px;display: inline-block;"></div>
+                        <br>
+                        <div id="prev" class="Btn Btn--gray Btn--medium pokedex--change" style="width:40px;height:40px"></div>
+                        <div style="width:40px;height:40px;display: inline-block;"></div>
+                        <div id="next" class="Btn Btn--gray Btn--medium pokedex--change" style="width:40px;height:40px"></div>
+                         <br>
+                        <div style="width:40px;height:40px;display: inline-block;"></div>
+                        <div class="Btn Btn--gray Btn--medium " style="width:40px;height:40px;cursor: default;"></div>
+                        <div style="width:40px;height:40px;display: inline-block;"></div>
+                    </div>
 
-</body>
-</html>
+
+            </div>
+        </div>
+        <div class="Pokedex-rightFrontface">
+            <div class="Pokedex-rightFrontfaceTop"></div>
+            <!-- <div class="Pokedex-description" style=" height:95px; width:255px;margin-left:50px"> -->
+
+                  <!-- <span id="description"></span>   -->
+                <!-- <form action="" class="Pokedex-search " id="search" onsubmit="return formSubmit();return false;"> -->
+                    <input id="pokename" class="Pokedex-input" type="text" autocomplete="off" placeholder="Pokemon Name" onkeyup="return formSubmit(event,this);return false;">
+                <!-- </form>  -->
+
+            <!-- </div>  -->
+            <div class="Pokedex-rightFrontfaceBottom">
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <br>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+                <div class="Btn Btn--blue Btn--medium" style="width:50px;height:50px"></div>
+            </div>
+            <div class="Pokedex-leftBottom">
+                <div class="Btn Btn--gray Btn--mini Btn--round" style="margin-left: 135px;"></div>
+                <div class="Btn Btn--gray Btn--mini Btn--round" style="margin-right: 50px"></div>
+            </div>
+            <div class="Pokedex-rightFrontfaceBottom">
+                <div class="Btn Btn--white Btn--small"></div>
+                <div class="Btn Btn--white Btn--small"></div>
+                <div class="Btn Btn--gold Btn--small Btn--rounded" style="margin-left: 196px"></div>
+            </div>
+            <div class="Pokedex-leftBottom">
+                <div class="Btn Btn--gray Btn--large Btn--square" style="margin-right: 150px;margin-left: 30px"></div>
+                <div class="Btn Btn--gray Btn--large Btn--square"></div>
+            </div>
+        </div>  
+        <div class="Pokedex-rightBackface">
+            <div class="Pokedex-rightBackfaceTop">
+                <div class="arrow-right"></div>
+            </div>
+            <span class="open-button"></span>
+        </div>
+    </div>
+    <script src="js/pokedex_toggle.js"></script>
+     <script src="js/pokedex_change.js"></script>
+ </body>
+ </html> 
diff --git a/js/pokedex.json → js/data.js b/js/pokedex.json → js/data.js
@@ -1,4 +1,4 @@
-{
+var pokedata = {
   "pokemon": [{
     "id": 1,
     "num": "001",
@@ -4083,4 +4083,4 @@
       "Dark"
     ]
   }]
-}
+};
diff --git a/js/poke.js b/js/poke.js
@@ -0,0 +1,176 @@
+/**
+ * This JS holds the functionality of the pokedex after it is switched on.
+ * Processing the search and updating the details of the searched pokemon is handled in this JS
+ * 
+ */
+
+
+
+var currentPokeobj = null; /*This is used store the current entire pokemonobject for the current search*/
+/**
+ * This function is initiated on entering a pokemon name and pressing Enter
+ * @param {event,In_elem} event is the event which is on pressing Enter key, In_element is the input element on which is the event will be made
+ * @returns pokeProcess function which updates image and pokemon number in their respective place holders. 
+ */
+formSubmit = function(event,In_elem){
+			    event.preventDefault();   
+			    if(event.keyCode == 13){ // On Press of Enter
+			    	var pokemonName = In_elem.value;//document.getElementById('pokename').value;
+					switchOn(document.getElementById("red"),"red");
+					switchOn(document.getElementById("yellow"),"yellow");
+					switchOn(document.getElementById("green"),"green");
+					setTimeout( function(){ // In order to know that the search is being done and to turn the lights on setTimeout function is used.
+						return pokeProcess(pokemonName);
+					}, 3000);
+			    	/*pokeProcess(pokemonName);*/
+			    }
+			    return false;
+}
+/**
+ * This function is used to toggle the lights on the pokedex
+ * @param {id,color} id is the id of the element on which light on effect is to be displayed, color is the color of the light
+ * @returns Nothing. 
+ */
+switchOn = function(id,color){
+
+	id.className += " is-animated-"+color;
+}
+/**
+ * This function is used to turn the lights off the pokedex
+ * @param {id,color} id is the id of the element on which light on effect is to be displayed, color is the color of the light
+ * @returns Nothing. 
+ */
+switchOff = function(id,color){
+	id.classList.remove("is-animated-"+color);
+}
+/**
+ * This function is used to update the image in the image place holder and display the number of the pokemon on the number place holder
+ * @param {pokemonName} pokemonname is the name of the pokemon of which we need the details
+ * @returns Nothing. 
+ */
+pokeProcess = function(pokemonName){
+
+				var pokeObj = getPokemonObject(pokemonName,0);
+                if(null == pokeObj){
+                    pokemonDoesNotExist();
+                }else{
+                	currentPokeobj = pokeObj;
+                    updateImage(pokeObj);  
+                    document.getElementById('pokenumber').innerHTML = pokeObj.num;
+                    // updateDescription(pokeObj);
+                }
+                switchOff(document.getElementById("red"),"red");
+				switchOff(document.getElementById("yellow"),"yellow");
+				switchOff(document.getElementById("green"),"green");
+}
+/**
+ * This function returns the Total Data related to the searched pokemon from the given JSON file
+ * @param {pokemonName,index} pokemonName is the name of the pokemon which need to be searched, index is used to get the next and previous pokemons objects on clicking the next and previous buttons
+ * @returns Array of pokemon objects. 
+ */
+getPokemonObject = function(pokemonName,index){
+                var all_pokemons = pokedata.pokemon;
+                var len = all_pokemons.length;
+                for(var i=0 ; i < len; i++){
+                    if(all_pokemons[i]['name'].toUpperCase() === pokemonName.toUpperCase()){  //this is used to make the search case insensitive
+                        return all_pokemons[i-index];
+                    }
+                }
+                return null;
+        }
+/**
+ * This function is used to update the image in the left side of the pokedex display div
+ * @param {pokemonObj} pokemonObj is the pokemon object of which the image needs to be updated.
+ * @returns Nothing. 
+ */
+updateImage = function(pokemonObj){
+                var img_url = 'https://assets.pokemon.com/assets/cms2/img/pokedex/full/XXX.png';
+                img_url = img_url.replace('XXX',pokemonObj['num']);
+                removeClass(document.getElementById('sprite'),'is-fullSize');
+                // $('#sprite').removeClass('is-fullSize');
+                showImage(img_url);
+        }
+/**
+ * This function is used to remove the class from its parenet element
+ * @param {parentEl, classToBeRemoved} parentEL is the parent element from which the class classToBeRemoved is to be removed.
+ * @returns Nothing. 
+ */
+removeClass = function(parentEl, classToBeRemoved) { // DOM element, className for remove.
+			    var classes = parentEl.className.split(" ");
+
+			    for (var i = 0; i < classes.length; i++) {
+			        if (classes[i] == classToBeRemoved) {
+			            // Remove class.
+			            classes.splice(i, 1);
+			        }
+
+			    }
+			    parentEl.className = classes.join(" ");
+}
+
+/**
+ * This function is used to show the image of the pokemon
+ * @param {image} image is the image which has to be displayed on the pokedex
+ * @returns Nothing. 
+ */
+showImage = function(image){
+			var elem = document.getElementById('sprite');
+           	elem.style.backgroundImage="url("+image+")";
+}
+
+/**
+ * This function is used to show the description of the pokemon
+ * @param {pokemonObj} pokemonObj is the pokemon object of which we need to update the description.
+ * @returns Nothing. 
+ */
+updateDescription = function(pokemonObj){
+           	console.log(pokemonObj);
+            var description = "";
+            description += get_formatted_string('Number',pokemonObj['num']);
+            description += get_formatted_string('Name',pokemonObj['name']);
+            description += get_formatted_string('Type',pokemonObj['type']);
+            description += get_formatted_string('Height',pokemonObj['height']);
+            description += get_formatted_string('Weight',pokemonObj['weight']);
+            description += get_formatted_string('Candy',pokemonObj['candy']);
+            description += get_formatted_string('Candy Count',pokemonObj['candy_count']);
+            description += get_formatted_string('Egg',pokemonObj['egg']);
+            description += get_formatted_string('Spawn Chance',pokemonObj['spawn_chance']);
+            description += get_formatted_string('Avg Spawns',pokemonObj['avg_spawns']);
+            description += get_formatted_string('Multipliers',pokemonObj['multipliers']);
+            description += get_formatted_string('Weakness',pokemonObj['weaknesses']);
+            description += get_formatted_string('Next Evolution',JSON.stringify(pokemonObj['next_evolution']));
+            console.log(description);
+            document.getElementById('description').innerHTML=description;
+
+}
+/**
+ * This function is used to get the formatted string in ordere to show it in the description
+ * @param {key,val} key is the key of the pokemon object and value is its value for that key.
+ * @returns formatted string. 
+ */
+get_formatted_string = function(key, val){
+            if(null != val && undefined != val){
+                return key+" : "+val.toString()+ "<br/>";
+            }
+            return '';
+
+        }
+/**
+ * This function is used to display the error when the searched pokemon does not exist.
+ * @param {} None
+ * @returns Nothing
+ */
+pokemonDoesNotExist = function(){
+            var message = "pokemon not found";
+            // document.getElementById('sprite').className+=' is-fullSize';
+            showImage("images/error.gif");
+            // errorMessage(message);
+}
+/**
+ * This function is used to display the error message when the searched pokemon does not exist.
+ * @param {} None
+ * @returns Nothing
+ */
+errorMessage = function(message){  /*Displays the Error Message*/
+            document.getElementById('description').innerHTML=message;
+        }
diff --git a/js/pokedex_change.js b/js/pokedex_change.js
@@ -0,0 +1,43 @@
+/**
+ * This JS holds the functionality of the pokedex to change the details of the pokemon on the click of previous and next butttons
+ * 
+ * 
+ */
+
+document.getElementById('plus').addEventListener('click', function(event) {
+  change_pokedex(event.target);
+});
+//Defines the function to be called on click
+/**
+ * This function is used to change the pokemon image and pokemon number in their place holder on the click of button
+ * @param {button} button is used to update pokemon based on whether it is a previous button or the next button.
+ * @returns None.
+ */
+change_pokedex = function(button){
+	console.log(button.id);
+	if(currentPokeobj == null){
+		return;
+	}
+	var pokeObj = null;
+	if(button.id == 'prev'){
+		pokeObj = getPokemonObject(currentPokeobj.name,1);
+	}else if (button.id == 'next'){
+		pokeObj = getPokemonObject(currentPokeobj.name,-1);
+	}else{
+		//Ignoring the rest of the events
+		return
+	}
+		if(null == pokeObj){
+                    pokemonDoesNotExist();
+                    document.getElementById('pokenumber').innerHTML ='';
+                    document.getElementById('pokename').value='';
+                }else{
+                	currentPokeobj = pokeObj;
+                    updateImage(pokeObj);  
+                    document.getElementById('pokenumber').innerHTML = pokeObj.num;
+                    document.getElementById('pokename').value=pokeObj.name;
+                    // updateDescription(pokeObj);
+                }
+}
+
+
diff --git a/js/pokedex_toggle.js b/js/pokedex_toggle.js
@@ -0,0 +1,47 @@
+/**
+ * This JS holds the functionality of the pokedex to switch it On and Off.
+ * When the Pokedex is turned on the light will blink and it will stop on closing the pokedex.
+ * 
+ */
+
+
+var span_to_open = document.querySelector(".open-button");
+/**
+ * Defines the function to be called on click which is used to open the pokedex and turn the lights on.
+ * @param {} 
+ * @returns None.
+ */
+toggle_pokedex_on = function(){
+	document.getElementsByClassName('Pokedex-rightBackface')[0].className+=' rotate-open';
+	document.getElementsByClassName('Pokedex-rightFrontface')[0].className+=' rotate-close';
+	var d = document.getElementById("light");
+	d.className += " is-animated";
+}
+
+/**
+ * Checks if `addEventListener` can be used and adds the click eventlListener.
+ * @param {} 
+ * @returns None.
+ */
+if (span_to_open.addEventListener) span_to_open.addEventListener('click', toggle_pokedex_on, false);
+else span_to_open.attachEvent('onclick', toggle_pokedex_on);
+
+var span_to_close = document.querySelector(".close-button");
+/**
+ * Defines the function to be called on click which is used to close the pokedex and turn off the light.
+ * @param {} 
+ * @returns None
+ */
+toggle_pokedex_off = function(){
+	console.log('Now closing');
+	removeClass(document.getElementsByClassName('Pokedex-rightBackface')[0],'rotate-open');
+	removeClass(document.getElementsByClassName('Pokedex-rightFrontface')[0],'rotate-close');
+	var d = document.getElementById("light");
+	d.classList.remove("is-animated");
+
+}
+
+//Checks if `addEventListener` can be used and adds the click eventlListener.
+if (span_to_close.addEventListener) span_to_close.addEventListener('click', toggle_pokedex_off, false);
+else span_to_close.attachEvent('onclick', toggle_pokedex_off);
+
Original file line number	Diff line number	Diff line change
Expand Up		@@ -59,3 +59,5 @@ A list of 151 Pokemon are present in the js/pokedex.json file. These following f
		## CONTRIBUTING

		Send a pull request with what you worked on and we'll do a merge if everything seems fine.

		-- My first edit --