00:00:00 현재시간을 데이터로 받아서 출력시킨 코드
HTML
<h2 id="clock">00:00:00</h2>
JS
const clock = document.querySelector("h2#clock");
//html h2에 id clock를 불러와서 저장시킴
function getClock(){
const date = new Date();
const hours = String(date.getHours()).padStart(2, "0");
const minutes = String(date.getMinutes()).padStart(2, "0");
const seconds = String(date.getSeconds()).padStart(2, "0");
//date.get()을 사용하면 해당되는 데이터를 가져옴
//padStart(2, "0") 표시되는 숫자가 2가 아닌 1일때 앞에 문자열 0을 붙임
clock.innerText = `${hours}:${minutes}:${seconds}`;
//시간 분 초 를 화면에 표시
}
getClock(); //코드가 실행되고 화면에 바로 현재값을 표시해줌
setInterval(getClock, 1000); //1초마다 화면에 표시된 시간이 갱신됨
배열에 저장해둔 명언을 화면에 랜덤으로 출력시키는 코드
HTML
<div id="quote"> <!-- 명언가져오기 -->
<span></span>
<span></span>
</div>
JS
const quotes = [
{quote:"삶이 있는 한 희망은 있다", author:"키케로"
},
{quote:"산다는것 그것은 치열한 전투이다.", author:"-로망로랑"
},
{quote:"하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.", author:"사무엘존슨"
},
{quote:"언제나 현재에 집중할수 있다면 행복할것이다.", author:"파울로 코엘료"
},
{quote:" 진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해", author:"찰리 채플린"
},
{quote:"직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다.", author:"엘버트 허버드"
},
{quote:"신은 용기있는자를 결코 버리지 않는다.", author:"켄러"
},
{quote:"피할수 없으면 즐겨라", author:"로버트 엘리엇"
},
{quote:"단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가?", author:"이드리스 샤흐"
},
{quote:"먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에", author:"엘사 맥스웰"
},
];
//quotes에 명언 배열을 작성했다.
const quote = document.querySelector("#quote span:first-child");
//html에 id가 quote이고 자식이 span의 첫번째 자식을 js quote에 저장한다.
const author = document.querySelector("#quote span:last-child");
//html에 id가 quote이고 자식이 span의 마지막 자식을 js author에 저장한다.
const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
//quotes배열의 값을 랜덤으로 만들어서 todaysQuote에 저장
quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
//innerText텍스트를 바꿈, quotes배열 quote값과 author값을 출력함
배열에 저장해놓은 이미지를 화면에 랜덤으로 출력시켜주는 코드
HTML
<ul id="todo-list"></ul>
JS
const images = ["IMG_0720.JPG", "IMG_0721.JPG", "IMG_0747.JPG",
"IMG_0752.JPG", "IMG_0764.JPG", "IMG_0793.JPG", "IMG_0795.JPG"]
//이미지 파일을 images에 저장
const chosenImage = images[Math.floor(Math.random() * images.length)];
//images에 저장된 이미지를 floor 1or2 (1.9여도 1) Math.random을 이용해서 랜덤이미지
*images.length로 배열의 길이조정
const bgImage = document.createElement("img");
//createElement html에 <img>를 생성
bgImage.src = `img/${chosenImage}`;
//HTML <img src="img/이미지이름"> html src 생성 랜덤이미지 넣어주기
document.body.appendChild(bgImage);
html에 일일이 코드를 만들지 않아도 js에서 작성한 코드가 실행될때 html에 코드가 적용되게 만든 코드
HTML
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required/>
//placeholder 내용 입력가능한 창을 만들고 기본 텍스트를 삽입함
</form>
JS
const toDoForm = document.getElementById("todo-form");
//변수 toDoForm에 html에 선언한 id todo-form를 적용시킨다.
const toDoInput = toDoForm.querySelector("#todo-form input");
//toDoForm(todo-form)의 값을 바꾸기위해 toDoForm.querySelector 사용
//todo-form 안에있는 Input를 값을 toDoinput에 적용
const toDolist = document.getElementById("todo-list");
function painToDo(newTodo) {
const li = document.createElement("li"); //html에 li만듬
const span = document.createElement("span"); //span만듬
li.appendChild(span); //span을 li에 집어넣음(자식)
span.innerText = newTodo; //newTodo 텍스트를 span에 넣음
toDolist.appendChild(li); // li를 html에 적용
}
function handleToDoSubmit(event){
event.preventDefault();
const newTodo = toDoInput.value; //창에 입력후 엔터쳐도 새로고침안되게
toDoInput.value = ""; //검색창 비우기
//console.log(newTodo, toDoInput.value); //검색창 비우기전 데이터 저장
painToDo(newTodo); //새로 입력한 값을 표시시켜줌
}
toDoForm.addEventListener("submit", handleToDoSubmit);
// addEventListener(이벤트명, 실행할함수)-이벤트가 발생할때 특정함수 호출
