transfer trendRepo Api to frontend

+const trendBox = document.getElementById("jsGotoTrend");
+const trendRepoBox = document.getElementById("jsGotoTrendRepos");
+const indicator = document.getElementById("jsIndicator");
+const URL = "https://api.trending-github.com/github/repositories?period=daily";
+
+
+const handleRepo = (list) =>{
+    indicator.style.display = "none";
+    list.forEach(element => {
+        const anchor = document.createElement("a");
+        anchor.href = element.url;
+        anchor.target = "_blank"
+        anchor.innerHTML = `<span class="repoName">${element.name}</span> : ${element.description} - <span class="repoStar">${element.stars} stars</span>`
+        trendRepoBox.appendChild(anchor);
+    });
+}
+
+
+const getTrend=()=>{
+    const response = fetch(URL).then(function(response){
+        return response.json();
+    }).then(function(data){
+        const trendRepoList = data.slice(0,3);
+        handleRepo(trendRepoList);
+    });
+
+};
+
+const init=()=>{
+    getTrend();
+};
+
+if(trendBox){
+    init();
+};
\ No newline at end of file

+const userContributionsBox = document.querySelector(".user-status__contributions");
+const totalContributionIndicator = document.getElementById("jsTotalContributions");
+
+
+
+const handleImage = () =>{
+    const total = totalContributionIndicator.innerText;
+    console.log(total);
+};
+
+
+const getGithubRepo = () =>{
+    console.log("Get Api here");
+};
+
+const init=()=>{
+    handleImage();
+    getGithubRepo();
+};
+
+if(userContributionsBox){
+    init();
+};
\ No newline at end of file

 import "../scss/styles.scss";
 
-console.log("it works");
\ No newline at end of file
+console.log("main");
\ No newline at end of file

+const form = document.querySelector(".home-search__form");
+const input = document.getElementById("jsInput");
+
+const handleSearch = (event) => {
+    event.preventDefault();
+    const text = input.value;
+    const link = document.createElement("a");
+    link.href = `https://www.google.com/search?q=${text}`;
+    link.target = "_blank";
+    form.appendChild(link);
+    link.click();
+    input.value = "";
+}
+
+
+if(form){
+    form.addEventListener("submit", handleSearch);
+}
\ No newline at end of file

 $blue: #0063b2;
 $skyblue: #9cc3d5;
+$star: #ffb700;
 $space: 40px;

@@ -81,6 +81,13 @@
         font-size: 18px;
         margin: 10px 0px;
       }
+      .repoName {
+        font-weight: 600;
+      }
+      .repoStar {
+        font-weight: 600;
+        color: $star;
+      }
     }
   }
 }

@@ -13,60 +13,13 @@ const getQuote = async (req, res) => {
   return { quote, author };
 };
 
-const gitTrend = async (req, res) => {
-  const url =
-    "https://api.trending-github.com/github/repositories?period=daily";
-  const trendData = await axios.get(url).then(function (response) {
-    return response.data;
-  });
-  const name0 = trendData[0].name;
-  const description0 = trendData[0].description;
-  const Url0 = trendData[0].url;
-  const stars0 = trendData[0].stars;
-  const name1 = trendData[1].name;
-  const description1 = trendData[1].description;
-  const Url1 = trendData[1].url;
-  const stars1 = trendData[1].stars;
-  const name2 = trendData[2].name;
-  const description2 = trendData[2].description;
-  const Url2 = trendData[2].url;
-  const stars2 = trendData[2].stars;
-
-  return {
-    name0,
-    description0,
-    Url0,
-    stars0,
-    name1,
-    description1,
-    Url1,
-    stars1,
-    name2,
-    description2,
-    Url2,
-    stars2,
-  };
-};
 
 export const handleHome = async (req, res) => {
   const quote = await getQuote();
-  const trend = await gitTrend();
   res.render("home", {
     pageTitle: "Home",
     quote: quote.quote,
-    author: quote.author,
-    name0: trend.name0,
-    description0: trend.description0,
-    Url0: trend.Url0,
-    stars0: trend.stars0,
-    name1: trend.name1,
-    description1: trend.description1,
-    Url1: trend.Url1,
-    stars1: trend.stars1,
-    name2: trend.name2,
-    description2: trend.description2,
-    Url2: trend.Url2,
-    stars2: trend.stars2,
+    author: quote.author
   });
 };
 
