Audit (OPTIONAL)


Hello. I know what you are going to say. Why are you posting? The Semester is over. I don’t know the answer to that. I have a lot of free time on my hands so I deiced to make a recap post of this semester. I was attempting to create a portfolio using SASS / BEM / 7-1 Architecture, but I noticed that it was taking a while. I am still creating this portfolio based off Trillo and Natours page. My goal is to create a page with all CT courses I have taken such as Web Development 1, Web Design 1 & 2.

In the meantime, I made a simple project that links to the directory and blog post. This is a showcase of all my work I have done this semester. I have done all the blog post response and everything. I am aware that the grades have already gone in and I have seen some of my grades. I don’t want to alter them. I just wanted to finish this because I was halfway through it (and I have a lot of free time since I graduated).

You can check out the website here!

I tried to create a recap blog post. I will be posting a duplicate copy of this on Web Design 2 to save time 😛 . Overall, I had a great learning Javascript. ByE!


Weekly Blogs

Link to My Files

Week 1 – Connecting HTML & JavaScript

JS files can be attached to HTML files by using the script tag to insert the JS into the body of the HTML document.

Crome Console Vs Coding with files

Coding using Chrome or a browser console is only useful if testing, after refreshing the page all changes will be undone. However, using files allows you to save and make changes to JS/HTML

Week 2 – How can you use “falsey-ness” to determine if a string value can be coerced to a number? Why does this work? What is “type coercion” anyway?/ What do you need to convert a for loop into a while loop?

In the Chrome console, you can use “falsey-ness” to determine whether a value of “true” or “false” will be returned. Type coercion is the process of converting one type of value, to another in a different category ex, a string to a boolean.

Week 3 – Describe the difference between declaring a function and calling a function.

Declaring a function simply gives it a name to be recognized by the console. Calling a function that has been declared, or named, will cause it to execute.

Week 4 – With the array methods pop() / push() and shift() / unshift(), explain the difference between the returned value of each method and the resulting value of the array?

The P0p() function deletes the last element from the selected array and enables it for use.

Push() adds a selected value to the very end of an array.

Shift( ) removes the first element in an array and then returns it back as a value.

Unshift() will add a value to the front of an array

This image of a YouTube comment feed is a great example of data organized in an array

Week 5 – Link to an example dynamic web page that likely pulls data from a database to build the site – any social media site, newspaper, blog, etc. Take a screenshot of a typical “post” and propose an object data structure to store all the elements of the post

I chose to use reddit, which features a video clip center-page. I’m sure that the comment section is configure in a list li() format but I am admittedly still confused on how the object is formatted here.

Week 6 – Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method?

The querySelector() function will return an element that matches the specified CSS style selector (1 max). This is different from querySelectorAll() which will return all values that match the query.

FINAL: Moron Test + Blogging Questions.

Before we get into this blog post, I just wanted to say that finishing the semester via distance learning sucked a lot. I feel like it just made things more complex and annoying for some reason, but I pushed through and made it to the end. Instead of breaking everything up into different sections (blog posts), I completed it all in one shot which will be linked below. I’m not sure as to why my webpages are coming out the way they are because they were just working fine when I open them from my desktop, but yeah.

directory: https://alisas.net/dev1/

Blogging Questions:

  • Describe and link to the scene you chose from the breakdown. Give an explanation of the positioning of your i elements and additional icon values.

The scene that I chose from the breakdown would be the second one: “Where are you right now?” I changed two out of the four symbols. The map is now an anchor and the sun is now a moon. I used the same positioning as the code along.

 <i class= "fas fa-anchor" style="
                    color: #323538;
                    left: 20%;
                    top: 35%;
                    font-size: 9rem"></i>

<i class="fas fa-moon" style="
                    color: #fce446;
                    left: 80%;
                    top: 65%;
                    font-size: 9rem"></i>
  • Describe the process for clearing and mapping icons to the DOM. What are the three steps and the core functions? Describe how the four methods used for this process work – createElementfirstElementChildremoveChild, and appendChild.

#1 – select the class (.icons) and create a variable applicable to the space of the icons.

const iconSpace = document.querySelector('icons');

#2 – select the firstElementChild selector. this selects the first child of a parent element.

function clearIcons() {
    while (iconSpace.firstElementChild) {
        iconSpace.removeChild(iconSpace.firstElementChild);
    }
}

