Project start

+var express = require('express');
+var app = express();
+var router = require('./router/main')(app);
+var bodyParser = require('body-parser');
+
+app.set('views', __dirname + '/views');
+app.set('view engine', 'ejs');
+app.engine('html', require('ejs').renderFile);
+
+var server = app.listen(3000, function(){
+	console.log('on');
+});
+
+app.use(express.static('public'));

+{
+  "name": "yoon",
+  "version": "1.0.0",
+  "description": "",
+  "main": "App.js",
+  "dependencies": {
+    "ejs": "^2.6.1",
+    "express": "^4.16.3",
+    "urlencode": "^1.1.0"
+  },
+  "devDependencies": {},
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "ISC"
+}

+
+body{
+  width:100vw;
+  height:100vh;
+
+  background-size:auto;
+}
+
+
+.imgOpacity{
+  width:100vw;
+  height:100vh;
+
+  background: #fff;
+  color: white;
+  color:rgba(1,1,1,1);
+}
+.header{
+  width:100vw;
+  height:5vh;
+  display:flex;
+  align-items:center;
+
+  justify-content:space-around;
+
+}
+.center{
+  width:100vw;
+  height:50vh;
+  display:flex;
+  align-items:center;
+  justify-content:space-around;
+}
+
+.empty{
+  width:50vw;
+  height:30vh;
+  display:flex;
+  align-items:center;
+  justify-content:space-around;
+}
+
+.center2{
+  width:100vw;
+  height:1vh;
+  display:flex;
+  align-items:center;
+  justify-content:space-around;
+}

