-
JavaScript (4)웹개발/JavaScript 2020. 12. 30. 15:38
* Image Background
- index(1).html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="index(1).css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?"/>
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do"/>
</form>
<ul class="js-toDoList">
</ul>
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
<script src="bg.js"></script>
</body>
</html>
-index(1).css
body{
background-color:#2c3e50;
}
.btn{
cursor:pointer;
}
body{
color:#34495e;
}
.clicked{
color:#7f8c8d;
}
.form,
.greetings{
display: none;
}
.showing{
display: block;
}
@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.bgImage{
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:-1;
animation: fadeIn 0.5s linear;
}
- bg.js
const body=document.querySelector("body");
const IMG_NUMBER=3;
function paintImage(imgNumber){
const image=new Image();
image.src=`./${imgNumber+1}.jpg`;
image.classList.add("bgImage");
body.prepend(image);
}
function genRandom(){
const number=Math.floor(Math.random()*IMG_NUMBER);
return number;
}
function init(){
const randomNumber=genRandom();
paintImage(randomNumber);
}
init();
* Getting the weather
API(Application Programming Interface)
: 다른 서버로부터 손쉽게 데이터를 가져올 수 있는 수단,
특정 웹사이트로부터 데이터를 얻거나 컴퓨터끼리 소통하기 위해 고안됨
.then(): 데이터가 완전히 들어온 다음 호출
- index(1).html
<!DOCTYPE html>
<html>
<head>
<title>Something</title>
<meta charset="utf-8"/>
<link rel="stylesheet" href="index(1).css" />
</head>
<body>
<div class="js-clock">
<h1>00:00</h1>
</div>
<form class="js-form form">
<input type="text" placeholder="What is your name?"/>
</form>
<h4 class="js-greetings greetings"></h4>
<form class="js-toDoForm">
<input type="text" placeholder="Write a to do"/>
</form>
<ul class="js-toDoList">
</ul>
<span class="js-weather"></span>
<script src="clock.js"></script>
<script src="greeting.js"></script>
<script src="todo.js"></script>
<script src="bg.js"></script>
<script src="weather.js"></script>
</body>
</html>
- weather.js
const weather=document.querySelector(".js-weather");
const API_KEY="b9b51f5475fe42b25b57fb98cd72d1a8";
const COORDS='coords';
function getWeather(lat, lng){
fetch(`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lng}&appid=${API_KEY}&units=metric`)
.then(function(response){
return response.json();
})
.then(function(json){
const temperature=json.main.temp;
const place=json.name;
weather.innerText=`${temperature} @ ${place}`;
});
}
function saveCoords(coordsObj){
localStorage.setItem(COORDS, JSON.stringify(coordsObj));
}
function handleGeoSuccess(position){
const latitude=position.coords.latitude;
const longitude=position.coords.longitude;
const coordsObj={
latitude,
longitude
};
saveCoords(coordsObj);
getWeather(latitude,longitude);
}
function handleGeoError(){
console.log("Cant access geo location");
}
function askForCoords(){
navigator.geolocation.getCurrentPosition(handleGeoSuccess,handleGeoError);
}
function loadCoords(){
const loadedCoords=localStorage.getItem(COORDS);
if(loadedCoords===null){
askForCoords();
}
else{
//get weather
const parsedCoords=JSON.parse(loadedCoords);
getWeather(parsedCoords.latitude, parsedCoords.longitude);
}
}
function init(){
loadCoords();
}
init();
'웹개발 > JavaScript' 카테고리의 다른 글
ReactJS (1) (0) 2020.12.31 JavaScript로 To Do List 만들기 (0) 2020.12.30 JavaScript (3) (0) 2020.12.29 JavaScript (2) (0) 2020.12.28 JavaScript (1) (0) 2020.12.28