-
Notifications
You must be signed in to change notification settings - Fork 0
/
extra-activity.html
109 lines (106 loc) · 5.95 KB
/
extra-activity.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
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Activities | Spring Flowers School</title>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">
<link rel="icon" type="image/png" href="assests/logo.png"/>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light py-0 text-primary">
<div class="container-fluid">
<a class="navbar-brand py-0" href="index.html">
<img src="assests/logo.png" alt="Sprint flowers Logo" id="logo">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarTogglerDemo02">
<ul class="navbar-nav ms-auto mb-2 mb-lg-0 me-5 pe-3">
<li class="nav-item px-1">
<a class="nav-link" href="welcome.html">Home</a>
</li>
<li class="nav-item px-1">
<a class="nav-link" href="time-table.html">Time Table</a>
</li>
<li class="nav-item px-1">
<a class="nav-link" href="exam-result.html">Exam Result</a>
</li>
<li class="nav-item px-1">
<a class="nav-link active" href="extra-activity.html">Extra Activity</a>
</li>
<li class="nav-item dropdown btn-group ">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-offset="30,50">
<span id="student-name">Student</span>
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li class="nav-item px-1">
<a class="nav-link dropdown-item" href="user-profile.html">
<span>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="30" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</span>
<span> User Profile</span>
</a>
</li>
<li><a class="nav-link dropdown-item" href="index.html">Logout</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<hr>
<main class="bg-light">
<div class="container p-5 col-sm-11 col-md-9">
<p class="display-6">Extra Activity</p>
<div class="alert alert-success d-none" role="alert" id="activity-alert">
<span class="px-2"><svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
<path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/>
</svg>
</span>
Activity updated. Details to be checked in Home page
</div>
<p>Keep track of your accomplishments by adding any extra activities you completed today in the form below.</p>
<form>
<div class="extra-activity border px-5 pt-4 pb-2 shadow bg-body rounded ">
<div class="mb-3">
<label for="activity-name" class="form-label">Activity Name</label>
<input type="text" class="form-control" id="activity-name" placeholder="Enter activity name">
</div>
<div class="mb-3">
<label for="activity-desc" class="form-label">Description</label>
<textarea class="form-control" id="activity-desc" rows="3"></textarea>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-primary mb-3" id="submit-activity">Submit</button>
</div>
</div>
</form>
</main>
<footer class="py-4">© 2023 All rights reserved.</footer>
<!-- <script src="login.js"></script> -->
<script>
var studentName = document.querySelector("#student-name");
studentName.innerText = sessionStorage.getItem("username");
const activityName = document.querySelector("#activity-name");
const activityDesc = document.querySelector("#activity-desc");
const btn_submitActivity = document.querySelector("#submit-activity");
const activityAlert = document.querySelector("#activity-alert");
function addActivity(event){
event.preventDefault();
sessionStorage.setItem(`${activityName.value}__Activity__`, activityDesc.value);
activityAlert.classList.remove("d-none");
activityAlert.classList.add("d-block");
setTimeout(() => location.reload(), 2000);
}
btn_submitActivity.addEventListener("click", addActivity);
</script>
</body>
</html>