implement base template and custom datepicker

Quanmuito · Jan 22, 2024 · 82b29c8 · 82b29c8
1 parent d78661d
commit 82b29c8
Show file tree

Hide file tree

Showing 10 changed files with 506 additions and 12 deletions.
diff --git a/README.md b/README.md
@@ -4,18 +4,23 @@
 #### Description
 Shipping Calculator is an application used to calculate shipping fees based on number/value of items, distance and delivery time.
 
-### Local setup
+### Tools
+React, typescript, sass, bootstrap, eslint, gh-pages
+
+### Local setup and debug
 - Clone this repository to your local machine.
 
-- Install [Node.js](https://nodejs.org/en/). Recommend version: 20.9.0.
+- Install [Node.js](https://nodejs.org/en/). Recommended version: 20.9.0.
 
 - Open a terminal from the project directory.
 
 - Run command `yarn install` (or `npm install`) to install packages.
 
 - Run command `yarn start` (or `npm start`) to start the project.
 
-- Access at [localhost:3000/wolt-intern-2024](localhost:3000/wolt-intern-2024)
+- Access at [localhost:3000/wolt-intern-2024](localhost:3000/wolt-intern-2024).
+
+- You can run in debug mode with VSCode by press `F5` or `Ctrl+Shift+D` and `Start Debugging`.
 
 ### Test
 

diff --git a/public/index.html b/public/index.html
@@ -6,17 +6,18 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta name="description" content="Shipping Calculator is used to calculate shipping fees based on items, distance and time." />
-    <meta property="og:locale" content="en_US">
-    <meta property="og:type" content="website">
-    <meta property="og:title" content="Shipping Calculator">
-    <meta property="og:description" content="Shipping Calculator is used to calculate shipping fees based on items, distance and time.">
-    <meta property="og:url" content="https://quanmuito.github.io/wolt-intern-2024/">
-    <meta property="og:site_name" content="Shipping Calculator">
+    <meta property="og:locale" content="en_US" />
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Shipping Calculator" />
+    <meta property="og:description" content="Shipping Calculator is used to calculate shipping fees based on items, distance and time." />
+    <meta property="og:url" content="https://quanmuito.github.io/wolt-intern-2024/" />
+    <meta property="og:site_name" content="Shipping Calculator" />
 
     <link rel="icon" href="%PUBLIC_URL%/icon.ico" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous" />
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css" rel="stylesheet" />
 
     <title>Shipping Calculator</title>
 </head>

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,125 @@
+import { DatePicker } from 'components';
 import React from 'react';
 
 export default function App() {
     return (
         <div className="App">
-            Hello World
+            <div className="container">
+                <div className="input-group">
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        Cart value
+                    </span>
+                    <input
+                        id="cartValue"
+                        name="cartValue"
+                        data-test-id="cartValue"
+                        type="text"
+                        className="form-control"
+                        aria-label="Total value of items in cart"
+                    />
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        <i className="bi bi-currency-euro"></i>
+                    </span>
+                </div>
+                <div className="input-group">
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        Delivery distance
+                    </span>
+                    <input
+                        id="deliveryDistance"
+                        name="deliveryDistance"
+                        data-test-id="deliveryDistance"
+                        type="text"
+                        className="form-control"
+                        aria-label="Delivery distance"
+                    />
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        m
+                    </span>
+                </div>
+                <div className="input-group">
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        Number of item
+                    </span>
+                    <input
+                        id="numberOfItems"
+                        name="numberOfItems"
+                        data-test-id="numberOfItems"
+                        type="text"
+                        className="form-control"
+                        aria-label="Total amount of items"
+                    />
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        <i className="bi bi-currency-euro"></i>
+                    </span>
+                </div>
+                <div className="input-group">
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        Order time
+                    </span>
+                    <input
+                        type="text"
+                        id="orderTime"
+                        name="orderTime"
+                        data-test-id="orderTime"
+                        className="form-control"
+                        // onChange={ () => console.log(getInputValueFromDateDetails(state.selected)) }
+                        // value={ getInputValueFromDateDetails(state.selected) }
+                    />
+                    <button
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        <i className="bi bi-calendar3"></i>
+                    </button>
+                </div>
+                <DatePicker />
+                <button className="btn btn-primary">Calculate delivery price</button>
+                <div className="input-group">
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        Delivery Price
+                    </span>
+                    <input
+                        id="fee"
+                        name="fee"
+                        data-test-id="fee"
+                        type="text"
+                        className="form-control"
+                        aria-label="Final price"
+                        disabled={ true }
+                    />
+                    <span
+                        className="input-group-text justify-content-center"
+                        style={ { width: '15%' } }
+                    >
+                        <i className="bi bi-currency-euro"></i>
+                    </span>
+                </div>
+            </div>
         </div>
     );
 }