개발 (40) 썸네일형 리스트형 [JS] Toast Notification 토스트 노티피케이션은 어떤 동작에 대한 피드백을 나타내는 것을 뜻합니다이번 포스트에서는 버튼을 눌렀을 때 그 동작에 대한 반응을 확인 하라 수 있는 toast notification을 만들어 보려고 합니다. 저기 위에 버튼들을 누르면 해당 토스트들이 생성이 됩니다. 그리고 timeout을 걸어서 시간이 되면 사라지게 만들었습니다. 함께 코드 보면서 진행해봅시다. ToastBox와 메시지 변수 선언 let toastBox = document.getElementById("toastBox");let successMsg = 'successfully submitted';let errorMsg = 'Please fix the error';let invalidMsg = 'Invalid input, check a.. [JS]QR code생성기 (qrcode generator) 우리 일상에서 qr코드는 흔하게 사용되는 기술이고 매우 유용하게 사용되고 있습니다간편하게 신원을 조회하거나 사이트에 접근하기 편하기 때문인거 같아요 그 qr코드를 어떤 식으로 만드는 지 실습을 통해 알아보도록 하겠습니다 이 프로그램에 들어가게되면 텍스트나 url을 입력하는 Input창과 생성하기 버튼이 먼저 눈에 들어옵니다. input에 원하는 사이트를 입력하면 해당 사이트에 대한 qr코드가 생성이됩니다.이 qr코드가 잘 생성이 된건지 확인 해보기 위해서 카메라를 통해 확인을 해보았습니다. 오호라 사이트가 뜨는 걸 보니 잘 작동이 되고 있습니다.이번에는 어떤식으로 코드가 진행이되었는지 살펴 보도록 하겠습니다.1. 변수 선언 및 DOM 요소 선택let imgBox = document.getElementB.. [JS] 인용구 생성기(quotable generator) 안녕하세요 오늘 만들려고 하는 건 인용구를 랜덤으로 생성해주는 앱입니다. https://github.com/lukePeavey/quotable GitHub - lukePeavey/quotable: Random Quotes APIRandom Quotes API. Contribute to lukePeavey/quotable development by creating an account on GitHub.github.com이API를 사용해서 아주 쉽고 간단한 랜덤 인용구를 생성시킬 수 있습니다. 페이지를 열게 되면 "Quote of the day"라는 제목으로 아래 " "안에는 인용구 밑에는 작가 이름이 생성이 됩니다. 지난 번에 했을 때는 잘됐는데 지금은 잘 안되고 있는게 아마 API문제인것 같아요.. 해.. [JS]나이 계산기 이번에 만들어 볼 프롤젝트는 태어난 날부터 지금까지 며칠이 지났는지는 계산하는 앱을 만들어 보려고 합니다. 이 프로젝트에서는 년도별 월별 일별에 따라 계산이 달라지기 때문에 이전 프로젝트들에 비해 조금 더 복잡한 조건문들이 사용되었습니다. 가장 초기화면의 모습입니다. 프로젝트의 이름이 적혀있고 날짜를 지정할 수 있는 창과 버튼이 있습니다.달력 버튼을 누르게 되면 날짜를 지정할 수 있는 달력이 나타나게 됩니다. 이 프로젝트는 과거의 날짜에서 오늘까지의 날짜를 계산하는 것이기 때문에 오늘 이후의 날짜들은 선택할 수 없게 비활성화가 되어 있습니다.저는 제 나이를 밝히고 싶지는 않아서 2000년 1월 1일부터 오늘까지의 날을 계산해보았습니다. 21세기가 된지 벌써 24년 하고도 8개월 9일이나 지나있습니다. .. [JS] 노트 앱 만들기! 텍스트를 작성할 수 있는 노트앱을 만들어 볼겁니다.!! 이 앱은 처음에는 이렇게 아무것도 없는 빈공백에 버튼만 놓여져 있고 이 버튼을 누르게 되면 텍스트를 작성할 수 있는 박스가 생성됩니다.이 박스에서는 텍스트만 쓸 수 있고 내용을 삭제할 수도 있습니다. 이렇게 만들어 질 수 있고 다양한 어플들에서 이러한 메모장을 생성해서 어플을 만들었다는 기억이 납니다 .자, 그럼 이 어플은어떻게 생성되었는지 한번 확인해 보도록 하겠습니다. const notesContainer = document.querySelector(".notes-container");const createBtn = document.querySelector(".btn");let notes = document.querySelectorAll(".in.. [JS]랜덤 패스워드 생성기!! 우리가 가끔 패스워드를 비밀번호찾기를 하게되는데 그때 임시비밀번호로 프로그램에서 만들어주는 비밀번호를 이메일로 받게되는 경우가 있었다 그때의 기억을 되살려 보며 랜덤패스워드를 만들어보자 이 프로그램은 '비밀번호 생성하기' 버튼을 누르게 되면 영어 소문자, 대문자, 숫자, 특수문자를 조합하여 12자리의 랜덤비밀번호를 생성한다 그리고 옆의 복사하기 버튼을 누르면 해당 비밀번호를 복사할 수 있다코드 설명 변수 설정 const passwordBox = document.getElementById("password");const length = 12;const upperCase = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";const lowerCase = "abcdefghijklmnopqrstuvwx.. [JS]퀴즈앱 (quiz app)만들기 이번에 만들어 볼 앱은 퀴즈앱이다여기서 만드는 퀴즈는 주관식은 아니고 객관식에 해당하는 퀴즈를 만든다. 해당 문제에서 퀴즈를 맞추면 문항이 초록색으로 표시되어 다음문제로 넘어가고 퀴즈를 틀리면 선택한 문항은 빨간색으로 표시되면 동시에 정답인 문항은 초록색으로 표시된다. 그리고 마지막으로 문제들 중에서 몇 개를 맞추었는지도 나타나게 되는 아주아주 간단하고 쉬운 앱이다. 1. 문제 생성 먼저 어떤 질문들이 들어 가야 할지에 대한 내용을 생성해야한다. question이라는 변수를 만들어서 이안에 배열 형태로 질문과 정답을 만든다. 그리고 정답 부분에는 text와 correct로 나누어 해당 질문에 대한 정답인지 아닌지를 판단하게 한다. const questions = [ { question: "한입.. [JS] To do List 만들기 ! 웹 개발을 하게 되면 todo list앱을 만드는 건 가장 기본적인 절차인 것 같다간단하면서도 활용도가 높고 또 다양한 기능들을 학습할 수 있기 때문이지 않을까 싶다 나는 하루의 일을 시작하기 전에 오늘 해야할 것들을 미리 정하고 그것들 퀘스트 깨듯이 해결하는 것을 좋아한다. 이건 아마 또 하루를 열심히 살수 있도록 하게 해주는 하나의 원동력이 되기도 하는 것 같다 그럼 오늘은 todo list를 만들어 보자 역시 오늘도 외국인 형님의 도움을 받아서 이를 미리 학습해보고 이를 정리하는 방식으로 포스트 해본다.https://youtu.be/PBcqGxrr9g8?si=ry9zv0kPc9Vx4TuP 혹시 따라해볼 생각있으면 이 영상보고 해도 좋을 듯하다. To Do List이 앱의 기본적인 기능은 다음과 같.. 이전 1 2 3 4 5 다음
