Forem: hluis91

Update to Homework Tracker Project

hluis91 — Wed, 11 Jan 2023 01:23:43 +0000

Introduction:

Hello there reader! Before I start this blog I must let you know that this is based on an added function to my previous blog called "Homework Tracker Project"

About:

As a part of my assessment for my project, this update was requested from a live coding session to test my knowledge and skills of JavaScript. So aside from talking about the code I added, I will also talk about some of the mistakes I was making and conclude on how to improve for future live coding sessions.

Added function to Homework Tracker Project Code:

Here is the challenge that was posed to me, I will provide it in bullet points:

Add a button to each HW card with the text “priority” on it and the word “NO” as its default value.
When the button is clicked the word should switch to “yes”:
“Priority: NO” when clicked changed to “Priority: YES”

To start off, I needed to add a button to the function that creates my cards, here is the code I used to add the button which was then added to the div variable containing the elements of the card:

//This variable holds the decision of default of "NO"

   let decision = 'NO'

//Create button and give its inner text of decision

   const priorityButton = document.createElement('button')
   priorityButton.innerText = `Priority: ${decision}`

So from the above code, I first created a declared a 'decision' variable and assigned it with the default value of 'NO'. I then created my button to show assignment priority and called it 'priorityButton'. I then set the inner text of the button to an interpolation string: Priority: ${decision}. This image shows how the card looks like after the button is added:

Now that we have the button on the card, the last task is to the priority from 'NO' to 'YES' and vice-versa. Here is the code that does that:

/*Create an event listener for the button and pass an anonymous function that changes the decision when the button is clicked.*/

priorityButton.addEventListener('click', () => {
 if(decision === 'NO'){
   decision = 'YES'
 }else{
   decision = 'NO'
 }
priorityButton.innerText = `Priority: ${decision}`
})

What I did first was add an event listener to the priority button. The type of event is a 'click' event, the first parameter and an anonymous function, the second parameter, which will change 'NO' to 'YES' and vice versa when clicked. To make the change I implemented an if...else statement to the 'decision' variable I declared earlier. The statement says that if the 'decision' variable has a value of 'NO' then its value is reassigned to 'YES', otherwise the value of 'decision' is changed to 'NO'. Here is a picture of the button showing the Priority changed to 'YES":

Finally we give the the inner text of the button a string interpolation of Priority: ${decision} so that the value can be changed when the button is clicked.

Common Live Coding Mistakes:

I was able to complete the first part with ease and at first the challenge was to just change the decision to 'YES'. Then the second portion took me a while to figure out. A mistake I was making was what to set the condition to: Priority: ${decision}. This was not making any changes to the button at all. Another mistake was confusing = assigning operator with strict equality comparison operator ===. I made this confusion with both the condition and the block of code being executed in the if...else statement. I also had trouble understanding the order in which the code should be written. I also struggled with what to do which led me to get nervous as well as panic. When this happened, I forgot to stay calm and think about the possible mistakes in my code or structure.

Conclusion:

At the end I figured out how to change the value of the button from 'NO' to 'YES' and vice versa. Based on my mistakes, I will work on staying calm and not trying to do random things to my code and hoping that it fixes the issues. I should also refer to the console and carefully read the mistakes being shown and console log certain aspects of the code to get a better understanding of what may be a possible mistake or if I am on the right track. Thank you for reading this blog and hope you learn from my mistakes as a beginner. Have a great day!

Homework Tracker Project

hluis91 — Sun, 04 Dec 2022 02:42:37 +0000

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.

My first post and thoughts on my journey to being a Software Engineer.

hluis91 — Tue, 11 Oct 2022 16:12:56 +0000

I started the Software Engineering course on September 17th 2022. I recently finished a Data Analytics bootcamp the week prior with UCI. Doing the prework for the bootcamp was not as difficult as I thought due to my experience with Javascript, HTML, CSS and GitHub with the Data Analytics bootcamp. I learned enough basics to get me this far. As I am going through the first phase of the program, it is getting to be a bit difficult. Writing functions for Javascript is not an easy task. I do however have a B.S. of Science in Mathematics, so when I write functions I can understand the structure and logic behind it but writing the function is the toughest part. If I get stuck I rely on resources provided by lessons or get a tutor to help me out. Being an educator myself has made me realize to take advantage of every resource provided and that everyone needs help at some point. I am excited to see what is coming in the future and hope to hone my skills so I can land a job in June 2023. I find this very interesting and are excited to do the work since the structure of the course is very concise and easy to understand. Thank you for reading this long blog and have a good day!!

-Hernandez