짧은코딩

처음으로 js를 통해 무언가 만들어봤다. 아직 초라하지만 이 강의와 챌린지를 기반으로 리엑트를 공부하는 등 탄력을 받고 있다. 다음엔 노마드 코더님 리엑트 영상을 보고 챌린지도 통과하는 것이 목표다.

To Do List -큰 화면 -작은 화면 사실 처음엔 그냥 원래 있던 코드를 가져다가 썼다. 하지만 내가 원하는 기능을 넣기 위해서는 코드를 이해하고 수정했어야한다. 이러면서 공부가 잘되었다고 생각한다. 그리고 큰 화면과 작은 화면 모두 만들어서 반응형 웹을 만들어봤다. 프로젝트를 하면서 js에 대해 확실하게 이해할 수 있었다. 뿐만아니라 css로 반응형웹도 만들고 flex 박스에 대해 더욱 이해를 해서 좋은 경험이되었다. -사이트 https://5hyun.github.io/Nomadcoders_project/ ToDoList 5hyun.github.io

-깃허브 주소 https://github.com/5hyun/Nomadcoders_project GitHub - 5hyun/Nomadcoders_project Contribute to 5hyun/Nomadcoders_project development by creating an account on GitHub. github.com -결과 아직 To Do List를 만드는 거만 완료했다. 사실 노마드 코더님이 알려준 코드를 거의 복붙했다.. js에 대해 좀 더 이해가 필요할거 같다. todo.js 파일을 이해하고 완료된 일을 적어주는 Finished까지 만들어보는 것이 목표이다.

const colors = [ "#ef5777", "#575fcf", "#4bcffa", "#34e7e4", "#0be881", "#f53b57", "#3c40c6", "#0fbcf9", "#00d8d6", "#05c46b", "#ffc048", "#ffdd59", "#ff5e57", "#d2dae2", "#485460", "#ffa801", "#ffd32a", "#ff3f34" ]; const Btn = document.querySelector("button"); function BackChange() { const Random1 = colors[Math.floor(Math.random() * colors.length)]; const Random2 = colors[Math.floor(Math.rando..

const clockTitle = document.querySelector(".js-clock"); function getTime() { const xmas = new Date("2022-12-25 00:00:00+0900"); const today = new Date(); const dday = xmas - today; const day = String(Math.floor(dday / (1000 * 60 * 60 * 24))).padStart(2, "0"); const hour = String(Math.floor((dday / (1000 * 60 * 60)) % 24)).padStart(2, "0"); const min = String(Math.floor(((dday / 1000) * 60) % 60)..

const getRange = document.querySelector(".Range input"); const getNumInput = document.querySelector(".NumInput input"); const playBtn = document.querySelector('.NumInput Button'); const Result = document.querySelector('.Result span'); playBtn.addEventListener('click', () => { if (getRange.value && getNumInput.value && getNumInput.value >= 0) { const RandomValue = Math.round(Math.random() * getRa..

const title = document.querySelector("h2"); title.style.color = "white"; function BackColorChange() { let width = window.innerWidth; if (width = 700 && width

자세한 첼린지 내용은 쓸 수 없어서 코드 설명만 쓰려고 했다. // import "./styles.css"; const colors = ["#1abc9c", "#3498db", "#9b59b6", "#f39c12", "#e74c3c"]; // /* ✅ The text of the title should change when the mouse is on top of it. ✅ The text of the title should change when the mouse is leaves it. ✅ When the window is resized the title should change. ✅ On right click the title should also change. ✅ The colors of the t..

classList - Methods -add(String) 지정한 클래스 값을 추가한다. 만약 추가하려는 클래스가 이미 존재한다면 무시. -remove(String) 지정한 클래스 값을 제거한다. 존재하지 않는 클래스라면? 에러 발생 X -contains(String) 지정한 클래스 값이 존재하는지 확인. true, false 값을 반환. -replace(old, new) old class를 new class로 대체 -item(Number) 인덱스 값을 활용하여 클래스 값을 반환

function onGeoOk(position){ const lat = position.coords.latitude; const lng = position.coords.longitude; console.log("You live in", lat, lng); } function onGeoError(){ alert("Can't find you. No weather for you."); } navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError); user의 위치(geolocation)를 알려주는 것이다. navigator와 geolocation, getCurrentPosition을 사용한다. 이걸 부르면 브라우저에서 정보를 준다. 와이파이, GPS, 위치 ..