index.html
<!DOCTYPE html>
<html lang="ko">
<head>
<title>ToDo</title>
<link rel="stylesheet" href="./style.css" />
<script src="./script.js" defer></script>
</head>
<body>
<h1 id="location-name-tag">ToDo</h1>
<div class="todo-container">
<input type="text" id="todo-input" onkeydown="keyCodeCheck()" />
<ul id="todo-list"></ul>
</div>
<div class="delete-btn-wrapper">
<button onclick="deleteAll()">전체 삭제</button>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
}
body {
background-image: url('./images/Clear.jpg');
background-size: cover;
display: flex;
flex-direction: column;
align-items: center;
margin: 0;
min-height: 100vh;
}
h1 {
color: white;
text-shadow: 2px 2px gray;
opacity: 80%;
}
input {
opacity: 80%;
}
.todo-container {
max-width: 100%;
width: 400px;
}
#todo-input {
background-color: lightyellow;
border: none;
display: block;
font-size: 2rem;
padding: 0.5rem 2rem 0.5rem 0.5rem;
width: 100%;
}
#todo-list {
background-color: lightyellow;
list-style-type: none;
margin: 0;
padding: 0;
}
#todo-list li {
border-top: 1px solid rgb(242, 242, 242);
font-size: 1.5rem;
user-select: none;
}
.complete {
color: rgb(155, 155, 155);
text-decoration: line-through;
}
li button {
background-color: mintcream;
width: 1.5rem;
height: 1.5rem;
margin: 0.5rem;
border: 2px solid black;
border-radius: 8px;
cursor: pointer;
}
li button:active {
border: 2px solid grey;
}
.delete-btn-wrapper {
margin-top: 1rem;
}
.delete-btn-wrapper button {
font-weight: bold;
border: none;
background-color: antiquewhite;
padding: 0.2rem 1rem;
cursor: pointer;
border-radius: 5px;
box-shadow: 3px 3px gray;
}
.delete-btn-wrapper button:active {
box-shadow: none;
margin-left: 3px;
margin-top: 3px;
}
script.js
const todoInput = document.querySelector('#todo-input');
const todoList = document.querySelector('#todo-list');
const savedWeatherData = JSON.parse(localStorage.getItem('saved-weather'));
const savedTodoList = JSON.parse(localStorage.getItem('saved-items'));
const createTodo = function (storageData) {
let todoContents = todoInput.value;
if (storageData) {
todoContents = storageData.contents;
}
const newLi = document.createElement('li');
const newSpan = document.createElement('span');
const newBtn = document.createElement('button');
newBtn.addEventListener('click', () => {
newLi.classList.toggle('complete');
saveItemsFn();
});
newLi.addEventListener('dblclick', () => {
newLi.remove();
saveItemsFn();
});
if (storageData?.complete) {
newLi.classList.add('complete');
}
newSpan.textContent = todoContents;
newLi.appendChild(newBtn);
newLi.appendChild(newSpan);
todoList.appendChild(newLi);
todoInput.value = '';
saveItemsFn();
};
const keyCodeCheck = function () {
if (window.event.keyCode === 13 && todoInput.value.trim() !== '') {
createTodo();
}
};
const deleteAll = function () {
const liList = document.querySelectorAll('li');
for (let i = 0; i < liList.length; i++) {
liList[i].remove();
}
saveItemsFn();
};
const saveItemsFn = function () {
const saveItems = [];
for (let i = 0; i < todoList.children.length; i++) {
const todoObj = {
contents: todoList.children[i].querySelector('span').textContent,
complete: todoList.children[i].classList.contains('complete'),
};
saveItems.push(todoObj);
}
saveItems.length === 0
? localStorage.removeItem('saved-items')
: localStorage.setItem('saved-items', JSON.stringify(saveItems));
};
if (savedTodoList) {
for (let i = 0; i < savedTodoList.length; i++) {
createTodo(savedTodoList[i]);
}
}
const weatherDataActive = function ({ location, weather }) {
const weatherMainList = [
'Clear',
'Clouds',
'Drizzle',
'Rain',
'Snow',
'Thunderstorm',
];
weather = weatherMainList.includes(weather) ? weather : 'Fog';
const locationNameTag = document.querySelector('#location-name-tag');
locationNameTag.textContent = location;
document.body.style.backgroundImage = `url('./images/${weather}.jpg')`;
if (
!savedWeatherData ||
savedWeatherData?.location !== location ||
savedWeatherData?.weather !== weather
) {
localStorage.setItem(
'saved-weather',
JSON.stringify({ location, weather })
);
}
};
const weatherSearch = function ({ latitude, longitude }) {
fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid={API Key}`
)
.then((res) => {
return res.json();
})
.then((json) => {
const weatherData = {
location: json.name,
weather: json.weather[0].main,
};
weatherDataActive(weatherData);
})
.catch((err) => {
console.log(err);
});
};
const accessToGeo = function ({ coords }) {
const { latitude, longitude } = coords;
// shorthand property
const positionObj = {
latitude,
longitude,
};
weatherSearch(positionObj);
};
const askForLocation = function () {
navigator.geolocation.getCurrentPosition(accessToGeo, (err) => {
console.log(err);
});
};
askForLocation();
if (savedWeatherData) {
weatherDataActive(savedWeatherData);
}