정구리의 우주정복

Links 버튼을 누르면 밑에 검은색 박스가 나오고 박스 안에는 내가 자주가는 링크를 등록해 놓을 수 있다. 기본으로 크롬은 있고 new 버튼을 눌러서 나온 삽입하는데에 insert 해주면 링크가 생긴다 ! 엄청 신기하군 ! HTML 코드 Links Chrome Tab NEW INSERT 자바스크립트 코드 const js_link=document.querySelector(".js-link"); const links=js_link.querySelector(".links"); const box=js_link.querySelector(".linklist-box"); const list=js_link.querySelector('.links-list'); const newBtn=js_link.querySelect..

자바스크립트로 만든 투두리스트 ! 아직 쪼질이라서 코드가 더럽다 localStorage 를 사용해서 새로고침을 해도 데이터가 남아있다는 엄청난 사실 ! HTML 코드 What is your Main Focus for Today ? 자바스크립트 코드 const toDoForm=document.querySelector('.js-toDoForm'); const toDoInput=toDoForm.querySelector('input'); const toDoList=document.querySelector('.js-toDoList'); const TODOS_LS='toDos'; let toDos=[]; //empty array to save todo function deletToDo(event){ //How to..

만든지는 한달이 넘은것같은데 이제서야 올린다 (게을러서) 최종 구현한 애들은 맨 위에서부터 ) 1) 날씨 (현재 위치를 받아와서 지역의 기온을 표시) 2) 날짜 , 시간 3) 사용자의 이름을 받아와 시간대별로 Good Morning (이름) 이런식으로 출력 4) ToDo List 5) 자주 사용하는 링크를 등록, 클릭시 바로 이동 6) 명언 출력( 웹에서 받아와서 출력하는거면 더 좋았겠지만 나의 한계) 7) ToDo 버튼 클릭시 현재 투두리스트의 내용을 출력 8) 돋보기 모양 클릭 후 검색할 키워드를 입력하면 바로 구글에 검색 ! 9) 자동 배경 바꾸기 이렇게 구현해 보았다 사실 CSS를 했으면 더 좋았겠지만 지금은 굳이 시간 들여서 할 필요를 못느낌 ! (귀찮은거아님!) 이제 코드 하나하나 올리면서 기..

오늘은 진행 상황에 대해 간단하게 적으려고 한다 물론 소스코드도 추후에 업데이트 할거임 !_! 현재는 여기까지 만들었다 ! 여기까지만들었음 !_! 구현된 내용은 사진 밑에 설명 써져있다 이제 날씨랑 검색창 정도 구현하고 CSS에서 꾸미면 내가 만들수 있는 애들은 대략적으로 만들게될듯 ! CSS는 제일 마지막에 할 예정이라 아직 막 예쁘게 꾸미지는 않았다 ! 쏘스는 나중에 파트별로 분류해서 올릴예정

클론코딩을 해볼거다해볼거는 바로 momentum 이거 구글에 검색해서 다운받으면 크롬 메인 화면이 이렇게 바뀐다 momentum 의 모습 ! 짜잔 이렇게 생겼다 완전 ㅇㅖ쁨 ~! 그럼 여기에 있는 구체적인 기능들을 알아보자 사진 편집하는 법을 몰라서 이렇게밖에 못만들었다 .. 눈 크게 뜨고 봐야할듯 이러한 기능들이 있는데 솔직히 내가 다 만들수 있을것같지는 않고 그래도 최대한 흡사하게 만들어 보고 싶다 화이팅

오늘은 새로고침 할때마다 배경이 바뀌는걸 자바스크립트를 이용해 만들어 볼거다 결과물부터 보자 짜자잔 안믿으면 어쩔수없지만 새로고침을 했다이렇게 사진이 바뀌는걸 확인할 수 있다 사진은 6개있는데 귀찮아서 2개만 찍었다사실 만들면서 어려울줄 알았는데 너무 쉽게 끝나서 당황했다'쏘쓰 const body=document.querySelector("body"); //call body tag const photoNum=6; //num of photo; function callRan(){ ranNum=Math.floor((Math.random()*6)+1);//call number 1 to 6 return ranNum} function callPho(){ ranNum=callRan(); url=`../image/${..

오늘은 자바스크립트와 html 을 이용한 계산기를 만들어볼거임 결과물 버튼을 누르면 수식이 입력이 되고 = 을 누르면 계산이 되는걸 확인할 수 있음 HTML 소스 Jungry Calculator 1 2 3 + 4 5 6 - 7 8 9 * C 0 = / . TMI 시간 ) 원래는 버튼들을 js 에서 입력을 받아서 이벤트 리스너로 클릭시 동작하게 만들고 싶었는데 새로고침 할때마다 클릭이된걸로 인식이되어동작하길래 그냥 onclick 을 사용하게 됨 왜 그런지는 아직도 잘 모르겠음.. 그래서 class를 하나하나 다 지정해줬는데 실제로는 쓰이지 않아서 지워도 상관 없음 ... 버튼을 누를때마다 숫자와 부호들은 addOutput 이라는 함수를 실행하게 된다C(초기화 버튼) 과 = 은 각각 init() 과 cal(..

사실 localStorage 완전 조금 씀(별 대단한건 없단거임) 오늘 만들어 볼거는 사용자의 이름을 저장하는거다 ! 1. 이름을 입력2. 이름을 출력3. 새로고침해도 변하지 않음 ! 결과물 부터 보자 이름 입력 칸에 입력을 하면 정보가 저장이 된다 ! 그리고 이건 새로고침해도 지워지지 않지 localStorage 를 보면 나의 정보가 저장이 된 걸 확인할 수 있다. localStorage 삭제 방법은 저기 있는 버튼 눌러주면 됨 쨋든 이런거 만들었다 하하 시작해보자 우선 HTML 이다 중간의 는 이전에 썼던거니까 신경쓰지 않아두댐 form 안에 input 만들어줬다 name.js 파일 연결시켜줬고form 에 class 값이 두개 있다 (이거 나름 중요) CSS 파일이다 hidden 클래스에 displa..