賛成反対アプリ
賛成
反対
投票結果
賛成者数: 0人
反対者数: 0人
総投票者数: 0人
以下は、ユーザーの具体的な要望に基づいて作成されたサンプルプログラムです。 ```html <!DOCTYPE html> <html> <head> <title>賛成反対アプリ</title> <style> body { font-family: Arial, sans-serif; line-height: 1.5; } .container { max-width: 500px; margin: 0 auto; padding: 20px; } h1 { text-align: center; } .vote-section { margin: 20px 0; } .vote-input { margin-bottom: 10px; } .vote-button { background-color: #4CAF50; color: white; padding: 10px 20px; border: none; cursor: pointer; } .vote-result { margin-top: 20px; } </style> </head> <body> <div class="container"> <h1>賛成反対アプリ</h1> <div class="vote-section"> <h2>賛成</h2> <input type="text" id="agreeName" class="vote-input" placeholder="名前"> <button onclick="voteAgree()" class="vote-button">賛成する</button> </div> <div class="vote-section"> <h2>反対</h2> <input type="text" id="opposeName" class="vote-input" placeholder="名前"> <button onclick="voteOppose()" class="vote-button">反対する</button> </div> <div class="vote-result"> <h2>投票結果</h2> <p>賛成者数: <span id="agreeCount">0</span>人</p> <p>反対者数: <span id="opposeCount">0</span>人</p> <p>総投票者数: <span id="totalCount">0</span>人</p> </div> </div> <script> var agreeCount = 0; var opposeCount = 0; function voteAgree() { var agreeName = document.getElementById("agreeName").value; if (agreeName) { agreeCount++; document.getElementById("agreeCount").textContent = agreeCount; updateTotalCount(); document.getElementById("agreeName").value = ""; } } function voteOppose() { var opposeName = document.getElementById("opposeName").value; if (opposeName) { opposeCount++; document.getElementById("opposeCount").textContent = opposeCount; updateTotalCount(); document.getElementById("opposeName").value = ""; } } function updateTotalCount() { var totalCount = agreeCount + opposeCount; document.getElementById("totalCount").textContent = totalCount; } </script> </body> </html> ``` このプログラムでは、賛成欄と反対欄を作成し、賛成ボタンと反対ボタンで投票することができます。投票された結果はリアルタイムで集計され、投票結果セクションに表示されます。 また、投票者の名前は記名または無記名で入力可能です。名前は投票時に表示されませんが、集計された総投票数には反映されます。 QRコードによる投票案内機能はこのサンプルでは実装されていませんが、QRコード生成ライブラリを使用して独自に実装することが可能です。