개발/javascript (33) 썸네일형 리스트형 [JS]날씨앱을 만들어 보자 기본적인 기능의 앱들을 만들어 보면서 javascript를 학습하기로 했다. 그 중에서 첫번째로 날씨앱을 만들어 보았다. 이 앱은 검색창에 영어로 도시이름을 검색하면 해당 도시의 날씨와 기타 정보들을 확인 할 수 있는 앱이다. 초기화면은 다음과 같이 검색할 수 있는 창과 버튼이 있다. 해당 화면에서 올바른 이름으로 입력을 하게 되면 해당 도시의 정보를 확인 할 수 있지만 이름이 잘못되면 "Invalid city name"이라는 문장이 나타나게 된다. 자 그럼 제대로 작성하여 확인해보자 Korea에 대한 날씨, 습도, 풍속을 확인 할 수 있다.그렇다면 이것은 어떻게 구현하였을까? 이것은 Open Weather Map API를 사용하여 해당 내용을 구현할 수 있었다. const apiUrl = "ht.. [JS]FAQ만들기 홈페이지에서 질문과 답변에 대한 내용을 찾아볼 수 있는 FAQ페이지를 쉽게 찾아 볼 수 있다. 이는 사용자와의 소통에서 중요한 요소로 작용할 수 있다. general questions do you accept all major credit cards? .. [JS]modal만들기 모달창이란?컴퓨터 프로그램에서 사용되는 일종의 창으로, 사용자가 이 창을 닫기 전까지 다른 창과 상호작용할 수 없게 만듭니다. 일반적으로 중요한 정보를 표시하거나 사용자로부터 특정 입력을 받기 위해 사용됩니다. 예를 들어, 확인 대화 상자, 경고 메시지, 또는 로그인 창 등이 모달 창의 예입니다. index.html modal project open modal modal content index에서 body에 해당하는 부분의 코드이다. hero에 해당하는 부분은 모달 버튼을 눌러지기 이전의 기본 화면에 해당한다. 그리고 .. [JS] 사이드 바 만들기 지난 강의에서는 반응형 화면에서 사이즈가 줄어들었을 때 원래 있던 메뉴들이 사라지고토글버튼이 생기면서 그 버튼을 누르면 아래로 네비게이션 바가 만들어지는 프로젝트를 진행했다. 이번에는 햄버거 버튼을 누르면 사이드 바가 생성되는 비슷한 프로젝트를 진행해본다. HTML완성된 index.html home about projects contact .. [JS] 반응형 네비게이션바 이번 예제는 반응형 네비게이션 바입니다. 먼저 html 파일입니다. index.html home about projects contact .. [JS] Review Carousel 리뷰캐러셀 Review Carousel 세번째 예제는 Review Carousel을 만드는 것이다. 이 예제에서는 버튼을 누르면 랜덤으로 리뷰를 보여주는 기능을 만들 수 있다. index.html our reviews sara jones ux designer Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto asperiores debitis incidunt, eius earum i.. [JS] Counter 만들기 두번째 프로젝트로 Counter를 만드는 프로젝트이다. 이 프로젝트에서는 표시되는 값이 양수인지 음수인지에 따라서 색이 달라지는 기능을 포함하고 있다. index.html counter 0 decrease reset increase counter의 경우에는 조건문을 적절하게 활용하면 쉽게 만들 수가 있다. 1. 초기 카운트 값 설정 let count = 0;- count변수를 선언해서 초기값으로 0을 설정해준다. - 이 count변수는 현재의 카운트 값을 저장하는 변수이다. 2. 요소선택const value = document.querySe.. [JS]Color Flipper 만들기2 지난 color flipper만들기 내용보다 조금 더 심화 버전의 내용이 있다. hex.html color flipper simple hex background color : #f1f5f8 click me html파일의 내용은 hex인것만 빼고는 딱히 달라진건 없다. 이전의 내용에서는 color라는 배열 안에서 random으로 색을 지정 했었다. 이번에는 16진수로 색을 표현하는 방식을 hex 색지정 방식인데 이를 통해서 더 다양한 색을 랜덤으로 구현해 볼 수 있다. 전체적인 코드는 아까와 거의 비슷하고 he.. 이전 1 2 3 4 5 다음
