Week 5 & 6 (Beginning Jan 21st) Project Week 1 - emcsquared2/2022-Learning GitHub Wiki

Recap git and gitHub and used Open Classrooms free course to learn about forking, branches and pull requests.

Excellent material: https://openclassrooms.com/en/courses/5671626-manage-your-code-project-with-git-github/6152121-handle-those-mishaps-on-your-local-repo-like-a-champ

Learn how to deploy a website using Netlify

Create README.md and index.html. Push to gitHub main branch, ready to pull into the deploy branch for deployment on Netlify.

Got stuck using Git and Github when trying to use a branch for deployment.
When I tried to push files from the main branch to the deploy-branch I kept getting an error message that it was "non-fast forward".
So I decided to start again and this time make the main branch the live production branch.
I was able to push the files from main to wbranch:

I started working through John Smilga's Vanilla JS Walkthrough projects on youtube https://www.youtube.com/watch?v=3PHXvlpOkf4
I completed the first two 1.Color Flipper and 2. Counter
Here is the JS code part of the counter project:

//set initial count
let count = 0;

// select value and buttons
const value = document.querySelector("#value");
const btns = document.querySelectorAll(".btn");

btns.forEach(function(btn){
    btn.addEventListener("click", function(e) {
        const styles = e.currentTarget.classList;
        if(styles.contains("decrease")){
            count--;
        }
        else if(styles.contains("increase")){
            count++;
        }
        else {
            count = 0;
        }
        if(count > 0){
            value.style.color = "green"
        };
        if(count < 0){
            value.style.color = "red"
        };
        if(count === 0){
            value.style.color = "black"
        }
        value.textContent = count;
    });
});

//the currentTarget of the element in the array (in this case the node list)
// is the html element itself e.g. <button class ="btn decrease">decrease</button>

//the .classList method identifies the list of class names in the case of the decrease button
//DOMTokenList(2) ["btn", "increase", value: "btn increase"]

//The contains() method of the Node interface returns a boolean value indicating whether 
//a node is a descendant of a given node.

• Firstly this felt like just the right level of challenge given my knowledge and it was great to learn about querySelectorAll and about the Node List
• Great practice getting comfortable working with the DOM, Chrome dev tools and applying learnt JS concepts
• I need to improve my CSS skills so I can craft stuff from scratch
• I need to continue to develop my JS scripting skills in the browser