diff --git a/.github/actions/jest-out/action.yml b/.github/actions/jest-out/action.yml deleted file mode 100644 index e9dc614..0000000 --- a/.github/actions/jest-out/action.yml +++ /dev/null @@ -1,16 +0,0 @@ -name: 'Report Audit' -description: 'report test stats for a challenge' -inputs: - challenge: - description: 'the challenge or task to report on' - required: true - lang: - description: 'the programming language in use' - required: true - server: - description: 'base API endpoint URL' - required: true - default: 'https://us-central1-buildforsdg.cloudfunctions.net/api' -runs: - using: 'node12' - main: 'index.js' \ No newline at end of file diff --git a/.github/actions/jest-out/index.js b/.github/actions/jest-out/index.js deleted file mode 100644 index 7f2181f..0000000 --- a/.github/actions/jest-out/index.js +++ /dev/null @@ -1,94 +0,0 @@ -const fs = require('fs'); -const axios = require('axios'); -const xml2json = require("xml2json"); -const core = require('@actions/core'); -const { context } = require('@actions/github'); - -const CHALLENGES = { - 'ch-1': 'challenge-01', - 'ch-2': 'challenge-02', - 'ch-3': 'challenge-03', - 'ch-4': 'challenge-04', - 'ch-5': 'challenge-05' -}; - -const getStatsFor = (lang, task) => { - let stats = {}; - - if (lang === 'javascript' || lang === 'python' || ['ch-4', 'ch-5'].includes(task)) { - // const payload = require(`../../../audits/${task}.json`); - const json = fs.readFileSync(`${process.cwd()}/audits/${task}.json`, 'utf8'); - const payload = JSON.parse(json); - - // HINT: how data looks - // { - // numFailedTestSuites: 1, - // numFailedTests: 1, - // numPassedTestSuites: 0, - // numPassedTests: 0, - // numPendingTestSuites: 0, - // numPendingTests: 0, - // numRuntimeErrorTestSuites: 0, - // numTodoTests: 0, - // numTotalTestSuites: 1, - // numTotalTests: 1 - // } - - stats.totalTests = payload.numTotalTests; - stats.passedTests = payload.numPassedTests; - } - - if (lang === 'php') { - const xml = fs.readFileSync(`${process.cwd()}/audits/${task}.xml`, 'utf8'); - const data = xml2json.toJson(xml, { object: true }); - - // HINT: how data looks. - // { - // testsuites: { - // testsuite: { - // name: './audits/ch-1', - // tests: '3', - // assertions: '36', - // errors: '0', - // warnings: '0', - // failures: '3', - // skipped: '0', - // time: '0.350120', - // testsuite: [Object] - // } - // } - // } - - const payload = data.testsuites.testsuite; - stats.totalTests = payload.tests; - stats.passedTests = parseInt(payload.tests, 10) - parseInt(payload.failures, 10); - } - - return stats; -}; - -const run = async () => { - try { - const task = core.getInput('challenge'); - const language = core.getInput('lang'); - const challenge = CHALLENGES[task]; - const stats = getStatsFor(language, task); - - const { repo, owner } = context.repo; - const report = { - repo, - owner, - ...stats, - language, - source: 'unit-tests', - type: challenge - }; - - const server = core.getInput('server'); - await axios.post(`${server}/entry-tests`, { report }); - } catch (error) { - core.setFailed(error.message); - } -}; - -run(); \ No newline at end of file diff --git a/.github/actions/lhr-out/action.yml b/.github/actions/lhr-out/action.yml deleted file mode 100644 index 383f482..0000000 --- a/.github/actions/lhr-out/action.yml +++ /dev/null @@ -1,13 +0,0 @@ -name: 'Report Lighthouse' -description: 'report lighthouse stats for challenge-4' -inputs: - lang: - description: 'the programming language in use' - required: true - server: - description: 'base API endpoint URL' - required: true - default: 'https://us-central1-buildforsdg.cloudfunctions.net/api' -runs: - using: 'node12' - main: 'index.js' \ No newline at end of file diff --git a/.github/actions/lhr-out/index.js b/.github/actions/lhr-out/index.js deleted file mode 100644 index b931c1f..0000000 --- a/.github/actions/lhr-out/index.js +++ /dev/null @@ -1,41 +0,0 @@ -const fs = require('fs'); -const axios = require('axios'); -const core = require('@actions/core'); -const { context } = require("@actions/github"); - -const run = async () => { - try { - const repo = context.repo.repo; - const owner = context.repo.owner; - const language = core.getInput('lang'); - - const dir = './.lighthouseci'; - const [file] = fs.readdirSync(dir).filter(f => f.startsWith('lhr-') && f.endsWith('.json')); - const lhr = JSON.parse(fs.readFileSync(`${dir}/${file}`, 'utf8')); - - const { categories } = lhr; - const stats = Object.keys(categories) - .filter(key => key !== 'pwa') - .reduce((props, key) => { - props[ key.replace('-', '') ] = categories[key].score; - return props; - }, {}); - - const report = { - repo, - owner, - language, - ...stats, - type: 'challenge-04', - source: 'lighthouse' - }; - - const server = core.getInput('server'); - await axios.post(`${server}/entry-tests`, {report}); - - } catch (error) { - core.setFailed(error.message); - } -}; - -run(); diff --git a/.github/actions/props-out/action.yml b/.github/actions/props-out/action.yml deleted file mode 100644 index bbc3420..0000000 --- a/.github/actions/props-out/action.yml +++ /dev/null @@ -1,15 +0,0 @@ -name: 'Props Out' -description: 'expose specific properties in a .properties file' -inputs: - src: - description: 'where to look for the .properties file' - required: true - default: './' -outputs: - frontend: - description: 'URL of the hosted frontend app' - backend: - description: 'URL of the hosted backend REST API' -runs: - using: 'node12' - main: 'index.js' \ No newline at end of file diff --git a/.github/actions/props-out/index.js b/.github/actions/props-out/index.js deleted file mode 100644 index 488c6eb..0000000 --- a/.github/actions/props-out/index.js +++ /dev/null @@ -1,19 +0,0 @@ -const core = require('@actions/core'); -const propertiesReader = require('properties-reader'); - -const run = async () => { - try { - const propsLoc = core.getInput('src'); - const properties = propertiesReader(`${propsLoc}app.properties`); - const frontendURL = properties.get('frontend.url'); - const backebdAPI = properties.get('backend.rest'); - - core.setOutput('frontend', frontendURL); - core.setOutput('backend', backebdAPI); - - } catch (error) { - core.setFailed(error.message); - } -}; - -run(); diff --git a/.github/workflows/gradr.yml b/.github/workflows/gradr.yml index 78ed0de..2b1f2c5 100644 --- a/.github/workflows/gradr.yml +++ b/.github/workflows/gradr.yml @@ -8,7 +8,7 @@ on: jobs: lint: name: audit code style - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -18,15 +18,13 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Prepare Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Install Deps - run: | - yarn install - yarn add eslint@^6.8.0 eslint-plugin-import@^2.20.1 eslint-config-airbnb-base@^14.0.0 + run: yarn add eslint@^6.8.0 eslint-plugin-import@^2.20.1 eslint-config-airbnb-base@^14.0.0 - name: Run Audits run: yarn eslint ./src/ @@ -34,7 +32,7 @@ jobs: ch-1: needs: lint name: audit challenge 1 - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -44,7 +42,7 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Prepare Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} @@ -64,7 +62,7 @@ jobs: run: npx jest audits/ch-1 --json --outputFile=audits/ch-1.json --noStackTrace - name: Report Audits - uses: ./.github/actions/jest-out + uses: BuildforSDG-Cohort1-Assessment/jest-out@v1 with: challenge: ch-1 lang: javascript @@ -73,7 +71,7 @@ jobs: ch-2: needs: ch-1 name: audit challenge 2 - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -83,7 +81,7 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Prepare Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} @@ -103,7 +101,7 @@ jobs: run: npx jest audits/ch-2 --json --outputFile=audits/ch-2.json --noStackTrace - name: Report Audits - uses: ./.github/actions/jest-out + uses: BuildforSDG-Cohort1-Assessment/jest-out@v1 with: challenge: ch-2 lang: javascript @@ -112,7 +110,7 @@ jobs: ch-3: needs: ch-2 name: audit challenge 3 - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -122,15 +120,13 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Prepare Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Install Deps - run: | - yarn install - yarn add jest axios xml2json @babel/core @babel/preset-env babel-jest @actions/core @actions/github + run: yarn add jest axios xml2json @babel/core @babel/preset-env babel-jest @actions/core @actions/github - name: Prepare Audits uses: actions/checkout@v2 @@ -142,16 +138,17 @@ jobs: run: npx jest audits/ch-3 --json --outputFile=audits/ch-3.json --noStackTrace - name: Report Audits - uses: ./.github/actions/jest-out + uses: BuildforSDG-Cohort1-Assessment/jest-out@v1 with: challenge: ch-3 lang: javascript if: always() + lighthouse: needs: ch-3 name: audit frontend app (lighthouse) - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -161,31 +158,38 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Install Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Install Deps run: yarn add axios properties-reader @lhci/cli@0.3.x @actions/core @actions/github + + - name: Prepare Audits + uses: actions/checkout@v2 + with: + repository: BuildforSDG-Cohort1-Assessment/covid-19-estimator-audits-js + path: audits - - name: Injest Properties + - name: Injest Frontend App URL id: props - uses: ./.github/actions/props-out + uses: chalu/properties-io@v1 + with: + file: ./app.properties + read-from: frontend.url - name: Run Audits - run: npx lhci autorun --collect.url=${{ steps.props.outputs.frontend }} --config=./audits/lighthouserc.json + run: npx lhci autorun --collect.url=${{ steps.props.outputs.value }} --config=./audits/lighthouserc.json - name: Report Audits - uses: ./.github/actions/lhr-out - with: - lang: javascript + uses: BuildforSDG-Cohort1-Assessment/lighthouse-out@v1 if: always() ch-4: needs: lighthouse name: audit frontend UI - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -195,15 +199,13 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Install Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Install Deps - run: | - yarn install - yarn add jest axios on-covid-19 properties-reader xml2json puppeteer @babel/core @babel/preset-env babel-jest @actions/core @actions/github + run: yarn add jest axios on-covid-19 properties-reader xml2json puppeteer @babel/core @babel/preset-env babel-jest @actions/core @actions/github - name: Prepare Audits uses: actions/checkout@v2 @@ -212,12 +214,10 @@ jobs: path: audits - name: Run Audits - run: | - yarn install - npx jest audits/ch-4 --json --outputFile=audits/ch-4.json --noStackTrace + run: npx jest --config=audits/jest.config.js audits/ch-4 --json --outputFile=audits/ch-4.json --noStackTrace - name: Report Audits - uses: ./.github/actions/jest-out + uses: BuildforSDG-Cohort1-Assessment/jest-out@v1 with: challenge: ch-4 lang: javascript @@ -226,7 +226,7 @@ jobs: ch-5: needs: ch-3 name: audit backend API - runs-on: ubuntu-latest + runs-on: macos-latest strategy: matrix: @@ -236,15 +236,13 @@ jobs: - name: Checkout Repo uses: actions/checkout@v2 - - name: Prepare To Install + - name: Install Node uses: actions/setup-node@v1 with: node-version: ${{ matrix.node-version }} - name: Install Deps - run: | - yarn install - yarn add jest axios on-covid-19 properties-reader xml2json @babel/core @babel/preset-env babel-jest @actions/core @actions/github + run: yarn add jest axios on-covid-19 properties-reader xml2json @babel/core @babel/preset-env babel-jest @actions/core @actions/github - name: Prepare Audits uses: actions/checkout@v2 @@ -253,14 +251,11 @@ jobs: path: audits - name: Run Audits - run: | - yarn install - npx jest audits/ch-5 --json --outputFile=audits/ch-5.json --noStackTrace + run: npx jest --config=audits/jest.config.js audits/ch-5 --json --outputFile=audits/ch-5.json --noStackTrace - name: Report Audits - uses: ./.github/actions/jest-out + uses: BuildforSDG-Cohort1-Assessment/jest-out@v1 with: challenge: ch-5 lang: javascript - if: always() - + if: always() \ No newline at end of file diff --git a/app.properties b/app.properties index beef3e9..a6385a4 100644 --- a/app.properties +++ b/app.properties @@ -1,2 +1,2 @@ -frontend.url = http://example.com +frontend.url = https://covid-19-estimator-f84387.netlify.com/src/ backend.rest = https://jsonplaceholder.typicode.com/todos \ No newline at end of file diff --git a/src/assests/css/main.css b/src/assests/css/main.css new file mode 100644 index 0000000..c0cb5e9 --- /dev/null +++ b/src/assests/css/main.css @@ -0,0 +1,674 @@ + +/* ========================================================================== + #FONT + ========================================================================== */ + .font-robo { + font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif; + } + + .font-poppins { + font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif; + } + + @font-face { + font-family: 'Pacifico'; + font-style: normal; + font-weight: 400; + src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2'); + font-display: swap; + } + + /* ========================================================================== + #GRID + ========================================================================== */ + .row { + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: wrap; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + } + + .row-space { + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -moz-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + } + + .col-2 { + width: -webkit-calc((100% - 30px) / 2); + width: -moz-calc((100% - 30px) / 2); + width: calc((100% - 30px) / 2); + } + + @media (max-width: 767px) { + .col-2 { + width: 100%; + } + } + + /* ========================================================================== + #BOX-SIZING + ========================================================================== */ + /** + * More sensible default box-sizing: + * css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice + */ + html { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + } + + * { + padding: 0; + margin: 0; + } + + *, *:before, *:after { + -webkit-box-sizing: inherit; + -moz-box-sizing: inherit; + box-sizing: inherit; + } + + /* ========================================================================== + #RESET + ========================================================================== */ + /** + * A very simple reset that sits on top of Normalize.css. + */ + body, + h1, h2, h3, h4, h5, h6, + blockquote, p, pre, + dl, dd, ol, ul, + figure, + hr, + fieldset, legend { + margin: 0; + padding: 0; + } + + /** + * Remove trailing margins from nested lists. + */ + li > ol, + li > ul { + margin-bottom: 0; + } + + /** + * Remove default table spacing. + */ + table { + border-collapse: collapse; + border-spacing: 0; + } + + /** + * 1. Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` + * on fieldsets. + */ + fieldset { + min-width: 0; + /* [1] */ + border: 0; + } + + button { + outline: none; + background: none; + border: none; + } + + /* ========================================================================== + #PAGE WRAPPER + ========================================================================== */ + .page-wrapper { + min-height: 100vh; + } + + body { + font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif; + font-weight: 400; + font-size: 14px; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: 400; + } + + h1 { + font-size: 36px; + } + + h2 { + font-size: 30px; + } + + h3 { + font-size: 24px; + } + + h4 { + font-size: 18px; + } + + h5 { + font-size: 15px; + } + + h6 { + font-size: 13px; + } + + /* ========================================================================== + #BACKGROUND + ========================================================================== */ + .bg-blue { + background: #2c6ed5; + } + + .bg-red { + background: #fa4251; + } + + .bg-gra-01 { + background: -webkit-gradient(linear, left bottom, left top, from(#fbc2eb), to(#a18cd1)); + background: -webkit-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%); + background: -moz-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%); + background: -o-linear-gradient(bottom, #fbc2eb 0%, #a18cd1 100%); + background: linear-gradient(to top, #fbc2eb 0%, #a18cd1 100%); + } + + .bg-gra-02 { + background: -webkit-gradient(linear, left bottom, right top, from(#fc2c77), to(#6c4079)); + background: -webkit-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%); + background: -moz-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%); + background: -o-linear-gradient(bottom left, #fc2c77 0%, #6c4079 100%); + background: linear-gradient(to top right, #fc2c77 0%, #6c4079 100%); + } + + /* ========================================================================== + #SPACING + ========================================================================== */ + .p-t-100 { + padding-top: 100px; + } + + .p-t-130 { + padding-top: 130px; + } + + .p-t-180 { + padding-top: 180px; + } + + .p-t-20 { + padding-top: 20px; + } + + .p-t-15 { + padding-top: 15px; + } + + .p-t-10 { + padding-top: 10px; + } + + .p-t-30 { + padding-top: 30px; + } + + .p-b-100 { + padding-bottom: 100px; + } + + .m-r-45 { + margin-right: 45px; + } + + /* ========================================================================== + #WRAPPER + ========================================================================== */ + .wrapper { + margin: 0 auto; + } + + .wrapper--w960 { + max-width: 960px; + } + + .wrapper--w780 { + max-width: 780px; + } + + .wrapper--w680 { + max-width: 680px; + } + + /* ========================================================================== + #BUTTON + ========================================================================== */ +#btn--center{ + display: flex; + justify-content: center; +} + + .btn { + display: inline-block; + line-height: 50px; + padding: 0 50px; + -webkit-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + transition: all 0.4s ease; + cursor: pointer; + font-size: 18px; + color: #fff; + font-family: "Poppins", "Arial", "Helvetica Neue", sans-serif; + } + + .btn--radius { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + } + + .btn--radius-2 { + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + } + + .btn--pill { + -webkit-border-radius: 20px; + -moz-border-radius: 20px; + border-radius: 20px; + } + + .btn--green { + background: #57b846; + } + + .btn--green:hover { + background: #4dae3c; + } + + .btn--blue { + background: #4272d7; + } + + .btn--blue:hover { + background: #3868cd; + } + /* ========================================================================== + #DATE PICKER + ========================================================================== */ + td.active { + background-color: #2c6ed5; + } + + input[type="date" i] { + padding: 14px; + } + + .table-condensed td, .table-condensed th { + font-size: 14px; + font-family: "Roboto", "Arial", "Helvetica Neue", sans-serif; + font-weight: 400; + } + + .daterangepicker td { + width: 40px; + height: 30px; + } + + .daterangepicker { + border: none; + -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + display: none; + border: 1px solid #e0e0e0; + margin-top: 5px; + } + + .daterangepicker::after, .daterangepicker::before { + display: none; + } + + .daterangepicker thead tr th { + padding: 10px 0; + } + + .daterangepicker .table-condensed th select { + border: 1px solid #ccc; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + font-size: 14px; + padding: 5px; + outline: none; + } + + /* ========================================================================== + #FORM + ========================================================================== */ + input { + outline: none; + margin: 0; + border: none; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + width: 100%; + font-size: 14px; + font-family: inherit; + } + + .input--style-4 { + line-height: 50px; + background: #fafafa; + -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + padding: 0 20px; + font-size: 16px; + color: #666; + -webkit-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + transition: all 0.4s ease; + } + + .input--style-4::-webkit-input-placeholder { + /* WebKit, Blink, Edge */ + color: #666; + } + + .input--style-4:-moz-placeholder { + /* Mozilla Firefox 4 to 18 */ + color: #666; + opacity: 1; + } + + .input--style-4::-moz-placeholder { + /* Mozilla Firefox 19+ */ + color: #666; + opacity: 1; + } + + .input--style-4:-ms-input-placeholder { + /* Internet Explorer 10-11 */ + color: #666; + } + + .input--style-4:-ms-input-placeholder { + /* Microsoft Edge */ + color: #666; + } + + .label { + font-size: 16px; + color: #555; + text-transform: capitalize; + display: block; + margin-bottom: 5px; + } + + .radio-container { + display: inline-block; + position: relative; + padding-left: 30px; + cursor: pointer; + font-size: 16px; + color: #666; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + } + + .radio-container input { + position: absolute; + opacity: 0; + cursor: pointer; + } + + .radio-container input:checked ~ .checkmark { + background-color: #e5e5e5; + } + + .radio-container input:checked ~ .checkmark:after { + display: block; + } + + .radio-container .checkmark:after { + top: 50%; + left: 50%; + -webkit-transform: translate(-50%, -50%); + -moz-transform: translate(-50%, -50%); + -ms-transform: translate(-50%, -50%); + -o-transform: translate(-50%, -50%); + transform: translate(-50%, -50%); + width: 12px; + height: 12px; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + background: #57b846; + } + + .checkmark { + position: absolute; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + left: 0; + height: 20px; + width: 20px; + background-color: #e5e5e5; + -webkit-border-radius: 50%; + -moz-border-radius: 50%; + border-radius: 50%; + -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + } + + .checkmark:after { + content: ""; + position: absolute; + display: none; + } + + .input-group { + position: relative; + margin-bottom: 22px; + } + + .input-group-icon { + position: relative; + } + + .input-icon { + position: absolute; + font-size: 18px; + color: #999; + right: 18px; + top: 50%; + -webkit-transform: translateY(-50%); + -moz-transform: translateY(-50%); + -ms-transform: translateY(-50%); + -o-transform: translateY(-50%); + transform: translateY(-50%); + cursor: pointer; + } + + /* ========================================================================== + #SELECT2 + ========================================================================== */ + .select--no-search .select2-search { + display: none !important; + } + + .rs-select2 .select2-container { + width: 100% !important; + outline: none; + background: #fafafa; + -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -moz-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.08); + -webkit-border-radius: 5px; + -moz-border-radius: 5px; + border-radius: 5px; + } + + .rs-select2 .select2-container .select2-selection--single { + outline: none; + border: none; + height: 50px; + background: transparent; + } + + .rs-select2 .select2-container .select2-selection--single .select2-selection__rendered { + line-height: 50px; + padding-left: 0; + color: #555; + font-size: 16px; + font-family: inherit; + padding-left: 22px; + padding-right: 50px; + } + + .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow { + height: 50px; + right: 20px; + display: -webkit-box; + display: -webkit-flex; + display: -moz-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -moz-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -webkit-align-items: center; + -moz-box-align: center; + -ms-flex-align: center; + align-items: center; + } + + .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow b { + display: none; + } + + .rs-select2 .select2-container .select2-selection--single .select2-selection__arrow:after { + font-family: "Material-Design-Iconic-Font"; + content: '\f2f9'; + font-size: 24px; + color: #999; + -webkit-transition: all 0.4s ease; + -o-transition: all 0.4s ease; + -moz-transition: all 0.4s ease; + transition: all 0.4s ease; + } + + .rs-select2 .select2-container.select2-container--open .select2-selection--single .select2-selection__arrow::after { + -webkit-transform: rotate(-180deg); + -moz-transform: rotate(-180deg); + -ms-transform: rotate(-180deg); + -o-transform: rotate(-180deg); + transform: rotate(-180deg); + } + + .select2-container--open .select2-dropdown--below { + border: none; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + border: 1px solid #e0e0e0; + margin-top: 5px; + overflow: hidden; + } + + .select2-container--default .select2-results__option { + padding-left: 22px; + } + + /* ========================================================================== + #TITLE + ========================================================================== */ + .title { + font-size: 24px; + color: #525252; + font-weight: 400; + margin-bottom: 10px; + } + .subtitle{ + font-size: 19px; + color: #525252; + font-weight: 400; + margin-bottom: 5px; + } + .is-text-centred{ + text-align: center; + } + + /* ========================================================================== + #CARD + ========================================================================== */ + .card { + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + background: #fff; + } + + .card-4 { + background: #fff; + -webkit-border-radius: 10px; + -moz-border-radius: 10px; + border-radius: 10px; + -webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + -moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15); + } + + .card-4 .card-body { + padding: 57px 65px; + padding-bottom: 65px; + } + + @media (max-width: 767px) { + .card-4 .card-body { + padding: 50px 40px; + } + } + select.form-control { + height: 50px; + line-height: 50px; +} +.form-control { + height: 30px; + padding: 5px 10px; + font-size: 12px; + line-height: 1.5; + border-radius: 3px; +} \ No newline at end of file diff --git a/src/assests/images/build-sdg.png b/src/assests/images/build-sdg.png new file mode 100644 index 0000000..54c0f00 Binary files /dev/null and b/src/assests/images/build-sdg.png differ diff --git a/src/assests/images/header-a.png b/src/assests/images/header-a.png new file mode 100644 index 0000000..4ff7b69 Binary files /dev/null and b/src/assests/images/header-a.png differ diff --git a/src/assests/images/logo-dark.png b/src/assests/images/logo-dark.png new file mode 100644 index 0000000..67c1345 Binary files /dev/null and b/src/assests/images/logo-dark.png differ diff --git a/src/estimator.js b/src/estimator.js index 193bf16..871c21e 100644 --- a/src/estimator.js +++ b/src/estimator.js @@ -1,3 +1,141 @@ -const covid19ImpactEstimator = (data) => data; +/* eslint-disable linebreak-style */ +/* eslint-disable no-sequences */ +/* eslint-disable no-use-before-define */ +/* eslint-disable linebreak-style */ +/* eslint-disable eol-last */ +/* eslint-disable linebreak-style */ +/* eslint-disable radix */ +/* eslint-disable linebreak-style */ +/* eslint-disable no-console */ +/* eslint-disable linebreak-style */ +/* eslint-disable max-len */ +/* eslint-disable linebreak-style */ +/* eslint-disable no-const-assign */ +/* eslint-disable no-undef */ +/* eslint-disable linebreak-style */ +/* eslint-disable no-unused-vars */ +const covid19ImpactEstimator = (data) => { + // Destructuring the given data + const { + region: { + avgDailyIncomePopulation, + avgDailyIncomeInUSD + }, + reportedCases, + timeToElapse, + periodType, + population, + totalHospitalBeds + } = data; + + const impact = {}; + + const severeImpact = {}; + + // challenge one + impact.currentlyInfected = reportedCases * 10; + severeImpact.currentlyInfected = reportedCases * 50; + + // check if the timeToElapse in in days weeks or months + + let timeFactor; + + switch (periodType.trim().toLowerCase()) { + case 'months': + timeFactor = Math.trunc((timeToElapse * 30) / 3); + break; + case 'weeks': + timeFactor = Math.trunc((timeToElapse * 7) / 3); + break; + case 'days': + timeFactor = Math.trunc((timeToElapse) / 3); + break; + default: + } + + // infections by time passed + impact.infectionsByRequestedTime = impact.currentlyInfected * (2 ** timeFactor); + severeImpact.infectionsByRequestedTime = severeImpact.currentlyInfected * (2 ** timeFactor); + + // challenge two + const impactRequestedTime = impact.infectionsByRequestedTime * 0.15; + const severeRequestedTime = severeImpact.infectionsByRequestedTime * 0.15; + + impact.severeCasesByRequestedTime = Math.trunc(impactRequestedTime); // 15% + severeImpact.severeCasesByRequestedTime = Math.trunc(severeRequestedTime); // 15% + + // compute AvailableBeds ByRequestedTime + const bedsAvailable = totalHospitalBeds * 0.35; // assuming that totalhospitalbeds available = 23 - 100% + const impactShortage = bedsAvailable - impactRequestedTime; // occupied = 65% * 23/100 which is 14.95 beds ***discard decimal*** + const severeShortage = bedsAvailable - severeRequestedTime; // 100 - 65 = 35 beds availabele 23/100 * 35% = 8.1 beds ***discard decimal*** + + + impact.hospitalBedsByRequestedTime = Math.trunc(impactShortage); + severeImpact.hospitalBedsByRequestedTime = Math.trunc(severeShortage); + + // challenge three + // computation for impact and severeImpact + const CasesICU = impact.infectionsByRequestedTime * 0.05; + const ImpactCasesforICU = severeImpact.infectionsByRequestedTime * 0.05; + + const Ventilators = impact.infectionsByRequestedTime * 0.02; + const ImpactVentilators = severeImpact.infectionsByRequestedTime * 0.02; + + + impact.casesForICUByRequestedTime = Math.trunc(CasesICU); + severeImpact.casesForICUByRequestedTime = Math.trunc(ImpactCasesforICU); + + impact.casesForVentilatorsByRequestedTime = Math.trunc(Ventilators); + severeImpact.casesForVentilatorsByRequestedTime = Math.trunc(ImpactVentilators); + + // computation for dollars in fight + const computeIncome = avgDailyIncomePopulation * avgDailyIncomeInUSD; + + const impactmoneylose = (impact.infectionsByRequestedTime * computeIncome); + const severemoneylose = (severeImpact.infectionsByRequestedTime * computeIncome); + + let usdInFight; + if (periodType === 'months') { + usdInFight = timeToElapse * 30; + + impact.dollarsInFlight = Math.trunc((impactmoneylose) / usdInFight); + severeImpact.dollarsInFlight = Math.trunc((severemoneylose) / usdInFight); + } else if (periodType === 'weeks') { + usdInFight = timeToElapse * 7; + + impact.dollarsInFlight = Math.trunc((impactmoneylose) / usdInFight); + severeImpact.dollarsInFlight = Math.trunc((severemoneylose) / usdInFight); + } else if (periodType === 'days') { + usdInFight = timeToElapse * 1; + + impact.dollarsInFlight = Math.trunc((impactmoneylose) / usdInFight); + severeImpact.dollarsInFlight = Math.trunc((severemoneylose) / usdInFight); + } + + // impact.dollarsInFlight = Math.trunc((impact.infectionsByRequestedTime * compute) / usdInFight); + // severeImpact.dollarsInFlight = Math.trunc((severeImpact.infectionsByRequestedTime * compute) / usdInFight); + + return { + data, + impact, + severeImpact + }; +}; + +// Test output console +// const sample = { +// region: { +// name: 'Africa', +// avgAge: 19.7, +// avgDailyIncomeInUSD: 4, +// avgDailyIncomePopulation: 0.73 +// }, +// periodType: 'days', +// timeToElapse: 38, +// reportedCases: 2747, +// population: 92931687, +// totalHospitalBeds: 678874 +// }; +// console.log(covid19ImpactEstimator(sample)); export default covid19ImpactEstimator; diff --git a/src/index.html b/src/index.html new file mode 100644 index 0000000..2095166 --- /dev/null +++ b/src/index.html @@ -0,0 +1,119 @@ + + + + + + + + + + + + + #BuildForSDG-2020-Assessment | COVID-19 ESTIMATOR + + + + + + + + + +
+
+
+
+

COVID-19 Estimator

+

Data Collection/Estimation

+ Scroll to View OutPut +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+ +
+
+
+

Estimated Data Output

+

Impact/Severe Impact Cases

+
+ + +
+
+
+ +
+

Impact Cases

+ + + + +
+
+
+
+ +
+

Severe Impact Cases

+ + + + +
+
+
+
+
+ + +
+
+
+
+ + \ No newline at end of file