버튼을 눌렀을 때 값을 보여주는 것
body안에 input태그로 텍스트타입과 id를 주었다.
버튼을 눌렀을 때 값을 보여줘야되기 때문에 button태그 안에 onclick 이벤트도 넣어주었다.
시작화면
script안에 function 함수를 작성하고 input태그의 아이디를 가져오는 getElementById('input태그의 아이디')를 넣어주고 .value를 사용해 input태그에서 입력한 값을 가져와서 alert창에 보여준다.
버튼을 눌렀을 때 input태그에서 입력한 값을 div태그 안에 쌓이게 하는 것
시작화면
input태그 안에 id를 넣어줘서 input태그 안에 입력값을 가져올거다.
button태그에도 onclick 이벤트를 넣어주어 클릭했을 때 값을 쌓이게 할 것이다.
이 값들은 div태그 안에 쌓이게 할 것이다.
우선 입력값을 가져와서 버튼을 클릭했을 때 div안에 쌓이게 하기 위해 function 함수를 썼다.
입력값을 가져와야되기 때문에 getElementById()를 사용해 val 변수에 넣어주었다.
getElementById()안에 div 태그의 id를 넣어주고 h1태그로 보여주기 위해 .innerHTML를 사용하고 h1태그와 ${}을 같이 사용하기 위해 백틱을 사용했다.
편의성을 위해 입력을 하고 다음 입력을 하기 위해 전에 입력한 값을 초기화 시켜주었다.
4개의 div박스 옮기고 모양 바꾸기
div태그를 4개 만들어주어 clss와 고유 id를 주었다.
class로 div태그 4개를 묶은 이유는 width값과 height값이 같기 때문에 한 곳에 묶어주었다.
버튼을 눌렀을 때 박스가 옮겨지고 다른 버튼을 눌렀을 때 박스를 둥글게 만들어주기 위해 onclick 이벤트를 넣어주었다.
css에서는 box라는 클래스로 공통 값을 주었고 개인적으로 흥미를 띄우기 위해 애니메이션을 효과를 넣었다.
div태그 4개의 id 값을 가져와서 변수들에게 저장을 했다.
function함수를 사용하고 css선택자를 이용해 모든 요소를 검색하는 querySelectorAll()을 사용해 divList 변수에 넣어주었다. moveFunc라는 버튼을 누르면 박스가 이동할 수 있게 박스의 id를 저장한 변수들을 가져와 style.marginleft를 주어 왼쪽marin을 넓혀 오른쪽으로 이동하도록 만들었다.
divList안에 있는 배열 형태의 요소들을 전부 적용시켜줘야되기 때문에 forEach문을 사용했다. forEach문은 배열형태가 아니면 사용할 수 없지만 querySelectorAll을 사용하면 List형태로 나오기 때문에 forEach문을 사용할 수 있다.
시작화면
이동하기 버튼을 눌렀을 때
둥글게! 버튼을 눌렀을 때
