👩🏽‍🦱니꼬쌤 클론코딩 :🍦바닐라 JS로 크롬 앱 만들기

무료강의! 언제나 클론코딩을 해보고싶었지!

백엔드 공부중이지만 사실 난 프론트공부를 하고싶었지!

인스타 팔로우와 유튜브 구독을 하는 난 니꼬쌤의 팬이지!

---

🍦바닐라 JS로 크롬 앱 만들기🍦

바닐라 JS로 크롬 앱 만들기 – 노마드 코더 Nomad Coders

바닐라 자바스크립트(Vanilla JS)란 프레임워크 또는 라이브러리가 적용되지 않은 순수한 자바스크립트를 뜻한다.

---

🍦강의 수강 & 메모🍦

---

🍦수업 결과물🍦

<로그인>

 

 

background.js

const images = ["0.jpg","1.jpg","2.jpg","3.jpg","4.jpg","5.jpg","6.jpg","7.jpg","8.jpg","9.jpg","10.jpg","11.jpg","12.jpg"]

const chosenImage = images[Math.floor(Math.random() * images.length)]

const bgImage = document.createElement("img");

bgImage.src =  `img/${chosenImage}`;

document.body.appendChild(bgImage);

clock

const clock = document.querySelector("#clock");
let hours, minutes, seconds;

function getClock() {
    const date = new Date();
    let hours = String(date.getHours()).padStart(2,"0");
    let minutes = String(date.getMinutes()).padStart(2,"0");
    let seconds = String(date.getSeconds()).padStart(2,"0");

    clock.innerText = `${hours} : ${minutes} : ${seconds}`;
}

getClock();
setInterval(getClock, 1000); //1초마다 함수 불러오기

 

greetings.js

const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");

const HIDDEN_CLASSNAME = "hidden";
const USERNAME_KEY = "username";

function onLoginSubmit(event) {
    event.preventDefault(); // 기본동작 없앰 함수 -> 화면 새로고침 방지
    loginForm.classList.add(HIDDEN_CLASSNAME); // form 숨기기 (css)
    const username = loginInput.value; // 인풋값 저장
    localStorage.setItem(USERNAME_KEY, username); // 미니DB에 username값 저장
    paintGreetings(username); 
}

function paintGreetings(username) { // 글자 username 넣어서 표시해주는 함수
    greeting.innerText = `Hello ${username} World!`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);
// 미니DB에 username값 가져오기 (없으면 null 저장)

if (savedUsername === null) {// 유저정보 없음(처음)
    loginForm.classList.remove(HIDDEN_CLASSNAME);// 폼 보여줌(css)
    loginForm.addEventListener("submit", onLoginSubmit);// form이 submit되면 함수실행
} else {// 유저정보 있음
    paintGreetings(savedUsername);

quotes.js

 

const quotes = [
    {
        quote: 'I never dreamed about success, I worked for it',
        author: 'Estee Lauder'
    },
    //생략
];

const quote = document.querySelector("#quote span:first-child");
const author = document.querySelector("#quote span:last-child");

const todayQuote = quotes[Math.floor(Math.random() * (quotes.length))];

quote.innerText = todayQuote.quote;
author.innerText = todayQuote.author;

todo.js

const toDoForm = document.getElementById("todo-form");
const toDoInput = document.querySelector("#todo-form input");
const toDoList = document.getElementById("todo-list");

const TODOS_KEY = "todos"

let toDos = []; //투두리스트배열 바꾸니까 let~!!!~!

function saveToDos(){ // 투두리스트 저장 
    localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
}

function deleteToDo(event){ // 투두리스트삭제 
    const li = event.target.parentElement;
    li.remove();
    toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id))
    saveToDos();
}

function paintToDo(newTodo) { //투두리스트 화면글 추가(+버튼))
    const li = document.createElement("li");
    li.id = newTodo.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.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); // 저장공간에서 todo리스트가져오기
if (savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    console.log(parsedToDos);
    toDos = parsedToDos; // 새로고침 후 새 요소 추가 시 문제 해결
    parsedToDos.forEach(paintToDo) // 각 배열 요소에 대해 실행!
}

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href = "style.css">
    <title>LoginPage</title>
</head>
<body>
    <h2 id = 'clock'>00:00:00</h2> <!-- 시간 -->
    <form class = "hidden" id = 'login-form'><!-- 로그인폼 -->
        <input required maxlength="15" type ='text' placeholder = "이름을 입력해주세요!">
        <input type = "submit" value="Log In">
    </form>

    <h1 id = 'greeting' class = "hidden"></h1> <!-- 인사말 -->

    <form  id = "todo-form"> <!-- 투두리스트 -->
        <input type = "text" placeholder= "투두리스트작성">
    </form>
    <ul id = "todo-list"></ul>

    <div id = "quote"> <!-- 인용 -->
        <span></span>
        <span></span>
    </div>
    <script src = "javaScript/background.js"></script>
    <script src = "javaScript/todo.js"></script>
    <script src = "javaScript/quotes.js"></script>
    <script src = "javaScript/clock.js"></script>
    <script src = "javaScript/greetings.js"></script>
</body>
</html>

css

.hidden{
    display: none;
}

---

🍦후기🍦

체고

이거 기반으로 스트릭잇기 웹페이지 만들어보기

(반응형/DB필요)

와 수료즘 멋찌다~