<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>쿵스쿵스쿵스
  </title>
</head>
<body>
  

  <div><span id = "order">1</span>번 참가자</div>

  <div>제시어 : <span id = "word"></span></div>
  <input type="text">
  <button>쿵쿵따</button>
  
  <script>
    const number = Number(prompt('참가 인원을 입력해 주세요.'));
    const $order = document.querySelector('#order');
    const $input = document.querySelector('input');
    const $button = document.querySelector('button');
    const $word = document.querySelector('#word');
    
    let word;     //제시어
    let newWord;  //새로운 제시어
    const onClickEvent = () => {
      if(number) {
        if(!word || word[2]===newWord[0]){
          if(newWord.length===3){
            word = newWord;
            $word.textContent = word;
            const order = Number($order.textContent);
            if(order+1 > number){
              $order.textContent = 1;
            } else {
              $order.textContent = order +1;
            }
          } else {
            alert('세 글자 단어를 입력하세요.');
          }
        } else {
            alert('땡!');
        }
        $input.value = '';
        $input.focus();
      }

    };
    
    const onInput = () => {
      newWord = event.target.value;
    };
    

    $button.addEventListener('click', onClickEvent);
    $input.addEventListener('input', onInput);
  </script>
</body>
</html>

ㅠㅠㅠㅠㅠ인프런강의 중 셀프 체크라해서 셀프니까 내 힘으로 쉽게 할수있으려나 하고 호기롭게 시작하였으나

결국 구글링의 힘을 빌렸다.

이렇게 하면 작동할것인가 여러번 시도하면서 코드 한줄 한줄의 중요성을 뼈저리게 느낀 경험이였다.

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

사진을 배경 이미지로 넣고 싶다면
img {
position:absolute;
width:100%;
height:100%;
left: 0px;
top: 0px;
right:0px;
bottom:0px;
z-index: -1;
opacity:80%;
}

 

이 간단한 것을 실제로 생각하지 못한다면 얼마나 비참한 시간이 흐르는지,..

 

   <script src="js/background.js"></script> 이 것이 html에 있던 내 백그라운드 이미지 사진이다.
아..이걸 그냥 사진말고 화면 꽉차게 하고싶은데..
도저히 스크립트로 이루어진 이미지 바꾸는 법을 모르겠어서 혼자 이것저것 해봤지만 실패. 역시 서치가 답
 
분명 시도했던것같은데 간과한것이 있었나?
그건 아마..백그라운드 사이즈 : cover에 집중해 보지못한것인가. 저 커버는 언제 통하는지 기필코 알아내고야 말겠다.
 
어쨋든 초보 프론트엔드개발지망생의 답답함이 해결...되었다.
모든 좌우상하 위치 지정후 100%를 먹여주어야한단걸.
기억해두겠다.
 

 

'하찮은 개발일지' 카테고리의 다른 글

쿵쿵따만들기  (0) 2022.10.02
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

const weather = document.querySelector("#weather span:first-child")  // 인덱스 화일 const city = document.querySelector("#weather span:last-child")
const API_KEY ="69ccc4d6a092c24097b0d0c925e936bb"; // 이건 사이트에서 받은 api키



function onGeoOk(position){
    const lat = position.coords.latitude
    const lon = position.coords.longitude
    const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;

   
    fetch(url)                                                                    
    .then((response) => response.json())
    .then((data) => {
         city.innerText = data.name;
         weather.innerText = `${data.weather[0].main} /${data.main.temp}`;                      
        });
}
function onGeoError(){
    alert("위치를 읽을 수 없습니다")
}

navigator.geolocation.getCurrentPosition(onGeoOk,onGeoError); //현재 위치를 알려주는 기능

 

 

 

'하찮은 개발일지' 카테고리의 다른 글

쿵쿵따만들기  (0) 2022.10.02
css 배경이미지 설정  (0) 2022.09.25
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

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

const TODOS_KEY = "todos"

let toDos = [];

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));
}

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.addEventListener("click",deleteTodo)
    button.innerText = "X"                                                                            
    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")

if(savedToDos !== null){
    const parsedToDos = JSON.parse(savedToDos);
    toDos = parsedToDos;
    parsedToDos.forEach(paintToDo);
}

 

버튼을 눌러서 리스트 속 item을 삭제하는 기능을 만들었다.

생각해보면 간단한데 그 속은 전혀 아니다.

일단 중요하게 생각해야할것.

function deleteTodo(event){
    const li = event.target.parentElement;
    li.remove();

  toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));

}

 삭제하는 기능 안에 필터 기능. 말 그대로 필터해서 보여준다.

