밤양갱 js(wed)배움일지(1)

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(이벤트명, 실행할함수)-이벤트가 발생할때 특정함수 호출