#3 – after using the firstElementChild selector, remove the icons so they are restored as new icons using removeChild. this takes the argument and gets added to the firstElementChild.

function mapIcons(level) {
    scene[level].icons.forEach(function (iconObj) {
        iconSpace.appendChild(build(iconObj));
    })
}

#4 – once everything is situated, place them together in one function.

function nextScene(){
    clearIcons();
    clearInstructions();
    drawScene(level);
}
  • Describe how the spread operator is used to convert a node list of selected elements into an array. Describe why we needed this conversion and how the array was helpful for our first test in the game’s logic.

The spread operator is a useful and quick syntax to add items to arrays, merge arrays or objects and then spreading an array into arguments of a function.

  • Describe how the scene[level].main(icon, indx) function is called within the check(icon, indx) function. How are we tracking the icon and index values? Why do we need to track and pass the icon and index values to the scene’s main function? What does the scene’s main function do with these values?

You need a main function in the scene[level] to have the icons hidden and for the instructions to appear. This function takes out the game icon and indx when clicking on an icon. Inside the check(icon, indx) function, we are using the same parameters transferred to that function and moving it to the scene[level].main(icon, indx) function. Inside the check(icon, indx) function, we are using the same parameters transferred to that function and move it to the scene[level].main(icon, indx) function.

