From e0f7205f265d63621907d112b392b14da23fd2c6 Mon Sep 17 00:00:00 2001 From: Nathan Akpawu Date: Fri, 30 Jun 2023 11:25:59 +0000 Subject: [PATCH] using json file to display datas --- .../{fonts => }/HankenGrotesk-Variable.woff2 | Bin .../assets/fonts/README.txt | 54 ------------------ .../assets/script.js | 43 ++++++++++++++ .../assets/{css => }/style.css | 24 +++++--- 002-results-summary-component/index.html | 38 ++---------- 002-results-summary-component/style-guide.md | 49 ---------------- 6 files changed, 63 insertions(+), 145 deletions(-) rename 002-results-summary-component/assets/{fonts => }/HankenGrotesk-Variable.woff2 (100%) delete mode 100644 002-results-summary-component/assets/fonts/README.txt create mode 100644 002-results-summary-component/assets/script.js rename 002-results-summary-component/assets/{css => }/style.css (93%) delete mode 100644 002-results-summary-component/style-guide.md diff --git a/002-results-summary-component/assets/fonts/HankenGrotesk-Variable.woff2 b/002-results-summary-component/assets/HankenGrotesk-Variable.woff2 similarity index 100% rename from 002-results-summary-component/assets/fonts/HankenGrotesk-Variable.woff2 rename to 002-results-summary-component/assets/HankenGrotesk-Variable.woff2 diff --git a/002-results-summary-component/assets/fonts/README.txt b/002-results-summary-component/assets/fonts/README.txt deleted file mode 100644 index 79d217f..0000000 --- a/002-results-summary-component/assets/fonts/README.txt +++ /dev/null @@ -1,54 +0,0 @@ -Hanken Grotesk Variable Font -============================ - -This download contains Hanken Grotesk as both variable fonts and static fonts. - -Hanken Grotesk is a variable font with this axis: - wght - -This means all the styles are contained in these files: - HankenGrotesk-VariableFont_wght.ttf - -If your app fully supports variable fonts, you can now pick intermediate styles -that aren’t available as static fonts. Not all apps support variable fonts, and -in those cases you can use the static font files for Hanken Grotesk: - static/HankenGrotesk-Medium.ttf - static/HankenGrotesk-Bold.ttf - static/HankenGrotesk-ExtraBold.ttf - -Get started ------------ - -1. Install the font files you want to use - -2. Use your app's font picker to view the font family and all the -available styles - -Learn more about variable fonts -------------------------------- - - https://developers.google.com/web/fundamentals/design-and-ux/typography/variable-fonts - https://variablefonts.typenetwork.com - https://medium.com/variable-fonts - -In desktop apps - - https://theblog.adobe.com/can-variable-fonts-illustrator-cc - https://helpx.adobe.com/nz/photoshop/using/fonts.html#variable_fonts - -Online - - https://developers.google.com/fonts/docs/getting_started - https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide - https://developer.microsoft.com/en-us/microsoft-edge/testdrive/demos/variable-fonts - -Installing fonts - - MacOS: https://support.apple.com/en-us/HT201749 - Linux: https://www.google.com/search?q=how+to+install+a+font+on+gnu%2Blinux - Windows: https://support.microsoft.com/en-us/help/314960/how-to-install-or-remove-a-font-in-windows - -Android Apps - - https://developers.google.com/fonts/docs/android - https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-fonts diff --git a/002-results-summary-component/assets/script.js b/002-results-summary-component/assets/script.js new file mode 100644 index 0000000..a519e27 --- /dev/null +++ b/002-results-summary-component/assets/script.js @@ -0,0 +1,43 @@ +'use strict'; + +const indicatorsEl = document.querySelector('.summary--indicators'); + +fetch('../data.json') + .then(data => data.json()) + .then(indicators => { + for (const indicator of indicators) { + displayIndicator(indicator); + } + }); + +function displayIndicator(indicator) { + const indicatorEl = document.createElement('div'); + indicatorEl.classList.add('indicator'); + + const image = new Image(); + image.classList.add('indicator--icon'); + image.src = indicator.icon; + image.alt = `${indicator.category} Icon`; + + const h3 = document.createElement('h3'); + h3.classList.add('indicator--category'); + h3.textContent = indicator.category; + + const indicatorScoreEl = document.createElement('div'); + indicatorScoreEl.classList.add('indicator--score'); + + const strong = document.createElement('strong'); + strong.textContent = indicator.score; + + const span = document.createElement('span'); + span.textContent = '/ 100'; + + indicatorScoreEl.appendChild(strong); + indicatorScoreEl.appendChild(span); + + indicatorEl.appendChild(image); + indicatorEl.appendChild(h3); + indicatorEl.appendChild(indicatorScoreEl); + + indicatorsEl.appendChild(indicatorEl); +} diff --git a/002-results-summary-component/assets/css/style.css b/002-results-summary-component/assets/style.css similarity index 93% rename from 002-results-summary-component/assets/css/style.css rename to 002-results-summary-component/assets/style.css index 81858ab..540ae0f 100644 --- a/002-results-summary-component/assets/css/style.css +++ b/002-results-summary-component/assets/style.css @@ -13,7 +13,12 @@ --blue: hsl(234, 85%, 45%); --blue-95-white: hsla(234, 85%, 45%, 0.05); --gradient-1: linear-gradient(180deg, #75f 0%, #6943ff 0.01%, #2f2ce9 100%); - --gradient-2: linear-gradient(180deg, #4d21c9 0%, rgba(37, 33, 201, 0) 100%, rgba(37, 33, 201, 0) 100%); + --gradient-2: linear-gradient( + 180deg, + #4d21c9 0%, + rgba(37, 33, 201, 0) 100%, + rgba(37, 33, 201, 0) 100% + ); } /*#endregion: Variables*/ @@ -26,7 +31,7 @@ @font-face { font-family: 'Hanken Grotesk'; - src: url('../fonts/HankenGrotesk-Variable.woff2') format('woff2-variations'); + src: url('./HankenGrotesk-Variable.woff2') format('woff2-variations'); font-weight: 100 900; } @@ -144,6 +149,10 @@ button { margin-bottom: 24px; } +.summary--indicators { + margin-bottom: 24px; +} + .indicator { padding: 16px; margin-bottom: 16px; @@ -154,7 +163,7 @@ button { } .indicator:last-of-type { - margin-bottom: 24px; + margin-bottom: 0; } .indicator--icon { @@ -208,14 +217,13 @@ button { .indicator:nth-child(4) { background: var(--blue-95-white); - margin-bottom: 24px; } .indicator:nth-child(4) .indicator--category { color: var(--blue); } -.btn { +.summary--btn { display: block; text-align: center; padding: 18px; @@ -227,7 +235,7 @@ button { font-weight: 700; } -.btn:hover { +.summary--btn:hover { background: var(--gradient-1); } /*#endregion: Summary*/ @@ -288,8 +296,8 @@ button { margin-bottom: 28px; } - .indicator:last-of-type { + .summary--indicators { margin-bottom: 40px; } } -/*#endregion: Responsive Desktop*/ \ No newline at end of file +/*#endregion: Responsive Desktop*/ diff --git a/002-results-summary-component/index.html b/002-results-summary-component/index.html index e228622..85caac2 100644 --- a/002-results-summary-component/index.html +++ b/002-results-summary-component/index.html @@ -5,7 +5,7 @@ Frontend Mentor | Results summary component - +
@@ -23,41 +23,11 @@

