반응형
위 강의에 들어있는 니콜라스 선생님의 강의를 토대로 제가 연습겸 작성한 js 문서들 입니다. 무료강의니깐 한번 들어보시길 추천드리겠습니다. 신기술? 신개념? 등을 좀 배울수 있어 유익했습니다. 플젝은 localStorage 에 name , to dolist , 날씨API사용하여 가져오기 , 실시간 시계 , 배경이미지(랜덤) 등이 포함된 기술입니다. CSS는 포함안되있고 JS적인 부분만 다루고있습니다. 예제파일도 첨부하니 필요하시분은 받아서 보시기 바랍니다. index.html <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Real Time</title>
<link rel="stylesheet" href="../css/index.css">
</head>
<body>
<div class="realTime_div">
<h1>00 : 00</h1>
</div>
<form id="form" class="form">
<input id="input" type="text" placeholder="your name?"/>
</form>
<h4 id="h4" class="h4"></h4>
<form id="todoform">
<input type="text" placeholder="what is todo?">
</form>
<ul id="ul"></ul>
<span class="weather"></span>
<script src="../js/clock.js"></script>
<script src="../js/user.js"></script>
<script src="../js/todo.js"></script>
<script src="../js/bg.js"></script>
<script src="../js/weather.js"></script>
</body>
</html> index.css .h4,
.form {
display:none;
}
.show{
display:block;
}
body{
background-color: pink;
}
@keyframes fadeIn{
from{
opacity: 0;
}
to {
opacity: 1;
}
}
.bgIMG{
position: absolute;
z-index: -1;
width:100%;
height: 100%;
left:0;
top:0;
animation: fadeIn 0.5s linear;
}
/* 배경이미지의 속성 설정
position 절대위치로 left top 0
애니메이션으로 투명도를 0에서 1로 바꿈 0.5 초마다
*/ bg.js const body = document.querySelector("body");
const IMG_NUMBER = 5;
function randomNumber(){ //랜덤숫자 생성
return Math.ceil((Math.random()*IMG_NUMBER));
}
function IMGselect(randomNum){
const image = new Image();
image.src = `../img/${randomNum}.jpg`;
image.className = 'bgIMG';
body.prepend(image);
}//랜덤 숫자를 넣고 이미지 경로를 뽑아 body에 추가
function init(){
const randomNum = randomNumber();
IMGselect(randomNum);
}
init(); clock.js const realTime_div = document.querySelector(".realTime_div"),
realTime_H1 = realTime_div.querySelector("h1");
realTime_js = (function(){
const realDate = new Date(),
getHours = realDate.getHours(), // 시간 가져오기
getMinute = realDate.getMinutes(), // 분 가져오기
getSecond = realDate.getSeconds(); // 초 가져오기
realTime_H1.innerText = `${getHours < 10 ? `0${getHours}` : getHours} :`;
realTime_H1.innerText += ` ${getMinute < 10 ? `0${getMinute}` : getMinute} :`;
realTime_H1.innerText += ` ${getSecond < 10 ? `0${getSecond}` : getSecond}`;
//시분초가 각각 10 미만일때 앞에 0 붙혀서 출력 삼항연산자 ex) 01:01:01
});
//625
function init(){
setInterval(realTime_js,1000);
}
init(); todo.js const toDoform = document.querySelector('#todoform'),
toDoinput = toDoform.querySelector('input'),
LS_TODO = 'TODO',
todolist = document.querySelector('ul');
let todos = [];
function LS_Save(){
localStorage.setItem(LS_TODO,JSON.stringify(todos));
//객체를 STRING으로 변환해서저장 LOCAL은 STRING 박에 저장이 안됨
}
function saveTodo2(text){
const li = document.createElement('li'), //LI 생성
span = document.createElement('span'), //span 생성
delBtn = document.createElement('button'), //button 생성
newId = todos.length+1; //li에 만들어줄 id값 생성
delBtn.innerText = '🤓'; // 버튼에 텍스트 이모티콘 추가
delBtn.addEventListener('click',deleteLiBtn);
span.innerText = text; // span 에 입력한값 추가
li.appendChild(delBtn); // li에 버튼 추가
li.appendChild(span); // li 안에 span 추가
li.id = newId; //li 에 id 값 할당
todolist.appendChild(li); // ul에 li 추가
const todoObj = {
text : text, //텍스트값
id : newId //li id값 지정
}
todos.push(todoObj); //객체를 배열에 저장
LS_Save();
}
function deleteLiBtn(EVENT){ //버튼 클릭시 삭제 이벤트
const BtnPaLi = event.target.parentElement;
//버튼의 부모엘리먼트 li 찾음
BtnPaLi.remove(BtnPaLi.id); //li의 id로 제거
const newtodo = todos.filter(function(todo){
//fiter 은 배열의 각각의 요소에 foreach처럼 접근해서
//true 인 경우만 갖고 새로 배열을 만든다
return todo.id !== parseInt(BtnPaLi.id)
//true인지 false인지 확인중
});
todos = newtodo; //todo를 newtodo로 저장
LS_Save(); //로컬스토리지 저장
}
function hanmdleSubmit2(event){
event.preventDefault(); //이벤트 초기화
const todovalue = toDoinput.value;
saveTodo2(todovalue); //text값 서브밋
toDoinput.value = "";
}
function isTodo(){
const LS_TODOSS = localStorage.getItem(LS_TODO);
if(LS_TODOSS !== null){
const parseTodo = JSON.parse(LS_TODOSS);
//로컬 데이터를 객체로저장
parseTodo.forEach(function(todo){
//forEach로 각각 데이터 뽑기
saveTodo2(todo.text);
});
}
}
function init(){
isTodo();
toDoform.addEventListener('submit',hanmdleSubmit2);
}
init(); user.js const form = document.querySelector("#form"),
h4 = document.querySelector("#h4");
input = form.querySelector("input");
function showuser(){
h4.classList.remove('h4');
form.classList.remove('show');
form.classList.add('form');
h4.classList.add('show');
h4.innerText =localStorage.getItem("user");
}
function saveName(text){
localStorage.setItem('user',text);
showuser();
//저장소에 user : 이름 저장
}
function handleSubmit(event){
event.preventDefault(); //이벤트 초기화
form.addEventListener("submit",saveName(input.value));
}
function isuser() {
if(localStorage.getItem("user") === null){
form.classList.remove('form');
form.classList.add('show');
form.addEventListener("submit",handleSubmit);
//user 가 없으면 user입력
} else {
showuser(); //form 가리고 h4에 input.value 보여준다
//user가 있으면 user 보여준다
}
}
function init() {
isuser();
}
init(); weather.js const LS_GPSName = 'GPS';
const API_KEY = '이건 회원가입해서 받으세여 구글에 weather API 검색';
const weather = document.querySelector(".weather");
function getWeather(lat,lon){
fetch(
`https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`
//api 호출해서 위도,경도,appid키값,화씨를 섭씨로 바꾸기 등을 넣어서 정보를 가져온다.
).then(function(data) {
return data.json();
}).then(function(json){
const temper = json.main.temp;
const place = json.name;
weather.innerText = `장소 : ${place} @ 온도 : ${temper}`;
//속성으로 css 설정
//weather.setAttribute('style','font-size : 30px; color : white;');
//프로퍼티로 css 설정
weather.style.color = 'white';
weather.style.fontSize = '30px';
});
}
//featch는 IE에선 작동이 안된다
//AJAX의 상위호환 같은것인데 IE에서는 개발이안되서
//국내에선 사용하기가 조금 꺼려진다
//국내에선 되도록 AJAX를 호출하는게 나을거같다
function LS_SaveGPS(GPSObj){
localStorage.setItem(LS_GPSName,JSON.stringify(GPSObj));
}
function SaveGPSSuccess(position){
const lat = position.coords.latitude; //위도 얻기
const lon = position.coords.longitude; //경도 얻기
const GPSObj = {
lat,
lon
}
LS_SaveGPS(GPSObj);
getWeather(lat,lon);
}
function SaveGPSError(){
console.log("failed");
}
function SaveGPS(){
navigator.geolocation.getCurrentPosition (SaveGPSSuccess,SaveGPSError);
//navigator.geolocation 객체를 이용해서 gps 정보를 얻는다
//getCurrentPosition빠른 응답 / 정확도는 낮음
// getCurrentPosition 은 (첫번째인자,두번쨰인자)\
//첫번쨰인자는 석세스 콜백 함수고
//두번째 인자는 에러 콜백 함수다.
}
function loadGPS(){
const LS_GPSInfo = localStorage.getItem(LS_GPSName);
if(LS_GPSInfo === null || LS_GPSInfo === undefined){
//GPS정보얻기
SaveGPS();
} else {
const parseGPS = JSON.parse(LS_GPSInfo);
//GPS 정보 가져오기
getWeather(parseGPS.lat,parseGPS.lon);
}
}
function init(){
loadGPS();
}
init();
아래 파일의 img 폴더의 배경이미지는 용량이 많아 제거하였습니다. 마음에되는 이미지로 1.jpg 2.jpg 를 5.jpg까지 만드시면 됩니다. 예제파일 CLOCK.ZIP 추가 |
clock.zip반응형
'프로그래밍 > JavaScript' 카테고리의 다른 글
| 자바스크립트 - 제어대상 찾기 (dom요소 찾기) (0) | 2019.02.27 |
|---|---|
| JavaScript - .map , ELEMENT (0) | 2019.02.27 |
| JavaScript - NODE 객체 (0) | 2019.02.27 |
| javascript - let,var,const 차이 (0) | 2019.02.27 |
| javascript - DOM 선택 STYLE 바꾸기 (0) | 2019.02.27 |