adjust benefit buttons, console

similar_web/index.html

@@ -161,6 +161,10 @@
               </div>
             </div>
             <div class="text-muted mb-2 border-bottom">BENEFIT</div>
+            <div class="btn-group group__btn" role="group" aria-label="date-buttons">
+              <button class="btn__benefit active">搜尋流量</button>
+              <button class="btn__benefit">有搜尋流量的網頁數</button>
+            </div>
             <div class="row g-5 mb-3">
               <div class="col-sm-4">
                 <div class="card p-3">
@@ -222,134 +226,93 @@
   src="https://code.jquery.com/jquery-3.6.0.min.js"
   integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
   crossorigin="anonymous"></script>
-<script src="https://unpkg.com/js-datepicker"></script>
+  <script src="https://unpkg.com/js-datepicker"></script>
 
 <script>
-const input = document.getElementById("search_query");
-const search__btn = document.getElementById("search__btn");
-const picker_str = datepicker('#daterng1', {
-  id: 1
-});
-const picker_end = datepicker('#daterng2', {
-  id: 1
-});
-$('.sub__date').click(function(e){
-  e.preventDefault();
-  console.log(picker_end.getRange());
-});
-search__btn.addEventListener("click", function(e) {
-  e.preventDefault();
-  check_form();
-})
-input.addEventListener("keyup", function(event) {
-  // Number 13 is the "Enter" key on the keyboard
-  if (event.keyCode === 13) {
+  const input = document.getElementById("search_query");
+  const search__btn = document.getElementById("search__btn");
+  const btn__benefit = document.querySelectorAll(".btn__benefit");
+  const picker_str = datepicker('#daterng1', {
+    id: 1
+  });
+  const picker_end = datepicker('#daterng2', {
+    id: 1
+  });
+  $('.sub__date').click(function(e){
+    e.preventDefault();
+    console.log(picker_end.getRange());
+  });
+  search__btn.addEventListener("click", function(e) {
+    e.preventDefault();
     check_form();
-    event.preventDefault();
-//    document.getElementById("myBtn").click();
-  }
-});
+  })
+  input.addEventListener("keyup", function(event) {
+    // Number 13 is the "Enter" key on the keyboard
+    if (event.keyCode === 13) {
+      check_form();
+      event.preventDefault();
+  //    document.getElementById("myBtn").click();
+    }
+  });
 
-const myChart = echarts.init(document.getElementById('main'));
-let option;
+  btn__benefit.forEach((item, i) => {
+    item.addEventListener("click", function(){
+      item.toggleClass('active');
+    })
+  });
 
