# toggle

HTML과 Javascript의 상호작용
document Javascript에서 html을 표현하는 object를 가져옴 document에서 항목들을 가지고 오는 것 document 항목들을 변경 document.getElementById("") string을 전달받음, HTML에서 id를 통해 element

자바스크립트 기초 [event 2]
해당 코드 처럼 event를 작성할 수 있다.이렇게 작성할 경우 active class에 오타가 있을 때 오류가 발생할 수 있다. clickedClass를 선언해 오류를 조금 줄 일 수 있으나 기존 클래스가 이미 존재할 경우 해당 class는 없어지고 active cl

Front-end 국비지원 #061일
아래와 보는 이미지는 reflection 기능을 사용하여 이미지를 반전시켰다.HTMLCSShttps://caniuse.com/ 에서 크로스브라우징이 되는지 버전체크를 한다. 파이어폭스는 지원하지 않는걸 확인하게 된다. 따라서 크로스브라우징이 필요하며 https

[JS 이론] DOM Manipulation - classList
add( String \[, String \[, ...]] )지정한 클래스 값을 추가한다. (여러개 동시 삽입 가능)만약 추가하려는 클래스의 element의 class 속성이 이미 존재한다면 무시한다.remove( String \[, String \[, ...]] )지

Front-end 국비지원 #034일
정규표현식(regular expression)은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식은 하나의 언어라고 할 수 있다. \*정규식 공부하기 좋은 예제 : https://regexr

바닐라JS 챌린지 day 5
1) click event 발생 및 함수 실행 2) currentColor 변수 선언 후 h1.style.color 값 복사 (getter) 3) newColor 변수 선언 4) currentColor 현재 값 확인 5) 조건에 따라 newColor에 "tomato
[리액트를 다루는 기술] onToggle 함수를 이용하여 TodoList checkbox 관리
App.js에서 id와 일치하는 todo를 찾아 {...todo, checked: true} 변경일치하지 않는 todo는 그대로 두기

[React] Toggle Component 구현하기
👉🏻 toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다. 모달창을 구현하고 나서인지 Toggle 컴포넌트 구현은 비교적 쉽게 할 수 있었다. 다시 정리하며 복습하고자 한다. ✔️ Toggle Switch가 ON 일 때 css, 텍스트 변경✔️ T

JS Mini projects - Toggle Component
toggle 버튼 가져오기Nodelist 를 통해서 Loop 생성 (forEach)click이벤트 생성Toggle the active class on the parent node(.parentNode& classList.toggle())FAQ 작성 뿐만아니라, 토글은
체크박스 Toggle??
웹 서핑중 팝업창에 '24시간동안 팝업창 띄우기 않기' 체크박스는 어떻게 구현하는걸까? 라는 궁금증에 만들다가 checkbox 옆 글씨를 클릭하면 체크박스 체크 / 해제가 되도록 만들고 싶어졌다.if문에서 체크박스 체크여부를 확인하는 .checked(ture/false
tool-box 의 toggle 기능
.toggle 기능을 구현하려는데 on/off 의 기준을 잡지 못하여 구현이 어려웠다.tool-box 에 hedden을 추가하고 classList를 활용해 on/off 구현하였다

바닐라 자바스크립트로 토글버튼만들기
바닐라 자바스크립트 연습하는 중 간단한 UI부터 만들어 보는 것을 추천받음.그래서 토글버튼을 만들어봄.HTML은 위와 같다.CSS는 위와 같다.JS는 위와 같다.입문자는 잘 활용하면 좋겠다.나도 초보지만 입문자일 때 이런 코드 직접 짜보려니 어려웠다.

[Project-심플다이어리] 리스트 렌더/추가/수정/삭제
배열에 직접 추가하고 삭제하는 것이 아님=> 기존 data에 새 데이터를 합치거나 삭제 데이터를 빼준 데이터를 새로운 변수에 담아서 setData를 통해 다시 셋팅(업데이트)함알게된 것props 넘기고 사용하기 (+한단계 더 안에있는 컴포넌트까지 props전달)useR
[javascript]className & classList & toggle
자바스크립트에서는 html의 class명을 입력 / 수정할 수 있다.h1태그의 문자를 클릭할 때마다 h1태그의 class명을 바꾸는 코드를3가지 방법으로 사용가능하기에 하기와 같이 소개한다.클래스명이 단일값일 경우 사용가능하다.통상 복수의 클래스명을 가져가는 경우가 많