# Odin Project- Assignment diary

This document is for keeping track of what I did on some of the Odin projects assignments in order to remind me how I made some solutions to some common everyday problems. I won't write about all of the exercises, but about those that I feel necessary to absolutely core memorize.

I began this document during the CSS- Flex exercises, which is why those are the first documented cases.

## Chapters

[1. Fullsite Assignments](###Fullsite-assignments)
[2. Flexbox](###Flexbox)
[3. Javascript](###Javascript)

### Fullsite assignments

[1. Landing Page](####1.-Flexbox---Landing-Page)
[2. TicTacToe-NoGUI](####2.-TicTacToe-NoGUI)
[3. TicTacToe-GUI](####3.-TicTacToe-GUI)
[4. Etch-A-Sketch](####4.-Etch-A-Sketch)

#### 1. Flexbox - Landing Page

This is the second project in The Odin Project that is started from the scratch.

Direct link to the site:

https://developerjuho.github.io/OdinLandingPage

Important lessons:

1) In VS Code typing ! And pressing Enter in a blank HTML-file will create the basic HTML structure automatically.
2) When using border-radius for rounding corners, using pixel values is better.
3) Setting colors to rgba(0,0,0,0) will make them transparent

[Back to the top](##Chapters)

#### 2. TicTacToe-NoGUI

Link to the repository:

https://github.com/DeveloperJuho/OdinRockPaperScissors [Previous version can be found from main branch]

A very basic Javascript exercise to create a tictactoe game to be played inside browsers console. Nothing really new or noteworthy on this one. Good exercise for basic problemsolving and rehearsing basic Javascript.

[Back to the top](##Chapters)

#### 3. TicTacToe-GUI

https://github.com/DeveloperJuho/OdinRockPaperScissors [Latest version in main branch]

I began the assignment by making a raw image of what the UI should look like to make it easier to build the HTML-structure. After that I pieced together the HTML and simultaneously I wrote the necessary CSS to put pieces to their correct spots without think about beautifying the page. I was able to build the basic site without any googling, which felt pretty good.

Changing the logic from console to graphical user interface was pretty simple to make as the basic functionalities were already there. This was the first assignment in which it was important to let the initial DOM to load before adding any eventlisteners or loading elements in to variables.

The first, and only, hurdle I created for myself was when I converted all the return keywords in to messages to be sent to the paragraph. At first I didn't realize that I had fundamentally changed how the functions work, as I had removed the parts that stop the function when a result happens. After I added return keywords back, everything worked as expected.

[Back to the top](##Chapters)

#### 4. Etch-A-Sketch

https://github.com/DeveloperJuho/OdinEtchASketch

The first part was to come up with the logic on how the grid is formed. My plan was to separate rows and grids. The plan was to create as many rows as there are squares in a row. First a row is created and then squares are added to that row. Then the row is appended to the grid container. Those steps are repeated to create a square of squares. I created the function in a way that it allows a custom number for squares from very beginning.

Adding the basic functionality for just changing the hovered squares to black was easy. At first I decided that I'll include the class "painted" to all of the hovered squares and have the style attached in to the CSS-file. This worked for the first part of the solution, but I ended up doing a rework when I added the extra functionalities.

I began the extra portion by adding the functionality for random RGB-backgrounds. I figured that when user changes the mode, the eventlistener should change to the new mode. This caused multitude of problems and I figured that there has to be a simpler way, so I went back to the planning board.

After some planning I realized that there is no need to pass different functions to the individual squares when mode is changed. It would be both cumbersome for the program and extremely lenghty codewise. Instead I reformatted the painting so that only a paint function is passed to the squares. Changing the mode will alter the global variable for the mode. The paint function will use the correct color depenging on the mode when it is called by the squares event handler. This isn't the safest method when dealing with real life situations, as the mode variable is global, but for this small assignment it worked.

New lessons: In 2022 a new function was created for web development, which is called parent.replaceChildren(). When calling just that it will remove all the child nodes attached to that parent.

### Flexbox

#### Flexbox-header

Basic idea:

There are links on both sides of a logo inside a header. Everything is centered. Logo is at absolute center, links are aligned to their sides with a small padding. When screen is shrunk, everything moves flexibly and according to the previous rules.

1) Change headers display to flex [Content now flows horizontally]
2) Change ul display to flex [List content now flows horizontally]
3) Set logos left and right margins to auto. [Logos sides will take all of the empty space]
4) Change ul paddings. Ul has some browser default values.
5) Change headers paddings for visual purposes
6) Add gap value inside Ul. [Separates flex-items for visual purposes]

After checking out the solution, using margins at logo wasn't necessary. In the header using Justify-content: Space-between; would have done the same in this exercise.

#### Flexbox-header 2

basic idea:

Header with two separate parts. Left part stays always on the left and doesn't move. Right part is always stuck to the right, but it is the one that moves when screen size is different.

1) Change all the needed containers to flex
2) Add a new div to create right side container
3) add Margin-left: auto; to right side, so that its left side will always fill the empty space.
4) Add paddings and remove the default ones from ul

