Advertisement

How to create rectangle using javascript or html

html javascript

Warning Yi

asked 01 Sep, 2021

So basically i’m trying to display slots, when the user selects a location and clicks the check slot button .

i’m trying to display rectangle when the Check Slot is clicked, similar to the attached image. Please refer the image Image .

HTML CODE

<!DOCTYPE html>
<html>
<head>
    <title>TODO supply a title</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
    <label>Location</label>
    <select name="location">
      <option>Location 1 </option>
      <option>Location 2 </option>
      <option>Location 3 </option>
      <option>Location 4 </option>
  </select><br><br>

  
  <button> Check Slots </button>
  
  <label> Choose a slot: </label>
  
</body>
</html>

Advertisement

Answer

Use CSS Grid

You can use a Grid Layout to display slots neatly.

<!DOCTYPE html>
<html>

<head>
  <title>Slots Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<style>
  /**********************
  * Container of slots *
  **********************/
  .slots-container {
    width: 500px;
    padding: 50px;
    border: 1px solid black;

    /* specify display as `grid` */
    display: grid;

    /*
    specify template for columns in the grid
    here 3 would mean the no. of slots you
    need in each row and 1fr means 1
    Fractional Unit
    */
    grid-template-columns: repeat(3, 1fr);

    /*
    `row-gap` would specify distance b/w adjacent rows
    `column-gap` would specify distance b/w adjacent columns
    */
    row-gap: 50px;
    column-gap: 50px;
  }

  /********
  * Slot *
  ********/
  .slot {
    height: 200px;
    border: 1px solid black;
  }
</style>

<body>
  <div class="slots-container">
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
    <div class="slot"></div>
  </div>

</body>

</html>

Advertisement