-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
106 lines (88 loc) · 4.89 KB
/
index.html
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
100
101
102
103
104
105
106
<!doctype html>
<html lang="en">
<head>
<title>Akan names</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Ghanian Akan names</h1>
<div id="container">
<img src="./Images/cropGhanian women dancing.png" alt="Ghanian Culture" height="400px; width:300px">
<div id="text">
<p>
The significance attached to names and naming in Ghanian society is remarkable!
Frequently, children are given their first name
as a 'day name' which corresponds to the day of the week they were born.
<br>
<i style="color: #f54e0c;font-weight:700;">These "day names" have further meanings concerning the character of a person.</i></p>
<p>Some examples of the Ghanian male day names; Kwasi, Kwadwo, Kwabena, Kwaku, Yaw, Kofi and Kwame. Some examples
of the Ghanian female day names include; Akosua, Adwoa, Abenaa, Akua, Yaa, Afua and Ama.</p>
<p>Most people do know when their birthdays are, but some might not know what day of the week they were born. Luckily for us, we will
be able to take the user's birthday and calculate the day of the week they were born and then depending on their gender output their Akan Name.</p>
</div>
</div>
<div class="col-md-6 main-right">
<h2>Enter your date of birth and gender to know your respective Akan name</h2>
<div class="form">
<form name="akanform" onsubmit=" return false" >
<div class="dates">
<ul>
<li>
<label for="" style="font-size: larger;">Enter your date of birth</label>
</li>
<li>
<input type="date" class="dob" name="mydate" id="mydate" style="font-size: larger;">
</li>
<li><div class = "errormessage" id = "mydateerror"></div></li>
</ul>
</div>
<div class="gender">
<ul>
<li>
<label for="" style="font-size: larger;">Select your gender</label>
</li>
<li>
<input type="radio" name="gender" value="male" class="radio" id="male" style="font-size: larger;">Male
<input type="radio" name="gender" value="female" class="radio" id="female" style="margin-left: 40px;" style="font-size: larger;">Female
</li>
<li><div class = "errormessage" id = "gendererror"></div></li>
</ul>
</div>
<input type="submit" name="submit" class="button" value="Generate" onclick="validate()" style="margin-left: 40px;">
<input type="reset" onclick="refresh(); return false;" class="button" value="Refresh">
</form>
<hr>
<div class="diplay" id="display"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-sm">
<img src="./Images/Ghanian man and woman dancing.png" alt="Ghanian Culture" height="350px; width:300px">
</div>
<div class="col-sm">
<img src="./Images/Ghanian men praying.png" alt="Ghanian Culture" height="350px; width:300px">
</div>
<div class="col-sm">
<img src="./Images/Ghanian man and woman.png" alt="Ghanian Culture" height="350px; width:300px">
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>