본문 바로가기
DOM

DOM 기초(6) - 메뉴 / 서브메뉴, 이미지 슬라이드, 로또

traveler-Hwang 2022. 11. 14. 21:27
728x90
반응형

1) 코드 실습

    1-1) 메뉴 / 서브메뉴
    1-2) 이미지 슬라이드(미완성)

    1-3) 로또 번호 뽑기

 

 

 

 

 

1) 코드 실습

1-1) 메뉴 / 서브메뉴

 

index.html

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <link rel="stylesheet" href="./public/css/index.css" />
  </head>
  <body>
    <div id="wrap">
      <div id="header">
        <h1>
          <a href="#">logo</a>
        </h1>
        <ul id="gnb">
          <li>
            <a href="#">menu1</a>
            <ul class="sub">
              <li><a href="#">menu1-1</a></li>
              <li><a href="#">menu1-2</a></li>
              <li><a href="#">menu1-3</a></li>
              <li><a href="#">menu1-4</a></li>
            </ul>
          </li>

          <li>
            <a href="#">menu2</a>
            <ul class="sub">
              <li><a href="#">menu2-1</a></li>
              <li><a href="#">menu2-2</a></li>
              <li><a href="#">menu2-3</a></li>
              <li><a href="#">menu2-4</a></li>
            </ul>
          </li>

          <li>
            <a href="#">menu3</a>
            <ul class="sub">
              <li><a href="#">menu3-1</a></li>
              <li><a href="#">menu3-2</a></li>
              <li><a href="#">menu3-3</a></li>
              <li><a href="#">menu3-4</a></li>
            </ul>
          </li>

          <li>
            <a href="#">menu4</a>
            <ul class="sub">
              <li><a href="#">menu4-1</a></li>
              <li><a href="#">menu4-2</a></li>
              <li><a href="#">menu4-3</a></li>
              <li><a href="#">menu4-4</a></li>
            </ul>
          </li>
        </ul>
      </div>
      <div id="visual">1234</div>
    </div>
    <script src="./public/js/index.js" type="text/javascript"></script>
  </body>
</html>

 

 

index.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

#wrap {
  width: 100%;
}

#header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
  position: absolute;
  min-height: 100px;
}

#header > h1 {
  width: 10%;
}

#header > #gnb {
  display: flex;
  width: 80%;
  padding: 20px 0;
  justify-content: space-evenly;
}

#header > #gnb::after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  top: 60px;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.05);
  display: none;
}

#header > #gnb.on::after {
  display: block;
}

#header > #gnb > li > .sub {
  position: relative;
  padding: 20px 0 0 0;
  display: none;
  z-index: 3;
}

#header > #gnb.on > li > .sub {
  display: block;
}

#header > #gnb > li > .sub > li + li {
  padding: 20px 0 0 0;
}

#visual {
  padding: 100px 0 0 0;
}

 

 

index.js

// class를 설정할 Element
// mouseOver를 설정할 Element

const gnbElement = document.querySelector("#gnb");
const gnbs = document.querySelectorAll("#gnb > li");
const header = document.querySelector("#header");

for (let i = 0; i < gnbs.length; i++) {
  gnbs[i].addEventListener("mouseover", function () {
    gnbElement.classList.add("on"); // 마치 setter와 동일함!!
  });
}

header.addEventListener("mouseout", function (e) {
  if (e.target.id === "gnb") {
    gnbElement.classList.remove("on");
  }
});

 

 

 

 

1-2) 이미지 슬라이드(미완성)

 

slide.html

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <link rel="stylesheet" href="./public/css/slide.css" />
  </head>
  <body>
    <div id="visual">
      <ul id="slide" class="on1">
        <li>
          <img
            src="http://www.kiweb.or.kr/nBoard/upload/file/main/1663647850_20800_1.jpg"
            alt="img1"
          />
        </li>
        <li>
          <img
            src="http://www.kiweb.or.kr/nBoard/upload/file/main/1661838462_26399_1.png"
            alt="img2"
          />
        </li>
        <li>
          <img
            src="http://www.kiweb.or.kr/nBoard/upload/file/main/1666596927_56073_1.jpg"
            alt="img3"
          />
        </li>
      </ul>
    </div>

    <script src="./public/js/slide.js" type="text/javascript"></script>
  </body>
</html>

 

 

slide.css

* {
  margin: 0;
  padding: 0;
}

ul,
li {
  list-style: none;
}

