Update main page

윤희찬
Commit 10369b05199354cc212d4394203bec705ca07fe2 10369b05 1 parent ac02840c
Showing 3 changed files with 80 additions and 55 deletions
main/main.css
main/main.html
main/main.js
--- a/main/main.css
View file @10369b0
+++ b/main/main.css
View file @10369b0
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap');
+
 *{
     padding:0;
     margin:0;
-    box-sizing:border-box;    
+    box-sizing:border-box;
+}
+body{
+    height: 100vh;
+    background-image: url('https://images.unsplash.com/photo-1533035353720-f1c6a75cd8ab?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80');
+    background-position: center;
+    background-repeat: repeat;
+    background-size: cover;
+    background-attachment: scroll;
+}
+flex-containter{
+    font-size:100px;
+    font-family: 'Noto Sans KR', sans-serif;
+}
+form input{
+    width:60%;
+    padding:7px;
+    background-color:white;
+    border-radius:30px;
 }
 .containter{
     position:relative;
-    width:90%;
+    width:80%;
     height:auto;
-    max-width:1200px;
+    max-width:3200px;
     margin:0;/*auto*/
     color:black;
+    font-size:100px;
+    font-family: 'Noto Sans KR', sans-serif;
 }
 form{
     width:90%;
     border-radius:4px;
     margin-top:-10px;
     margin-left:10px;
-    background-color:white;
+/*     background-color:white;
-}
+ */}
 form{
     display:inline-block;
 }
@@ -25,13 +47,29 @@ form{
     /*여러줄로 보여주기 위해선 grid 사용해야하는데, 우선은 영상목록 뽑아보고 결정*/
     /*grid로 바꿔놓음. 여러 열로 사진들이 정렬됨*/
     display:grid;
-    grid-gap:25px;
+    row-gap:15%;
-    grid-template:auto/repeat(auto-fit,minmax(300px,1fr));
+    grid-template-columns: repeat(auto-fill, minmax(25%, auto));
+/*     grid-template:auto/repeat(auto-fill,minmax(250px,1fr)); */
     margin-top:50px;
-    width:100%;
+    width:200%;
     margin-left:265px;
+    margin-bottom:100px;
+}
+/*form input{
+    width:80%;
+    padding:10px;
+    border:none;
+    outline:none;
+    font-size:1.8rem;
+    display:inline-block;
+}
+*/ form ion-icon{
+    width:9%;
+    font-size:3rem;
+    margin-left:10px;
+    margin-top:15px;
+    color:rgb(75,75,75);
 }
