김명주

Update test result page design

...@@ -157,4 +157,27 @@ ...@@ -157,4 +157,27 @@
157 font-size:70px; 157 font-size:70px;
158 font-weight: bold; 158 font-weight: bold;
159 color:rgb(0, 153, 255); 159 color:rgb(0, 153, 255);
160 +}
161 +#home
162 +{
163 + position:relative;
164 + font-family: 'Nanum Gothic';
165 + font-size:x-large;
166 + font-weight: bold;
167 + color:white;
168 + top:80%;
169 + left:35%;
170 + background-color: rgb(0, 153, 255);
171 +
172 +}
173 +#reset
174 +{
175 + position:relative;
176 + font-family: 'Nanum Gothic';
177 + font-size:x-large;
178 + font-weight: bold;
179 + color:white;
180 + top:80%;
181 + left:55%;
182 + background-color: rgb(0, 153, 255);
160 } 183 }
...\ No newline at end of file ...\ No newline at end of file
......
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 +
3 <head> 4 <head>
4 <title>추천 카트</title> 5 <title>추천 카트</title>
5 <link rel="stylesheet" type="text/css" href="test_result.css" /> 6 <link rel="stylesheet" type="text/css" href="test_result.css" />
6 </head> 7 </head>
7 <script> 8 <script>
8 - var item='<%- body %>'; 9 + var item = '<%- body %>';
9 - var url='<%- url %>'; 10 + var url = '<%- url %>';
10 - var stritem=item.split("."); 11 + var stritem = item.split(".");
11 - function load() { 12 + function load() {
12 - return fetch("metadata/kart.json") 13 + return fetch("metadata/kart.json")
13 - .then((response) => response.json()) 14 + .then((response) => response.json())
14 - .then((json) => json.kart); 15 + .then((json) => json.kart);
15 - } 16 + }
16 - load().then((kart) => { 17 + load().then((kart) => {
17 - const div_target = document.querySelector("#total"); 18 + const div_target = document.querySelector("#total");
18 - var obj = document.createElement('text'); 19 + var obj = document.createElement('text');
19 - var obj2=document.createElement('text'); 20 + var obj2 = document.createElement('text');
20 - for (var i = 0; i < kart.length; i++) { 21 + for (var i = 0; i < kart.length; i++) {
21 - if (kart[i]['id'] == stritem[0]) { 22 + if (kart[i]['id'] == stritem[0]) {
22 - obj.id="text1"; 23 + obj.id = "text1";
23 - obj2.id="text2"; 24 + obj2.id = "text2";
24 - obj.innerText = "나에게 맞는 카트는 "; 25 + obj.innerText = "나에게 맞는 카트는 ";
25 - obj2.innerText=kart[i]['name']; 26 + obj2.innerText = kart[i]['name'];
26 - break; 27 + break;
27 - }
28 } 28 }
29 - div_target.append(obj);
30 - div_target.append(obj2);
31 - });
32 -
33 - function Img() {
34 - return url+item;
35 } 29 }
30 + div_target.append(obj);
31 + div_target.append(obj2);
32 + });
33 +
34 + function Img() {
35 + return url + item;
36 + }
36 </script> 37 </script>
38 +
37 <body> 39 <body>
38 <div id="total"> 40 <div id="total">
39 <div id="words"> 41 <div id="words">
40 - <img id="imgkey" src="metadata/image/keyword.png"> 42 + <img id="imgkey" src="metadata/image/keyword.png">
41 </div> 43 </div>
42 <div id="rkart"> 44 <div id="rkart">
43 - <img id="imgId" src=""> 45 + <img id="imgId" src="">
44 - <script>document.getElementById("imgId").src = Img()</script> 46 + <script>document.getElementById("imgId").src = Img()</script>
47 + </div>
48 + <button id="reset" onClick="location.href='/test'">다시하기</button>
49 + <button id="home" onClick="location.href='/'">HOME</button>
45 </div> 50 </div>
46 - </div>
47 </body> 51 </body>
48 <script> 52 <script>
49 - var keyword="<%- keyword %>"; 53 + var keyword = "<%- keyword %>";
50 - var keyarr=keyword.split(','); 54 + var keyarr = keyword.split(',');
51 - const div_target=document.querySelector("#words"); 55 + const div_target = document.querySelector("#words");
52 - var i=0, index=0; 56 + var i = 0, index = 0;
53 - while(index<7){ 57 + while (index < 7) {
54 - if(keyarr[index]!="empty"){ 58 + if (keyarr[index] != "empty") {
55 - var obj=document.createElement('button'); 59 + var obj = document.createElement('button');
56 - obj.id="word"+(i+1); 60 + obj.id = "word" + (i + 1);
57 - obj.innerText='#'+keyarr[index]; 61 + obj.innerText = '#' + keyarr[index];
58 div_target.append(obj); 62 div_target.append(obj);
59 i++; 63 i++;
60 } 64 }
61 index++; 65 index++;
62 } 66 }
63 </script> 67 </script>
68 +
64 </html> 69 </html>
...\ No newline at end of file ...\ No newline at end of file
......