calculate rewrite

SH
Commit b3eb4cfa6972d1c93b4756afae946f264062f388 b3eb4cfa 2 parents 1628522e 4c7fe1b4
Showing 2 changed files with 137 additions and 45 deletions
project/css/templatemo-style.css
project/index.html
--- a/project/css/templatemo-style.css
View file @b3eb4cf
+++ b/project/css/templatemo-style.css
View file @b3eb4cf
@@ -190,7 +190,7 @@ a:focus {
 }
 .tm-hero-title {
-  font-size: 2rem;
+  font-size: 40px;
   text-shadow: 2px 2px 2px #333;
 }
@@ -384,42 +384,6 @@ select::-ms-expand {
 input{
   border-radius:5px;
 }
-
-#map-answer{
-	display:flex;
-	justify-content: center;
-  border-top:2px solid white;
-  padding-top:50px;
-}
-.answer-field{
-	width:30%;
-	font-size :30px;
-	line-height:80px;
-}
-#answer-how-many-hours{
-  width:100%;
-  margin-bottom:100px;
-}
-.row{
-  display:flex;
-  justify-content: center;
-}
-#answer-detail{
-  display:flex;
-  justify-content: center;
-}
-.answer-detail-question,
-.answer-detail-answer{
-  width:49%;
-}
-.answer-detail-question{
-  text-align: right;
-  margin-right:10px;
-}
-.answer-highlight{
-	font-size:35px;
-	color:darkseagreen;
-}
 .tm-underline {
   border-top: 2px solid white;
   height: 8px;	
@@ -494,7 +458,70 @@ iframe{
   min-height: 750px;
   position: relative;
   padding-bottom: 50px;
-  padding-top: 160px;
+  padding-top: 20px;
+}
+
+.answer-grid-container {
+  display: grid;
+  margin:30px 30px;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  grid-template-rows: 1fr 0.5fr 0.5fr 0.5fr;
+  gap: 10px 20px;
+  grid-template-areas:
+    ". map answer-field ."
+    "list-answer-field list-answer-field list-answer-field list-answer-field"
+    "detail-answer-field detail-answer-field detail-answer-field detail-answer-field"
+    "detail-answer-field detail-answer-field detail-answer-field detail-answer-field";
+}
+
+.map { grid-area: map; }
+
+.answer-field { 
+  grid-area: answer-field; 
+  font-size:30px;
+  text-shadow: 2px 2px 2px #333;
+}
+
+.list-answer-field { 
+  grid-area: list-answer-field;
+  font-size:30px;
+  text-shadow: 2px 2px 2px #333;
+  text-align : center;
+}
+
+.detail-answer-field {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr 1fr;
+  gap: 20px 20px;
+  grid-template-areas:
+    "salary-field dish-field everest-field earth-field";
+  grid-area: detail-answer-field;
+  height : 200px;
+}
+.detail-answer-box{
+  margin-top:10px;
+  display:table-cell;
+  background-color : darkgrey;
+  border-radius:6px;
+  font-size:20px;
+  padding : 10px 10px;
+  height:150px;
+}
+.detail-answer-small-box{
+  font-size:30px;
+  margin-top:20px;
+}
+.salary-field { grid-area: salary-field; }
+
+.dish-field { grid-area: dish-field; }
+
+.everest-field { grid-area: everest-field; }
+
+.earth-field { grid-area: earth-field; }
+
+.detail-answer-small-box{
+  transform:translateX(2.5%);
+  width : 95%;
 }
--- a/project/index.html
View file @b3eb4cf
+++ b/project/index.html
View file @b3eb4cf
@@ -5,7 +5,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <meta http-equiv="X-UA-Compatible" content="ie=edge" />
-  <title>The Town HTML CSS Template</title>
+  <title>TongGilMut</title>
   <link rel="stylesheet" href="fontawesome-5.5/css/all.min.css" />
   <link rel="stylesheet" href="slick/slick.css">
   <link rel="stylesheet" href="slick/slick-theme.css">
@@ -18,8 +18,12 @@
   <script src="../../docs/js/jquery-1.9.1.js"></script>
   <script type="text/javascript" src="../../docs/js/examples-base.js"></script>
   <script type="text/javascript" src="../../docs/js/highlight.min.js"></script>
+<<<<<<< HEAD
   <script type="text/javascript"
     src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
+=======
+  <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=rr4owjosjy&submodules=geocoder"></script>
+>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
   <link rel="stylesheet" type="text/css" href="../../docs/css/examples-base.css" />
   <!--
@@ -68,7 +72,7 @@
     </div>
     <div class="tm-next tm-intro-next">
-      <a href="#contact" class="text-center tm-down-arrow-link">
+      <a href="#contact" class="button1 text-center tm-down-arrow-link">
         <i class="fas fa-3x fa-caret-down tm-down-arrow">계산해보기</i>
       </a>
     </div>
@@ -90,6 +94,7 @@
           <input type="text" id="end">
         </div>
         <div class="question-field question-grade">몇학년인가요?</div>
+<<<<<<< HEAD
         <div class="input-grade">
           <div class="custom-select" style="width:208px; margin-right:40px">
             <select id="semester">
@@ -124,6 +129,60 @@
         <div class="answer-field" id="answer-how-many-hours">
           지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
           졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
+=======
+        <div class="input-grade"><div class="custom-select" style="width:208px; margin-right:40px">
+          <select>
+            <option value="0">1학년 1학기</option>
+            <option value="sem-1-1">1학년 1학기</option>
+            <option value="sem-1-2">1학년 2학기</option>
+            <option value="sem-2-1">2학년 1학기</option>
+            <option value="sem-2-2">2학년 2학기</option>
+            <option value="sem-3-1">3학년 1학기</option>
+            <option value="sem-3-2">3학년 2학기</option>
+            <option value="sem-4-1">4학년 1학기</option>
+            <option value="sem-4-2">4학년 2학기</option>
+          </select>
+        </div></div>
+      </div>
+        <a href="#result" class="button2 text-center tm-down-arrow-link">
+          <button style= "color:black" class="fas fa-3x fa-caret-down tm-down-arrow" type="button" onclick="semester();return false;">계산하기
+            </button>
+        </a>
+      </div>
+    </section>
+      
+
+    <section id="result">
+      <div class="answer-grid-container">
+        <div class="map" id="map" style="width:500px;height:300px;""></div>
+        <div class="answer-field" style="width:300px;"><br><br>한번 갈 때마다 ...<br>
+          <span class="answer-highlight" id="hour">?</span> 시간 
+          <span class="answer-highlight" id="min">?</span> 분 <br>
+          <span class="answer-highlight" id="dist">?</span> km <br>
+        </div>
+
+        <div class="list-answer-field">
+          지금까지 <span class="answer-highlight" id="since">?</span>시간을 길에서 보내셨군요<br>
+            졸업까지 앞으로 <span class="answer-highlight" id="until">?</span>시간은 더 길에서 보내시면 됩니다.<br>
+        </div>
+        <div class="detail-answer-field">
+          <div class="detail-answer-box salary-field">이 시간에 알바를 했다면?<br>
+            <div class="detail-answer-small-box">
+              <span id = "salary">?</span>원<br></div></div>
+          <div class="detail-answer-box dish-field">교통비로 국밥<br>
+            <div class="detail-answer-small-box">
+              <span id = "dish">?</span>그릇<br></div>
+            </div>
+          <div class="detail-answer-box everest-field">이 거리라면 에베레스트 등반을<br>
+            <div class="detail-answer-small-box">
+              <span id = "everest">?</span>번이나...<br></div>
+            </div>
+          <div class="detail-answer-box earth-field">지구를<br>
+            <div class="detail-answer-small-box">
+              <span id = "earth">?</span>바퀴나 돌아요<br><br><br>
+            </div>
+          </div>
+>>>>>>> 4c7fe1b45bf1746088a811e7fc1b8a9c7172f7cd
         </div>
       </div>
     </div>
@@ -397,9 +456,9 @@
         since = sem * time * 150
         until = (8 - sem) * time * 150
         salary = since * 8590
-        dish = Math.floor((pay * 150) / 6000)
+        dish = Math.floor((sem * pay * 150) / 6000)
-        everest = Math.floor((distance * 2) / 8846)
+        everest = Math.floor((sem * distance * 2) / 8846)
-        earth = ((distance * 2) / 40075000).toFixed(3)
+        earth = ((sem * distance * 2) / 40075000).toFixed(3)
       }
       if (target == 'sem-1-1') {
@@ -504,7 +563,7 @@
     $(function () {
       // Hero Section - Background Parallax
       background_image_parallax($(".tm-parallax"), 0.30, false);
-      background_image_parallax_2($("#contact"), 0.80);
+      background_image_parallax_2($("#contact"), 0.80)
       // Handle window resize
       window.addEventListener('resize', function () {
@@ -530,12 +589,18 @@
       // Add smooth scrolling to all links
       // https://www.w3schools.com/howto/howto_css_smooth_scroll.asp
-      $("a").on('click', function (event) {
+      $(".button1").on('click', function (event) {
         $('html, body').animate({
           scrollTop: $("#contact").offset().top
         }, 400);
       });
+      $(".button2").on('click', function (event) {
+        $('html, body').animate({
+          scrollTop: $("#result").offset().top-10
+        }, 400);
+      });
+
       // Pop up
       $('.tm-gallery').magnificPopup({
         delegate: 'a',