패스트캠퍼스X야놀자 프론트엔드 개발 부트캠프_1차 과제

양재혁(Jaehyuk-Yang)·2023년 7월 30일

국비지원 국비지원취업 부트캠프 야놀자 부트캠프 과제 리뷰 패스트캠퍼스 프론트엔드개발자

야놀자 부트캠프 강의

목록 보기

9/20

자신이 원하는 사이트 레이아웃 클론

실제 사이트 주소

https://www.audi.co.kr/kr/web/ko.html

클론 코딩 사이트 주소

https://beamish-figolla-bd6d0c.netlify.app/

개발 기간

2023.07.24 ~ 2023.07.28

기술 스택

Enviroment & FrontEnd

Development & FrontEnd

화면 구조

Table Generator (Community)

상단 메뉴 버튼과 아우디 로고를 Header 부분에 구현하였습니다
기능 별로 나눠 Section 부분에 구현하였습니다
개인정보 처리 방침, 저작권 등 하단 Footer 부분에 구현하였습니다

주요 기능

차량 재고 검색	메뉴

스크롤 업	모델/모델 유형 별 차량 확인

주요 코드 리뷰

메뉴

let i=0;
let j=0;
const HeadMenuEls=document.querySelector('.HeadMenuBtn')
const NaviEl=document.getElementById('HeadNavi')
const HeadLogoEl=document.querySelector('.HeadLogoImg')
const SearchEl=document.querySelector('.material-symbols-outlined')
const HeadLines1=document.querySelector('.HeadLine1')
const HeadLines2=document.querySelector('.HeadLine2')
const HeadLines3=document.querySelector('.HeadLine3')
const HeadLines4=document.querySelector('.HeadLine4')
const SectionEls=document.querySelector('.SectionContainer')
const SectionModelEl=document.querySelector('.SectionModelList')
const SectionSearchEls=document.querySelector('.SectionSearchContainer')
const CarListEl=document.querySelector('.CarListModels')
const CarList=document.querySelector('.CarList')
const ADEl=document.querySelectorAll('.AD')
const ServiceEl=document.querySelector('.Service')
const SpaceEls=document.querySelectorAll('.Space')
const SnsEl=document.querySelector('.SNS')
const FooterEl=document.querySelector('.Footer')
const menuEl=document.querySelector('.Quickmenu')
const specific = document.querySelector('.specific_cartype')
HeadMenuEls.addEventListener('click', function(e) {
  i++;
  if(i%2!=0){
    NaviEl.style.display="block";
    HeadLogoEl.style.display='none';
    SearchEl.style.display='block';
    SectionEls.style.display='none';
    SectionSearchEls.style.display='none';
    SectionModelEl.style.display='none';
    CarListEl.style.display='none';
    CarList.style.display='none';
    CarTypeEl.style.display='none';
    ServiceEl.style.display='none';
    SnsEl.style.display='none';
    specific.style.display='none';
    ADEl.forEach(element => {
      element.style.display = 'none';
    });
    SpaceEls.forEach(element => {
      element.style.display='none';
    });
    FooterEl.style.display='none';
    menuEl.style.display='none';
    HeadLines1.style.animation='420ms ease 0s 1 normal forwards running disappear';
    HeadLines2.style.animation='240ms ease 180ms 1 normal forwards running leftX';
    HeadLines3.style.animation='240ms ease 180ms 1 normal forwards running rightX';
    HeadLines4.style.animation='420ms ease 0s 1 normal forwards running disappear';
  }
  else{
    NaviEl.style.display='none';
    HeadLogoEl.style.display='block';
    SearchEl.style.display='none';
    SectionEls.style.display='block';
    SectionSearchEls.style.display='flex';
    SectionModelEl.style.display='inline-block';
    CarListEl.style.display='flex';
    CarList.style.display='block';
    ServiceEl.style.display='block';
    SnsEl.style.display='block';
    specific.style.display='block';
    ADEl.forEach(element => {
      element.style.display = 'flex';
    });
    SpaceEls.forEach(element => {
      element.style.display='block';
    });
    FooterEl.style.display='block';
    menuEl.style.display='block';
    if(ModelTypeEl.getAttribute('aria-selected')=='true'){
      CarTypeEl.style.display='block';
    }
    HeadLines1.style.animation='420ms ease 0s 1 normal none running disappearback';
    HeadLines2.style.animation='240ms ease 0s 1 normal none running leftbackX';
    HeadLines3.style.animation='240ms ease 0s 1 normal none running rightbackX';
    HeadLines4.style.animation='420ms ease 0s 1 normal none running disappearback';
  }
});