a {
  text-decoration: none;
}

#wrap {
  width: 100%;
}

#header {
  display: flex;
  width: 100%;
  justify-content: space-between;
  text-align: center;
  position: absolute;
  min-height: 100px;
}

#header > h1 {
  width: 10%;
}

#header > #gnb {
  display: flex;
  width: 80%;
  padding: 20px 0;
  justify-content: space-evenly;
}

#header > #gnb::after {
  content: "";
  width: 100%;
  height: 200px;
  position: absolute;
  top: 60px;
  background: #fff;
  border-bottom: 1px solid #e1e1e1;
  box-shadow: 0px 10px 10px 0px rgba(50, 50, 50, 0.05);
  display: none;
}

#header > #gnb.on::after {
  display: block;
}

#header > #gnb > li > .sub {
  position: relative;
  padding: 20px 0 0 0;
  display: none;
  z-index: 3;
}

#header > #gnb.on > li > .sub {
  display: block;
}

#header > #gnb > li > .sub > li + li {
  padding: 20px 0 0 0;
}

#visual {
  position: relative;
  width: 1900px;
  height: 500px;
  margin: 0 auto;
  /* overflow: hidden; */
}

#visual > #slide {
  position: absolute;
  display: flex;
  transform: all 0.5s;
}

#visual > #slide.on1 {
  left: 0px;
}

#visual > #slide.on2 {
  left: -1920px;
}

#visual > #slide.on3 {
  left: -3840px;
}

 

 

 

 

1-3) 로또 번호 뽑기

// 로또번호 중복 없이 숫자 6개 뽑기 구현
let lotto = [];
let lottoArr = [];

for (let i = 0; i < 45; i++) {
  lottoArr.push(i + 1);
}

/*
let index = Math.floor(Math.random() * lottoArr.length); // 0 ~ 44

// 편의 상 콘솔 창에 바로 결과를 확인하다 보니 아래 코드 2줄(13 ~ 14줄)의 "console.log()" 생략함!!
index; // lottoArr[33]
lottoArr[index]; // result : 34
lotto.push(lottoArr[index]);
lottoArr.splice(index, 1);

index = Math.floor(Math.random() * lottoArr.length); // 0 ~ 43

lotto.push(lottoArr[index]);
lottoArr.splice(index, 1);

console.log(lottoArr);
console.log(lotto);
*/

for (let i = 0; i < 6; i++) {
  let index = Math.floor(Math.random() * lottoArr.length);
  lotto.push(lottoArr[index]);
  lottoArr.splice(index, 1);
}

console.log(lottoArr);
console.log(lotto);

// javascript 배열 정렬 >> Array.prototype.sort() => 메서드를 어떤 식으로 동작하는지도 모른채 그냥 따다 쓰는 것은 좋지 않음!!

// javascript 정렬 알고리즘 >> 버블정렬, 삽입정렬 => 이런 식으로 여러 종류의 정렬 방식을 접하여 그 원리를 이해히여 구현하는 것이 처음 코딩 시 좋음!!


// 버블정렬 구현
const sortArr = [5, 3, 1, 6, 8, 7, 2, 4];
/*
0 1
1 2
2 3
3 4
4 5
5 6
6 7
*/

// 저희가 반복해야 할 것은 7번이다!!
// console.log(sortArr); // 배열 출력 비교/확인용
/*
for (let i = 0; i < sortArr.length - 1; i++) {
  // console.log(i, i + 1);
  console.log(sortArr[i], sortArr[i + 1]);
}
*/

for (let i = 0; i < sortArr.length - 1; i++) {
  let temp;
  for (let j = 0; j < sortArr.length - 1 - i; j++) {
    // j가 하는 역할, j + 1이 하는 역할
    // j는 5, j + 1은 3
    // 5 [1]
    // 3 [0]
    if (sortArr[j] > sortArr[j + 1]) {
      temp = sortArr[j];
      sortArr[j] = sortArr[j + 1]; // [3, 3, 1, 6, 8, 7, 2, 4]
      sortArr[j + 1] = temp; // [3, 5, 1, 6, 8, 7, 2, 4]
    }
  }
  console.log(i, sortArr);
}
console.log(sortArr);

// 버블정렬의 단점: 반복문 중간에 정렬이 전부 완료되어도 반복이 완료될 때까지 계속 해당 반복문을 수행함!!(비효율적)