-
 .search-box{
     margin-left:-10px;
     margin-top:10px;
@@ -42,32 +80,20 @@ img{
     object-fit:cover;
 }
 html{
-   font-size:12px; 
+   font-size:15px;
+   font-family: 'Nanum Pen Script', cursive;
 }
 section{
-    min-height:10vh;
+    min-height:100vh;
     width:100%;
     display:flex;
-    padding:100px 0;    
+    padding:100px 0;
+    align-items:stretch;
+
 }
 .brand{
     margin-top:-70px;
     font-size:4rem;
     color:black;
-    margin-bottom:30px;    
+    margin-bottom:30px;
 }
-/*form input{
-    width:80%;
-    padding:10px;
-    border:none;
-    outline:none;
-    font-size:1.8rem;
-    display:inline-block;
-}
-form ion-icon{
-    width:9%;
-    font-size:3rem;
-    margin-left:10px;
-    margin-top:15px;
-    color:rgb(75,75,75);
-}*/
\ No newline at end of file
--- a/main/main.html
View file @10369b0
+++ b/main/main.html
View file @10369b0
@@ -11,37 +11,37 @@
     <div class="container">
       <h1 class="brand">Recipe APP</h1>
       <form>
-        <input id="name" type="text" placeholder="Search Your Recipe...">
+        <input id="name" type="text" placeholder="Search Your Recipe..ex) pizza">
         <ion-icon name="search"></ion-icon>
       </form>
       <p>
       <input type='checkbox'
-       name='animal' 
+       name='animal'
        value=800
        onclick='getCheckboxValue(event)'/> 800
        <input type='checkbox'
-       name='animal' 
+       name='animal'
        value=1200
        onclick='getCheckboxValue(event)'/> 1200
        <input type='checkbox'
-       name='animal' 
+       name='animal'
        value=1600
        onclick='getCheckboxValue(event)'/> 1600
        <input type='checkbox'
-       name='animal' 
+       name='animal'
        value=2000
        onclick='getCheckboxValue(event)'/> 2000
       </p>
-        
+
-        
+
-        
+
 <!--       <select id="selectBox">
-        <option value="800" >800</option> 
+        <option value="800" >800</option>
         <option value="1200">1200</option>
         <option value="1600" >1600</option>
       </select> -->
-    
+
       <div class="search-result">
         <!--<div class="item">
           <img src="./0.jpg" alt="">
@@ -54,7 +54,7 @@
       </div>
     </div>
   </section>
-  
+
   <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
   <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
   <script src="./main.js"></script>
--- a/main/main.js
View file @10369b0
+++ b/main/main.js
View file @10369b0
@@ -10,8 +10,8 @@ function getCheckboxValue(event)  {
 const searchForm = document.querySelector('form');
 const searchResultDiv = document.querySelector('.search-result')
-const APP_ID = 'fill your own ID';
+const APP_ID = '0a67fbc1';
-const APP_KEY = 'fill your own key';
+const APP_KEY = '225d31b59bf211d7ede34e2e885f1f3b';
 searchForm.addEventListener('submit', function(event){
   if(document.getElementById('name').value.length === 0){
     alert('한글자 이상 입력해주세요');
@@ -54,32 +54,31 @@ function boxinfo(results){
   const object = {
   	  cal: result.recipe.calories.toFixed(0)
   };
-  
+
   if(result.recipe.calories>=caloriesLimit){}
   else{
     boxsinfo +=
     `
     <style>
-    
+    @import url(//fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500&display=swap);
     </style>
-   
+
     <div class="item">
-      <img src="${result.recipe.image}" alt="">
+      <img src="${result.recipe.image}">
-      <div class="flex-container">
+      <div class="flex-container" style="font-family: 'Noto Sans KR', sans-serif;">
         <h1 class="title">${result.recipe.label}</h1>
         <a href="${result.recipe.url}" target="_blank">View Recipe</a>
         <!--result.recipe.labe에 + home + recipe 한 검색결과 페이지를 버튼에 링크시켜놓음-->
         <a href="https://www.youtube.com/results?search_query=${result.recipe.label}+home+recipe" target="_blank">View Videos</a>
         <ul class="sns">
-    <li class="facebook">
+        <li class="facebook">
-    <a href="#n" onclick="shareRecipe('facebook','${result.recipe.url}'');return false;" class="facebook" target="_self" title="페이스북 공유"><span class="skip">페이스북</span></a>
+        <a href="#n" onclick="shareRecipe('facebook','${result.recipe.url}'');return false;" class="facebook" target="_self" title="페이스북 공유"><span class="skip">페이스북</span></a>
-    </li>
+        </li>
-    <li class="twitter">
+        <li class="twitter">
-    <a href="#n" onclick="shareRecipe('twitter','${result.recipe.url}');return false;" class="twitter" target="_self" title="트위터 공유"><span class="skip">트위터</span></a>
+        <a href="#n" onclick="shareRecipe('twitter','${result.recipe.url}');return false;" class="twitter" target="_self" title="트위터 공유"><span class="skip">트위터</span></a>
-    </li>
+        </li>
-    </ul>
+        </ul>
-
       </div>
       ${(cal => {
         if (cal >= 2000) {
@@ -97,4 +96,4 @@ function boxinfo(results){
     `}
   })
   searchResultDiv.innerHTML = boxsinfo;
-}
\ No newline at end of file
+}