@keyframes disappear {
  0% {
    opacity: 1;
}
50% {
    opacity: 0;
    transform: translateY(3px);
}
100% {
    opacity: 0;
    transform: translateY(3px);
}
}

@keyframes disappearback {
100% {
    opacity: 1;
    transform: translateY(0px);
}
50% {
    opacity: 0;
    transform: translateY(3px);
}
0% {
    opacity: 0;
    transform: translateY(3px);
}
}
@keyframes leftX {
0% {
    transform: rotate(0deg);
}

100% {
    transform: rotate(45deg);
}
}

@keyframes leftbackX {
  0% {
    transform: rotate(45deg);
  }

  50% {
    transform: rotate(0deg);
  }

  100%{
    transform: rotate(0deg);
  }
}
@keyframes rightX {
0% {
    transform: rotate(0deg);
}
100% {
    transform: rotate(-45deg);
}

}

@keyframes rightbackX {
  100% {
      transform: rotate(0deg);
  }

  50% {
    transform: rotate(0deg);
  }

  0% {
      transform: rotate(-45deg);
  }
  
  }

상단의 메뉴 버튼 클릭 시 하위 section들 및 header의 일부분을 display='none'속성으로 변경해주었습니다.
또한 메뉴 창에 들어가서 메뉴 버튼을 누르면 display='block' 및 display='flex'으로 변경하여 다시 보여지도록 구현하였습니다.
메뉴 버튼 클릭 시 지정된 애니메이션 대로 동작하도록 구현하였습니다.
하드코딩 느낌이 나서 아쉽지만 정상적으로 작동합니다.

스크롤 업

const UpEl = document.querySelector('.Up')

UpEl.addEventListener('click', function(e){
  window.scrollTo(0,0);
})

'위로' 버튼 클릭 시 window.scrollTo(0,0)을 부여하여 창 상단으로 이동하도록 구현하였습니다.

차량 재고 검색

let previousElement = null;
const Title=document.querySelector('.SectionCarsCategory')

