using json file to display datas

natho19 · Jun 30, 2023 · e0f7205 · e0f7205
1 parent 2135c59
commit e0f7205
Show file tree

Hide file tree

Showing 6 changed files with 63 additions and 145 deletions.
diff --git a/...assets/fonts/HankenGrotesk-Variable.woff2 → ...onent/assets/HankenGrotesk-Variable.woff2 b/...assets/fonts/HankenGrotesk-Variable.woff2 → ...onent/assets/HankenGrotesk-Variable.woff2
diff --git a/002-results-summary-component/assets/fonts/README.txt b/002-results-summary-component/assets/fonts/README.txt
diff --git a/002-results-summary-component/assets/script.js 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/...ts-summary-component/assets/css/style.css → ...esults-summary-component/assets/style.css b/...ts-summary-component/assets/css/style.css → ...esults-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*/
+/*#endregion: Responsive Desktop*/
diff --git a/002-results-summary-component/index.html b/002-results-summary-component/index.html
@@ -5,7 +5,7 @@
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="icon" type="image/png" sizes="32x32" href="./assets/images/favicon-32x32.png">
  <title>Frontend Mentor | Results summary component</title>
- <link rel="stylesheet" href="assets/css/style.css">
+ <link rel="stylesheet" href="assets/style.css">
  </head>
  <body>
  <main class="main">
@@ -23,41 +23,11 @@ <h2 class="result--mention">Great</h2>
  <div class="summary">
  <h2 class="summary--title">Summary</h2>
  <div class="summary--indicators">
- <div class="indicator">
- <img class="indicator--icon" src="./assets/images/icon-reaction.svg" alt="Reaction Icon">
- <h3 class="indicator--category">Reaction</h3>
- <div class="indicator--score">
- <strong>80</strong>
- <span>/ 100</span>
- </div>
- </div>
- <div class="indicator">
- <img class="indicator--icon" src="./assets/images/icon-memory.svg" alt="Memory Icon">
- <h3 class="indicator--category">Memory</h3>
- <div class="indicator--score">
- <strong>92</strong>
- <span>/ 100</span>
- </div>
- </div>
- <div class="indicator">
- <img class="indicator--icon" src="./assets/images/icon-verbal.svg" alt="Verbal Icon">
- <h3 class="indicator--category">Verbal</h3>
- <div class="indicator--score">
- <strong>61</strong>
- <span>/ 100</span>
- </div>
- </div>
- <div class="indicator">
- <img class="indicator--icon" src="./assets/images/icon-visual.svg" alt="Visual Icon">
- <h3 class="indicator--category">Visual</h3>
- <div class="indicator--score">
- <strong>72</strong>
- <span>/ 100</span>
- </div>
- </div>
- <button class="btn">Continue</button>
  </div>
+ <button class="summary--btn">Continue</button>
  </div>
  </main>
+
+ <script src="./assets/script.js"></script>
  </body>
 </html>
diff --git a/002-results-summary-component/style-guide.md b/002-results-summary-component/style-guide.md