The main function is called whenever there’s a click and only if the scene has the accurate icon clicked (the answer) because the playScene) (function includes an event listener and calls the check(icon, indx) function whenever a click is made. I’ll show an example of the main function below.

main: function (icon, indx) {
      console.log(`you clicked ${icon} ${indx}, the answer is  ${scene[level].answer[clickCount-1]}`);
      hide(icon);
      changeInstructions(this.instructions[clickCount]);
 }

Moron Test Final Blog Post

The Moron test was a fun process to build. I really liked the tutorials because they were easy to understand and easy to follow. Quarantine really made this semester a drag, something I like the most about classes, especially Mikes, are the classroom environment and the people there. Anyway, on to the blog questions.

Describe the process for clearing and mapping icons to the DOM. What are the three steps and the core functions? Describe how the four methods used for this process work – createElementfirstElementChildremoveChild, and appendChild.

First, create a variable using a query selector that contains all the instances of the icon and the instruction. In the function there is a statement that checks if there is an element within the space. This is done by using .firstElementChild if there is one then we clear using removeChild and pass the first child as a reference. For the mapping function we take in the level as a parameter we then access that scenes icons using the level.

2. Describe how the spread operator is used to convert a node list of selected elements into an array. Describe why we needed this conversion and how the array was helpful for our first test in the game’s logic.

The spread operator uses many arguments and passes them one at a time. This allows us to turn the node list into an array that we can iterate through.

3. Describe how the scene[level].main(icon, indx) function is called within the check(icon, indx) function. How are we tracking the icon and index values? Why do we need to track and pass the icon and index values to the scene’s main function? What does the scene’s main function do with these values?

Within our “check(icon, indx)” function we use “scene[level].main(icon, indx);” in order to access scene-specific instructions. In order to access this we need level, the icon that was clicked, and the index of the icon. This is passed into main in the scenes.js file. Main takes these values and if there are scene-specific instructions they will take place.

4. Describe how the start and finish functions are called in moron.js. How does the program know if there is a start or finish function to run? Where is each start or finish function placed and why?

The start is used if we need to run a function when a scene starts. Main is all of the logic functions. Finish is used once all needed clicks are completed. Start and finish are null unless things need to be done after clicks.

Link to Directory with all the work

Week 7 Blog Post

Blogging Questions

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

The first argument is what the event listener is ‘listening’ for. The second argument is is a function. When the event happens then the function argument will run. An example of this is if a “click” happens it will run a function.

x.addEventListener("click", myFunction);

Week 6 Blog Post

Blog Question

Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

querySelector() is taking the CSS Style selector and It returns the first element that matches a given CSS Style Selector.

function yeet(){
          document.querySelector("p").style.backgroundColor = "cyan";
}

querySelectorAll() returns all elements of the specified CSS selector

function yeet() {
  let n, i;
  n = document.querySelectorAll(".example");
  for (i = 0; i < x.length; i++) {
    n[i].style.backgroundColor = "cyan";
  }
}

Directory Link

Week 4 Blog Post

Blog Question

With the array methods pop() / push() and shift() / unshift(), explain the difference between the returned value of each method and the resulting value of the array? Use an example piece of code with the Enlighter tool to support your description.

Pop() removes an element from the end of an array, making it smaller.

let list = ['a' , 'b', 'c'];
list.pop();
//New list is ['a', 'b']

Push() adds elements to the end of an array.

let list = ['a', 'b'];
list.push(c);
//New array is ['a' , 'b', 'c']

Shift() removes elements from the beginning of an array.

let list = ['a' , 'b', 'c'];
list.shift();
//New array is ['b', 'c']

Unshift() adds elements to the beginning of an array.

let list =  ['b', 'c'];
list.unshift(a);
//New array is ['a' , 'b', 'c']

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaand heres the directory link.

Week[1-7] Blogs.

Week 1:

Describe how you connect an HTML file and a JS file.

You can connect an HTML and JS file with a script tag along with the source.Included inside the HTML file.

<script src="file-name-example.js"></script>

Describe the difference between writing code in the Chrome console and writing HTML/JS files that are then open in Chrome.

When writing code in the chrome console it is usually to test things out and is temporary.The code isn’t saved when you write it in chrome.When you write code in an HTML/JS file and it is opened in chrome that is to make sure the code works.

Week 2:

How can you use “falsey-ness” to determine if a string value can be coerced to a number? Why does this work? What is “type coercion” anyway?

Falsey-ness is used to determine if a value is true or false.Coercion is the process of converting the type of one value to another.Number to string and vise versa.

What do you need to do to convert a for loop to a while loop? In order to convert a for loop to a while loop you have to restructure how it’s written.

Week 3:

Describe the difference between declaring a function and calling a function. Give an example in a code snippet using Enlighter. Have you example use an argument.

Declaring a function basically tells the computer what the function is and should do.Calling a function is executing what you told the computer to do.

function multiple (x) {
Return x * x
}

function test(x,y) {    return y – x;}

Week 4:

pop() removes a string from the end of the array,push() adds onto the end of the array,

shift() removes a string from the front of the array unshift() adds to the front of the array.

var colors = ["red", "green", "blue" ]
colors["red", "green", "blue"]

colors.push("orange") <!-- adds a string to the end of the array -->
colors.pop();     <!-- removes the last string in the array -->
colors.unshift("black")
colors.shift();

Week 6:

Describe how the querySelector() and querySelectorAll() methods work. What is the difference between the values returned for each method? Use an example code snippet to support your answer; include sample HTML and JS selectors.

querySelector() is taking the CSS Style selector and It returns the first element that matches a given CSS Style Selector.

function test(){
        document.querySelector(“p”).style.backgroundColor
}

querySelectorAll()  returns all matching elements instead of only one.

function test(){
        document.querySelectorall(“p”).style.backgroundColor
}

Week 7:

Describe what the two arguments of the addEventListener method are and how they work. Give four examples of the first argument and give examples of using an anonymous function vs. a declared function for the second argument. Use the code-insert tool for your examples.

When  you use the addEventListener method the first argument is what the event listener is listening for. The second argument is what it does after its heard what it’s been listening for specifically.

document.addEventListener(“mouseover”, myFunction);
document.addEventListener(“click”, mySecondFunction);
document.addEventListener(“mouseout”, myThirdFunction);document.addEventListener(“change”, myOtherFunction);

Tutorial and problem-sets.

[FINAL] – The Moron Test – Complete (OPTIONAL)


Hello. I decided the add a little to the Moron Test because I felt I did not contribute much than following the walk through. I wanted to add some important functions such as the stopwatch timer at the bottom. It took me a while to figure it out but I found a perfect example that I doctored up to work on my example. I also wanted to complete all the scenes. I believe I finished all but I may have skipped some by accident. There is about 25+ scenes. I wanted to split up the scene.js file because there was so many scenes to navigate. Some of the starter functions had functions inside of them to satisfy the timer scenes. This was a problem because there was scope issues. I did not attempt the timeline showing your progress in the test. Most of all the scenes are completed.

Timer Function

Completed Majority of the Scenes

This will probably be my last blog post about the Moron Test (unless Mike uploads something). I had fun doing this project. Other than that, I plan to add a Audit linking to all the blog post that I have done. Goodbye!


css.php