본문 바로가기
기타 이야기/공부 이야기

공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_메인페이지 시간, 명언 및 배경사진 구현(03_02)

by chan00 2022. 8. 23.

전 글에서 로그인/회원가입 페이지의 코드를 보며 어떻게 동작하는지 살펴 봤습니다.

이번 글에서는 메인 페이지에 들어갔을 때의 기능 구현을 코드로 알아 보겠습니다.

 

 

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>todo Page</title>
    <link rel="stylesheet" href="css/todomainStyle.css">
  </head>
  <body>
    <div id="weatherContainer" class="textColorWhite">
      <span id="locName"></span>
      <span id="locTemp"></span><br>
      <span id="locWeather"></span><br>
      <button id="logoutbtn">Logout</button>
    </div>
    <div id="headingText" class="textCenter textColorWhite">
      <h2 id="clock">00:00</h2>
      <p id="greetingText">Hello</p>
    </div>
    <form id="input-form" class="textCenter">
      <input required id="inputTodo" type="text" placeholder="Input your todo list!" autocomplete="off">
    </form>
    <div id="todoContainer"></div>
    <div id="quoteContainer" class="textCenter textColorWhite">
      <p id="quote"></p>
      <p id="author"></p>
    </div>

    <script src="js/apikey.js"></script>
    <script src="js/todoBackgroundImg.js"></script>
    <script src="js/todoClock.js"></script>
    <script src="js/todoGreeting.js"></script>
    <script src="js/todoManagement.js"></script>
    <script src="js/todoQuote.js"></script>
    <script src="js/todoWeather.js"></script>
    <script src="js/todoLogout.js"></script>

  </body>
</html>
/* 일반 태그 css */

* {
  box-sizing: border-box;
}

body {
  height: 98vh;
  width: 98vw;
  background-repeat : no-repeat;
  background-size : cover;
  background-position: center;
}

input[type=text] {
  background-color: inherit;
  border: 0 solid black;
  color: white;
  font-size: 1.5rem;
  margin-left: 5vw;
  text-decoration: underline;
  margin-top: 5vh;
}

input[type=text]::placeholder {
  color: white;
  opacity: 0.8;
}

input[type=text]:focus {
  outline: none;
}

/* 일반 태그 css */


/* id 태그 css */

#weatherContainer {
  float: right;
  font-size: 1.2rem;
}

#weatherContainer button {
  border: 1px solid white;
  width: 15vw;
  height: 3vh;
  background-color: rgb(220, 255, 255);
  color: black;
  font-size: 1rem;
  transition: 0.5s;
}

#weatherContainer button:hover {
  background-color: powderblue;
}

#headingText {
  clear: both;
}

#headingText > h2 {
  font-size: 10rem;
  margin-bottom: 0;
}

#headingText > p {
  font-size: 5rem;
  margin-top: 1vh;
}

#todoContainer {
  border: 1px solid white;
  border-radius: 10px;
  width: 40%;
  height: 25vh;
  margin: 3vh auto;
  color: white;
  font-size: 1.5rem;
  overflow-y: auto;
}

#todoContainer li {
  list-style-type: none;
  text-align: center;
}

#todoContainer button {
  background-color: inherit;
  border: none;
  margin-left: 0.5vw;
}

#quoteContainer {
  margin-top: 7vh;
}

#quote {
  font-size: 1.5rem;
}

#author {
  font-size: 1.2rem;
}

/* id 태그 css */


/* class 태그 css */

.textCenter {
  text-align: center;
}

.textColorWhite {
  color: white;
}

/* class 태그 css */

메인 페이지의 html 코드와 css 코드입니다.

여기서는 js 코드를 집중적으로 볼 것이기에 html과 css 코드를 이렇게 해서 메인 페이지의 디자인이 잡히는구나 정도로

생각하시면 될 것 같습니다.

 

 

저는 js 코드를 해당 코드의 역할에 따라 분류를 해 놓았는데, html 코드에서도 보면 이 js 파일들이 body 태그

밑쪽에 script src로 모두 포함이 되어 있는 것을 볼 수 있습니다.

 

그럼 먼저 메인 페이지에 들어갔을 때 현재 시간이 어떻게 표시되는지 코드를 보겠습니다.

(todoClock.js 코드)

 

 

