Skip to main content
⏱ 0:00est. 9 min

Coin DCX

// Round 1
// Build https://hrcdn.net/s3_pub/istreet-assets/P56gQeR7gaLckZWuLQrMOQ/trading_terminal_layout.png

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Coindcx Trading Terminal</title>
</head>
<!--  -->
 <!-- createContext() -->
 <!-- React.useReducer() -->
 <!-- React.useContext() -->
<body>
    <div class="app-container">
        <header class="header">
            <div>Logo</div>
            <nav>
                <a href="" /></a>
            </nav>
        </header>
        <div class="app">
            <div class="chart-view-wrapper flex-row">
                <div class="chart-view-container">
                    <div class="flex-row">
                    </div>
                    <div class="side-bar">
                    </div>
                </div>
                <div class="chart-view-footer">
                </div>
            </div>
            <div class="side-bar">
            </div>
        </div>
    </div>
</body>
</html>

<!-- template - grid -->
<!-- internal componets - flex -->

/* Add your css styles here */


.app-container {
  width: 90%;
  margin: 0 auto;
  height: 100vh;
  border: 1px solid #000;
  display: flex;
  flex-direction: column;
  padding: 10px;
}

.header {
    height: 30px;
    width: 100%;
    border: 1px solid red;
    margin-bottom: 10px;
}

.app {
    width: 100%;
    border: 1px solid green;
    display: flex;
    flex-direction: row;
    height: 100%;
}
.chart-view-wrapper {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.chart-view-container {
    flex: 2;
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
}
.chart-view-footer {
    flex: 1;
    height: 100%;
    width: 100%;
    border: 1px solid purple;
}
.flex-row {
    display: flex;
    border: 1px solid blue;
    flex: 2;
    height: 100%;
}
.side-bar {
    border: 1px solid yellow;   
    flex: 1;
    height: 100%;
}


@media only sceen and (min-width: 720px) {
    .chart-view-container {
        flex-direction: column;
    }
}

// Add your javascript here

// API call on change of input, create a debounce which calls the api function every 500ms

async function getProducts () {
  // objects
  return new Promise ((resolve, reject) => {
      setTimeout(resolve('done'), 2000);
  })
}

function debounce (fn, ttl = 500) {
  let timer; 
  return function (...args) {
      const ctx = this;
      clearTimeout(timer);
      timer = setTimeout(() => {
          fn.apply(ctx, args);
      }, ttl)
  }
}

const debouncedProduct = debounce(getProducts)