akan-name/akan-name-generator.html at master · claudiahW/akan-name · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html>
    <head>
      <title> Akan Name Generator</title>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link href="css/styles.css" rel="stylesheet" type="text/css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>

<div class="container">
        <h1>Find Out Your Akan Name Here!</h1>
        <p> Welcome to my Akan Name Generator.All we need is your birthday
            and you will be able to see the day of the week you were born.

            Akan names are derived from Ghanaian culture.Frequently in Ghana,
           children are given their first name as a day name which corresponds to the
            day of the week they were born.Here are Ghanaian day names.</p>

        <div class="row">

         <div class="col" id="gender">
        <div class="dropdown ">
            <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">Click to see Male Akan Names</button>
                    <ul class="dropdown-menu">
                        <li>Sunday : Kwasi</li>
                        <li>Monday : Kwadwo </li>
                        <li>Tuesday :Kwabena </li>
                        <li>Wednesday : Kwaku</li>
                        <li>Thursday : Yaw</li>
                        <li>Friday : Kofi</li>
                        <li>Saturday : Kwame</li>
                    </ul>
          </div>
          <div class="dropdown mt-3">
                <button type="button" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown">Click to see Female Akan Names</button>
                    <ul class="dropdown-menu">
                        <li>Sunday : Akosua</li>
                        <li>Monday : Adwoa </li>
                        <li>Tuesday : Abenaa</li>
                        <li>Wednesday :Akua </li>
                        <li>Thursday : Yaa </li>
                        <li>Friday : Afua </li>
                        <li>Saturday : Ama</li>
                    </ul>
          </div>

         </div>
          <div class="col form" >
            <form id="Form" onSubmit="return false">

                <div class="mb-3 mt-3">
                <label for="date" class="form-label">DATE:</label>
                <input type="number" name="day" id="date" min="1" max="31" required>
                </div>

                <div class="mb-3 mt-3">
                    <label for="month" class="form-label">MONTH:</label>
                <input type="number" name="Month of birth" id="month" min="1" max="12" required><br>
                </div>

                <div class="mb-3 mt-3">
                    <label for="year" class="form-label">YEAR:</label>
                <input type="number" name="Year of birth" id="year" min="1980" max="2030" required>
                </div>

                <div class ="genderB">
                <input type="radio" name="gender" value="female">Female
                <input type="radio" name="gender" value="male">Male
                </div>
                <br>
                <br>
            </form>

        </div>
        <div class="col">
            <button type="button" class="btn btn-secondary" onclick="Calculator()">
                Generating..
         </button>

     <h3 class="alert alert-secondary alert-dismissable mt-2" id="alert">

     </h3>


     <!-- <h3 class="alert alert-secondary" id="alert2"></h3> -->
        </div>
         </div>
        </div>

        <footer>ClaudiahW copyright 2023 </footer>
    </div>
        <script src="scripts.js"></script>


    </body>
</html>