subgrEls.forEach(element => {
  if(element.getAttribute('aria-selected')==='true'){
    previousElement=element;
    element.style.backgroundColor='gray';
  }
  else{
    element.style.backgroundColor='#d9d9d9';
  }
})
const newcar = document.querySelector('.SectionNumOfNewcars')
const oldcar = document.querySelector('.SectionNumOfOldcars')
subgrEls.forEach(element => {
  element.addEventListener('click', function(e) {
    if (previousElement !== null) {
      previousElement.style.backgroundColor = '#d9d9d9';
      previousElement.setAttribute('aria-selected',false);
      DownEl.style.transform='none';
      dropdownEl.style.display='none';
    }
    element.style.backgroundColor = '#b6b6b6';
    element.setAttribute('aria-selected',true);
    Title.innerHTML = element.querySelector('.sub').textContent;
    if(Title.innerHTML==="e-tron GT quattro"){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='RS e-tron GT'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='Audi e-tron'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '30';
    }
    else if(Title.innerHTML==='Audi e-tron Sportback'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '10';
    }
    else if(Title.innerHTML==='e-tron S'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='Audi e-tron S Sportback'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='A3'){
      newcar.innerHTML = '11';
      oldcar.innerHTML = '11';
    }
    else if(Title.innerHTML==='S3'){
      newcar.innerHTML = '5';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='RS 3'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='A4'){
      newcar.innerHTML = '24';
      oldcar.innerHTML = '35';
    }
    else if(Title.innerHTML==='S4'){
      newcar.innerHTML = '4';
      oldcar.innerHTML = '6';
    }
    else if(Title.innerHTML==='A5 Coupe'){
      newcar.innerHTML = '5';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='A5 Sportback'){
      newcar.innerHTML = '20';
      oldcar.innerHTML = '15';
    }
    else if(Title.innerHTML==='A5 Cabriolet'){
      newcar.innerHTML = '14';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='S5 Coupe'){
      newcar.innerHTML = '4';
      oldcar.innerHTML = '1';
    }
    else if(Title.innerHTML==='S5 Sportback'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='RS 5 Sportback'){
      newcar.innerHTML = '4';
      oldcar.innerHTML = '2';
    }
    else if(Title.innerHTML==='A6'){
      newcar.innerHTML = '41';
      oldcar.innerHTML = '22';
    }
    else if(Title.innerHTML==='S6'){
      newcar.innerHTML = '6';
      oldcar.innerHTML = '8';
    }
    else if(Title.innerHTML==='RS 6'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='A7 Sportback'){
      newcar.innerHTML = '17';
      oldcar.innerHTML = '9';
    }
    else if(Title.innerHTML==='A7 Sportback TFSI e'){
      newcar.innerHTML = '6';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='S7'){
      newcar.innerHTML = '3';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='RS7 Sportback'){
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='A8 L'){
      newcar.innerHTML = '17';
      oldcar.innerHTML = '8';
    }
    else if(Title.innerHTML==='S8 L'){
      newcar.innerHTML = '6';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='A8'){
      newcar.innerHTML = '11';
      oldcar.innerHTML = '2';
    }
    else if(Title.innerHTML==='Q2'){
      newcar.innerHTML = '12';
      oldcar.innerHTML = '20';
    }
    else if(Title.innerHTML==='Q3'){
      newcar.innerHTML = '29';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='Q3 Sportback'){
      newcar.innerHTML = '17';
      oldcar.innerHTML = '4';
    }
    else if(Title.innerHTML==='Q4 e-tron'){
      newcar.innerHTML = '15';
      oldcar.innerHTML = '7';
    }
    else if(Title.innerHTML==='Q4 Sportback e-tron'){
      newcar.innerHTML = '15';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='Q5'){
      newcar.innerHTML = '24';
      oldcar.innerHTML = '3';
    }
    else if(Title.innerHTML==='SQ5'){
      newcar.innerHTML = '5';
      oldcar.innerHTML = '3';
    }
    else if(Title.innerHTML==='Q5 Sportback'){
      newcar.innerHTML = '22';
      oldcar.innerHTML = '3';
    }
    else if(Title.innerHTML==='SQ5 Sportback'){
      newcar.innerHTML = '5';
      oldcar.innerHTML = '0';
    }
    else if(Title.innerHTML==='Q7'){
      newcar.innerHTML = '21';
      oldcar.innerHTML = '5';
    }
    else if(Title.innerHTML==='Q8'){
      newcar.innerHTML = '21';
      oldcar.innerHTML = '4';
    }
    else{
      newcar.innerHTML = '0';
      oldcar.innerHTML = '0';
    }
    previousElement = element;
    DownEl.style.transform='none';
    dropdownEl.style.display='none';
    DownEl.click();
  });
});

먼저 'aria-selected'가 true면 previousElement값을 현재의 값으로 할당하고 배경색을 회색으로 변경하였습니다.
false에 해당하는 것들은 전부 밝은 회색으로 지정하여 선택된 차량만 메뉴 내 배경색을 회색으로 구현하였습니다.
따라서 previousElement값이 지정된 경우 그에 해당하는 텍스트값이 보여지도록

 Title.innerHTML = element.querySelector('.sub').textContent;

구현하였고, 텍스트 값에 따라 차량 재고 수를 하드 코딩 방식을 통해 나타내지도록 구현하였습니다.

모델/모델 유형 별 차량 검색

const carimg = document.querySelectorAll('.CarImg')
const xbtn = document.querySelector('.xbtn')
const first = document.querySelector('.first')
const second = document.querySelector('.second')
const third1 = document.querySelector('.third1')
const fourth1 = document.querySelector('.fourth1')
const third2 = document.querySelector('.third2')
const fourth2 = document.querySelector('.fourth2')
const third3 = document.querySelector('.third3')
const fourth3 = document.querySelector('.fourth3')
const third4 = document.querySelector('.third4')
const fourth4 = document.querySelector('.fourth4')
const third5 = document.querySelector('.third5')
const fourth5 = document.querySelector('.fourth5')
const third6 = document.querySelector('.third6')
const fourth6 = document.querySelector('.fourth6')
const third7 = document.querySelector('.third7')
const fourth7 = document.querySelector('.fourth7')
const third8 = document.querySelector('.third8')
const fourth8 = document.querySelector('.fourth8')
const third9 = document.querySelector('.third9')
const fourth9 = document.querySelector('.fourth9')
const third10 = document.querySelector('.third10')
const fourth10 = document.querySelector('.fourth10')
const third11 = document.querySelector('.third11')
const fourth11 = document.querySelector('.fourth11')
const third12 = document.querySelector('.third12')
const fourth12 = document.querySelector('.fourth12')
const third13 = document.querySelector('.third13')
const fourth13 = document.querySelector('.fourth13')
const third14 = document.querySelector('.third14')
const fourth14 = document.querySelector('.fourth14')
const third15 = document.querySelector('.third15')
const fourth15 = document.querySelector('.fourth15')


