Introduction
This blog is based on my first single page application using Javascript, HTML and CSS. I based my idea on my career at this moment, which is education. I decided to create an application where you can keep record of homework assignments. Some of my students have trouble keeping organized with keeping up with what assignments they have to complete and the date it is due. I hope that this can be the start of an application that can help my students keep track of homework assignments and use it to meet deadlines and create new assignments for the future. As technology advances, I hope to incorporate more technology with my students so that they have more exposure and create inquiry thoughts on how these applications work.
db.JSON
My database consists of an array of objects called 'classAssignments' in which all of the objects have an id number. There are several keys which describe the object. Here are the four keys: classSubject, title, dueDate and instructions. The classSubject key holds the information for the subject of the class like "History". The title key holds the information for the title of the homework assignment. The dueDate key shows the date a homework assignment is due. The instructions key tells us important instructions about the homework assignment if applicable. There are 8 objects in the database to start off with and as you go through the blog we can see that objects can be created and added or even deleted from the database.
{
"classAssignments": [
{
"id": 1,
"classSubject": "Science",
"title": "Precipitation Note Catcher",
"dueDate": "12/01/2022",
"instructions": "Turn in on google classroom"
},
{
"id": 2,
"classSubject": "Art",
"title": "Baroque Art Reasearch Activity",
"dueDate": "12/01/2022",
"instructions": "Cite 3 sources"
},
{
"id": 3,
"classSubject": "ELA",
"title": "Identify Theme",
"dueDate": "12/03/2022",
"instructions": "Turn in on google classroom"
}
HTML Portion
The HTML for this project follows a standard structure like any other HTML. In this HTML a CSS file is linked in the 'head' section and the javascript file is linked in the 'body' section. In the 'body' of the HTML there is a 'div' containing the title of the project "Homework Tracker". The next 'div' has a class of 'container' and holds the form for the inputs of the homework assignment and as well as a 'Create Assignment' button that creates a card(homework assignment). At the end there is the final 'div' that is a container that will contain the cards for the homework assignments when they are fetched through a 'GET' request and put into the DOM.
<body>
<div id="tracker-header" class = 'center'>
<h1>Homework Tracker</h1>
</div>
<hr>
<div class="container" style="display: block;">
<form class = "add-hw-tasks">
<h4>Create your own Homework Reminder!</h4>
<input
type="text"
name="classSubject"
value=""
placeholder="Enter subject"
class="input-text"
/>
<br />
<input
type="text"
name="title"
value=""
placeholder="Enter title"
class="input-text"
/>
<br />
<input
type="text"
name="dueDate"
value=""
placeholder="Enter due date"
class="input-text"
/>
<br />
<input
type="text"
name="instructions"
value=""
placeholder="Enter instructions"
class="input-text"
/>
<br />
<input
type="submit"
name="submit"
value="Create Assignment"
class="submit"
/>
</form>
</div>
<div id="task-collection"></div>
<script type="text/javascript" src="javascripts/index.js"></script>
</body>
Javascript File
I started off by creating a function called 'showAssignment' that creates the card for the homework assignments and as well as deletes the card through a 'click' event listener that takes in an anonymous function. I started off by creating a 'div' HTML element called div to hold the information for the cards. The information for the cards are composed of HTML elements created by the following variables:
header("Homework Assignment")(h3)
subject(Class Subject)(li)
titles(Homework Title)(li)
date(Due date for assignment)(li)
instruction(Instructions for assignment)(li)
button(Delete Assignment)(button)
We also added text context to these variables and its corresponding values to the objects in the db.json file.
We then created a 'click' event listener that takes a "DELETE" request to get rid of the card from the db.json file. We then append the variables that make up the information for the homework assignment card to the 'div' variable. A final variable called 'assignmentCollection' is created to access the "task-collection" id in the HTML file. We append the div variable containing the HTML elements of the card to the variable 'assignmentCollection'.
function showAssignment(assignment){
const assignmentCollection = document.getElementById("task-collection")
const div = document.createElement("div")
div.classList.add("card")
const header = document.createElement("h3")
header.textContent = "Homework Assignment"
const subject = document.createElement("li")
subject.textContent = `Subject: ${assignment.classSubject}`
const titles = document.createElement("li")
titles.textContent = `Title: ${assignment.title}`
const date = document.createElement("li")
date.textContent = `Date due: ${assignment.dueDate}`
const instruction = document.createElement("li")
instruction.textContent = `Instructions: ${assignment.instructions}`
const button = document.createElement("button")
button.classList.add("delete-btn")
button.textContent = "Delete Assignment"
button.id = assignment.id
button.addEventListener('click', () => {
fetch(`http://localhost:3000/classAssignments/${assignment.id}`, {
method: 'DELETE'
})
.then(() => div.remove())
})
div.append(header, subject, titles, date, instruction, button)
assignmentCollection.append(div)
}
My next function 'getAssignment' is a function that shows the 'GET' request to retrieve the data from the db.json file. It does a fetch on the url for the server run for the db.json file. It iterates through the data using the forEach iterative method, which calls on each object of the db.json file. Finally we pass the 'showAssignment' function to show the cards of the homework assignments with the information as well as the 'Delete Assignment' button created. Finally we invoke the function for the fetch request.
function getAssignments(){
fetch("http://localhost:3000/classAssignments")
.then(response => response.json())
.then(data => data.forEach(assignment => showAssignment(assignment)))
}
Before I inform you about my next function, I will first create a global variable called form that selects the 'add-hw-tasks' class of the form in the HTML file. My next function is called 'addAssignment' in which creates cards for homework assignments. We start off by adding a 'preventDefault' to the event passed as a parameter of this function. This is so the form does not submit itself. We then create an array variable with that targets its respective values in the event. Since we want to add cards by a 'submit' button from the form, we call on a "POST" request to the url created by the server that runs the db.json file. The body is JSON.stringify with the respective values of the card: class subject, assignment title, due date and the instructions for the respective homework assignments. We then add the reset method to the form variable so that when we submit the card information, the information fields are blank and ready to add a different card with new information. Finally, we have an event listener to the form variable that is a 'submit' type and passes the 'addAssignment' as a unique callback function.
const form = document.querySelector(".add-hw-tasks")
form.addEventListener('submit', addAssignment)
function addAssignment(event){
event.preventDefault()
const [classSubject, title, dueDate, instructions] = event.target
fetch("http://localhost:3000/classAssignments", {
method: "POST",
headers: {
"content-type": "application/json"
},
body: JSON.stringify({
classSubject: classSubject.value,
title: title.value,
dueDate: dueDate.value,
instructions: instructions.value
})
})
.then(response => response.json())
.then(response => showAssignment(response))
form.reset()
}
The last part of this javascript file highlights the 'Create Assignment' button yellow when your cursor hovers over it. I created this for visual representations for students who are English language learners, special education students and all other diverse learners. I started off by creating a global variable called 'buttonChange' that selects the 'submit' class of the 'Create Assignment' button in the form. I created two functions called 'mouseEnter' and 'mouseLeave'. The function 'mouseEnter' takes the 'buttonChange' and styles the background a yellow color. The function 'mouseLeave' takes 'buttonChange' and styles the background nothing. Finally we have two event listeners called on the 'buttonChange' variable in which the types are 'mouseenter' and 'mouseleave'. These functions have their respective callback functions 'mouseEnter' and 'mouseLeave'.
const buttonChange = document.querySelector(".submit")
function mouseEnter(){
buttonChange.style.background = 'yellow'
}
function mouseLeave(){
buttonChange.style.background = ''
}
buttonChange.addEventListener("mouseenter", mouseEnter)
buttonChange.addEventListener("mouseleave", mouseLeave)
CSS
The CSS file contains the design for the cards shown on the application, the margin for 'task-collection, the width for the form and the centering and border for the heading on the top of the application.
.card {
text-align: center;
border: green solid 1px;
padding: 1rem;
width: 15rem;
height: 20rem;
display: inline-grid;
margin: 1rem 2rem;
box-shadow: 3px 4px #664be0
}
#task-collection {
margin: 2rem;
}
.add-hw-tasks {
width: 80%
}
.center {
border: 5px solid;
display: flex;
justify-content: center;
}
In the future I would like to add more functions and event listeners for interactivity and dynamic interactions. Thank you for taking the time to look at my project.
Top comments (2)
Sometimes it is difficult to cope with homework alone, especially when you are studying music. Fortunately, myhomeworkdone.com/music.html has been a tremendous aid. Their team of writers is well-versed in music topics, and their support has allowed me to excel in my studies while indulging in my musical pursuits.
Are you looking for the best solution for writing papers? Then I recommend you to click here essay typer ai ! Thanks to the application of advanced artificial intelligence technologies, this service is able to offer you high-quality essays at the most attractive price. Forget about long hours of working on assignments, because now there is a smart assistant that will create a paper in a few minutes. Efficiency and effectiveness is what distinguishes the service from the rest.