TechScribe Notes

MDN에서 제공하는 예제. https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/A_first_splash Number guessing Game We have selected a random number between 1 and 100. See if you can guess it in 10 turns or fewer. We'll tell you if your guess was too high or too low. Enter a guess: Submit guess //변수 var num = document.querySelector('.number_input'); var btn = document.querySelector('.submit_bt..

극악을 겪고 나니까 계산기라는 단어만 들어가도 긴장됨. 하지만 팁계산기는 설계가 아주 간단했다. 만족도에 따라 팁을 얼마나 계산할지 그 값을 나타내는 grade와 해당하는 인덱스번호를 객체로 만들어 배열을 만들고 각 배열의 값에 해당하는 옵션을 만들어서 html코드로 짠 드롭박스 안에 넣어줌. 결과 버튼을 눌렀을 때 각 항목중 하나라도 값이 입력되지 않으면 에러메세지 창이 뜬다. -각 항목의 내용이 입력되지 않을 때마다 다른 메세지가 뜨도록 설계함. 그리고 3초 뒤에 에러메세지는 사라짐. 하지만 항목들에 값이 입력되면 드롭박스에 저장했던 객체 중에서 value값에 해당하는 것을 선택했을 때 얼마의 팁을 계산할 건지 적음 그리고 showloader 로 로딩되는 중~이라는 느낌의 애니메이션이 뜨도록 함 그리..

정말이지 극악난이도... 예제 정답을 봐도 eval()함수로 해결했더라 ㅠ eval()함수는 문자열을 수식으로 인식하여 계산이 가능하도록 하는 함수다. 하지만 보안상의 문제가 아주아주 크기때문에 악마의 함수라고도 불림...............하지만 난 이걸 쓰지 않고는 해결할 방법을 모르겠다 ㅠㅠ 다른방법은 대체 뭘까....아직도 해결하지 못한채로 끝나버린 프로젝트..

아까 필터 프로젝트에서 카드의 내용을 클릭하면 해당하는 카드의 이미지부터 시작되는 슬라이드 모달 창을 만드는 프로젝트 꽤나 까다로웠다. 우선 이미지 클론생성하여 슬라이드에 appendchild()를 이용하여 연결해서 슬라이드를 생성한 후, 클릭하는 카드의 이미지 (target)을 기준으로 정렬이 되어 바로 해당이미지가 보여지도록하고 그 다음에는 늘 만들던 슬라이드 코딩방식으로 제작함! forEach를 사용해서 각 인덱스에 해당하는 이미지를 클론생성해서 slides목록에 연결시켜줌! 그리고 클릭하면 모달창이 뜨고, 엑스버튼(close)를 누르면 모달창이 없어지게 설계! 클릭하는 이미지의 인덱스 번호(target의 인덱스번호) 만큼 left값에 변화를 주어서 슬라이드 이동시킨채로 모달창이 뜨도록 설계함.

이렇게 전체 내용 중에서 위의 카테고리 버튼을 클릭하면 요런식으로 정보를 필터링 하는 프로젝트! 여기서는 단순히 if문으로 해당 텍스트 안에 어떤 내용이 있는지 조건문으로 확인한 후에 해당 카테고리 목록을 보여주고 그 이외의 카테고리는 다 안보이게 하는 방법으로 해결했다. 이게 가능한 이유는, 예제 안에 있는 상품명이 카테고리별로 같은 이름으로 되어있었기 때문에 가능했다. 이건 어렵지 않았는데 ㅠㅠ 이렇게 검색창에 상품명에 해당되는 단어를 입력하였을 때, 검색창에 적힌 단어가 포함된 모든 상품을 보여주는 것이 어려웠다. 대소문자 상관없이 그리고 cake를 입력하면 cake상품이나 cupcake 상품 모두 나오게 하는 것이 어려웠다. 상품명 html코드 짤때 클래스명을 name으로 줬고, 이것을 아이템이라..

슬라이드 + 랜덤 명언 프로젝트 느낌! 변수지정은 이렇게 함. 원래는 img자리에 고객의 얼굴이나 설정한 프로필 사진처럼 와야하지만.. 여러가지 소스를 찾고 붙이기에는 시간관계상..패스 대신 컬러로 대체함. content_List에 이미지, 별점수, 코멘트, 고객이름의 배열객체를 만들어줌. 기본적으로 가장 처음 0번째 배열객체 내용이 보일 수 있도록 addEventListener함수 전에 보여줌 그리고 이벤트 함수는 prev와 next의 부모요소인 button을 클릭했을 때 작동하기로 하고 if 문에서 클릭한 target의 html문서 안에서 className이 prev 인지 next인지 구분하여 누를때마다 1씩 증감하고, 그 증감 한 값이 배열객체의 인덱스 값에 적용되어 각 영역에 출력되도록 함! pr..