'식별자' 태그의 글 목록

자바스크립트 - 제어대상 찾기 (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 - 바닐라자바스크립트 예제(nomad by nicollas) (0)	2019.02.27

이 예제는 https://academy.nomadcoders.co/courses/435558/lectures/6701513

공지사항

크롬 앱 클론코딩하며, JS 이론 배우기 <br></br>[초급] HTML, CSS, JS

academy.nomadcoders.co

위 강의에 들어있는 니콜라스 선생님의 강의를 토대로 제가 연습겸 작성한

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 선택 STYLE 바꾸기

'프로그래밍 > JavaScript' 카테고리의 다른 글

javascript - 바닐라자바스크립트 예제(nomad by nicollas)

'프로그래밍 > JavaScript' 카테고리의 다른 글

+ Recent posts

티스토리툴바