@@ -76,7 +29,7 @@ export const getUserDetail = async (req, res) => {
     const quote = await getQuote();
     const user = await User.findById(id);
     const repo = await getRepos();
-    const totalCon = await getContributions();
+    const totalCon = await getContributions(user.githubName);
     res.render("userDetail", {
       pagetTitle: "User Detail",
       quote: quote.quote,
@@ -203,7 +156,7 @@ export const logout = (req, res) => {
   res.redirect("/");
 };
 
-const getRepos = async(req,res) =>{
+const getRepos = async() =>{
   const url = "https://api.github.com/users/lsj8706/repos?sort=updated&per_page=2";
   const latelyRepos = await axios.get(url).then(function(response){
       return response.data;
@@ -221,9 +174,8 @@ const getRepos = async(req,res) =>{
   };
 };
 
-const getContributions = async(req, res) =>{
+const getContributions = async(username) =>{
   const token = process.env.GH_SECRET_SH;
-  const username = 'lsj8706'
   const headers = {
       'Authorization': `bearer ${token}`,
   };

@@ -8,6 +8,9 @@ block content
         .home-quote
             h2=quote 
             h3=author
+        .home-search 
+            form.home-search__form
+                input(type="text" id="jsInput" placeholder="Google 검색")
         .home-link
             if !loggedUser
                 a(href="/join") Join
@@ -15,13 +18,10 @@ block content
             else 
                 a(href=`/users/${loggedUser._id}`) My profile
             
-        .gotoTrend
+        .gotoTrend#jsGotoTrend
             h2 Today's Trending Repositories
-            .gotoTrend-repos
-                a(href=Url0) 
-                    p=name0+": "+description0+" - "+stars0+" stars"
-                a(href=Url1) 
-                    p=name1+": "+description1+" - "+stars1+" stars"
-                a(href=Url2) 
-                    p=name2+": "+description2+" - "+stars2+" stars"
-
+            .gotoTrend-repos#jsGotoTrendRepos
+                span#jsIndicator Waiting....
+block scripts 
+    script(src="/static/js/getTrend.js")
+    script(src="/static/js/search.js") 

@@ -11,4 +11,4 @@ html
             block content
         include ../partials/footer
     script(src="/static/js/main.js")
-
+    block scripts

@@ -37,18 +37,19 @@ block content
     hr
     .user-status
         .user-status__contributions
-            a(href=Url0, style={color:'grey'})
-               p=totalContributions
+            span#jsTotalContributions=totalContributions
             img(src=`http://ghchart.rshah.org/${user.githubName}` alt="Name Your Github chart")
         .user-status__character
-            h3 Your step | commit numbers 
+            h3 Your step
             img(src="https://preview.free3d.com/img/2019/12/2269306250288170045/1oe8ymrc-900.jpg" alt="character" style="height:200px; width:250px;")
     .user-repositories
         .user-repo
+            a(href=firstRepoUrl)
                 h3 REPO 1
-            a(href=Url0, style={color:'grey'})
-               p=fitstRepoName+": "+firstRepoUrl
+                p=fitstRepoName
             br
+            a(href=secondRepoUrl)
                 h3 REPO 2
-            a(href=Url0, style={color:'grey'})
-               p=secondRepoName+": "+secondRepoUrl
+                p=secondRepoName
+block scripts 
+    script(src="/static/js/githubInfo.js") 

@@ -2,7 +2,12 @@ const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const path = require("path");
 
 module.exports = {
-  entry: "./src/client/js/main.js",
+  entry: {
+    main: "./src/client/js/main.js",
+    getTrend: "./src/client/js/getTrend.js",
+    githubInfo: "./src/client/js/githubInfo.js",
+    search: "./src/client/js/search.js",
+  },
   mode: "development",
   watch: true,
   plugins: [
@@ -11,7 +16,7 @@ module.exports = {
     }),
   ],
   output: {
-    filename: "js/main.js",
+    filename: "js/[name].js",
     path: path.resolve(__dirname, "assets"),
     clean: true,
   },