Great

Summary

-
- Reaction Icon -

Reaction

-
- 80 - / 100 -
-
-
- Memory Icon -

Memory

-
- 92 - / 100 -
-
-
- Verbal Icon -

Verbal

-
- 61 - / 100 -
-
-
- Visual Icon -

Visual

-
- 72 - / 100 -
-
-
+
+ + \ No newline at end of file diff --git a/002-results-summary-component/style-guide.md b/002-results-summary-component/style-guide.md deleted file mode 100644 index 55b5cd6..0000000 --- a/002-results-summary-component/style-guide.md +++ /dev/null @@ -1,49 +0,0 @@ -# Front-end Style Guide - -## Layout - -The designs were created to the following widths: - -- Mobile: 375px -- Desktop: 1440px - -## Colors - -### Primary - -- Light red: hsl(0, 100%, 67%) -- Orangey yellow: hsl(39, 100%, 56%) -- Green teal: hsl(166, 100%, 37%) -- Cobalt blue: hsl(234, 85%, 45%) - -## Gradients - -- Light slate blue (background): hsl(252, 100%, 67%) -- Light royal blue (background): hsl(241, 81%, 54%) - -- Violet blue (circle): hsla(256, 72%, 46%, 1) -- Persian blue (circle): hsla(241, 72%, 46%, 0) - - - -### Neutral - -- White: hsl(0, 0%, 100%) -- Pale blue: hsl(221, 100%, 96%) -- Light lavender: hsl(241, 100%, 89%) -- Dark gray blue: hsl(224, 30%, 27%) - -### Notes - -Use transparency to get the colour variations necessary to match the design. Hint: look into using `hsla()`. - -## Typography - -### Body Copy - -- Font size (paragraphs): 18px - -### Font - -- Family: [Hanken Grotesk](https://fonts.google.com/specimen/Hanken+Grotesk) -- Weights: 500, 700, 800