prgrms-web-devcourse · grighth12 · Sep 21, 2021 · Sep 21, 2021 · Sep 21, 2021 · Sep 21, 2021
diff --git a/.gitignore b/.gitignore
@@ -138,4 +138,5 @@ dist
 # and uncomment the following lines
 # .pnp.*
 
-# End of https://www.toptal.com/developers/gitignore/api/node,yarn
+# End of https://www.toptal.com/developers/gitignore/api/node,yarn
+.vscode/settings.json
diff --git a/index.html b/index.html
@@ -10,5 +10,9 @@
   <body>
     <div id="App"></div>
     <script src="/src/main.js" type="module"></script>
+    <script
+      src="https://kit.fontawesome.com/6478f529f2.js"
+      crossorigin="anonymous"
+    ></script>
   </body>
 </html>
diff --git a/src/App.js b/src/App.js
@@ -1,6 +1,10 @@
+import CarouselPage from './pages/CarouselPage.js'
 import ColorsPage from './pages/ColorsPage.js'
+import CounterPage from './pages/CounterPage.js'
+import DigitalClockPage from './pages/DigitalClockPage.js'
 import HexColorsGradientPage from './pages/HexColorsGradientPage.js'
 import HomePage from './pages/HomePage.js'
+import MessagePage from './pages/MessagePage.js'
 import RandomQuotePage from './pages/RandomQuotePage.js'
 
 import RouterUtils from './utils/router.js'
