-
Notifications
You must be signed in to change notification settings - Fork 15
[추아현_FrontEnd] 4주차 과제 제출합니다. #41
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
Gwak-Seungju
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
api를 잘 불러와 사용했네요!! 수고하셨습니다~!
| <div class="input_Container"> | ||
| <input id="Country_Input" type="text" placeholder="국가를 영어로 작성해주세요."> | ||
| <button id="search_Btn">검색하기</button> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
snake와 camel case 중 하나만 사용하면 좋을 듯 싶습니다.
저는 class명을 지을 때 snake case를 사용합니다.
| let CountryName=document.getElementById("Country_Input") | ||
| let searchBtn=document.getElementById("search_Btn") | ||
| let resultBox = document.getElementById("result"); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
보통 변수명은 소문자로 시작합니다!
| fetch(`https://restcountries.com/v3.1/name/${CountryName.value}`) | ||
| .then(response => response.json()) | ||
|
|
||
| .then(data => { | ||
| const countryInformation=data[0]; | ||
| const flag=countryInformation.flags.png; | ||
| const capital=countryInformation.capital[0] | ||
|
|
||
| resultBox.innerHTML = ` | ||
| <h2>${CountryName.value}</h2> | ||
| <img src="${flag}" alt="${CountryName.value} 국기" width="200"> | ||
| <p>수도: ${capital}</p> | ||
| `; | ||
| }) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
다음 실습에서는 async / await 이라는 키워드를 사용해서 구현해보면 좋을 것 같아요~
No description provided.