grunitech · Ran-E · Dec 3, 2022 · Dec 3, 2022 · Dec 4, 2022
diff --git a/index.html b/index.html
@@ -4,9 +4,42 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/smiley-icon.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>GRUnitech WebDev Exam</title>
+    <title>Ran Elbaz - exam</title>
   </head>
   <body>
+    <h1>Currency Converter</h1>
+
+    <section class="currency-converter-form">
+      <form id="currency-converter-form" action="">
+        <div class="main">
+          Currency:
+          <br>
+          Exchange Date:
+          <input type="date">
+          <button type="submit">Submit</button>
+        <div class="result">
+          Exchange Rate to ILS: <span id="exchangeResult">3.452</span>
+        </div>
+      </div>
+      </form>
+    </section>
+
+    <section class="currency-converter-table">
+      <table>
+        <thead>
+        <tr>
+          <th>date</th>
+          <th>currency</th>
+          <th>exchange rate</th>
+        </tr>
+        </thead>
+
+
+      </table>
+
+    </section>
+
+
     <script type="module" src="/src/main.ts"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -12,5 +12,17 @@
     "sass": "^1.56.1",
     "typescript": "^4.6.4",
     "vite": "^3.2.3"
-  }
+  },
+  "description": "Welcome! This is a boilerplate for creating web applications using TypeScript and Sass.",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Ran-E/frontend-exam-boilerplate.git"
+  },
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/Ran-E/frontend-exam-boilerplate/issues"
+  },
+  "homepage": "https://github.com/Ran-E/frontend-exam-boilerplate#readme"
 }
diff --git a/src/main.ts b/src/main.ts
@@ -1,2 +1,79 @@
 import './style.scss'
 // keep the line above and write your code below.
+const exchangeRateEndpoint = 'https://currency-ror1.vercel.app/api/currency';
+const datesCurrenciesArrayEndpoint = 'https://currency-ror1.vercel.app/api/dates-table';
+
+const currencyCodes = {
+  USD: '01',
+  EUR: '27',
+  GBP: '02',
+  CAD: '06',
+  AUD: '18',
+  GPY: '31',
+};
+
+
+
+/**
+ * Use these strings in the form select (drop-down) -
+ * you can copy-paste into the HTML
+ * and/or use them programmatically
+ */
+
+const currencyNames = [
+  'USD (United States Dollar)',
+  'EUR (Euro)',
+  'GBP (Great Britain Pound)',
+  'CAD (Canadian Dollar)',
+  'AUD (Australian Dollar)',
+  'GPY (Japanese Yen)'
+];
+
+window.addEventListener('DOMContentLoaded', (event) => {
+  attachListeners();
+  return populateTable();
+});
+
+
+function attachListeners() {
+  const currencyConverterForm = document.getElementById('currency-converter-form');
+  currencyConverterForm.onsubmit = getExchangeRateFromForm;
+}
+
+
+
+/**
+ * Complete the function below to get the exchange rate from the API
+ */
+
+async function getExchangeRateFromApi(dateCode: string, currencyCode: string) {
+
+
+}
+
+
+/**
+ * Complete the function below to get the data from the form,
+ * send it to the API, present the result, and show/hide the spinner.
+ * The two event methods prevent the form submission from reloading the page.
+ */
+
+async function getExchangeRateFromForm(event) {
+  event.preventDefault();
+  event.stopPropagation();
+
+
+}
+
+/**
+ * Complete the function below to get the array of dates and currencies,
+ * create table rows, get the exchange rates from the API,
+ * present the results, and show/hide the spinner
+ */
+
+async function populateTable() {
+
+
+
+  return null;
+}
diff --git a/src/style.scss b/src/style.scss
@@ -3,11 +3,73 @@
   font-size: 16px;
   line-height: 24px;
   font-weight: 400;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
 }
 
+$accent-color: darkslateblue;
+$cell-border: $accent-color 2px solid;
+$section-cell-border-radius: 4px;
+
+* {
+  box-sizing: border-box;
+}
+
+h1 {
+  text-align: center;
+}
+.main {
+  border: #1976d2 2px solid;;
+  border-radius: $section-cell-border-radius;
+  margin: auto;
+  width: 304px;
+
+
+}
+.result {
+  position: relative;
+  padding: 20px;
+  border: $cell-border;
+  border-radius: $section-cell-border-radius;
+  justify-content: space-between;
+;}
+
+.spinner {
+  display: inline-block;
+  position: absolute;
+  bottom: 7px;
+  margin-left: 10px;
+
+  &.small {
+    bottom: 2px;
+  }
+}
+
+@keyframes spin {
+  from {
+    transform:rotate(0deg);
+  }
+  to {
+    transform:rotate(360deg);
+  }
+}
+
+table {
+  border: #1976d2 2px solid;;
+  border-radius: $section-cell-border-radius;
+  margin: auto;
+  width: 304px;
+
+  thead,
+  tfoot {
+    background-color: $accent-color;
+    color: #fff;
+  }
+
+  tr {
+    position: relative;
+  }
+}