@@ -10,6 +14,10 @@ export default function App({ $target }) {
   const colorsPage = new ColorsPage({ $target })
   const hexColorsGradientPage = new HexColorsGradientPage({ $target })
   const randomQuotePage = new RandomQuotePage({ $target })
+  const messagePage = new MessagePage({ $target })
+  const counterPage = new CounterPage({ $target })
+  const carouselPage = new CarouselPage({ $target })
+  const digitalClockPage = new DigitalClockPage({ $target })
 
   this.route = () => {
     const { pathname } = location
@@ -23,6 +31,14 @@ export default function App({ $target }) {
       hexColorsGradientPage.render()
     } else if (pathname === '/random-quote') {
       randomQuotePage.render()
+    } else if (pathname === '/the-message') {
+      messagePage.render()
+    } else if (pathname === '/counter') {
+      counterPage.render()
+    } else if (pathname === '/image-carousel') {
+      carouselPage.render()
+    } else if (pathname === '/digital-clock') {
+      digitalClockPage.render()
     }
   }
 

diff --git a/src/components/GenerateButton.js → src/components/Button.js b/src/components/GenerateButton.js → src/components/Button.js
@@ -1,15 +1,15 @@
-export default function GenerateButton({
+export default function Button({
   $target,
   text = 'Click Me!',
   className,
-  onClickGenerate,
+  onClick,
 }) {
   const $button = document.createElement('button')
   $button.className = `GenerateButton ${className}`
-  $button.textContent = text
+  $button.innerHTML = text
   $target.appendChild($button)
 
   $button.addEventListener('click', () => {
-    onClickGenerate()
+    onClick()
   })
 }
diff --git a/src/components/CountNumber.js b/src/components/CountNumber.js
@@ -0,0 +1,19 @@
+export default function CountNumber({ $target, initialState }) {
+  const $number = document.createElement('div')
+  $number.className = 'Counter__number'
+
+  $target.appendChild($number)
+
+  this.state = initialState
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    this.render()
+  }
+
+  this.render = () => {
+    $number.textContent = this.state
+  }
+
+  this.render()
+}
diff --git a/src/components/ImageCarousel.js b/src/components/ImageCarousel.js
@@ -0,0 +1,53 @@
+import Button from './Button.js'
+
+export default function ImageCarousel({
+  $target,
+  initialState,
+  onClickNext,
+  onClickPrev,
+}) {
+  const $imageCarousel = document.createElement('div')
+  $imageCarousel.className = 'ImageCarousel'
+
+  this.state = initialState
+
+  $target.appendChild($imageCarousel)
+
+  const $image = document.createElement('img')
+  $image.className = 'ImageCarousel__image'
+
+  const $buttons = document.createElement('div')
+  $buttons.className = 'ImageCarousel__buttons'
+
+  new Button({
+    $target: $buttons,
+    text: '<i class="fas fa-chevron-left"></i>',
+    className: 'ImageCarousel__button',
+    onClick: onClickPrev,
+  })
+
+  new Button({
+    $target: $buttons,
+    text: '<i class="fas fa-chevron-right"></i>',
+    className: 'ImageCarousel__button',
+    onClick: onClickNext,
+  })
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    this.render()
+  }
+
+  this.render = () => {
+    $imageCarousel.innerHTML = ''
+
+    const { src, name } = this.state.image
+    $image.src = src
+    $image.alt = name
+
+    $imageCarousel.appendChild($image)
+    $imageCarousel.appendChild($buttons)
+  }
+
+  this.render()
+}
diff --git a/src/components/Indicators.js b/src/components/Indicators.js
@@ -0,0 +1,26 @@
+export default function Indicators({ $target, initialState, length }) {
+  const $indicators = document.createElement('div')
+  $indicators.className = 'Carousel__indicators'
+  $target.appendChild($indicators)
+
+  this.state = initialState
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    this.render()
+  }
+
+  this.render = () => {
+    const indicatorDots = Array.from(new Array(length), (_) => _)
+      .map(
+        (_, index) => `<div class="Carousel__indicator-dot 
+      ${
+        index === this.state.index ? 'Carousel__indicator-dot--selected' : ''
+      }"></div>`,
+      )
+      .join('')
+    $indicators.innerHTML = indicatorDots
+  }
+
+  this.render()
+}
diff --git a/src/components/MessageForm.js b/src/components/MessageForm.js
@@ -0,0 +1,28 @@
+export default function MessageForm({ $target, onSubmit }) {
+  const $form = document.createElement('form')
+
+  $target.appendChild($form)
+
+  this.render = () => {
+    $form.innerHTML = `
+      <div class="MessageForm__input-area">
+          <button class="MessageForm__icon-button" type="button">
+            <i class="far fa-envelope"></i>
+          </button>
+          <input class="MessageForm__input" type="text" />
+      </div>
+      <button class="MessageForm__submit">submit</button>
+    `
+  }
+
+  $form.addEventListener('submit', (e) => {
+    e.preventDefault()
+
+    const $input = $form.querySelector('.MessageForm__input')
+    onSubmit($input.value)
+
+    $input.value = ''
+  })
+
+  this.render()
+}
diff --git a/src/components/MessagePreveiw.js b/src/components/MessagePreveiw.js
@@ -0,0 +1,20 @@
+export default function MessagePreview({ $target, initialState }) {
+  const $preview = document.createElement('div')
+  $preview.className = 'MessageForm__preview'
+
+  $target.appendChild($preview)
+
+  this.state = initialState
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    this.render()
+  }
+
+  this.render = () => {
+    $preview.style.display = this.state ? 'block' : 'none'
+    $preview.textContent = this.state
+  }
+
+  this.render()
+}
diff --git a/src/pages/CarouselPage.js b/src/pages/CarouselPage.js
@@ -0,0 +1,100 @@
+import { appendIfPageNotExists } from '../utils/render.js'
+import ImageCarousel from '../components/ImageCarousel.js'
+import Indicators from '../components/Indicators.js'
+
+const images = [
+  {
+    name: 'Lam0',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam0.jpg',
+  },
+  {
+    name: 'Lam1',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam1.jpg',
+  },
+  {
+    name: 'Lam2',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam2.jpg',
+  },
+  {
+    name: 'Lam3',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam3.jpg',
+  },
+  {
+    name: 'Lam4',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam4.jpg',
+  },
+  {
+    name: 'Lam5',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam5.jpg',
+  },
+  {
+    name: 'Lam5',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam6.jpg',
+  },
+  {
+    name: 'Lam7',
+    src: 'https://iamcodefoxx.github.io/ImageCarousel/Lam7.jpg',
+  },
+]
+
+const IMAGES_LENGTH = images.length
+
+export default function CarouselPage({ $target }) {
+  const $page = document.createElement('div')
+  $page.className = 'CarouselPage'
+
+  this.state = {
+    index: 0,
+  }
+
+  const imageCarousel = new ImageCarousel({
+    $target: $page,
+    initialState: {
+      index: this.state.index,
+      image: images[this.state.index],
+    },
+    onClickNext: () => {
+      const index = (this.state.index + 1) % IMAGES_LENGTH
+
+      this.setState({
+        ...this.state,
+        index,
+      })
+    },
+    onClickPrev: () => {
+      const index =
+        this.state.index - 1 < 0 ? IMAGES_LENGTH - 1 : this.state.index - 1
+
+      this.setState({
+        ...this.state,
+        index,
+      })
+    },
+  })
+
+  const indicators = new Indicators({
+    $target: $page,
+    initialState: {
+      index: this.state.index,
+    },
+    length: IMAGES_LENGTH,
+  })
+
+  this.setState = (nextState) => {
+    this.state = nextState
+    const { index } = this.state
+
+    imageCarousel.setState({
+      index,
+      image: images[index],
+    })
+
+    indicators.setState({
+      index,
+    })
+  }
+
+  this.render = () => {
+    appendIfPageNotExists($target, $page)
+  }
+}
diff --git a/src/pages/ColorsPage.js b/src/pages/ColorsPage.js
@@ -1,4 +1,4 @@
-import RandomColorButton from '../components/GenerateButton.js'
+import RandomColorButton from '../components/Button.js'
 import { getRandomColor } from '../utils/colors.js'
 import { appendIfPageNotExists } from '../utils/render.js'
 
@@ -19,7 +19,7 @@ export default function ColorsPage({ $target }) {
     $target: $page,
     text: 'Click Me!',
     className: 'RandomColorButton',
-    onClickGenerate: () => {
+    onClick: () => {
       const color = getRandomColor()
 
       this.setState({ color })