function stripSpaces(text) {
  const verticalRegex = /[\r\n\t\v\f ]/g;
  const noVerticalSpaces = text.replace(verticalRegex, "");

  const horizontalRegex = /[ \t]/g;
  const noHorizontalSpaces = noVerticalSpaces.replace(horizontalRegex, "");

  return noHorizontalSpaces;
}

xbtn.addEventListener('click',function(e){
  specific.style.display='none';
})
const listEl=document.querySelector('.list')
carimg.forEach(element => {
    element.addEventListener('click', function(e){
    specific.style.display='block';
    first.innerHTML = element.textContent;
    if (stripSpaces(first.innerHTML)=='Audie-tronGT'){
        third1.setAttribute('src','./image/e1.png')
        fourth1.innerHTML = 'e-tron GT quattro'
        third2.setAttribute('src','./image/e2.png')
        fourth2.innerHTML = 'RS e-tron GT'
        third3.setAttribute('src','')
        fourth3.innerHTML = ''
        third4.setAttribute('src','')
        fourth4.innerHTML = ''
        third5.setAttribute('src','')
        fourth5.innerHTML = ''
        third6.setAttribute('src','')
        fourth6.innerHTML = ''
        third7.setAttribute('src','')
        fourth7.innerHTML = ''
        third8.setAttribute('src','')
        fourth8.innerHTML = ''
        third9.setAttribute('src','')
        fourth9.innerHTML = ''
        third10.setAttribute('src','')
        fourth10.innerHTML = ''
        third11.setAttribute('src','')
        fourth11.innerHTML = ''
        third12.setAttribute('src','')
        fourth12.innerHTML = ''
        third13.setAttribute('src','')
        fourth13.innerHTML = ''
        third14.setAttribute('src','')
        fourth14.innerHTML = ''
        third15.setAttribute('src','')
        fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='Audie-tron'){
      third1.setAttribute('src','./image/etron_1.png')
      fourth1.innerHTML = 'e-tron'
      third2.setAttribute('src','./image/e_tron2.png')
      fourth2.innerHTML = 'e-tron Sportback'
      third3.setAttribute('src','./image/e_tron3.png')
      fourth3.innerHTML = 'e-tron S'
      third4.setAttribute('src','./image/e_tron4.png')
      fourth4.innerHTML = 'e-tron S Sportback'
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiA3'){
      third1.setAttribute('src','./image/a31.png')
      fourth1.innerHTML = 'A3'
      third2.setAttribute('src','./image/s32.png')
      fourth2.innerHTML = 'S3'
      third3.setAttribute('src','./image/rs33.png')
      fourth3.innerHTML = 'RS 3'
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiA4'){
      third1.setAttribute('src','./image/A41.png')
      fourth1.innerHTML = 'A4'
      third2.setAttribute('src','./image/S42.png')
      fourth2.innerHTML = 'S4'
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiA5'){
      third1.setAttribute('src','./image/a51.png')
      fourth1.innerHTML = 'A5 Coupe'
      third2.setAttribute('src','./image/a52.png')
      fourth2.innerHTML = 'A5 Sportback'
      third3.setAttribute('src','./image/a53.png')
      fourth3.innerHTML = 'A5 Cabriolet'
      third4.setAttribute('src','./image/a54.png')
      fourth4.innerHTML = 'S5 Coupe'
      third5.setAttribute('src','./image/a55.png')
      fourth5.innerHTML = 'S5 Sportback'
      third6.setAttribute('src','./image/a56.png')
      fourth6.innerHTML = 'RS 5 Sportback'
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiA6'){
      third1.setAttribute('src','./image/a61.png')
      fourth1.innerHTML = 'A6'
      third2.setAttribute('src','./image/s62.png')
      fourth2.innerHTML = 'S6'
      third3.setAttribute('src','./image/rs63.png')
      fourth3.innerHTML = 'RS 6'
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiA7'){
      third1.setAttribute('src','./image/a71.png')
      fourth1.innerHTML = 'A7 Sportback'
      third2.setAttribute('src','./image/a72.png')
      fourth2.innerHTML = 'A7 Sportback TFSI e'
      third3.setAttribute('src','./image/a73.png')
      fourth3.innerHTML = 'S7'
      third4.setAttribute('src','./image/a7.png')
      fourth4.innerHTML = 'RS 7 Sportback'
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiA8'){
      third1.setAttribute('src','./image/a81.png')
      fourth1.innerHTML = 'A68 L'
      third2.setAttribute('src','./image/a82.png')
      fourth2.innerHTML = 'S8 L'
      third3.setAttribute('src','./image/a83.png')
      fourth3.innerHTML = 'A8'
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiQ2'){
      third1.setAttribute('src','./image/q21.png')
      fourth1.innerHTML = 'Q2'
      third2.setAttribute('src','')
      fourth2.innerHTML = ''
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiQ3'){
      third1.setAttribute('src','./image/q31.png')
      fourth1.innerHTML = 'Q3'
      third2.setAttribute('src','./image/q32.png')
      fourth2.innerHTML = 'Q3 Sportback'
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiQ4'){
      third1.setAttribute('src','./image/q41.png')
      fourth1.innerHTML = 'Q4 e-tron'
      third2.setAttribute('src','./image/q42.png')
      fourth2.innerHTML = 'Q4 Sportback e-tron'
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiQ5'){
      third1.setAttribute('src','./image/q51.png')
      fourth1.innerHTML = 'Q5'
      third2.setAttribute('src','./image/q52.png')
      fourth2.innerHTML = 'SQ5'
      third3.setAttribute('src','./image/q53.png')
      fourth3.innerHTML = 'Q5 Sportback'
      third4.setAttribute('src','./image/q54.png')
      fourth4.innerHTML = 'SQ5 Sportback'
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiQ7'){
      third1.setAttribute('src','./image/q71.png')
      fourth1.innerHTML = 'Q7'
      third2.setAttribute('src','')
      fourth2.innerHTML = ''
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='AudiQ8'){
      third1.setAttribute('src','./image/q81.png')
      fourth1.innerHTML = 'Q8'
      third2.setAttribute('src','./image/q82.png')
      fourth2.innerHTML = 'RS Q8'
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='스포트백'){
      third1.setAttribute('src','./image/S1.png')
      fourth1.innerHTML = 'e-tron GT quattro'
      third2.setAttribute('src','./image/S2.png')
      fourth2.innerHTML = 'RS e-tron GT'
      third3.setAttribute('src','./image/S3.png')
      fourth3.innerHTML = 'e-tron Sportback'
      third4.setAttribute('src','./image/S4.png')
      fourth4.innerHTML = 'e-tron S Sportback'
      third5.setAttribute('src','./image/S5.png')
      fourth5.innerHTML = 'A5 Sportback'
      third6.setAttribute('src','./image/S6.png')
      fourth6.innerHTML = 'S5 Sportback'
      third7.setAttribute('src','./image/S7.png')
      fourth7.innerHTML = 'RS 5 Sportback'
      third8.setAttribute('src','./image/S8.png')
      fourth8.innerHTML = 'A7 Sportback'
      third9.setAttribute('src','./image/S9.png')
      fourth9.innerHTML = 'A7 Sportback TFSI e'
      third10.setAttribute('src','./image/S10.png')
      fourth10.innerHTML = 'S7'
      third11.setAttribute('src','./image/S11.png')
      fourth11.innerHTML = 'RS 7 Sportback'
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='SUV'){
      third1.setAttribute('src','./image/suv1.png')
      fourth1.innerHTML = 'e-tron'
      third2.setAttribute('src','./image/suv2.png')
      fourth2.innerHTML = 'e-tron S'
      third3.setAttribute('src','./image/suv3.png')
      fourth3.innerHTML = 'RS 6'
      third4.setAttribute('src','./image/suv4.png')
      fourth4.innerHTML = 'Q2'
      third5.setAttribute('src','./image/suv5.png')
      fourth5.innerHTML = 'Q3'
      third6.setAttribute('src','./image/suv6.png')
      fourth6.innerHTML = 'Q3 Sportback'
      third7.setAttribute('src','./image/suv7.png')
      fourth7.innerHTML = 'Q4 e-tron'
      third8.setAttribute('src','./image/suv8.png')
      fourth8.innerHTML = 'Q4 Sportback e-tron'
      third9.setAttribute('src','./image/suv9.png')
      fourth9.innerHTML = 'Q5'
      third10.setAttribute('src','./image/suv10.png')
      fourth10.innerHTML = 'SQ5'
      third11.setAttribute('src','./image/suv11.png')
      fourth11.innerHTML = 'Q5 Sportback'
      third12.setAttribute('src','./image/suv12.png')
      fourth12.innerHTML = 'SQ5 Sportback'
      third13.setAttribute('src','./image/suv13.png')
      fourth13.innerHTML = 'Q7'
      third14.setAttribute('src','./image/suv14.png')
      fourth14.innerHTML = 'Q8'
      third15.setAttribute('src','./image/suv16.png')
      fourth15.innerHTML = 'RS Q8'
    }
    else if(stripSpaces(first.innerHTML)==='세단'){
      third1.setAttribute('src','./image/sedan1.png')
      fourth1.innerHTML = 'A3'
      third2.setAttribute('src','./image/sedan2.png')
      fourth2.innerHTML = 'S3'
      third3.setAttribute('src','./image/sedan3.png')
      fourth3.innerHTML = 'RS 3'
      third4.setAttribute('src','./image/sedan4.png')
      fourth4.innerHTML = 'A4'
      third5.setAttribute('src','./image/sedan5.png')
      fourth5.innerHTML = 'S4'
      third6.setAttribute('src','./image/sedan6.png')
      fourth6.innerHTML = 'A6'
      third7.setAttribute('src','./image/sedan7.png')
      fourth7.innerHTML = 'S6'
      third8.setAttribute('src','./image/sedan8.png')
      fourth8.innerHTML = 'A8 L'
      third9.setAttribute('src','./image/sedan9.png')
      fourth9.innerHTML = 'S8 L'
      third10.setAttribute('src','./image/sedan10.png')
      fourth10.innerHTML = 'A8'
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='쿠페'){
      third1.setAttribute('src','./image/coupe1.png')
      fourth1.innerHTML = 'A5 Coupe'
      third2.setAttribute('src','./image/coupe2.png')
      fourth2.innerHTML = 'S5 Coupe'
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
    else if(stripSpaces(first.innerHTML)==='카브리올레'){
      third1.setAttribute('src','./image/Cabriolet1.png')
      fourth1.innerHTML = 'A5 Cabriolet'
      third2.setAttribute('src','')
      fourth2.innerHTML = ''
      third3.setAttribute('src','')
      fourth3.innerHTML = ''
      third4.setAttribute('src','')
      fourth4.innerHTML = ''
      third5.setAttribute('src','')
      fourth5.innerHTML = ''
      third6.setAttribute('src','')
      fourth6.innerHTML = ''
      third7.setAttribute('src','')
      fourth7.innerHTML = ''
      third8.setAttribute('src','')
      fourth8.innerHTML = ''
      third9.setAttribute('src','')
      fourth9.innerHTML = ''
      third10.setAttribute('src','')
      fourth10.innerHTML = ''
      third11.setAttribute('src','')
      fourth11.innerHTML = ''
      third12.setAttribute('src','')
      fourth12.innerHTML = ''
      third13.setAttribute('src','')
      fourth13.innerHTML = ''
      third14.setAttribute('src','')
      fourth14.innerHTML = ''
      third15.setAttribute('src','')
      fourth15.innerHTML = ''
    }
  })
});

stripSpaces 함수 내 정규식을 이용해 모델 이름을 빈칸 없이 붙여지도록 구현하였습니다.
이는, 차후에 모델 명을 통해 차량 이미지를 설정해주기 위함입니다.
X버튼 클릭 시 모델 별 차량 화면을 닫도록 구현하였습니다.
모델 이미지 클릭 시 stripSpaces 함수를 이용하여 모델 명과 클릭한 모델 이미지가 동일하다면 해당하는 모델 내 차량 이미지와 차량 제목을 부여하였습니다.
하드 코딩 방식을 사용하였습니다.

회고

혼자 html css javascript를 사용하여 클론 코딩을 처음으로 한 것이기 때문에 모든 기능을 완성하기 위해 노력하였습니다. 결론적으로 모든 기능이 에러없이 잘 수행되지만, 하드 코딩 방식을 주로 활용하여 비효율적인 면이 있습니다. 차후에 더 학습하고 난 뒤 refactoring 작업을 진행할 계획입니다.