/*
// [5, 3, 4] => [3, 5, 4]로 정렬하는 코드
const arr2 = [5, 3, 4];

let temp = arr2[0]; // temp : 5
arr2[0] = arr2[1]; // [3, 3, 4]
arr2[1] = temp; // [3, 5, 4]

console.log(arr2);
*/


/*
// 이중 for문을 활용한 구구단 구현
for (let i = 2; i <= 9; i++) {
  for (let j = 1; j <= 9; j++) {
    console.log(i + " * " + j + " = " + i * j);
  }
  console.log("======");
}

// 이중 for문을 활용한 구구단 구현(단수가 높아질수록 점차 하나씩 숫자를 제거하는 version)
for (let i = 2; i <= 9; i++) {
  for (let j = 1; j <= 9 - (i - 2); j++) {
    console.log(i + " * " + j + " = " + i * j);
  }
  console.log("======");
}
*/

 

 

/*
무엇을 만들 때 순서 정의

코딩을 할 시 가장 많이 쓰이는 데이터 타입 : 'array', 'object'

1. array, object를 잘 다루려면 기본 상식이 필요한데 그것이 바로 '반복문'과 '조건문'이다!!

로또 만들기

1. 배열에다가 6개 숫자를 중복되지 않게 뽑기!!
   내가 랜덤으로 뽑은 숫자가 기존에 뽑았던 숫자와 같은 것이 있는지 체크하는 것이 어려웠음!
   내가 뽑은 숫자가 무조건 중복되지 않는 것이라면 쉽지 않을까하는 아이디어가 생각남!
*/

let lotto = [];
let lottoArr = [];
for (let i = 0; i < 45; i++) {
lottoArr.push(i + 1);
}

let index = Math.floor(Math.random() * lottoArr.length); // 0 ~ 44

index // ex) lottoArr[33]
lottoArr[index]; // ex) result : 34
lotto.push(lottoArr[index]);
lottoArr.splice(index, 1);

index = Math.floor(Math.random() * lottoArr.length); // 0 ~ 43

lotto.push(lottoArr[index]);
lottoArr.splice(index, 1);


// ex) [2, 1, 4, 5, 7, 8] >> 정렬하면 [1, 2, 4, 5, 7, 8]

// 로또 번호 생성 배열 만들기

// 배열에 있는 숫자 정렬 알고리즘(반복문)

 

 

lotto.html

<!DOCTYPE html>
<html lang="en">
  <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>Document</title>
    <style>
      #lotto > li {
        display: inline-block;
        font-size: 40px;
        width: 80px;
        height: 80px;
        border-radius: 40px;
        text-align: center;
        line-height: 80px;
        margin: 30px;
        box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.3);
      }

      #lotto.none {
        display: none;
      }

      /* 1 ~ 10 */
      #lotto > li.a {
        background: yellow;
      }
      /* 11 ~ 20 */
      #lotto > li.b {
        background: blue;
      }
      /* 21 ~ 30 */
      #lotto > li.c {
        background: red;
      }
      /* 31 ~ 40 */
      #lotto > li.d {
        background: gray;
      }
      /* 41 ~ 45 */
      #lotto > li.e {
        background: green;
      }
    </style>
  </head>
  <body>
    <h1>로또번호 생성기</h1>
    <ul id="lotto" class="none">
      <li class="Q"></li>
      <li class="Q"></li>
      <li class="Q"></li>
      <li class="Q"></li>
      <li class="Q"></li>
      <li class="Q"></li>
    </ul>
    <button id="btn">번호 생성</button>
    <button id="service">서비스 번호 get</button>
    <script src="./public/js/lotto.js" type="text/javascript"></script>
  </body>
</html>

 

 

lotto.js

const btn = document.querySelector("#btn");
const service = document.querySelector("#service");
const lottoDisplay = document.querySelector("#lotto");
const lottoBox = document.querySelectorAll("#lotto > li");

// 1 ~ 45까지의 로또 번호 생성(배열)
function lottoCreated() {
  let lottoNum = [];

  for (let i = 0; i < 45; i++) {
    lottoNum.push(i + 1);
  }
  return lottoNum;
}


