[Project] Momentum 클론 코딩 -(5) 링크 리스트 만들기

링크 리스트

Links 버튼을 누르면  밑에 검은색 박스가 나오고 박스 안에는 내가 자주가는 링크를 등록해 놓을 수 있다.

기본으로 크롬은 있고 new 버튼을 눌러서 나온 삽입하는데에 insert 해주면 링크가 생긴다 ! 엄청 신기하군 !

 

유튜부를 넣어봤다

 

HTML 코드

<div class='js-link'>
        <span class="links">Links</span>
        <div class="linklist-box hidden">
            <ul class="links-list">
                <li>
                    <a href="http://www.google.com">Chrome Tab</a>
                </li>

            </ul>
            <div class='input-new'>
                <span class='new-button'>NEW</span>
                <form class="link-form hidden">
                   <input type="text" class="link-Name underline" placeholder="Name">
                   <input type="text" class="link-URL underline" placeholder="URL">
                   <span class='link-button'>INSERT</span>
                </form>
            </div>
        </div>
    </div>

자바스크립트 코드

const js_link=document.querySelector(".js-link");
const links=js_link.querySelector(".links");
const box=js_link.querySelector(".linklist-box");
const list=js_link.querySelector('.links-list');
const newBtn=js_link.querySelector(".new-button");//버튼의 span 태그
const linkForm=js_link.querySelector(".link-form");
const linkBtn=js_link.querySelector(".link-button");
const linkName=js_link.querySelector(".link-Name");//새로 삽입될 링크의 name
const linkURL=js_link.querySelector(".link-URL");//새로 삽입될 링크의 URL

let linkArray=[];//Insert link array

function delLink(event){
    const btn=event.target;
    const li=btn.parentNode;
    list.removeChild(li); //delete select child
    const cleanList=linkArray.filter(function(link){
        return link.id!==parseInt(li.id);
    });
    linkArray=cleanList;
    saveLink();

}

function saveLink(){
    localStorage.setItem('LINKS',JSON.stringify(linkArray));
}

function loadLinks(){
    const loadedLink=localStorage.getItem("LINKS"); //call Ls
    if(loadedLink!==null){  //if Ls is not null
        const parsedLink=JSON.parse(loadedLink);  //parse it
        parsedLink.forEach(function(Link){ 
            paintList(Link.name,Link.url);
        });
    }
}


function paintList(name,URL){
    const li=document.createElement('li');
    const a=document.createElement('a');
    const delBtn=document.createElement('button');
    const newId=linkArray.length+1;
    delBtn.innerText='X';
    delBtn.addEventListener('click',delLink);
    a.innerText=name;
    a.href=URL;
    li.appendChild(a);
    li.appendChild(delBtn);
    li.id=newId;
    list.appendChild(li);
    const linkObj={
        name:name,
        url:URL,
        id:newId
    };
    linkArray.push(linkObj);
    saveLink();

    
}
function handleClick(event){
    event.preventDefault();
    const currentName=linkName.value;
    const currentURL=linkURL.value;
    paintList(currentName,currentURL);
    linkName.value='';
    linkURL.value='';
}

function handleList(){
    if($(box).hasClass("hidden")===true){
        //loadLinks(); //이전에있던 애들을 불러오는거
        box.classList.remove("hidden");
        box.classList.add('app')
        newBtn.addEventListener("click",handleBtn);
    }//안보일때는 hidden을 없애서 모습 보이게!
    else{  //만약 hidden 이 없으면
        box.classList.add('hidden');
        if($(linkForm).hasClass('hidden')===false){
            linkForm.classList.add('hidden');
        }
    }    
}
function handleBtn(){
    if($(linkForm).hasClass('hidden')===true){
        linkForm.classList.remove('hidden');
        linkBtn.addEventListener('click',handleClick);
    }
    else{
        linkForm.classList.add('hidden');
    }
    
}
function init(){
    loadLinks();
    links.addEventListener("click",handleList);
}



init();

100줄 채우려고 엔터 엄청 누름

나도 코드 예쁘게 만들고 싶다