feat: LGTMかLGTNを選べるラジオボタンを追加

haruyan-hopemucci · Nov 20, 2023 · 3d1769a · 3d1769a
1 parent 4d83e8f
commit 3d1769a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/docs/index.html b/docs/index.html
@@ -30,7 +30,18 @@ <h1>LGTN Generator <small>v0.1.0</small></h1>
       <div id="paste-area" contenteditable="true">
         ここをクリックした後画像をペーストしてください。
       </div>
+      <div>
+        <div class="form-check form-check-inline">
+          <input class="form-check-input" type="radio" name="chooseOverlay" id="inlineRadio1" value="lgtm" checked>
+          <label class="form-check-label" for="inlineRadio1">LGTM</label>
+        </div>
+        <div class="form-check form-check-inline">
+          <input class="form-check-input" type="radio" name="chooseOverlay" id="inlineRadio2" value="lgtn">
+          <label class="form-check-label" for="inlineRadio2">LGTN</label>
+        </div>
+      </div>
       <img id="pasted-image" hidden />
+      <img id="img__lgtm" src="./img/lgtm.png" hidden />
       <img id="img__lgtn" src="./img/lgtn.png" hidden />
       <canvas id="output-image" width="400" height="400"></canvas>
       <div class="alert alert-warning" role="alert">

diff --git a/docs/js/app.js b/docs/js/app.js
@@ -34,7 +34,8 @@ $(function (){
 
   const drawCanvas = function() {
     const imgEl = document.querySelector("#pasted-image")
-    const lgtnEl = document.querySelector("#img__lgtn")
+    const selectedImageId = document.querySelector('input[name="chooseOverlay"]:checked').value
+    const lgtnEl = document.querySelector(`#img__${selectedImageId}`)
     const canvas = document.querySelector('#output-image')
     const context = canvas.getContext('2d')