The solution also makes div for the left side and uses Space-between again. That is a better solution, because it removes the gap that I have between the list and the whole right side, as I have set gap to the header aswell.

I decided to change my answer closer to the solution, but my initial answer is written above.

#### Flexbox-information

Basic idea:

Title on it's own row, centered. On content row, there are four images with text. Image is on top and text is on bottom, maximum width is 200px. Text wraps.

1) I added a container to wrap all of the images and texts.
2) I added containers for all image+text combos
3) For studying purposes I made title container a flexbox
4) Container containing all item-containers is now flexbox
5) Item-containers are turned to flex and their direction is turned to column.

5a) I believe that because text is an item inside image-container, it already wraps according to text rules, so there is no need to add any additional wrap rules.

6) Added necessary paddings, max-width and gaps.

#### Flexbox-modal

I'll start with my ending thoughts of this exercise first. The problem with these self-learning platforms is that in many cases the exercises are not worded carefully enough.

In this exercise I thought that it was supposed to be done using flexboxes only, as was the case in one of the previous exercises. In this exercise tho, it was necessary to leave some of the divs in to their default display settings, so they will fall either to a new row (text) or stay inline (buttons). This makes sense in a real world scenario, so the solution is elegant, but in an exercise situation a better hint than "revisit flex-shrink" would have been stating that not everything has to be a flexbox.

I'll leave my incomplete flexbox tries in to the git files, so I can prove that I didn't just copy the solution in this one.

#### Flexbox-layout

Knowing the rules from the previous exercise, this one made much more sense.

Basic Idea:

A site with a header, content area and a footer. Header is on top and footer at the bottom, with content in the middle. Header and footer must always stay at their places on every screen size. Some additional styling rules were added.

Main flexbox points in this one were:

1) Whole page is a flexbox with a direction of column. Easiest way to make header and footer stay in their place is to use space-between, so they will take the space they need from top and bottom and leave the rest for content.
2) Header and footer are their separate flexboxes, with default direction of row. Once again space-between is used to separate the links.
3) The rest was just doing normal stylings to make content centered, remove default paddings and text decorations and adding finishing stylings to background, buttons and texts.

#### Flexbox-layout 2

Once again a good exercise, like the previous one. I'm not going to detail about all the things that were done to achieve the end result, it is all visible in the repository. I have written some important learning experiences below.

Important lessons:

1) For some reason I forgot that flex-grow and flex-shrink are used in the flex-items styles, not as a rule for the container. This fixed the issue for the middle not taking all the empty space and the sidebar not taking all the room it required.

2) Easiest way to center text vertically is to use flexbox and use justify-content or align-items: center, depending on flex-direction.

[Back to the top](##Chapters)

### Javascript

#### Hello world!

A basic exercise intended just for initial installations with NPM and how to run tests using NPM.

New lessons

1) Calling the test function that has been named in to the exercises package.json calls for Jest. The call is:

#### Tasks 2-4

New lessons

1) Javascript functions have an invisible argument list, that can have "infinite" number of arguments. It is accessed by numeral indices and arguments won't have to be declared in the function declaration. Arguments works as an array, so normal array functions work.

const arrayWithMultipleArguments = function(){
let firstArgument = arguments[0];
}

2) Type comparison can be done by doing. [Type-table](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof#description)

if(typeof variable == "type-in-string")

[Back to the top](##Chapters)


#### Dom-manipulation

*Shopping list*

Good small practice to setup dynamic content in to the page. 

Important:

1) When adding an eventListener into any element, remember to wrap-up the function to be called in to an anonymous function. Otherwise the function will be called when the eventListener is added on-load and it cannot be called again.

    1b) Example from my assignment:

addButton.addEventListener("click", () => addItem());

It is important to leave past mistakes visible for learning purposes. The above statement is wrong. If you want to call a named function, the function must be declared before adding it to an event listener. Also the function call doesn't use parenthesis, because we are not calling the function, we are setting the code inside the function as a parameter for the callback.

addButton.addEventListener("click", addItem);

[Back to the top](##Chapters)

#### Objects and advanced arrays