POMOTODO(7) - 개발진행중,2주간의 결과물
2021. 10. 25. 01:09ㆍ프로그래밍/개인프로젝트
진행상황은 깃허브에 매일매일 기록하고 있습니다.
개발하는데 속도가 붙어서 한동안 블로그와 깃허브에 개발중인 프로그램에 대한 글을 작성하지 못했다
이미 생각보다 많은 코드들이 작성되었고 하나하나 떼어서 설명을 덧붙이는건 시간이 부족할 것 같아서
통으로 올려놓고 앞으로는 가능한 자주 코드에 대한 글을 작성할 예정이다
주석으로 대략적인 참고사항은 적어놓았고 구현했다가 안쓰게 되서 작동안하는 코드 , 쓸데없는 주석 등이 많이 있을거라고 판단한다
얼른 코드를 정리하고 주석을 새롭게 달아서 나도 보기 편한 코드를 만들어야겠다
HTML
<!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="shortcut icon" href="/POMOTODO icon/mountain-solid.svg">
<title>POMOTODO</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/65f55f4509.js" crossorigin="anonymous"></script>
<script defer src="main.js"></script>
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" ></script>
</head>
<body class="body">
<header>
<nav>
<div class="POMOTODO__logo">
<a href="PoMoToDo.html"><i class="fas fa-mountain"></i>POMOTODO</a>
</div>
<ul class="POMOTODO__menu">
<li><a href="PoMoToDo.html" title="Desktop-ver"><i class="fas fa-desktop"></i></a></li>
<li><a href="PoMoToDo-record.html" title="Record"><i class="far fa-calendar-alt"></i></a></li>
<li><a href="PoMoToDo-side.html" title="Mobile-ver"><i class="fas fa-mobile-alt"></i></a></li>
</ul>
<ul class="POMOTODO__contact-me">
<div id="POMOTODO__clock">시계</div>
<li><a href="https://coqoa.tistory.com/" title="tistory blog" target="blank"><i class="fas fa-bold"></i></a></li>
<li><a href="https://github.com/coqoa" title="github" target="blank"><i class="fab fa-github"></i></a></li>
<li id="mail-btn"><i class="far fa-envelope" title="E-mail"></i></li>
</ul>
<div id="modal" class="modal-overlay">
<div class="mail-modal-window">
<div class="close-area"><i class="fas fa-times"></i></div>
<div class="content">ﾠ
<i class="fas fa-paper-plane">ﾠcoqoa28@gmail.com</i>
<!-- <i class="fas fa-envelope">ﾠcoqoa28@gmail.com</i> -->
</div>
</div>
</div>
</nav>
</header>
<!-- <div class="main-content"></div> -->
<section class = "Pomodoro">
<article class = "Pomodoro-timer"> <!--Pomodoro-->
<h2 class="section-title">Pomodoro</h2> <!--date-->
<div><!--clock, record-->
<!-- 뽀모도로타이머 -->
<div class="Pomodoro-timer-cover"></div>
<canvas class="Pomodoro-timer-guage" id="guage" width="200px" height="200px"></canvas>
<div class="pie-chart pie-chart1" id="pie-chart1"><span class="center"></span></div>
<div class="Pomodoro-timer-container">
<button class="clock__updown" id="minute1__plus"><i class="fas fa-caret-up"></i></button>
<button class="clock__updown" id="minute2__plus"><i class="fas fa-caret-up"></i></button>
<button class="clock__updown" id="second1__plus"><i class="fas fa-caret-up"></i></button>
<button class="clock__updown" id="second2__plus"><i class="fas fa-caret-up"></i></button>
<h2 id="pomo-timer">
<span id="minute">25</span>:<span id="second">00</span>
</h2>
<button class="clock__updown" id="minute1__minus"><i class="fas fa-caret-down"></i></button>
<button class="clock__updown" id="minute2__minus"><i class="fas fa-caret-down"></i></button>
<button class="clock__updown" id="second1__minus"><i class="fas fa-caret-down"></i></button>
<button class="clock__updown" id="second2__minus"><i class="fas fa-caret-down"></i></button>
<br>
<!-- <button class="clock__btn" id="btn__pause"><i class="fas fa-pause"></i></button> -->
<button class="clock__btn" id="btn__start" style="display: inline;"><i class="fas fa-play"></i></button>
<button class="clock__btn" id="btn__stop"><i class="fas fa-stop"></i></button>
</div>
<div class ="record" overflow:auto;><!--record-->
<!-- <form onsubmit="return false;"> -->
<ul class="record-list" id="record-list">
</ul>
<!-- </form> -->
</div>
</div>
<div class="audio"><!--audio-->
<form action="index.html">
<select name="audio" id="select-audio" size=1>
<option class="audio-list" id="audio1" value="audio1">Farm Morning with Sheep</option>
<option class="audio-list" id="audio2" value="audio2">Fire</option>
<option class="audio-list" id="audio3" value="audio3">Outdoor Summer Ambience</option>
<option class="audio-list" id="audio4" value="audio4">Rain Heavy Loud</option>
<option class="audio-list" id="audio5" value="audio5">Rain On Rooftop</option>
<option class="audio-list" id="audio5" value="audio6">Valley Night</option>
<option class="audio-list" id="audio5" value="audio7">Waves Crashing on Rock Beach</option>
</select>
<br>
<!-- <button type="button" class="previous"><i class="fas fa-step-backward"></i></button> -->
<button type="button" class="start-audio" id="start-button"></button>
<button type="button" class="pause-audio" id="pause-button"></button>
</form>
</div>
</article>
</section>
<section class="todonottodo">
<article class="todolist"><!-- todolist-->
<div class="section-title"><!--title-->
<h2>ToDoList</h2>
<!-- + 메일 모달창 구현, 타이머 마무리, 자바스크립트 드롭다운리스트 구현, 투두/낫투두 -->
</div>
<div id="todo-write"><!--write--><!--write-todo-->
<form onsubmit="return false;"><!-- index.html 임시로 지정, onsubmit을 막아서 엔터키를 내가원하는데로 지정-->
<input type="text" class="input-text" id="todo-input-text" maxlength="36" onkeydown="if(window.event.keyCode==13){addItem()}"/><!--onkeydown속성으로 버튼눌렀을때 키코드확인, 메서드 실행 211009-->
<button type="button" class="input-button" id="todo-input-button"><i class="fas fa-greater-than"></i></button>
</form>
</div>
<!-- <div class="container"> -->
<div class="item-list"><!--list--></div>
<div id="todo-modal" class="todo-modal-overlay">
<span class="todo-modal-content">ﾠ
<button type="button" class="color-button" id="close"><i class="fas fa-angle-left"></i></button>
<button type="button" class="color-button" id="check"><i class="fas fa-check"></i></button>
<button type="button" class="color-button" id="red"></button>
<button type="button" class="color-button" id="light-orange"></button>
<button type="button" class="color-button" id="orange"></button>
<button type="button" class="color-button" id="light-pink"></button>
<button type="button" class="color-button" id="pink"></button>
<!-- <button type="button" class="color-button" id="yellow"></button> -->
<button type="button" class="color-button" id="light-puple"></button>
<button type="button" class="color-button" id="purple"></button>
<button type="button" class="color-button" id="light-green"></button>
<button type="button" class="color-button" id="green"></button>
<button type="button" class="color-button" id="deep-green"></button>
<button type="button" class="color-button" id="light-blue-green"></button>
<button type="button" class="color-button" id="blue-green"></button>
<button type="button" class="color-button" id="light-blue"></button>
<button type="button" class="color-button" id="blue"></button>
<button type="button" class="color-button" id="olive"></button>
</span>
</div>
</article>
<article class="nottodolist"><!--Not-ToDoList-->
<div class="section-title">
<h2>NotToDoList</h2>
</div>
<div id="nottodo-write"><!--title-->
<form onsubmit="return false;">
<input type="text" class="ntd-input-text" onkeydown="if(window.event.keyCode==13){ntdAddItem()}"/>
<button type="button" class="ntd-input-button"><i class="fas fa-greater-than"></i></button>
</form>
</div>
<div class="ntd-item-list"><!--list--></div></div>
<div id="not-todo-modal" class="not-todo-modal-overlay">
<div class="not-todo-modal-content">ﾠ
<button type="button" class="ntd-color-button" id="ntdClose"><i class="fas fa-angle-left"></i></button>
<button type="button" class="ntd-color-button" id="ntdCheck"><i class="fas fa-check"></i></button>
<button type="button" class="ntd-color-button" id="ntdRed"></button>
</div>
</div>
</article>
</section>
<footer>
<!-- -->
</footer>
</body>
</html>CSS
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic:wght@400;700;800&display=swap');
/* font-family: 'Nanum Gothic', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@400&display=swap');
/* font-family: 'Roboto Mono', monospace; */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&display=swap');
/* font-family: 'Open Sans', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
/* font-family: 'Ubuntu', sans-serif; */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap');
/* font-family: 'Josefin Sans', sans-serif; */
/* .body {
min-width: 2300px;
} */
header nav {
/* font-family: 'Roboto Mono', monospace; */
font-family: 'Open Sans', sans-serif;
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
position: fixed;
left: 0;
width: 100%;
height: 10px;
background-color: #f4f8fb;
color: #5e5e5e;
z-index: 999;
}
a {
text-decoration: none;
color: #5e5e5e;
}
.POMOTODO__logo a {
list-style: none;
padding: 0px;
font-family: 'Ubuntu', sans-serif;
font-size: 15px;
font-weight: 400;
font-style: italic;
}
.POMOTODO__logo a:hover {
background-color: #edeeee;
opacity: 1;
border-radius: 15px;
}
.POMOTODO__logo i {
position:relative;
bottom: 1px;
padding-right: 5px;
color: #ff8585;
}
.POMOTODO__menu {
position: relative;
left: 60px;
display: flex;
list-style: none;
padding-right: 30px;
margin: 0px;
}
.POMOTODO__menu li {
padding: 2px 12px;
margin: 0px;
}
.POMOTODO__menu li:hover {
background-color: #edeeee;
opacity: 1;
height: 21px;
border-radius: 8px;
}
#POMOTODO__clock{
font-family: 'Ubuntu', sans-serif;
position: relative;
top: 5px;
margin-right: 10px;
font-size: 14px;
color: #5E5E5E;
}
.POMOTODO__contact-me {
display: flex;
list-style: none;
padding-left: 0px;
padding-right: 10px;
margin: 0px;
}
.POMOTODO__contact-me li {
margin-top: 2px;
padding: 2px 12px;
t
}
.POMOTODO__contact-me li:hover {
background-color: #edeeee;
opacity: 1;
height: 21px;
border-radius: 8px;
}
#mail-btn{
cursor: pointer;
}
#modal.modal-overlay{
width: 210px;
height: 65px;
position: absolute;
right: 30px;
top: 30px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.6);
box-shadow: 6px 6px 9px #c8ced7;
backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px);
border-radius: 10px;
}
#modal .content{
padding-bottom: 10px;
margin-bottom: 5px;
margin-left: 10px;
}
#modal .close-area {
display: inline;
float: right;
padding-right: 3px;
cursor: pointer;
color: gray;
}
body {
/* font-family: 'Roboto Mono', monospace; */
display: flex;
justify-content: center;
height: 870px;
margin: 0px;
background-color: #e9f0fa;
}
h2 {
font-family: 'Ubuntu', sans-serif;
font-weight: 700;
font-size: 35px;
text-align: center;
margin: 0px 0px 20px;
padding: 7px;
opacity: 0.7;
}
.section-title{
font-style: italic;
}
section.Pomodoro {
position: relative;
top: 50px;
width: 650px;
height: 95%;
padding: 10px;
margin-right: 15px;
border-radius: 30px;
background: #e9f0fa;
box-shadow: 11px 11px 9px #c8ced7, -5px -5px 20px #ffffff;
}
section.todonottodo {
position: relative;
top: 50px;
width: 650px;
margin-left: 15px;
}
article.todolist {
height: 500px;
padding: 10px;
margin-bottom: 20px;
border-radius: 30px;
background: #e9f0fa;
box-shadow: 11px 11px 9px #c8ced7, -5px -5px 22px #ffffff;
overflow:auto; /*211009*/
}
article.todolist::-webkit-scrollbar,
article.nottodolist::-webkit-scrollbar {
width: 7px;
background-color: transparent;
}
article.todolist::-webkit-scrollbar-thumb,
article.nottodolist::-webkit-scrollbar-thumb {
background-clip: padding-box;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
background-color: lightgray;
}
article.nottodolist {
height: 280px;
padding: 10px;
border-radius: 30px;
background: #e9f0fa;
box-shadow: 11px 11px 9px #c8ced7, -5px -5px 22px #ffffff;
overflow:auto;
}
/* 뽀모도로 타이머 */
/* 여기서부터 시작한다 이거 지워지면 롤백이야 */
.Pomodoro-timer-cover{
position: absolute;
top: 75px;
left: 208px;
width: 215px;
height: 215px;
border: 1px solid black;
z-index: ;
border-radius: 50%;
border: 20px solid #EBF3FB;
/* border: 20px solid black; */
box-shadow: 3px 3px 6px #949da6, -3px -3px 6px #ffffff;
/* background-color: #FF6F71; */
background-color: white;
}
/* 게이지 구현 */
.Pomodoro-timer-guage{
position: absolute;
padding: 0px;
margin: 0px;
/* border: 1px solid gray; */
}
.Pomodoro-timer-container{
position: relative;
left: 239px;
top: 31px;
width: 175px;
height: 175px;
text-align : center;
/* border: 20px solid #FF6F71; */
border-radius: 50%;
background: #EBF3FB;
/* background: #DD5E56; */
/* box-shadow: 3px 3px 6px #ffffff, -3px -3px 6px #949da6; */
/* box-shadow: inset 1px 2px 2px #949da6, inset -1px -1px 2px #feffff; */
}
.Pomodoro-timer-container > h2{
position: relative;
top: 40px;
opacity: 0.6;
font-size: 44px;
margin-top: 0px;
margin-left: 1px;
margin-bottom: 0px;
padding: 0px;
}
.Pomodoro-timer-container > h2 > span{
display:inline-block;
position: relative;
top: -5px;
/* color: #DD5E56; */
width: 75px;
}
.Pomodoro-timer-container > .clock__updown {
position: relative;
top: 38px;
opacity: 0.1;
border: 0;
padding: 2px 6px 4px;
border-radius: 30%;
background-color: transparent;
}
#pomo-timer{
position: relative;
top: 35px;
opacity: 0.5;
}
#minute, #second{
position: relative;
top: 2px;
}
#minute2__minus, #minute2__plus {
margin-top: 0px;
margin-right: 18px;
}
#second1__minus, #second1__plus{
margin-top: 0px;
margin-left: 18px;
}
.Pomodoro-timer-container>.clock__btn{
position: relative;
top: 35px;
opacity: 0.5;
font-size: 15px;
padding: 7px 9px 7px;
border:none;
border-radius: 5px;
background: transparent;
}
#btn__start{
display: inline;
color: #ff6f71;
/* display: none; */
}
#btn__pause{
display: none;
}
#btn__stop{
/* opacity: 0.5; */
display: none;
padding: 7px;
}
.clock__btn:hover,
.clock__updown:hover {
opacity: 0.9;
cursor: pointer;
}
.clock__btn:active,
.clock__updown:active {
box-shadow: inset 1px 1px 2px #949da6, -1px -1px 3px #ffffff;
}
button:hover{
opacity: 0.6;
cursor: pointer;
}
button:active{
box-shadow: inset 1px 1px 2px #949da6, -1px -1px 3px #ffffff;
}
/* record 스크롤 */
div.record {
font-family: 'Ubuntu', sans-serif;
position: relative;
top: 100px;
left: 75px;
height: 275px;
width: 480px;
padding: 10px;
margin-right: 0px;
border-radius: 25px;
background: #e9f0fa;
box-shadow: 3px 3px 6px #c1c7d0, -3px -3px 6px #ffffff;
overflow:auto;
}
div.record::-webkit-scrollbar {
width: 7px;
background-color: transparent;
}
div.record::-webkit-scrollbar-thumb {
background-clip: padding-box;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
background-color: lightgray;
}
/* record 자동입력 부분 */
.record-list {/*레이아웃*/
font-family: 'Ubuntu', sans-serif;
font-size: 16px;
font-weight: 500;
color: #5e5e5e;
position: relative;
left: 0px;
width: 300px;
display: inline;
border-radius: 5px;
}
#record-time {/*시간*/
border: 0px;
position: relative;
left: 10px;
font-family: 'Ubuntu', sans-serif;
font-weight: 400;
font-size: 15px;
color: gray;
background-color: transparent;
padding: 5px;
border-radius: 8px;
}
.record-text { /*텍스트*/
font-family: 'Ubuntu', sans-serif;
position: relative;
width: 250px;
/* left: 0px; */
background-color: #e9f0fa;
border: 1px solid #e9f0fa;
border-bottom: 1px solid #dbe2eb;
}
#record-time:hover {
opacity: 1;
color: black;
}
#record-time:active {
opacity: 0.3;
color: black;
box-shadow: inset 0px 0px 0px #949da6, 0px 0px 0px #ffffff; /*버튼클릭애니메이션을 없애기 위해 작성한 코드*/
}
div.audio {
position: relative;
top: 120px;
left: 75px;
height: 150px;
width: 500px;
border-radius: 25px;
background: #e9f0fa;
box-shadow: 3px 3px 6px #c1c7d0, -3px -3px 6px #ffffff;
}
#select-audio {
font-family: 'Ubuntu', sans-serif;
font-style: italic;
font-weight: 400;
-o-appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
font-size:15px;
position: relative;
left: 137px;
top: 30px;
text-align: center;
border: 0;
padding:12px;
border-radius: 8px;
background: #e9f0fa;
box-shadow: 2px 2px 2px #949da6, -2px -2px 10px #ffffff;
}
#select-audio:hover{
background: #e9f0fa;
box-shadow: 1px 1px 1px #949da6, -1px -1px 10px #ffffff;
cursor: pointer;
}
#select-audio>.audio-list{
/* display: none; */
font-family: 'Ubuntu', sans-serif;
}
.previous {
position: relative;
left: 184px;
top: 41px;
width: 30px;
height: 30px;
opacity: 0.5;
border: 0px;
background-color: transparent;
border-radius: 10px;
}
.start-audio {
display: flex;
background-image: url('POMOTODO icon/play-solid.svg');
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
/* font-size: 25px; */
position: relative;
left: 230px;
top: 45px;
width: 45px;
height: 45px;
opacity: 0.5;
border: 0px;
background-color: transparent;
border-radius: 10px;
}
/* .start-audio.playing{
background: black;
} */
.pause-audio{
display: none;
background-image: url('POMOTODO icon/pause-solid.svg');
background-size: 25px;
background-repeat: no-repeat;
background-position: center center;
position: relative;
left: 229px;
top: 45px;
width: 45px;
height: 45px;
opacity: 0.5;
border: 0px;
background-color: transparent;
border-radius: 10px;
}
.next {
position: relative;
left: 203px;
top: 41px;
width: 30px;
height: 30px;
opacity: 0.5;
border: 0px;
background-color: transparent;
border-radius: 10px;
}
/* 투두, 낫투두 */
#todo-write,
#nottodo-write {
width: 585px;
margin: 0px 18px 5px;
/* margin-left: 25px;
margin-right: 60px;
margin-bottom: 15px; */
border-radius: 11px;
height: 40px;
background: #e9f0fa;
box-shadow: 3px 3px 6px #949da6, -2px -2px 6px #ffffff;
}
.item-list {
font-family: 'Nanum Gothic', sans-serif;
font-weight: 600;
color: #5E5E5E;
/* font-style: italic; */
}
.todo-modal-content>#check {background-color:lightgray ; color:white;}
.todo-modal-content>#red {background-color: #f36164;}
.todo-modal-content>#light-orange {background-color: #FFD77F;}
.todo-modal-content>#orange {background-color: #FFA045;}
.todo-modal-content>#light-pink {background-color: #FFC1F8;}
.todo-modal-content>#pink {background-color: #EE57B6;}
/* .todo-modal-content>#yellow {background-color: #f1c95a;} */
.todo-modal-content>#light-puple {background-color: #B8B2FF;}
.todo-modal-content>#purple {background-color: #B668FC;}
.todo-modal-content>#light-green {background-color: #AFD5AB;}
.todo-modal-content>#green {background-color: #56D69C;}
.todo-modal-content>#deep-green {background-color: #88BE7B;}
.todo-modal-content>#light-blue-green {background-color: #66DAE2;}
.todo-modal-content>#blue-green {background-color: #429488;}
.todo-modal-content>#light-blue {background-color: #289BFF;}
.todo-modal-content>#blue {background-color: #1C00FF;}
.todo-modal-content>#olive {background-color: #BFC655;}
.ntd-item-list{
font-family: 'Nanum Gothic', sans-serif;
font-weight: 600;
color: #f36164;
}
.not-todo-modal-content>#ntdCheck {background-color:#88BE7B ; color:white;}
.not-todo-modal-content>#ntdRed {background-color: #f36164;}
/* <button type="button" class="color-button" id="red"></button> */
/* <button type="button" class="color-button" id="light-orange"></button> FFB43F */
/* <button type="button" class="color-button" id="orange"></button> FF7F58 */
/* <button type="button" class="color-button" id="light-pink"></button> F5BEFA */
/* <button type="button" class="color-button" id="pink"></button> F989C7 */
/* <button type="button" class="color-button" id="yellow"></button> F2D586 */
/* <button type="button" class="color-button" id="light-puple"></button> B8B2FF */
/* <button type="button" class="color-button" id="purple"></button> 9A77FA */
/* <button type="button" class="color-button" id="light-green"></button> AFD5AB */
/* <button type="button" class="color-button" id="green"></button> 56D69C */
/* <button type="button" class="color-button" id="deep-green"></button> 88BE7B */
/* <button type="button" class="color-button" id="light-blue-green"></button> 82D2D4 */
/* <button type="button" class="color-button" id="blue-green"></button> 66DAE1 */
/* <button type="button" class="color-button" id="light-blue"></button> 82C6F7 */
/* <button type="button" class="color-button" id="blue"></button> 5386FF */
/* <button type="button" class="color-button" id="olive"></button> BFC655 */
#todo-write #list-color-gray{
background-color: white;
}
.input-text, .ntd-input-text { /*211009 모달창 구현하면 조정필요 ?*/
width: 495px;
height: 34px;
position: relative;
left: 3px;
top: 3px;
border: 0;
outline: 0;
border-radius: 9px;
padding: 0px 16px 0px;
margin-right: 2px;
}
.input-button, .ntd-input-button{
width: 47px;
height: 34px;
position: relative;
left: 0px;
top: 3px;
color: #5e5e5e;
border: 0;
outline: 0;
background-color: transparent;
/* padding:10px; */
margin-left: 1px;
border-radius: 9px;
/* box-shadow: 1px 1px 1px lightgray, -1px -1px 1px #ffffff; */
}
/* 투두 모달창 */
#todo-modal.todo-modal-overlay {
width: 85px;
height: 300px;
position: absolute;
right: 20px;
top: 140px;
display: none;
flex-direction: column;
align-items: center;
justify-content: center;
/* background: rgba(255, 255, 255, 0.6); */
background: rgba(255, 255, 255, 0.5);
box-shadow: 3px 3px 5px #c8ced7, -3px -3px 5px #ffffff;
/* backdrop-filter: blur(1.5px);
-webkit-backdrop-filter: blur(1.5px); */
border-radius: 10px;
overflow:auto;
}
#todo-modal.todo-modal-overlay::-webkit-scrollbar {
width: 7px;
background-color: transparent;
}
#todo-modal.todo-modal-overlay::-webkit-scrollbar-thumb {
background-clip: padding-box;
border-top: 30px solid transparent;
border-bottom: 30px solid transparent;
background-color: lightgray;
}
.color-button{
position: relative;
top: 140px;
display:flex;
justify-content: space-around;
/* padding-top: 100px; */
background-color: #e9f0fa;
padding: 8px;
margin: 5px;
width: 65px;
height: 30px;
border: 0px;
border-radius: 7px;
box-shadow: 1px 1px 2px #c8ced7;
}
#todo-modal.todo-modal-close {
display: inline;
float: right;
padding-right: 3px;
cursor: pointer;
color: gray;
}
/* 낫투두모달창 */
#not-todo-modal.not-todo-modal-overlay{
width: 75px;
height: 110px;
position: absolute;
right: 20px;
top: 680px;
display: none;
flex-direction: column;
align-items: center;
/* justify-content: center; */
background: rgba(255, 255, 255, 0.8);
box-shadow: 3px 3px 5px #c8ced7, -3px -3px 5px #ffffff;
border-radius: 10px;
}
.ntd-color-button{
position: relative;
top: -20px;
display:flex;
justify-content: space-around;
/* padding-top: 100px; */
padding: 8px;
margin: 5px;
width: 65px;
height: 30px;
border: 0px;
border-radius: 7px;
box-shadow: 1px 1px 2px #c8ced7;
/* background-color: #e9f0fa; 버튼 색깔 ?*/
}
#not-todo-modal.not-todo-modal-close {
display: inline;
float: right;
padding-right: 3px;
cursor: pointer;
color: gray;
}
ol{
margin: 0px;
padding: 20px;
}
ol li {
display: flex;
justify-content: space-between;
align-items: center;
width: 565px;
list-style: none;
padding: 9px;
margin-bottom: 10px;
border-radius: 11px;
background: #e9f0fa;
box-shadow: 3px 3px 6px #949da6, -2px -2px 6px #ffffff;
}
ol li:hover{
box-shadow: 1px 1px 2px #949da6, -1px -1px 3px #ffffff;
cursor: pointer;
}
ol li:active,
ol li.checked:active {
box-shadow: inset 1px 1px 2px #949da6, -1px -1px 3px #ffffff;
}
.list-delete, .ntd-list-delete {
position: relative;
font-size: 15px;
color:lightgray;
right:0;
}
.list-delete:hover, .ntd-list-delete:hover {
color:#FF8585;
cursor: pointer;
}
.list-delete:active, .ntd-list-delete:active {
color:#DD5E56;
cursor: pointer;
}
/* .draggable{
color: red;
opacity: 0.5;
} */
/* 반응형 */
@media screen and (max-width:1360px) {
.body{
width: 1360px;
}
}
@media screen and (max-width:720px) {
section.Pomodoro{
position: absolute;
left: 15px;
}
section.todonottodo{
position: absolute;
top: 1000px;
left: 0px;
width: 670px;
}
section.nottodolist{
margin-bottom: 50px;
}
}
#pie-chart1 {
position: absolute;
top: 95px;
left: 228px;
display:iline-block;
width: 215px;
height: 215px;
border-radius: 50%;
transition: 0.1s;
}JavaScript
//네비 날짜
function setClock(){
let dateObject = new Date();
let hour = addStringZero(dateObject.getHours());
let min = addStringZero(dateObject.getMinutes());
let year = dateObject.getFullYear();
let month = dateObject.getMonth()+1;
let date = dateObject.getDate();
document.getElementById("POMOTODO__clock").innerHTML = year + ". " + month + ". " + date + "ﾠ " + hour+ " : " + min ;
}
function addStringZero(time){
if(parseInt(time)<10){
return "0"+time;
}else
return time;
}
window.onload = function(){
setClock();
setInterval(setClock,1000);
}
//뽀모도로타이머
let minutes = 25;
let seconds = 0;
const appendMinutes = document.getElementById("minute");
const appendSeconds = document.getElementById("second");
const appendTimes = document.getElementById("#pomo-timer");
const buttonStart = document.getElementById("btn__start");
const buttonStop = document.getElementById("btn__stop");
// const buttonPause = document.getElementById("btn__pause")
const buttonMinute1Plus = document.getElementById("minute1__plus");
const buttonMinute2Plus = document.getElementById("minute2__plus");
const buttonSecond1Plus = document.getElementById("second1__plus");
const buttonSecond2Plus = document.getElementById("second2__plus");
const buttonMinute1Minus = document.getElementById("minute1__minus");
const buttonMinute2Minus = document.getElementById("minute2__minus");
const buttonSecond1Minus = document.getElementById("second1__minus");
const buttonSecond2Minus = document.getElementById("second2__minus");
//뽀모도로 타이머 게이지 채우는 코드
let intervalID;
let func1;
let pomodoroDelay=1500; //25분은 1500초
let pieChart = document.getElementById("pie-chart1")
let PomodoroGuage
let pomodoroColor;
pomodoroColor = '#FF6F71';
let pomodoroGuageColor = '1'; //토글을 위한 변수
// pomodoroGuageColor 가 1이면 pomodoroColor = ff6f71, 2면 초록색 출력?
//뽀모도로 게이지 구현부분 draw함수를 호출해서 애니메이션을 시각화
function draw(classname){
PomodoroGuage = 100; //100%여서 고정
func1 = setInterval(function(){
if(PomodoroGuage >= 0){ //0%일때까지 반복
color1(PomodoroGuage ,classname);
PomodoroGuage -= 0.1;
} else{
clearInterval(func1);
}
},pomodoroDelay); // 5가 최소값이라서 뽀모도로 초 변경부분 5초씩 늘리도록 구현했음
}
function color1(PomodoroGuage, classname){
$(classname).css({
"background":"conic-gradient("+pomodoroColor+" 0% "+PomodoroGuage+"%, #ffffff "+PomodoroGuage+"% 0%)"
});
}
//Pomo Start버튼
buttonStart.onclick = function(){
if(minutes >0 || seconds>0){
if(buttonStart.className === 'clock__btn'){
startRecodList();
audio = new Audio('POMOTODO audio/Beep Short .mp3');
audio.volume = 0.2;
audio.play();
pieChart.style.background = pomodoroColor;
}
buttonStart.classList.add('active');
buttonStop.classList.add('active');
buttonStart.style.display = "none";
buttonStop.style.display = "inline";
clearInterval(intervalID);
}else if (minutes == 0 && seconds == 0){
buttonStart.style.display = "none";
buttonStop.style.display = "inline";
}
intervalID = setInterval(operateTimer, 1000);
console.log(pomodoroDelay);
}
//Pomo Pause 버튼
// buttonPause.onclick = function(){
// clearInterval(intervalID);
// buttonStart.style.display = "inline";
// buttonPause.style.display = "none";
// clearInterval(func1);// 반복 정지
// }
//Pomo stop버튼
buttonStop.onclick = function(){
if(minutes >0 || seconds>0){
if(buttonStop.className === 'clock__btn active'){
stopRecodList();
//스탑레코드리스트 함수로 이동시켜봄
}
}else if (minutes == 0 && seconds == 0){
buttonStart.style.display = "inline";
buttonStop.style.display = "none";
}
clearInterval(intervalID);
// minutes = 25; seconds = 0;
// appendMinutes.textContent = "25";
// appendSeconds.textContent = "00";
// pomodoroDelay = 1500;
// pieChart.style.background = "yellow";
}
function operateTimer(){ //1초씩 감소시키기
seconds--;
appendSeconds.textContent = seconds;
if(minutes<10)
appendMinutes.textContent="0"+minutes;
if(seconds<10)
appendSeconds.textContent="0"+seconds;
if(seconds<0){
minutes--;
appendMinutes.textContent = minutes;
seconds = 59;
appendSeconds.textContent = seconds;
if(minutes<10)
appendMinutes.textContent="0"+minutes;
}
if(minutes === 00 && seconds === 00){
clearInterval(intervalID);
minutes = 25; seconds = 0;
appendMinutes.textContent = "25";
appendSeconds.textContent = "00";
stopRecodList();
}
if(minutes < 00){
clearInterval(intervalID);
minutes = 0; seconds = 0;
appendMinutes.textContent = "00";
appendSeconds.textContent = "00";
}
}
//record 시간기록
let recordList = document.getElementById("record-list");
let now;
let startHours;
let startMins;
let stopHours;
let stopMins;
function startRecodList(){ // 스타트버튼 누를때
now = new Date();
startHours = addStringZero(now.getHours());
startMins = addStringZero(now.getMinutes());
draw(pieChart); // 타이머 애니메이션 적용,
};
function stopRecodList(){ // 00분00초돌때, 정지버튼 누를때,
// 재생, 일시정지, 정지버튼을 원래대로 되돌리는 코드
buttonStart.style.display = "inline";
buttonStop.style.display = "none";
buttonStart.classList.remove('active');
buttonStop.classList.remove('active');
PomodoroGuage = 0; // 애니메이션 종료시키기
pomodoroDelay = 1500; // 초기값으로 초기화;
now = new Date();
stopHours = addStringZero(now.getHours());
stopMins = addStringZero(now.getMinutes());
// 스탑버튼 누르면 기록하는 코드
//야기서부터 새로 시작//
recordList.innerHTML += '<br><button type="button" class="record-content" id="record-time" onclick="appearInputText(this)">'
+ startHours +' : '+ startMins
+' ~ '+ stopHours +' : '+ stopMins +'ㅤㅤㅤ'
// +'<input type="text" class="record-text" id='+recordList.childElementCount+' style ="display: inline" onkeydown=" if(window.event.keyCode==13){changeText(this)}" maxlength="26" autocomplete=off></input>'
// +'<input type="text" class="record-text" id="record-text" style ="display: inline" onblur="changeText(this)" onkeydown=" if(window.event.keyCode==13){changeText(this)}" maxlength="26" autocomplete=off></input>'
+'<input type="text" class="record-text" id="record-text" style ="display: inline" onkeydown=" if(window.event.keyCode==13){changeText(this)}" maxlength="26" autocomplete=off></input>'
+' </button>'
//스탑버튼 누르면 출력하는 오디오
audio = new Audio('POMOTODO audio/Beep Short .mp3');
audio.volume = 0.2;
audio.play();
// 스탑버튼 누르면 색깔, 분 변경하는 코드
if(pomodoroGuageColor == 1){ // 스탑버튼을 눌렀을 때 빨강이면 초록으로+05분으로+게이지도 초록으로 + 토글변수인 포모도로게이지컬러도 2로변경
buttonStart.style.color = '#56D69C'; // 타이머실행버튼 컬러 조작함수
minutes = 5; seconds = 0;
appendMinutes.textContent = "05";
appendSeconds.textContent = "00";
pomodoroDelay = 300;
pomodoroColor = '#56D69C'; // 게이지컬러 조작함수
pomodoroGuageColor = 2;
}else if(pomodoroGuageColor == 2){
buttonStart.style.color = '#FF6F71'
minutes = 25; seconds = 0;
appendMinutes.textContent = "25";
appendSeconds.textContent = "00";
pomodoroDelay = 1500;
pomodoroColor = '#FF6F71';
pomodoroGuageColor = 1;
}
};
//기록에 입력시 값 대입해주는 코드
function changeText(txt){
txt.style.display ='none';
// recordList.append(txt.value);
// console.log(txt.className); // record-text 출력함. 부모객체를 변수선언하고 부모객체의 텍스트로 추가하는식으로 구현하기
// console.log(txt.parentNode);// 부모변수찾기
let recordTextParent = txt.parentNode;
recordTextParent.innerHTML += "<span>"+txt.value+"</span>";
}
function appearInputText(txt){ // 기록시간 클릭 시
let recordTextInputTextTag = txt.childNodes[1]; // inputText창의 display를 inline으로 변경해서 보이게 한다
recordTextInputTextTag.style.display = 'inline';
let recordTextContent = txt.childNodes[3]; // 입력을 통해 생성된 span태그를 변수에 담아준다
if(recordTextContent!==undefined) // 생성된 span태그가 있을경우에 지워주고 없다면 실행하지않는다
txt.removeChild(recordTextContent);
else
recordTextInputTextTag.focus();
}
//minutes증감 버튼
buttonMinute1Plus.onclick = function(){
if(minutes<90 && buttonStart.style.display !== "none"){
minutes+=10;
appendMinutes.textContent=minutes;
pomodoroDelay += 600; // 게이지 10분 증가
}
}
buttonMinute2Plus.onclick = function(){
if(minutes<99 && buttonStart.style.display !== "none"){
minutes++;
appendMinutes.textContent=minutes;
pomodoroDelay += 60; // 게이지1분증가
if(minutes<10)
appendMinutes.textContent="0"+minutes;
}
}
buttonMinute1Minus.onclick = function(){
if(minutes>9 && buttonStart.style.display !== "none"){
minutes-=10;
appendMinutes.textContent=minutes;
pomodoroDelay -= 600; // 게이지 10분감소
if(minutes<10)
appendMinutes.textContent="0"+minutes;
}
}
buttonMinute2Minus.onclick = function(){
if(minutes>0 && buttonStart.style.display !== "none"){
minutes--;
appendMinutes.textContent=minutes;
pomodoroDelay -= 60; //게이지 1분 감소
if(minutes<10)
appendMinutes.textContent="0"+minutes;
}
}
//
//seconds 증감 버튼
buttonSecond1Plus.onclick = function(){
if(seconds<50 && buttonStart.style.display !== "none"){
seconds += 10;
appendSeconds.textContent=seconds;
pomodoroDelay += 10;
}else if (seconds>=50 && buttonStart.style.display !== "none" && minutes < 99){
minutes++;
appendMinutes.textContent=minutes;
seconds -=50;
appendSeconds.textContent="0"+seconds;
}
}
buttonSecond2Plus.onclick = function(){
if(seconds<=54 && buttonStart.style.display !== "none" && minutes < 99){
seconds += 5;
appendSeconds.textContent=seconds;
pomodoroDelay += 5;
if(seconds<10)
appendSeconds.textContent="0"+seconds;
}else if(seconds > 54 && buttonStart.style.display !== "none"){
minutes++;
appendMinutes.textContent=minutes;
seconds -= 55;
appendSeconds.textContent="0"+seconds;
}
}
buttonSecond1Minus.onclick = function(){
if(seconds>=10 && buttonStart.style.display !== "none"){
seconds -= 10;
appendSeconds.textContent=seconds;
pomodoroDelay -= 10;
if(seconds<10)
appendSeconds.textContent="0"+seconds;
}else if (seconds<10 && buttonStart.style.display !== "none" && minutes > 0){
minutes--;
if(minutes <10)
appendMinutes.textContent="0"+minutes;
else
appendMinutes.textContent=minutes;
seconds +=50;
appendSeconds.textContent=seconds;
}
}
buttonSecond2Minus.onclick = function(){
if(seconds>=5 && buttonStart.style.display !== "none"){
seconds -= 5;
appendSeconds.textContent=seconds;
pomodoroDelay -= 5;
if(seconds<10 )
appendSeconds.textContent="0"+seconds;
}else if(seconds <5 && buttonStart.style.display !== "none" && minutes > 0){
minutes--;
if(minutes <10)
appendMinutes.textContent="0"+minutes;
else
appendMinutes.textContent=minutes;
seconds += 55;
appendSeconds.textContent = seconds;
}
}
//
//모달창 구현
let modal = document.getElementById("modal");
let btnModal = document.getElementById("mail-btn");
btnModal.addEventListener("click", e => { // 누르면 모달창 생성, 한번 더 누르면 모달창 종료
if (modal.style.display == "flex"){
modal.style.display = "none";
}else{
modal.style.display = "flex";
}
})
let closeBtn = modal.querySelector(".close-area") //X버튼 눌러서 모달창 종료
closeBtn.addEventListener("click", e => {
modal.style.display = "none";
})
window.addEventListener("keyup", e => { //esc키 눌렀을 때 모달창 종료
if(modal.style.display === "flex" && e.key === "Escape") {
modal.style.display = "none";
}
})
//
//투두
//버튼을 누르면 addItem메소드를 실행한다 addItem메소드는 인풋텍스트값을 아이템리스트배열에 넣은 후 값을초기화, 포커스는 인풋텍스트에 남게한후 showList메소드를 실행한다
//showList메소드는 리스트를 출력해주는 메소드이고 ol태그인 list변수에다가 for문을 통해 li태그, span태그, 아이템리스트 등등을 넣은뒤 innerHTML을 통해 list에 다시 넣어준다
let itemList = [];
let inputButton = document.querySelector(".input-button");
inputButton.addEventListener("click", addItem);
function addItem() {
let item = document.querySelector(".input-text").value;
if(item.length !== 0 ){ //빈값출력안되도록 구현 211009
itemList.push(item);
document.querySelector(".input-text").value = "";
document.querySelector(".input-text").focus();
}
showList();
}
function showList(){ //반복문으로 반복생성하니깐 기본적으로 설정해뒀던 색깔정보가 다 날라감 -> 반복문이 아닌 엔터칠때마다 추가하도록?
let list = "<ol class = 'container' id='sortable'>"
for (let i = 0; i < itemList.length; i++){
list += "<li class = 'draggable' draggable = 'true'>"
+ "<span class='list-drag' id=" + i + " >" + " " + "</span>"
+ "<span class='list-content' id=" + i + ">" + itemList[i] + "</span>"
+ "<span class='list-delete' id=" + i + ">" + " ✖ " + "</span>"
+ "</li>";
}
$(function(){
$("#sortable").sortable({
start:function(event, ui){
console.log("drag : " + (ui.item.index()));
}
});
})
list += "</ol>";
document.querySelector(".item-list").innerHTML = list;
let deleteButtons = document.querySelectorAll(".list-delete");
for (let i = 0; i < deleteButtons.length; i++) {
deleteButtons[i].addEventListener("click", deleteItem);
}
}
function deleteItem() {
let id = this.getAttribute("id");
itemList.splice(id, 1);
showList();
}
//투두 모달창 구현
let todoModal = document.getElementById("todo-modal");
let todoModalBtn = document.querySelector(".item-list");
let setColorList;
todoModalBtn.addEventListener("click", e => { // 누르면 모달창 생성, 한번 더 누르면 모달창 종료
if(e.target.tagName !== "SPAN"){
if (todoModal.style.display == "flex"){
todoModal.style.display = "none";
}else{
setColorList = e.target;
todoModal.style.display = "flex";
}
}
})
let todoCloseBtn = document.getElementById("close") //X버튼 눌러서 모달창 종료
todoCloseBtn.addEventListener("click", e => {
todoModal.style.display = "none";
})
window.addEventListener("keyup", e => { //esc키 눌렀을 때 모달창 종료
if(todoModal.style.display === "flex" && e.key === "Escape") {
todoModal.style.display = "none";
}
})
let todoCheckBtn = document.getElementById("check")
todoCheckBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="lightgray";
todoModal.style.display = "none";
}
})
let todoRedBtn = document.getElementById("red")
todoRedBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#f36164";
todoModal.style.display = "none";
}
})
let todoLightOrangeBtn = document.getElementById("light-orange")
todoLightOrangeBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#FFD77F";
todoModal.style.display = "none";
}
})
let todoOrangeBtn = document.getElementById("orange")
todoOrangeBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#FFA045";
todoModal.style.display = "none";
}
})
//
let todoLightPinkBtn = document.getElementById("light-pink")
todoLightPinkBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#FFC1F8";
todoModal.style.display = "none";
}
})
let todoPinkBtn = document.getElementById("pink")
todoPinkBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#EE57B6";
todoModal.style.display = "none";
}
})
let todoLightPurpleBtn = document.getElementById("light-puple")
todoLightPurpleBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#B8B2FF";
todoModal.style.display = "none";
}
})
let todoPurpleBtn = document.getElementById("purple")
todoPurpleBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#B668FC";
todoModal.style.display = "none";
}
})
let todoLightGreenBtn = document.getElementById("light-green")
todoLightGreenBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#AFD5AB";
todoModal.style.display = "none";
}
})
let todoGreenBtn = document.getElementById("green")
todoGreenBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#56D69C";
todoModal.style.display = "none";
}
})
let todoDeepGreenBtn = document.getElementById("deep-green")
todoDeepGreenBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#88BE7B";
todoModal.style.display = "none";
}
})
let todoLightBlueGreenBtn = document.getElementById("light-blue-green")
todoLightBlueGreenBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#66DAE2";
todoModal.style.display = "none";
}
})
let todoBlueGreenBtn = document.getElementById("blue-green")
todoBlueGreenBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#429488";
todoModal.style.display = "none";
}
})
let todoLightBlueBtn = document.getElementById("light-blue")
todoLightBlueBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#289BFF";
todoModal.style.display = "none";
}
})
let todoBlueBtn = document.getElementById("blue")
todoBlueBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#1C00FF";
todoModal.style.display = "none";
}
})
let todoOliveBtn = document.getElementById("olive")
todoOliveBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
setColorList.style.color="#BFC655";
todoModal.style.display = "none";
}
})
// 낫투두
let ntdItemList = [];
let ntdInputButton = document.querySelector(".ntd-input-button");
ntdInputButton.addEventListener("click", ntdAddItem);
function ntdAddItem() {
let ntdItem = document.querySelector(".ntd-input-text").value;
if(ntdItem.length !== 0 ){
ntdItemList.push(ntdItem);
document.querySelector(".ntd-input-text").value = "";
document.querySelector(".ntd-input-text").focus();
}
ntdShowList();
}
function ntdShowList(){
let ntdList = "<ol class='ntd-container' id='ntd-sortable'>"
for (let i = 0; i < ntdItemList.length; i++){
ntdList += "<li>" + "<span class='ntd-list-drag' id=" + i + ">" + " " + "</span>"
+ ntdItemList[i]
+ "<span class='ntd-list-delete' id=" + i + ">" + " ✖ " + "</span>"
+ "</li>";
}
$(function(){
$("#ntd-sortable").sortable({
start:function(event, ui){
console.log("drag : " + (ui.item.index()));
}
});
})
ntdList += "</ol>";
document.querySelector(".ntd-item-list").innerHTML = ntdList;
let ntdDeleteButtons = document.querySelectorAll(".ntd-list-delete");
for (let i = 0; i < ntdDeleteButtons.length; i++) {
ntdDeleteButtons[i].addEventListener("click", ntdDeleteItem);
}
}
function ntdDeleteItem() {
let ntdId = this.getAttribute("id");
ntdItemList.splice(ntdId, 1);
ntdShowList();
}
//낫투두 모달창 구현
let notTodoModal = document.getElementById("not-todo-modal");
let notTodoModalBtn = document.querySelector(".ntd-item-list");
let ntdSetColorList;
notTodoModalBtn.addEventListener("click", e => { // 누르면 모달창 생성, 한번 더 누르면 모달창 종료
if(e.target.tagName !== "SPAN"){
if (notTodoModal.style.display == "flex"){
notTodoModal.style.display = "none";
}else{
ntdSetColorList = e.target;
notTodoModal.style.display = "flex";
}
}
})
let notTodoCloseBtn = document.getElementById("ntdClose") //X버튼 눌러서 모달창 종료
notTodoCloseBtn.addEventListener("click", e => {
notTodoModal.style.display = "none";
})
window.addEventListener("keyup", e => { //esc키 눌렀을 때 모달창 종료
if(notTodoModal.style.display === "flex" && e.key === "Escape") {
notTodoModal.style.display = "none";
}
})
let ntdCheckBtn = document.getElementById("ntdCheck")
ntdCheckBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
ntdSetColorList.style.color="#88BE7B";
notTodoModal.style.display = "none";
}
})
let notTodoRedBtn = document.getElementById("ntdRed")
notTodoRedBtn.addEventListener("click", e => {
if (e.target.tagName === 'BUTTON') {
ntdSetColorList.style.color="#f36164";
notTodoModal.style.display = "none";
}
})
//낫투두 작동완료
//뮤직플레이어
let audio = new Audio('POMOTODO audio/Farm Morning with Sheep.mp3');
let check = document.getElementById("select-audio");
let start = document.getElementById("start-button");
let stop = document.getElementById("pause-button")
check.addEventListener("click", function(){
clickList();
})
function clickList(){
if(stop.style.display = "flex"){
start.style.display = "flex";
stop.style.display = "none";
}
}
start.addEventListener("click", function(){
audio.play();
audio.pause();
switch(check.value){
case 'audio1':
audio.pause();
audio = new Audio('POMOTODO audio/Farm Morning with Sheep.mp3');
audio.loop = true;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
case 'audio2':
audio.pause();
audio = new Audio('POMOTODO audio/Fire.mp3');
audio.loop = true;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
case 'audio3':
audio.pause();
audio = new Audio('POMOTODO audio/Outdoor Summer Ambience.mp3');
audio.loop = true;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
case 'audio4':
audio.pause();
audio = new Audio('POMOTODO audio/Rain Heavy Loud.mp3');
audio.loop = true;
audio.volume = 0.2;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
case 'audio5':
audio.pause();
audio = new Audio('POMOTODO audio/Rain On Rooftop.mp3');
audio.loop = true;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
case 'audio6':
audio.pause();
audio = new Audio('POMOTODO audio/Valley Night.mp3');
audio.loop = true;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
case 'audio7':
audio.pause();
audio = new Audio('POMOTODO audio/Waves Crashing on Rock Beach.mp3');
audio.loop = true;
audio.volume = 0.5;
audio.play();
start.style.display = "none";
stop.style.display = "flex";
break;
}
});
stop.addEventListener("click", function(){
audio.pause();
start.style.display = "flex";
stop.style.display = "none";
});
let pomoScreen = document.querySelector(".Pomodoro");
let todoScreen = document.querySelector(".todonottodo");
// function extendScreen(){
// if(true)
// }
if(window.screen.width<2500){
console.log(window.screen.width);
console.log(window.screen.height);
}
'프로그래밍 > 개인프로젝트' 카테고리의 다른 글
| POMOTODO(9) - 서버환경 구축, 작업코드 서버환경에 생성 +@ (0) | 2021.11.02 |
|---|---|
| POMOTODO(8) - 메인페이지 거의 구현완료, 서버공부 (0) | 2021.11.01 |
| POMOTODO(6) - 개발시작, 2주간의 결과물 (0) | 2021.10.08 |
| PoMoToDo(5) - 약간의 디자인 변경 (0) | 2021.09.27 |
| PoMoToDo(4) - 약간의 디자인 변경 (0) | 2021.09.27 |