SVG Practice

Basically the entire day I was trying to figure out how to make circles into a separate

SVG element because originally they looked like this

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    viewBox="0 0 800 800" width="200" height="200" id="green_circle">

    <circle cx="100" cy="100" r="70" fill="green"/>
    <circle cx="350" cy="200" r="30" fill="black" stroke="red" stroke-width="3"/>
    <circle cx="45" cy="45" r="45" fill="blue" stroke="green" stroke-width="30"/>
    <circle cx="230" cy="90" r="100" fill="orange"/>
    <circle cx="800" cy="800" r="10" fill="purple"/>

    <!-- Place your SVG elements here... -->

</svg>

But when I had viewed the page source for your circles that were in separate SVG 

elements they were written as seen below and that had confused me.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="300" height="300" id="circle_1">

    <circle cx="150" cy="150" r="120"
        stroke="black" stroke-width="3" fill="purple" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="300" height="300" id="circle_2">

    <circle cx="150" cy="150" r="120"
        stroke="black" stroke-width="3" fill="red" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
    width="300" height="300" id="circle_3">

    <circle cx="150" cy="150" r="120"
        stroke="black" stroke-width="3" fill="blue" />
</svg>

Anyway, it's sort of tough to explain my thought process but when you fixed my code

it ended up looking like what I originally had. 

So isn't your code 3 separate SVG elements while mine is 1?

SVG Lesson 2

Lesson 2 talked about how to make circles in SVG and how the different attributes affect the circles.
Changes you can make include:

• Position with cx and cy which act like an x-y plane
• You can change the color, like red, with fill="red"
• The size of the circle can be changed by changing the radius, r 
• The stroke of an image is a border and the larger the value the larger the border allowing you to have a very thin border or a border that takes up the majority of the image

Here's a link to my circle experiment: http://students.gctaa.net/~snicholakos/circles.svg
I'll change them to be separate SVG elements when I get the chance

JavaScript

• Modulo Operator: The modulo operator is used with the percentage character (%) and results in the remainder of two numbers. 30 % 7 = 2
• Substring(): allows the user to show only a section of a string. "example".substring(3, 6) would result in mpl
• Variables: Variables are used to save values with a name like var myAge = 4; so now the number 4 is pegged to myAge
• Var: used to declare variables var myAge = 4;

Intro to JavaScript

Terms that were in the lesson

• Data types: Data types are what they are called. They are literally types of data like the ones listed below such as string, number, or boolean.
• Strings: A letter, number, or a combination of letters or numbers that are within quotes. Any word or letter in quotes is a string like "woop woop woop 123456789"
• Numbers: Numbers are simple, they are used to count and can be used with operators although they do not require quotes. 3, 156, 7, etc are all numbers and are used for mathematical purposes
• Booleans: There are only two values associated with booleans, true and false. If used with operators either true or false will be the result. Things like 10 > 10 would evaluate to false but 10 > 9 would evaluate to true.
• Comparison Operators: These are used with numbers to analyse the two depending on what comparison operator was used. They can be simple statements like 7 === 7. The comparison operators include 
• > means greater than
• < means less than
• <= means less than or equal to
• >= means greater than or equal to
• !== means does not equal
• === means equal to
• Conditional Statements: These are statements that only evaluate code if they meet a certain condition giving them the name conditional statements. Statements such as if are conditional statements because code will only be evaluated if something is true.
• Modulo Operator:
• String Length: You can figure out the length of the string with .length and the result is the number of characters, like "aki".length has a result of 3. Also includes spaces.
• Substring():
• Variables:
• Var:

I was able to finish 17/28 lessons in Getting Started with Programming. I also finished up the first SVG assignment quickly, I might have to make the link a bit more distinct but it's been set up.

Intro to SVG

I've read through the 1st lesson of Getting down with SVG. The 1st lesson was not very challenging to go through and I think I understand the terminology. Also, thank you for helping me with the aliases and such. I still have to set up the index page so I will get working on that ASAP.

Tabs

So I tried to work on adding tabs and they looked neat because they made the web page look like a folder but I ran into quite a few problems. To start with I keep having trouble with that link at the bottom of the page. Some of the previous CSS did not synergize too well with what I added and the links need to be tweaked. The color could also use a bit more work but I will deal with that later.

This was also very helpful: http://htmldog.com/articles/tabs/

CSS

I'm assuming I should still be working on CSS but I can't add much more to check it out with what I know. I was reading the lessons from W3schools for a refresher and I also learned a couple of things like how to use gradients and some more stuff about backgrounds. I would also like to add tabs to check it out similar to what you have for your lessons. CSS has actually gotten rather complicated so I will have to do a bit of reading but I'll do what I can.

CSS

I fixed all the big problems I was having(like I accidentally had the body back-ground color set to white which looked terrible and I hadn't noticed...) but there are still a couple of smaller problems. I haven't actually tested to see if it's valid CSS and I was never able to figure out how to move a specific link but it's not a huge issue. I also didn't format some text because I didn't know how to do it within an external style sheet although I could just easily fix it within the file itself like seen below in the login and add items page. I'll try to work on any suggestions you have.

Check it out CSS

So I fixed the color of the web page but now I am having trouble with formatting, like I can't seem to prevent some links from being a list and I don't know if the problem is with my CSS or something else. I also want to fill in some of the white spaces with color. For the most part I am fine with the color but I think I could work on it a bit. Anyway, like I said, if I could fix the formatting it would look much better.

Check it out CSS

There were a few problems before I could start editing the page but once that was out of the way I could start to mess around with the look of the website. It was looking pretty good at the start but then it managed to turn out uglier so I'm going to have to make a lot of changes. I think a better background color would help a lot because right now it's hard to look at.

Starting to work on check it out

Let me just say that Chris was a huge help for getting me started. I have no idea how to use git hub, Ubuntu, etc nearly as well as him but he helped a lot with that. I can now start working on adding some CSS to check it out and I'm trying to figure out what kind of color pallete to work with. This is the current look of the web pages, by the way. I don't think they currently look too awful but I'll try to improve it and I'll post pictures when I finish. Also, if I had to grade code academy's curriculum I think I would give it a B because it's certainly not perfect but it's still good and I definitely learned something.

 

Stuff

On Wednesday and Thursday I was mainly just watching Alex, he told me about his project and what he is working with. He taught me a couple things about XML and I was able to help a little while he was coding with python.

SQL

On Tuesday I helped Masud with SQL. I think he now knows how to operate some commands better and he practiced with creating and inserting data.

Code Academy

I didn't do much on Monday for reasons but here are my thoughts on code academy. Keep in mind that I knew a little python to begin with and I am only 50% complete with the course but at first the lesson was pretty slow and at some points it was pretty quick but that isn't a very big problem. It's nice how it has background on every problem and it gives real world examples. Probably the best thing about it is that it's interesting because it's really hard to learn something that's boring to read.

Code Academy

I continued with my Python and it has been more practice with dictionaries and loops which is good I think because I need it. I now better understand how to use for loops when applied to lists and dictionaries, there was one problem that I thought was challenging where I had to loop through a grocery list and decrease the stock by one. Anyways, I was a little confused on how to loop through a dictionary or list but I get it fairly well now. Also, I will work on check it out tomorrow because I was feeling sort of lazy after break.

http://www.codecademy.com/anicholakos