function deleteToDo(event){
    const li = event.target.parentElement;//target:클릭된 html element(button), parentElement-Element의 부모
    li.remove();
}

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    const button = document.createElement("button");
    button.innerText = "❌";
    button.addEventListener("click",deleteToDo); //button을 클릭하면 event를 얻음
    li.appendChild(span);
    li.appendChild(button); //button은 span뒤에 있어야 함
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

'JavaScript' 카테고리의 다른 글

#7.4 Loading To Dos part One  (1) 2023.02.15
#7.3 Saving To Dos  (4) 2023.02.15
#7.1 Adding ToDos  (2) 2023.02.15
#7.0 Setup  (1) 2023.02.15
#6.1 Background  (0) 2023.02.13 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Hello from HTML!</title>
</head>

<body>
    <form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <button>Log In</button>
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
        <input type="text" placeholder="Write a To Do and Press Enter" required/>
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
    <script src="js/clock.js"></script>
    <script src="js/greetings.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
</body>

</html>​
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function paintToDo(newTodo){
    const li = document.createElement("li");
    const span = document.createElement("span");
    li.appendChild(span);
    span.innerText = newTodo;
    toDoList.appendChild(li);
}

function toDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
    paintToDo(newTodo);
}

toDoForm.addEventListener("submit",toDoSubmit);

'JavaScript' 카테고리의 다른 글

#7.3 Saving To Dos  (4) 2023.02.15
#7.2 Deleting To Dos  (2) 2023.02.15
#7.0 Setup  (1) 2023.02.15
#6.1 Background  (0) 2023.02.13
#6.0 Quotes  (1) 2023.02.13 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/style.css">
    <title>Hello from HTML!</title>
</head>

<body>
    <form id="login-form" class="hidden">
        <input required maxlength="15" type="text" placeholder="What is your name?" />
        <button>Log In</button>
    </form>
    <h2 id="clock">00:00:00</h2>
    <h1 id="greeting" class="hidden"></h1>
    <form id="todo-form">
        <input type="text" placeholder="Write a To Do and Press Enter" required/>
    </form>
    <ul id="todo-list"></ul>
    <div id="quote">
        <span></span>
        <span></span>
    </div>
    <script src="js/clock.js"></script>
    <script src="js/greetings.js"></script>
    <script src="js/quotes.js"></script>
    <script src="js/background.js"></script>
    <script src="js/todo.js"></script>
</body>

</html>​
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input"); //document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

function toDoSubmit(event){
    event.preventDefault();
    const newTodo = toDoInput.value;
    toDoInput.value = "";
}

toDoForm.addEventListener("submit",toDoSubmit);

'JavaScript' 카테고리의 다른 글

#7.2 Deleting To Dos  (2) 2023.02.15
#7.1 Adding ToDos  (2) 2023.02.15
#6.1 Background  (0) 2023.02.13
#6.0 Quotes  (1) 2023.02.13
#5.2 PadStart  (0) 2023.02.10 
const images = ["0.jpg","1.jpg","2.jpg"]; //폴더 안에 있는 이미지 이름이랑 똑같게

const chosenImage = images[Math.floor(Math.random()*images.length)];

const bgImage = document.createElement("img"); //img요소 생성

bgImage.src = `img/${chosenImage}`;

document.body.appendChild(bgImage) //body에 html추가(가장 뒤에)

'JavaScript' 카테고리의 다른 글

#7.1 Adding ToDos  (2) 2023.02.15
#7.0 Setup  (1) 2023.02.15
#6.0 Quotes  (1) 2023.02.13
#5.2 PadStart  (0) 2023.02.10
#5.1 Timeouts and Dates  (0) 2023.02.10
  • 랜덤 명언 불러오기