//html의 clock 요소값을 가져옴
const clockText = document.getElementById("clock");

//이 함수가 호출되었을 시점의 시:분:초 형태의 값을 clock 요소에 넣는 함수
function realTime() {
  const date = new Date();
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  const second = String(date.getSeconds()).padStart(2, "0");
  clockText.innerText = `${hour}:${minute}:${second}`;
}

//setInterval 함수로 위의 시간을 표시하는 함수인 realTime 함수를 1000(1초)ms 마다 호출하게 된다.
//하지만 setInterval만 사용하면 페이지가 로드되고 1초 뒤부터 시간이 표시되기 때문에 realTime()을 먼저 사용
realTime();
setInterval(realTime, 1000);

시간을 나타내는 코드입니다.

 

이 코드에서는 Date 객체와 setInterval이란 함수의 개념을 알아야 하는데, Date 객체는 시간에 대한 정보를 담고 있는

객체이고 setInterval 함수는 매개변수로 설정한 시간마다 특정 함수를 계속 호출하는 함수입니다.

 

먼저 html 태그에 시간 텍스트를 넣어야 하기 때문에 html 요소를 가져오고, setInterval 함수로 호출할 함수 realTime

함수를 만듭니다.

 

여기서 Date 객체를 생성하는데 이 객체가 생성되었을 시점의 시간 값을 얻을 수 있기 때문에

각 변수(hour, minute....)들에 Date의 시간, 분, 초를 얻을 수 있는 함수의 반환값을 얻어 와 저장합니다.

 

그리고 innerText로 html 요소에 시간 텍스트를 넣는데 ${ } 를 이용하여 변수에 저장된 값을 넣어 줍니다.

그리고 setInterval 함수로 1000ms(밀리 초 단위)마다 realTime 함수를 호출해서 현재 시간을 보여주게

되는데, 이렇게 되면 페이지가 로드된 직후 1초 동안은 html 기본 텍스트인 00:00 으로 시간이 잠깐

표시되다가 setInterval로 함수가 호출되어 시간이 표시됩니다.

 

이 문제를 막기 위해 setInterval 함수 실행 전 위에 realTime 함수를 한 번 호출하고 setInterval 함수를 사용하게

되면 페이지가 로드되자마자 시간이 표시되게 됩니다.

 

 

//명언과 작가 문자열값이 들어간 객체 10개를 저장하는 배열을 만든다.
const quotes = [
  {
    quote: "확실한 일을 실행할 힘은 누구나 가지고 있다.",
    author: "괴테"
  },
  {
    quote: "생각이야말로 진정한 힘이다. 생각은 에너지인 것이다.",
    author: "엔드류 메터스"
  },
  {
    quote: "오늘 할 수 있는 일에 전력을 다하라. 그러면 내일에는 한걸음 더 진보한다.",
    author: "뉴턴"
  },
  {
    quote: "좋은 희망을 품는 것은 바로 그것을 이룰 수 있는 지름길이다.",
    author: "루터"
  },
  {
    quote: "오늘이라는 날은 두 번 다시 오지 않는다는 것을 잊지 말라",
    author: "단테"
  },
  {
    quote: "할 수 있는 한 훌륭한 인생을 만들라. 인생은 짧고 곧 지나간다.",
    author: "오울디즈"
  },
  {
    quote: "열의없이 성취된 위업이란 아직 하나도 없다.",
    author: "애머슨"
  },
  {
    quote: "태만은 천천히 움직이므로 가난이 곧 따라잡는다.",
    author: "프랭클린"
  },
  {
    quote: "내일에 아무런 도움이 되지 않는다면, 당신의 과거는 쫓아버려라",
    author: "오슬러"
  },
  {
    quote: "오늘을 붙들어라! 되도록 내일에 의지하지 말라! 그날 그날이 일 년 중에서 최선의 날이다.",
    author: "에머슨"
  },
];

//html 태그를 가져오는 변수
const quoteContainer = document.getElementById("quoteContainer");
const quoteText = document.getElementById("quote");
const authorText = document.getElementById("author");

const quoteLen = quotes.length;

//랜덤 함수를 이용해 quotes 배열에서 랜덤으로 명언 객체를 하나 뽑아 온다.
const randQuote = quotes[Math.floor(Math.random() * quoteLen)];

