Skip to content
Snippets Groups Projects
Commit 5725517f authored by juchang Lee's avatar juchang Lee
Browse files

js complted, need to test after API key accepted.

parent 60f90ea2
No related branches found
No related tags found
No related merge requests found
JS/MOMENTUM/img/0.jpg

135 KiB

JS/MOMENTUM/img/1.jpeg

8.88 KiB

JS/MOMENTUM/img/2.jpeg

5.69 KiB

JS/MOMENTUM/img/3.jpg

70.3 KiB

JS/MOMENTUM/img/4.jpeg

7.14 KiB

...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="css/style.css">
<title>Momentum App</title> <title>Momentum App</title>
</head> </head>
<body> <body>
...@@ -16,7 +16,28 @@ ...@@ -16,7 +16,28 @@
/> />
<input type="submit" value="Log In" /> <input type="submit" value="Log In" />
</form> </form>
<h1 id="greeting" class="hidden"></h1> <h2 id="clock">00:00:00</h2>
<script src="app.js"></script> <h1 class="hidden" id="greeting"></h1>
<form id="todo-form">
<input type="text" placeholder="Write a To Do and Press Enter" required/>
</form>
<ul id="todo-list"></ul>
<!-- <li>
<span>text</span>
<button>X</button>
</li> -->
<div id="quote">
<span></span>
<span></span>
</div>
<div id="weather">
<span></span>
<span></span>
<script src="js/greetings.js"></script>
<script src="js/clock.js"></script>
<script src="js/quotes.js"></script>
<script src="js/background.js"></script>
<script src="js/todo.js"></script>
<script src="js/weather.js"></script>
</body> </body>
</html> </html>
\ No newline at end of file
const images = ["0.jpg", "1.jpeg", "2.jpeg", "3.jpg", "4.jpeg"];
const chosenImage = images[Math.floor(Math.random() * images.length)];
const bgImage = document.createElement("img");
bgImage.src = `img/${chosenImage}`;
document.body.appendChild(bgImage);
\ No newline at end of file
const clock = document.querySelector("h2#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");
clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);
\ No newline at end of file
...@@ -10,11 +10,10 @@ function onLoginSubmit(event) { ...@@ -10,11 +10,10 @@ function onLoginSubmit(event) {
loginForm.classList.add(HIDDEN_CLASSNAME); loginForm.classList.add(HIDDEN_CLASSNAME);
const username = loginInput.value; const username = loginInput.value;
localStorage.setItem(USERNAME_KEY, username); localStorage.setItem(USERNAME_KEY, username);
paintGreetings(); paintGreetings(username);
} }
function paintGreetings() { function paintGreetings(username) {
const username = localStorage.getItem(USERNAME_KEY);
greeting.innerText = `Hello ${username}`; greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME); greeting.classList.remove(HIDDEN_CLASSNAME);
} }
...@@ -26,5 +25,5 @@ if(savedUsername === null){ ...@@ -26,5 +25,5 @@ if(savedUsername === null){
loginForm.addEventListener("submit", onLoginSubmit); loginForm.addEventListener("submit", onLoginSubmit);
} }
else{ else{
paintGreetings(); paintGreetings(savedUsername);
} }
\ No newline at end of file
const quotes = [
{
quotes: "The way to get started is to quit talking and begin doing.",
author: "Walt Disney",
},
{
quotes: "Life is what happens when you're busy making other plans.",
author: "John Lennon",
},
{
quotes: "The world is a book and those who do not travel read only one page.",
author: "Saint Augustine",
},
{
quotes: "Life is either a daring adventure or nothing at all.",
author: "Helen Keller",
},
{
quotes: "To Travel is to Live",
author: "Hans Christian Andersen",
},
{
quotes: "Only a life lived for others is a life worthwhile.",
author: "Albert Einstein",
},
{
quotes: "You only live once, but if you do it right, once is enough.",
author: "Mae West",
},
{
quotes: "Never go on trips with anyone you do ntot love.",
author: "Hemmingway",
},
{
quotes: "We wander for distraction, but we travel for fulfilment.",
author: "Hilaire Belloc",
},
{
quotes: "Travel expands the mind and fills the gap.",
author: "Sheda Savage",
},
{
quotes: "Life is an egg",
author: "Juchang Lee",
}
];
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)];
quote.innerText = todaysQuote.quotes;
author.innerText = todaysQuote.author;
\ No newline at end of file
const toDoForm = document.getElementById("todo-form");
const toDoInput = toDoForm.querySelector("input");
const toDoList = document.getElementById("todo-list");
const TODOS_KEY = "todos";
let toDos = [];
function saveToDos() {
localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}
function deleteToDo(event) {
const li = event.target.parentElement;
//event 직접 조회, path를 조회하면 버튼 위치 보임
//button의 부모인 li를 찾아서 삭제
li.remove();
toDos = toDos.filter(toDo => toDo.id !== parseInt(li.id));
saveToDos();
}
function paintToDo(newTodo) {
const li = document.createElement("li");
li.id = newTodo.id; // li에 id를 줌
const span = document.createElement("span");
span.innerText = newTodo.text;
const button = document.createElement("button");
button.innerText = "";
button.addEventListener("click", deleteToDo);
li.appendChild(span); // li 안에 span을 넣는다.
li.appendChild(button);
toDoList.appendChild(li);
}
function handleToDoSubmit(event) {
event.preventDefault();
const newTodo = toDoInput.value;
toDoInput.value = "";
const newTodoObj = {
text: newTodo,
id: Date.now(),
};
toDos.push(newTodoObj);
paintToDo(newTodoObj);
saveToDos();
}
toDoForm.addEventListener("submit", handleToDoSubmit);
const savedToDos = localStorage.getItem(TODOS_KEY);
console.log(savedToDos);
if(savedToDos) {
const parseToDos = JSON.parse(savedToDos);
toDos = parseToDos
parseToDos.forEach(paintToDo);
}
function sexyFilter() {
return toDos.filter((toDo) => toDo.id !== parseInt(li.id));
}
\ No newline at end of file
const API_KEY = "252e2176496ae4337bc32ae0587d6d78";
const API_KEY2 = "241051bf13976dd3ddf8b8d9f247255e";
//키 아직 활성화 안됨
function onGeoOk(position){
const lat = position.coords.latitude;
const lon = position.coords.longitude;
console.log("you live in", lat, lon);
const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY2}&units=metric`;
console.log(url);
fetch(url)
.then(response => response.json())
.then(data => {
const weather = document.querySelector("#weather span:first-child");
const city = document.querySelector("#weather span:last-child");
city.innerText = data.name;
weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
});
}
function onGeoError(){
alert("Can't find you. No weather for you.");
}
navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
# React 앱 개발 연습 # React 앱 개발 연습
React 앱 실무 개발을 위한 기초 다지기 React 앱 실무 개발을 위한 기초 다지기
1. HTML + CSS 이해하기 ## 1. HTML + CSS 이해하기
1시간 특강 1시간 특강
https://youtu.be/cb7VlXqFla4?si=QxoXjOG5ksR4SHHK https://youtu.be/cb7VlXqFla4?si=QxoXjOG5ksR4SHHK
2. JavaScript 이해하기 ## 2. JavaScript 이해하기
1. 1시간 특강 a. JS 1시간 특강
https://youtu.be/hLhHFiwhRfA?si=_PuXq70jzJmJZxly https://youtu.be/hLhHFiwhRfA?si=_PuXq70jzJmJZxly
2. 노마드코더 JS vanilla : https://nomadcoders.co/javascript-for-beginners b. 노마드코더 JS vanilla js로 크롬 앱 만들기: https://nomadcoders.co/javascript-for-beginners
3. react 개발 ## 3. react 개발
\ No newline at end of file \ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment