diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..3817b1b --- /dev/null +++ b/.prettierrc @@ -0,0 +1,10 @@ +{ + "singleQuote": true, + "semi": true, + "useTabs": true, + "tabWidth": 2, + "trailingComma": "all", + "printWidth": 80, + "bracketSpacing": true, + "arrowParens": "avoid" +} diff --git a/01/colors/data/constant.js b/01/colors/data/constant.js new file mode 100644 index 0000000..ab68595 --- /dev/null +++ b/01/colors/data/constant.js @@ -0,0 +1,13 @@ +const COLOR_CHIP = [ + "#e74c3c", + "#f1c40f", + "#2ecc71", + "#1abc9c", + "#00a8ff", + "#5352ed", + "#34495e", + "#9b59b6", + "#7f8c8d", +]; + +export { COLOR_CHIP }; diff --git a/01/colors/index.html b/01/colors/index.html new file mode 100644 index 0000000..0f15527 --- /dev/null +++ b/01/colors/index.html @@ -0,0 +1,16 @@ + + + + + + + + Colors + + +
+
Click Me!
+
+ + + diff --git a/01/colors/src/css/style.css b/01/colors/src/css/style.css new file mode 100644 index 0000000..b733f4b --- /dev/null +++ b/01/colors/src/css/style.css @@ -0,0 +1,28 @@ +body { + margin: 0; + overflow: hidden; + font-size: 17px; + color: #333; +} +.container { + display: flex; + justify-content: center; + align-items: center; + width: 100vw; + height: 100vh; +} + +.click-btn { + cursor: pointer; + padding: 8px 12px; + user-select: none; + border-radius: 4px; + border: 1px solid #333; +} +.click-btn:hover { + color: #fff; + background-color: #333; +} +.click-btn-focus { + box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%); +} diff --git a/01/colors/src/js/index.js b/01/colors/src/js/index.js new file mode 100644 index 0000000..2b3c84f --- /dev/null +++ b/01/colors/src/js/index.js @@ -0,0 +1,16 @@ +import { COLOR_CHIP } from "../../data/constant.js"; + +const $container = document.querySelector(".container"); +const $clickBtn = document.querySelector(".click-btn"); + +window.addEventListener("click", (e) => { + const isClickBtn = e.target.classList.contains("click-btn"); + const randomNum = Math.ceil(Math.random() * 8); + + if (isClickBtn) { + $clickBtn.classList.add("click-btn-focus"); + $container.style.backgroundColor = COLOR_CHIP[randomNum]; + } else { + $clickBtn.classList.remove("click-btn-focus"); + } +}); diff --git a/01/hex-colors/index.html b/01/hex-colors/index.html new file mode 100644 index 0000000..18bc499 --- /dev/null +++ b/01/hex-colors/index.html @@ -0,0 +1,33 @@ + + + + + + + + Hex Colors + + +
+
+
+ CLICK THE BUTTON BELLOW TO GENERATE A RANDOM GRADIENT +
+
HEX COLOR COMBINATION
+
+
+
+ background: linear-gradient(to right, + #52838b , + #17725d); +
+
+
+
+ +
+
+
+ + + diff --git a/01/hex-colors/src/css/style.css b/01/hex-colors/src/css/style.css new file mode 100644 index 0000000..458a7d9 --- /dev/null +++ b/01/hex-colors/src/css/style.css @@ -0,0 +1,61 @@ +body { + margin: 0; + overflow: hidden; + font-size: 10px; +} +.container { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + width: 100vw; + height: 100vh; + font-size: 2.3rem; +} +.row { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} +.row:nth-child(2) { + margin: 10rem 0 0 0; +} +.title { + color: #333; + text-transform: uppercase; + animation: colorchange 5s infinite alternate; +} +.click-btn { + padding: 10px 15px; + border: none; + border-radius: 5px; + background-color: #f8f9fa; + font-size: 20px; +} + +@keyframes colorchange { + 0% { + color: #ffffff; + } + + 20% { + color: #cccccc; + } + + 40% { + color: #999999; + } + + 60% { + color: #666666; + } + + 80% { + color: #333333; + } + + 100% { + color: #000000; + } +} diff --git a/01/hex-colors/src/data/constant.js b/01/hex-colors/src/data/constant.js new file mode 100644 index 0000000..3ee95bc --- /dev/null +++ b/01/hex-colors/src/data/constant.js @@ -0,0 +1,20 @@ +const COLOR_CODE = [ + "0", + "1", + "2", + "3", + "4", + "5", + "6", + "7", + "8", + "9", + "A", + "B", + "C", + "D", + "E", + "F", +]; + +export { COLOR_CODE }; diff --git a/01/hex-colors/src/js/index.js b/01/hex-colors/src/js/index.js new file mode 100644 index 0000000..b2ec430 --- /dev/null +++ b/01/hex-colors/src/js/index.js @@ -0,0 +1,24 @@ +import { COLOR_CODE } from "../data/constant.js"; + +const $btn = document.querySelector(".click-btn"); +const $colorFrom = document.querySelector(".colorFrom"); +const $colorTo = document.querySelector(".colorTo"); + +$btn.addEventListener("click", () => { + let random_index = 0; + + let colorFrom = ""; + let colorTo = ""; + + for (let i = 0; i < 6; i++) { + random_index = Math.floor(Math.random() * COLOR_CODE.length); + colorFrom += COLOR_CODE[random_index]; + + random_index = Math.floor(Math.random() * COLOR_CODE.length); + colorTo += COLOR_CODE[random_index]; + } + + document.body.style.background = `linear-gradient(to right, #${colorFrom}, #${colorTo})`; + $colorFrom.textContent = colorFrom; + $colorTo.textContent = colorTo; +}); diff --git a/01/quote/index.html b/01/quote/index.html new file mode 100644 index 0000000..0442161 --- /dev/null +++ b/01/quote/index.html @@ -0,0 +1,20 @@ + + + + + + + + Quote Generator + + +
+
+
+
+
+ +
+ + + diff --git a/01/quote/src/api/api.js b/01/quote/src/api/api.js new file mode 100644 index 0000000..967b5dd --- /dev/null +++ b/01/quote/src/api/api.js @@ -0,0 +1,13 @@ +export const getQuote = async () => { + try { + const res = await fetch(`https://free-quotes-api.herokuapp.com/`); + + if (!res.ok) { + throw new Error("API Call Fail"); + } + + return await res.json(); + } catch (e) { + alert(e.message); + } +}; diff --git a/01/quote/src/css/style.css b/01/quote/src/css/style.css new file mode 100644 index 0000000..453b985 --- /dev/null +++ b/01/quote/src/css/style.css @@ -0,0 +1,47 @@ +body { + background: radial-gradient(ellipse at center, #06bdc1, #68469f); + height: 100vh; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + width: 100vw; + height: 100vh; +} +.box { + display: flex; + flex-direction: column; + justify-content: center; + align-self: center; + width: 65vw; + height: 18vh; + padding: 12vh 0; + font-size: 25px; + text-align: center; + background-color: #f4edea; + border: 10px solid #06bdc1; + border-radius: 10px; + box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 90%); +} +.author { + margin-top: 3vh; +} +.click-btn { + align-self: center; + margin-top: 20px; + padding: 10px; + font-size: 15px; + color: #fff; + border: none; + border-radius: 4px; + background-color: #17a2b8; + cursor: pointer; +} +.click-btn:focus { + color: #fff; + background-color: #138496; + border-color: #117a8b; + box-shadow: 0 0 0 0.2rem rgb(58 176 195 / 50%); +} diff --git a/01/quote/src/js/index.js b/01/quote/src/js/index.js new file mode 100644 index 0000000..8e75cc0 --- /dev/null +++ b/01/quote/src/js/index.js @@ -0,0 +1,15 @@ +import { getQuote } from "../api/api.js"; + +const $clickBtn = document.querySelector(".click-btn"); +const $quote = document.querySelector(".quote"); +const $author = document.querySelector(".author"); + +async function fetchQuote() { + const res = await getQuote(); + const { quote, author } = res; + + $quote.textContent = `"${quote}"`; + $author.textContent = `- ${author} -`; +} + +$clickBtn.addEventListener("click", (e) => fetchQuote()); diff --git a/02/carousel/index.html b/02/carousel/index.html new file mode 100644 index 0000000..4267bc0 --- /dev/null +++ b/02/carousel/index.html @@ -0,0 +1,30 @@ + + + + + + + + + + Image Carousel + + +
+
+
+
+ +
+
+ +
+
+
+
+
+
+
+ + + diff --git a/02/carousel/src/assets/css/fontello.css b/02/carousel/src/assets/css/fontello.css new file mode 100644 index 0000000..675827d --- /dev/null +++ b/02/carousel/src/assets/css/fontello.css @@ -0,0 +1,99 @@ +@font-face { + font-family: 'fontello'; + src: url('../font/fontello.eot?56978158'); + src: url('../font/fontello.eot?56978158#iefix') format('embedded-opentype'), + url('../font/fontello.woff2?56978158') format('woff2'), + url('../font/fontello.woff?56978158') format('woff'), + url('../font/fontello.ttf?56978158') format('truetype'), + url('../font/fontello.svg?56978158#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'fontello'; + src: url('../font/fontello.svg?56978158#fontello') format('svg'); + } +} +*/ +[class^='icon-']:before, +[class*=' icon-']:before { + font-family: 'fontello'; + font-style: normal; + font-weight: normal; + speak: never; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: 0.2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: 0.2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-play:before { + content: '\e800'; +} /* '' */ +.icon-down-dir:before { + content: '\e801'; +} /* '' */ +.icon-right-dir:before { + content: '\e802'; +} /* '' */ +.icon-trash-empty:before { + content: '\e803'; +} /* '' */ +.icon-resize-full:before { + content: '\e804'; +} /* '' */ +.icon-cancel:before { + content: '\e805'; +} /* '' */ +.icon-mail:before { + content: '\e806'; +} /* '' */ +.icon-mail-1:before { + content: '\e807'; +} /* '' */ +.icon-left-open:before { + content: '\e808'; +} /* '' */ +.icon-right-open:before { + content: '\e809'; +} /* '' */ +.icon-comment-empty:before { + content: '\f0e5'; +} /* '' */ +.icon-plus-squared-alt:before { + content: '\f196'; +} /* '' */ +.icon-clone:before { + content: '\f24d'; +} /* '' */ +.icon-commenting-o:before { + content: '\f27b'; +} /* '' */ diff --git a/02/carousel/src/assets/css/reset.css b/02/carousel/src/assets/css/reset.css new file mode 100644 index 0000000..2263296 --- /dev/null +++ b/02/carousel/src/assets/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/02/carousel/src/assets/css/style.css b/02/carousel/src/assets/css/style.css new file mode 100644 index 0000000..9f9bcd7 --- /dev/null +++ b/02/carousel/src/assets/css/style.css @@ -0,0 +1,66 @@ +body { + height: 100vh; +} +.container { + width: 70%; + margin: auto; + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100vh; + position: relative; +} +.carousel-inner { + display: flex; + justify-content: center; + align-self: center; + position: relative; +} +.carousel-item img { + width: 70vw; +} +.carousel-arrow { + position: absolute; + top: 43%; + padding: 8px; + color: white; + transition: 0.6s ease; + border-radius: 0 3px 3px 0; + user-select: none; + z-index: 99; + cursor: pointer; +} +.carousel-arrow:hover { + background: rgba(0, 0, 0, 0.5); +} +.arrow-left { + left: 0; +} +.arrow-right { + right: 0; +} +.carousel-indicators-container { + display: flex; + justify-content: center; +} +.carousel-indicators button { + display: inline-block; + width: 15px; + height: 15px; + border: none; + border-radius: 50%; + background-color: #bbb; + text-align: center; + cursor: pointer; + margin-right: 5px; +} +.carousel-indicators button:last-child { + margin-right: 0; +} +.carousel-indicators button.active { + background-color: #717171; +} +.hide { + display: none; +} diff --git a/02/carousel/src/assets/font/fontello.eot b/02/carousel/src/assets/font/fontello.eot new file mode 100644 index 0000000..3cb02dc Binary files /dev/null and b/02/carousel/src/assets/font/fontello.eot differ diff --git a/02/carousel/src/assets/font/fontello.svg b/02/carousel/src/assets/font/fontello.svg new file mode 100644 index 0000000..c6bff84 --- /dev/null +++ b/02/carousel/src/assets/font/fontello.svg @@ -0,0 +1,38 @@ + + + +Copyright (C) 2021 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/02/carousel/src/assets/font/fontello.ttf b/02/carousel/src/assets/font/fontello.ttf new file mode 100644 index 0000000..6e19a00 Binary files /dev/null and b/02/carousel/src/assets/font/fontello.ttf differ diff --git a/02/carousel/src/assets/font/fontello.woff b/02/carousel/src/assets/font/fontello.woff new file mode 100644 index 0000000..9727386 Binary files /dev/null and b/02/carousel/src/assets/font/fontello.woff differ diff --git a/02/carousel/src/assets/font/fontello.woff2 b/02/carousel/src/assets/font/fontello.woff2 new file mode 100644 index 0000000..4604760 Binary files /dev/null and b/02/carousel/src/assets/font/fontello.woff2 differ diff --git a/02/carousel/src/assets/images/1.jpeg b/02/carousel/src/assets/images/1.jpeg new file mode 100644 index 0000000..e0eeba7 Binary files /dev/null and b/02/carousel/src/assets/images/1.jpeg differ diff --git a/02/carousel/src/assets/images/2.jpeg b/02/carousel/src/assets/images/2.jpeg new file mode 100644 index 0000000..ab61f52 Binary files /dev/null and b/02/carousel/src/assets/images/2.jpeg differ diff --git a/02/carousel/src/assets/images/3.jpeg b/02/carousel/src/assets/images/3.jpeg new file mode 100644 index 0000000..b34ca16 Binary files /dev/null and b/02/carousel/src/assets/images/3.jpeg differ diff --git a/02/carousel/src/assets/images/4.jpeg b/02/carousel/src/assets/images/4.jpeg new file mode 100644 index 0000000..d0a454c Binary files /dev/null and b/02/carousel/src/assets/images/4.jpeg differ diff --git a/02/carousel/src/assets/images/5.jpeg b/02/carousel/src/assets/images/5.jpeg new file mode 100644 index 0000000..f47ebca Binary files /dev/null and b/02/carousel/src/assets/images/5.jpeg differ diff --git a/02/carousel/src/assets/images/6.jpeg b/02/carousel/src/assets/images/6.jpeg new file mode 100644 index 0000000..8714f28 Binary files /dev/null and b/02/carousel/src/assets/images/6.jpeg differ diff --git a/02/carousel/src/assets/images/7.jpeg b/02/carousel/src/assets/images/7.jpeg new file mode 100644 index 0000000..5c0455a Binary files /dev/null and b/02/carousel/src/assets/images/7.jpeg differ diff --git a/02/carousel/src/assets/images/8.jpeg b/02/carousel/src/assets/images/8.jpeg new file mode 100644 index 0000000..5febacc Binary files /dev/null and b/02/carousel/src/assets/images/8.jpeg differ diff --git a/02/carousel/src/js/index.js b/02/carousel/src/js/index.js new file mode 100644 index 0000000..34c6f52 --- /dev/null +++ b/02/carousel/src/js/index.js @@ -0,0 +1,75 @@ +import { drawItems, drawIndicators } from './render.js'; + +const carouselInner = document.querySelector('.carousel-inner'); +const carouselIndicator = document.querySelector('.carousel-indicators'); + +const getPrevIndex = () => { + const currentCarousel = document.querySelector('.active'); + const prevIndex = Number(currentCarousel.dataset['slideTo']); + + return prevIndex; +}; + +const getCurrentIndex = (act, currentIndex) => { + if (act === 'next') { + return currentIndex === 7 ? 0 : currentIndex + 1; + } + + return currentIndex === 0 ? 7 : currentIndex - 1; +}; + +const hideItem = prevIndex => { + const prevCarousel = document.querySelectorAll('.carousel-item')[prevIndex]; + const prevIndicator = document.querySelectorAll( + '.carousel-indicators button', + )[prevIndex]; + + prevCarousel.classList.add('hide'); + prevIndicator.classList.remove('active'); +}; + +const showItem = currentIndex => { + const currentCarousel = + document.querySelectorAll('.carousel-item')[currentIndex]; + const currentIndicator = document.querySelectorAll( + '.carousel-indicators button', + )[currentIndex]; + + currentCarousel.classList.remove('hide'); + currentIndicator.classList.add('active'); +}; + +const selectCurrentItem = (prevIndex, currentIndex) => { + hideItem(prevIndex); + showItem(currentIndex); +}; + +carouselInner.addEventListener('click', e => { + const { act } = e.target.dataset; + + if (!act) { + return; + } + + const prevIndex = getPrevIndex(); + const currentIndex = getCurrentIndex(act, prevIndex); + selectCurrentItem(prevIndex, currentIndex); +}); + +carouselIndicator.addEventListener('click', e => { + const { slideTo } = e.target.dataset; + + if (!slideTo) { + return; + } + + const prevIndex = getPrevIndex(); + selectCurrentItem(prevIndex, slideTo); +}); + +const init = () => { + drawItems(); + drawIndicators(); +}; + +init(); diff --git a/02/carousel/src/js/render.js b/02/carousel/src/js/render.js new file mode 100644 index 0000000..b7b9852 --- /dev/null +++ b/02/carousel/src/js/render.js @@ -0,0 +1,30 @@ +const BASE_IMG_URL = '/02/carousel/src/assets/images/'; + +const drawItems = () => { + const carouselInner = document.querySelector('.carousel-inner'); + let html = ''; + + for (let idx = 0; idx < 8; idx++) { + const carouselClass = idx ? 'carousel-item hide' : 'carousel-item'; + + html += `
+ ${idx}번 +
`; + } + + carouselInner.innerHTML += html; +}; + +const drawIndicators = () => { + const indicators = document.querySelector('.carousel-indicators'); + let html = ''; + + for (let idx = 0; idx < 8; idx++) { + const indicatorClass = !idx ? 'class="active"' : ''; + html += ``; + } + + indicators.innerHTML = html; +}; + +export { drawItems, drawIndicators }; diff --git a/02/counter/index.html b/02/counter/index.html new file mode 100644 index 0000000..2dcb87d --- /dev/null +++ b/02/counter/index.html @@ -0,0 +1,29 @@ + + + + + + + + + Counter + + +
+
+
+

COUNTER

+
+

0

+
+
+ + +
+
+
+
+ + + + diff --git a/02/counter/src/assets/css/reset.css b/02/counter/src/assets/css/reset.css new file mode 100644 index 0000000..45a05ec --- /dev/null +++ b/02/counter/src/assets/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/02/counter/src/assets/css/style.css b/02/counter/src/assets/css/style.css new file mode 100644 index 0000000..bb3041a --- /dev/null +++ b/02/counter/src/assets/css/style.css @@ -0,0 +1,52 @@ +body { + background: #fdfc62; + height: 100vh; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100vh; +} +.row { + display: flex; + flex-direction: column; + justify-content: center; + align-self: center; + width: 500px; + font-size: 25px; + text-align: center; + background-color: #f5f5f5; + border: 5px solid; + border-radius: 5px; +} +.counter-title { + padding: 50px 0 30px 0; + font-size: 2.1rem; + font-weight: 600; +} +.counter-num { + font-size: 9rem; + font-weight: 600; +} +.counter-btn { + padding-bottom: 50px; +} +.counter-btn button { + padding: 10px 12px; + font-size: 1rem; + border: 1px solid; + border-radius: 5px; + background: transparent; + cursor: pointer; +} +.counter-btn button.active { + box-shadow: 0 0 0 0.2rem rgb(52 58 64 / 50%); +} +.counter-btn button:hover { + color: white; + background: #343a40; + border: none; +} diff --git a/02/counter/src/js/index.js b/02/counter/src/js/index.js new file mode 100644 index 0000000..2c52de6 --- /dev/null +++ b/02/counter/src/js/index.js @@ -0,0 +1,22 @@ +const counterBtn = document.querySelector('.counter-btn'); +const counterNum = document.querySelector('.counter-num'); + +window.addEventListener('click', e => { + let currentNumValue = Number(counterNum.textContent); + + const activeBtn = document.querySelector('.active'); + activeBtn?.classList.remove('active'); + + const { act } = e.target.dataset; + if (!act) { + return; + } + + e.target.classList.add('active'); + + if (act === 'increase') { + counterNum.textContent = currentNumValue + 1; + } else { + counterNum.textContent = currentNumValue - 1; + } +}); diff --git a/02/digital-clock/index.html b/02/digital-clock/index.html new file mode 100644 index 0000000..43947a0 --- /dev/null +++ b/02/digital-clock/index.html @@ -0,0 +1,19 @@ + + + + + + + + + Digital Clock + + +
+
+
+
+
+ + + diff --git a/02/digital-clock/src/assets/css/reset.css b/02/digital-clock/src/assets/css/reset.css new file mode 100644 index 0000000..45a05ec --- /dev/null +++ b/02/digital-clock/src/assets/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/02/digital-clock/src/assets/css/style.css b/02/digital-clock/src/assets/css/style.css new file mode 100644 index 0000000..9be7f19 --- /dev/null +++ b/02/digital-clock/src/assets/css/style.css @@ -0,0 +1,38 @@ +@font-face { + font-family: 'Montserrat'; + src: url('../font/Montserrat-Regular.ttf'); +} + +body { + background: conic-gradient( + from 90deg at 25% -10%, + #ff4500, + #d3f340, + #7bee85, + #afeeee, + #7bee85 + ); + height: 100vh; + font-family: 'Montserrat', serif; +} + +.container { + display: flex; + justify-content: center; + width: 100%; + height: 100vh; +} +.row { + display: flex; + flex-wrap: wrap; + align-self: center; + padding: 10px 20px; + width: fit-content; + font-size: 5rem; + color: white; + text-align: center; + background-color: rgba(0, 0, 0, 0.1); +} +.time { + padding: 10px; +} diff --git a/02/digital-clock/src/assets/font/Montserrat-Regular.ttf b/02/digital-clock/src/assets/font/Montserrat-Regular.ttf new file mode 100644 index 0000000..8d443d5 Binary files /dev/null and b/02/digital-clock/src/assets/font/Montserrat-Regular.ttf differ diff --git a/02/digital-clock/src/js/index.js b/02/digital-clock/src/js/index.js new file mode 100644 index 0000000..53f03c6 --- /dev/null +++ b/02/digital-clock/src/js/index.js @@ -0,0 +1,18 @@ +const timeArea = document.querySelector('.time-area'); + +const setTime = () => { + const options = { + weekday: 'short', + hour: 'numeric', + minute: 'numeric', + }; + + const time = new Intl.DateTimeFormat('en', options) + .format(new Date()) + .toUpperCase(); + timeArea.textContent = time; + + setTimeout(setTime, 1000); +}; + +window.addEventListener('load', setTime); diff --git a/02/message/index.html b/02/message/index.html new file mode 100644 index 0000000..348eb60 --- /dev/null +++ b/02/message/index.html @@ -0,0 +1,37 @@ + + + + + + + + + + The message + + +
+
+
+

Pass the message

+
+
+
Enter a message
+
+
+ + +
+
+
+ +
+
+
+
+
+ + + diff --git a/02/message/src/assets/css/fontello.css b/02/message/src/assets/css/fontello.css new file mode 100644 index 0000000..bd098d6 --- /dev/null +++ b/02/message/src/assets/css/fontello.css @@ -0,0 +1,68 @@ +@font-face { + font-family: 'fontello'; + src: url('../font/fontello.eot?80405227'); + src: url('../font/fontello.eot?80405227#iefix') format('embedded-opentype'), + url('../font/fontello.woff2?80405227') format('woff2'), + url('../font/fontello.woff?80405227') format('woff'), + url('../font/fontello.ttf?80405227') format('truetype'), + url('../font/fontello.svg?80405227#fontello') format('svg'); + font-weight: normal; + font-style: normal; +} +/* Chrome hack: SVG is rendered more smooth in Windozze. 100% magic, uncomment if you need it. */ +/* Note, that will break hinting! In other OS-es font will be not as sharp as it could be */ +/* +@media screen and (-webkit-min-device-pixel-ratio:0) { + @font-face { + font-family: 'fontello'; + src: url('../font/fontello.svg?80405227#fontello') format('svg'); + } +} +*/ +[class^="icon-"]:before, [class*=" icon-"]:before { + font-family: "fontello"; + font-style: normal; + font-weight: normal; + speak: never; + + display: inline-block; + text-decoration: inherit; + width: 1em; + margin-right: .2em; + text-align: center; + /* opacity: .8; */ + + /* For safety - reset parent styles, that can break glyph codes*/ + font-variant: normal; + text-transform: none; + + /* fix buttons height, for twitter bootstrap */ + line-height: 1em; + + /* Animation center compensation - margins should be symmetric */ + /* remove if not needed */ + margin-left: .2em; + + /* you can be more comfortable with increased icons size */ + /* font-size: 120%; */ + + /* Font smoothing. That was taken from TWBS */ + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + /* Uncomment for 3D effect */ + /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */ +} + +.icon-play:before { content: '\e800'; } /* '' */ +.icon-down-dir:before { content: '\e801'; } /* '' */ +.icon-right-dir:before { content: '\e802'; } /* '' */ +.icon-trash-empty:before { content: '\e803'; } /* '' */ +.icon-resize-full:before { content: '\e804'; } /* '' */ +.icon-cancel:before { content: '\e805'; } /* '' */ +.icon-mail:before { content: '\e806'; } /* '' */ +.icon-mail-1:before { content: '\e807'; } /* '' */ +.icon-comment-empty:before { content: '\f0e5'; } /* '' */ +.icon-plus-squared-alt:before { content: '\f196'; } /* '' */ +.icon-clone:before { content: '\f24d'; } /* '' */ +.icon-commenting-o:before { content: '\f27b'; } /* '' */ diff --git a/02/message/src/assets/css/reset.css b/02/message/src/assets/css/reset.css new file mode 100644 index 0000000..45a05ec --- /dev/null +++ b/02/message/src/assets/css/reset.css @@ -0,0 +1,129 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} +body { + line-height: 1; +} +ol, +ul { + list-style: none; +} +blockquote, +q { + quotes: none; +} +blockquote:before, +blockquote:after, +q:before, +q:after { + content: ""; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} diff --git a/02/message/src/assets/css/style.css b/02/message/src/assets/css/style.css new file mode 100644 index 0000000..acccd12 --- /dev/null +++ b/02/message/src/assets/css/style.css @@ -0,0 +1,99 @@ +body { + background: linear-gradient(#b8dafc, white); + height: 100vh; +} + +@font-face { + font-family: "fontello"; + src: url("../font/fontello.eot?63919437"); + src: url("../font/fontello.eot?63919437#iefix") format("embedded-opentype"), + url("../font/fontello.woff?63919437") format("woff"), + url("../font/fontello.ttf?63919437") format("truetype"), + url("../font/fontello.svg?63919437#fontello") format("svg"); +} + +.demo-icon { + font-family: "fontello"; + font-weight: bold; +} + +.container { + display: flex; + flex-direction: column; + justify-content: center; + width: 100%; + height: 100vh; +} +.row { + display: flex; + flex-direction: column; + justify-content: center; + align-self: center; + width: 500px; + height: 8vh; + padding: 12vh 0; + font-size: 25px; + text-align: center; + background-color: #f5f5f5; + border-radius: 5px; + box-shadow: 0px 2px 6px 0px rgb(0 0 0 / 50%); +} +.post-box { + text-align: center; +} +.post-title { + display: inline-block; + padding: 20px 0; + width: 90%; + font-size: 1.2rem; + font-weight: 700; + border-bottom: 2px solid lightgray; +} +.post-notice { + padding: 20px 24px 20px 24px; + text-align: left; + font-size: 1rem; +} +.post-input button { + position: absolute; + width: 34px; + height: 34px; + z-index: 1; + background: #f5f5f5; + border: 1px solid lightgray; + border-right: 2px solid lightgray; + border-radius: 5px 0 0 5px; + cursor: pointer; +} +.post-input button:hover { + background: lightgray; +} +.post-input input { + position: relative; + padding: 0 10px 0 40px; + width: 400px; + height: 32px; + border: 1px solid lightgray; + border-radius: 5px; + outline: none; +} +.post-submit { + display: flex; + padding: 20px 20px 0 20px; +} +.submit-btn { + padding: 8px; + border: 1px solid lightgray; + border-radius: 4px; + background: #f5f5f5; + cursor: pointer; +} +.submit-btn:hover { + background: lightgray; + cursor: pointer; +} +.post-display { + padding: 10px 20px; + height: 10px; + font-size: 1.2rem; +} diff --git a/02/message/src/assets/font/fontello.eot b/02/message/src/assets/font/fontello.eot new file mode 100644 index 0000000..7701da9 Binary files /dev/null and b/02/message/src/assets/font/fontello.eot differ diff --git a/02/message/src/assets/font/fontello.svg b/02/message/src/assets/font/fontello.svg new file mode 100644 index 0000000..202145c --- /dev/null +++ b/02/message/src/assets/font/fontello.svg @@ -0,0 +1,34 @@ + + + +Copyright (C) 2021 by original authors @ fontello.com + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/02/message/src/assets/font/fontello.ttf b/02/message/src/assets/font/fontello.ttf new file mode 100644 index 0000000..244de68 Binary files /dev/null and b/02/message/src/assets/font/fontello.ttf differ diff --git a/02/message/src/assets/font/fontello.woff b/02/message/src/assets/font/fontello.woff new file mode 100644 index 0000000..5a51477 Binary files /dev/null and b/02/message/src/assets/font/fontello.woff differ diff --git a/02/message/src/assets/font/fontello.woff2 b/02/message/src/assets/font/fontello.woff2 new file mode 100644 index 0000000..085146b Binary files /dev/null and b/02/message/src/assets/font/fontello.woff2 differ diff --git a/02/message/src/js/index.js b/02/message/src/js/index.js new file mode 100644 index 0000000..df83f61 --- /dev/null +++ b/02/message/src/js/index.js @@ -0,0 +1,13 @@ +const postInput = document.querySelector('.post-input input'); +const postDisplay = document.querySelector('.post-display'); +const postSubmitBtn = document.querySelector('.submit-btn'); + +postInput.addEventListener('keyup', e => { + if (e.key === 'Enter') { + postDisplay.textContent = e.target.value; + } +}); + +postSubmitBtn.addEventListener('click', e => { + postDisplay.textContent = postInput.value; +});