프로젝트/프로젝트_노마드코더_JS웹앱

2023_09_25 노마드코더 웹앱 마무리

coding-jake 2023. 9. 25. 23:52

바닐라JS로 간단한 웹앱만들기

-노마드코더 JS강의를 통해 간단한 웹앱의 기능은 다 구현하였으나, CSS를 혼자먹여야해서 오늘은 4시간동안 CSS적용을 함.

-github : https://github.com/jake6677/nomadcoder-JSapp/tree/main/NomadCoderJS

 

-css 코드 및 몰랐던 것들 정리

html {
    color : white;
    text-align: center;
}
.hidden {
    display : none;
}
//img태그를 background에 지정한 코드. position을 fixed하고 z-index를 -1로 둬서 배경처럼 사용함. 
#background {  
    position : fixed;
    z-index: -1; 
    top : 0;
    left : 0;
    min-width : 100%;
    max-width : 100%;
    object-fit: cover;
    width : 100%;
    height: 100%;
}

#weather {
    margin-bottom: 80px;
    text-align: right;
}

h2#days {
    font-size : 16px;
    margin-top: 5px;
    margin-bottom: 0px;
}

h2#clock {
    font-size : 43px;
    margin-top: 0px;
    font-size: 43px;
    margin-bottom: 30px;
    word-spacing: -5px;
}

h1#greeting {
    font-size : 50px;
    margin-top: 0px;
    margin-bottom: 10px;
}

#login-form{
    color : white;
}

#login-form #login-text {
    margin-bottom : 80px;
    font-size : 30px;
    height: 50px;
    width: 600px;
    color : white;
    background-color : transparent; //이 속성을 통해 배경을 투명하게 할 수 있음
    text-align: center;
    outline : none;
    border : 0px;
    border-bottom : 2px solid white;
}

#login-form #login-text::placeholder{
    color : white;
    font-size : 50px;
}

#login-form #login-text:focus::placeholder{
    color : transparent;
}

#login-form #login-submit{
    display : none;
}

#todo-form {
    color : white;
}

#todo-form input {
    height: 30px;
    width: 400px;
    color : white;
    background-color : transparent;
    text-align: center;
    outline : none;
    border : 0px;
    border-bottom : 2px solid white;
}

#todo-form input:focus {
    outline : none;
}

#todo-form input::placeholder{
    color : white;
    font-size : 18px;
}

#todo-form input:focus::placeholder{
    color : transparent;
}

ol {
    text-align: center;
    list-style-position: inside; // 이 속성을 이용해서 li태그의 목차도 함께 text-align:center의 속성을 적용할 수 있었음
    height : auto;
    margin-top : 20px;
    margin-left : 0px;
    padding-left : 0px;
}

button.delete {
    background-color: transparent;
    border : 0px;
}

div#quotes {
    position : relative;
    top: 60px;
    padding-bottom : 30px;
}

top, left에 대한 AI의 설명
min-width,height:100%에 대한 설명

object-fit : cover

-대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.

https://developer.mozilla.org/ko/docs/Web/CSS/object-fit

 

object-fit - CSS: Cascading Style Sheets | MDN

CSS object-fit 속성은 <img>나 <video> 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다.

developer.mozilla.org

letter-spacing, word-spacing

-글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다.

https://www.codingfactory.net/10463

 

CSS / letter-spacing, word-spacing / 글자 사이 간격, 단어 사이 간격

letter-spacing, word-spacing 글자 사이의 간격은 letter-spacing으로, 단어 사이의 간격은 word-spacing으로 정합니다. 값이 커지면 간격이 커집니다. 값에는 음수를 넣을 수 있습니다. 음수를 값으로 하는 경

www.codingfactory.net

 

-해결하지 못한것

username을 입력하는 form이 있을때는, todo list와 todo form을 안보이게 hidden class를 추가하고 싶었는데, 다음과 같이 코드를 작성하니까 문제가 발생했음

-greeting.js

const loginForm = document.querySelector('#login-form');
const loginInput = document.querySelector('#login-form input');
const greeting = document.querySelector('#greeting');
// const toDoForm = document.querySelector("#todo-form"); 
// const toDoList = document.querySelector("#todo-list");
todo.js에서 사용했던 변수를 그대로 복붙해서 todo.js를 동일한 내용으로 const로 변수를 정의하지 못해서 발생했던 문제, 사용한 변수명을 바꾸니 해결됨.
const HIDDEN_CLASSNAME = "hidden"
const USERNAME_KEY = "username"

function loginSubmit(event) {
    event.preventDefault();
    loginForm.classList.add(HIDDEN_CLASSNAME);
    localStorage.setItem(USERNAME_KEY, loginInput.value);
    // toDoForm.classList.remove(HIDDEN_CLASSNAME);
    // toDoList.classList.remove(HIDDEN_CLASSNAME);
    paintGreetings();
}

function paintGreetings(){
    const username = localStorage.getItem(USERNAME_KEY);
    greeting.innerText = `Good Day, ${username}`;
    greeting.classList.remove(HIDDEN_CLASSNAME);
}

const savedUsername = localStorage.getItem(USERNAME_KEY);

if (savedUsername === null) {
    loginForm.classList.remove(HIDDEN_CLASSNAME);
    loginForm.addEventListener("submit", loginSubmit);
} else {
    paintGreetings();
    // toDoForm.addEventListener("submit", handleToDoSubmit);
    // toDoForm.classList.remove(HIDDEN_CLASSNAME);
    // toDoList.classList.remove(HIDDEN_CLASSNAME);
}
//to-do form을 제출할 시에 페이지가 새로고침되는 문제가 발생

적어놓은대로 to-do form을 submit하니까 페이지가 새로고침되는 문제가 발생함. 왜 이런 문제가 발생하는지는 잘 모르겠음. submit이라는 이벤트가 발생해서 새로고침되는거 같은데, to-do.js랑 합쳐야하는건지, 어떻게 해야할지를 모르겠어서 일단 남겨둠.

(23_09_26 추가/ greeting.js에서 todo.js에서 사용한 변수명을 동일하게 사용해서 발생했던 문제임. 변수명을 바꾸니 정상작동하였고, event.preventDefault()도 제대로 작동해서 새로고침도 안하게 됨.