edwardlorilla

<div class="gameOptions">
  Max number value : <input type="number" value="10" id="maxVal"><br>
  Number of Questions : <input type="number" value="2" id="numQuestions"><br>
  Select Operators : <br> 
  <select id="selOpt" multiple>
    <option value="0" selected>&times;</option>
    <option value="1" selected>/</option>
    <option value="2" selected>+</option>  
    <option value="3" selected>-</option>  
  </select>

edwardlorilla

<div class="gameOptions">
  Max number value : <input type="number" value="10" id="maxVal"><br>
  Number of Questions : <input type="number" value="2" id="numQuestions"><br>
  Select Operators : <br> 
  <select id="selOpt" multiple>
    <option value="0" selected>&times;</option>
    <option value="1" selected>/</option>
    <option value="2" selected>+</option>  
    <option value="3" selected>-</option>  
  </select>

edwardlorilla

<div id="app">
  <input type="file" @change="onPdf" /><br>
  <canvas ref="pdfViewer"></canvas>
</div>

edwardlorilla

<div>
  <h1>Cart</h1>
  <img src="https://via.placeholder.com/150?text=Chillis"/>
  
  <h3 class="product">Product:<span>Bag of red chillis</span></h3>
  <h3 class="price">Price:<span>$4.99</span></h3>
  <label for="amount">Quantity</label>
  <input id="amount" type="number" value="5" min="0">
  <h3 class="price">SubTotal:</h3>
  <h3><div class="currency">$</div><div id="subTotalText">24.95</div></h3>

edwardlorilla

<div>
  <h1>Graphing Calculator</h1>
  <p style="color: red;"><span id="status_message">Click a button below the grid to graph an equation</span></p>
  <canvas id="canvas" width="400" height="400">
    Your browser does not support the HTML 5 Canvas. 
  </canvas>
  <form>
    <input type="button" id="y_equals_x" value="y = 1x" style="color: green;"/>
    <input type="button" id="y_equals_negative_x" value="y = -1x" style="color: purple;"/>
    <input type="button" id="y_equals_two_x" value="y = 2x" style="color: blue;"/>

edwardlorilla

<div id="div">
<div class="rollbox"></div>
</div>
</body>

edwardlorilla

<div id="dv">
  <label for="password">Password</label>
  <input type="text" id="password" maxlength="16"><!--Extracurricular topics-->
  <div>
    password strength:
    <em id="strength"></em>
    <div id="strengthLevel" class="strengthLv0"></div>
  </div>
</div>

edwardlorilla

<div>
  <h1>Cart</h1>
  <div id="discount">Buy 10, get 20% off!</div>
  <img src="https://dummyimage.com/600x400/000000/ff0015&text=chillis"/>
  
  <h3 class="product">Product:<span>Bag of red chillis</span></h3>
  <h3 class="price">Price:<span>$4.99</span></h3>
  <label for="amount">Quantity</label>
  <input id="amount" type="number" value="0" min="0">
  <div id="getmore">Add 2 more to get discount....</div>

edwardlorilla

<h2>Notes App</h2>
<button class="fab" id="myBtn">+</button>
<simple-form-modal-component></simple-form-modal-component>
<note-list-component></note-list-component>

edwardlorilla

create a weight converter

A Pen by Edward Lance Lorilla on CodePen.

License.