const quotes = [{
    quote:"하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다",
    author:"사무엘존슨"
},{
    quote:"삶이 있는 한 희망은 있다",
    author:"키케로"
},{
    quote:"언제나 현재에 집중할수 있다면 행복할것이다.",
    author:"파울로 코엘료"
},{
    quote:"행복의 문이 하나 닫히면 다른 문이 열린다 그러나 우리는 종종 닫힌 문을 멍하니 바라보다가 우리를 향해 열린 문을 보지 못하게 된다",
    author:"헬렌켈러"
},{
    quote:"먼저 자신을 비웃어라. 다른 사람이 당신을 비웃기 전에",
    author:"엘사 맥스웰"
},{
    quote:"절대 어제를 후회하지 마라. 인생은 오늘의 나 안에 있고 내일은 스스로 만드는 것이다",
    author:"L.론허바드"
},{
    quote:"너무 소심하고 까다롭게 자신의 행동을 고민하지 말라 . 모든 인생은 실험이다 . 더많이 실험할수록 더나아진다",
    author:"랄프 왈도 에머슨"
},{
    quote:"한번의 실패와 영원한 실패를 혼동하지 마라",
    author:"F.스콧 핏제랄드"
},{
    quote:"1퍼센트의 가능성, 그것이 나의 길이다.",
    author:"나폴레옹"
},{
    quote:"고통이 남기고 간 뒤를 보라! 고난이 지나면 반드시 기쁨이 스며든다.",
    author:"괴테"
}
]

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todaysQuote = quotes[Math.floor(Math.random()*quotes.length)]; //0에서 1사이의 숫자 * 배열의 길이 -> 정수내림

quote.innerText = todaysQuote.quote;
author.innerText = todaysQuote.author;
<div id="quote">
        <span></span>
        <span></span>
    </div>

'JavaScript' 카테고리의 다른 글

#7.0 Setup  (1) 2023.02.15
#6.1 Background  (0) 2023.02.13
#5.2 PadStart  (0) 2023.02.10
#5.1 Timeouts and Dates  (0) 2023.02.10
#5.0 Intervals  (2) 2023.02.10
  • PadStart : 문자열 길이를 정해진 수로 조정해줌, String을 현재보다 길게 만들어야 할 때 사용
function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,0); //문자열로 변환 후,
    const minutes = String(date.getMinutes()).padStart(2,0);//문자열을 2개로 맞춰주고 문자열이 2보다 작다면 앞에 0붙임
    const seconds = String(date.getSeconds()).padStart(2,0);
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}

'JavaScript' 카테고리의 다른 글

#6.1 Background  (0) 2023.02.13
#6.0 Quotes  (1) 2023.02.13
#5.1 Timeouts and Dates  (0) 2023.02.10
#5.0 Intervals  (2) 2023.02.10
#4.6 Loading Username  (1) 2023.02.10
  • setTimeout(sayHello, 5000); //5초 후에 함수가 실행됨
const clock = document.querySelector("h2#clock");

function getClock() {
    const date = new Date();
    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}

getClock(); //즉시 호출해서 바로 시간을 볼 수 있게
setInterval(getClock, 1000);

'JavaScript' 카테고리의 다른 글

#6.0 Quotes  (1) 2023.02.13
#5.2 PadStart  (0) 2023.02.10
#5.0 Intervals  (2) 2023.02.10
#4.6 Loading Username  (1) 2023.02.10
#4.3 Events part Two  (0) 2023.02.08
  • Interval
    • '매번'일어나야 하는 무언가
    • 2초마다 무슨 일이 일어나게 하고 싶다-> 이럴때 Interval을 사용
    • 1초 === 1000ms
const clock = document.querySelector("h2#clock");

function sayHello() {
    console.log("hello");
}

setInterval(sayHello,5000)//실행하고자 하는 함수, 함수가 호출되는 간격(ms)

'JavaScript' 카테고리의 다른 글

#5.2 PadStart  (0) 2023.02.10
#5.1 Timeouts and Dates  (0) 2023.02.10
#4.6 Loading Username  (1) 2023.02.10
#4.3 Events part Two  (0) 2023.02.08
#4.2 Events  (1) 2023.02.06

+ Recent posts

티스토리툴바