From e86da53616cf39730760a13846041f950712fd7e Mon Sep 17 00:00:00 2001 From: SamTheKorean Date: Mon, 24 Jun 2024 22:18:27 +0900 Subject: [PATCH 1/3] fix : adjust to new component writting styles --- components/hero.js | 48 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 6 +++--- main.js | 2 +- 3 files changed, 52 insertions(+), 4 deletions(-) create mode 100644 components/hero.js diff --git a/components/hero.js b/components/hero.js new file mode 100644 index 0000000..048d96c --- /dev/null +++ b/components/hero.js @@ -0,0 +1,48 @@ +import { css, html } from "../html-css-utils.js"; + +class Hero extends HTMLElement { + constructor() { + super(); + this.render(); + } + + render() { + this.attachShadow({ mode: 'open' }); + this.shadowRoot.innerHTML = this.createCss() + this.createHtml(); + } + + createCss() { + return css` + :host { + font-weight: 500; + } + + h2 { + font-weight: inherit; + font-size: 30px; + } + + @media only screen and (min-width: 768px) { + h2 { + font-size: 40px; + } + } + + @media only screen and (min-width: 1024px) { + h2 { + font-size: 50px; + } + } + `; + } + + createHtml() { + return html` +

+ +

+ `; + } +} + +customElements.define('ds-hero', Hero); diff --git a/index.html b/index.html index 1cee870..798984b 100644 --- a/index.html +++ b/index.html @@ -238,7 +238,7 @@
-

해외취업을 위한 커뮤니티 기반 알고리즘 스터디

+ 해외취업을 위한 커뮤니티 기반 알고리즘 스터디
-

지역에 관계없이 다양한 언어로 참여할 수 있어요

+ 지역에 관계없이 다양한 언어로 참여할 수 있어요
-

코드리뷰를 통해 새로운 관점을 배울 수 있어요

+ 코드리뷰를 통해 새로운 관점을 배울 수 있어요 Date: Mon, 24 Jun 2024 21:34:16 +0900 Subject: [PATCH 2/3] fix : adjust the new component writting styles and apply feedback provided --- components/image.js | 62 +++++++++++++++++++++++++++++++++++++++++++++ index.html | 6 ++--- main.js | 6 +++++ 3 files changed, 71 insertions(+), 3 deletions(-) create mode 100644 components/image.js diff --git a/components/image.js b/components/image.js new file mode 100644 index 0000000..18c20cf --- /dev/null +++ b/components/image.js @@ -0,0 +1,62 @@ +import { css, html } from "../html-css-utils.js"; + +class Image extends HTMLElement { + constructor() { + super(); + + this.validateAttributes(); + this.render(); + } + + validateAttributes() { + if (!this.hasAttribute("alt")) { + throw new Error('The "alt" attribute is required.'); + } + + const allowedAttributes = ["src", "alt", "width", "height"]; + for (const attr of this.attributes) { + if (!allowedAttributes.includes(attr.name)) { + throw new Error(`The attribute "${attr.name}" is not allowed.`); + } + } + } + + render() { + this.attachShadow({ mode: "open" }); + this.shadowRoot.innerHTML = this.createCss() + this.createHtml(); + } + + createCss() { + return css` + img { + display: block; + max-width: 100%; + } + `; + } + + createHtml() { + const src = this.getAttribute("src") ?? ""; + const alt = this.getAttribute("alt") ?? ""; + + let imgHtml = `${alt}`; + + return ` + ${imgHtml} + `; + } +} + +customElements.define("ds-image", Image); diff --git a/index.html b/index.html index b104969..2c69f99 100644 --- a/index.html +++ b/index.html @@ -248,13 +248,13 @@
- # +
- # +
지역에 관계없이 다양한 언어로 참여할 수 있어요 @@ -279,7 +279,7 @@ >
- +
diff --git a/main.js b/main.js index 2b9b782..5c8bcab 100644 --- a/main.js +++ b/main.js @@ -1,6 +1,12 @@ +import "./components/button-link.js"; import "./components/footer-link/footer-link.js"; import "./components/header.js"; +<<<<<<< HEAD import "./components/hero.js"; import "./components/button-link.js"; +======= +import "./components/hero/hero.js"; +import "./components/image.js"; +>>>>>>> 7244af8 (fix : adjust the new component writting styles and apply feedback provided) import "./components/review-item/review-item.js"; import "./components/seo-meta-tag/seo-meta-tag.js"; From 2ad10a2b8a9f374be60cb9d2dd3342cf2f53b484 Mon Sep 17 00:00:00 2001 From: SamTheKorean Date: Wed, 26 Jun 2024 15:04:45 +0900 Subject: [PATCH 3/3] refactor: modified code structures according to the pr feedback --- components/image.js | 31 +++++++++++-------------------- main.js | 5 ----- 2 files changed, 11 insertions(+), 25 deletions(-) diff --git a/components/image.js b/components/image.js index 18c20cf..44aedec 100644 --- a/components/image.js +++ b/components/image.js @@ -12,13 +12,6 @@ class Image extends HTMLElement { if (!this.hasAttribute("alt")) { throw new Error('The "alt" attribute is required.'); } - - const allowedAttributes = ["src", "alt", "width", "height"]; - for (const attr of this.attributes) { - if (!allowedAttributes.includes(attr.name)) { - throw new Error(`The attribute "${attr.name}" is not allowed.`); - } - } } render() { @@ -28,34 +21,32 @@ class Image extends HTMLElement { createCss() { return css` - img { - display: block; - max-width: 100%; - } + img { + display: block; + max-width: 100%; + } `; } createHtml() { - const src = this.getAttribute("src") ?? ""; - const alt = this.getAttribute("alt") ?? ""; + const src = this.getAttribute("src") || ""; + const alt = this.getAttribute("alt") || ""; + const width = this.getAttribute("width"); + const height = this.getAttribute("height"); let imgHtml = `${alt}`; - return ` - ${imgHtml} - `; + return imgHtml; } } diff --git a/main.js b/main.js index 5c8bcab..a6eabec 100644 --- a/main.js +++ b/main.js @@ -1,12 +1,7 @@ import "./components/button-link.js"; import "./components/footer-link/footer-link.js"; import "./components/header.js"; -<<<<<<< HEAD import "./components/hero.js"; -import "./components/button-link.js"; -======= -import "./components/hero/hero.js"; import "./components/image.js"; ->>>>>>> 7244af8 (fix : adjust the new component writting styles and apply feedback provided) import "./components/review-item/review-item.js"; import "./components/seo-meta-tag/seo-meta-tag.js";