-function check_form(){
-    const qry = document.getElementById('search_query').value;
-    axios.get('http://www.googo.org:8080/domain/' + qry)
-    .then((response) => {
-      const sitename = document.getElementById('sitename');
-      const sitetitle = document.getElementById('sitetitle');
-      const descriptions = document.getElementById('descriptions');
-      const globalrank = document.getElementById('globalrank');
-      const countryrank = document.getElementById('countryrank');    
-      const category = document.getElementById('category');    
-
-      console.log(response.data); 
-      //    alert(response.data.SiteName);
-      //    var obj = JSON.parse(response.data);
-      //    alert(obj);
-      itename.textContent =response.data.SiteName;
-      descriptions.textContent=response.data.Description;
-      globalrank.textContent=response.data.GlobalRank.Rank;
-      sitetitle.textContent=response.data.Title;
-      countryrank.textContent=response.data.CountryRank.Rank;
-      category.textContent=response.data.Category;
-  
-      const key_ary=[];
-      const val_ary=[];
-      for (const [key, value] of Object.entries(response.data.EstimatedMonthlyVisits)) {
-        key_ary.push(key);
-        val_ary.push(value);
-      }
-      option = {
-          xAxis: {
-              type: 'category',
-              boundaryGap: false,
-              data: key_ary
-          },
-          yAxis: {
-              type: 'value'
-          },
-          series: [{
-              data: val_ary,
-              type: 'line',
-              areaStyle: {}
-          }]
-      };
-          myChart.setOption(option);
-      //    sitename.innerHTML =response.data
-      var bar = document.getElementById('bar');
+  const myChart = echarts.init(document.getElementById('main'));
+  let option;
 
-var barChart = echarts.init(bar);
-let traffics;
+  function check_form(){
+      const qry = document.getElementById('search_query').value;
+      axios.get('http://www.googo.org:8080/domain/' + qry)
+      .then((response) => {
+        const sitename = document.getElementById('sitename');
+        const sitetitle = document.getElementById('sitetitle');
+        const descriptions = document.getElementById('descriptions');
+        const globalrank = document.getElementById('globalrank');
+        const countryrank = document.getElementById('countryrank');    
+        const category = document.getElementById('category');    
 
-traffics = {
-    title: {
-        text: '世界人口总量',
-        subtext: '数据来自网络'
-    },
-    tooltip: {
-        trigger: 'axis',
-        axisPointer: {
-            type: 'shadow'
-        }
-    },
-    legend: {
-        data: ['2011年', '2012年']
-    },
-    grid: {
-        left: '3%',
-        right: '4%',
-        bottom: '3%',
-        containLabel: true
-    },
-    xAxis: {
-        type: 'value',
-        boundaryGap: [0, 0.01]
-    },
-    yAxis: {
-        type: 'category',
-        data: ['巴西', '印尼', '美国', '印度', '中国', '世界人口(万)']
-    },
-    series: [
-        {
-            name: '2011年',
-            type: 'bar',
-            data: [18203, 23489, 29034, 104970, 131744, 630230]
-        },
-        {
-            name: '2012年',
-            type: 'bar',
-            data: [19325, 23438, 31000, 121594, 134141, 681807]
+        console.log(response.data); 
+        //    alert(response.data.SiteName);
+        //    var obj = JSON.parse(response.data);
+        //    alert(obj);
+        itename.textContent =response.data.SiteName;
+        descriptions.textContent=response.data.Description;
+        globalrank.textContent=response.data.GlobalRank.Rank;
+        sitetitle.textContent=response.data.Title;
+        countryrank.textContent=response.data.CountryRank.Rank;
+        category.textContent=response.data.Category;
+    
+        const key_ary=[];
+        const val_ary=[];
+        for (const [key, value] of Object.entries(response.data.EstimatedMonthlyVisits)) {
+          key_ary.push(key);
+          val_ary.push(value);
         }
-    ]
-};
+        option = {
+            xAxis: {
+                type: 'category',
+                boundaryGap: false,
+                data: key_ary
+            },
+            yAxis: {
+                type: 'value'
+            },
+            series: [{
+                data: val_ary,
+                type: 'line',
+                areaStyle: {}
+            }]
+        };
+            myChart.setOption(option);
+      //   sitename.innerHTML =response.data
+
+      // var bar = document.getElementById('bar');
 
-  traffics && barChart.setOption(traffics);
-      console.log(response.status);
-      console.log(response.statusText);
-      console.log(response.headers);
-      console.log(response.config);
+      // var barChart = echarts.init(bar);
     });
   }
 </script>

similar_web/main.css

@@ -21,6 +21,7 @@ body {
 .h3 {
     font-size: 2rem;
 }
+
 /* card */
 .card{
     transition: all .3s;
@@ -93,4 +94,33 @@ body {
 }
 .keyword_add {
     margin: 1rem auto;
-}
+}
+
+.group__btn {
+    border-radius: 10px;
+    margin-bottom: 1rem;
+}
+.btn-group .btn__benefit {
+    border: 1px solid grey;
+    background-color: white;
+    padding: .5rem;
+    width: 8rem;
+    font-size: .9rem;
+    transition: all .4s;
+}
+  
+  .btn-group .btn__benefit:nth-of-type(1) {
+    border-radius: 5px 0  0 5px;
+  }
+  .btn-group .btn__benefit:nth-of-type(2) {
+    border-radius: 0 5px 5px 0;
+  }
+  .btn-group .btn__benefit:hover {
+    background-color: grey;
+    color: white;
+  }
+  
+  .btn-group .btn__benefit.active {
+    background-color: grey;
+    color: white;
+  }