+module.exports = function(app){
+
+var request = require("request");
+var urlenconde = require('urlencode');
+var apikey = "RGAPI-67430017-718e-4456-8446-94bf05fb39ec"//api
+
+var profileIconId;  //아이콘 번호
+var revisionDate; //수정날짜
+var id; //소환사ID
+var accountId; //계정Id
+var name; //소환사 이름
+var summonerLevel;  //소환사 레벨
+
+var startIndex;
+var endIndex;
+var totalGames;
+var matches;  //경기정보
+
+  app.get('/', function(req, res) {
+  	  res.render('main', { title: 'R U TROLL?' });
+  });
+
+  app.get('/search/:username/', function(req, res){
+    //롤 api url
+    name = req.params.username;
+    var nameUrl = "https://kr.api.riotgames.com/lol/summoner/v3/summoners/by-name/" + urlenconde(name)+"?api_key="+ apikey;
+    request(nameUrl,function(error,response,body){
+      var info_summoner_json = JSON.parse(body);
+
+      accountId = info_summoner_json["accountId"];
+      id = info_summoner_json["id"];
+      summoner = info_summoner_json["name"];
+      profileIconId = info_summoner_json["profileIconId"];
+      summonerLevel = info_summoner_json["summonerLevel"];
+      revisionDate = info_summoner_json["revisionDate"];
+
+      var rankedUrl = "https://kr.api.pvp.net/api/lol/kr/v2.5/league/by-summoner/"+ urlenconde(id)+ "?api_key=" + apikey;
+      var champUrl = "https://kr.api.pvp.net/api/lol/kr/v1.3/stats/by-summoner/" + urlenconde(id) + "/ranked?api_key=" + apikey;
+      request(champUrl,function(error,response,body){
+        var info_champ_json = JSON.parse(body);
+        var champions = info_champ_json["champions"];
+        var champ_point = new Array();
+        var champ_id = new Array();
+        var champ_name = new Array();
+        var champ_pic = new Array();
+        var champions_length = Object.keys(champions).length;
+
+        for(var i=0; i < champions_length; i++){
+          champ_point[i] = (champions[i]["stats"]["totalSessionsWon"]/champions[i]["stats"]["totalSessionsPlayed"]*200)
+          + ((champions[i]["stats"]["totalAssists"]+champions[i]["stats"]["totalChampionKills"])/champions[i]["stats"]["totalDeathsPerSession"]*100)
+          + (champions[i]["stats"]["totalSessionsPlayed"]*3);
+          champ_id[i] = champions[i]["id"];
+        }
+
+        var staticUrl = "https://global.api.pvp.net/api/lol/static-data/kr/v1.2/champion/?api_key=" + apikey;
+        request(staticUrl,function(error,response,body){
+          var info_static_champ_json = JSON.parse(body);
+          var champion = info_static_champ_json["data"];
+          for(var i=0; i < champ_id.length; i++){
+                for(js in champion){
+                  for(j in champion[js]){
+                    if(champion[js]["id"] == champ_id[i]){
+                      champ_name[i] = champion[js]["key"];
+                      champ_pic[i] = "https://opgg-static.akamaized.net/images/lol/champion/"+champ_name[i]+".png?image=c_scale,w_46";
+                    }
+                  }
+                }
+          }
+          champ_name[champ_name.length] = "total";
+          var temp_id;
+          var temp_name;
+          var temp_point;
+          var temp_pic;
+          for(var i=0; i < champ_id.length-1; i++){
+            for(var j=i+1;j <champ_id.length-1; j++)
+            if(champ_point[i] > champ_point[j]){
+              temp_id = champ_id[i];
+              temp_name = champ_name[i];
+              temp_point = champ_point[i];
+              temp_pic = champ_pic[i];
+              champ_id[i] = champ_id[j]
+              champ_name[i] = champ_name[j];
+              champ_point[i] = champ_point[j];
+              champ_pic[i] = champ_pic[j];
+              champ_id[j] = temp_id
+              champ_name[j] = temp_name;
+              champ_point[j] = temp_point;
+              champ_pic[j] = temp_pic;
+            }
+          }
+
+          res.render('index', { title: req.params.username ,
+          c_id: champ_id,
+          c_name: champ_name,
+          c_point: champ_point,
+          c_pic: champ_pic,
+          c_summoner: summoner
+          });
+        });
+      });
+    });
+  });
+};

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title><%= title %></title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+    <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style>
+    <script>
+    $(document).ready(function(){
+
+
+      $("button#searchButton").click(function(){
+        var name = $("input").val();
+        alert(name);
+        location.href = "http://127.0.0.1:3000/search/" + name;
+      })
+    });
+    </script>
+  </head>
+  <body>
+    <div class="imgOpacity">
+      <div class="center">
+        <img src="http://postfiles5.naver.net/MjAxNzA1MTRfMjYz/MDAxNDk0NjkzMzQyMjA1.q2Lr8tHc36PRcyVYhCplqB4J868vV67CQr8l1MSduCkg.sfF_kI6oJZpMdOeKzFucmZXRoQXuSOI4M1IZhMPTp30g.PNG.yoonty21/logo.png?type=w580">
+      </div>
+      <div class="center2">
+     	  <input type="text" class="input_text" placeholder="소환사 이름">
+        <span class="input-group-btn">
+        <button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
+      </span>
+      </div>
+        <div class="center2">
+          <%= c_summoner %>
+          <%= "트롤력"  %>
+          <%= "point: " + 1000000/c_point[c_id.length-1] %>
+        </div>
+      <% for (var i=0; i<c_id.length-1; i++){ %>
+        <div class="center2">
+          <img src= <%=c_pic[i]%> >
+          <%= c_name[i] %>
+          <%= "point: " + 1000000/c_point[i] %>
+          <% } %>
+        </div>
+</div>
+</body>
+</html>

+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title><%= title %></title>
+    <link rel="stylesheet" href="css/style.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
+    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
+    <style> @import url("http://fonts.googleapis.com/earlyaccess/nanumgothic.css");</style>
+    <script>
+    $(document).ready(function(){
+
+
+      $("button#searchButton").click(function(){
+        var name = $("input").val();
+        alert(name);
+        location.href = "http://127.0.0.1:3000/search/" + name;
+      })
+    });
+    </script>
+  </head>
+  <body>
+    <div class="imgOpacity">
+    <div class="center">
+      <img src="http://postfiles5.naver.net/MjAxNzA1MTRfMjYz/MDAxNDk0NjkzMzQyMjA1.q2Lr8tHc36PRcyVYhCplqB4J868vV67CQr8l1MSduCkg.sfF_kI6oJZpMdOeKzFucmZXRoQXuSOI4M1IZhMPTp30g.PNG.yoonty21/logo.png?type=w580">
+    </div>
+    <div class="center2">
+   	<input type="text" class="input_text" placeholder="소환사 이름">
+    <span class="input-group-btn">
+      <button id="searchButton" class="btn btn-primary" type="button" onclick="search(name)">검색!</button>
+    </span>
+   </div>
+  </div>
+</body>
+</html>