// 중복 없이 랜덤으로 로또 번호 6개 뽑기(+ 필요 시 서비스 번호 뽑기)
function randomLotto(length = 6) {
  const lotto = [];
  const lottoNum = lottoCreated();

  for (let i = 0; i < length; i++) {
    let index = Math.floor(Math.random() * lottoNum.length);
    lotto.push(lottoNum[index]);
    lottoNum.splice(index, 1);
  }

  // 위에서 랜덤으로 뽑은 로또 번호를 버블 정렬(오름차순)하기
  function randomNumAsc(lotto) {
    let tempAsc;
    for (let i = 0; i < lotto.length; i++) {
      for (let j = i + 1; j < lotto.length; j++) {
        if (lotto[i] - lotto[j] > 0) {
          tempAsc = lotto[i];
          lotto[i] = lotto[j];
          lotto[j] = tempAsc;
        }
      }
    }
    return lotto;
  }
  return randomNumAsc(lotto);
}


/*
// 중복 없이 랜덤으로 로또 번호 6개 + 서비스 번호 뽑기(html 상에 직접 7번째 "li" element를 추가해서 서비스 번호 자리 추가/가리는 기능 구현한 코드 version)
function randomService() {
  const lotto = [];
  const lottoNum = lottoCreated();

  for (let i = 0; i < 7; i++) {
    let index = Math.floor(Math.random() * lottoNum.length);
    lotto.push(lottoNum[index]);
    lottoNum.splice(index, 1);
  }

  // 위에서 랜덤으로 뽑은 로또 번호를 버블 정렬(오름차순)하기
  function randomNumAsc(lotto) {
    let tempAsc;
    for (let i = 0; i < lotto.length; i++) {
      for (let j = i + 1; j < lotto.length; j++) {
        if (lotto[i] - lotto[j] > 0) {
          tempAsc = lotto[i];
          lotto[i] = lotto[j];
          lotto[j] = tempAsc;
        }
      }
    }
    return lotto;
  }
  return randomNumAsc(lotto);
}
*/


function between(num, min, max) {
  if (min <= num && num <= max) {
    return true;
  }
  return false;
}


// input 1 ~ 45
// 문제 1 ~ 10 = a, 11 ~ 20 = b, 21 ~ 30 = c ...
// output : a || b || c || d || e
function getClassName(num) {
  if (between(num, 41, 45)) {
    return "e";
  }
  if (between(num, 31, 40)) {
    return "d";
  }
  if (between(num, 21, 30)) {
    return "c";
  }
  if (between(num, 11, 20)) {
    return "b";
  }
  if (between(num, 1, 10)) {
    return "a";
  }
}


let num;
// 버튼 클릭 시 로또 번호 6개 뽑은 결과를 브라우저 화면 상에 보여주는 코드
function lottoHandler(e) {
  num = randomLotto();

  if (lottoDisplay.children.length === 7) {
    lottoDisplay.children[lottoDisplay.children.length - 1].remove();
  }

  for (let i = 0; i < 6; i++) {
    lottoBox[i].innerHTML = num[i];
    lottoBox[i].className = getClassName(num[i]);
  }

  lottoDisplay.classList.remove("none");
}
btn.addEventListener("click", lottoHandler);

// 버튼 클릭 시 로또 번호 6개와 서비스 번호 뽑은 결과를 브라우저 화면 상에 보여주는 코드
function serviceHandler(e) {
  const serviceElement = document.createElement("li");
  serviceElement.setAttribute("class", "");
  serviceElement.setAttribute("style", "display:block;");

  if (lottoDisplay.children.length === 7) {
    lottoDisplay.children[lottoDisplay.children.length - 1].remove();
  }

  num = randomLotto(7);
  for (let i = 0; i < num.length - 1; i++) {
    lottoBox[i].innerHTML = num[i];
    lottoBox[i].className = getClassName(num[i]);
  }

  lottoDisplay.appendChild(serviceElement);
  serviceElement.innerHTML = num[6];
  serviceElement.className = getClassName(num[6]);

  lottoDisplay.classList.remove("none");
}
service.addEventListener("click", serviceHandler);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

저작자표시

'DOM' 카테고리의 다른 글

DOM 기초(8) - 댓글 구현(CRUD)  (0) 2022.11.16
DOM 기초(7) - 숫자 증감기, 댓글(Create / Read) 구현  (0) 2022.11.15
DOM 기초(5) - 이미지 슬라이드, preview / next 버튼 구현  (0) 2022.11.11
DOM 기초(4) - setTimeout, setInterval, single thread, event loop  (0) 2022.11.10
DOM 기초(3) - DOMContentLoaded, Form 태그 이벤트, Element 생성  (0) 2022.11.09

'DOM' Related Articles

티스토리툴바