Github Challenges and I need some help, thanks!

1

This is the current link to my github repo: js-projects/ErezJavaScriptGitHubPortfolio at main · ErezJacobOfer/js-projects · GitHub

I’m working on a JS chess game and have been asking questions in the JS forum. In order for people to help me they want to see my code and suggested that I put it up on github to make it easier to find errors.

I was able to successfully upload the js, html, and css files to my github repo, but then when I wanted to edit and update the js file, I did it from the github website and that’s when things started getting sour.

I wanted to updated the app.js file so on the github website i went to edit this file and then put in my new updated code. But when I checked the app,js file again it looked like this ```const http = require(‘http’)
const fs = require(‘fs’)

const server = http.createServer((req, res) => {
res.writeHead(200, { ‘content-type’: ‘text/html’ })
fs.createReadStream(‘index.html’).pipe(res)
})

console.log(‘Server running at http://localhost:3000/’)

server.listen(process.env.PORT || 3000)```

I was told that it’s best to use the git commands from the CLI, and I have managed to clone the repo to my computer, but I don’t know what I should do next to correct this error and make my app.js code appear as it should be ```const gameboard = document.querySelector(“#gameboard”);
const playerDisplay = document.querySelector(“#player”);
const infoDisplay = document.querySelector(“#info-display”);
const width = 8;
let playerGo = ‘black’
playerDisplay.textContent = ‘black’

const startPieces = [
rook, knight, bishop, queen, king, bishop, knight, rook,
pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’,
‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’,
‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’,
‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’, ‘’,
pawn, pawn, pawn, pawn, pawn, pawn, pawn, pawn,
rook, knight, bishop, queen, king, bishop, knight, rook,
]

function createBoard(){
startPieces.forEach((startPiece, i) => {
const square = document.createElement(‘div’)
square.classList.add(‘square’)
square.innerHTML = startPiece
square.firstChild?.setAttribute(‘draggable’, true)
square.setAttribute(‘square-id’, i)
//square.classList.add(‘beige’)
const row = Math.floor((63-i)/8) + 1
if (row %2 === 0){
square.classList.add(i % 2 === 0 ? “beige” : “brown”)
}
else {
square.classList.add(i % 2 === 0 ? “brown” : “beige”)
}
if ( i <= 15){
square.firstChild.firstChild.classList.add(‘black’)
}

    if ( i >= 48){
        square.firstChild.firstChild.classList.add('white')
    }
    
    gameboard.append(square)   
})

}
createBoard();

const allSquares = document.querySelectorAll(“.square”)
allSquares.forEach(square=>{
square.addEventListener(‘dragstart’, dragStart)
square.addEventListener(‘dragover’, dragOver)
square.addEventListener(‘drop’, dragDrop)
})

let startPositionId
let draggedElement

function dragStart (e) {
startPositionId = e.target.parentNode.getAttribute(‘square-id’)
draggedElement = e.target
}

function dragOver(e){
e.preventDefault()
}

function dragDrop(e){
e.stopPropagation()
console.log(‘e.target’, e.target)
const correctGo = draggedElement.firstChild.classList.contains(playerGo)
const taken = e.target.classList.contains(‘piece’)
const opponentGo = playerGo === ‘white’ ? ‘black’ : ‘white’
const takenByOpponent = e.target.firstChild?.classList.contains(opponentGo)

if (correctGo) {
    // //must check this first
    // if(takenByOpponent && valid){
    //     e.target.parentNode.append(draggedElement)
    //      e.target.remove()
    //      changePlayer()
    //      return
    // } 
    // then check this
    if (taken && !takenByOpponent) {
        infoDisplay.textContent = "you cannot go here!"
        setTimeout(() => infoDisplay.textContent = "", 2000)
        return
    } 
}



// e.target.append(draggedElement)

}

function changePlayer(){
if (playerGo === “black”) {
reverseIds()
playerGo = “white”
playerDisplay.textContent = ‘white’
}
else {
revertIds()
playerGo = “black”
playerDisplay.textContent = ‘black’
}
}

function reverseIds() {
const allSquares = document.querySelectorAll(“.square”)
allSquares.forEach((square, i) =>
square.setAttribute(‘square-id’, (width * width -1) - i))
}

function revertIds(){
const allSquares = document.querySelectorAll(“.square”)
allSquares.forEach((square, i) => square.setAttribute(‘square-id’, i))
}```

It would really help me and possibly others if someone could help me step by step through the process…much appreciated. Also, in VSCode the folder has changed to the color green and says U next to it and all of the files in the folder, I don’t know what that means. I’ve been stuck for the past few days, but it’s about time I really learn git and github.

Thanks!

2

you have your code locally, right?
set up a git repo locally, then push that to a github repo, so you can continue making commits locally

in short, find a git course, and learn to use it to keep the code locally in sync to the one in github

3

I set it up locally by cloning it from git hub. Should i do it differently?

4

that’s fine, but you should also learn to push your commits to a github repo

5

I found a course and have been trying to follow along but there are some obstacles that come up so i need help with the troubleshooting.

6

what are you trying to do?

7

I’m trying to push an updated version of the app.js file to replace the older incorrect version on my repo

8

what command are you using, what errors are you getting?

9

git add .
git commit -m “Updated version”
git push

Voila, it worked, nm, I’m not sure what went wrong previously.

10

great, now you can continue asking for help with your project!

also just so you are aware, it’s more common to have one repo dedicated to one single project. But you can do what you prefer, it’s your account

11

Thanks for the tip, is it best that I rearrange everything in VSC or on the github website?

12

in VSC you can remove the parent repo, and use git init inside the folder for each project
in GitHub you would need to create a new repository for each repo and connect it with the new local repos