toDo에 아이디를 그전에 부여했었는데 클릭했을때 li(리스트)눌렀을때 부여된 아이디가 맞지않은 것을 모두 보여준다는 뜻.

parseInt 는 스트링->숫자로 변환해주는 것.(아이디가 스트링으로 표기되어 기능이 제대로 되지않기에 숫자로 값을 변환해줌)

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14
2022.07.11 String  (0) 2022.07.11

그 전에 함수 하나를 먼저 보고 가자면 

const todaysQuote = (quotes[Math.floor(Math.random()*quotes.length)]);  // Math.random -> 이 기능으로 내가 나열한 명                                                                                                                             언을 랜덤으로 보여준다.

 

위에 지정한 명언(두개밖에 안넣은 상태)

인덱스파일에 지정한 span첫번째 두번째 각각 명언과 작가의 이름이 들어갈 부분을 정해주고

Math.fllor 기능은 저 랜덤값이 1.203203 이런식으로 표현되는것을 1로 바꿔주는 기능 내려주는 기능이다. 숫자를 정리해서

length로 내가 지정한 명언의 숫자만큼 랜덤값에 곱해준다. 왜냐면 랜덤값은 0.~1에서 랜덤값이 기본이라 저렇게 해줘야한다.

 

2. 백그라운드

 

이미지 파일을 미리 추가해 둔뒤에 이름을 똑같이 해서 지정해 준다.

그리고 document.createEleme 메서드는 지정한 tagName의 HTML 요소를 만들어 반환합니다. 즉 js 기능을 html에 포함시켜 사진이미지가 html 화면에 보이게 해준다.

이미지 소스 정의를 내려주고 아까 정의한 랜덤값 chosenImage

 

그리고 appendChild() 메소드는 한 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 붙입니다

 

인덱스 바디 밑에 이미지를 임의로 추가해줌으로서 마무리.

 

 

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
2022.07.14 clock.  (0) 2022.07.14
2022.07.11 String  (0) 2022.07.11

오늘은 시계를 만드는 중이다.

const clock = document.querySelector("h2#clock");   // 인덱스파일에서 clock을 찾고

 

function getClock(){
    const date = new Date();
    clock.innerText = (`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

 

//첫 줄 정의한 clock에 시간 분 초 를 불러주는 기능을 쓴다.

getClock();
setInterval(getClock,1000);

 

 

-1을 01로 만들어주는 것

 

"1".PadStart(2,"0")  // 1이란 숫자의 길이를 2만큼 늘리는데 0으로 채운다..,대충 이런뜻 하지만 기능 자체는 (내가 이해하기론) 스트링의 길이를 늘려주는 것이므로 함수를 스트링형식으로 바꿔준다.

                                                                                                                          ↙↙↙↙

시계최종본

 

const clock = document.querySelector("h2#clock");

function getClock(){
    const date = new Date();
    const hours = String(date.getHours()).padStart(2,"0");              // 이런식으로String() 감싸주면 끝.(본래형태에서)    

    const minutes = String(date.getMinutes()).padStart(2,"0");
    const secondes = String(date.getSeconds()).padStart(2,"0");
    clock.innerText = `${hours}:${minutes}:${secondes}`;
}



getClock();
setInterval(getClock,1000); //숫자는 1000이지만 1초마다 계속 보여주는것 = 실시간으로 보게 해주는 기능
                                               - 이 기능이 없다면 한번만 일어나고 만다.

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.11 String  (0) 2022.07.11

string 합체방법

 

일반적으로 알고있던

"Hello " + username; 플러스 와 " "를 이용한 방법과

 

새로운 방법

`백틱을 이용한 방법

`Hello ${username}`;

 

추출값은 동일하게 나온다.

 

어떤 방법을 사용해도 좋다고 하는데 난 전자가 이상하게 편하네 파이썬을 처음으로 배워서 그런가.

그래도 새로운 것에 익숙해지도록 노력해야겠다.

 

반본적인 String 오타를 유의하는 법

 

js에서 반복적으로 string을 사용하다가보면 오타가 날수도있는데

ex. username,,,,username...usermame  이런식으로? 그럴 때를 대비하여

 

const USERNAME_KEY = "username" 이런식으로 지정해준다.

 

오타가 날 경우 js에서 알려주기 때문에.

 

 

 

 

 

 

'하찮은 개발일지' 카테고리의 다른 글

css 배경이미지 설정  (0) 2022.09.25
22.07.18 날씨 api 사용  (0) 2022.07.18
2022.07.18 버튼을 눌러 삭제하는 기능  (0) 2022.07.18
22.07.15 백그라운드 외..  (0) 2022.07.15
2022.07.14 clock.  (0) 2022.07.14

+ Recent posts

티스토리툴바