Skip to content

Commit

Permalink
Layout of Assignment and Template complete
Browse files Browse the repository at this point in the history
  • Loading branch information
Quokka committed Nov 11, 2022
1 parent 1e3c1c7 commit fa8884c
Show file tree
Hide file tree
Showing 2 changed files with 266 additions and 1 deletion.
265 changes: 265 additions & 0 deletions src/assignment.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,111 @@
<link href="https://fonts.googleapis.com/css2?family=Rubik&display=swap" rel="stylesheet">
<script src="js/background.js" defer></script>
</head>
<body>
<a href="welcome.php" class="back">Back</a>
<div class="container">
<h1> Assignments </h1>
<div class="assignments">
<div class="assignment">
<h2>Assignment 1</h2>
<p>Due: 10/10/2022</p>
<a class="view">View</a>
</div>
<div class="assignment">
<h2>Assignment 2</h2>
<p>Due: 10/11/2022</p>
<a class="view">View</a>
</div>
<div class="add-assignment">
<a class="add">+</a>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<h2>Assignment 1</h2>
<a class="close">X</a>
</div>
<div class="modal-body">
<p>Q1: What is the difference between a class and an object?</p>
<p>Q2: Describe a. Encapsulation b. Inheritance c. Polymorphism</p>
<p>Q3: What is the role of a constructor in a class?</p>
</div>
</div>
</div>
</body>
<script defer>
// Clicking on the add button should open a modal with a form to add an assignment
// Clicking on the view button should open a modal with the assignment details
// For now, the the details should just be a paragraph with some text and no database interaction
const modal = document.querySelector(".modal");
const addBtn = document.querySelector(".add");
const viewBtn = document.querySelector(".view");
const closeBtn = document.querySelector(".close");
addBtn.onclick = function() {
modal.style.display = "block";
}
viewBtn.onclick = function() {
modal.style.display = "block";
}
closeBtn.onclick = function() {
modal.style.display = "none";
}
function changeModal(title, content){
const modalHeader = document.querySelector(".modal-header h2");
const modalBody = document.querySelector(".modal-body");
modalHeader.innerText = title;
modalBody.innerHTML = "";
content.forEach(element => {
const para = document.createElement("p");
para.innerText = element;
modalBody.appendChild(para);
});
}
function changeModalToAdd(){
// Changes the modal completely to the add assignment form
const modalHeader = document.querySelector(".modal-header h2");
const modalBody = document.querySelector(".modal-body");
modalHeader.innerText = "Add Assignment";
modalBody.innerHTML = "";
const form = document.createElement("form");
form.setAttribute("action", "assignment.php");
form.setAttribute("method", "POST");
const title = document.createElement("input");
title.setAttribute("type", "text");
title.setAttribute("name", "title");
title.setAttribute("placeholder", "Title");
const due = document.createElement("input");
due.setAttribute("type", "date");
due.setAttribute("name", "due");
const question = document.createElement("input");
question.setAttribute("type", "text");
question.setAttribute("name", "question");
question.setAttribute("placeholder", "Question");
const submit = document.createElement("input");
submit.setAttribute("type", "submit");
submit.setAttribute("value", "Submit");
form.appendChild(title);
form.appendChild(due);
form.appendChild(question);
form.appendChild(submit);
modalBody.appendChild(form);
}
</script>
<style>
*, *:before, *:after {
padding: 0;
Expand All @@ -28,5 +130,168 @@
-ms-user-select: none;
-o-user-select: none;
}
h1{
font-family: 'Rubik', sans-serif;
font-size: 50px;
color: #fff;
text-transform: uppercase;
font-weight: 300;
text-align: center;
margin-bottom: 15px;
}
.container{
width: 50%;
height: 500px;
max-width: 1200px;
padding: 0 15px;
margin: 10px auto 0;
}
.assignments{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.assignment, .add-assignment{
width: 100%;
height: 100px;
background: rgba(255,255,255,0.06);
margin: 10px 0;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
}
.assignment h2{
font-size: 20px;
color: #fff;
font-weight: 300;
}
.assignment p{
font-size: 15px;
color: #fff;
font-weight: 300;
}
.assignment a{
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.06);
padding: 10px 2 0px;
border-radius: 5px;
font-size: 15px;
font-weight: 300;
transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
}
.add-assignment{
background: rgba(255, 255, 255, 0);
justify-content: center;
align-items: center;
}
.add-assignment a{
width: 100px;
height: 100px;
background: rgba(255,255,255,0.06);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
font-size: 50px;
color: #fff;
transition: 0.3s;
}
.add-assignment a:hover, .assignment a:hover{
background: rgba(255,255,255,0.2);
cursor: pointer;
}
.modal{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.5);
display: none;
justify-content: center;
align-items: center;
}
.modal-content{
width: 50%;
height: 50%;
max-width: 1200px;
background: rgb(23, 42, 70);
border-radius: 10px;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
position: relative;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.modal-header{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.modal-header h2{
font-size: 30px;
color: #fff;
font-weight: 300;
}
.modal-header a{
text-decoration: none;
color: #fff;
background: rgba(255,255,255,0.06);
padding: 10px 2 0px;
border-radius: 5px;
font-size: 15px;
font-weight: 300;
transition: 0.3s;
display: flex;
justify-content: center;
align-items: center;
margin-top: 0px;
}
.modal-header a:hover{
background: rgba(255,255,255,0.2);
cursor: pointer;
}
.modal-body{
width: 90%;
height: 60%;
margin-bottom: 5%;
margin-left: 5%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.modal-body p{
font-size: 15px;
color: #fff;
font-weight: 300;
}
</style>
</html>
2 changes: 1 addition & 1 deletion src/attendance.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -258,7 +258,7 @@ function submitData(){
text-align: center;
}
button{
background: rgba(255,255,255,0.3);
background: #fff;
border: 0;
padding: 10px 15px;
color: #000;
Expand Down

0 comments on commit fa8884c

Please sign in to comment.