Had to do this today, would have helped to have a bit of a process written down…
The Document Object Model – is a structured representation of an HTML document.
You can use the DOM to “connect” HTML to CSS and JS.
The DOM is often said to have a tree structure or a hierarchy like a family with children and parents
You can use “document” to ‘enter’ the document – as in the top level of the HTML document as shown in the tree diagram above.
For example document.querySelector(‘.message’).textContent
Will select the text content of the element with the class of “message”
Once you have selected the content, use the equals sign = to update it.
document.querySelector(‘.message’).textContent = ‘Correct Number!’
The ‘code’ on the line above, will change the text-content found in the element .message to “Correct Number!”
“textContent” will only work if the element is something like a paragraph, that holds content.
If you have a value input field, like on a form or something similar, you may have to use .value instead of .textContent
document.querySelector(‘.guess’).value = 23;
The code on the left, adds “23” as the input value to the form/input field on the right^
Screenshot from The Complete JavaScript Course
In this example, the button has a class of “check”
document.querySelector(‘.check’) – will select the button with the class of “check”
Then we need to use the addEventListener() method. The addEventListener method, basically looks out for events such as button clicks.
Event Listener ^looks out for events such as button clicks.
We can add the event we want to look out for, in this example a click:
addEventListener(‘click’)
addEventListener(‘click’ function () {
console.log(document.querySelector(‘.guess’).value);});
The code in bold, will take the value from the element called “guess” and print it to the “console.log”.
Screenshot from The Complete JavaScript Course
The code above prints 9 to the console.log
the element with the class of “guess” is the form input field containing the number 9:
The aim of game in the screenshot above – guess the secret number
We need to randomly create a number and then tell the user when the number they guess is too high, too low or correct.
const number = (Math.truncMath.random()*20)
Math.random gives a number between 0 and 1
Match.trunc rounds up or down the number to the nearest whole number.
Multiplting the random number by 20 makes the number, well, larger
if (!guess) {
document.querySelector(‘.message’).textContent = ‘No Number’;}
else if (guess === secretNumber) {
document.querySelector(‘.message‘).textContent = ‘Correct Number!’;
}
The code above will print “No number” if a number isn’t entered into the relevant form field.
if the number entered (the guess), is equal to the secretNumber – then the code will print “Correct Number!” – to the element with the class of “message“.
What if the guess is greater than the Secret Number?
else if (guess > secretNumber) {
document.querSelector(‘.message’).textContent=’Too high!’
and if it’s too low:
else if (guess < secretNumber) {
document.querSelector(‘.message’).textContent=’Too low!’
So all the code together will look like:
The score will start at 20 and decrease for every wrong guess.
So, if the user guesses too low, reduce the score by 1
We also need to add a variable for the original/starting score, after the secretNumber is declared (or the code to create the secretNumber anyway)
Declare the score with:
let score = 20;
The score is part of the “application state”. The score is available in the code and not just in the DOM
To tell the player when they’ve lost the game, we need to add a condition related to the score variable:
if (score > 1) {
https://www.udemy.com/course/the-complete-javascript-course/learn/lecture/22648419#learning-tools
First select the whole <body> element
document.querySelector(‘body’).style.backgroundColor = ‘#60347’;
Just like the regular, current score, we need to store the high-score in a variable.
use the code
let highscore = 0;
We need to check if the current score is greater than the existing game’s score
if (score > highscore) {
highscore = score;
}
Assuming the “HighScore” Box has already been made – we need to check what the class is.
In the this case, the class = “highscore”
Now we need a way to update the highscore, when the current score is greater.
document.querySelector(‘.highscore’).
textContent = highscore;
https://www.udemy.com/course/the-complete-javascript-course/learn/lecture/22648427#learning-tools
The code if the guess is too high, or if the guess is too low code is pretty much duplicate code
Remember
Dont Repeat Yourself DRY
There’s no problem starting out with repeated code, and then refactor the code once it’s all working
Change the code above, to a “when guess is wrong” code block.
Use a ternary operator
A while loop is more versatile than a for loop.
A while loop just needs a condition to keep running.
for example
while ((rep<=10)
Run the look while the “rep” value is less than or equal to 10
let rep = 1;
console.log(‘lifting weights repetition ${rep}
rep++;
let rep=1;
while (rep <=10) {
console.log('lifting weights repetition ${rep});
rep++;
}
Random variable – throwing a dice until we throw a 6
We don’t know how many times the dice has to be thrown, so we don’t need a counter
let dice = Math.trunc(Math.random() x 6) + 1;
console.log(dice);
while (dice !==6) {
console.log('Your rolled a ${dice}');
}
while (dice !==6) is the condition – roll the dice whilst the condition is not equal to 6
First – you may want to use “padding-block:” – which is the padding for the top and the bottom only.
You can also use a “min()” statement or line of code, or whatever it’s called in CSS
If you type:
section {
padding-block: min(10vh, 10rem)To use “min” – you may for example have a back-ground colour, with width:70% and max width:500px
width: min(500px, 70%)
Min will “look” for the smallest value – either 500px, or 70%
Min will choose the smallest value.
If you are on a mobile for example, 70% width, is less than 500px – so on mobile the background will be 70% of the viewport for a mobile.
If you are on a desktop computer, 500px will be less than 70% of the screen width – so the background will be 500px wide.
Responsive Equal Padding Top & Bottom
If you wanted to pad the top and bottom of text in the background:
padding-block: min (30px; 10%) ;
width: max(500px, 70%)
max is the opposite – now it will use the maximum value.
on Mobile, 500px will be the largest
On Desktop – 70% will be the largest.
Yet another way to add padding, is to use “calc” and then add parameters/values for rem and vw
Rem (short for “root-em”) units dictate an element’s font size relative to the size of the root element. By default, most browsers use a font size value of 16px.
The full form of VW is viewport width. It works like the percentage unit. Specifying 10vw is equivalent to occupying 10% of entire visible screen width.
This code works okay by the looks of it:
padding-block: calc(0.75rem + 0.5vw);
padding-left: calc(0.75rem + 0.5vw);
padding-right: calc(0.75rem + 0.5vw);Here’s an example, that uses “padding: 2rem;” and “gap: 1rem:” to space the image and the
If you click on the CSS tab/button – everything below @media, is to provide a separate style and effect on mobile devices
To be honest, I having got a fecking clue with CSS Grid, I need a refresher – here’s a blog post I did earlier – https://businessdaduk.com/2022/11/21/css-grid-for-beginners-2022/
A for loop, is a loop that will loop through (go through) the elements in an array or the properties of an Object.
You can use it to update arrays, count the number of elements etc
Loops can execute a block of code several times.
With arrays, it’s common(ish) to run the same code over with a different value.
For Loops tend to be used with arrays (I think!)
The code below the array in the screenshot below, starting with “for”, loops through the variable called “names” above it.
Once it loops through it create “name” and then “console.log(name);” will get it to print on the console.log screen
The code below, will do the same as above, but this time it will add “Hello there” before each of the names:
You can also add if conditions. For example, in the code below, the loop will check if “Maria” is in the list, and if so, will print out “Maria is in my list”
You can get the loop to stop once it finds “Maria” by using the “break” keyword.
The above code will print “Ed, John and then Maria and “Maria is in my list”. It will then stop and it won’t print all the names up to “Potter”.
As well as using the for loop with arrays, you can also use it with a single variable like “age”, and add an incremented – for example “age++”
The code shown below will print out and loop 10 times. starting at 0, and then 1, 2 etc. until finally the condition age <10 is no longer met
When the age is 10, it will stop.
A web dev example
Get all the links on a page, and return the number of the links on the page.
When the loop gets to the 6th link, it is no longer less than links.length, and so the loop stops:
(you can click the image to see a lager version, the important code is :
for (i = 0; i < links.length; i++)
To print out the final link, change “<links.length” to “<= links.length” – meaning “less than or equal to links.length”
for (i = 0; i <= links.length; i++)
For in loops, are the same as for loops except they are shorter to write but less flexible.
Work out the age of people, given an array with their year of birth in it.
start with the array and then a new array, which will hold the ages:
const years = [1991, 2007, 1969, 2020]
const ages = [];for(let I = 0; I <years.length; i++) {
ages.push (2023 – years [i] );
}
console.log(ages);
the “ages.push” code, will psh the results into the ages array
Continue is to exit the current iteration and move to the next one
Break will exit completely.
You can use with an if statement
If the type of the current element, is not a string, then continue.
This will skip any elements/values that are not strings. Continue will exit the current iteration and not print to the console.log
Using break, will terminate the loop completely.
Notes taken from the Udemy Course – the Complete JavaScript Course which you can enroll on here.
I’ve also robbed some screenshots from other sites, but linked to them in the “source”.
Objects provide a way to group values together in an organised fashion.
Objects can store lots of different types of data.
Objects can contain variables, functions or both.Variables found in objects are properties, while functions are methods.
In objects we define key-value pairs. The key is also called the “property name”.
Objects are normally declared within culry braces:
firstName is a “key” and the “value” is “Jonas”.
The name and the value, create a “key value pair”.
There are many ways of creating objects in JavaScript.
Using curly braces is called the “object literal syntax” because you’re writing down the literal object.
The order you write down objects doesn’t matter, unlike in arrays.
The first way to access data in an object is to use “dot notation”:
Dot notation is the most popular method to access the properties of an object.
let obj = {
boxer: 'jab',
muayThai: 'kick'
};
let strike = obj.boxer;
console.log(strike);
// jabThe dot notation in the example above is – let strike = obj.boxer;
Specify the name of the object, then add a dot, followed by the property name.
The syntax is objectName.propertyName;
let obj = {
boxer: 'jab',
muaythai: 'kick'
};
let strike = obj['boxer'];
console.log(strike);
// jab
You can read a much better article about dot and bracket notation – here –> codeburst.io or here —> plainenglish.io
It is a common practice to declare objects with the const keyword.
There are two methods by which you can create an object: an object literal and the object constructor.
let’s create an object named myCup and give it properties named color, volume, and weight as follows:
let myCup = new Object();
myCup.color = "transparent";
myCup.volume = 1;
myCup.weight = 0.5;We can write the same object in a shorter notation. Comma-delimited list of pairs of property names and associated values, enclosed in curly braces:
let myCup = {
color: "transparent",
volume: 1,
weight: 0.5
}
Above, we declare a variable in the same way with: let myCup equals and then curly brace.
If you are making multiple objects, it’s best to use the object constructor.
You can use a constructor to create a new object by calling the constructor with the new keyword. The new keyword will create an instance of an object and bind the this keyword to the new object.
The this keyword is a reference to the object itself.
function Fighter(name, age, nationality) {
this.name = name;
this.age = age;
this.nationality = nationality;
this.bio = function () {
console.log(`My name is ${this.name}. I'm ${this.age} years old. I'm from ${this.nationality}`)
}
};
const oladele = new Profile("Izzy", 29, "Nigeria" );
console.log(oladele.bio()); //My name is Izzy. I'm 29 years old. I'm from NigeriaMore info about constructors at Freecodecamp.org
Here’s another example, using the this keyword from w3schools
<script>
// Constructor function for Person objects
function Person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
// Create a Person object
const myFather = new Person("John", "Doe", 50, "blue");
// Display age
document.getElementById("demo").innerHTML =
"My father is " + myFather.age + ".";
</script>The above code gives the output “my father is 50”. (which is printed to the paragraph with the id of “demo”)
We can add a method simply by adding another property that is a function. This function will be able to read the values of the object and work with them.
We will add an example that will print out the color of the table.
myTable.whatIsMyColor = function() {
console.log("My color is: " + this.color);
};
In JavaScript you can add a property to an object after it has been created.
The following statement adds the age property to the fighter object and assigns 22 to it:
fighter.age = 22;
Simply use the delete operator
delete fighter.age;
To check if a property exists in an object, you use the in operator:
propertyName in objectName
The in operator returns true if the propertyName exists in the objectName.
The following example creates an employee object and uses the in operator to check if the ssn and employeeId properties exist in the object:
let employee = {
firstName: 'Peter',
lastName: 'Doe',
employeeId: 1
};
console.log('ssn' in employee);
console.log('employeeId' in employee);Code language: JavaScript (javascript)Output:
false
true
Arrays hold values.
An array is an ordered list of values.
Arrays are 0-based, in that the first value is 0, not 1 in terms of its position.
A JavaScript array has the following characteristics:
W3schools describes an array as a “special variable, which can hold more than one value”.
An array can hold many values under a single name, and you can access the values by referring to an index number.
JavaScript provides you with two ways to create an array.
It is a common practice to declare arrays with the const keyword.
You can also use the following code to create a new array:
let values = new Array();
or
let values = [item1,item2,...]
Once you’ve created your array, you can print the values to the console.log with the code:
console.log(values);
With “values” being the name of the array.
You can call “values.length” to get the length of the array
console.log(values.length);
Again, in the above code “values” is the name of the array.
You can define and name an array, and then “push” values into it later:
The above code will add a single value of 5 to the array named “values”.
console.log(values[1]); will print the second value – 7
console.log(values[0]); will print the first value – 5
In summary – to create an array, it’s generally best to use the “const” keyword, or the “new” keyword.
Below, the array name is used,and the variable number to update, the first variable.
You can try it yourself on the w3 schools website.
You access an array element by referring to the index number:
You can also loop through arrays
Main menu thing
Got to Catalog – Categories
Pick a store (leave on all store views put pick a store from the folders below)
Pick a folder –> click “Add Subcategory”
Include in menus – Off canvas & All Sports – don’t include in All Sports if it’s a level 3 sub-sub category – e.g. equipment – kits – men’s kits wouldn’t go in All Sports.
Enable category – No
Leave menu settings
Add thumbnail image if you have one
Description – Edit with Page Builder – > Apply Template -> Search for “product” -> Use Product Description
APPLY
Click cog icon
Put <p> </p> tags and paste in description for page
SAVE
close full screen with two arrows in top right.
Display settings – Select Price
Add URL, meta title and meta desc.
URL doesn’t need .HTML at the end.
****hreflang****
— Don’t enable foreign sites! and put in clickup
A function is a piece of code, that can be reused.
It’s similar to a variable but doesn’t hold a value like a variable does. So it’s not that much like a variable, but kind of is.
Screenshots are from the brilliant Javascript Course on Udemy here
The code on lines 16 and 17 shown in the image above, creates the function. It is named “logger”.
the shorter code logger(); is used to/for “invoke”, “running”, or “calling” the function.
Function Declerations
When you create a function with a name, then it is a function decleration.
Function statements, declare a function. A declared function can be used later when it is “invoked” or “called”.
Function declerations must start with “function”.
For example:
function mma() {
return 8;
}
The functioned mma is declared. to invoke it use the code mma();
You can call function declerations, above the code that creates it.
Function Expressions (good article here)
A JavaScript function can also be defined using an expression.
A function expression can be stored in a variable:
Function expressions are invoked to avoid polluting the global scope. Instead of your program being aware of many different functions, when you keep them anonymous, they are used and forgotten immediately.
To summarize, function declarations are utilized when you desire to establish a function in the global scope that can be accessed anywhere in your code. On the other hand, function expressions are employed to confine the accessibility of the function, reduce the weight of the global scope, and maintain a neat syntax.
Arrow functions have shorter syntax
They are best suited to non-method functions
An example, might be a function that cuts up fruit pieces, and then sends the result to a function that blends it into a smoothie.
The start function used above, will print out “I am first bo! 222222!!!”
A function is like a procedure. It has tasks and calculates a value.
A function requires input and must return an output.
Functions need to be defined with the word “function” and brackets ()
Brackets can also be called paranthesies, and the input is sometimes called “arguments” or “parameters”.
Export the 404 Inlinks Report into Excel
The best report in Screaming Frog to see the source and destination of all 404s – is to go to Bulk Export at the top menu:
And then Response Codes – Client Error Inlinks
In the Exported Excel Sheet:
Copy the “destination” column
Paste into a new sheet/tab – In Column B
Remove duplicates
Back in the first sheet – Paste “Source”, into column D to the right of “destination” in first tab/sheet
In the second sheet –
Do a vlookup in the second sheet/tab – to import a source URL to each unique “destination” URL
Add the word “source” to cell C1 in the second sheet
I think you have to click the file name to download the example sheet below:
Sheet / Tab 1 should look like this:
The Second Sheet / Tab should look like this:
The Lookup Value in Cell C2, in the sheet above is:
=VLOOKUP(Sheet1!B2,’1 – Client Error (4xx) Inlinks’!C:D,2,0)
Just double click / drag it down to complete the lookup
You can add more lookups and columns to provide more details about the link location.
Just copy and paste values on the last Vlookup.
Paste another column like “Anchor” into column D on the first Tab
Paste the vlookup into the adjacent column
“0” means nothing found – i.e. no anchor text etc
Update –
404s found in the Navigation or “Aside” tend to be site-wide, so you can find one instance of this and update the 404 and Bob’s your uncle.
If a 404 is within the page content/copy however, they are possibly unique and need fixing individually. So take a look the Content 404s separately. They probably only have 1 source URL so no need to faff with vlookups etc.
