First CS Project — Tips and Tricks

Whew, phase 1 is coming to a wraps, and I’m liking coding more than I originally thought I would.

Though my current knowledge is pretty limited, I was happy to be able to draft up a pretty neat one-pager website that has some cool functionalities!

The overall template of the website drew inspiration from our countless fetch labs as well as our code challenge for phase 1.

Tip 1: Watch crash course video

I was really proud of the HTML structuring, through watching a tutorial after googling “Frontend Developer Tutorial”. The video wasn’t too long and the instructor did a great job breaking down each element bit by bit.

What was really helpful about this guide was their Codepen.io link. I was able to see how he structured his HTML and how certain div containers flexibly arranged within a main div container. I’ll definitely be using codepen.io examples as resources for learning and future projects as well.

Tip 2: Use ChatGPT as a tutor

This was my first time using ChatGPT in any manner, and it was surprisingly easy to use.

With questions that would normally take a lot more effort via googling, ChatGPT provides a quick, concise, and usually correct answer. Here’s an example:

I wanted to learn how to create a form on my page via JS, this is what I asked ChatGPT:

Show me how to append a submit form via js

This was ChatGPT’s instantaneous response:

Sure, here's an example of how to append a submit form using JavaScript:

First, create a new HTML form element using the createElement() method:

javascript
const form = document.createElement('form');
Next, set the attributes for the form element using the setAttribute() method:

javascript
form.setAttribute('method', 'post');
form.setAttribute('action', '/submit');
You can also set other attributes, such as the name and id attributes, if necessary.

Next, create an input element for the form using the createElement() method:

javascript
const input = document.createElement('input');
Set the attributes for the input element, such as the name, type, and value attributes:

javascript
input.setAttribute('name', 'username');
input.setAttribute('type', 'text');
input.setAttribute('value', 'John Doe');
Finally, append the input element to the form element using the appendChild() method:

javascript
form.appendChild(input);

I was able to further build on this request, after successfully adding the form to my page, I wanted to POST to my db.json server, and so this was my secondary request:

What if I want to add an event listener to this form?

ChatGPT then again spit out a very easy-to-follow response:

You can add an event listener to the form element using the addEventListener() method. Here's an example of how you can add a submit event listener to the form created in the previous examples:

javascript
Copy code
const form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', '/submit');

const input = document.createElement('input');
input.setAttribute('name', 'username');
input.setAttribute('type', 'text');
input.setAttribute('id', 'username');
input.setAttribute('value', 'John Doe');

const label = document.createElement('label');
label.setAttribute('for', 'username');
label.textContent = 'Enter your name: ';

form.appendChild(label);
form.appendChild(input);

document.body.appendChild(form);

form.addEventListener('submit', (event) => {
  event.preventDefault();
  // handle the form submission here
  console.log('Form submitted');
});
In this example, we first create the form element, input element, and label element as before. Then, we append them to the body element of the HTML document.

What would’ve taken me several hours to google/attempt/debug instead took me 20 minutes because I knew the right questions to ask. I’ll definitely be using ChatGPT and other AI tools to help guide me along this journey to becoming an efficient software engineer. With upcoming phases and other languages to be learned, I’ll be asking ChatGPT to come up with a study plan for me — quite excited!

Tip 3: Be Curious, Keep Trying and Failing

Even though dealing with implementing the filters was quite frustrating, the rewarding feeling after success was definitely worth it!

I’d like to step through how I created the filter list:

1. populate an array (listOfCities) with the names of every city in my database
2. create inputs/labels for each checkbox based on that array
3. if checked -> push the city to CheckBoxObj that we’re fetching info for & if unchecked -> splice the CheckBoxObj array with the value

for (let i=0; i<listOfCities.length-1;i++) {
        let br = document.createElement('br')

        let opt = listOfCities[i]
        let input = document.createElement('INPUT')
        let label = document.createElement('Label')
        label.htmlFor = opt
        label.innerHTML = opt

        input.setAttribute('type','checkbox')
        input.setAttribute('name',opt)
        input.checked=true
        CheckBoxObj.push(all[i])
        
        input.setAttribute('class','cityClass')
        cityForm.append(input)
        cityForm.append(label)
        cityForm.append(br)
        input.addEventListener("change",function(){
            if (this.checked) {
                fetchPubsByCity(input.name)
            }
            if (!this.checked) {
                removePubsByCity(input.name)
            }
        })
    }

And with the functions to add/remove to my CheckBoxObj:

function fetchPubsByCity(cityName) {
    for (let i = 0; i<listOfCities.length-1;i++) {
        if (cityName === listOfCities[i]) {
            CheckBoxObj.push(all[i])
        }
    }
fetchPub(CheckBoxObj)
}

function removePubsByCity(cityName) {
    for (let i=0; i<all.length-1;i++) {
        if(cityName === all[i].city) {
            console.log(all[i])
            let index = CheckBoxObj.indexOf(all[i])
            if (index > -1) {
                CheckBoxObj.splice(index,1)
            }
        }

Although having only the cities as checkbox options was sufficient, I wanted to toy with implementing Select All / Deselect all options as well.

At first it was super frustrating googling and being unable to find a proper solution, so I instead drafted up my own solution, here’s what I came up with:

let selectAll = document.createElement('input')
    selectAll.setAttribute('type','checkbox')
    selectAll.setAttribute('name','all')
    selectAll.checked = true
    let labelAll = document.createElement('label')
    labelAll.htmlFor = "all"
    labelAll.innerHTML = "Select all"
    cityForm.append(selectAll)
    cityForm.append(labelAll)

    selectAll.addEventListener("change",function() {
        if (this.checked) {
            let allBoxes = document.querySelectorAll('.cityClass')
            for (let i = 0; i<all.length;i++) {
                CheckBoxObj.push(all[i])

            }

            allBoxes.forEach((box) => {
                box.checked = true

                fetchPub(CheckBoxObj)
            })
        
        }
    })

Just goes to show that there’s a million different ways to solve a problem. Google might not have all the answers, we just have to keep trying and exploring different avenues. Happy coding!