//랜덤 명언의 명언(quote)과 작성자(author)를 화면에 표시한다.
quoteText.innerText = randQuote.quote;
authorText.innerText = randQuote.author;

다음은 메인 페이지에서 맨 아래쪽에 새로고침을 할 때마다 랜덤으로 표시되는 명언을 javascript에서 추가합니다.

 

quotes라는 변수를 보면 배열 형태로 되어 있는데, 배열의 각 요소들은 객체 형태를 띄고 있습니다.

각 객체는 quote라는 명언 문자열이 들어가 있는 값과 author이라는 그 명언에 해당되는 인물의 이름이 문자열로

들어가 있습니다.

 

이렇게 명언 데이터를 10개 정도 만들어 랜덤 함수로 명언을 뽑아 표시하게 되는데, 이렇게 동작하기 때문에

새로 고침을 하다 보면 봤던 명언이 또 나오거나 할 수 있는 것입니다.

 

아래 코드를 보면 html 태그를 가져오고, 명언 변수(quotes)의 길이값을 받아옵니다.

그리고 Math.random 이라는 랜덤 숫자를 반환하는 함수와 명언 배열의 길이값을 곱하는 식을 통해

명언 배열에서 랜덤으로 명언을 하나 골라 randQuote 변수에 담게 됩니다.

 

그리고 html 태그에는 명언과 작성자 태그를 나눠 객체로 받아 왔기 때문에 그것에 맞게 innerText로 명언과

작성자를 넣어 주면 해결됩니다.

 

 

//이미지 파일명 배열 선언
const imgArr = [
  "pic01.jpg", "pic02.jpg", "pic03.jpg", "pic04.jpg", "pic05.jpg", "pic06.jpg", "pic07.jpg",
  "pic08.jpg", "pic09.jpg", "pic10.jpg",
];

//Math.random() 함수를 사용해 위의 10개 이미지 중 랜덤으로 이미지 파일명을 가져와 경로를 생성한다.
const randomImg = "img/" + imgArr[Math.floor(Math.random() * 10)];
//backgroundImage 값으로 위에서 랜덤값으로 뽑은 경로를 넣어서 랜덤 이미지를 적용시킨다.
document.body.style.backgroundImage = "url('" + randomImg + "')";

마지막으로 새로 고침을 할 때마다 명언과 같이 랜덤으로 배경 사진도 바뀌게 되는데, 이 또한 위의 명언 코드와

동작 방식이 매우 유사합니다.

(참고로 저는 html이 있는 폴더에 img라는 폴더를 만들어 거기 안에 pic01~pic10.jpg 로 파일명을 지정하여 사진

10개를 저장하여 이렇게 코딩을 한 것이고, 경로가 다르거나 사진 개수가 다르다면 코드가 달라질 수 있습니다.)

 

명언과 마찬가지로 배열을 만드는데 그 배열에는 배경 사진으로 쓰일 사진의 파일명들이 문자열 형태로 들어가

있습니다.

 

그리고 randomImg라는 변수에는 Math.random으로 사진을 랜덤으로 골라 앞에 "img/" 라는 문자열과 더한 값을

넣어 주게 되는데, 이렇게 되면 이 변수에는 랜덤 사진에 대한 파일 경로값이 문자열로 들어가게 되며

이 변수의 값을 document.body.style.backgroundImage 값에 넣어서 배경 사진 기능을 구현하게 됩니다.

 

위의 코딩들로 인해 페이지가 로딩될 때 명언과 배경 사진이 바뀐 것을 볼 수 있습니다.

저작자표시 (새창열림)

'기타 이야기 > 공부 이야기' 카테고리의 다른 글

공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_todolist 작성(03_04)  (0) 2022.08.27
공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_메인페이지 인사 표현, 로그아웃, 날씨 정보 받아오기(03_03)  (0) 2022.08.26
공부 과정 기록07_노마드코더 시청 후 제작 페이지 코드 설명_로그인과 회원가입(03_01)  (0) 2022.08.22
공부 과정 기록07_노마드코더 시청 후 제작한 페이지 소개(02)  (0) 2022.08.19
공부 과정 기록06_JS 활용 페이지 만들어보기(02)  (0) 2022.08.18

관련글

댓글

티스토리툴바