momentum clone coding

진실·2021년 7월 10일

CSS

clock.css

h1{
  text-align : center;
  }

greeting.css

.greeting {
  text-align : center;
}

todo.css

.todo_list {
  text-align : center;
}

javascipt

clock.js

getTime = function(){
  var now = new Date();
  var year = now.getFullYear();
  var month = now.getMonth();
  var date = now.getDate();
  var hour = now.getHours();
  var min = now.getMinutes();
  var sec = now.getSeconds();
  
  var clock = document.querySelector(".clock").querySelector(".time");
  
  clock.innerHTML = `${hour<10 ? `0${hour}`:hour}:${min<10 ? `0${min}`:min}:${sec<10 ? `0${sec}`:sec}`;
}


function init(){
  getTime();
  setInterval(getTime, 1000);
}

init();

greeting.js

sayHello = function(){
  const now = new Date();
  const hour = now.getHours();

  var greeting = '';

  if(hour>=6 && hour <= 12){
    greeting = 'Good Morning, ';
  }
  else if(hour > 12 && hour < 18){
    greeting = 'Good Afternoon, ';
  }
  else{
    greeting = 'Good Evening, ';
  }

  var temp = document.querySelector('.greeting');
  temp.innerHTML = `${greeting}진실`;
};

init = function(){
  sayHello();
  setInterval(sayHello, 360000);
}

init();

todo.js

var todo_list = document.querySelector('.todo_list');
var todo_greeting = document.querySelector('#todo_greeting');
var todo_form = document.querySelector('#todo_form');
var todo_show = document.querySelector('#todo_show');
var todo_add = document.querySelector('#todo_add');
var todo_checkboxes = document.querySelectorAll('input[type=checkbox]');
var toDos = [];

var showToDos = function(toDo, idx){
  const div = document.createElement('div');
  const checkbox = document.createElement('input');
  const content = document.createElement('span');
  const remove = document.createElement('span');
  const p = document.createElement('p');

  div.id = idx;
  checkbox.type = 'checkbox';
  content.innerText = toDo;
  content.className = 'content';
  remove.innerHTML = '&nbsp';
  remove.className = 'remove';

  div.appendChild(p);
  div.appendChild(checkbox);
  div.appendChild(content);
  div.appendChild(remove);
  todo_show.appendChild(div);

 
  checkbox.addEventListener('change', (e)=>{
    var div = document.getElementById(idx);
     var content = div.querySelector('.content');
    if(e.target.checked){
      var content_cp = content.cloneNode(true);
      var del = document.createElement('del');
      del.className = 'del';
      del.appendChild(content_cp);
      div.replaceChild(del, content);
    }
    else{
      var del = div.querySelector('.del');
      var content = del.firstChild;
      div.replaceChild(content, del);
    }
  });

  remove.addEventListener('mouseout', ()=>{
    var div = document.getElementById(idx);
    var removeIcon = div.querySelector('.remove');
    removeIcon.innerHTML = '&nbsp';
  })
  remove.addEventListener('mouseover', ()=>{
    var div = document.getElementById(idx);
    var removeIcon = div.querySelector('.remove');
    removeIcon.innerHTML = ' X';
    removeIcon.addEventListener('click', ()=>{
      div.remove();
    })
  });

  //todo_checkboxes = document.querySelectorAll('input[type=checkbox]');
};

var loadToDos = function(){
  toDos.forEach((toDo, idx)=>{
    showToDos(toDo, idx);
  });
};

var addToDos = function(){
  var input = document.createElement('input');
  input.type = "text";
  input.id = "todo_input";

  todo_form.appendChild(input);
}

if(toDos.length==0){
  todo_greeting.innerHTML = 'What is your main focus for today?'
  addToDos();
}
else{
  
  loadToDos();
}

todo_form.addEventListener('submit', (e)=>{
  e.preventDefault();
  text = todo_input.value;
  toDos.push(text);
  showToDos(text, toDos.length);
  todo_add.innerHTML = 'add to do list';
  todo_greeting.innerHTML = '';
  todo_form.innerHTML = '';
});

todo_add.addEventListener('click', ()=>{
  addToDos();
});

HTML

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="css/clock.css">
    <link rel="stylesheet" href="css/greeting.css">
    <link rel="stylesheet" href="css/todo.css">
    <title>
      Momentom Clone Coding
    </title>
    <body>
      <div class = "clock">
        <h1 class = "time">00:00:00</h1>
      </div>
      <div class = "greeting">
        안녕하세요
      </div>
      <div class = "todo_list">
        <div id = "todo_greeting"></div>
        <br />
        <div id = "todo_add"></div>
        <form id="todo_form">
        </form>
        <br />
        <div id="todo_show">
        </div>
      </div>
      <script src="js/clock.js" id="script_started"></script>
      <script src = "js/greeting.js"></script>
      <script src = "js/todo.js"></script>
    </body>
  </head>
</html>

진실

반갑습니다.

이전 포스트

[Node.JS] 나만의 이벤트 만들기

다음 포스트

momentum clone coding

CSS

clock.css

greeting.css

todo.css

javascipt

clock.js

greeting.js

todo.js

HTML

[Node.JS] 나만의 이벤트 만들기

momentum clone coding

0개의 댓글