assessment.html

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="twitter:card" content="summary">
    <meta property="og:url" content="https://E233-3639.github.io/assessment/assessment.html">
    <meta property="og:title" content="あなたのいいところ診断">
    <meta property="og:description" content="N予備校プログラミング入門コースで制作した「あなたのいいところ診断」サイトです。">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <title>あなたのいいところ診断</title>
</head>

<body class="bg-primary-subtle">
    <header>
        <nav class="navbar bg-primary" data-bs-theme="dark">
            <div class="container-fluid">
                <a class="navbar-brand" href="#">あなたのいいところ診断</a>
            </div>
        </nav>
    </header>
    <div class="container pt-5">
        <h1>あなたのいいところは？</h1>
        <p>診断したい名前を入れてください</p>
        <div class="row">
            <div class="col-sm-9 col-lg-6">
                <div class="input-group mb-3">
                    <input type="text" class="form-control" id="user-name" size="50" maxlength="50">
                    <button class="btn btn-primary" id="assessment">診断する</button>
                </div>
            </div>
        </div>
        <div id="row">
            <div class="col-lg-9">
                <div id="result-area"></div>
            </div>
        </div>
        <div id="tweet-area" class="mt-3"></div>
    </div>
    <script src="assessment.js"></script>
</body>

</html>